@layer theme {
  :root {
    --primary-color: #FA8072;
    --secondary-color: #FFE4E1;
    --accent-color: #FF7F50;
    --danger-color: #d9534f;
    --warning-color: #f59e0b;
    --text-primary: #2c2c2c;
    --text-secondary: #555;
    --border-color: #f0b3a7;
    --bg-primary: #fffaf8;
    --bg-container: #ffffff;
    --salmon-50: #fef2f2;
    --salmon-100: #fee2e2;
    --salmon-200: #fecaca;
    --salmon-300: #fca5a5;
    --salmon-400: #f87171;
    --salmon-500: #FA8072;
    --salmon-600: #e66a5e;
    --salmon-700: #cc5b52;
    --salmon-800: #b24c46;
    --salmon-900: #993d3a;
    --green-caja: #10b981;
    --green-caja-hover: #059669;
    --row-alt: #f1f5f9;
  }

  [data-theme='dark'] {
    --primary-color: #FA8072;
    --secondary-color: #2b1f1f;
    --accent-color: #FF7F50;
    --danger-color: #ff4d4d;
    --warning-color: #f59e0b;
    --text-primary: #f7f7f7;
    --text-secondary: #ccc;
    --border-color: #4a2d2d;
    --bg-primary: #1f1414;
    --bg-container: #2b1f1f;
    --green-caja: #059669;
    --green-caja-hover: #10b981;
    --row-alt: #2d3748;
  }
}

