@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
    --bg-solid: #050915;
    --bg-surface: rgba(255, 255, 255, 0.04);
    --bg-strong: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.12);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --text-primary: #e7ecf8;
    --text-secondary: #9da9c0;
    --accent-1: #7dd3fc;
    --accent-2: #a78bfa;
    --shadow-strong: 0 25px 80px rgba(5, 10, 25, 0.45);
    --shadow-soft: 0 15px 50px rgba(5, 10, 25, 0.28);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-solid);
    background-image:
        radial-gradient(circle at 20% 20%, rgba(125, 211, 252, 0.14), transparent 25%),
        radial-gradient(circle at 80% 0%, rgba(167, 139, 250, 0.12), transparent 22%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    color: var(--text-primary) !important;
    min-height: 100vh;
    letter-spacing: -0.01em;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.05), transparent 36%);
    z-index: -1;
}

a {
    color: inherit;
}

h1, h2, h3, h4 {
    letter-spacing: -0.015em;
}

::selection {
    background: rgba(167, 139, 250, 0.2);
    color: #fff;
}

/* Dark Theme (Default) */
body.dark {
    --bg-solid: #050915;
    --bg-surface: rgba(255, 255, 255, 0.04);
    --bg-strong: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --border-subtle: rgba(255, 255, 255, 0.07);
    --text-primary: #e7ecf8;
    --text-secondary: #9da9c0;
}

/* Shared modern surfaces */
.surface-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
}

.surface-card.elevated {
    box-shadow: var(--shadow-strong);
}

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
}

.section-shell {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
}

.app-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(18px);
    border-radius: 18px;
}

.nav-link-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.nav-link-modern:hover {
    color: var(--text-primary);
    border-color: var(--border-subtle);
    background: rgba(255, 255, 255, 0.04);
}

.nav-link-modern.active {
    color: var(--text-primary);
    border-color: rgba(125, 211, 252, 0.4);
    background: linear-gradient(130deg, rgba(125, 211, 252, 0.16), rgba(167, 139, 250, 0.2));
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
}

.nav-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.06);
}

.stat-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--border-subtle);
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-soft);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 45%);
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
    border-color: var(--border-strong);
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ghost-border {
    border: 1px dashed var(--border-subtle);
    border-radius: 14px;
}

.form-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
}

.input-modern {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-primary);
    padding: 0.8rem 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.input-modern:focus {
    border-color: rgba(125, 211, 252, 0.7);
    box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.18);
    background: rgba(255, 255, 255, 0.1);
}

.btn-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 12px;
    background: linear-gradient(120deg, #7dd3fc, #a78bfa);
    color: #0b1224;
    font-weight: 700;
    padding: 0.85rem 1.1rem;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 12px 24px rgba(125, 211, 252, 0.25);
}

.btn-gradient:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(125, 211, 252, 0.3);
}

.btn-minor {
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    padding: 0.6rem 0.75rem;
    transition: all 0.2s ease;
}

