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

[bg="light"] {
    background-color: #f0f4f8 !important;
    color: #1a202c !important;

    & a {
        color: #2b6cb0 !important;
    }

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

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

        & li ul {
            background: #ffffff !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        }

        &.bg_1 a,
        &.bg_2 a {
            background: #21627b !important;
            border-color: #61c419 !important;
            color: #ffffff !important;

            &[click]:hover {
                color: #000 !important;
                background: linear-gradient(to bottom, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%) !important;
                border-color: #00cccc !important;
            }
        }
    }

    /* ── Buttons ──────────────────────────────────────────────── */
    & .sub_bt_1>*,
    & .bt_1 {
        background: linear-gradient(to bottom, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%) !important;
        color: #1a3c5e !important;
        border-color: #5a9fc0 !important;

        &:hover {
            background: linear-gradient(to bottom, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%) !important;
            color: #0a2440 !important;
        }
    }

    & .sub_bt_2>*,
    & .bt_2 {
        background: linear-gradient(to bottom, #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%) !important;
        color: #ffffff !important;
        border-color: #c44a00 !important;

        &:hover {
            background: linear-gradient(to bottom, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%) !important;
        }
    }

    & .sub_bt_3>*,
    & .bt_3 {
        background: linear-gradient(to bottom, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%) !important;
        color: #ffffff !important;
        border-color: #5a8a00 !important;

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

    & .sub_bt_4>*,
    & .bt_4 {
        background: linear-gradient(to bottom, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%) !important;
        color: #2d3748 !important;
        border-color: #9ab3c4 !important;

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

    & .sub_bt_5>*,
    & .bt_5 {
        background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%) !important;
        color: #ffffff !important;
        border-color: #555555 !important;

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

    /* ── Sub buttons ──────────────────────────────────────────── */
    & .sub_button>* {
        background: #cccccc !important;
        border-color: #999999 !important;
        color: #1a202c !important;
    }

    & .sub_button>.b_1 {
        background: #ff0000 !important;
        color: #ffffff !important;
    }

    & .sub_button>.b_2 {
        background: #8eb92a !important;
        color: #ffffff !important;
    }

    & .sub_button>.b_3 {
        background: #89c3eb !important;
        color: #1a202c !important;
    }

    & .sub_button>.b_4 {
        background: #61c419 !important;
        color: #ffffff !important;
    }

    & .sub_button_1>* {
        background: linear-gradient(to bottom, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%) !important;
        border-color: #9ab3c4 !important;
    }

    & .sub_button_1>.b_1 {
        background: linear-gradient(to bottom, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%) !important;
        color: #ffffff !important;
    }

    & .sub_button_1>.b_2 {
        background: linear-gradient(to bottom, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%) !important;
        color: #ffffff !important;
    }

    & .sub_button_1>.b_3 {
        background: linear-gradient(to bottom, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%) !important;
        color: #1a3c5e !important;
    }

    & .sub_button_1>.b_4 {
        background: linear-gradient(to bottom, #b4e391 0%, #61c419 50%, #b4e391 100%) !important;
        color: #ffffff !important;
    }

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

    /* ── Form (bg_form) ───────────────────────────────────────── */
    & .bg_form>.form_1 {
        background: #ffffff !important;
        border-color: #cccccc !important;

        &>.head {
            background: #e0e6ea !important;
            border-color: #cccccc !important;
            color: #1a202c !important;
        }

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

    /* ── Popup ────────────────────────────────────────────────── */
    & .popup>.form_popup {
        background: #ffffff !important;
        color: #1a202c !important;
        border-color: #cccccc !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    }

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

    /* ── List backgrounds ─────────────────────────────────────── */
    & .lbg_1 {
        background: #1a202c !important;
        color: #f0f4f8 !important;

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

        &>*:nth-child(odd) {
            background: rgba(0, 255, 255, 0.15) !important;
        }

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

        &>*:hover {
            background: rgba(0, 255, 0, 0.15) !important;
        }
    }

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

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

        &>*:nth-child(odd) {
            background: rgba(0, 255, 255, 0.2) !important;
        }

        &>*.selected {
            background: rgba(255, 0, 0, 0.18) !important;
        }

        &>*:hover {
            background: rgba(0, 255, 0, 0.13) !important;
        }
    }

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

            & .first,
            & .prevent,
            & .next,
            & .last {
                background: linear-gradient(to bottom, #a7c7dc 0%, #85b2d3 100%) !important;
                color: #1a3c5e !important;
            }

            & .list {
                background: #d8e1e7 !important;
                border-color: #cccccc !important;

                & * {
                    background: linear-gradient(to bottom, #a7c7dc 0%, #85b2d3 100%) !important;
                    color: #1a3c5e !important;
                }
            }
        }
    }

    /* ── Horizontal Tab ───────────────────────────────────────── */
    & .horizontal_tab {
        &>.head {
            background: #f9f9f9 !important;
            border-color: #dddddd !important;

            &>div {
                color: #fff !important;
                border-color: #eeeeee !important;

                &:hover {
                    background: #e6f0ff !important;
                    color: #1a202c !important;
                }
            }

            &>.selected {
                background: #2196f3 !important;
                color: #ffffff !important;
            }
        }

        &>.body {
            background: #ffffff !important;
            border-color: #dddddd !important;
        }
    }

    /* ── Vertical Tab ─────────────────────────────────────────── */
    & .vertical_tab {
        border-color: #cccccc !important;
        background: #ffffff !important;

        &>.head {
            background: #f5f5f5 !important;
            border-color: #dddddd !important;

            &>input {
                background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%) !important;
                color: #1a202c !important;
                border-color: #cccccc !important;

                &:hover {
                    background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%) !important;
                }
            }

            &>div {
                color: #444444 !important;
                border-color: #eeeeee !important;

                &:hover {
                    background: #e6f0ff !important;
                }
            }

            &>.selected {
                background: #e3f2fd !important;
                color: #2196f3 !important;
                border-color: #2196f3 !important;
            }
        }

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

    /* ── Drop Zone ────────────────────────────────────────────── */
    & .drop_zone {
        border-color: #aaaaaa !important;
        color: #888888 !important;
        background: #fafafa !important;

        &.dragover {
            border-color: #2196f3 !important;
            background: #e3f2fd !important;
            color: #2196f3 !important;
        }
    }

    /* ── Text Popup ───────────────────────────────────────────── */
    & .text_popup>div>div {
        background: #ffffff !important;
        border-color: #cccccc !important;
        color: #1a202c !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

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

        & .head {
            background: linear-gradient(135deg, #1a3c5e 0%, #21627b 60%, #2e86ab 100%) !important;
        }

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

        & .img-section {
            background: #f5f8fc !important;
            border-color: #b0c8e0 !important;
        }

        & .img-preview-box {
            background: #e0ecf6 !important;
            border-color: #90bcd8 !important;
        }

        & .img-preview-box .img-placeholder {
            color: #90bcd8 !important;
        }

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

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

            & input[type="text"],
            & input[type="password"],
            & input[type="email"],
            & input[type="tel"],
            & input[type="number"],
            & input[type="date"],
            & select {
                background: #f9fbfd !important;
                border-color: #c8daea !important;
                color: #1a3c5e !important;

                &:focus {
                    border-color: #2196f3 !important;
                    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.12) !important;
                    background: #ffffff !important;
                }
            }
        }

        & .status-opt {
            background: #f9fbfd !important;
            border-color: #c8daea !important;
            color: #5a728d !important;

            &.active-enable {
                background: #e8f5e9 !important;
                border-color: #66bb6a !important;
                color: #2e7d32 !important;
            }

            &.active-disable {
                background: #fce4ec !important;
                border-color: #ef9a9a !important;
                color: #c62828 !important;
            }
        }

        & .footer {
            background: #f5f8fc !important;
            border-color: #e2ecf4 !important;
        }

        & .btn-save {
            background: linear-gradient(135deg, #21627b 0%, #2e86ab 100%) !important;
            box-shadow: 0 4px 14px rgba(33, 98, 123, 0.3) !important;

            &:hover {
                box-shadow: 0 6px 18px rgba(33, 98, 123, 0.4) !important;
            }
        }

        & .btn-cancel {
            background: #e2ecf4 !important;
            color: #5a728d !important;

            &:hover {
                background: #c8d9e5 !important;
                color: #425a75 !important;
            }
        }
    }

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

        &>.dm-top {
            background: linear-gradient(135deg, #1a3c5e 0%, #21627b 60%, #2e86ab 100%) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;

            & .btn-add,
            & .btn-search {
                background: rgba(255, 255, 255, 0.18) !important;
                border-color: rgba(255, 255, 255, 0.35) !important;
                color: #ffffff !important;

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

            & .dm-search-input {
                background: rgba(255, 255, 255, 0.15) !important;
                border-color: rgba(255, 255, 255, 0.35) !important;
                color: #ffffff !important;

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

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

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

            & table {
                & thead tr {
                    background: #1a3c5e !important;

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

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

                    &:hover {
                        background: #f0f6fb !important;
                    }

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

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

                    & td {
                        color: #2c3e50 !important;

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

                        & .btn-edit {
                            background: #e8f4ff !important;
                            color: #1a6fa8 !important;
                            border-color: #b0d8f0 !important;

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

                        & .btn-del {
                            background: #fff0f0 !important;
                            color: #c62828 !important;
                            border-color: #f5b8b8 !important;

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

        &>.dm-footer {
            background: #ffffff !important;
            border-color: #e2ecf4 !important;

            & .dm-size-select {
                background: #f9fbfd !important;
                border-color: #c8daea !important;
                color: #1a3c5e !important;
            }

            & .pagging>div {
                background: #f9fbfd !important;
                border-color: #c8daea !important;
                color: #3a5068 !important;

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

            & .pagging .list>div {
                background: #f9fbfd !important;
                border-color: #c8daea !important;
                color: #3a5068 !important;

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

    /* ── Branch/Page status toggles ───────────────────────────── */
    & .branch-status-opt {
        background: #f9fbfd !important;
        border-color: #c8daea !important;
        color: #5a728d !important;

        &:hover {
            background: #eaf4fb !important;
            border-color: #90bcd8 !important;
        }
    }

    & .branch-status-active {
        background: #e8f5e9 !important;
        border-color: #66bb6a !important;
        color: #2e7d32 !important;
        box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.15) !important;
    }

    & .branch-status-inactive {
        background: #fce4ec !important;
        border-color: #ef9a9a !important;
        color: #c62828 !important;
        box-shadow: 0 0 0 3px rgba(239, 154, 154, 0.15) !important;
    }

    & .page-default-yes {
        background: #fff8e1 !important;
        border-color: #ffca28 !important;
        color: #f57f17 !important;
        box-shadow: 0 0 0 3px rgba(255, 202, 40, 0.18) !important;
    }

    & .page-default-no {
        background: #f5f5f5 !important;
        border-color: #bdbdbd !important;
        color: #616161 !important;
    }

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

        &>.footer {
            border-color: #cccccc !important;
            background: #f9fbfd !important;
        }
    }

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

        &>.head {
            background: #cccccc !important;
            color: #1a202c !important;
        }

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

    /* ── Table report ─────────────────────────────────────────── */
    & table.report {
        & thead tr th {
            background: #1a3c5e !important;
            color: #ffffff !important;
            border-color: #c8daea !important;
        }

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

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

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

            &:hover {
                background: #e8f4fb !important;
            }

            & td {
                color: #2c3e50 !important;
                border-color: #e2ecf4 !important;
            }
        }

        & tfoot tr td {
            background: #e8eef4 !important;
            color: #1a3c5e !important;
            border-color: #c8daea !important;
        }
    }

    /* ── Input / Select (global) ──────────────────────────────── */
    & input,
    & select,
    & textarea {
        background: #ffffff !important;
        color: #1a202c !important;
        border-color: #cccccc !important;

        &::placeholder {
            color: #aaaaaa !important;
        }

        &:focus {
            border-color: #2196f3 !important;
            outline: none !important;
        }
    }

    /* ── Alert ────────────────────────────────────────────────── */
    & #alert {
        background: rgba(0, 0, 0, 0.75) !important;
        border-color: #ffffff !important;
        color: #00ffff !important;
    }

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

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

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

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

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

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

        &:hover {
            background: #90bcd8;
        }
    }

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

    & .cat-section-label {
        background: linear-gradient(135deg, #1a3c5e 0%, #2e86ab 100%) !important;
        color: #ffffff !important;
    }

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

    & .cat-lang-kh {
        background: #1565c0 !important;
        color: #ffffff !important;
    }

    & .cat-lang-en {
        background: #6a1b9a !important;
        color: #ffffff !important;
    }

    & .branch-status-opt {
        background: #f9fbfd !important;
        border-color: #c8daea !important;
        color: #5a728d !important;

        &:hover {
            background: #eaf4fb !important;
            border-color: #90bcd8 !important;
        }
    }

    & .branch-status-active {
        background: #e8f5e9 !important;
        border-color: #66bb6a !important;
        color: #2e7d32 !important;
        box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.15) !important;
    }

    & .branch-status-inactive {
        background: #fce4ec !important;
        border-color: #ef9a9a !important;
        color: #c62828 !important;
        box-shadow: 0 0 0 3px rgba(239, 154, 154, 0.15) !important;
    }

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

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

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

    & .prod-prop-empty {
        color: #a0b5c8 !important;
        border-color: #d0e4f0 !important;
        background: #f8fbfd !important;
    }

    & .prod-prop-card {
        background: #f5f9fd !important;
        border-color: #d0e4f0 !important;

        &:hover {
            box-shadow: 0 2px 10px rgba(33, 98, 123, 0.1) !important;
        }
    }

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

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

    & .prod-materials-box {
        background: #ffffff !important;
        border-color: #d0e4f0 !important;
    }

    & .prod-materials-head {
        color: #21627b !important;
    }

    & .btn-add-mat {
        background: #eaf4fb !important;
        color: #21627b !important;
        border-color: #90bcd8 !important;

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

    & .prod-mat-empty {
        background: #f8fbfd !important;
        color: #a0b5c8 !important;
        border-color: #d0e4f0 !important;
    }

    & .prod-mat-row {
        background: #f8fbfd !important;
        border-color: #e2ecf4 !important;
    }

    & .btn-del-mat {
        background: #fff0f0 !important;
        color: #c62828 !important;
        border-color: #f5b8b8 !important;

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

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

    & .prod-btn-del-prop {
        background: #fff0f0 !important;
        color: #c62828 !important;
        border-color: #f5b8b8 !important;

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

    & .prod-textarea {
        background: #f9fbfd !important;
        color: #1a3c5e !important;
        border-color: #c8daea !important;

        &:focus {
            border-color: #2196f3 !important;
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.12) !important;
            background: #ffffff !important;
        }
    }

    /* ── Food View Page (view.php) ────────────────────────────── */
    & .food {
        background-color: #f1f5f9 !important;
        color: #1e293b !important;

        & .header-bar {
            background: #ffffff !important;
            border-color: #e2e8f0 !important;
        }

        & .categories li a {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            color: #334155 !important;

            &:hover {
                background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
                color: #ffffff !important;
            }
        }

        & .categories li ul {
            background: #ffffff !important;
            border-color: #e2e8f0 !important;

            & li a {
                color: #475569 !important;

                &:hover {
                    background: rgba(99, 102, 241, 0.1) !important;
                    color: #4f46e5 !important;
                }
            }
        }

        & .search-box {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;

            & input {
                color: #1e293b !important;
            }
        }

        & .form {
            background: #ffffff !important;
            border-color: #e2e8f0 !important;
        }

        & .form-header {
            border-bottom-color: #e2e8f0 !important;
        }

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

        & .btn-reset {
            background: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
            color: #64748b !important;

            &:hover {
                background: #fee2e2 !important;
                color: #ef4444 !important;
            }
        }

        & .img-section {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
        }

        & .img-preview-box {
            background: #ffffff !important;
            border-color: #e2e8f0 !important;
        }

        & .btn-upload {
            background: rgba(99, 102, 241, 0.1) !important;
            border-color: rgba(99, 102, 241, 0.3) !important;
            color: #4f46e5 !important;
        }

        & .items {
            background: #ffffff !important;
            border-color: #e2e8f0 !important;
        }

        & .item-card {
            background: #f8fafc !important;
            border-color: #e2e8f0 !important;
        }

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

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

        & .item-title-en {
            color: #64748b !important;
        }

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

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

        /* Product Save Form - Light Theme Overrides */
        & .cat-title-section {
            border-color: #d0e4f0 !important;
        }
        & .cat-section-label {
            background: linear-gradient(135deg, #1a3c5e 0%, #2e86ab 100%) !important;
            color: #ffffff !important;
        }
        & .cat-title-group {
            background: #f8fbfd !important;
        }
        & .cat-lang-kh {
            background: #1565c0 !important;
            color: #ffffff !important;
        }
        & .cat-lang-en {
            background: #6a1b9a !important;
            color: #ffffff !important;
        }
        & .branch-status-opt {
            border-color: #c8daea !important;
            color: #5a728d !important;
            background: #f9fbfd !important;

            &:hover {
                background: #eaf4fb !important;
                border-color: #90bcd8 !important;
            }
        }
        & .branch-status-active {
            background: #e8f5e9 !important;
            border-color: #66bb6a !important;
            color: #2e7d32 !important;
        }
        & .branch-status-inactive {
            background: #fce4ec !important;
            border-color: #ef9a9a !important;
            color: #c62828 !important;
        }
        & .prod-prop-header {
            border-bottom-color: #e2ecf4 !important;
        }
        & .prod-prop-label {
            color: #1a3c5e !important;
        }
        & .prod-btn-add-prop {
            background: linear-gradient(135deg, #21627b, #2e86ab) !important;
            color: #ffffff !important;
        }
        & .prod-prop-empty {
            color: #a0b5c8 !important;
            border-color: #d0e4f0 !important;
            background: #f8fbfd !important;
        }
        & .prod-prop-card {
            background: #f5f9fd !important;
            border-color: #d0e4f0 !important;

            &:hover {
                box-shadow: 0 2px 10px rgba(33, 98, 123, 0.1) !important;
            }
        }
        & .prod-prop-card-head {
            border-bottom-color: #e2ecf4 !important;
        }
        & .prod-prop-card-title {
            color: #1a3c5e !important;
        }
        & .prod-materials-box {
            background: #ffffff !important;
            border-color: #d0e4f0 !important;
        }
        & .prod-materials-head {
            color: #21627b !important;
        }
        & .btn-add-mat {
            background: #eaf4fb !important;
            color: #21627b !important;
            border-color: #90bcd8 !important;

            &:hover {
                background: #21627b !important;
                color: #ffffff !important;
            }
        }
        & .prod-materials-list::-webkit-scrollbar-track {
            background: #f1f5f9 !important;
        }
        & .prod-materials-list::-webkit-scrollbar-thumb {
            background: #cbd5e1 !important;

            &:hover {
                background: #94a3b8 !important;
            }
        }
        & .prod-mat-empty {
            background: #f8fbfd !important;
            color: #a0b5c8 !important;
            border-color: #d0e4f0 !important;
        }
        & .prod-mat-row {
            background: #f8fbfd !important;
            border-color: #e2ecf4 !important;
        }
        & .btn-del-mat {
            background: #fff0f0 !important;
            color: #c62828 !important;
            border-color: #f5b8b8 !important;

            &:hover {
                background: #c62828 !important;
                color: #ffffff !important;
            }
        }
        & .prod-prop-num {
            background: linear-gradient(135deg, #21627b, #2e86ab) !important;
            color: #ffffff !important;
        }
        & .prod-btn-del-prop {
            background: #fff0f0 !important;
            color: #c62828 !important;
            border-color: #f5b8b8 !important;

            &:hover {
                background: #c62828 !important;
                color: #ffffff !important;
            }
        }
        & .prod-textarea {
            border-color: #c8daea !important;
            color: #1a3c5e !important;
            background: #f9fbfd !important;

            &:focus {
                border-color: #2196f3 !important;
                background: #ffffff !important;
            }
        }
        & .btn-camera {
            background: linear-gradient(135deg, #16a34a, #15803d) !important;
            color: #ffffff !important;
        }
        & .cam-modal-overlay {
            background: rgba(0, 0, 0, 0.75) !important;
        }
        & .cam-modal-content {
            background: #ffffff !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
        }
        & .cam-modal-head {
            background: #1a3c5e !important;
            color: #ffffff !important;
        }
        & .cam-modal-foot {
            background: #f8fafc !important;
            border-top-color: #e2e8f0 !important;
        }
        & .cam-btn-cancel {
            background: #ffffff !important;
            color: #475569 !important;
            border-color: #cbd5e1 !important;
        }
        & .cam-btn-snap {
            background: linear-gradient(135deg, #16a34a, #15803d) !important;
            color: #ffffff !important;
        }

        /* App Save Form - Light Theme Overrides */
        & .app-pages-label {
            color: #1a3c5e !important;
        }
        & .app-pages-badge {
            background: linear-gradient(135deg, #21627b, #2e86ab) !important;
            color: #ffffff !important;
        }
        & .co-pages-table-wrap {
            border-color: #d0e4f0 !important;
            box-shadow: 0 2px 8px rgba(33, 98, 123, 0.07) !important;
        }
        & .co-pages-table thead tr {
            background: linear-gradient(135deg, #1a3c5e 0%, #21627b 100%) !important;
            color: #ffffff !important;
        }
        & .co-pages-table tbody tr {
            border-bottom-color: #e8eef4 !important;

            &:hover {
                background: #eaf4fb !important;
            }

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

                &:hover {
                    background: #ddeef8 !important;
                }
            }
        }
        & .co-td-num {
            color: #7a9ab5 !important;
        }
        & .co-td-title {
            color: #1a3c5e !important;
        }
        & .co-check-wrap input[type="checkbox"] {
            accent-color: #21627b !important;
        }
        & .co-empty {
            color: #a0b5c8 !important;
        }

        /* Subject Save Form - Light Theme Overrides */
        & .subj-panel {
            border-color: #d0e4f0 !important;
        }
        & .subj-panel-head {
            background: linear-gradient(135deg, #1a3c5e 0%, #2e86ab 100%) !important;
            color: #ffffff !important;
        }
        & .subj-lock-hint {
            background: rgba(255, 255, 255, 0.15) !important;
            color: #ffffff !important;
        }
        & .subj-locked-hint {
            background: rgba(255, 200, 100, 0.25) !important;
            border: 1px solid rgba(255, 200, 100, 0.5) !important;
        }
        & .subj-btn-add {
            background: rgba(255, 255, 255, 0.18) !important;
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.35) !important;

            &:hover {
                background: rgba(255, 255, 255, 0.32) !important;
            }
        }
        & .subj-item-list {
            background: #f8fbfd !important;
        }
        & .subj-empty {
            color: #a0b5c8 !important;
            border-color: #d0e4f0 !important;
            background: #ffffff !important;
        }
        & .subj-public {
            color: #2e7d32 !important;
            border-color: #a5d6a7 !important;
            background: #f1f8f1 !important;
        }
        & .subj-item-row {
            background: #ffffff !important;
            border-color: #d0e4f0 !important;

            &:hover {
                box-shadow: 0 2px 8px rgba(33, 98, 123, 0.1) !important;
            }
        }
        & .subj-item-num {
            background: linear-gradient(135deg, #21627b, #2e86ab) !important;
            color: #ffffff !important;
        }
        & .subj-num-role {
            background: linear-gradient(135deg, #6a1b9a, #9c27b0) !important;
        }
        & .subj-select {
            border-color: #c8daea !important;
            color: #1a3c5e !important;
            background: #f9fbfd !important;
        }
        & .subj-btn-del {
            background: #fff0f0 !important;
            color: #c62828 !important;
            border-color: #f5b8b8 !important;

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

        /* Role Management Save Form - Light Theme Overrides */
        & .role-perm-label {
            color: #1a3c5e !important;
        }
        & .role-perm-badge {
            background: linear-gradient(135deg, #21627b, #2e86ab) !important;
            color: #ffffff !important;
        }
        & .role-td-title {
            color: #1a3c5e !important;
        }

        /* Warehouse View Page - Light Theme Overrides */
        & .wh-layout {
            background: #f0f4f8 !important;
        }
        & .wh-left {
            background: #ffffff !important;
            border-right-color: #d0e4f0 !important;
        }
        & .wh-left-head {
            background: linear-gradient(135deg, #1a3c5e 0%, #2e86ab 100%) !important;
            color: #ffffff !important;
        }
        & .wh-btn-add {
            background: rgba(255, 255, 255, 0.18) !important;
            border-color: rgba(255, 255, 255, 0.35) !important;
            color: #ffffff !important;

            &:hover {
                background: rgba(255, 255, 255, 0.32) !important;
            }
        }
        & .wh-left-search {
            border-bottom-color: #e8eef4 !important;
        }
        & .wh-search-input {
            border-color: #c8daea !important;
            color: #1a3c5e !important;
            background: #f9fbfd !important;

            &:focus {
                border-color: #2e86ab !important;
            }
        }
        & .wh-item {
            border-bottom-color: #eef3f8 !important;

            &:hover {
                background: #f0f6fb !important;
            }
        }
        & .wh-item-active {
            background: #e3f2fd !important;
            border-left-color: #2e86ab !important;
        }
        & .wh-item-title {
            color: #1a3c5e !important;
        }
        & .wh-branch-badge {
            color: #6a8faa !important;
            background: #eef3f8 !important;
        }
        & .wh-dot-on {
            background: #4caf50 !important;
            box-shadow: 0 0 0 2px #c8e6c9 !important;
        }
        & .wh-dot-off {
            background: #f44336 !important;
            box-shadow: 0 0 0 2px #ffcdd2 !important;
        }
        & .wh-btn-edit-sm {
            background: #e8f4ff !important;
            color: #1a6fa8 !important;

            &:hover {
                background: #2e86ab !important;
                color: #ffffff !important;
            }
        }
        & .wh-btn-del-sm {
            background: #fff0f0 !important;
            color: #c62828 !important;

            &:hover {
                background: #c62828 !important;
                color: #ffffff !important;
            }
        }
        & .wh-list-empty {
            color: #a0b5c8 !important;
        }
        & .wh-no-select {
            color: #90a4b8 !important;
        }
        & .wh-no-select-title {
            color: #7a9ab5 !important;
        }
        & .wh-no-select-sub {
            color: #b0c5d5 !important;
        }
        & .wh-storage-head {
            background: linear-gradient(135deg, #1a3c5e 0%, #21627b 60%, #2e86ab 100%) !important;
            color: #ffffff !important;
        }
        & .wh-storage-search {
            background: rgba(255, 255, 255, 0.15) !important;
            border-color: rgba(255, 255, 255, 0.3) !important;
            color: #ffffff !important;

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

            &:focus {
                background: rgba(255, 255, 255, 0.25) !important;
            }
        }
        & .wh-btn-add-storage {
            background: rgba(255, 255, 255, 0.18) !important;
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.35) !important;

            &:hover {
                background: rgba(255, 255, 255, 0.3) !important;
            }
        }
        & .wh-storage-table-wrap {
            background: #ffffff !important;
        }
        & .wh-storage-table thead tr {
            background: #1a3c5e !important;
            color: #ffffff !important;
        }
        & .wh-storage-table tbody tr {
            border-bottom-color: #e8eef4 !important;

            &:hover {
                background: #f0f6fb !important;
            }
        }
        & .wh-row-even {
            background: #f8fafc !important;

            &:hover {
                background: #e8f2f9 !important;
            }
        }
        & .wh-row-alert {
            background: #fff8e1 !important;
            border-left: 3px solid #ffca28 !important;

            &:hover {
                background: #fff3cd !important;
            }
        }
        & .wh-td-num {
            color: #7a9ab5 !important;
        }
        & .wh-td-product {
            color: #1a3c5e !important;
        }
        & .wh-qty-ok {
            background: #e8f5e9 !important;
            color: #2e7d32 !important;
        }
        & .wh-qty-low {
            background: #ffebee !important;
            color: #c62828 !important;
        }
        & .wh-alert-val {
            color: #f57f17 !important;
        }
        & .wh-price-badge {
            color: #1a6fa8 !important;
        }
        & .wh-pill-on {
            background: #e8f5e9 !important;
            color: #2e7d32 !important;
        }
        & .wh-pill-off {
            background: #fce4ec !important;
            color: #c62828 !important;
        }
        & .wh-table-empty {
            color: #a0b5c8 !important;
        }
        & .wh-storage-footer {
            background: #f5f8fc !important;
            border-top-color: #e2ecf4 !important;
        }
        & .wh-summary {
            color: #5a728d !important;
        }
        & .wh-summary-warn {
            color: #e65100 !important;
        }

        /* chart_other_box — Light Theme Overrides */
        & .chart_other_box > .dashboard-card-head {
            border-image: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%) 1 !important;
        }
        & .chart_other_box > .dashboard-card-head h3 {
            color: #2d3748 !important;
        }
        & .chart_other_box > .dashboard-card-head::before {
            background: linear-gradient(180deg, #6366f1, #8b5cf6) !important;
        }
        & .chart_other_box > .chart_generic {
            background: #f8fafc !important;
            border-radius: 8px !important;
        }

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

        /* Login Page - Light Theme Overrides */
        & .login-bg {
            background: linear-gradient(135deg, #1a3c5e 0%, #21627b 40%, #2e86ab 70%, #48cae4 100%) !important;
        }
        & .login-particles span {
            background: rgba(255, 255, 255, 0.12) !important;
        }
        & .login-card {
            background: rgba(255, 255, 255, 0.12) !important;
            border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
        }
        & .login-logo {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.08)) !important;
            border: 2px solid rgba(255, 255, 255, 0.3) !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
        }
        & .login-logo-icon {
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
        }
        & .login-brand-name {
            color: #ffffff !important;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        }
        & .login-brand-sub {
            color: rgba(255, 255, 255, 0.75) !important;
        }
        & .login-input {
            background: rgba(255, 255, 255, 0.12) !important;
            border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
            color: #ffffff !important;

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

            &:focus {
                background: rgba(255, 255, 255, 0.2) !important;
                border-color: rgba(255, 255, 255, 0.6) !important;
                box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
            }
        }
        & .login-error {
            background: rgba(239, 83, 80, 0.22) !important;
            border: 1px solid rgba(239, 83, 80, 0.5) !important;
            color: #ffebee !important;
        }
        & .login-btn {
            background: linear-gradient(135deg, #2196f3, #1565c0) !important;
            color: #ffffff !important;
            box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4) !important;

            &:hover:not(:disabled) {
                background: linear-gradient(135deg, #1976d2, #0d47a1) !important;
                box-shadow: 0 8px 28px rgba(33, 150, 243, 0.5) !important;
            }

            &:active:not(:disabled) {
                box-shadow: 0 4px 14px rgba(33, 150, 243, 0.35) !important;
            }
        }
        & .login-btn-loading {
            background: linear-gradient(135deg, #546e7a, #37474f) !important;
        }
        & .login-footer {
            color: rgba(255, 255, 255, 0.5) !important;
        }

        /* Food View Page - Light Theme Overrides */
        & .food {
            background-color: #f0f4f8 !important;
            color: #1e293b !important;
        }
        & .food .form-minimized-view {
            color: #64748b !important;
        }
        & .food.form-minimized .form:hover {
            background: rgba(99, 102, 241, 0.1) !important;
            border-color: rgba(99, 102, 241, 0.3) !important;
        }
        & .food .home {
            background: linear-gradient(135deg, #1a3c5e 0%, #21627b 100%) !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
            color: #ffffff !important;
            box-shadow: 0 4px 12px rgba(26, 60, 94, 0.2) !important;

            &:hover {
                background: linear-gradient(135deg, #2e86ab 0%, #1a3c5e 100%) !important;
                border-color: #2e86ab !important;
                box-shadow: 0 8px 20px rgba(46, 134, 171, 0.4) !important;
            }
        }
        & .food .header-bar {
            background: rgba(255, 255, 255, 0.8) !important;
            border-color: #d0e4f0 !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
        }
        & .food .categories li a {
            background: #ffffff !important;
            border-color: #d0e4f0 !important;
            color: #475569 !important;

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

            & li a {
                color: #64748b !important;

                &:hover {
                    background: rgba(99, 102, 241, 0.1) !important;
                    color: #4f46e5 !important;
                }
            }
        }
        & .food .search-box {
            background: #ffffff !important;
            border-color: #cbd5e1 !important;

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

            & input {
                color: #1e293b !important;
            }

            & .search-icon, & .btn-clear-search {
                color: #64748b !important;
            }
        }
        & .food .form {
            background: #ffffff !important;
            border-color: #d0e4f0 !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
        }
        & .food .form-header {
            border-bottom-color: #e2e8f0 !important;
        }
        & .food .head-title {
            color: #1e293b !important;
        }
        & .food .btn-reset {
            background: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
            color: #64748b !important;

            &:hover {
                background: #fee2e2 !important;
                color: #ef4444 !important;
                border-color: #fca5a5 !important;
            }
        }
        & .food .img-section {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;

            &:hover {
                border-color: #6366f1 !important;
            }
        }
        & .food .img-preview-box {
            background: #ffffff !important;
            border-color: #d0e4f0 !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        }
        & .food .img-info p {
            color: #64748b !important;
        }
        & .food .btn-upload {
            background: rgba(99, 102, 241, 0.1) !important;
            border-color: rgba(99, 102, 241, 0.3) !important;
            color: #4f46e5 !important;

            &:hover {
                background: #6366f1 !important;
                color: #ffffff !important;
            }
        }
        & .food .cat-section-label {
            color: #334155 !important;
        }
        & .food .field-group label {
            color: #475569 !important;
        }
        & .food .field-group input[type="text"],
        & .food .field-group select {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            color: #1e293b !important;

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

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

            &:hover {
                background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
                box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35) !important;
            }
        }
        & .food .items {
            background: #ffffff !important;
            border-color: #d0e4f0 !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
        }
        & .food .item-card {
            background: #f8fafc !important;
            border-color: #e2e8f0 !important;

            &:hover {
                border-color: #6366f1 !important;
                box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1) !important;
            }
        }
        & .food .item-img-wrap {
            background: #e2e8f0 !important;
        }
        & .food .item-title {
            color: #1e293b !important;
        }
        & .food .item-title-en {
            color: #64748b !important;
        }
        & .food .item-actions {
            border-top-color: #e2e8f0 !important;
        }
        & .food .btn-item-edit {
            background: rgba(99, 102, 241, 0.1) !important;
            border-color: rgba(99, 102, 241, 0.25) !important;
            color: #4f46e5 !important;

            &:hover {
                background: #6366f1 !important;
                color: #ffffff !important;
            }
        }
        & .food .btn-item-delete {
            background: rgba(239, 68, 68, 0.1) !important;
            border-color: rgba(239, 68, 68, 0.25) !important;
            color: #ef4444 !important;

            &:hover {
                background: #ef4444 !important;
                color: #ffffff !important;
            }
        }
        & .food .empty-items {
            color: #94a3b8 !important;
        }

        /* E-Learning View Page - Light Theme Overrides */
        & .e_book {
            background: #f8fafc !important;
            color: #1e293b !important;
        }
        & .e_book > .subject_title {
            background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important;
            border-right-color: #d0e4f0 !important;
            border-bottom-color: rgba(0, 0, 0, 0.08) !important;
        }
        & .e_book > .subject_title .eb-subject-name {
            color: #ffffff !important;
        }
        & .e_book > .subject_title .eb-subject-placeholder {
            color: rgba(255, 255, 255, 0.75) !important;
        }
        & .e_book > .subject {
            background: #ffffff !important;
            border-bottom-color: #d0e4f0 !important;
        }
        & .e_book > .subject ul.menu_top li a {
            color: #64748b !important;

            &:hover, &.active {
                background: rgba(79, 70, 229, 0.1) !important;
                border-color: rgba(79, 70, 229, 0.25) !important;
                color: #4f46e5 !important;
            }
        }
        & .e_book > .subject ul.menu_top li ul {
            background: #ffffff !important;
            border: 1px solid #d0e4f0 !important;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12) !important;

            & li a {
                color: #64748b !important;

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

            &::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
        }
        & .e_book > .lesson .eb-lesson-group {
            background: #ffffff !important;
            border-color: #e2e8f0 !important;
        }
        & .e_book > .lesson .eb-lesson-header {
            color: #334155 !important;
            background: #f8fafc !important;

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

            &:hover {
                color: #4f46e5 !important;
                background: rgba(99, 102, 241, 0.1) !important;
                & .eb-lh-arrow { color: #4f46e5 !important; }
            }
        }
        & .e_book > .lesson .eb-tutorial-item {
            color: #64748b !important;
            border-bottom-color: #f1f5f9 !important;

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

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

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

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

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

            &::-webkit-scrollbar-track { background: #ffffff !important; }
            &::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
        }
        & .e_book > .tutorial .eb-tutorial-empty {
            color: #94a3b8 !important;

            & .eb-empty-text { color: #475569 !important; }
            & .eb-empty-sub { color: #94a3b8 !important; }
        }
        & .e_book > .tutorial .eb-tutorial-content .eb-tutorial-badge {
            background: rgba(79, 70, 229, 0.1) !important;
            border-color: rgba(79, 70, 229, 0.25) !important;
            color: #4f46e5 !important;
        }
        & .e_book > .tutorial .eb-tutorial-content h1.eb-tutorial-title {
            color: #0f172a !important;
            border-bottom-color: #e2e8f0 !important;
        }
        & .e_book > .tutorial .eb-tutorial-content .eb-tutorial-body {
            color: #334155 !important;

            & h1, & h2, & h3, & h4 { color: #0f172a !important; }
            & h2 { border-bottom-color: #e2e8f0 !important; }
            & a { color: #4f46e5 !important; border-bottom-color: rgba(79, 70, 229, 0.4) !important; }
            & a:hover { color: #3730a3 !important; }
            & code {
                background: #f1f5f9 !important;
                border-color: #cbd5e1 !important;
                color: #4338ca !important;
            }
            & pre {
                background: #0f172a !important;
                border-color: #1e293b !important;
                & code { color: #e2e8f0 !important; }
            }
            & img { border-color: #e2e8f0 !important; }
            & blockquote {
                border-left-color: #4f46e5 !important;
                background: rgba(79, 70, 229, 0.05) !important;
                color: #475569 !important;
            }
            & table {
                & th {
                    background: #f1f5f9 !important;
                    border-color: #cbd5e1 !important;
                    color: #1e293b !important;
                }
                & td {
                    border-color: #e2e8f0 !important;
                    color: #475569 !important;
                }
                & tr:nth-child(even) td { background: #f8fafc !important; }
            }
        }
    }

    & .card{
        --bg-body: #f1f5f9;
        --bg-card: #ffffff;
        --text-color: #0f172a;

        /* ស្រមោល Light Mode: ប្រើពណ៌ខ្មៅស្រាលៗ ដើម្បីមើលទៅទន់ភ្នែក */
        --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 
                     0 8px 10px -6px rgba(0, 0, 0, 0.05);
    }
}