@import 'sweetalert2/dist/sweetalert2.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Brand colors - Emerald green for grants/money */
    --color-primary: #059669;
    --color-primary-hover: #047857;
    --color-accent: #f59e0b;
    --color-accent-hover: #d97706;
    --color-secondary: #2563eb;
    --color-secondary-hover: #1d4ed8;

    /* Status colors */
    --color-success: #22c55e;
    --color-warning: #eab308;
    --color-danger: #ef4444;
    --color-info: #3b82f6;

    /* Grant status */
    --color-open: #22c55e;
    --color-closed: #6b7280;
    --color-deadline-urgent: #ef4444;
    --color-deadline-warning: #eab308;
    --color-deadline-safe: #22c55e;

    /* Light mode semantic colors */
    --color-background: #ffffff;
    --color-surface: #f9fafb;
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;
  }

  /* Dark mode colors (for future use) */
  .dark {
    --color-background: #111827;
    --color-surface: #1f2937;
    --color-text: #f9fafb;
    --color-text-muted: #9ca3af;
    --color-border: #374151;
  }

  body {
    @apply font-sans antialiased;
  }
}

@layer components {
  /* ========================================
     BUTTONS
     ======================================== */
  .btn {
    @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 h-10 px-4 py-2;
  }

  .btn-secondary {
    @apply btn bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-primary-500 h-10 px-4 py-2;
  }

  .btn-accent {
    @apply btn bg-accent-500 text-white hover:bg-accent-600 focus:ring-accent-400 h-10 px-4 py-2;
  }

  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 h-10 px-4 py-2;
  }

  .btn-ghost {
    @apply btn bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500 h-10 px-4 py-2;
  }

  .btn-sm {
    @apply h-8 px-3 py-1.5 text-sm;
  }

  .btn-lg {
    @apply h-12 px-6 py-3 text-lg;
  }

  /* ========================================
     CARDS
     ======================================== */
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden;
  }

  .card-header {
    @apply px-6 py-4 border-b border-gray-100;
  }

  .card-body {
    @apply p-6;
  }

  .card-footer {
    @apply px-6 py-4 border-t border-gray-100 bg-gray-50;
  }

  /* ========================================
     FORM ELEMENTS
     ======================================== */
  .input {
    @apply block w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-gray-900 placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none transition-colors;
  }

  .input-error {
    @apply input border-red-500 focus:border-red-500 focus:ring-red-500/20;
  }

  .label {
    @apply block text-sm font-medium text-gray-700 mb-1.5;
  }

  .select {
    @apply input appearance-none bg-no-repeat bg-right pr-10;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
  }

  .checkbox {
    @apply w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500 focus:ring-2;
  }

  /* ========================================
     LINKS
     ======================================== */
  .link {
    @apply text-primary-600 hover:text-primary-700 underline-offset-2 hover:underline transition-colors;
  }

  /* ========================================
     BADGES
     ======================================== */
  .badge {
    @apply inline-flex items-center rounded-full text-xs font-medium px-2.5 py-0.5;
  }

  .badge-success {
    @apply badge bg-green-100 text-green-800;
  }

  .badge-warning {
    @apply badge bg-yellow-100 text-yellow-800;
  }

  .badge-danger {
    @apply badge bg-red-100 text-red-800;
  }

  .badge-info {
    @apply badge bg-blue-100 text-blue-800;
  }

  .badge-gray {
    @apply badge bg-gray-100 text-gray-600;
  }

  .badge-primary {
    @apply badge bg-primary-100 text-primary-800;
  }

  .badge-accent {
    @apply badge bg-accent-100 text-accent-800;
  }

  /* Grant status badges */
  .badge-open {
    @apply badge bg-green-100 text-green-800;
  }

  .badge-closed {
    @apply badge bg-gray-100 text-gray-600;
  }

  /* Level badges */
  .badge-estado {
    @apply badge bg-blue-100 text-blue-800;
  }

  .badge-autonomica {
    @apply badge bg-purple-100 text-purple-800;
  }

  .badge-local {
    @apply badge bg-orange-100 text-orange-800;
  }

  /* ========================================
     FLASH MESSAGES
     ======================================== */
  .flash {
    @apply px-4 py-3 rounded-lg text-sm font-medium flex items-center;
  }

  .flash-notice {
    @apply flash bg-green-50 text-green-800 border border-green-200;
  }

  .flash-alert {
    @apply flash bg-red-50 text-red-800 border border-red-200;
  }

  .flash-warning {
    @apply flash bg-yellow-50 text-yellow-800 border border-yellow-200;
  }

  .flash-info {
    @apply flash bg-blue-50 text-blue-800 border border-blue-200;
  }

  /* ========================================
     TABLES
     ======================================== */
  .table-container {
    @apply border border-gray-200 rounded-lg overflow-hidden;
  }

  .table {
    @apply w-full text-sm text-left;
  }

  .table thead {
    @apply bg-gray-50 text-gray-600 uppercase text-xs tracking-wider;
  }

  .table th,
  .table-th {
    @apply px-6 py-3 font-semibold text-left;
  }

  .table td {
    @apply px-6 py-4 border-b border-gray-100;
  }

  .table tbody tr:hover,
  .table-hover tbody tr:hover {
    @apply bg-gray-50;
  }

  .table-striped tbody tr:nth-child(even) {
    @apply bg-gray-50/50;
  }

  /* ========================================
     PAGINATION (Pagy)
     ======================================== */
  .pagy {
    @apply flex space-x-1 font-semibold text-sm text-gray-500;
  }

  .pagy a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-100 hover:bg-gray-200;
  }

  .pagy a:not([href]) {
    @apply text-gray-300 bg-gray-50 cursor-default;
  }

  .pagy a.current {
    @apply text-white bg-primary-600;
  }

  /* ========================================
     GRANT-SPECIFIC STYLES
     ======================================== */
  .grant-card {
    @apply card hover:shadow-md transition-shadow;
  }

  .grant-budget {
    @apply text-lg font-bold text-primary-600;
  }

  .grant-deadline {
    @apply text-sm font-medium;
  }

  .grant-deadline-urgent {
    @apply grant-deadline text-red-600;
  }

  .grant-deadline-warning {
    @apply grant-deadline text-yellow-600;
  }

  .grant-deadline-safe {
    @apply grant-deadline text-green-600;
  }

  /* Amount formatting */
  .amount {
    @apply font-mono;
  }

  .amount-large {
    @apply amount text-2xl font-bold text-primary-600;
  }

  /* ========================================
     STATS CARDS
     ======================================== */
  .stat-card {
    @apply card p-6;
  }

  .stat-value {
    @apply text-3xl font-bold text-gray-900;
  }

  .stat-label {
    @apply text-sm text-gray-500 mt-1;
  }

  .stat-change-positive {
    @apply text-sm text-green-600 font-medium;
  }

  .stat-change-negative {
    @apply text-sm text-red-600 font-medium;
  }

  /* ========================================
     MISC UTILITIES
     ======================================== */
  .divider {
    @apply border-t border-gray-100;
  }

  .section-title {
    @apply text-lg font-semibold text-gray-900;
  }

  .section-subtitle {
    @apply text-sm text-gray-600;
  }

  /* ========================================
     SIDEBAR
     ======================================== */
  .sidebar-panel {
    @apply fixed top-0 left-0 z-40 h-full w-64 bg-white border-r border-gray-200 transition-all duration-300 ease-in-out;
    @apply -translate-x-full md:translate-x-0;
  }

  .sidebar-panel.sidebar-collapsed {
    @apply md:w-20;
  }

  .sidebar-content {
    @apply min-h-screen transition-all duration-300 ease-in-out;
    @apply md:ml-64;
  }

  .sidebar-link {
    @apply flex items-center space-x-3 rounded-lg px-3 py-2.5 text-sm font-medium text-gray-600 transition-colors;
    @apply hover:bg-gray-100 hover:text-gray-900;
  }

  .sidebar-link-active {
    @apply bg-primary-50 text-primary-700 hover:bg-primary-100 hover:text-primary-800;
  }

  .sidebar-icon {
    @apply w-5 h-5 flex-shrink-0;
  }

  .sidebar-label {
    @apply transition-opacity duration-200;
  }

  .sidebar-label-hidden {
    @apply opacity-0 w-0 overflow-hidden;
  }

  .sidebar-section-header {
    @apply flex items-center justify-between w-full px-3 py-2 text-left;
  }

  .sidebar-collapsed .sidebar-section-header {
    @apply justify-center px-0;
  }

  .sidebar-collapsed .sidebar-link {
    @apply justify-center space-x-0 px-0;
  }

  .sidebar-collapsed .sidebar-link .sidebar-icon {
    @apply mx-auto;
  }

  /* Expand/collapse toggle button - positioned as a tab on the right */
  .sidebar-toggle-btn {
    @apply absolute -right-3 top-5 z-50 w-6 h-6 bg-white border border-gray-200 rounded-full shadow-sm;
    @apply flex items-center justify-center text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-colors;
  }

  /* Profile button in collapsed state */
  .sidebar-collapsed .sidebar-profile-btn {
    @apply justify-center space-x-0 px-0;
  }

  /* Header in collapsed state */
  .sidebar-collapsed .sidebar-header {
    @apply justify-center px-0;
  }

  .sidebar-collapsed .sidebar-header a {
    @apply space-x-0;
  }

  /* ========================================
     SEARCH & FILTERS
     ======================================== */
  .filter-group {
    @apply space-y-2;
  }

  .filter-label {
    @apply text-sm font-medium text-gray-700;
  }

  .filter-chip {
    @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 cursor-pointer transition-colors;
  }

  .filter-chip-active {
    @apply filter-chip bg-primary-100 text-primary-700 hover:bg-primary-200;
  }

  .search-box {
    @apply relative;
  }

  .search-box-icon {
    @apply absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400;
  }

  .search-box-input {
    @apply input pl-10;
  }
}

/* ========================================
   FORM ERROR STATES (Devise)
   ======================================== */
.field_with_errors input,
.field_with_errors textarea,
.field_with_errors select {
  @apply border-red-500 focus:border-red-500 focus:ring-red-500/20;
}

.field_with_errors label {
  @apply text-red-600;
}