/* ======================================
   Dark Mode - Premium Design System
   ====================================== */

/* Dark Mode Variables Override */
body.dark-mode {
    --gray-25: #18181b;
    --gray-50: #1f1f23;
    --gray-100: #27272a;
    --gray-200: #3f3f46;
    --gray-300: #52525b;
    --gray-400: #71717a;
    --gray-500: #a1a1aa;
    --gray-600: #d4d4d8;
    --gray-700: #e4e4e7;
    --gray-800: #f4f4f5;
    --gray-900: #fafafa;
    --gray-950: #ffffff;

    /* Adjusted Primary (Gold/Yellow) for Dark Mode */
    --primary-50: #422006;
    --primary-100: #713f12;
    --primary-200: #854d0e;
    --primary-300: #a16207;
    --primary-400: #ca8a04;
    --primary-500: #eab308;
    --primary-600: #facc15;
    --primary-700: #fde047;
    --primary-800: #fef08a;
    --primary-900: #fef9c3;

    /* Semantic Colors for Dark Mode */
    --success-50: #052e16;
    --success-100: #14532d;
    --success-500: #22c55e;
    --success-600: #4ade80;
    --success-700: #86efac;

    --warning-50: #422006;
    --warning-100: #713f12;
    --warning-500: #fbbf24;
    --warning-600: #fcd34d;

    --error-50: #450a0a;
    --error-100: #7f1d1d;
    --error-500: #f87171;
    --error-600: #fca5a5;
    --error-700: #fecaca;

    --info-50: #172554;
    --info-100: #1e3a8a;
    --info-500: #60a5fa;
    --info-600: #93c5fd;

    /* Shadows for Dark Mode */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6);
}

/* Base Overrides */
body.dark-mode {
    background-color: #0f0f12;
    color: var(--gray-800);
}

/* Cards */
body.dark-mode .card,
body.dark-mode .content-card,
body.dark-mode .main-content,
body.dark-mode .request-card {
    background: var(--gray-50);
    border-color: var(--gray-200);
}

body.dark-mode .card-header,
body.dark-mode .card-footer {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

/* Form Controls */
body.dark-mode .form-control {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-800);
}

body.dark-mode .form-control:hover {
    border-color: var(--gray-400);
}

body.dark-mode .form-control:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgb(129 140 248 / 0.2);
}

body.dark-mode .form-control::placeholder {
    color: var(--gray-500);
}

body.dark-mode .form-control:disabled {
    background-color: var(--gray-200);
}

