/* Forsan ERP — Sky / Navy / Gold professional interface */
@media screen {
    :root,
    html[data-theme="light"],
    html[data-theme="dark"] {
        color-scheme: light;
        --page-bg: #dcecf4;
        --page-bg-secondary: #cfe4ee;
        --bg-gradient: linear-gradient(145deg, #e8f5fa 0%, #d4e9f2 52%, #c8e0eb 100%);
        --surface-bg: #f4f9fc;
        --surface-bg-2: #eaf4f8;
        --glass-bg: rgba(247, 251, 253, .94);
        --glass-bg-strong: #f8fcfe;
        --glass-border: rgba(13, 54, 96, .16);
        --glass-shadow: rgba(13, 54, 96, .12);
        --text-primary: #0b315b;
        --text-secondary: #164b7a;
        --text-muted: #376889;
        --input-bg: #f9fcfe;
        --input-hover-bg: #ffffff;
        --input-border: rgba(13, 54, 96, .24);
        --table-head-bg: #d6eaf3;
        --table-row-hover: rgba(18, 73, 120, .07);
        --accent-color: #b98918;
        --accent-hover: #91680d;
        --accent-soft: rgba(190, 147, 41, .14);
        --focus-ring: 0 0 0 3px rgba(185, 137, 24, .2);
        --sidebar-bg: #d2e8f2;
        --sidebar-border: rgba(185, 137, 24, .55);
        --sidebar-shadow: rgba(13, 54, 96, .16);
        --sidebar-text: #123f6d;
        --sidebar-text-strong: #082d55;
        --sidebar-text-muted: #376889;
        --sidebar-item-bg: rgba(255, 255, 255, .36);
        --sidebar-item-border: rgba(13, 54, 96, .12);
        --sidebar-item-open-bg: rgba(255, 255, 255, .62);
        --sidebar-item-open-border: rgba(185, 137, 24, .55);
        --sidebar-hover-bg: rgba(185, 137, 24, .13);
        --sidebar-user-bg: rgba(255, 255, 255, .55);
        --sidebar-divider: rgba(13, 54, 96, .13);
        --sidebar-active-bg: linear-gradient(135deg, #d7b75b, #b88918);
        --sidebar-active-shadow: 0 7px 18px rgba(13, 54, 96, .16);
    }

    html,
    body,
    .app-container,
    .main-content,
    .page-content,
    .content-wrapper,
    .fin-page,
    .sp-page {
        background: var(--bg-gradient) !important;
        color: #0b315b !important;
    }

    body,
    body p,
    body label,
    body span,
    body strong,
    body small,
    body td,
    body th,
    body li,
    body summary,
    body .text-muted,
    body .text-secondary,
    body .sp-muted {
        color: #0b315b !important;
    }

    body h1,
    body h2,
    body h3,
    body h4,
    body h5,
    body h6,
    body a:not([class*="btn"]):not(.menu-link) {
        color: #082d55 !important;
    }

    body i,
    body h1 i,
    body h2 i,
    body h3 i {
        color: #b98918;
    }

    .sidebar,
    .forsan-sidebar,
    .app-sidebar {
        background: linear-gradient(180deg, #d9edf5, #c9e2ed) !important;
        border: 1px solid rgba(185, 137, 24, .65) !important;
        border-right: 4px solid #b98918 !important;
        box-shadow: 0 14px 34px rgba(13, 54, 96, .16) !important;
    }

    .sidebar a,
    .forsan-sidebar a,
    .app-sidebar a,
    .forsan-sidebar-group summary {
        color: #0b315b !important;
    }

    .sidebar a:hover,
    .forsan-sidebar a:hover,
    .app-sidebar a:hover {
        background: rgba(185, 137, 24, .14) !important;
        color: #082d55 !important;
    }

    .sidebar a.active,
    .forsan-sidebar a.active,
    .app-sidebar a.active,
    .sidebar-item.active > a {
        background: linear-gradient(135deg, #e2c76f, #bd8d1e) !important;
        color: #082d55 !important;
        border-color: #9a6f10 !important;
    }

    .glass-card,
    .card,
    .panel,
    .content-card,
    .form-card,
    .dashboard-card,
    .modal-content,
    .dropdown-menu,
    .fin-card,
    .sp-card,
    [class*="-panel"] {
        background: rgba(247, 251, 253, .94) !important;
        color: #0b315b !important;
        border-color: rgba(13, 54, 96, .16) !important;
        box-shadow: 0 8px 24px rgba(13, 54, 96, .10) !important;
    }

    .top-navbar,
    .topbar,
    .page-header,
    .fin-header,
    .sp-head {
        background: rgba(238, 248, 252, .92) !important;
        color: #0b315b !important;
        border-color: rgba(185, 137, 24, .65) !important;
        border-bottom: 3px solid #b98918 !important;
    }

    input,
    select,
    textarea {
        background: #fbfdfe !important;
        color: #0b315b !important;
        border-color: rgba(13, 54, 96, .25) !important;
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: #b98918 !important;
        box-shadow: var(--focus-ring) !important;
    }

    thead th,
    .table thead th,
    .fin-table th,
    .sp-table th {
        background: #d5eaf3 !important;
        color: #082d55 !important;
        border-bottom: 2px solid #b98918 !important;
    }

    button,
    [class*="btn"],
    .sp-btn,
    .fin-btn,
    .filter-button,
    .global-back-button {
        background: linear-gradient(135deg, #e0c46a, #bd8b19) !important;
        color: #082d55 !important;
        border: 1px solid #a47713 !important;
        box-shadow: 0 5px 14px rgba(13, 54, 96, .12) !important;
    }

    button:hover,
    [class*="btn"]:hover,
    .sp-btn:hover,
    .fin-btn:hover {
        background: linear-gradient(135deg, #ead27e, #c89a28) !important;
        color: #082d55 !important;
    }

    .alert-danger,
    .error-msg,
    .fin-error {
        color: #9f1239 !important;
    }

    .alert-success,
    .success-msg,
    .fin-success {
        color: #166534 !important;
    }
}

/* الوضع الغامق: تباين واضح مع الحفاظ على الهوية الزرقاء والذهبية. */
@media screen {
    html[data-theme="dark"] {
        color-scheme: dark;
        --page-bg: #122235;
        --page-bg-secondary: #193149;
        --bg-gradient: linear-gradient(145deg, #101f31 0%, #173149 55%, #1d3b54 100%);
        --surface-bg: #1b344b;
        --surface-bg-2: #21405b;
        --glass-bg: rgba(28, 53, 76, .96);
        --glass-bg-strong: #203b54;
        --glass-border: rgba(224, 196, 106, .25);
        --glass-shadow: rgba(0, 0, 0, .28);
        --text-primary: #f2f7fb;
        --text-secondary: #d8e7f1;
        --text-muted: #b9cfdd;
        --input-bg: #243f58;
        --input-hover-bg: #294963;
        --input-border: rgba(217, 237, 247, .28);
        --table-head-bg: #284d69;
        --table-row-hover: rgba(224, 196, 106, .09);
        --sidebar-bg: #173149;
        --sidebar-text: #edf6fb;
        --sidebar-text-strong: #ffffff;
        --sidebar-text-muted: #c4d8e5;
        --sidebar-item-bg: rgba(255, 255, 255, .035);
        --sidebar-item-border: rgba(224, 196, 106, .15);
        --sidebar-item-open-bg: rgba(255, 255, 255, .07);
        --sidebar-item-open-border: rgba(224, 196, 106, .42);
        --sidebar-hover-bg: rgba(224, 196, 106, .13);
        --sidebar-user-bg: rgba(255, 255, 255, .06);
    }

    html[data-theme="dark"] body,
    html[data-theme="dark"] .app-container,
    html[data-theme="dark"] .main-content,
    html[data-theme="dark"] .page-content,
    html[data-theme="dark"] .content-wrapper,
    html[data-theme="dark"] .fin-page,
    html[data-theme="dark"] .sp-page {
        background: var(--bg-gradient) !important;
        color: #f2f7fb !important;
    }

    html[data-theme="dark"] body p,
    html[data-theme="dark"] body label,
    html[data-theme="dark"] body span,
    html[data-theme="dark"] body strong,
    html[data-theme="dark"] body small,
    html[data-theme="dark"] body td,
    html[data-theme="dark"] body th,
    html[data-theme="dark"] body li,
    html[data-theme="dark"] body summary,
    html[data-theme="dark"] body .text-muted,
    html[data-theme="dark"] body .text-secondary,
    html[data-theme="dark"] body .sp-muted {
        color: #edf6fb !important;
    }

    html[data-theme="dark"] body h1,
    html[data-theme="dark"] body h2,
    html[data-theme="dark"] body h3,
    html[data-theme="dark"] body h4,
    html[data-theme="dark"] body h5,
    html[data-theme="dark"] body h6,
    html[data-theme="dark"] body a:not([class*="btn"]):not(.menu-link) {
        color: #ffffff !important;
    }

    html[data-theme="dark"] .sidebar,
    html[data-theme="dark"] .forsan-sidebar,
    html[data-theme="dark"] .app-sidebar {
        background: linear-gradient(180deg, #193750, #122a40) !important;
    }

    html[data-theme="dark"] .sidebar a,
    html[data-theme="dark"] .forsan-sidebar a,
    html[data-theme="dark"] .app-sidebar a,
    html[data-theme="dark"] .forsan-sidebar-group summary {
        color: #f2f7fb !important;
    }

    html[data-theme="dark"] .glass-card,
    html[data-theme="dark"] .card,
    html[data-theme="dark"] .panel,
    html[data-theme="dark"] .content-card,
    html[data-theme="dark"] .form-card,
    html[data-theme="dark"] .dashboard-card,
    html[data-theme="dark"] .modal-content,
    html[data-theme="dark"] .dropdown-menu,
    html[data-theme="dark"] .fin-card,
    html[data-theme="dark"] .sp-card,
    html[data-theme="dark"] [class*="-panel"],
    html[data-theme="dark"] .top-navbar,
    html[data-theme="dark"] .topbar,
    html[data-theme="dark"] .page-header,
    html[data-theme="dark"] .fin-header,
    html[data-theme="dark"] .sp-head {
        background: rgba(28, 53, 76, .96) !important;
        color: #f2f7fb !important;
        border-color: rgba(224, 196, 106, .25) !important;
    }

    html[data-theme="dark"] input,
    html[data-theme="dark"] select,
    html[data-theme="dark"] textarea {
        background: #243f58 !important;
        color: #ffffff !important;
        border-color: rgba(217, 237, 247, .28) !important;
    }

    html[data-theme="dark"] thead th,
    html[data-theme="dark"] .table thead th,
    html[data-theme="dark"] .fin-table th,
    html[data-theme="dark"] .sp-table th {
        background: #284d69 !important;
        color: #ffffff !important;
    }

    html[data-theme="dark"] .employee-id-card,
    html[data-theme="dark"] .employee-info-item {
        background: #203b54 !important;
        color: #f2f7fb !important;
    }
}