@layer base {
  html, body, #root {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s, color 0.3s;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2;
  }

  .btn-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
    @apply hover:opacity-90 focus:ring-[var(--accent-color)];
  }

  .btn-secondary {
    background-color: var(--secondary-color) !important;
    color: var(--text-primary) !important;
    @apply hover:bg-[var(--salmon-100)] focus:ring-[var(--accent-color)];
  }

  .btn-success {
    background-color: var(--accent-color) !important;
    color: white !important;
    @apply hover:opacity-90 focus:ring-[var(--accent-color)];
  }

  .btn-danger {
    background-color: var(--danger-color) !important;
    color: white !important;
    @apply hover:opacity-90 focus:ring-red-300;
  }

  .btn-warning {
    background-color: var(--warning-color) !important;
    color: white !important;
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 hover:opacity-90;
  }

  .sidebar-item {
    @apply flex items-center px-3 py-2 rounded-lg transition-colors cursor-pointer text-[var(--text-secondary)];
  }

  .sidebar-item:hover {
    background-color: var(--secondary-color) !important;
    color: var(--primary-color) !important;
  }

  .sidebar-item.active {
    @apply text-white !important;
    background-color: var(--primary-color) !important;
  }

  .card {
    @apply rounded-lg shadow-sm border p-6 bg-[var(--bg-container)] border-[var(--border-color)] transition-all;
  }

  .input {
    @apply w-full px-3 py-2 border rounded-lg focus:outline-none bg-[var(--bg-container)] text-[var(--text-primary)] border-[var(--border-color)];
  }

  .input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 4px var(--accent-color);
  }

  .user-card {
    @apply mt-3 p-2 rounded border bg-[var(--bg-container)] text-[var(--text-primary)] border-[var(--border-color)];
  }

  .caja-panel {
    @apply mx-4 mt-4 rounded-lg p-4 shadow-sm border bg-[var(--bg-container)] border-[var(--border-color)];
  }

  table {
    @apply w-full border-collapse text-[var(--text-primary)] bg-[var(--bg-container)] border border-[var(--border-color)];
  }

  th, td {
    @apply border border-[var(--border-color)] p-2 text-left;
  }

  th {
    background-color: var(--secondary-color) !important;
    color: var(--text-primary) !important;
  }

  tr:nth-child(even) {
    background-color: var(--row-alt) !important;
  }

  .modal-content {
    @apply rounded-xl shadow-lg p-4 bg-[var(--bg-container)] border border-[var(--border-color)] text-[var(--text-primary)];
  }

  .modal-header {
    @apply border-b border-[var(--border-color)] text-[var(--primary-color)] font-semibold;
  }

  .modal-footer {
    @apply border-t border-[var(--border-color)];
  }

  .auth-loading {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
  }

  .auth-spinner {
    border-top: 4px solid var(--primary-color) !important;
  }

  .account-dashboard-card {
    @apply p-6 rounded-lg border bg-[var(--bg-container)] border-l-4 border-l-[var(--accent-color)] transition-all cursor-pointer;
  }

  .account-dashboard-card:hover {
    @apply border-l-[var(--primary-color)] shadow-lg -translate-y-0.5;
  }

  .products-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .product-card {
    background: var(--bg-container) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    height: 220px !important;
    min-height: 220px !important;
    width: 100% !important;
    max-width: 180px !important;
    margin: 0 auto !important;
    position: relative !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
  }

  .product-image-container {
    width: 100% !important;
    height: 130px !important;
    min-height: 130px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-container) !important;
    padding: 8px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  .product-image-container img {
    max-width: 90% !important;
    max-height: 90% !important;
    min-width: 60px !important;
    min-height: 60px !important;
    object-fit: contain !important;
    transition: transform 0.2s ease !important;
  }

  .product-info {
    padding: 6px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-container) !important;
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    overflow: hidden !important;
    flex: 1 !important;
  }

  .product-name-container {
    width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 3px !important;
    min-height: 36px !important;
    max-height: 42px !important;
    overflow-y: auto !important;
  }

  .product-name {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    line-height: 1.3 !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 2px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .product-price-stock-container {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    border-top: 1px dashed var(--border-color) !important;
    padding-top: 4px !important;
    margin-top: 2px !important;
  }

  .product-price {
    font-size: 13px !important;
    font-weight: bold !important;
    color: var(--primary-color) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin: 0 0 2px 0 !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .product-stock {
    font-size: 9px !important;
    color: var(--text-secondary) !important;
    text-align: center !important;
    line-height: 1.1 !important;
    opacity: 0.9 !important;
    font-weight: 500 !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .product-name-container::-webkit-scrollbar {
    width: 2px !important;
  }

  .product-name-container::-webkit-scrollbar-thumb {
    background: var(--primary-color) !important;
    border-radius: 2px !important;
  }

  .stock-badge-corner {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    padding: 3px 6px !important;
    font-size: 9px !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    z-index: 10 !important;
    min-width: 18px !important;
    text-align: center !important;
    line-height: 1.1 !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
  }
}

@layer utilities {
  @media (min-width: 1920px) {
    .products-grid {
      grid-template-columns: repeat(7, 1fr) !important;
      gap: 12px !important;
    }
    
    .product-card {
      height: 200px !important;
      max-width: 180px !important;
    }
    
    .product-image-container {
      height: 140px !important;
    }
    
    .product-info {
      height: 60px !important;
    }
  }

  @media (max-width: 1500px) {
    .products-grid {
      grid-template-columns: repeat(5, 1fr) !important;
    }
  }

  @media (max-width: 1300px) {
    .products-grid {
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 12px !important;
    }
    
    .product-card {
      height: 200px !important;
      max-width: 180px !important;
    }
    
    .product-image-container {
      height: 140px !important;
    }
    
    .product-info {
      height: 60px !important;
    }
  }

  @media (max-width: 1100px) {
    .products-grid {
      grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .product-card {
      height: 210px !important;
      max-width: 190px !important;
    }
    
    .product-image-container {
      height: 147px !important;
    }
    
    .product-info {
      height: 63px !important;
      padding: 8px 10px !important;
    }
    
    .product-name {
      font-size: 13px !important;
    }
    
    .product-price {
      font-size: 14px !important;
    }
  }

  @media (max-width: 850px) {
    .products-grid {
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 8px !important;
    }
    
    .product-card {
      height: 190px !important;
      max-width: 170px !important;
    }
    
    .product-image-container {
      height: 133px !important;
    }
    
    .product-info {
      height: 57px !important;
    }
  }

  @media (max-width: 640px) {
    .products-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 12px !important;
      padding: 12px !important;
    }
    
    .product-card {
      height: 220px !important;
      max-width: 100% !important;
    }
    
    .product-image-container {
      height: 154px !important;
    }
    
    .product-info {
      height: 66px !important;
      padding: 8px 10px !important;
    }
    
    .product-name {
      font-size: 14px !important;
    }
    
    .product-price {
      font-size: 15px !important;
    }
  }

  @media (max-width: 480px) {
    .product-card {
      height: 200px !important;
    }
    
    .product-image-container {
      height: 140px !important;
    }
    
    .product-info {
      height: 60px !important;
    }
    
    .product-name {
      font-size: 13px !important;
    }
    
    .product-price {
      font-size: 14px !important;
    }
  }
}

[data-theme='dark'] {
  background-color: var(--bg-primary) !important;
}

[data-theme='dark'] .bg-white,
[data-theme='dark'] .bg-gray-50,
[data-theme='dark'] .bg-gray-100,
[data-theme='dark'] .bg-gray-200,
[data-theme='dark'] .bg-gray-300,
[data-theme='dark'] .min-h-screen,
[data-theme='dark'] .rounded-lg.border,
[data-theme='dark'] .p-4.rounded-lg,
[data-theme='dark'] .p-6.rounded-lg {
  background-color: var(--bg-container) !important;
}

[data-theme='dark'] .bg-white.p-4.rounded-lg.border,
[data-theme='dark'] .bg-white.p-6.rounded-lg.shadow,
[data-theme='dark'] div[class*="bg-white"],
[data-theme='dark'] div[class*="bg-gray-"]:not([class*="bg-gradient"]) {
  background-color: var(--bg-container) !important;
}

[data-theme='dark'] .text-gray-500,
[data-theme='dark'] .text-gray-600,
[data-theme='dark'] .text-gray-700,
[data-theme='dark'] .text-gray-800,
[data-theme='dark'] .text-gray-900,
[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3,
[data-theme='dark'] h4,
[data-theme='dark'] p,
[data-theme='dark'] span:not(.text-white):not([class*="text-orange"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-blue"]),
[data-theme='dark'] div:not(.text-white):not([class*="text-orange"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-blue"]) {
  color: var(--text-primary) !important;
}

[data-theme='dark'] .border,
[data-theme='dark'] .border-t,
[data-theme='dark'] .border-b,
[data-theme='dark'] .border-l,
[data-theme='dark'] .border-r,
[data-theme='dark'] .border-gray-200,
[data-theme='dark'] .border-gray-300,
[data-theme='dark'] .border-gray-100 {
  border-color: var(--border-color) !important;
}

[data-theme='dark'] input,
[data-theme='dark'] select,
[data-theme='dark'] textarea,
[data-theme='dark'] .input {
  background-color: var(--bg-container) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme='dark'] select option {
  background-color: var(--bg-container) !important;
  color: var(--text-primary) !important;
}

[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.7;
}

[data-theme='dark'] button.bg-gray-200,
[data-theme='dark'] button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.bg-orange-500):not(.bg-green-500):not(.bg-blue-500):not(.bg-red-500):not(.bg-purple-500) {
  background-color: var(--secondary-color) !important;
  color: var(--text-primary) !important;
}

[data-theme='dark'] button.bg-gray-200:hover {
  background-color: var(--salmon-800) !important;
}

[data-theme='dark'] button.text-red-500 {
  color: var(--danger-color) !important;
}

[data-theme='dark'] .bg-blue-600 {
  background-color: #1e40af !important;
}

[data-theme='dark'] .bg-gray-100.flex.justify-between {
  background-color: var(--bg-container) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme='dark'] .border.rounded-lg.p-2.cursor-pointer {
  background-color: var(--bg-container) !important;
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .fixed.inset-0.bg-black.bg-opacity-50 {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

[data-theme='dark'] ::-webkit-scrollbar {
  background-color: var(--bg-primary);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
}

[data-theme='dark'] .bg-orange-500,
[data-theme='dark'] .bg-green-500,
[data-theme='dark'] .bg-red-500,
[data-theme='dark'] .bg-purple-500 {
  color: white !important;
}

[data-theme='dark'] .bg-orange-500 span,
[data-theme='dark'] .bg-green-500 span,
[data-theme='dark'] .bg-red-500 span,
[data-theme='dark'] .bg-purple-500 span {
  color: white !important;
}

[data-theme='dark'] .bg-amber-50,
[data-theme='dark'] .bg-yellow-50,
[data-theme='dark'] .bg-yellow-100,
[data-theme='dark'] .bg-orange-50 {
  background-color: #3d2a1f !important;
}

[data-theme='dark'] .bg-amber-50 *,
[data-theme='dark'] .bg-yellow-50 *,
[data-theme='dark'] .bg-yellow-100 *,
[data-theme='dark'] .bg-orange-50 * {
  color: #fcd34d !important;
}

[data-theme='dark'] .bg-amber-50 .text-amber-700,
[data-theme='dark'] .bg-amber-50 .text-amber-800,
[data-theme='dark'] .bg-yellow-50 .text-yellow-700,
[data-theme='dark'] .bg-yellow-50 .text-yellow-800 {
  color: #fbbf24 !important;
}

[data-theme='dark'] .bg-gradient-to-br.from-purple-50,
[data-theme='dark'] .bg-gradient-to-br.from-purple-50.to-white {
  background: linear-gradient(to bottom right, #2d1f3d, #1f1414) !important;
}

[data-theme='dark'] .bg-gradient-to-br.from-purple-50.to-white .text-gray-800,
[data-theme='dark'] .bg-gradient-to-br.from-purple-50.to-white .text-gray-700,
[data-theme='dark'] .bg-gradient-to-br.from-purple-50.to-white .text-gray-600 {
  color: var(--text-primary) !important;
}

[data-theme='dark'] .bg-purple-500 {
  background-color: #7c3aed !important;
}

[data-theme='dark'] .bg-purple-500 .text-white {
  color: white !important;
}

[data-theme='dark'] .bg-yellow-100.text-yellow-800,
[data-theme='dark'] .bg-yellow-100,
[data-theme='dark'] .px-2.py-1.text-xs.rounded-full.bg-yellow-100 {
  background-color: #4d3a1a !important;
  color: #fcd34d !important;
}

[data-theme='dark'] .bg-yellow-100,
[data-theme='dark'] .bg-blue-100,
[data-theme='dark'] .bg-purple-100,
[data-theme='dark'] .bg-indigo-100,
[data-theme='dark'] .bg-green-100 {
  background-color: #2d2d2d !important;
}

[data-theme='dark'] .bg-yellow-100.text-yellow-800,
[data-theme='dark'] .bg-blue-100.text-blue-800,
[data-theme='dark'] .bg-purple-100.text-purple-800,
[data-theme='dark'] .bg-indigo-100.text-indigo-800,
[data-theme='dark'] .bg-green-100.text-green-800 {
  color: var(--text-primary) !important;
}

[data-theme='dark'] .bg-white.border.rounded-lg.p-4.shadow-sm,
[data-theme='dark'] .bg-white.border.rounded-lg.p-4,
[data-theme='dark'] .bg-white.border.rounded-lg.p-6.shadow-sm {
  background-color: var(--bg-container) !important;
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .bg-white.border.rounded-lg.p-4.text-center .text-2xl,
[data-theme='dark'] .bg-white.border.rounded-lg.p-4.text-center .text-sm {
  color: var(--text-primary) !important;
}

[data-theme='dark'] .bg-white.border.rounded-lg.p-4.text-center .text-blue-600 {
  color: #60a5fa !important;
}

[data-theme='dark'] .bg-white.border.rounded-lg.p-4.text-center .text-green-600 {
  color: #34d399 !important;
}

[data-theme='dark'] .bg-white.border.rounded-lg.p-4.text-center .text-red-600 {
  color: #f87171 !important;
}

[data-theme='dark'] select.w-full.px-3.py-2.border.border-gray-300.rounded-md {
  background-color: var(--bg-container) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .bg-gray-100.text-gray-700,
[data-theme='dark'] button.bg-gray-100 {
  background-color: var(--secondary-color) !important;
  color: var(--text-primary) !important;
}

[data-theme='dark'] .absolute.top-1.right-1.text-xs.px-1\.5.py-0\.5.rounded-full.bg-green-500,
[data-theme='dark'] .absolute.top-1.right-1.text-xs.px-1\.5.py-0\.5.rounded-full.bg-orange-500,
[data-theme='dark'] .absolute.top-1.right-1.text-xs.px-1\.5.py-0\.5.rounded-full.bg-red-500 {
  color: white !important;
}

[data-theme='dark'] .text-xs.text-gray-400,
[data-theme='dark'] .text-xs.text-gray-500,
[data-theme='dark'] .text-sm.text-gray-500,
[data-theme='dark'] .text-gray-400 {
  color: var(--text-secondary) !important;
}

[data-theme='dark'] i,
[data-theme='dark'] .fas,
[data-theme='dark'] .far,
[data-theme='dark'] .fab {
  color: inherit !important;
}

[data-theme='dark'] .max-w-6xl.mx-auto .bg-white.border.rounded-lg.overflow-hidden {
  background-color: var(--bg-container) !important;
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .bg-yellow-50,
[data-theme='dark'] .bg-gray-50.border-b {
  background-color: var(--secondary-color) !important;
}

[data-theme='dark'] .bg-yellow-50 .text-gray-800,
[data-theme='dark'] .bg-gray-50.border-b .text-gray-800 {
  color: var(--text-primary) !important;
}

[data-theme='dark'] .bg-gray-50,
[data-theme='dark'] thead.bg-gray-50,
[data-theme='dark'] .bg-gray-100 {
  background-color: var(--secondary-color) !important;
}

[data-theme='dark'] table,
[data-theme='dark'] .bg-white.dark\:bg-gray-800,
[data-theme='dark'] .rounded-lg.shadow,
[data-theme='dark'] .overflow-x-auto {
  background-color: var(--bg-container) !important;
}

[data-theme='dark'] td,
[data-theme='dark'] th,
[data-theme='dark'] .text-gray-900,
[data-theme='dark'] .text-gray-800,
[data-theme='dark'] .text-gray-700,
[data-theme='dark'] .text-gray-600 {
  color: var(--text-primary) !important;
}

[data-theme='dark'] table,
[data-theme='dark'] td,
[data-theme='dark'] th,
[data-theme='dark'] .border,
[data-theme='dark'] .border-b,
[data-theme='dark'] .border-t,
[data-theme='dark'] .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .bg-green-100,
[data-theme='dark'] .bg-blue-100,
[data-theme='dark'] .bg-purple-100,
[data-theme='dark'] .bg-indigo-100,
[data-theme='dark'] .bg-red-100,
[data-theme='dark'] .bg-orange-100,
[data-theme='dark'] .bg-gray-100 {
  background-color: var(--secondary-color) !important;
}

[data-theme='dark'] .text-green-800,
[data-theme='dark'] .text-blue-800,
[data-theme='dark'] .text-purple-800,
[data-theme='dark'] .text-indigo-800,
[data-theme='dark'] .text-red-800,
[data-theme='dark'] .text-orange-800,
[data-theme='dark'] .text-gray-800 {
  color: var(--text-primary) !important;
}

[data-theme='dark'] .text-red-600.bg-red-100,
[data-theme='dark'] .text-orange-600.bg-orange-100,
[data-theme='dark'] .text-green-600.bg-green-100 {
  background-color: var(--secondary-color) !important;
  color: var(--text-primary) !important;
}

[data-theme='dark'] .px-2.py-1.rounded-full.text-xs.font-medium,
[data-theme='dark'] span.px-2.py-1.rounded-full.text-xs.font-medium {
  background-color: var(--secondary-color) !important;
  color: var(--text-primary) !important;
}

[data-theme='dark'] select,
[data-theme='dark'] input,
[data-theme='dark'] textarea {
  background-color: var(--bg-container) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme='dark'] select option {
  background-color: var(--bg-container) !important;
  color: var(--text-primary) !important;
}

[data-theme='dark'] .fixed.inset-0.bg-black\/50,
[data-theme='dark'] .fixed.inset-0.bg-black\/40 {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

[data-theme='dark'] .bg-white.rounded-xl,
[data-theme='dark'] .bg-white.rounded-lg,
[data-theme='dark'] .bg-white.dark\:bg-gray-800 {
  background-color: var(--bg-container) !important;
}

[data-theme='dark'] .text-gray-700,
[data-theme='dark'] .text-gray-600,
[data-theme='dark'] .text-gray-500,
[data-theme='dark'] .text-gray-400 {
  color: var(--text-secondary) !important;
}

[data-theme='dark'] .bg-blue-500,
[data-theme='dark'] .bg-purple-500,
[data-theme='dark'] .bg-indigo-500,
[data-theme='dark'] .bg-green-500,
[data-theme='dark'] .bg-orange-500,
[data-theme='dark'] .bg-red-500 {
  background-color: var(--primary-color) !important;
  color: white !important;
}

[data-theme='dark'] .bg-blue-500:hover,
[data-theme='dark'] .bg-purple-500:hover,
[data-theme='dark'] .bg-indigo-500:hover,
[data-theme='dark'] .bg-green-500:hover,
[data-theme='dark'] .bg-orange-500:hover,
[data-theme='dark'] .bg-red-500:hover {
  opacity: 0.85;
}

[data-theme='dark'] .bg-blue-500.text-white,
[data-theme='dark'] .bg-purple-500.text-white,
[data-theme='dark'] .bg-indigo-500.text-white,
[data-theme='dark'] .bg-green-500.text-white,
[data-theme='dark'] .bg-orange-500.text-white,
[data-theme='dark'] .bg-red-500.text-white {
  color: white !important;
}

[data-theme='dark'] tr:nth-child(even) {
  background-color: var(--row-alt) !important;
}

[data-theme='dark'] tr:hover {
  background-color: var(--secondary-color) !important;
}

[data-theme='dark'] .bg-blue-50,
[data-theme='dark'] .bg-blue-100 {
  background-color: #1e2a3a !important;
}

[data-theme='dark'] .bg-blue-50 .text-blue-800,
[data-theme='dark'] .bg-blue-100 .text-blue-800,
[data-theme='dark'] .bg-blue-50 .text-blue-700,
[data-theme='dark'] .bg-blue-100 .text-blue-700 {
  color: #93c5fd !important;
}

[data-theme='dark'] .bg-gray-50,
[data-theme='dark'] .bg-gray-100 {
  background-color: var(--secondary-color) !important;
}

[data-theme='dark'] .text-xl,
[data-theme='dark'] .text-lg {
  color: inherit;
}

[data-theme='light'] {
  --text-primary: #2c2c2c !important;
  --text-secondary: #555555 !important;
}

[data-theme='light'] * {
  color: #2c2c2c !important;
}

[data-theme='light'] .btn-primary,
[data-theme='light'] .btn-primary *,
[data-theme='light'] .btn-success,
[data-theme='light'] .btn-success *,
[data-theme='light'] .btn-danger,
[data-theme='light'] .btn-danger *,
[data-theme='light'] .btn-warning,
[data-theme='light'] .btn-warning *,
[data-theme='light'] .bg-blue-500,
[data-theme='light'] .bg-blue-500 *,
[data-theme='light'] .bg-purple-500,
[data-theme='light'] .bg-purple-500 *,
[data-theme='light'] .bg-red-500,
[data-theme='light'] .bg-red-500 *,
[data-theme='light'] .bg-green-500,
[data-theme='light'] .bg-green-500 * {
  color: white !important;
}

[data-theme='light'] .text-green-600,
[data-theme='light'] .text-green-600 *,
[data-theme='light'] .text-orange-600,
[data-theme='light'] .text-orange-600 *,
[data-theme='light'] .text-red-600,
[data-theme='light'] .text-red-600 *,
[data-theme='light'] .text-blue-600,
[data-theme='light'] .text-blue-600 *,
[data-theme='light'] .text-purple-600,
[data-theme='light'] .text-purple-600 * {
  color: inherit !important;
}

[data-theme='light'] .bg-gray-50,
[data-theme='light'] .bg-gray-100,
[data-theme='light'] .bg-gray-200 {
  background-color: #f9fafb !important;
}

[data-theme='light'] .bg-white {
  background-color: #ffffff !important;
}

[data-theme='light'] th,
[data-theme='light'] thead th {
  color: #2c2c2c !important;
  background-color: var(--secondary-color) !important;
}

.auth-loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background-color: var(--bg-primary);
}

.auth-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid var(--secondary-color);
  border-top-color: var(--primary-color);
  border-right-color: var(--accent-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 0 15px rgba(250, 128, 114, 0.3);
}

.auth-loading p {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  animation: pulse 1.5s ease-in-out infinite;
}

.auth-dots {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.auth-dots span {
  width: 8px;
  height: 8px;
  background-color: var(--primary-color);
  border-radius: 50%;
  animation: bounce 1.4s ease-in-out infinite;
}

.auth-dots span:nth-child(1) {
  animation-delay: 0s;
}

.auth-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.auth-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

[data-theme='dark'] .card {
  background-color: var(--bg-container) !important;
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .card .text-sm,
[data-theme='dark'] .card label,
[data-theme='dark'] .card .text-sm.font-medium {
  color: var(--text-primary) !important;
}

[data-theme='dark'] .input {
  background-color: var(--bg-container) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .btn-secondary {
  background-color: var(--secondary-color) !important;
  color: var(--text-primary) !important;
}

[data-theme='dark'] .border-t {
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .grid .text-sm,
[data-theme='dark'] .grid label,
[data-theme='dark'] .grid .text-gray-600,
[data-theme='dark'] .grid .text-gray-500 {
  color: var(--text-primary) !important;
}

[data-theme='dark'] .bg-white.dark\:bg-gray-800 {
  background-color: var(--bg-container) !important;
}

[data-theme='dark'] .text-gray-900,
[data-theme='dark'] .text-gray-800,
[data-theme='dark'] .text-gray-700,
[data-theme='dark'] .text-gray-600,
[data-theme='dark'] .text-gray-500 {
  color: var(--text-primary) !important;
}

[data-theme='dark'] .bg-gray-50 {
  background-color: var(--secondary-color) !important;
}

[data-theme='dark'] .bg-gray-100 {
  background-color: var(--secondary-color) !important;
}

[data-theme='dark'] .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-color) !important;
}

[data-theme='dark'] input[type="checkbox"] {
  background-color: var(--bg-container) !important;
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .rounded-lg.shadow {
  background-color: var(--bg-container) !important;
}

[data-theme='dark'] .border-gray-200,
[data-theme='dark'] .border-gray-300 {
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .bg-yellow-50 {
  background-color: #3d2a1f !important;
}

[data-theme='dark'] .bg-yellow-50 .text-yellow-800 {
  color: #fcd34d !important;
}

[data-theme='dark'] .bg-green-100,
[data-theme='dark'] .bg-red-100,
[data-theme='dark'] .bg-orange-100,
[data-theme='dark'] .bg-purple-100 {
  background-color: var(--secondary-color) !important;
}

[data-theme='dark'] .text-green-800,
[data-theme='dark'] .text-red-800,
[data-theme='dark'] .text-orange-800,
[data-theme='dark'] .text-purple-800 {
  color: var(--text-primary) !important;
}

[data-theme='dark'] .text-orange-600,
[data-theme='dark'] .text-yellow-600 {
  color: #fcd34d !important;
}

[data-theme='dark'] .text-green-600 {
  color: #34d399 !important;
}

[data-theme='dark'] .text-red-600 {
  color: #f87171 !important;
}

[data-theme='dark'] .bg-opacity-80 {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

[data-theme='dark'] .fixed.inset-0.bg-black {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

[data-theme='dark'] .bg-white {
  background-color: var(--bg-container) !important;
}

[data-theme='dark'] .bg-gray-50,
[data-theme='dark'] .bg-gray-100,
[data-theme='dark'] .bg-gray-50\/80,
[data-theme='dark'] .bg-gray-50\/30,
[data-theme='dark'] .bg-gray-50\/20 {
  background-color: var(--secondary-color) !important;
}

[data-theme='dark'] .bg-gradient-to-br.from-gray-50.to-gray-100,
[data-theme='dark'] .bg-gradient-to-r.from-gray-50.to-gray-100 {
  background: var(--bg-container) !important;
}

[data-theme='dark'] .bg-gray-800 {
  background-color: var(--primary-color) !important;
}

[data-theme='dark'] .bg-indigo-50 {
  background-color: #2d1f3d !important;
}

[data-theme='dark'] .bg-indigo-100 {
  background-color: #3d2a4d !important;
}

[data-theme='dark'] .bg-blue-50 {
  background-color: #1e2a3a !important;
}

[data-theme='dark'] .bg-blue-100 {
  background-color: #1e3a5f !important;
}

[data-theme='dark'] .bg-green-50 {
  background-color: #1a3d2a !important;
}

[data-theme='dark'] .bg-green-100 {
  background-color: #1a4d3a !important;
}

[data-theme='dark'] .bg-yellow-50 {
  background-color: #3d2a1f !important;
}

[data-theme='dark'] .text-gray-500,
[data-theme='dark'] .text-gray-600,
[data-theme='dark'] .text-gray-700,
[data-theme='dark'] .text-gray-800,
[data-theme='dark'] .text-gray-900,
[data-theme='dark'] .text-gray-400,
[data-theme='dark'] .text-gray-300 {
  color: var(--text-primary) !important;
}

[data-theme='dark'] .text-blue-600,
[data-theme='dark'] .text-indigo-600 {
  color: #60a5fa !important;
}

[data-theme='dark'] .text-red-600 {
  color: #f87171 !important;
}

[data-theme='dark'] .text-green-600 {
  color: #34d399 !important;
}

[data-theme='dark'] .text-white {
  color: white !important;
}

[data-theme='dark'] .border-gray-100,
[data-theme='dark'] .border-gray-200,
[data-theme='dark'] .border-gray-300 {
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
[data-theme='dark'] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .shadow-lg,
[data-theme='dark'] .shadow-sm {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

[data-theme='dark'] .bg-gradient-to-r.from-blue-600.to-blue-700 {
  background: linear-gradient(to right, #2563eb, #1d4ed8) !important;
}

[data-theme='dark'] .bg-gradient-to-r.from-blue-700.to-blue-800 {
  background: linear-gradient(to right, #1d4ed8, #1e40af) !important;
}

[data-theme='dark'] .bg-black\/50 {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

[data-theme='dark'] button.bg-gray-800 {
  background-color: var(--primary-color) !important;
  color: white !important;
}

[data-theme='dark'] button.bg-gray-100 {
  background-color: var(--secondary-color) !important;
  color: var(--text-primary) !important;
}

[data-theme='dark'] button.bg-gray-100:hover {
  background-color: #3d2a2a !important;
}

[data-theme='dark'] .bg-blue-600,
[data-theme='dark'] .bg-blue-700 {
  background-color: #2563eb !important;
}

[data-theme='dark'] .bg-indigo-600 {
  background-color: #4f46e5 !important;
}

[data-theme='dark'] .bg-green-500 {
  background-color: #10b981 !important;
}

[data-theme='dark'] .bg-green-500:hover {
  background-color: #059669 !important;
}

[data-theme='dark'] .text-indigo-600 {
  color: #818cf8 !important;
}

[data-theme='dark'] .bg-white.rounded-xl.shadow-lg.border.border-gray-100,
[data-theme='dark'] .bg-white.rounded-xl.shadow-lg,
[data-theme='dark'] .bg-white.rounded-xl {
  background-color: var(--bg-container) !important;
  border-color: var(--border-color) !important;
}

[data-theme='dark'] span[class*="px-2"].rounded.text-xs {
  background-color: var(--secondary-color) !important;
  color: var(--text-primary) !important;
}

[data-theme='dark'] .bg-red-100,
[data-theme='dark'] .bg-yellow-100,
[data-theme='dark'] .bg-green-100,
[data-theme='dark'] .bg-blue-100,
[data-theme='dark'] .bg-indigo-100 {
  background-color: var(--secondary-color) !important;
}

[data-theme='dark'] .text-red-800,
[data-theme='dark'] .text-yellow-800,
[data-theme='dark'] .text-green-800,
[data-theme='dark'] .text-blue-800,
[data-theme='dark'] .text-indigo-800 {
  color: var(--text-primary) !important;
}

[data-theme='dark'] .text-red-700,
[data-theme='dark'] .text-yellow-700 {
  color: var(--text-primary) !important;
}