/* File Upload */
body.dark-mode .file-upload {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

body.dark-mode .file-upload:hover {
    background: var(--primary-50);
    border-color: var(--primary-400);
}

/* Tables */
body.dark-mode table {
    background: var(--gray-50);
}

body.dark-mode thead {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

body.dark-mode th {
    color: var(--gray-600);
}

body.dark-mode td {
    border-color: var(--gray-200);
    color: var(--gray-600);
}

body.dark-mode tbody tr:hover {
    background: var(--gray-100);
}

body.dark-mode .table-container {
    background: var(--gray-50);
    border-color: var(--gray-200);
}

/* Buttons */
body.dark-mode .btn-secondary {
    background: var(--gray-100);
    color: var(--gray-700);
    border-color: var(--gray-300);
}

body.dark-mode .btn-secondary:hover {
    background: var(--gray-200);
    border-color: var(--gray-400);
}

body.dark-mode .btn-ghost:hover {
    background: var(--gray-200);
}

/* Tabs */
body.dark-mode .tabs {
    background: var(--gray-100);
}

body.dark-mode .tab {
    color: var(--gray-500);
}

body.dark-mode .tab:hover {
    color: var(--gray-700);
}

body.dark-mode .tab.active {
    background: var(--gray-50);
    color: var(--gray-800);
}

/* Top Bar */
body.dark-mode .top-bar {
    background: var(--gray-50);
    border-color: var(--gray-200);
}

/* Filter Box */
body.dark-mode .filter-box {
    background: var(--gray-100);
}

/* Info Items */
body.dark-mode .info-item {
    background: var(--gray-100);
}

body.dark-mode .info-item label {
    color: var(--gray-500);
}

body.dark-mode .info-item span {
    color: var(--gray-800);
}

/* Comments */
body.dark-mode .comment.admin {
    background: var(--primary-50);
}

body.dark-mode .comment.user {
    background: var(--gray-100);
}

/* Navigation Links */
body.dark-mode .nav-links a {
    background: var(--gray-200);
    color: var(--gray-600);
}

body.dark-mode .nav-links a:hover {
    background: var(--primary-100);
    color: var(--primary-600);
}

/* Pagination */
body.dark-mode .pagination a,
body.dark-mode .pagination span {
    background: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-600);
}

body.dark-mode .pagination a:hover {
    background: var(--gray-200);
    border-color: var(--gray-400);
}

body.dark-mode .pagination span.active,
body.dark-mode .pagination a.active {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

/* Modals */
body.dark-mode .modal {
    background: var(--gray-50);
}

body.dark-mode .modal-header {
    border-color: var(--gray-200);
}

body.dark-mode .modal-footer {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

body.dark-mode .modal-close {
    color: var(--gray-500);
}

body.dark-mode .modal-close:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

/* Toasts */
body.dark-mode .toast {
    background: var(--gray-50);
    border-color: var(--gray-200);
}

body.dark-mode .toast-title {
    color: var(--gray-800);
}

body.dark-mode .toast-message {
    color: var(--gray-600);
}

/* Stat Cards */
body.dark-mode .stat-card {
    background: var(--gray-50);
    border-color: var(--gray-200);
}

body.dark-mode .stat-card:hover {
    border-color: var(--gray-300);
}

body.dark-mode .stat-card .stat-value {
    color: var(--gray-800);
}

body.dark-mode .stat-card .stat-label {
    color: var(--gray-500);
}

/* Progress Bars */
body.dark-mode .progress {
    background: var(--gray-300);
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
    background: var(--gray-50);
    border-color: var(--gray-200);
}

body.dark-mode .dropdown-item {
    color: var(--gray-600);
}

body.dark-mode .dropdown-item:hover {
    background: var(--gray-200);
}

body.dark-mode .dropdown-divider {
    background: var(--gray-300);
}

/* Theme Toggle */
body.dark-mode .theme-toggle {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

body.dark-mode .theme-toggle:hover {
    background: var(--gray-200);
}

/* User Menu */
body.dark-mode .user-menu {
    background: var(--gray-100);
}

body.dark-mode .user-name {
    color: var(--gray-700);
}

/* Empty State */
body.dark-mode .empty-state h3 {
    color: var(--gray-700);
}

body.dark-mode .empty-state p {
    color: var(--gray-500);
}

/* Alerts in Dark Mode */
body.dark-mode .alert-success {
    background: var(--success-50);
    border-color: var(--success-100);
    color: var(--success-600);
}

body.dark-mode .alert-error {
    background: var(--error-50);
    border-color: var(--error-100);
    color: var(--error-600);
}

body.dark-mode .alert-warning {
    background: var(--warning-50);
    border-color: var(--warning-100);
    color: var(--warning-600);
}

body.dark-mode .alert-info {
    background: var(--info-50);
    border-color: var(--info-100);
    color: var(--info-600);
}

/* Status Pills in Dark Mode */
body.dark-mode .status-new {
    background: var(--info-50);
    color: var(--info-600);
}

body.dark-mode .status-review {
    background: var(--warning-50);
    color: var(--warning-600);
}

body.dark-mode .status-edit {
    background: var(--primary-50);
    color: var(--primary-600);
}

body.dark-mode .status-complete {
    background: var(--success-50);
    color: var(--success-600);
}

body.dark-mode .status-rejected {
    background: var(--error-50);
    color: var(--error-600);
}

/* Badges in Dark Mode */
body.dark-mode .badge-primary {
    background: var(--primary-100);
    color: var(--primary-600);
}

body.dark-mode .badge-success {
    background: var(--success-100);
    color: var(--success-600);
}

body.dark-mode .badge-warning {
    background: var(--warning-100);
    color: var(--warning-600);
}

body.dark-mode .badge-danger {
    background: var(--error-100);
    color: var(--error-600);
}

body.dark-mode .badge-info {
    background: var(--info-100);
    color: var(--info-600);
}

body.dark-mode .badge-gray {
    background: var(--gray-200);
    color: var(--gray-600);
}

/* Skeleton Loading in Dark Mode */
body.dark-mode .skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
}

/* Divider */
body.dark-mode .divider {
    background: var(--gray-300);
}

/* Comments Section */
body.dark-mode .comments-section {
    border-color: var(--gray-300);
}

body.dark-mode .comment-header span:first-child {
    color: var(--gray-600);
}

body.dark-mode .comment-text {
    color: var(--gray-600);
}

/* Sidebar Adjustments for Admin (already dark) */
body.dark-mode .sidebar {
    background: #0a0a0c;
    border-left: 1px solid var(--gray-200);
}

body.dark-mode .sidebar-header {
    border-color: var(--gray-200);
}

body.dark-mode .sidebar-footer {
    border-color: var(--gray-200);
}

/* Main Area in Admin */
body.dark-mode .main-area {
    background: #0f0f12;
}

/* Scrollbar Styling */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--gray-100);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Selection in Dark Mode */
body.dark-mode ::selection {
    background: var(--primary-400);
    color: white;
}

/* Focus Ring in Dark Mode */
body.dark-mode .btn:focus {
    box-shadow: 0 0 0 3px rgb(129 140 248 / 0.3);
}

/* Links in Dark Mode */
body.dark-mode a {
    color: var(--primary-500);
}

body.dark-mode a:hover {
    color: var(--primary-400);
}

/* Headings in Dark Mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--gray-900);
}

/* Paragraphs in Dark Mode */
body.dark-mode p {
    color: var(--gray-600);
}

/* Smooth Transition for Dark Mode Toggle */
body,
body *,
body *::before,
body *::after {
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease;
}