/* ====================================================================
   DARK MODE — dark.css
   Apply by setting bg="dark" on the root/body element
   Example: <body bg="dark">
==================================================================== */

[bg="dark"] {
    background-color: #0f1117 !important;
    color: #e2e8f0 !important;

    & a {
        color: #90cdf4 !important;
    }

    /* ── Layout ───────────────────────────────────────────────── */
    & .layout>* {
        border-color: #2d3748 !important;
    }

    /* ── Menu ─────────────────────────────────────────────────── */
    & .menu_top,
    & .menu_left,
    & .menu_right,
    & .menu_footer {
        & li a {
            background: #1a202c !important;
            border-color: #4a5568 !important;
            color: #e2e8f0 !important;
        }

        & li ul {
            background: #1a202c !important;
        }

        &.bg_1 a,
        &.bg_2 a {
            background: #1e3a4a !important;
            border-color: #38a169 !important;
            color: #e2e8f0 !important;

            &[click]:hover {
                color: #f0fff4 !important;
                background: linear-gradient(to bottom, #276749 0%, #22543d 50%, #1c4532 51%, #276749 100%) !important;
                border-color: #68d391 !important;
            }
        }
    }

    /* ── Buttons ──────────────────────────────────────────────── */
    & .sub_bt_1>*,
    & .bt_1 {
        background: linear-gradient(to bottom, #2d3748 0%, #1a202c 50%, #171923 51%, #2d3748 100%) !important;
        color: #90cdf4 !important;
        border-color: #4a5568 !important;

        &:hover {
            background: linear-gradient(to bottom, #2c5282 0%, #2b6cb0 50%, #2a4a8a 51%, #3182ce 100%) !important;
            color: #fff !important;
        }
    }

    & .sub_bt_2>*,
    & .bt_2 {
        background: linear-gradient(to bottom, #9b2c2c 0%, #c53030 50%, #e53e3e 51%, #c53030 100%) !important;
        border-color: #fc8181 !important;

        &:hover {
            background: linear-gradient(to bottom, #e53e3e 0%, #fc8181 50%, #c53030 51%, #9b2c2c 100%) !important;
        }
    }

    & .sub_bt_3>*,
    & .bt_3 {
        background: linear-gradient(to bottom, #276749 0%, #22543d 50%, #1c4532 51%, #276749 100%) !important;
        border-color: #68d391 !important;

        &:hover {
            background: linear-gradient(to bottom, #38a169 0%, #38a169 100%) !important;
        }
    }

    & .sub_bt_4>*,
    & .bt_4 {
        background: linear-gradient(to bottom, #2d3748 0%, #1a202c 50%, #171923 51%, #2d3748 100%) !important;
        color: #e2e8f0 !important;
        border-color: #4a5568 !important;

        &:hover {
            background: linear-gradient(to bottom, #4a5568 0%, #2d3748 100%) !important;
        }
    }

    & .sub_bt_5>*,
    & .bt_5 {
        background: linear-gradient(to bottom, #1a202c 0%, #0f1117 100%) !important;
        border-color: #718096 !important;

        &:hover {
            background: linear-gradient(to bottom, #2d3748 0%, #1a202c 100%) !important;
        }
    }

    /* ── Sub buttons ──────────────────────────────────────────── */
    & .sub_button>* {
        background: #2d3748 !important;
        border-color: #4a5568 !important;
        color: #e2e8f0 !important;
    }

    & .sub_button>.b_1 {
        background: #9b2c2c !important;
    }

    & .sub_button>.b_2 {
        background: #276749 !important;
    }

    & .sub_button>.b_3 {
        background: #2c5282 !important;
    }

    & .sub_button>.b_4 {
        background: #22543d !important;
    }

    & .sub_button_1>* {
        background: linear-gradient(to bottom, #2d3748 0%, #1a202c 50%, #171923 51%, #2d3748 100%) !important;
        border-color: #4a5568 !important;
    }

    & .sub_button_1>.b_1 {
        background: linear-gradient(to bottom, #9b2c2c 0%, #c53030 50%, #e53e3e 51%, #c53030 100%) !important;
    }

    & .sub_button_1>.b_2 {
        background: linear-gradient(to bottom, #276749 0%, #22543d 50%, #1c4532 51%, #276749 100%) !important;
    }

    & .sub_button_1>.b_3 {
        background: linear-gradient(to bottom, #1a365d 0%, #2c5282 50%, #2b6cb0 51%, #3182ce 100%) !important;
        color: #e2e8f0 !important;
    }

    & .sub_button_1>.b_4 {
        background: linear-gradient(to bottom, #276749 0%, #38a169 50%, #276749 100%) !important;
    }

    /* ── Border ───────────────────────────────────────────────── */
    & .sub_border>*,
    & .border,
    & .all_border,
    & .all_border * {
        border-color: #2d3748 !important;
    }

    /* ── Form (bg_form) ───────────────────────────────────────── */
    & .bg_form>.form_1 {
        background: #1a202c !important;
        border-color: #4a5568 !important;

        &>.head {
            background: #2d3748 !important;
            border-color: #4a5568 !important;
            color: #e2e8f0 !important;
        }

        &>.footer {
            background: #171923 !important;
        }
    }

    /* ── Popup ────────────────────────────────────────────────── */
    & .popup>.form_popup {
        background: #1a202c !important;
        color: #e2e8f0 !important;
        border-color: #4a5568 !important;
    }

    & .popup.selected>label {
        background: #1e3a4a !important;
    }

    /* ── List backgrounds ─────────────────────────────────────── */
    & .lbg_1 {
        background: #0f1117 !important;
        color: #e2e8f0 !important;

        &>* {
            background: rgba(255, 255, 255, 0.05) !important;
        }

        &>*:nth-child(odd) {
            background: rgba(144, 205, 244, 0.08) !important;
        }

        &>*.selected {
            background: rgba(252, 129, 129, 0.2) !important;
        }

        &>*:hover {
            background: rgba(104, 211, 145, 0.15) !important;
        }
    }

    & .lbg_2 {
        background: #1a202c !important;
        color: #e2e8f0 !important;

        &>* {
            background: rgba(255, 255, 255, 0.04) !important;
        }

        &>*:nth-child(odd) {
            background: rgba(144, 205, 244, 0.07) !important;
        }

        &>*.selected {
            background: rgba(252, 129, 129, 0.2) !important;
        }

        &>*:hover {
            background: rgba(104, 211, 145, 0.13) !important;
        }
    }

    /* ── Pagging ──────────────────────────────────────────────── */
    & .pagging {
        &.bg_1 {

            & .first,
            & .prevent,
            & .next,
            & .last {
                background: linear-gradient(to bottom, #1e3a4a 0%, #1a3347 100%) !important;
                color: #90cdf4 !important;
            }

            & .list {
                background: #1a202c !important;
                border-color: #2d3748 !important;

                & * {
                    background: linear-gradient(to bottom, #1e3a4a 0%, #1a3347 100%) !important;
                    color: #90cdf4 !important;
                }
            }
        }
    }

    /* ── Horizontal Tab ───────────────────────────────────────── */
    & .horizontal_tab {
        &>.head {
            background: #1a202c !important;
            border-color: #2d3748 !important;

            &>div {
                color: #a0aec0 !important;
                border-color: #2d3748 !important;

                &:hover {
                    background: #2d3748 !important;
                    color: #e2e8f0 !important;
                }
            }

            &>.selected {
                background: #2b6cb0 !important;
                color: #fff !important;
            }
        }

        &>.body {
            background: #171923 !important;
            border-color: #2d3748 !important;
        }
    }

    /* ── Vertical Tab ─────────────────────────────────────────── */
    & .vertical_tab {
        border-color: #2d3748 !important;
        background: #171923 !important;

        &>.head {
            background: #1a202c !important;
            border-color: #2d3748 !important;

            &>input {
                background: linear-gradient(to bottom, #2d3748 0%, #1a202c 100%) !important;
                color: #e2e8f0 !important;
                border-color: #4a5568 !important;

                &:hover {
                    background: linear-gradient(to bottom, #3a4a60 0%, #2d3748 100%) !important;
                }
            }

            &>div {
                color: #a0aec0 !important;
                border-color: #2d3748 !important;

                &:hover {
                    background: #2d3748 !important;
                }
            }

            &>.selected {
                background: #1e3a5a !important;
                color: #90cdf4 !important;
                border-color: #3182ce !important;
            }
        }

        &>.body {
            background: #171923 !important;
        }
    }

    /* ── Drop Zone ────────────────────────────────────────────── */
    & .drop_zone {
        border-color: #4a5568 !important;
        color: #718096 !important;
        background: #1a202c !important;

        &.dragover {
            border-color: #3182ce !important;
            background: #1e3a5a !important;
            color: #90cdf4 !important;
        }
    }

    /* ── Text Popup ───────────────────────────────────────────── */
    & .text_popup>div>div {
        background: #1a202c !important;
        border-color: #4a5568 !important;
        color: #e2e8f0 !important;
    }

    /* ── f_style_1 (Form modal) ───────────────────────────────── */
    & .f_style_1 {
        background: #1a202c !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;

        & .head {
            background: linear-gradient(135deg, #0f1b2d 0%, #1a3347 60%, #1e4460 100%) !important;
        }

        & .body {
            background: #1a202c !important;
            color: #e2e8f0 !important;
        }

        & .img-section {
            background: #171923 !important;
            border-color: #2d3748 !important;
        }

        & .img-preview-box {
            background: #2d3748 !important;
            border-color: #4a5568 !important;
        }

        & .img-preview-box .img-placeholder {
            color: #4a5568 !important;
        }

        & .img-info p {
            color: #718096 !important;
        }

        & .field-group {
            & label {
                color: #a0aec0 !important;
            }

            & input[type="text"],
            & input[type="password"],
            & input[type="email"],
            & input[type="tel"],
            & input[type="number"],
            & input[type="date"],
            & select {
                background: #171923 !important;
                border-color: #2d3748 !important;
                color: #e2e8f0 !important;

                &:focus {
                    border-color: #3182ce !important;
                    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.25) !important;
                    background: #1a202c !important;
                }
            }
        }

        & .status-opt {
            background: #171923 !important;
            border-color: #2d3748 !important;
            color: #a0aec0 !important;

            &.active-enable {
                background: #1c4532 !important;
                border-color: #38a169 !important;
                color: #68d391 !important;
            }

            &.active-disable {
                background: #3d1515 !important;
                border-color: #e53e3e !important;
                color: #fc8181 !important;
            }
        }

        & .footer {
            background: #171923 !important;
            border-color: #2d3748 !important;
        }

        & .btn-save {
            background: linear-gradient(135deg, #1a3347 0%, #1e4460 100%) !important;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;

            &:hover {
                box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
            }
        }

        & .btn-cancel {
            background: #2d3748 !important;
            color: #a0aec0 !important;

            &:hover {
                background: #4a5568 !important;
                color: #e2e8f0 !important;
            }
        }
    }

    /* ── data_manage ──────────────────────────────────────────── */
    & .data_manage {
        background: #0f1117 !important;

        &>.dm-top {
            background: linear-gradient(135deg, #0f1b2d 0%, #1a3347 60%, #1e4460 100%) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;

            & .btn-add,
            & .btn-search {
                background: rgba(255, 255, 255, 0.1) !important;
                border-color: rgba(255, 255, 255, 0.2) !important;

                &:hover {
                    background: rgba(255, 255, 255, 0.2) !important;
                }
            }

            & .dm-search-input {
                background: rgba(255, 255, 255, 0.08) !important;
                border-color: rgba(255, 255, 255, 0.2) !important;
                color: #e2e8f0 !important;

                &::placeholder {
                    color: rgba(255, 255, 255, 0.4) !important;
                }

                &:focus {
                    background: rgba(255, 255, 255, 0.15) !important;
                    border-color: rgba(255, 255, 255, 0.5) !important;
                }
            }
        }

        &>.dm-table {
            background: #1a202c !important;

            & table {
                & thead tr {
                    background: #0f1b2d !important;

                    & th {
                        color: #90cdf4 !important;
                    }
                }

                & tbody tr {
                    border-color: #2d3748 !important;

                    &:hover {
                        background: #1e2d3d !important;
                    }

                    &:nth-child(even) {
                        background: #171f2b !important;
                    }

                    &:nth-child(even):hover {
                        background: #1e2d3d !important;
                    }

                    & td {
                        color: #cbd5e0 !important;

                        & img {
                            border-color: #2d3748 !important;
                        }

                        & .btn-edit {
                            background: #1e3a5a !important;
                            color: #90cdf4 !important;
                            border-color: #2c5282 !important;

                            &:hover {
                                background: #2b6cb0 !important;
                                border-color: #2b6cb0 !important;
                                color: #fff !important;
                            }
                        }

                        & .btn-del {
                            background: #3d1515 !important;
                            color: #fc8181 !important;
                            border-color: #822727 !important;

                            &:hover {
                                background: #c53030 !important;
                                border-color: #c53030 !important;
                                color: #fff !important;
                            }
                        }
                    }
                }
            }
        }

        &>.dm-footer {
            background: #1a202c !important;
            border-color: #2d3748 !important;

            & .dm-size-select {
                background: #171923 !important;
                border-color: #2d3748 !important;
                color: #e2e8f0 !important;
            }

            & .pagging>div {
                background: #171923 !important;
                border-color: #2d3748 !important;
                color: #a0aec0 !important;

                &:hover {
                    background: #2b6cb0 !important;
                    border-color: #2b6cb0 !important;
                    color: #fff !important;
                }
            }

            & .pagging .list>div {
                background: #171923 !important;
                border-color: #2d3748 !important;
                color: #a0aec0 !important;

                &:hover,
                &[selecte="selected"] {
                    background: #1a3347 !important;
                    border-color: #1a3347 !important;
                    color: #fff !important;
                }
            }
        }
    }

    /* ── Branch/Page status toggles ───────────────────────────── */
    & .branch-status-opt {
        background: #171923 !important;
        border-color: #2d3748 !important;
        color: #718096 !important;

        &:hover {
            background: #1a202c !important;
            border-color: #4a5568 !important;
        }
    }

    & .branch-status-active {
        background: #1c4532 !important;
        border-color: #38a169 !important;
        color: #68d391 !important;
        box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.2) !important;
    }

    & .branch-status-inactive {
        background: #3d1515 !important;
        border-color: #e53e3e !important;
        color: #fc8181 !important;
        box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.2) !important;
    }

    & .page-default-yes {
        background: #3d2e05 !important;
        border-color: #d69e2e !important;
        color: #f6e05e !important;
        box-shadow: 0 0 0 3px rgba(214, 158, 46, 0.2) !important;
    }

    & .page-default-no {
        background: #1a202c !important;
        border-color: #4a5568 !important;
        color: #718096 !important;
    }

    /* ── list_record ──────────────────────────────────────────── */
    & .list_record_big {
        border-color: #2d3748 !important;

        &>.footer {
            border-color: #2d3748 !important;
            background: #171923 !important;
        }
    }

    & .list_record_small {
        border-color: #2d3748 !important;

        &>.head {
            background: #2d3748 !important;
            color: #e2e8f0 !important;
        }

        &>.body {
            border-color: #2d3748 !important;
        }
    }

    /* ── Table report ─────────────────────────────────────────── */
    & table.report {
        & thead tr th {
            background: #0f1b2d !important;
            color: #90cdf4 !important;
            border-color: #2d3748 !important;
        }

        & tbody tr {
            border-color: #2d3748 !important;

            &:nth-child(odd) {
                background: #1a202c !important;
            }

            &:nth-child(even) {
                background: #171923 !important;
            }

            &:hover {
                background: #1e2d3d !important;
            }

            & td {
                color: #cbd5e0 !important;
                border-color: #2d3748 !important;
            }
        }

        & tfoot tr td {
            background: #0f1b2d !important;
            color: #90cdf4 !important;
            border-color: #2d3748 !important;
        }
    }

    /* ── Input / Select (global) ──────────────────────────────── */
    & input,
    & select,
    & textarea {
        background: #171923 !important;
        color: #e2e8f0 !important;
        border-color: #2d3748 !important;

        &::placeholder {
            color: #4a5568 !important;
        }

        &:focus {
            border-color: #3182ce !important;
            outline: none !important;
        }
    }

    /* ── Alert ────────────────────────────────────────────────── */
    & #alert {
        background: rgba(0, 0, 0, 0.85) !important;
        border-color: #3182ce !important;
        color: #90cdf4 !important;
    }

    /* ── Close ────────────────────────────────────────────────── */
    & .close {
        color: #fc8181 !important;
    }

    /* ── Text colors ──────────────────────────────────────────── */
    & .text_1,
    & .sub_text_1>* {
        color: #e2e8f0 !important;

        &:hover {
            color: #fc8181 !important;
        }
    }

    /* ── Scrollbar ────────────────────────────────────────────── */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #171923;
    }

    ::-webkit-scrollbar-thumb {
        background: #2d3748;
        border-radius: 4px;

        &:hover {
            background: #4a5568;
        }
    }

    /* ── Product Save Form (save.php) ─────────────────────────── */
    & .cat-title-section {
        border-color: #2d3748 !important;
    }

    & .cat-section-label {
        background: linear-gradient(135deg, #0f1b2d 0%, #1a365d 100%) !important;
        color: #e2e8f0 !important;
    }

    & .cat-title-group {
        background: #171923 !important;
    }

    & .cat-lang-kh {
        background: #1e3a8a !important;
        color: #bfdbfe !important;
    }

    & .cat-lang-en {
        background: #581c87 !important;
        color: #f0abfc !important;
    }

    & .branch-status-opt {
        background: #171923 !important;
        border-color: #2d3748 !important;
        color: #a0aec0 !important;

        &:hover {
            background: #2d3748 !important;
            border-color: #4a5568 !important;
        }
    }

    & .branch-status-active {
        background: #064e3b !important;
        border-color: #059669 !important;
        color: #a7f3d0 !important;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
    }

    & .branch-status-inactive {
        background: #7f1d1d !important;
        border-color: #dc2626 !important;
        color: #fca5a5 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
    }

    & .prod-prop-header {
        border-bottom-color: #2d3748 !important;
    }

    & .prod-prop-label {
        color: #e2e8f0 !important;
    }

    & .prod-btn-add-prop {
        background: linear-gradient(135deg, #2b6cb0, #3182ce) !important;
        color: #ffffff !important;
    }

    & .prod-prop-empty {
        color: #718096 !important;
        border-color: #2d3748 !important;
        background: #171923 !important;
    }

    & .prod-prop-card {
        background: #1a202c !important;
        border-color: #2d3748 !important;

        &:hover {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
        }
    }

    & .prod-prop-card-head {
        border-bottom-color: #2d3748 !important;
    }

    & .prod-prop-card-title {
        color: #e2e8f0 !important;
    }

    & .prod-materials-box {
        background: #171923 !important;
        border-color: #2d3748 !important;
    }

    & .prod-materials-head {
        color: #90cdf4 !important;
    }

    & .btn-add-mat {
        background: #2d3748 !important;
        color: #90cdf4 !important;
        border-color: #4a5568 !important;

        &:hover {
            background: #3182ce !important;
            color: #ffffff !important;
        }
    }

    & .prod-materials-list::-webkit-scrollbar-track {
        background: #171923 !important;
    }

    & .prod-materials-list::-webkit-scrollbar-thumb {
        background: #2d3748 !important;

        &:hover {
            background: #4a5568 !important;
        }
    }

    & .prod-mat-empty {
        background: #171923 !important;
        color: #718096 !important;
        border-color: #2d3748 !important;
    }

    & .prod-mat-row {
        background: #1a202c !important;
        border-color: #2d3748 !important;
    }

    & .btn-del-mat {
        background: #7f1d1d !important;
        color: #fca5a5 !important;
        border-color: #dc2626 !important;

        &:hover {
            background: #dc2626 !important;
            color: #ffffff !important;
        }
    }

    & .cam-modal-content {
        background: #1e293b !important;
        color: #f8fafc !important;
    }

    & .cam-modal-foot {
        background: #0f172a !important;
        border-top-color: #334155 !important;
    }

    & .cam-btn-cancel {
        background: #1e293b !important;
        color: #cbd5e1 !important;
        border-color: #475569 !important;
    }

    & .prod-prop-num {
        background: linear-gradient(135deg, #2b6cb0, #3182ce) !important;
        color: #ffffff !important;
    }

    & .prod-btn-del-prop {
        background: #7f1d1d !important;
        color: #fca5a5 !important;
        border-color: #dc2626 !important;

        &:hover {
            background: #dc2626 !important;
            color: #ffffff !important;
        }
    }

    & .prod-textarea {
        background: #171923 !important;
        color: #e2e8f0 !important;
        border-color: #2d3748 !important;

        &:focus {
            border-color: #3182ce !important;
            box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.25) !important;
            background: #1a202c !important;
        }
    }

    /* ── Food View Page (view.php) ────────────────────────────── */
    & .food {
        background-color: #0f172a !important;
        color: #f8fafc !important;

        & .header-bar {
            background: rgba(30, 41, 59, 0.7) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        & .categories li a {
            background: rgba(255, 255, 255, 0.05) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
            color: #cbd5e1 !important;

            &:hover {
                background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
                color: #ffffff !important;
            }
        }

        & .categories li ul {
            background: #1e293b !important;
            border-color: rgba(255, 255, 255, 0.12) !important;

            & li a {
                color: #94a3b8 !important;

                &:hover {
                    background: rgba(99, 102, 241, 0.15) !important;
                    color: #818cf8 !important;
                }
            }
        }

        & .search-box {
            background: #0f172a !important;
            border-color: rgba(255, 255, 255, 0.12) !important;

            & input {
                color: #ffffff !important;
            }
        }

        & .form {
            background: rgba(30, 41, 59, 0.7) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        & .form-header {
            border-bottom-color: rgba(255, 255, 255, 0.1) !important;
        }

        & .head-title {
            color: #f8fafc !important;
        }

        & .btn-reset {
            background: rgba(255, 255, 255, 0.08) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: #94a3b8 !important;

            &:hover {
                background: rgba(239, 68, 68, 0.2) !important;
                color: #f87171 !important;
            }
        }

        & .img-section {
            background: rgba(15, 23, 42, 0.5) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
        }

        & .img-preview-box {
            background: #0f172a !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        & .btn-upload {
            background: rgba(99, 102, 241, 0.15) !important;
            border-color: rgba(99, 102, 241, 0.3) !important;
            color: #818cf8 !important;
        }

        & .items {
            background: rgba(30, 41, 59, 0.7) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        & .item-card {
            background: #1e293b !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }

        & .item-img-wrap {
            background: #0f172a !important;
        }

        & .item-title {
            color: #f8fafc !important;
        }

        & .item-title-en {
            color: #94a3b8 !important;
        }

        & .btn-item-edit {
            background: rgba(99, 102, 241, 0.15) !important;
            border-color: rgba(99, 102, 241, 0.3) !important;
            color: #818cf8 !important;
        }

        & .btn-item-delete {
            background: rgba(239, 68, 68, 0.15) !important;
            border-color: rgba(239, 68, 68, 0.3) !important;
            color: #f87171 !important;
        }

        /* Product Save Form - Dark Theme Overrides */
        & .cat-title-section {
            border-color: #2d3748 !important;
        }
        & .cat-section-label {
            background: linear-gradient(135deg, #1a202c 0%, #2b6cb0 100%) !important;
            color: #f7fafc !important;
        }
        & .cat-title-group {
            background: #171923 !important;
        }
        & .cat-lang-kh {
            background: #2b6cb0 !important;
            color: #ffffff !important;
        }
        & .cat-lang-en {
            background: #805ad5 !important;
            color: #ffffff !important;
        }
        & .branch-status-opt {
            border-color: #2d3748 !important;
            color: #a0aec0 !important;
            background: #1a202c !important;

            &:hover {
                background: #2d3748 !important;
                border-color: #4a5568 !important;
            }
        }
        & .branch-status-active {
            background: #1c4532 !important;
            border-color: #38a169 !important;
            color: #68d391 !important;
        }
        & .branch-status-inactive {
            background: #742a2a !important;
            border-color: #e53e3e !important;
            color: #feb2b2 !important;
        }
        & .prod-prop-header {
            border-bottom-color: #2d3748 !important;
        }
        & .prod-prop-label {
            color: #e2e8f0 !important;
        }
        & .prod-btn-add-prop {
            background: linear-gradient(135deg, #2b6cb0, #3182ce) !important;
            color: #ffffff !important;
        }
        & .prod-prop-empty {
            color: #718096 !important;
            border-color: #2d3748 !important;
            background: #171923 !important;
        }
        & .prod-prop-card {
            background: #1a202c !important;
            border-color: #2d3748 !important;

            &:hover {
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
            }
        }
        & .prod-prop-card-head {
            border-bottom-color: #2d3748 !important;
        }
        & .prod-prop-card-title {
            color: #e2e8f0 !important;
        }
        & .prod-materials-box {
            background: #171923 !important;
            border-color: #2d3748 !important;
        }
        & .prod-materials-head {
            color: #90cdf4 !important;
        }
        & .btn-add-mat {
            background: #2d3748 !important;
            color: #90cdf4 !important;
            border-color: #4a5568 !important;

            &:hover {
                background: #3182ce !important;
                color: #ffffff !important;
            }
        }
        & .prod-materials-list::-webkit-scrollbar-track {
            background: #171923 !important;
        }
        & .prod-materials-list::-webkit-scrollbar-thumb {
            background: #2d3748 !important;

            &:hover {
                background: #4a5568 !important;
            }
        }
        & .prod-mat-empty {
            background: #171923 !important;
            color: #718096 !important;
            border-color: #2d3748 !important;
        }
        & .prod-mat-row {
            background: #1a202c !important;
            border-color: #2d3748 !important;
        }
        & .btn-del-mat {
            background: #7f1d1d !important;
            color: #fca5a5 !important;
            border-color: #dc2626 !important;

            &:hover {
                background: #dc2626 !important;
                color: #ffffff !important;
            }
        }
        & .prod-prop-num {
            background: linear-gradient(135deg, #2b6cb0, #3182ce) !important;
            color: #ffffff !important;
        }
        & .prod-btn-del-prop {
            background: #7f1d1d !important;
            color: #fca5a5 !important;
            border-color: #dc2626 !important;

            &:hover {
                background: #dc2626 !important;
                color: #ffffff !important;
            }
        }
        & .prod-textarea {
            border-color: #2d3748 !important;
            color: #e2e8f0 !important;
            background: #171923 !important;

            &:focus {
                border-color: #3182ce !important;
                background: #1a202c !important;
            }
        }
        & .btn-camera {
            background: linear-gradient(135deg, #15803d, #166534) !important;
            color: #ffffff !important;
        }
        & .cam-modal-overlay {
            background: rgba(0, 0, 0, 0.85) !important;
        }
        & .cam-modal-content {
            background: #1e293b !important;
            color: #f8fafc !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
        }
        & .cam-modal-head {
            background: #0f172a !important;
            color: #f8fafc !important;
        }
        & .cam-modal-foot {
            background: #0f172a !important;
            border-top-color: #334155 !important;
        }
        & .cam-btn-cancel {
            background: #1e293b !important;
            color: #cbd5e1 !important;
            border-color: #475569 !important;
        }
        & .cam-btn-snap {
            background: linear-gradient(135deg, #16a34a, #15803d) !important;
            color: #ffffff !important;
        }

        /* App Save Form - Dark Theme Overrides */
        & .app-pages-label {
            color: #e2e8f0 !important;
        }
        & .app-pages-badge {
            background: linear-gradient(135deg, #2b6cb0, #3182ce) !important;
            color: #ffffff !important;
        }
        & .co-pages-table-wrap {
            border-color: #2d3748 !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
        }
        & .co-pages-table thead tr {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
            color: #f8fafc !important;
        }
        & .co-pages-table tbody tr {
            border-bottom-color: #2d3748 !important;
            background: #1a202c !important;

            &:hover {
                background: #2d3748 !important;
            }

            &.co-row-even {
                background: #171923 !important;

                &:hover {
                    background: #2d3748 !important;
                }
            }
        }
        & .co-td-num {
            color: #a0aec0 !important;
        }
        & .co-td-title {
            color: #e2e8f0 !important;
        }
        & .co-check-wrap input[type="checkbox"] {
            accent-color: #3182ce !important;
        }
        & .co-empty {
            color: #718096 !important;
        }

        /* Subject Save Form - Dark Theme Overrides */
        & .subj-panel {
            border-color: #2d3748 !important;
        }
        & .subj-panel-head {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
            color: #f8fafc !important;
        }
        & .subj-lock-hint {
            background: rgba(255, 255, 255, 0.1) !important;
            color: #cbd5e1 !important;
        }
        & .subj-locked-hint {
            background: rgba(234, 179, 8, 0.2) !important;
            border: 1px solid rgba(234, 179, 8, 0.4) !important;
            color: #fef08a !important;
        }
        & .subj-btn-add {
            background: rgba(255, 255, 255, 0.1) !important;
            color: #f8fafc !important;
            border-color: rgba(255, 255, 255, 0.2) !important;

            &:hover {
                background: rgba(255, 255, 255, 0.2) !important;
            }
        }
        & .subj-item-list {
            background: #171923 !important;
        }
        & .subj-empty {
            color: #718096 !important;
            border-color: #2d3748 !important;
            background: #1a202c !important;
        }
        & .subj-public {
            color: #68d391 !important;
            border-color: #276749 !important;
            background: #1c4532 !important;
        }
        & .subj-item-row {
            background: #1a202c !important;
            border-color: #2d3748 !important;

            &:hover {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
            }
        }
        & .subj-item-num {
            background: linear-gradient(135deg, #2b6cb0, #3182ce) !important;
            color: #ffffff !important;
        }
        & .subj-num-role {
            background: linear-gradient(135deg, #805ad5, #9f7aea) !important;
        }
        & .subj-select {
            border-color: #2d3748 !important;
            color: #e2e8f0 !important;
            background: #171923 !important;
        }
        & .subj-btn-del {
            background: #7f1d1d !important;
            color: #fca5a5 !important;
            border-color: #dc2626 !important;

            &:hover {
                background: #dc2626 !important;
                color: #ffffff !important;
                border-color: #dc2626 !important;
            }
        }

        /* Role Management Save Form - Dark Theme Overrides */
        & .role-perm-label {
            color: #e2e8f0 !important;
        }
        & .role-perm-badge {
            background: linear-gradient(135deg, #2b6cb0, #3182ce) !important;
            color: #ffffff !important;
        }
        & .role-td-title {
            color: #e2e8f0 !important;
        }

        /* Warehouse View Page - Dark Theme Overrides */
        & .wh-layout {
            background: #0f172a !important;
        }
        & .wh-left {
            background: #1e293b !important;
            border-right-color: #334155 !important;
        }
        & .wh-left-head {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
            color: #f8fafc !important;
        }
        & .wh-left-search {
            border-bottom-color: #334155 !important;
        }
        & .wh-search-input {
            border-color: #334155 !important;
            color: #f8fafc !important;
            background: #0f172a !important;

            &:focus {
                border-color: #38bdf8 !important;
            }
        }
        & .wh-item {
            border-bottom-color: #334155 !important;

            &:hover {
                background: #334155 !important;
            }
        }
        & .wh-item-active {
            background: #0f172a !important;
            border-left-color: #38bdf8 !important;
        }
        & .wh-item-title {
            color: #f8fafc !important;
        }
        & .wh-branch-badge {
            color: #94a3b8 !important;
            background: #0f172a !important;
        }
        & .wh-btn-edit-sm {
            background: #1e3a8a !important;
            color: #93c5fd !important;

            &:hover {
                background: #3b82f6 !important;
                color: #ffffff !important;
            }
        }
        & .wh-btn-del-sm {
            background: #7f1d1d !important;
            color: #fca5a5 !important;

            &:hover {
                background: #dc2626 !important;
                color: #ffffff !important;
            }
        }
        & .wh-list-empty {
            color: #64748b !important;
        }
        & .wh-no-select {
            color: #64748b !important;
        }
        & .wh-no-select-title {
            color: #94a3b8 !important;
        }
        & .wh-no-select-sub {
            color: #64748b !important;
        }
        & .wh-storage-head {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
            color: #f8fafc !important;
        }
        & .wh-storage-table-wrap {
            background: #1e293b !important;
        }
        & .wh-storage-table thead tr {
            background: #0f172a !important;
            color: #f8fafc !important;
        }
        & .wh-storage-table tbody tr {
            border-bottom-color: #334155 !important;

            &:hover {
                background: #334155 !important;
            }
        }
        & .wh-row-even {
            background: #0f172a !important;

            &:hover {
                background: #334155 !important;
            }
        }
        & .wh-row-alert {
            background: #78350f !important;
            border-left: 3px solid #f59e0b !important;

            &:hover {
                background: #92400e !important;
            }
        }
        & .wh-td-num {
            color: #64748b !important;
        }
        & .wh-td-product {
            color: #f8fafc !important;
        }
        & .wh-qty-ok {
            background: #064e3b !important;
            color: #6ee7b7 !important;
        }
        & .wh-qty-low {
            background: #7f1d1d !important;
            color: #fca5a5 !important;
        }
        & .wh-alert-val {
            color: #fbbf24 !important;
        }
        & .wh-price-badge {
            color: #38bdf8 !important;
        }
        & .wh-pill-on {
            background: #064e3b !important;
            color: #6ee7b7 !important;
        }
        & .wh-pill-off {
            background: #7f1d1d !important;
            color: #fca5a5 !important;
        }
        & .wh-table-empty {
            color: #64748b !important;
        }
        & .wh-storage-footer {
            background: #0f172a !important;
            border-top-color: #334155 !important;
        }
        & .wh-summary {
            color: #94a3b8 !important;
        }
        & .wh-summary-warn {
            color: #fb923c !important;
        }

        /* Restaurant View Page - Dark Theme Overrides */
        & .restaurant > *,
        & .restaurant .top > *,
        & .restaurant .control > * {
            border-color: #334155 !important;
        }

        /* Login Page - Dark Theme Overrides */
        & .login-bg {
            background: linear-gradient(135deg, #090d16 0%, #0f172a 40%, #1e293b 70%, #0f172a 100%) !important;
        }
        & .login-particles span {
            background: rgba(255, 255, 255, 0.04) !important;
        }
        & .login-card {
            background: rgba(15, 23, 42, 0.6) !important;
            border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
        }
        & .login-logo {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)) !important;
            border: 2px solid rgba(255, 255, 255, 0.15) !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
        }
        & .login-logo-icon {
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
        }
        & .login-brand-name {
            color: #f8fafc !important;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
        }
        & .login-brand-sub {
            color: rgba(255, 255, 255, 0.5) !important;
        }
        & .login-input {
            background: rgba(15, 23, 42, 0.5) !important;
            border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
            color: #f8fafc !important;

            &::placeholder {
                color: rgba(255, 255, 255, 0.35) !important;
            }

            &:focus {
                background: rgba(15, 23, 42, 0.7) !important;
                border-color: #38bdf8 !important;
                box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
            }
        }
        & .login-error {
            background: rgba(127, 29, 29, 0.4) !important;
            border: 1px solid rgba(239, 68, 68, 0.4) !important;
            color: #fca5a5 !important;
        }
        & .login-btn {
            background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
            color: #ffffff !important;
            box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;

            &:hover:not(:disabled) {
                background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
                box-shadow: 0 8px 28px rgba(37, 99, 235, 0.5) !important;
            }

            &:active:not(:disabled) {
                box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
            }
        }
        & .login-btn-loading {
            background: linear-gradient(135deg, #334155, #1e293b) !important;
        }
        & .login-footer {
            color: rgba(255, 255, 255, 0.35) !important;
        }

        /* Food View Page - Dark Theme Overrides */
        & .food {
            background-color: #0f172a !important;
            color: #f8fafc !important;
        }
        & .food .form-minimized-view {
            color: #94a3b8 !important;
        }
        & .food.form-minimized .form:hover {
            background: rgba(99, 102, 241, 0.15) !important;
            border-color: rgba(99, 102, 241, 0.3) !important;
        }
        & .food .home {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            color: #ffffff !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;

            &:hover {
                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
                border-color: #60a5fa !important;
                box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4) !important;
            }
        }
        & .food .header-bar {
            background: rgba(30, 41, 59, 0.7) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        }
        & .food .categories li a {
            background: rgba(255, 255, 255, 0.05) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
            color: #cbd5e1 !important;

            &:hover {
                background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
                color: #ffffff !important;
                border-color: rgba(255, 255, 255, 0.2) !important;
                box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
            }
        }
        & .food .categories li ul {
            background: #1e293b !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5) !important;

            & li a {
                color: #94a3b8 !important;

                &:hover {
                    background: rgba(99, 102, 241, 0.15) !important;
                    color: #818cf8 !important;
                }
            }
        }
        & .food .search-box {
            background: #0f172a !important;
            border-color: rgba(255, 255, 255, 0.12) !important;

            &:focus-within {
                border-color: #6366f1 !important;
                box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
            }

            & input {
                color: #ffffff !important;
            }

            & .search-icon, & .btn-clear-search {
                color: #94a3b8 !important;
            }
        }
        & .food .form {
            background: rgba(30, 41, 59, 0.7) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
        }
        & .food .form-header {
            border-bottom-color: rgba(255, 255, 255, 0.1) !important;
        }
        & .food .head-title {
            color: #f8fafc !important;
        }
        & .food .btn-reset {
            background: rgba(255, 255, 255, 0.08) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: #94a3b8 !important;

            &:hover {
                background: rgba(239, 68, 68, 0.2) !important;
                color: #f87171 !important;
                border-color: rgba(239, 68, 68, 0.3) !important;
            }
        }
        & .food .img-section {
            background: rgba(15, 23, 42, 0.5) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;

            &:hover {
                border-color: #6366f1 !important;
            }
        }
        & .food .img-preview-box {
            background: #0f172a !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        }
        & .food .img-info p {
            color: #94a3b8 !important;
        }
        & .food .btn-upload {
            background: rgba(99, 102, 241, 0.15) !important;
            border-color: rgba(99, 102, 241, 0.3) !important;
            color: #818cf8 !important;

            &:hover {
                background: rgba(99, 102, 241, 0.3) !important;
                color: #ffffff !important;
            }
        }
        & .food .cat-section-label {
            color: #e2e8f0 !important;
        }
        & .food .field-group label {
            color: #cbd5e1 !important;
        }
        & .food .field-group input[type="text"],
        & .food .field-group select {
            background: #0f172a !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            color: #ffffff !important;

            &:focus {
                border-color: #6366f1 !important;
                box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
            }
        }
        & .food .field-group select option {
            background: #1e293b !important;
            color: #ffffff !important;
        }
        & .food .btn-save {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;

            &:hover {
                background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
                box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45) !important;
            }
        }
        & .food .btn-delete {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
            box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;

            &:hover {
                background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
                box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45) !important;
            }
        }
        & .food .items {
            background: rgba(30, 41, 59, 0.7) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
        }
        & .food .item-card {
            background: #1e293b !important;
            border-color: rgba(255, 255, 255, 0.08) !important;

            &:hover {
                border-color: rgba(99, 102, 241, 0.4) !important;
                box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
            }
        }
        & .food .item-img-wrap {
            background: #0f172a !important;
        }
        & .food .item-title {
            color: #f8fafc !important;
        }
        & .food .item-title-en {
            color: #94a3b8 !important;
        }
        & .food .item-actions {
            border-top-color: rgba(255, 255, 255, 0.06) !important;
        }
        & .food .btn-item-edit {
            background: rgba(99, 102, 241, 0.15) !important;
            border-color: rgba(99, 102, 241, 0.3) !important;
            color: #818cf8 !important;

            &:hover {
                background: rgba(99, 102, 241, 0.35) !important;
                color: #ffffff !important;
            }
        }
        & .food .btn-item-delete {
            background: rgba(239, 68, 68, 0.15) !important;
            border-color: rgba(239, 68, 68, 0.3) !important;
            color: #f87171 !important;

            &:hover {
                background: rgba(239, 68, 68, 0.35) !important;
                color: #ffffff !important;
            }
        }
        & .food .empty-items {
            color: #64748b !important;
        }

        /* E-Learning View Page - Dark Theme Overrides */
        & .e_book {
            background: #0a0a0f !important;
            color: #e2e8f0 !important;
        }
        & .e_book > .subject_title {
            background: linear-gradient(135deg, #4f46e5 0%, #312e81 100%) !important;
            border-right-color: #1e1e2e !important;
            border-bottom-color: rgba(0, 0, 0, 0.1) !important;
        }
        & .e_book > .subject_title .eb-subject-name {
            color: #ffffff !important;
        }
        & .e_book > .subject_title .eb-subject-placeholder {
            color: rgba(255, 255, 255, 0.7) !important;
        }
        & .e_book > .subject {
            background: #0f0f18 !important;
            border-bottom-color: #1e1e2e !important;
        }
        & .e_book > .subject ul.menu_top li a {
            color: #94a3b8 !important;

            &:hover, &.active {
                background: rgba(79, 70, 229, 0.08) !important;
                border-color: rgba(79, 70, 229, 0.2) !important;
                color: #4f46e5 !important;
            }
        }
        & .e_book > .subject ul.menu_top li ul {
            background: #13131f !important;
            border: 1px solid #2a2a3e !important;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;

            & li a {
                color: #7c8ba1 !important;

                &:hover {
                    background: rgba(79, 70, 229, 0.08) !important;
                    color: #4f46e5 !important;
                }
            }
        }
        & .e_book > .lesson {
            background: #0d0d18 !important;
            border-right-color: #1e1e2e !important;

            &::-webkit-scrollbar-thumb { background: #2a2a3e !important; }
        }
        & .e_book > .lesson .eb-lesson-group {
            background: rgba(255, 255, 255, 0.03) !important;
            border-color: rgba(255, 255, 255, 0.07) !important;
        }
        & .e_book > .lesson .eb-lesson-header {
            color: #c4cdd8 !important;
            background: rgba(255, 255, 255, 0.04) !important;

            & .eb-lh-icon { color: #4f46e5 !important; }
            & .eb-lh-arrow { color: #94a3b8 !important; }

            &:hover {
                color: #4f46e5 !important;
                background: rgba(99, 102, 241, 0.12) !important;
                & .eb-lh-arrow { color: #4f46e5 !important; }
            }
        }
        & .e_book > .lesson .eb-tutorial-item {
            color: #7c8ba1 !important;
            border-bottom-color: rgba(255, 255, 255, 0.05) !important;

            & .eb-ti-dot { background: #3a3a55 !important; }

            &:hover {
                color: #4f46e5 !important;
                background: rgba(79, 70, 229, 0.04) !important;
                border-left-color: rgba(79, 70, 229, 0.3) !important;

                & .eb-ti-dot {
                    background: #818cf8 !important;
                    box-shadow: 0 0 6px rgba(99, 102, 241, 0.6) !important;
                }
            }

            &.active {
                color: #4f46e5 !important;
                background: rgba(79, 70, 229, 0.08) !important;
                border-left-color: #4f46e5 !important;

                & .eb-ti-dot {
                    background: #4f46e5 !important;
                    box-shadow: 0 0 8px rgba(79, 70, 229, 0.5) !important;
                }
            }
        }
        & .e_book > .tutorial {
            background: #0a0a0f !important;

            &::-webkit-scrollbar-track { background: #0a0a0f !important; }
            &::-webkit-scrollbar-thumb { background: #2a2a3e !important; }
        }
        & .e_book > .tutorial .eb-tutorial-empty {
            color: #4a5568 !important;

            & .eb-empty-text { color: #7c8ba1 !important; }
            & .eb-empty-sub { color: #4a5568 !important; }
        }
        & .e_book > .tutorial .eb-tutorial-content .eb-tutorial-badge {
            background: rgba(79, 70, 229, 0.08) !important;
            border-color: rgba(79, 70, 229, 0.2) !important;
            color: #4f46e5 !important;
        }
        & .e_book > .tutorial .eb-tutorial-content h1.eb-tutorial-title {
            color: #e2e8f0 !important;
            border-bottom-color: #1e1e2e !important;
        }
        & .e_book > .tutorial .eb-tutorial-content .eb-tutorial-body {
            color: #b0bbc8 !important;

            & h1, & h2, & h3, & h4 { color: #dde4ed !important; }
            & h2 { border-bottom-color: #1e1e2e !important; }
            & a { color: #4f46e5 !important; border-bottom-color: rgba(79, 70, 229, 0.4) !important; }
            & a:hover { color: #312e81 !important; }
            & code {
                background: #13131f !important;
                border-color: #2a2a3e !important;
                color: #a5b4fc !important;
            }
            & pre {
                background: #090d16 !important;
                border-color: #1e293b !important;
                & code { color: #cbd5e1 !important; }
            }
            & img { border-color: #2a2a3e !important; }
            & blockquote {
                border-left-color: #4f46e5 !important;
                background: rgba(79, 70, 229, 0.03) !important;
                color: #7c8ba1 !important;
            }
            & table {
                & th {
                    background: #13131f !important;
                    border-color: #2a2a3e !important;
                    color: #c4cdd8 !important;
                }
                & td {
                    border-color: #2a2a3e !important;
                    color: #7c8ba1 !important;
                }
                & tr:nth-child(even) td { background: rgba(255, 255, 255, 0.03) !important; }
            }
        }
    }

    /* ── Dashboard & Charts ──────────────────────────────────── */
    & .dashboard-card {
        background: #13141f !important;
        border-color: #222436 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    }
    & .dashboard-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
        border-color: #3b3d5c !important;
    }
    & .dashboard-card-head {
        border-bottom-color: #222436 !important;
    }
    & .dashboard-card-head h3 {
        color: #e2e8f0 !important;
    }
    /* ── chart_other_box Dark Mode ── */
    & .chart_other_box > .dashboard-card-head {
        border-image: linear-gradient(90deg, #818cf8 0%, #a78bfa 50%, #22d3ee 100%) 1 !important;
    }
    & .chart_other_box > .dashboard-card-head h3 {
        color: #e2e8f0 !important;
    }
    & .chart_other_box > .dashboard-card-head::before {
        background: linear-gradient(180deg, #818cf8, #a78bfa) !important;
    }
    & .chart_other_box > .chart_generic {
        background: transparent !important;
    }
    & .menu-item-box {
        background: #1c1d2e !important;
        border-color: #2a2b42 !important;
    }
    & .menu-item-box:hover {
        background: #25273d !important;
        border-color: #4f46e5 !important;
    }
    & .menu-item-box p {
        color: #cbd5e1 !important;
    }
    & .menu-items-scroll-wrap::-webkit-scrollbar-thumb {
        background: #3b3d5c !important;
    }
    & .big-calendar-wrapper {
        background: #13141f !important;
        border-color: #222436 !important;
    }
    & .calendar-header {
        background: #1a1b2b !important;
        border-bottom-color: #222436 !important;
    }
    & .calendar-month-year {
        color: #f8fafc !important;
    }
    & .btn-cal-nav, & .btn-cal-today {
        background: #1c1d2e !important;
        border-color: #333550 !important;
        color: #cbd5e1 !important;
    }
    & .btn-cal-nav:hover, & .btn-cal-today:hover {
        background: #4f46e5 !important;
        color: #ffffff !important;
    }
    & .calendar-legend {
        color: #94a3b8 !important;
    }
    & .calendar-grid-header {
        background: #181928 !important;
        color: #cbd5e1 !important;
        border-bottom-color: #222436 !important;
    }
    & .calendar-grid-days {
        background: #222436 !important;
    }
    & .calendar-day-cell {
        background: #13141f !important;
    }
    & .calendar-day-cell.other-month {
        background: #0f1019 !important;
        opacity: 0.4 !important;
    }
    & .calendar-day-cell.today-cell {
        background: rgba(79, 70, 229, 0.15) !important;
        box-shadow: inset 0 0 0 2px #6366f1 !important;
    }
    & .day-cell-number {
        color: #e2e8f0 !important;
    }

    /* ── Table Dashboard Dark Mode ── */
    & .tbl-dash-search {
        background: #1a1b2b !important;
        border-color: #333550 !important;
        color: #e2e8f0 !important;
    }
    & .tbl-dash-search:focus {
        border-color: #6366f1 !important;
        background: #13141f !important;
        box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important;
    }
    & .tbl-dash-count {
        background: #1c1d2e !important;
        color: #94a3b8 !important;
    }
    & .tbl-dash-scroll {
        border-color: #222436 !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
    }
    & .tbl-dash-scroll::-webkit-scrollbar-thumb {
        background: #3b3d5c !important;
    }
    & .tbl-dash thead tr {
        background: linear-gradient(135deg, #312e81 0%, #4f46e5 100%) !important;
    }
    & .tbl-dash tbody tr.tbl-row-even {
        background: #13141f !important;
    }
    & .tbl-dash tbody tr.tbl-row-odd {
        background: #1a1b2b !important;
    }
    & .tbl-dash tbody tr {
        border-bottom-color: #222436 !important;
    }
    & .tbl-dash tbody tr:hover {
        background: #1e1f3a !important;
    }
    & .tbl-dash td {
        color: #cbd5e1 !important;
    }
    & .tbl-td-num-val {
        color: #a5b4fc !important;
    }
    & .tbl-empty {
        color: #475569 !important;
    }

    /* ════════════════════════════════════════
       REPORT PAGE — Dark Mode
       ════════════════════════════════════════ */

    /* ── Root layout ── */
    & .rpt-layout {
        background: #0f1019 !important;
        border-color: #222436 !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
    }

    /* ── Sidebar (already dark by design, just tweak borders) ── */
    & .rpt-sidebar {
        background: #13141f !important;
        border-right-color: #222436 !important;
    }
    & .rpt-sidebar-head {
        background: linear-gradient(135deg, #1e1b4b, #3730a3) !important;
    }
    & .rpt-sidebar-search {
        background: #0f1019 !important;
        border-bottom-color: #1e1f35 !important;
    }
    & .rpt-sidebar-filter {
        background: rgba(255,255,255,0.06) !important;
        border-color: rgba(255,255,255,0.1) !important;
        color: #e2e8f0 !important;
    }
    & .rpt-sidebar-filter:focus {
        border-color: #6366f1 !important;
        background: rgba(255,255,255,0.1) !important;
    }
    & .rpt-list-item { color: #64748b !important; }
    & .rpt-list-item:hover {
        background: rgba(255,255,255,0.05) !important;
        color: #cbd5e1 !important;
    }
    & .rpt-list-item.rpt-active {
        background: rgba(99,102,241,0.18) !important;
        color: #a5b4fc !important;
    }
    & .rpt-list-empty { color: #334155 !important; }

    /* ── Top bar ── */
    & .rpt-topbar {
        background: #1a1b2b !important;
        border-bottom-color: #222436 !important;
        box-shadow: 0 1px 6px rgba(0,0,0,0.4) !important;
    }
    & .rpt-active-title { color: #e2e8f0 !important; }

    & .rpt-btn-toggle {
        background: rgba(255,255,255,0.05) !important;
        border-color: #333550 !important;
        color: #94a3b8 !important;
    }
    & .rpt-btn-toggle:hover {
        background: rgba(99,102,241,0.15) !important;
        color: #a5b4fc !important;
    }

    & .rpt-field-group label { color: #64748b !important; }

    & .rpt-input {
        background: #0f1019 !important;
        border-color: #333550 !important;
        color: #e2e8f0 !important;
    }
    & .rpt-input:focus {
        border-color: #6366f1 !important;
        background: #13141f !important;
        box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important;
    }

    & .rpt-btn-export {
        background: #1a1b2b !important;
        border-color: #333550 !important;
        color: #94a3b8 !important;
    }
    & .rpt-btn-export:hover {
        background: rgba(16,185,129,0.1) !important;
        border-color: #10b981 !important;
        color: #34d399 !important;
    }

    /* ── Content area ── */
    & .rpt-content {
        background: #0d0e1a !important;
    }
    & .rpt-content::-webkit-scrollbar-thumb {
        background: #3b3d5c !important;
    }

    & .rpt-empty-state h3 { color: #475569 !important; }
    & .rpt-empty-state p  { color: #334155 !important; }

    & .rpt-chart-area,
    & .rpt-table-area {
        background: #13141f !important;
        border-color: #222436 !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
    }
    & .card{
        border-radius: 10px;
        background: #252b3d;
    }
}