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

@layer components {
  /* Base components */
  .card {
    @apply bg-white rounded-lg shadow-md p-6 mb-4;
  }

  .info-card {
    @apply bg-white rounded-lg border shadow-md p-4 mb-4 pr-4;
  }

  .card-header {
    @apply m-5 p-4 rounded bg-brand-green text-white;
  }
  
  /* Buttons */
  .btn {
    @apply inline-flex px-4 py-2 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors whitespace-nowrap;
  }
  
  .btn-primary {
    @apply bg-brand-green text-white hover:bg-brand-green/90 focus:ring-brand-green;
  }
  
  .btn-secondary {
    @apply bg-gray-100 text-black hover:bg-gray-50 focus:ring-gray-200;
  }
  
  .btn-danger {
    @apply bg-action-red text-white hover:bg-action-red/90 focus:ring-action-red;
  }
  
  .btn-warning {
    @apply bg-action-yellow text-white hover:bg-action-yellow/90 focus:ring-action-yellow;
  }
  
  /* Button sizes */
  .btn-sm { @apply px-3 py-1.5 text-sm; }
  .btn-lg { @apply px-6 py-3 text-lg; }
  
  /* Button states */
  .btn-loading {
    @apply opacity-75 cursor-not-allowed;
  }
  
  .btn:disabled {
    @apply opacity-50 cursor-not-allowed;
  }
  
  .btn-responsive {
    @apply btn;
    @apply text-sm sm:text-base; /* Smaller text on mobile */
    @apply px-3 py-1.5 sm:px-4 sm:py-2; /* Smaller padding on mobile */
  }
  
  /* Typography */
  .heading-1 { @apply text-2xl font-bold; }
  .heading-2 { @apply text-xl font-semibold; }
  .heading-3 { @apply text-lg font-medium leading-5; }
  .text-body { @apply text-base; }
  .text-small { @apply text-sm; }
  .text-tiny { @apply text-xs; }
  
  .text-primary { @apply text-brand-gray-900; }
  .text-secondary { @apply text-brand-gray-700; }
  .text-muted { @apply text-brand-gray-500; }
  .text-subtle { @apply text-brand-gray-400; }

  .text-empty { @apply px-6 py-4 text-center text-gray-500; }

  
  /* Form elements */
  .form-label {
    @apply block text-sm font-medium text-brand-gray-700 mb-1;
  }
  
  .form-input {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-green focus:ring focus:ring-brand-green/20;
  }
  
  .form-select {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-green focus:ring focus:ring-brand-green/20;
  }
  
  .form-checkbox {
    @apply rounded border-gray-300 text-brand-green focus:ring-brand-green focus:ring-offset-0;
  }
  
  .form-radio {
    @apply border-gray-300 text-brand-green focus:ring-brand-green focus:ring-offset-0;
  }
  
  /* Form validation states */
  .form-input-error {
    @apply form-input border-action-red focus:border-action-red focus:ring-action-red/20;
  }
  
  .form-input-success {
    @apply form-input border-brand-green focus:border-brand-green focus:ring-brand-green/20;
  }
  
  .form-error-message {
    @apply text-action-red text-sm mt-1;
  }
  
  .form-success-message {
    @apply text-brand-green text-sm mt-1;
  }
  
  .form-input:disabled {
    @apply bg-brand-gray-100 cursor-not-allowed;
  }
  
  /* Status indicators */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .badge-green {
    @apply bg-green-100 text-green-800;
  }
  
  .badge-red {
    @apply bg-red-100 text-red-800;
  }
  
  .badge-yellow {
    @apply bg-yellow-100 text-yellow-800;
  }
  
  /* Table styling */
  .table-container {
    @apply overflow-x-auto rounded-lg shadow-md;
  }
  
  .table {
    @apply min-w-full divide-y divide-gray-200;
  }
  
  .table-header {
    @apply bg-brand-gray-100;
  }
  
  .table-header-cell {
    @apply px-6 py-3 text-left text-xs font-medium text-brand-gray-500 uppercase tracking-wider;
  }
  
  .table-body {
    @apply bg-white divide-y divide-gray-200;
  }
  
  .table-row {
    @apply hover:bg-brand-gray-100;
  }
  
  .table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-brand-gray-500;
  }
  
  /* Modern Layout */
  .modern-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: white;
  }

  /* Unified Header */
  .unified-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background-color: #059669;
    border-bottom: 1px solid #047857;
    position: sticky;
    top: 0;
    z-index: 50;
    height: 80px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .header-logo {
    flex-shrink: 0;
    width: 240px;
  }

  .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.2s;
  }

  .logo-link:hover {
    opacity: 0.8;
  }

  .logo-text {
    margin-left: 1rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: white;
    letter-spacing: -0.025em;
  }

  .header-search {
    flex: 1;
    max-width: 600px;
    margin: 0 2rem;
  }

  .sidebar-toggle {
    flex-shrink: 0;
    padding: 0.75rem;
    background-color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    transition: all 0.2s;
    cursor: pointer;
    color: #047857;
  }

  .sidebar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.05);
  }

  /* Modern Sidebar Styles */
  .modern-sidebar {
    position: fixed;
    top: 80px;
    left: 0;
    width: 280px;
    height: calc(100vh - 80px);
    background-color: #fafbfc;
    border-right: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
    z-index: 40;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .sidebar-collapsed {
    transform: translateX(-280px);
  }

  .sidebar-collapsed:hover,
  .sidebar-hover-expanded {
    transform: translateX(0);
  }

  .main-content {
    flex: 1;
    margin-left: 280px;
    margin-top: 20px;
    transition: margin-left 0.3s ease-in-out;
    background-color: white;
  }

  .main-content.content-expanded {
    margin-left: 0;
  }

  .content-wrapper {
    padding: 0 2rem 1rem 2rem;
    margin: 0 auto;
    background-color: white;
    min-height: calc(100vh - 80px);
  }

  /* Navigation */
  .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem 0;
    min-width: 0;
  }

  /* Main Navigation Items */
  .nav-item {
    display: flex;
    align-items: center;
    padding: 0.875rem 2rem;
    margin: 0 1rem 0.5rem 1rem;
    border-radius: 0.75rem;
    color: #475569;
    transition: all 0.2s;
    text-decoration: none;
    font-weight: 500;
  }

  .nav-item:hover {
    background-color: #f1f5f9;
    color: #059669;
    transform: translateX(4px);
  }

  .nav-item.active {
    background-color: #ecfdf5;
    color: #059669;
    border-left: 4px solid #059669;
    padding-left: calc(2rem - 4px);
  }

  .nav-icon {
    font-size: 1.25rem;
    margin-right: 1rem;
    transition: transform 0.2s;
    width: 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .nav-item:hover .nav-icon {
    transform: scale(1.1);
  }

  .nav-text {
    font-weight: 500;
    font-size: 0.95rem;
  }

  /* Section Navigation */
  .nav-section {
    margin: 1rem 1rem 1.5rem 1rem;
  }

  .nav-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    color: #475569;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
  }

  .nav-section-title:hover {
    background-color: #f1f5f9;
    color: #059669;
    transform: translateX(4px);
  }

  .nav-section-title:hover .nav-icon {
    transform: scale(1.1);
  }

  .nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: white;
    background-color: #059669;
    border-radius: 9999px;
    margin-left: auto;
  }

  /* Submenu */
  .nav-submenu {
    margin-left: 2rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    border-left: 2px solid #e2e8f0;
    display: none;
    transition: all 0.2s ease-in-out;
  }

  .nav-section[data-expanded="false"] .nav-submenu {
    display: none;
  }

  .nav-section[data-expanded="true"] .nav-submenu {
    display: block;
  }

  .nav-subitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    margin: 0.25rem 1rem;
    font-size: 0.875rem;
    color: #64748b;
    border-radius: 0.5rem;
    transition: all 0.2s;
    text-decoration: none;
    font-weight: 500;
    border-left: 3px solid transparent;
  }

  .nav-subitem:hover {
    color: #059669;
    background-color: #f8fafc;
    transform: translateX(4px);
    border-left-color: #e2e8f0;
  }

  .nav-subitem.active {
    color: #059669;
    background-color: #ecfdf5;
    font-weight: 600;
    border-left-color: #059669;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .nav-subtext {
    flex: 1;
  }

  .nav-subbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: white;
    background-color: #dc2626;
    border-radius: 9999px;
    margin-left: 0.5rem;
  }

  .nav-divider {
    border-top: 1px solid #e2e8f0;
    margin: 0.75rem 0;
  }

  /* Subsections */
  .nav-subsection {
    margin: 0.75rem 0;
  }

  .nav-subsection-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    margin: 0.25rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0.5rem;
    background-color: #f8fafc;
    cursor: pointer;
    transition: all 0.2s;
  }

  .nav-subsection-title:hover {
    background-color: #e2e8f0;
    color: #059669;
  }

  .nav-subsection-icon {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .subsection-chevron {
    transition: transform 0.2s;
  }

  .nav-subsection[data-expanded="false"] .subsection-chevron {
    transform: rotate(-90deg);
  }

  .nav-subsection[data-expanded="true"] .subsection-chevron {
    transform: rotate(0deg);
  }

  .nav-subsection-content {
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 2px solid #e2e8f0;
  }

  .nav-subsection[data-expanded="false"] .nav-subsection-content {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .nav-subsection[data-expanded="true"] .nav-subsection-content {
    max-height: 500px;
    opacity: 1;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  /* Subitem Icons */
  .nav-subicon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    color: #64748b;
    transition: all 0.2s;
  }

  .nav-subitem:hover .nav-subicon {
    color: #059669;
    transform: scale(1.1);
  }

  .nav-subitem.active .nav-subicon {
    color: #059669;
  }

  /* Footer */
  .sidebar-footer {
    border-top: 1px solid #e2e8f0;
    padding: 1.5rem 2rem;
    background-color: #f1f5f9;
    margin-top: auto;
  }

  .user-profile {
    display: flex;
    align-items: center;
  }

  .user-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background-color: #059669;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    margin-right: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .user-info {
    flex: 1;
    min-width: 0;
  }

  .user-name {
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
  }

  .user-role {
    font-size: 0.825rem;
    color: #64748b;
    margin-top: 0.125rem;
  }

  .logout-form {
    display: inline-flex;
  }

  .logout-btn {
    padding: 0.625rem;
    color: #64748b;
    transition: all 0.2s;
    border-radius: 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
  }

  .logout-btn:hover {
    color: #dc2626;
    background-color: #fef2f2;
  }

  /* Smart Search Styles */
  .search-wrapper {
    width: 100%;
  }

  .search-container {
    position: relative;
    width: 100%;
  }

  .search-container.search-active .search-input {
    border-color: #059669;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.15);
    background-color: white;
    transform: scale(1.02);
  }
  
  .search-container.search-active {
    position: relative;
  }
  
  .search-container.search-active::before {
    content: '';
    position: absolute;
    inset: -8px;
    background: linear-gradient(45deg, rgba(5, 150, 105, 0.1), rgba(5, 150, 105, 0.05));
    border-radius: 12px;
    z-index: -1;
    animation: pulse-glow 2s ease-in-out infinite;
  }
  
  @keyframes pulse-glow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.02); }
  }

  .search-input {
    width: 100%;
    padding: 0.75rem 4rem 0.75rem 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.9);
    color: #1e293b;
    font-size: 0.95rem;
    transition: all 0.2s;
    outline: none;
  }

  .search-input::placeholder {
    color: #64748b;
  }

  .search-input:focus {
    border-color: white;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  }

  .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    height: 1.125rem;
    color: #6b7280;
  }

  .search-shortcut {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: #6b7280;
    transition: all 0.3s ease;
  }
  
  .search-container.search-active .search-shortcut {
    opacity: 0.5;
    transform: translateY(-50%) scale(0.9);
  }

  .search-shortcut kbd {
    padding: 0.25rem 0.5rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, monospace;
    color: #475569;
    font-weight: 500;
  }

  @media (max-width: 640px) {
    .search-shortcut {
      display: none;
    }
  }

  .search-results {
    @apply absolute top-full left-0 right-0 mt-2 bg-white rounded-lg shadow-xl 
           border border-gray-200 z-50 max-h-96 overflow-y-auto;
  }

  .search-loading {
    @apply flex items-center justify-center py-8 text-gray-500;
  }

  .result-group {
    @apply border-b border-gray-100 last:border-b-0;
  }

  .result-group-header {
    @apply px-4 py-2 text-xs font-semibold text-gray-600 bg-gray-50 
           sticky top-0 border-b border-gray-100;
  }

  .result-item {
    @apply block px-4 py-3 hover:bg-gray-50 border-l-4 border-transparent 
           transition-all duration-150 cursor-pointer;
  }

  .result-item:hover,
  .result-item.selected {
    @apply bg-gray-50 border-brand-green;
  }

  .result-item.selected {
    @apply bg-brand-green/5;
  }

  .result-content {
    @apply flex items-center space-x-3;
  }

  .result-icon {
    @apply text-lg flex-shrink-0;
  }

  .result-text {
    @apply flex-1 min-w-0;
  }

  .result-title {
    @apply font-medium text-gray-900 truncate;
  }

  .result-subtitle {
    @apply text-sm text-gray-500 truncate;
  }

  .result-type {
    @apply text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded-full flex-shrink-0;
  }

  .search-highlight {
    @apply bg-yellow-200 text-yellow-900 px-0.5 rounded;
  }

  .no-results {
    @apply flex flex-col items-center justify-center py-8 text-gray-500;
  }

  .no-results-icon {
    @apply text-3xl mb-2;
  }

  .no-results-text {
    @apply font-medium mb-1;
  }

  .no-results-suggestion {
    @apply text-sm text-gray-400;
  }

  .search-error {
    @apply flex flex-col items-center justify-center py-8 text-red-500;
  }

  .search-error-icon {
    @apply text-3xl mb-2;
  }

  .search-error-text {
    @apply font-medium;
  }

  /* Command Palette Styles */
  .command-item {
    @apply transition-colors duration-150 cursor-pointer;
  }

  .command-item:hover {
    @apply bg-gray-50;
  }

  /* Quick Actions FAB */
  .quick-actions-fab {
    @apply fixed bottom-6 right-6 w-14 h-14 bg-brand-green text-white rounded-full shadow-lg 
           hover:shadow-xl transition-all duration-200 flex items-center justify-center 
           transform hover:scale-105 active:scale-95 z-40;
  }

  /* Hover effects and animations */
  .nav-section-title:hover .chevron {
    @apply text-brand-green transform scale-110;
  }

  .nav-item:hover .nav-icon,
  .nav-section-title:hover .nav-icon {
    @apply transform scale-110 transition-transform duration-200;
  }

  .nav-badge {
    @apply animate-pulse;
  }

  .sidebar-logo:hover .sidebar-logo-text {
    @apply text-brand-green;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .modern-layout {
      flex-direction: column;
    }
    
    .modern-sidebar {
      width: 100%;
      position: relative;
      height: auto;
      max-height: 50vh;
      overflow-y: auto;
    }
    
    .sidebar-collapsed {
      transform: translateY(-100%);
    }
    
    .main-content {
      margin-left: 0;
      flex: 1;
    }
    
    .content-wrapper {
      padding: 1.5rem;
    }
    
    .content-expanded {
      margin-left: 0;
    }

    .sidebar-toggle {
      position: fixed;
      top: 1rem;
      right: 1rem;
      left: auto;
      border-radius: 0.5rem;
      border: 1px solid #e2e8f0;
    }

    .search-input {
      padding: 0.75rem 3rem 0.75rem 2.5rem;
      font-size: 0.875rem;
    }

    .nav-submenu {
      margin-left: 1rem;
      padding-left: 1rem;
      border-left: 1px solid #e2e8f0;
    }

    .nav-section-title {
      padding: 0.75rem;
    }

    .nav-item {
      padding: 0.75rem 1.5rem;
      margin: 0 0.75rem 0.25rem 0.75rem;
    }

    .sidebar-logo {
      padding: 1.25rem 1.5rem;
    }

    .sidebar-logo-text {
      font-size: 1.125rem;
    }
    
    .sidebar-footer {
      padding: 1.25rem 1.5rem;
    }
  }
  
  /* Action buttons for purchase orders */
  .action-button {
    @apply flex flex-col items-center p-4 border rounded-md transition-all hover:border-brand-green;
  }
  
  .action-button-selected {
    @apply border-brand-green bg-brand-green/10;
  }
  
  /* Steps navigation */
  .steps-container {
    @apply flex items-center mb-8;
  }
  
  .step {
    @apply flex-1;
  }
  
  .step-active {
    @apply text-brand-green;
  }
  
  .step-completed {
    @apply text-brand-green;
  }
  
  .step-upcoming {
    @apply text-brand-gray-500;
  }
}