.btn-minor:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 12px;
    background: var(--bg-strong);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-strong);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.5);
    box-shadow: var(--shadow-strong);
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 12px;
    background: #7f1d1d;
    color: #fee2e2;
    padding: 0.7rem 0.95rem;
    border: 1px solid rgba(248, 113, 113, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn-danger:hover {
    transform: translateY(-1px);
    border-color: rgba(248, 113, 113, 0.7);
}

.badge-green,
.badge-amber,
.badge-red,
.badge-gray {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}

.badge-green {
    background: rgba(34, 197, 94, 0.16);
    color: #34d399;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.badge-amber {
    background: rgba(251, 191, 36, 0.16);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.badge-red {
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.badge-gray {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.status-green {
    background: rgba(52, 211, 153, 0.16);
    color: #a7f3d0;
    border: 1px solid rgba(52, 211, 153, 0.4);
}

.status-yellow {
    background: rgba(251, 191, 36, 0.16);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.status-red {
    background: rgba(248, 113, 113, 0.16);
    color: #fecdd3;
    border: 1px solid rgba(248, 113, 113, 0.4);
}

.status-gray {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.table-wrap {
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

table {
    color: var(--text-primary);
    width: 100%;
}

table thead {
    background: rgba(255, 255, 255, 0.03);
}

table th,
table td {
    padding: 0.75rem 1rem;
}

table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.muted-label {
    color: var(--text-secondary);
}

.dark .bg-gray-900 {
    background-color: rgb(17 24 39);
}

.dark .bg-gray-800 {
    background-color: rgb(31 41 55);
}

.dark .bg-gray-700 {
    background-color: rgb(55 65 81);
}

.dark .text-gray-400 {
    color: rgb(156 163 175);
}

.dark .text-gray-300 {
    color: rgb(209 213 219);
}

.dark .text-white {
    color: rgb(255 255 255);
}

.dark .border-gray-800 {
    border-color: rgb(31 41 55);
}

.dark .border-gray-700 {
    border-color: rgb(55 65 81);
}

/* Light Theme */
body.light {
    --bg-solid: #f6f8fc;
    --bg-surface: #ffffff;
    --bg-strong: #ffffff;
    --border-strong: #e2e8f4;
    --border-subtle: #edf1f8;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    background-color: var(--bg-solid) !important;
    background-image:
        radial-gradient(circle at 18% 20%, rgba(55, 166, 255, 0.14), transparent 24%),
        radial-gradient(circle at 85% 0%, rgba(167, 139, 250, 0.12), transparent 26%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.8), rgba(244, 246, 251, 0.6));
    color: var(--text-primary) !important;
}

.light .bg-gray-900 {
    background-color: #ffffff;
}

.light .bg-gray-800 {
    background-color: #f9fafb;
}

.light .bg-gray-700 {
    background-color: #e5e7eb;
}

.light .bg-gray-600 {
    background-color: #d1d5db;
}

.light .bg-gray-500 {
    background-color: #9ca3af;
}

.light .text-gray-400 {
    color: #6b7280;
}

.light .text-gray-300 {
    color: #4b5563;
}

.light .text-gray-200 {
    color: #374151;
}

.light .text-gray-100 {
    color: #1f2937;
}

.light .text-white {
    color: #111827;
}

.light .text-gray-500 {
    color: #6b7280;
}

.light .border-gray-800 {
    border-color: #e5e7eb;
}

.light .border-gray-700 {
    border-color: #d1d5db;
}

.light .border-gray-600 {
    border-color: #d1d5db;
}

.light .stat-card {
    background: linear-gradient(145deg, #ffffff, #f6f9ff) !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 20px 60px rgba(148, 163, 184, 0.22);
}

.light .stat-card:hover {
    box-shadow: 0 28px 70px rgba(59, 130, 246, 0.18);
}

/* Light theme card styles */
.light .card {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Light theme table styles */
.light table thead {
    background-color: #f3f4f6;
}

.light table tbody tr:hover {
    background-color: #f9fafb;
}

.light .divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
    border-color: #e5e7eb;
}

body.light .app-nav {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(246, 248, 253, 0.9));
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

body.light .nav-link-modern:hover {
    background: #f3f6fb;
}

body.light .nav-link-modern.active {
    background: linear-gradient(130deg, rgba(125, 211, 252, 0.14), rgba(167, 139, 250, 0.16));
    box-shadow: 0 15px 45px rgba(59, 130, 246, 0.18);
}

body.light .hero-eyebrow {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-secondary);
}

body.light .form-panel {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 24px 60px rgba(148, 163, 184, 0.2);
}

body.light .btn-minor {
    background: #f1f5f9;
    color: #334155;
}

body.light .btn-gradient {
    box-shadow: 0 16px 36px rgba(59, 130, 246, 0.2);
}

/* Light theme expandable rows */
.light .expandable-row {
    background-color: #f9fafb !important;
}

.light .line-item-row:hover {
    background-color: #f3f4f6 !important;
}

.light .item-row:hover {
    background-color: #f9fafb !important;
}

/* Light theme buttons */
.light .btn-primary {
    background-color: #3b82f6 !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

.light .btn-primary:hover {
    background-color: #2563eb !important;
}

.light .btn-secondary {
    background-color: #e5e7eb !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}

.light .btn-secondary:hover {
    background-color: #d1d5db !important;
}

.light .btn-danger {
    background-color: #fecaca !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

.light .btn-danger:hover {
    background-color: #fca5a5 !important;
}

/* Light theme status badges */
.light .status-green {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
}

.light .status-yellow {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

.light .status-red {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
}

.light .status-gray {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

/* Light theme modals */
.light #syncModal > div,
.light #addNoteModal > div,
.light #createBatchModal > div {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Light theme inputs */
.light input[type="text"],
.light input[type="number"],
.light input[type="email"],
.light input[type="password"],
.light textarea,
.light select {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

.light input[type="text"]:focus,
.light input[type="number"]:focus,
.light input[type="email"]:focus,
.light input[type="password"]:focus,
.light textarea:focus,
.light select:focus {
    border-color: #3b82f6 !important;
}

/* Light theme gradients */
.light .bg-gradient-to-br {
    opacity: 0.9;
}

.light .from-blue-900 {
    --tw-gradient-from: #dbeafe !important;
}

.light .to-blue-800 {
    --tw-gradient-to: #bfdbfe !important;
}

.light .from-red-900 {
    --tw-gradient-from: #fee2e2 !important;
}

.light .to-red-800 {
    --tw-gradient-to: #fecaca !important;
}

.light .from-yellow-900 {
    --tw-gradient-from: #fef3c7 !important;
}

.light .to-yellow-800 {
    --tw-gradient-to: #fde68a !important;
}

.light .from-green-900 {
    --tw-gradient-from: #d1fae5 !important;
}

.light .to-green-800 {
    --tw-gradient-to: #a7f3d0 !important;
}

.light .from-purple-900 {
    --tw-gradient-from: #f3e8ff !important;
}

.light .to-purple-800 {
    --tw-gradient-to: #e9d5ff !important;
}

.light .from-indigo-900 {
    --tw-gradient-from: #e0e7ff !important;
}

.light .to-indigo-800 {
    --tw-gradient-to: #c7d2fe !important;
}

.light .from-orange-900 {
    --tw-gradient-from: #ffedd5 !important;
}

.light .to-orange-800 {
    --tw-gradient-to: #fed7aa !important;
}

/* Light theme border colors for gradients */
.light .border-blue-700 {
    border-color: #93c5fd !important;
}

.light .border-red-700,
.light .border-red-600 {
    border-color: #fca5a5 !important;
}

.light .border-yellow-700,
.light .border-yellow-600 {
    border-color: #fcd34d !important;
}

.light .border-green-700 {
    border-color: #86efac !important;
}

.light .border-purple-700 {
    border-color: #d8b4fe !important;
}

.light .border-orange-700,
.light .border-orange-600 {
    border-color: #fdba74 !important;
}

/* Light theme text colors for stat cards */
.light .text-blue-200,
.light .text-blue-300 {
    color: #1e40af !important;
}

.light .text-red-200,
.light .text-red-300 {
    color: #991b1b !important;
}

.light .text-yellow-200,
.light .text-yellow-300 {
    color: #92400e !important;
}

.light .text-green-200,
.light .text-green-300 {
    color: #065f46 !important;
}

.light .text-purple-200,
.light .text-purple-300 {
    color: #6b21a8 !important;
}

.light .text-orange-200,
.light .text-orange-300 {
    color: #9a3412 !important;
}

/* Light theme in-batch styling */
.light .in-batch {
    opacity: 0.6;
}

/* Light theme - Override Tailwind utility classes */
.light .bg-indigo-600 {
    background-color: #4f46e5 !important;
}

.light .bg-indigo-700 {
    background-color: #4338ca !important;
}

.light .hover\:bg-indigo-700:hover {
    background-color: #4338ca !important;
}

/* Light theme - Badge overrides for better contrast */
.light .bg-purple-900\/30 {
    background-color: rgba(243, 232, 255, 0.8) !important;
}

.light .text-purple-300 {
    color: #7c3aed !important;
}

.light .bg-blue-900\/30 {
    background-color: rgba(219, 234, 254, 0.8) !important;
}

.light .text-blue-300 {
    color: #2563eb !important;
}

.light .text-blue-400 {
    color: #2563eb !important;
}

.light .text-green-400 {
    color: #16a34a !important;
}

.light .text-purple-400 {
    color: #9333ea !important;
}

.light .text-yellow-300 {
    color: #ca8a04 !important;
}

.light .text-orange-300 {
    color: #ea580c !important;
}

.light .text-orange-400 {
    color: #ea580c !important;
}

.light .text-red-300 {
    color: #dc2626 !important;
}

.light .text-red-400 {
    color: #dc2626 !important;
}

/* Light theme - Yellow/Orange warning backgrounds */
.light .bg-yellow-900 {
    background-color: #fef3c7 !important;
}

.light .bg-orange-600 {
    background-color: #ea580c !important;
}

.light .border-orange-600 {
    border-color: #ea580c !important;
}

.light .border-orange-500 {
    border-color: #f97316 !important;
}

.light .bg-yellow-600 {
    background-color: #ca8a04 !important;
}

.light .hover\:bg-yellow-700:hover {
    background-color: #a16207 !important;
}

/* Light theme - Action buttons that need to stay visible */
.light .bg-blue-600 {
    background-color: #2563eb !important;
}

.light .hover\:bg-blue-700:hover {
    background-color: #1d4ed8 !important;
}

.light .bg-green-600 {
    background-color: #16a34a !important;
}

.light .hover\:bg-green-700:hover {
    background-color: #15803d !important;
}

.light .bg-red-600 {
    background-color: #dc2626 !important;
}

.light .hover\:bg-red-700:hover {
    background-color: #b91c1c !important;
}

.light .bg-purple-600 {
    background-color: #9333ea !important;
}

.light .hover\:bg-purple-700:hover {
    background-color: #7e22ce !important;
}

/* Light theme - Scan side badges */
.light .scan-item .bg-green-600 {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

.light .scan-item .bg-blue-600 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* Light theme - Stat card text for better readability */
.light .stat-card .text-white {
    color: #111827 !important;
    font-weight: 600;
}

/* Light theme - Hover effects for selectables */
.light .hover\:bg-blue-600:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* Light theme - Tab active states need better contrast */
.light .border-b-2 {
    border-bottom-width: 3px !important;
}

/* Light theme - Alert/warning sections */
.light .bg-yellow-900.bg-opacity-30 {
    background-color: rgba(254, 243, 199, 0.5) !important;
}

.light .border-yellow-700 {
    border-color: #ca8a04 !important;
}

.light .border-yellow-600 {
    border-color: #ca8a04 !important;
}

/* Light theme - Blue info sections */
.light .bg-blue-900\/30 {
    background-color: rgba(219, 234, 254, 0.5) !important;
}

.light .border-blue-700 {
    border-color: #3b82f6 !important;
}

.light .border-blue-500 {
    border-color: #3b82f6 !important;
}

/* Light theme - Gray/neutral sections for better contrast */
.light .bg-gray-900\/50 {
    background-color: rgba(243, 244, 246, 0.5) !important;
}

.light .bg-gray-800\/50 {
    background-color: rgba(249, 250, 251, 0.5) !important;
}

/* Light theme - Status badge text needs to stay white on colored backgrounds */
.light .bg-orange-600,
.light .bg-red-600,
.light .bg-yellow-600,
.light .bg-green-600,
.light .bg-blue-600,
.light .bg-purple-600,
.light .bg-indigo-600 {
    color: #ffffff !important;
}

/* Light theme - Hover borders for interactive items */
.light .hover\:border-orange-500:hover {
    border-color: #f97316 !important;
}

.light .hover\:border-red-500:hover {
    border-color: #ef4444 !important;
}

.light .hover\:border-yellow-500:hover {
    border-color: #eab308 !important;
}

.light .hover\:border-purple-500:hover {
    border-color: #a855f7 !important;
}

/* Light theme - Inventory analytics hover */
.light .bg-gray-700.hover\:bg-blue-600:hover {
    background-color: #2563eb !important;
}

/* Light theme - Text on colored badges */
.light .text-black {
    color: #111827 !important;
}

/* Light theme - Status badge overrides (used in orders.php financial_status) */
.light .bg-green-900.text-green-200 {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #86efac !important;
}

.light .bg-yellow-900.text-yellow-200 {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fcd34d !important;
}

.light .bg-red-900.text-red-200 {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
}

.light .bg-blue-900.text-blue-200 {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    border-color: #93c5fd !important;
}

.light .bg-gray-700.text-gray-200 {
    background-color: #e5e7eb !important;
    color: #374151 !important;
    border-color: #d1d5db !important;
}

/* Light theme - Border colors for status badges */
.light .border-green-700 {
    border-color: #86efac !important;
}

.light .border-yellow-700 {
    border-color: #fcd34d !important;
}

.light .border-red-700 {
    border-color: #fca5a5 !important;
}

.light .border-gray-600 {
    border-color: #d1d5db !important;
}

/* Light theme - Navigation bar */
.light nav.bg-gray-900 {
    background-color: #ffffff !important;
    border-bottom-color: #e5e7eb !important;
}

.light nav .text-gray-300 {
    color: #6b7280 !important;
}

.light nav .text-gray-400 {
    color: #9ca3af !important;
}

.light nav .hover\:bg-gray-800:hover {
    background-color: #f3f4f6 !important;
}

.light nav .bg-gray-700 {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

.light nav .hover\:bg-gray-600:hover {
    background-color: #d1d5db !important;
}

.light nav select.bg-gray-700 {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

.light nav button.bg-gray-700,
.light nav .theme-toggle {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

/* Light theme - Nav active links stay visible with proper contrast */
.light nav .bg-blue-600 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

.light nav .bg-purple-600 {
    background-color: #9333ea !important;
    color: #ffffff !important;
}

.light nav .bg-green-600 {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

.light nav .bg-red-600 {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

.light nav .hover\:bg-green-700:hover {
    background-color: #15803d !important;
}

.light nav .hover\:bg-red-700:hover {
    background-color: #b91c1c !important;
}

/* Keep color accents consistent across themes */
.bg-blue-900,
.bg-blue-800,
.bg-blue-600,
.bg-blue-700,
.bg-red-900,
.bg-red-800,
.bg-red-600,
.bg-red-700,
.bg-yellow-900,
.bg-yellow-800,
.bg-yellow-600,
.bg-yellow-700,
.bg-green-900,
.bg-green-800,
.bg-green-600,
.bg-green-700,
.bg-purple-900,
.bg-purple-800,
.bg-purple-600,
.bg-purple-700,
.bg-indigo-900,
.bg-indigo-800,
.bg-indigo-600,
.bg-indigo-700,
.bg-orange-900,
.bg-orange-800,
.bg-orange-600,
.bg-orange-700 {
    /* Colors remain consistent */
}

/* Theme Toggle Button */
.theme-toggle {
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
}