/* Modern UI enhancements */
.card {
  @apply transition-shadow duration-200 hover:shadow-lg;
}

.btn {
  @apply transition-all duration-200 transform active:scale-95;
}

.form-input, .form-select {
  @apply transition-all duration-200;
}

.form-input:focus, .form-select:focus {
  @apply scale-[1.02];
}

.table-row {
  @apply transition-colors duration-150;
}

/* Subtle animations for better UX */
.sidebar-link {
  @apply transition-all duration-150;
}

.action-button {
  @apply transition-all duration-200 transform hover:scale-105 hover:shadow-md;
}

.badge {
  @apply transition-all duration-150;
}

/* Loading states */
.btn-loading {
  @apply relative;
}

.btn-loading::after {
  content: '';
  @apply absolute inset-0 bg-white/20 rounded-md animate-pulse;
}

/* Updated Pagy styles with brand colors */
.pagy { 
  @apply flex space-x-1 items-center font-medium text-sm text-brand-gray-700 mt-6; 
  a:not(.gap) { 
    @apply block rounded-lg px-3 py-1 transition-colors duration-200 
           hover:bg-brand-green/10 hover:text-brand-green
           focus:outline-none focus:ring-2 focus:ring-brand-green/30;
  }
  a:not([href]) { 
    /* disabled links */ 
    @apply text-brand-gray-400 bg-brand-gray-100 cursor-default; 
  }
  a.current { 
    @apply text-white bg-brand-green hover:bg-brand-green; 
  }
  label { 
    @apply inline-flex items-center space-x-2 bg-brand-gray-100 rounded-lg px-3 py-1; 
    
    input { 
      @apply bg-white border border-gray-300 rounded-md 
             focus:ring-2 focus:ring-brand-green/30 focus:border-brand-green;
    }
  }
}

/* Focused Sidebar Styles */
.back-button {
  @apply flex items-center px-4 py-3 border-b border-gray-200 bg-gray-50;
}

.back-button.hidden {
  display: none !important;
}

.nav-back-btn {
  @apply flex items-center space-x-2 text-sm font-medium text-gray-600 hover:text-brand-green transition-colors duration-200;
}

.nav-menu {
  @apply space-y-1 px-0 py-0;
}

.nav-section-btn {
  @apply w-full flex items-center justify-between px-4 py-3 text-left border-none bg-transparent cursor-pointer;
}

.nav-section-btn:hover {
  @apply bg-gray-50 text-brand-green;
}

.nav-chevron {
  @apply ml-auto flex-shrink-0 text-gray-400 transition-transform duration-200;
}

.section-header {
  @apply flex items-center space-x-3 px-4 py-4 border-b-2 border-gray-300 bg-gray-50 font-bold text-gray-900 shadow-sm;
}

.section-title {
  @apply text-lg font-bold;
}

.nav-subsection {
  @apply mt-6 first:mt-4;
}

.nav-subsection-title {
  @apply px-4 py-3 text-sm font-bold text-gray-700 uppercase tracking-wide bg-gray-100 border-l-4 border-gray-400 rounded-r-md mb-2;
}

.collapsed {
  transform: translateX(-280px);
}

.expanded {
  transform: translateX(0);
}