@import "icon.css";

@font-face {
    font-family: 'KhmerOSbattambang';
    src: url('../fonts/KhmerOSbattambang/hinted-KhmerOSbattambang.eot');
    src: url('../fonts/KhmerOSbattambang/hinted-KhmerOSbattambang.eot?#iefix') format('embedded-opentype'),
        url('../fonts/KhmerOSbattambang/hinted-KhmerOSbattambang.woff2') format('woff2'),
        url('../fonts/KhmerOSbattambang/hinted-KhmerOSbattambang.woff') format('woff'),
        url('../fonts/KhmerOSbattambang/hinted-KhmerOSbattambang.ttf') format('truetype'),
        url('../fonts/KhmerOSbattambang/hinted-KhmerOSbattambang.svg#KhmerOSbattambang') format('svg');
}


html,
body,
body>#body,
body#app_body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

[submit],
[click],
[dblclick],
[change] {
    cursor: pointer;
}





.full_screen {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2000 !important;
    overflow-y: auto !important;
}

.text_overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.dts {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

.hidden {
    display: none !important;
}

.pre,
.sub_pre>* {
    white-space: pre;
    white-space: pre-wrap;
}

.layout {
    width: 100%;
    min-height: 100%;
    display: grid;

    &>* {
        border: 1px solid #ccc;
    }

    &>div>div {
        display: contents;
    }

    &>.banner {
        grid-area: banner;
    }

    &>.menu_top {
        grid-area: menu_top;
    }

    &>.nav_left {
        grid-area: nav_left;
    }

    &>.content {
        grid-area: content;
    }

    &>.nav_right {
        grid-area: nav_right;
    }

    &>.menu_footer {
        grid-area: menu_footer;
    }

    &>.footer {
        grid-area: footer;
    }
}

/*------------ pagging ------------*/

.pagging {
    width: 450px;
    height: 50px;
    display: grid;
    grid-template: 1fr / repeat(9, 1fr);
    gap: 3px;
    padding: 3px;

    & * {}

    & .first,
    & .prevent,
    & .next,
    & .last {
        grid-column-end: span 1;
    }

    & .first,
    & .prevent,
    & .next,
    & .last,
    & .list * {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    & .first {
        border-radius: 5px 0 0 5px;
    }

    & .prevent {}

    & .next {}

    & .last {
        border-radius: 0 5px 5px 0;
    }

    & .list {
        display: grid;
        grid-column-end: span 5;
        grid-template: 1fr / repeat(5, 1fr);
        gap: 5px;
        padding: 5px;

        & * {
            grid-row-end: span 1;
            grid-column-end: span 1;
        }
    }

    &.bg_1 {

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

        & .list {
            background: #d8e1e7;
            border: #ccc solid 1px;

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

/*------------ menu ------------*/
ul {

    &.menu_top,
    &.menu_left,
    &.menu_right,
    &.menu_footer {
        position: relative;
        display: block;
        list-style: none;
        clear: both;
        padding: 0;
        margin: 0;

        & ul {
            z-index: 5;
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            display: grid;
        }

        & li:not(:hover)>ul {
            display: none;
        }

        & li {
            position: relative;

            & a {
                border: 1px solid #61c419;
                background: #fff;
                white-space: pre;
                text-wrap-mode: nowrap;
                text-decoration: none;
                box-sizing: border-box;
                display: block;
                height: 33px;
                align-content: center;
            }


        }
    }

    &.menu_top {
        & ul {
            left: 0%;
            top: 100%;

            & ul {
                left: 100%;
                top: 0%;
            }
        }

        & li {
            float: left;
            margin: 0 0;
        }
    }

    &.menu_left {
        & ul {
            left: 100%;
            top: 0%;
        }
    }

    &.menu_right {
        & ul {
            right: 100%;
            top: 0%;
        }
    }

    &.menu_footer {
        & ul {
            left: 0%;
            bottom: 100%;

            & ul {
                left: 100%;
                bottom: 0%;
            }
        }

        & li {
            float: left;
            margin: 0 0;
        }
    }
}

/*-------------------------- style -------------------------------*/
.icon_1,
.icon_2 {

    &.menu_top,
    &.menu_left,
    &.menu_footer {
        & li:has(> ul)>a {
            &:after {}

            & {}
        }

    }

    &.menu_right {
        & li:has(> ul)>a {
            &:after {}

            & {
                padding-left: 5px;
            }
        }
    }
}

.icon_1,
.icon_2 {

    &.menu_top,
    &.menu_left,
    &.menu_right,
    &.menu_footer {
        & li:has(> ul)>a:after {}
    }
}

.icon_1 {
    &.menu_top {
        & li:has(> ul)>a:after {
            content: ' ⮛';
        }

        & li li:has(> ul)>a:after {
            content: ' ⮚';
        }
    }

    &.menu_left {
        & li:has(> ul)>a:after {
            content: ' ⮚';
            position: absolute;
            right: 9px;
            place-self: center;
        }
    }

    &.menu_right {
        & li:has(> ul)>a:before {
            content: ' ⮘';
        }
    }

    &.menu_footer {
        & li:has(> ul)>a:after {
            content: ' ⮙';
        }

        & li li:has(> ul)>a:after {
            content: ' ⮚';
        }
    }
}

.icon_2 {

    &.menu_top,
    &.menu_left,
    &.menu_right,
    &.menu_footer {
        & li:has(> ul)>a:after {
            line-height: 0;
        }
    }

    &.menu_top {
        & li:has(> ul)>a:after {
            content: ' ⮟';
        }

        & li li:has(> ul)>a:after {
            content: ' ⮞';
        }
    }

    &.menu_left {
        & li:has(> ul)>a:after {
            content: ' ⮞';
        }
    }

    &.menu_right {
        & li:has(> ul)>a:before {
            content: ' ⮜';
        }
    }

    &.menu_footer {
        & li:has(> ul)>a:after {
            content: ' ⮝';
        }

        & li li:has(> ul)>a:after {
            content: ' ⮞';
        }
    }
}

.menu_top,
.menu_left,
.menu_right,
.menu_footer {
    &.bg_1 a {
        background: #21627b;
        margin: 1px 2px;
        border-radius: 8px;
        min-width: 100px;
        text-align: center;
        color: #fff;
        border: 1px solid #61c419;

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

    &.bg_2 a {
        background: #ffffff;
        margin: 1px 2px;
        border-radius: 8px;
        min-width: 100px;
        text-align: center;
        border: 1px solid #61c419;

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

    /* & *{ border:1px solid; }*/
}

/*------------ button  ------------*/
.sub_bt_1>*,
.bt_1 {
    font-weight: bolder;
    border: 1px solid #000;
    background: linear-gradient(to bottom, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%);

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

.sub_bt_2>*,
.bt_2 {
    font-weight: bolder;
    color: #fff;
    border: 1px solid #000;
    background: linear-gradient(to bottom, #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%);

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

.sub_bt_3>*,
.bt_3 {
    font-weight: bolder;
    color: #fff;
    border: 1px solid #ccc;
    background: linear-gradient(to bottom, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%);

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

.sub_bt_4>*,
.bt_4 {
    font-weight: bolder;
    color: #000;
    border: 1px solid #ccc;
    background: linear-gradient(to bottom, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);

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

.sub_bt_5>*,
.bt_5 {
    font-weight: bolder;
    color: #fff;
    border: 1px solid #ccc;
    background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);

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

/*------------ sub button  ------------*/
.sub_button {
    &>* {
        border: 1px solid #999;
        background: #ccc;
    }

    &>.b_1 {
        background: #ff0000;
        color: #fff;
        font-weight: bolder;
    }

    &>.b_2 {
        background: #8eb92a;
        color: #fff;
        font-weight: bolder;
    }

    &>.b_3 {
        background: #89c3eb;
    }

    &>.b_4 {
        background: #61c419;
        color: #fff;
        font-weight: bolder;
    }
}

.sub_button_1 {
    &>* {
        border: 1px solid #999;
        background: linear-gradient(to bottom, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
    }

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

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

    &>.b_3 {
        background: linear-gradient(to bottom, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%);
        color: #000;
        font-weight: bolder;
    }

    &>.b_4 {
        background: linear-gradient(to bottom, #b4e391 0%, #61c419 50%, #b4e391 100%);
        color: #fff;
        font-weight: bolder;
    }
}



.sub_overflow_x_auto>*,
.overflow_x_auto {
    overflow-x: auto;
}

.sub_overflow_y_auto>*,
.overflow_y_auto {
    overflow-y: auto;
}

.sub_overflow_auto>*,
.overflow_auto {
    overflow: auto;
}

.sub_overflow_x_scroll>*,
.overflow_x_scroll {
    overflow-x: scroll;
}

.sub_overflow_y_scroll>*,
.overflow_y_scroll {
    overflow-y: scroll;
}

.sub_overflow_scroll>*,
.overflow_scroll {
    overflow: scroll;
}

.sub_overflow_x_hidden>*,
.overflow_x_hidden {
    overflow-x: hidden;
}

.sub_overflow_y_hidden>*,
.overflow_y_hidden {
    overflow-y: hidden;
}

.sub_overflow_hidden>*,
.overflow_hidden {
    overflow: hidden;
}

/*------------ border ------------*/
.sub_border>*,
.border,
.all_border,
.all_border * {
    border: 1px solid #ccc;
}

/*------------ form ------------*/

.bg_form {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 30px);
    overflow: auto;
    backdrop-filter: blur(6px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;

    /* ── f_style_1 children ── */
    &>.f_style_1 {
        position: relative;
        max-width: 98vw;
        max-height: 96%;
        overflow: auto;
        /* reset tag_center_x offset — flex centering handles alignment */
        left: auto !important;
        transform: none !important;
    }

    &>.form_1 {
        display: grid;
        grid-template: 50px 1fr 50px / 1fr;
        grid-template-areas: 'head' 'body' 'footer';
        border: 5px solid #ccc;
        border-radius: 5px;
        background: #fff;

        &>.head {
            grid-area: head;
            border: 1px solid #ccc;
            background: #ccc;
        }

        &>.body {
            grid-area: body;
        }

        &>.footer {
            grid-area: footer;
            display: grid;
            grid-template: 1fr / 1fr 1fr 1fr;

            &>div {
                grid-row-end: span 1;
            }
        }
    }
}

/*------------ popup ------------*/

.popup {
    position: relative;

    &>label {
        width: 100%;
        height: 100%;
    }

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

    &>.form_popup {
        position: absolute;
        display: none;
        z-index: 1;
        background: #fff;
        color: #000;
    }

    &.selected>.form_popup {
        display: block;
    }
}

/*------------ list background ------------*/
.lbg_1 {
    background: #000;
    color: #fff;

    &>* {
        padding: 10px;
        background: #ffffff52;
    }

    &>*:nth-child(odd) {
        background: #00ffff52;
    }

    &>*.selected {
        background: #ff000052;
    }

    &>*:hover {
        background: #00ff0052;
    }
}

.lbg_2 {
    background: #fff;
    color: #000;

    &>* {
        padding: 10px;
        background: #ffffff52;
    }

    &>*:nth-child(odd) {
        background: #00ffff52;
    }

    &>*.selected {
        background: #ff000052;
    }

    &>*:hover {
        background: #00ff0052;
    }
}

/*------------ table background ------------*/


table.report {
    width: 100%;
    border-collapse: collapse;

    &.collapse {
        border-collapse: collapse;
    }

    &>thead {
        &>tr {
            &>th {
                text-align: center;
                vertical-align: middle;

                &.left {
                    text-align: left;
                }

                &.center {
                    text-align: center;
                }

                &.right {
                    text-align: right;
                }

                &.top {
                    vertical-align: top;
                }

                &.middle {
                    vertical-align: middle;
                }

                &.bottom {
                    vertical-align: bottom;
                }
            }
        }
    }

    &>tbody {
        &>tr {
            &>td {
                text-align: center;

                &.left {
                    text-align: left;
                }

                &.right {
                    text-align: right;
                }

                &.top {
                    vertical-align: top;
                }

                &.middle {
                    vertical-align: middle;
                }

                &.bottom {
                    vertical-align: bottom;
                }
            }
        }

    }

    &>tfoot {
        &>tr {
            &>td {
                text-align: center;

                &.left {
                    text-align: left;
                }

                &.right {
                    text-align: right;
                }

                &.top {
                    vertical-align: top;
                }

                &.middle {
                    vertical-align: middle;
                }

                &.bottom {
                    vertical-align: bottom;
                }
            }
        }
    }
}

.sub_fit_size>*,
.fit_size {
    contain: size;
}

.grid {
    display: grid;
    box-sizing: border-box;
    align-content: start;
}

.full {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/*------------ language (2 Languages: Khmer & English) ------------*/
/* English */
[leng="eng"] [eng]::before, [leng="en"] [eng]::before {
    content: attr(eng);
}
[leng="eng"] [en]::before, [leng="en"] [en]::before {
    content: attr(en);
}
[leng="eng"], [leng="en"] {
    & [eng]::before {
        content: attr(eng);
    }
    & [en]::before {
        content: attr(en);
    }
}

/* Khmer */
[leng="kh"] [kh]::before, [leng="khmer"] [kh]::before {
    content: attr(kh);
}
[leng="kh"] [khmer]::before, [leng="khmer"] [khmer]::before {
    content: attr(khmer);
}
[leng="kh"], [leng="khmer"] {
    & [kh]::before {
        content: attr(kh);
    }
    & [khmer]::before {
        content: attr(khmer);
    }
}

/* ====================================================================
   ២. CURRENCY FORMATTING (ការបង្ហាញនិមិត្តសញ្ញារូបិយវត្ថុ)
   --------------------------------------------------------------------
   Note: បង្ហាញនិមិត្តសញ្ញារូបិយវត្ថុ (៛, $, €, ¥, ฿, ₫) ស្វ័យប្រវត្តិតាម Class ឬ Attribute
   Examples:
   1. រៀល:   <span class="riel">10000</span>           => 10000៛
   2. ដុល្លារ: <span class="dollar">50</span>            => $50
   3. អឺរ៉ូ:   <span class="euro">100</span>              => 100€
   4. យ័ន:    <span class="yuan">200</span>              => 200¥
   5. បាត:    <span class="baht">500</span>              => 500฿
   6. ដុង:    <span class="dong">1000</span>            => 1000₫
   7. តាម Attribute: <div currency="riel"><span class="money">5000</span></div>
==================================================================== */
.dong,
[currency="dong"] .money,
.baht,
[currency="baht"] .money,
.yuan,
[currency="yuan"] .money,
.euro,
[currency="euro"] .money,
.riel,
[currency="riel"] .money,
.dollar,
[currency="dollar"] .money {
    text-align: center;
}

/* និមិត្តសញ្ញារៀល (៛) បង្ហាញនៅខាងស្តាំ */
.riel::after,
[currency="riel"] .money::after {
    content: '៛';
}

/* និមិត្តសញ្ញាដុល្លារ ($) បង្ហាញនៅខាងឆ្វេង */
.dollar::before,
[currency="dollar"] .money::before {
    content: '$';
}

/* និមិត្តសញ្ញាអឺរ៉ូ (€) បង្ហាញនៅខាងស្តាំ */
.euro::after,
[currency="euro"] .money::after {
    content: '€';
}

/* និមិត្តសញ្ញាយ័ន (¥) បង្ហាញនៅខាងស្តាំ */
.yuan::after,
[currency="yuan"] .money::after {
    content: '¥';
}

/* និមិត្តសញ្ញាបាត (฿) បង្ហាញនៅខាងស្តាំ */
.baht::after,
[currency="baht"] .money::after {
    content: '฿';
}

/* និមិត្តសញ្ញាដុង (₫) បង្ហាញនៅខាងស្តាំ */
.dong::after,
[currency="dong"] .money::after {
    content: '₫';
}

/* ====================================================================
   ៣. DYNAMIC TEXT ATTRIBUTES (ការបន្ថែមអត្ថបទខាងមុខ ឬ ខាងក្រោយ)
   --------------------------------------------------------------------
   Note: ប្រើប្រាស់ HTML attributes ដើម្បូបញ្ជូលអត្ថបទបន្ថែមដោយមិនបាច់សរសេរ HTML ផ្ទាល់
   Examples:
   1. <span text_before="ចំនួន: ">10</span>  => ចំនួន: 10
   2. <span text_after=" គីឡូ">5</span>     => 5 គីឡូ
   3. <span text_left="ចាស់: ">20</span>    => ចាស់: 20
   4. <span text_right=" ដុល្លារ">50</span> => 50 ដុល្លារ
==================================================================== */
[text_right]::after {
    content: attr(text_right);
}

[text_left]::after {
    content: attr(text_left);
}

[text_before]::before {
    content: attr(text_before);
}

[text_after]::after {
    content: attr(text_after);
}

/* Position សម្រាប់និមិត្តសញ្ញា ឬ អត្ថបទខាងឆ្វេង */
.dollar,
[currency="dollar"] .money,
[text_left] {
    position: relative;

    &::before {
        position: absolute;
        left: 3px;
    }
}

/* Position សម្រាប់និមិត្តសញ្ញា ឬ អត្ថបទខាងស្តាំ */
.dong,
[currency="dong"] .money,
.baht,
[currency="baht"] .money,
.yuan,
[currency="yuan"] .money,
.euro,
[currency="euro"] .money,
.riel,
[currency="riel"] .money,
[text_right] {
    position: relative;

    &::after {
        position: absolute;
        right: 3px;
    }
}




.text_1,
.sub_text_1>* {
    color: #000;

    &:hover {
        color: #ff0000;
    }
}

.text_overflow,
.sub_text_overflow>* {

    &,
    &::after,
    &::before {
        white-space: nowrap;
        /* កុំអោយបំបែកបន្ទាត់ */
        overflow: hidden;
        /* កាត់អក្សរ */
        text-overflow: ellipsis;
        /* បង្ហាញជា … */
    }
}

.img_max_screen {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.img_max_tag {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

#alert {
    backdrop-filter: blur(3px);
    background: #0000006e;
    border: solid 2px #fff;
    color: #00ffff;
    z-index: 10000;
    max-width: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    padding: 14px 20px;
    position: fixed;
    top: 0;
    font-size: 30px;
    font-weight: bolder;
}

@media (min-width: 1024px) {}

@media (max-width: 1023px) {}

@media (max-width: 1023px) and (min-width: 481px) {}

@media (max-width: 480px) and (min-width: 320px) {}

@media (max-width: 480px) and (min-width: 320px) {}

@media (max-width: 319px) {}

/*------------ Note ------------*/
.note {
    color: #f00;
    width: 1000px;
    margin: auto;
    padding: 10px;
    font-size: 14px;
}

select,
input {
    box-sizing: border-box;
}

/*------------ Tab ------------*/
.horizontal_tab {
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;

    &>.head {
        display: flex;
        border-bottom: 2px solid #ddd;
        background: #f9f9f9;

        &>div {
            padding: 12px 20px;
            cursor: pointer;
            transition: 0.3s;
            border-right: 1px solid #eee;
        }

        &>div:hover {
            background: #e6f0ff;
        }

        &>.selected {
            background: #2196f3;
            color: #fff;
            font-weight: bold;
        }
    }

    &>.body {
        padding: 15px;
        background: #fff;
        flex: 1;
        border: 1px solid #ddd;
        border-top: none;
        contain: size;

        &>* {
            width: 100%;
            height: 100%;
            animation: fade 0.3s;
            overflow: auto;
            box-sizing: border-box;
        }

        &>*:not(.selected) {
            display: none;
        }
    }
}

.vertical_tab {
    display: flex;
    width: 100%;
    height: 100%;
    border: #ccc solid 5px;
    border-radius: 6px;
    font-family: Arial, sans-serif;

    &>.head {
        width: 200px;
        background: #f5f5f5;
        border-right: 2px solid #ddd;
        overflow-y: auto;
        overflow-x: hidden;
        contain: size;

        &>input {
            height: 51px;
            width: 100%;
            background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
            border: #ccc;

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

        &>div {
            padding: 5px;
            cursor: pointer;
            border-bottom: 3px solid #eee;
            transition: 0.3s;
            height: 30px;

            &>input {
                width: calc(100% - 30px);
                float: left;
                height: 100%;
            }

            &>.close {
                width: 30px;
                float: right;
                text-align: center;
                align-content: center;
                color: #f00;
                height: 100%;
            }
        }

        &>div:hover {
            background: #e6f0ff;
        }

        &>.selected {
            background: #e3f2fd;
            color: #2196f3;
            border-left: 4px solid #2196f3;
        }
    }

    &>.body {
        flex: 1;
        padding: 0;
        background: #fff;
        width: 100%;
        height: 100%;
        contain: size;

        &>* {
            animation: fade 0.3s;
            width: 100%;
            height: 100%;
            padding: 5px;
            box-sizing: border-box;
            overflow: auto;
        }

        &>*:not(.selected) {
            display: none;
        }
    }
}

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*------------ list record  ------------*/
.list_record_big {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr 38px / 100%;
    border: 4px solid #ccc;
    box-sizing: border-box;
    border-radius: 5px;

    &>.body {
        box-sizing: border-box;
        overflow-y: auto;
        contain: size;

        &>div {
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            margin: 5px;
        }
    }

    &>.footer {
        padding: 4px;
        box-sizing: border-box;
        border-top: #ccc 2px solid;

        &>input {
            float: right;
            height: 30px;
            width: 139px;
            margin-right: 1px;
        }
    }
}

.list_record_small {
    display: grid;
    grid-template: 30px 1fr 40px / 100%;
    border: 2px solid #ccc;

    &>.head {
        background: #ccc;
        height: 35px;
        font-size: 23px;
        font-weight: bolder;
    }

    &>.body {
        border-bottom: 1px solid #ccc;
        contain: size;
        overflow-y: auto;

        &>div {
            width: 100%;
        }
    }

    &>.footer {}

}

/*------------ drop_zone ------------*/
.drop_zone {
    border: 2px dashed #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: 0.3s;

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

.preview {
    margin-top: 10px;

    & img {
        margin: 5px;
        border-radius: 5px;
    }
}


/*------------ text popup ------------*/
.text_popup {
    &>div {
        position: relative;
        right: 0;
        top: 0;
        width: max-content;
        height: max-content;

        &>* {}

        &>label {
            position: relative;
            top: 0;
            right: 0;
        }

        &>div {
            position: absolute;
            z-index: 1000;
            top: 100%;
            right: 0;
            background: #fff;
            padding: 10px;
            border: 3px solid #ccc;
        }

        &:not(:hover)>div {
            display: none;
        }
    }

}


.close {
    color: #f00;
}

[ng-click] {
    cursor: pointer;
}


.f_style_1 {
    font-family: 'Segoe UI', 'KhmerOSbattambang', Arial, sans-serif;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 860px;
    max-width: 98vw;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    border: none;
    position: relative;

    & .head {
        background: linear-gradient(135deg, #1a3c5e 0%, #21627b 60%, #2e86ab 100%);
        padding: 5px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: #fff;

        & head-icon {
            width: 38px;
            height: 38px;
            background: rgba(255, 255, 255, .15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        & .head-title {
            font-size: 20px;
            font-weight: 700;
            letter-spacing: .5px;
        }

        & .head-sub {
            font-size: 12px;
            opacity: .75;
            margin-top: 2px;
        }

        & .btn-close-form {
            margin-left: auto;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, .15);
            border: none;
            border-radius: 50%;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .2s;
            line-height: 1;
        }

        & .head-icon:hover {
            background: rgba(255, 80, 80, .55);
        }
    }

    & .body {
        padding: 10px;
        overflow-y: auto;
        align-content: start;
    }

    & .img-section {
        display: flex;
        gap: 18px;
        align-items: center;
        padding: 12px 14px;
        background: #f5f8fc;
        border-radius: 10px;
        border: 1.5px dashed #b0c8e0;
    }

    & .img-preview-box {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: #e0ecf6;
        border: 3px solid #90bcd8;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
        cursor: pointer;
        position: relative;
        transition: border-color .2s;
    }

    & .img-preview-box:hover {
        border-color: #2196f3;
    }

    & .img-preview-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    & .img-preview-box .img-placeholder {
        font-size: 38px;
        color: #90bcd8;
        pointer-events: none;
    }

    & .img-info {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    & .img-info p {
        margin: 0;
        font-size: 12.5px;
        color: #7a8fa6;
        line-height: 1.5;
    }

    & .img-info .btn-upload {
        padding: 6px 16px;
        background: linear-gradient(135deg, #21627b, #2e86ab);
        color: #fff;
        border: none;
        border-radius: 20px;
        font-size: 13px;
        cursor: pointer;
        transition: opacity .2s;
        width: fit-content;
    }

    & .img-info .btn-upload:hover {
        opacity: .85;
    }

    & .field-group {
        display: flex;
        flex-direction: column;
        gap: 5px;

        &.full-width {
            grid-column: 1 / -1;
        }

        & label {
            font-size: 12.5px;
            font-weight: 600;
            color: #3a5068;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        & label .req {
            color: #e53935;
            font-size: 14px;
        }

        & label .ico {
            font-size: 14px;
            opacity: .6;
        }

        & input[type="text"],
        & input[type="password"],
        & input[type="email"],
        & input[type="tel"],
        & input[type="number"],
        & input[type="date"],
        & select {
            height: 38px;
            padding: 0 12px;
            border: 1.5px solid #c8daea;
            border-radius: 8px;
            font-size: 13.5px;
            font-family: inherit;
            color: #1a3c5e;
            background: #f9fbfd;
            transition: border-color .2s, box-shadow .2s;
            outline: none;
            width: 100%;
            box-sizing: border-box;
        }

        & input:focus,
        & select:focus {
            border-color: #2196f3;
            box-shadow: 0 0 0 3px rgba(33, 150, 243, .12);
            background: #fff;
        }

        & select {
            cursor: pointer;
        }

    }

    & .status-row {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    & .status-opt {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 6px 14px;
        border: 1.5px solid #c8daea;
        border-radius: 20px;
        cursor: pointer;
        font-size: 13px;
        transition: all .2s;
        background: #f9fbfd;

        &.active-enable {
            background: #e8f5e9;
            border-color: #66bb6a;
            color: #2e7d32;
            font-weight: 600;
        }

        &.active-disable {
            background: #fce4ec;
            border-color: #ef9a9a;
            color: #c62828;
            font-weight: 600;
        }
    }

    & .footer {
        padding: 14px 28px 18px;
        background: #f5f8fc;
        border-top: 1.5px solid #e2ecf4;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        align-items: center;
    }

    & .btn-save {
        padding: 9px 30px;
        background: linear-gradient(135deg, #21627b 0%, #2e86ab 100%);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 7px;
        transition: transform .15s, box-shadow .2s;
        box-shadow: 0 4px 14px rgba(33, 98, 123, .3);

        &:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(33, 98, 123, .35);
        }
    }

    & .btn-cancel {
        padding: 9px 22px;
        background: #e2ecf4;
        color: #5a728d;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all .2s;
        text-transform: uppercase;
        letter-spacing: .3px;

        &:hover {
            background: #c8d9e5;
            color: #425a75;
            transform: translateY(-1px);
        }
    }


}

.data_manage {
    width: 100%;
    height: calc(100vh - 30px);
    display: grid;
    grid-template: 62px 1fr 58px / 1fr;
    grid-template-areas: "top" "table" "footer";
    font-family: 'Segoe UI', 'KhmerOSbattambang', Arial, sans-serif;
    background: #f0f4f8;

    &>.dm-top {
        grid-area: top;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 16px;
        background: linear-gradient(135deg, #1a3c5e 0%, #21627b 60%, #2e86ab 100%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

        & .btn-add {
            padding: 7px 18px;
            background: rgba(255, 255, 255, 0.18);
            color: #fff;
            border: 1.5px solid rgba(255, 255, 255, 0.35);
            border-radius: 7px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: background .2s;
            white-space: nowrap;
        }

        & .btn-add:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        & .dm-search-wrap {
            flex: 1;
            display: flex;
            align-items: center;
        }

        & .btn-search {
            padding: 7px 16px;
            background: rgba(255, 255, 255, 0.18);
            color: #fff;
            border: 1.5px solid rgba(255, 255, 255, 0.35);
            border-radius: 7px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: background .2s;
            white-space: nowrap;
        }

        & .btn-search:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        & .dm-search-input {
            height: 32px;
            padding: 0 12px;
            background: rgba(255, 255, 255, 0.15);
            border: 1.5px solid rgba(255, 255, 255, 0.35);
            border-radius: 7px;
            font-size: 13px;
            color: #fff;
            outline: none;
            min-width: 0;
            flex: 1;
            font-family: inherit;
            transition: background .2s, border-color .2s;

            & option {
                color: #000;
            }

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

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

    &>.dm-table {
        grid-area: table;
        overflow: auto;
        background: #fff;

        & table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13.5px;

            & td,
            & th {
                text-align: center;
            }

            & thead tr {
                background: #1a3c5e;
                color: #fff;
                position: sticky;
                top: 0;
                z-index: 1;

                & th {
                    padding: 10px 14px;
                    font-weight: 600;
                    letter-spacing: .3px;
                    white-space: nowrap;
                }
            }

            & tbody tr {
                border-bottom: 1px solid #e8eef4;
                transition: background .15s;

                &:hover {
                    background: #f0f6fb;
                }

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

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

                & td {
                    padding: 9px 14px;
                    color: #2c3e50;
                    vertical-align: middle;

                    & img {
                        width: 38px;
                        height: 38px;
                        object-fit: cover;
                        border-radius: 50%;
                        border: 2px solid #b0cfe8;
                    }

                    &.td-actions {
                        white-space: nowrap;
                        text-align: center;
                    }

                    & .btn-edit {
                        padding: 4px 12px;
                        background: #e8f4ff;
                        color: #1a6fa8;
                        border: 1px solid #b0d8f0;
                        border-radius: 5px;
                        font-size: 12px;
                        font-weight: 600;
                        cursor: pointer;
                        transition: all .2s;
                    }

                    & .btn-edit:hover {
                        background: #2e86ab;
                        color: #fff;
                        border-color: #2e86ab;
                    }

                    & .btn-del {
                        padding: 4px 12px;
                        background: #fff0f0;
                        color: #c62828;
                        border: 1px solid #f5b8b8;
                        border-radius: 5px;
                        font-size: 12px;
                        font-weight: 600;
                        cursor: pointer;
                        transition: all .2s;
                    }

                    & .btn-del:hover {
                        background: #c62828;
                        color: #fff;
                        border-color: #c62828;
                    }
                }
            }
        }
    }

    &>.dm-footer {
        grid-area: footer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        background: #fff;
        border-top: 1.5px solid #e2ecf4;

        & .dm-size-select {
            height: 32px;
            padding: 0 10px;
            border: 1.5px solid #c8daea;
            border-radius: 7px;
            font-size: 13px;
            color: #1a3c5e;
            background: #f9fbfd;
            cursor: pointer;
            outline: none;
        }

        & .pagging {
            display: flex;
            align-items: center;
            gap: 4px;

            &>div {
                min-width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 6px;
                border: 1.5px solid #c8daea;
                font-size: 13px;
                color: #3a5068;
                cursor: pointer;
                background: #f9fbfd;
                transition: all .2s;
                padding: 0 8px;
            }

            &>div:hover {
                background: #2e86ab;
                color: #fff;
                border-color: #2e86ab;
            }

            & .list {
                display: flex;
                gap: 4px;
                border: none;
                padding: 0;
                background: none;

                &>div {
                    min-width: 30px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 6px;
                    border: 1.5px solid #c8daea;
                    font-size: 13px;
                    color: #3a5068;
                    cursor: pointer;
                    background: #f9fbfd;
                    transition: all .2s;
                    padding: 0 8px;
                }

                &>div:hover,
                &>div[selecte="selected"] {
                    background: #1a3c5e;
                    color: #fff;
                    border-color: #1a3c5e;
                }
            }
        }
    }
}

/* Toggle status — shared */
.branch-status-row {
    display: flex;
    gap: 10px;
}

.branch-status-opt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1.5px solid #c8daea;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-family: 'Segoe UI', 'KhmerOSbattambang', Arial, sans-serif;
    color: #5a728d;
    background: #f9fbfd;
    transition: all 0.2s;
    user-select: none;
    height: 38px;
    box-sizing: border-box;
}

.branch-status-opt:hover {
    background: #eaf4fb;
    border-color: #90bcd8;
}

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

/* Enable: Inactive */
.branch-status-inactive {
    background: #fce4ec !important;
    border-color: #ef9a9a !important;
    color: #c62828 !important;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(239, 154, 154, 0.15);
}

/* Default App: Yes */
.page-default-yes {
    background: #fff8e1 !important;
    border-color: #ffca28 !important;
    color: #f57f17 !important;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(255, 202, 40, 0.18);
}

/* Default App: No */
.page-default-no {
    background: #f5f5f5 !important;
    border-color: #bdbdbd !important;
    color: #616161 !important;
    font-weight: 700;
}

/* ===================== Product Save Form Structural Layouts ===================== */
.prod-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.prod-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.cat-title-section {
    border: 1.5px solid #d0e4f0;
    border-radius: 10px;
    overflow: hidden;
}

.cat-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.cat-title-group {
    padding: 14px;
}

.prod-title-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cat-lang-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-right: 2px;
}

.branch-status-row {
    display: flex;
    gap: 10px;
}

.branch-status-opt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1.5px solid;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-family: 'Segoe UI', 'KhmerOSbattambang', Arial, sans-serif;
    transition: all 0.2s;
    user-select: none;
    height: 38px;
    box-sizing: border-box;
}

.prod-prop-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 4px;
    border-bottom: 1.5px solid;
}

.prod-prop-label {
    font-size: 13px;
    font-weight: 700;
}

.prod-btn-add-prop {
    margin-left: auto;
    padding: 6px 16px;
    border: none;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: inherit;
}

.prod-prop-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prod-prop-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 0;
    font-size: 13.5px;
    border: 1.5px dashed;
    border-radius: 8px;
}

.prod-prop-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1.5px solid;
    border-radius: 10px;
    transition: box-shadow 0.15s;
    margin-bottom: 8px;
}

.prod-prop-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid;
}

.prod-prop-card-title {
    font-size: 13.5px;
    font-weight: 700;
}

.prod-prop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
    align-items: start;
}

.prod-materials-box {
    border: 1.5px solid;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prod-materials-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
}

.btn-add-mat {
    margin-left: auto;
    padding: 4px 12px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.prod-materials-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.prod-materials-list::-webkit-scrollbar {
    width: 6px;
}

.prod-mat-empty {
    font-size: 12px;
    text-align: center;
    padding: 12px;
    border: 1px dashed;
    border-radius: 6px;
}

.prod-mat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    height: 30px;
    min-height: 30px;
    border: 1.5px solid;
    border-radius: 6px;
    box-sizing: border-box;
}

.prod-mat-row .field-group {
    margin-bottom: 0 !important;
}

.prod-mat-row .field-group label {
    display: none !important;
}

.prod-mat-row .field-group input,
.prod-mat-row .field-group select {
    height: 26px;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 4px;
    box-sizing: border-box;
}

.btn-del-mat {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 1.5px solid;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.prod-prop-num {
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.prod-btn-del-prop {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-left: auto;
    border: 1.5px solid;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.prod-textarea {
    flex: 1;
    width: 100%;
    min-height: 320px;
    padding: 12px;
    border: 1.5px solid;
    border-radius: 8px;
    font-size: 13.5px;
    font-family: 'Segoe UI', 'KhmerOSbattambang', Arial, sans-serif;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    line-height: 1.7;
}

.btn-camera {
    border: none !important;
}

.cam-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cam-modal-content {
    width: 92%;
    max-width: 580px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cam-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 14px;
}

.cam-btn-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

.cam-modal-body {
    position: relative;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    max-height: 420px;
}

.cam-modal-body video {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
}

.cam-error {
    position: absolute;
    color: #ef4444;
    background: rgba(0, 0, 0, 0.85);
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}

.cam-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid;
}

.cam-btn-cancel {
    padding: 8px 18px;
    border: 1.5px solid;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.cam-btn-snap {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    transition: transform 0.1s;
}

.cam-btn-snap:active {
    transform: scale(0.96);
}

/* ===================== App Save Form Structural Layouts ===================== */
.app-top-fields {
    display: grid;
    grid-template-columns: 1fr 160px 160px;
    gap: 12px;
    align-items: end;
}

.app-pages-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.app-pages-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
}

.app-pages-icon {
    font-size: 16px;
}

.app-pages-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.app-pages-badge {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 0.2px;
}

.co-pages-table-wrap {
    overflow: auto;
    border-radius: 10px;
    border: 1.5px solid;
}

.co-pages-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    font-family: 'Segoe UI', 'KhmerOSbattambang', Arial, sans-serif;
}

.co-pages-table thead tr {
    position: sticky;
    top: 0;
    z-index: 1;
}

.co-pages-table thead th {
    padding: 10px 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-align: center;
}

.co-pages-table tbody tr {
    border-bottom: 1px solid;
    transition: background 0.15s;
}

.co-td-num {
    text-align: center;
    font-size: 12.5px;
    padding: 9px 10px;
    font-weight: 600;
}

.co-td-title {
    text-align: left;
    padding: 9px 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
}

.co-page-icon {
    font-size: 14px;
    opacity: 0.6;
    margin-right: 6px;
}

.co-td-check {
    text-align: center;
    padding: 9px 10px;
    vertical-align: middle;
}

.co-check-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.co-check-wrap input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.co-empty {
    text-align: center;
    padding: 32px 0;
    font-size: 14px;
}

.co-empty span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.menu-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

/* ===================== Subject Save Form Structural Layouts ===================== */
.subj-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

.subj-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1.5px solid;
    border-radius: 10px;
    overflow: hidden;
}

.subj-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    font-size: 13px;
    flex-shrink: 0;
}

.subj-panel-label {
    font-weight: 700;
    flex: 1;
}

.subj-lock-hint {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.subj-btn-add {
    padding: 4px 12px;
    border: 1.5px solid;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
    white-space: nowrap;
}

.subj-item-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.subj-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 10px;
    font-size: 13px;
    border: 1.5px dashed;
    border-radius: 8px;
    gap: 6px;
}

.subj-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1.5px solid;
    border-radius: 8px;
    transition: box-shadow 0.15s;
}

.subj-item-num {
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.subj-select {
    flex: 1;
    height: 34px;
    padding: 0 8px;
    border: 1.5px solid;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.subj-btn-del {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1.5px solid;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

/* ===================== Role Management Save Form Structural Layouts ===================== */
.role-top-fields {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 14px;
    align-items: end;
}

.role-perm-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.role-perm-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
}

.role-perm-icon {
    font-size: 16px;
}

.role-perm-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.role-perm-badge {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
}

.role-th-perm {
    min-width: 72px;
}

.role-th-icon {
    display: block;
    font-size: 13px;
    margin-bottom: 1px;
}

.role-td-title {
    text-align: left;
    padding: 8px 12px;
    font-weight: 500;
}

.role-td-check {
    text-align: center;
    padding: 8px 6px;
    vertical-align: middle;
}

.role-check-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.role-chk {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.role-chk-enable {
    accent-color: #2196f3;
}

.role-chk-default {
    accent-color: #ff9800;
}

.role-chk-create {
    accent-color: #4caf50;
}

.role-chk-update {
    accent-color: #9c27b0;
}

.role-chk-delete {
    accent-color: #f44336;
}

.role-chk-view {
    accent-color: #00bcd4;
}

.storage-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

/* ===================== Warehouse View Page Structural Layouts ===================== */
.wh-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: 100%;
    width: 100%;
    font-family: 'Segoe UI', 'KhmerOSbattambang', Arial, sans-serif;
    overflow: hidden;
}

.wh-left {
    display: flex;
    flex-direction: column;
    border-right: 1.5px solid;
    overflow: hidden;
}

.wh-left-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    flex-shrink: 0;
}

.wh-head-icon {
    font-size: 22px;
}

.wh-head-title {
    font-size: 15px;
    font-weight: 700;
}

.wh-head-sub {
    font-size: 11px;
    opacity: 0.75;
}

.wh-btn-add {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: 1.5px solid;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.wh-left-search {
    padding: 10px 12px;
    border-bottom: 1.5px solid;
    flex-shrink: 0;
}

.wh-search-input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1.5px solid;
    border-radius: 7px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.wh-list {
    flex: 1;
    overflow-y: auto;
}

.wh-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.wh-item-active {
    border-left: 3px solid;
}

.wh-item-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.wh-item-info {
    flex: 1;
    min-width: 0;
}

.wh-item-title {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wh-item-meta {
    margin-top: 2px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.wh-branch-badge {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 4px;
}

.wh-item-status {
    flex-shrink: 0;
}

.wh-enable-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.wh-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.wh-item:hover .wh-item-actions {
    opacity: 1;
}

.wh-btn-edit-sm,
.wh-btn-del-sm {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.wh-list-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    font-size: 13.5px;
    gap: 8px;
}

.wh-right {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wh-no-select {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.wh-no-select-icon {
    font-size: 56px;
    opacity: 0.4;
}

.wh-no-select-title {
    font-size: 18px;
    font-weight: 600;
}

.wh-no-select-sub {
    font-size: 13px;
}

.wh-storage-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wh-storage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 12px;
    flex-shrink: 0;
}

.wh-storage-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wh-storage-icon {
    font-size: 22px;
}

.wh-storage-title {
    font-size: 15px;
    font-weight: 700;
}

.wh-storage-sub {
    font-size: 11px;
    opacity: 0.75;
}

.wh-storage-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wh-storage-search {
    height: 32px;
    padding: 0 10px;
    border: 1.5px solid;
    border-radius: 7px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    min-width: 200px;
    transition: background 0.2s;
}

.wh-btn-add-storage {
    padding: 7px 14px;
    border: 1.5px solid;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    font-family: inherit;
}

.wh-storage-table-wrap {
    flex: 1;
    overflow: auto;
}

.wh-storage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    font-family: inherit;
}

.wh-storage-table thead tr {
    position: sticky;
    top: 0;
    z-index: 1;
}

.wh-storage-table thead th {
    padding: 10px 14px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.wh-storage-table tbody tr {
    border-bottom: 1px solid;
    transition: background 0.15s;
}

.wh-td-num {
    text-align: center;
    font-size: 12px;
    padding: 9px 8px;
    font-weight: 600;
}

.wh-td-product {
    text-align: left;
    padding: 9px 14px;
    font-weight: 500;
}

.wh-product-icon {
    margin-right: 6px;
    font-size: 13px;
    opacity: 0.6;
}

.wh-td-center {
    text-align: center;
    padding: 9px 10px;
    vertical-align: middle;
}

.wh-td-actions {
    text-align: center;
    padding: 9px 10px;
    white-space: nowrap;
}

.wh-qty-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
}

.wh-alert-val {
    font-size: 12.5px;
    font-weight: 600;
}

.wh-price-badge {
    font-weight: 700;
    font-size: 13px;
}

.wh-enable-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.wh-table-empty {
    text-align: center;
    padding: 40px;
    font-size: 14px;
}

.wh-storage-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1.5px solid;
    flex-shrink: 0;
}

.wh-summary {
    font-size: 12.5px;
}

.wh-summary-warn {
    font-weight: 600;
}



/* ===================== Login Page Layout & Animations ===================== */
.login-bg {
    position: fixed;
    inset: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Segoe UI', 'KhmerOSbattambang', Arial, sans-serif;
    z-index: 0;
}

.login-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.login-particles span {
    position: absolute;
    display: block;
    border-radius: 50%;
    animation: floatUp 12s infinite linear;
}

.login-particles span:nth-child(1) {
    width: 80px;
    height: 80px;
    left: 5%;
    bottom: -80px;
    animation-delay: 0s;
    animation-duration: 14s;
}

.login-particles span:nth-child(2) {
    width: 40px;
    height: 40px;
    left: 18%;
    bottom: -40px;
    animation-delay: 2s;
    animation-duration: 10s;
}

.login-particles span:nth-child(3) {
    width: 120px;
    height: 120px;
    left: 32%;
    bottom: -120px;
    animation-delay: 4s;
    animation-duration: 16s;
}

.login-particles span:nth-child(4) {
    width: 55px;
    height: 55px;
    left: 50%;
    bottom: -55px;
    animation-delay: 1s;
    animation-duration: 11s;
}

.login-particles span:nth-child(5) {
    width: 90px;
    height: 90px;
    left: 65%;
    bottom: -90px;
    animation-delay: 3s;
    animation-duration: 13s;
}

.login-particles span:nth-child(6) {
    width: 30px;
    height: 30px;
    left: 75%;
    bottom: -30px;
    animation-delay: 5s;
    animation-duration: 9s;
}

.login-particles span:nth-child(7) {
    width: 70px;
    height: 70px;
    left: 85%;
    bottom: -70px;
    animation-delay: 6s;
    animation-duration: 15s;
}

.login-particles span:nth-child(8) {
    width: 50px;
    height: 50px;
    left: 92%;
    bottom: -50px;
    animation-delay: 0.5s;
    animation-duration: 12s;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-110vh) rotate(360deg);
        opacity: 0;
    }
}

.login-card {
    position: relative;
    z-index: 10;
    width: 420px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 24px;
    padding: 40px 36px 32px;
    animation: slideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-brand {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.login-logo-icon {
    font-size: 34px;
}

.login-brand-name {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.login-brand-sub {
    font-size: 13px;
    margin-top: 4px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-field {
    position: relative;
    display: flex;
    align-items: center;
}

.login-field-icon {
    position: absolute;
    left: 14px;
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.8;
}

.login-input {
    width: 100%;
    height: 50px;
    padding: 0 44px 0 44px;
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: all 0.25s;
    box-sizing: border-box;
}

.login-eye {
    position: absolute;
    right: 12px;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s;
    z-index: 1;
}

.login-eye:hover {
    opacity: 1;
}

.login-error {
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    animation: shake 0.35s ease;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

.login-btn {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.25s;
    letter-spacing: 0.4px;
}

.login-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.login-spinner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.login-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 12px;
}

@media (max-width: 480px) {
    .login-card {
        width: calc(100% - 32px);
        padding: 32px 24px 24px;
        border-radius: 20px;
    }

    .login-logo {
        width: 64px;
        height: 64px;
        margin-bottom: 12px;
    }

    .login-logo-icon {
        font-size: 28px;
    }

    .login-brand-name {
        font-size: 18px;
    }

    .login-input {
        height: 46px;
        font-size: 13px;
    }

    .login-btn {
        height: 46px;
        font-size: 14px;
    }
}

/* ===================== Food View Page Structural Layouts ===================== */
.food {
    display: grid;
    width: 100%;
    height: calc(100vh - 40px);
    min-height: 600px;
    grid-template: 50px 1fr / 320px 1fr;
    grid-template-areas: "form categories" "form items";
    gap: 16px;
    padding: 16px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.food.form-minimized {
    grid-template-columns: 64px 1fr;
}

.food.form-minimized .home {
    padding: 0;
}

.food.form-minimized .home .home-text {
    display: none;
}

.food.form-minimized .form {
    padding: 0;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.food .form-minimized-view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 24px;
}

.food .form-full-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.food .home {
    grid-area: home;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    padding: 0 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.food .home:active {
    transform: translateY(0);
}

.food .header-bar {
    grid-area: categories;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid;
    border-radius: 12px;
    padding: 0 16px;
    backdrop-filter: blur(12px);
    z-index: 50;
}

.food .header-bar .categories {
    display: flex;
    align-items: center;
    flex-grow: 1;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.food .categories,
.food .categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.food .categories li {
    position: relative;
    list-style: none;
}

.food .categories li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.food .categories li ul {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid;
    border-radius: 12px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.food .categories li:hover>ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.food .categories li ul li a {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 10px 14px;
    width: 100%;
    box-sizing: border-box;
}

.food .search-box {
    display: flex;
    align-items: center;
    border: 1px solid;
    border-radius: 10px;
    padding: 6px 12px;
    gap: 8px;
    width: 220px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.food .search-box:focus-within {
    width: 260px;
}

.food .search-box input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    width: 100%;
}

.food .search-box .search-icon {
    font-size: 14px;
}

.food .search-box .btn-clear-search {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.food .form {
    grid-area: form;
    border: 1px solid;
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

.food .form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid;
}

.food .head-title {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.food .btn-reset {
    border: 1px solid;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.food .img-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 2px dashed;
    border-radius: 14px;
    padding: 16px;
    transition: border-color 0.3s ease;
}

.food .img-preview-box {
    width: 110px;
    height: 110px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid;
    transition: transform 0.2s ease;
}

.food .img-preview-box:hover {
    transform: scale(1.03);
}

.food .img-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.food .img-placeholder {
    font-size: 42px;
    opacity: 0.6;
}

.food .img-info {
    text-align: center;
}

.food .img-info p {
    margin: 0 0 10px 0;
    font-size: 12px;
    line-height: 1.4;
}

.food .btn-upload {
    border: 1px solid;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.food .cat-title-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.food .cat-section-label {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.food .field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.food .field-group label {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.food .req {
    color: #ef4444;
}

.food .cat-lang-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.food .cat-lang-kh {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.food .cat-lang-en {
    background: rgba(236, 72, 153, 0.2);
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.food .field-group input[type="text"],
.food .field-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    transition: all 0.25s ease;
}

.food .field-group select {
    cursor: pointer;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.food .field-group select option {
    padding: 8px;
}

.food .form-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.food .btn-save {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.food .btn-save:hover {
    transform: translateY(-2px);
}

.food .btn-delete {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.food .btn-delete:hover {
    transform: translateY(-2px);
}

.food .items {
    grid-area: items;
    border: 1px solid;
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    grid-auto-rows: max-content;
    gap: 16px;
}

.food .item-card {
    border: 1px solid;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
}

.food .item-card:hover {
    transform: translateY(-4px);
}

.food .item-img-wrap {
    width: 100%;
    height: 140px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.food .item-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.food .item-card:hover .item-img-wrap img {
    transform: scale(1.06);
}

.food .item-no-img {
    font-size: 40px;
    opacity: 0.5;
}

.food .item-content {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

.food .item-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.food .item-title-en {
    font-size: 12px;
    margin: 0;
}

.food .item-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid;
}

.food .btn-item-edit,
.food .btn-item-delete {
    flex: 1;
    border: 1px solid;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.food .empty-items {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.food .empty-items span {
    font-size: 48px;
    margin-bottom: 12px;
}

@media (max-width: 1024px) {
    .food {
        grid-template-columns: 280px 1fr;
    }

    .food.form-minimized {
        grid-template-columns: 64px 1fr;
    }
}

@media (max-width: 768px) {
    .food {
        grid-template: auto auto auto 1fr / 1fr;
        grid-template-areas:
            "home"
            "categories"
            "form"
            "items";
        height: auto;
        min-height: 100vh;
        gap: 12px;
        padding: 12px;
    }

    .food.form-minimized {
        grid-template-columns: 1fr;
    }

    .food.form-minimized .home {
        padding: 12px;
    }

    .food.form-minimized .home .home-text {
        display: inline-block;
    }

    .food.form-minimized .form {
        min-height: 60px;
        height: 60px;
        padding: 0;
    }

    .food .header-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .food .categories {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .food .categories ul {
        flex-wrap: nowrap;
    }

    .food .search-box {
        width: 100%;
        box-sizing: border-box;
    }

    .food .search-box:focus-within {
        width: 100%;
    }

    .food .form {
        overflow-y: visible;
    }

    .food .items {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        overflow-y: visible;
    }
}

/* ===================== E-Learning View Page Layouts ===================== */
.e_book {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 56px 1fr / 280px 1fr;
    grid-template-areas:
        "subject_title subject"
        "lesson tutorial";
    font-family: 'KhmerOSbattambang', 'Segoe UI', Arial, sans-serif;
    overflow: hidden;
}

.e_book>.subject_title {
    grid-area: subject_title;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 10px;
    border-right: 1px solid;
    border-bottom: 1px solid;
}

.e_book>.subject_title .eb-logo-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.e_book>.subject_title .eb-subject-name {
    font-size: 13.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.e_book>.subject_title .eb-subject-placeholder {
    font-size: 12px;
    font-style: italic;
}

.e_book>.subject {
    grid-area: subject;
    border-bottom: 1px solid;
    display: flex;
    align-items: center;
    padding: 0 20px;
    overflow: visible;
    position: relative;
    z-index: 100;
}

.e_book>.subject ul.menu_top {
    height: 100%;
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.e_book>.subject ul.menu_top li {
    float: none !important;
    position: relative;
}

.e_book>.subject ul.menu_top li a {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    height: 38px !important;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    display: flex !important;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    min-width: unset !important;
    text-wrap-mode: nowrap;
    cursor: pointer;
}

.e_book>.subject ul.menu_top li ul {
    border-radius: 8px;
    top: 100%;
    padding: 6px;
    position: absolute;
    left: 0;
    list-style: none;
}

.e_book>.subject ul.menu_top li ul ul {
    top: 0%;
    left: 100%;
}

.e_book>.subject ul.menu_top li ul li {
    margin-bottom: 2px;
}

.e_book>.subject ul.menu_top li ul li:last-child {
    margin-bottom: 0;
}

.e_book>.subject ul.menu_top li ul li a {
    border-radius: 6px !important;
    min-width: 170px !important;
    height: 34px !important;
}

.e_book>.lesson {
    grid-area: lesson;
    border-right: 1px solid;
    overflow-y: auto;
    padding: 14px 10px;
}

.e_book>.lesson::-webkit-scrollbar {
    width: 4px;
}

.e_book>.lesson .eb-lesson-group {
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid;
    overflow: hidden;
}

.e_book>.lesson .eb-lesson-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.e_book>.lesson .eb-lesson-header .eb-lh-icon {
    font-size: 14px;
}

.e_book>.lesson .eb-lesson-header .eb-lh-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.e_book>.lesson .eb-lesson-header .eb-lh-arrow {
    font-size: 9px;
    transition: transform 0.2s;
}

.e_book>.lesson .eb-tutorial-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 9px 24px;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    border-bottom: 1px solid;
}

.e_book>.lesson .eb-tutorial-item:last-child {
    border-bottom: none;
}

.e_book>.lesson .eb-tutorial-item .eb-ti-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s;
}

.e_book>.lesson .eb-tutorial-item .eb-ti-text {
    flex: 1;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.e_book>.tutorial {
    grid-area: tutorial;
    overflow-y: auto;
    padding: 0;
}

.e_book>.tutorial::-webkit-scrollbar {
    width: 6px;
}

.e_book>.tutorial .eb-tutorial-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
}

.e_book>.tutorial .eb-tutorial-empty .eb-empty-icon {
    font-size: 64px;
    opacity: 0.4;
    animation: float 3s ease-in-out infinite;
}

.e_book>.tutorial .eb-tutorial-empty .eb-empty-text {
    font-size: 15px;
    font-weight: 600;
}

.e_book>.tutorial .eb-tutorial-empty .eb-empty-sub {
    font-size: 12px;
}

.e_book>.tutorial .eb-tutorial-content {
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 48px;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    margin-bottom: 16px;
    letter-spacing: 0.04em;
    font-weight: 600;
    border: 1px solid;
}

.e_book>.tutorial .eb-tutorial-content h1.eb-tutorial-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 24px 0;
    line-height: 1.35;
    border-bottom: 1px solid;
    padding-bottom: 20px;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body {
    font-size: 14.5px;
    line-height: 1.85;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body h1,
.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body h2,
.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body h3,
.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body h4 {
    margin-top: 30px;
    margin-bottom: 12px;
    font-weight: 700;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body h2 {
    font-size: 20px;
    border-bottom: 1px solid;
    padding-bottom: 8px;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body h3 {
    font-size: 17px;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body p {
    margin: 0 0 16px 0;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body a {
    text-decoration: none;
    border-bottom: 1px dashed;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body code {
    border: 1px solid;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 13px;
    font-family: Consolas, Monaco, monospace;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body pre {
    border: 1px solid;
    border-radius: 8px;
    padding: 18px;
    overflow-x: auto;
    margin: 20px 0;
    font-family: Consolas, Monaco, monospace;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body pre code {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body img {
    max-width: 100%;
    border-radius: 8px;
    margin: 16px 0;
    border: 1px solid;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body ul,
.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body ol {
    padding-left: 22px;
    margin: 0 0 16px;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body li {
    margin-bottom: 6px;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body blockquote {
    border-left: 4px solid;
    margin: 20px 0;
    padding: 12px 20px;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body table th {
    padding: 10px 14px;
    font-size: 12px;
    text-align: left;
    border: 1px solid;
    font-weight: 600;
}

.e_book>.tutorial .eb-tutorial-content .eb-tutorial-body table td {
    padding: 10px 14px;
    border: 1px solid;
    font-size: 13.5px;
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD & CHART SYSTEM STYLES
   ════════════════════════════════════════════════════════════════════ */
.dashboard-wrapper {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    align-items: start;
}

.dashboard-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.dashboard-card.full-width-card {
    grid-column: 1 / -1;
}

.dashboard-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
}

.dashboard-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #2d3748;
}

.chart-icon {
    font-size: 18px;
}

.chart_pie,
.chart_doughnut,
.chart_bar,
.chart_line,
.chart_generic {
    width: 100%;
    height: 280px;
    position: relative;
}

/* ── Other Chart Box (Polar, Radar, Bubble, Scatter …) ── */
.chart_other_box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.chart_other_box>.dashboard-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid transparent;
    background-clip: padding-box;
    border-image: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%) 1;
}

.chart_other_box>.dashboard-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #2d3748;
}

.chart_other_box>.dashboard-card-head::before {
    content: "";
    display: block;
    width: 4px;
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    flex-shrink: 0;
}

.chart_other_box>.chart_generic {
    height: 280px;
    width: 100%;
    position: relative;
}

/* ── Menu Dashboard — Auto-Slide Marquee (infinite scroll left) ── */

/* Keyframe: slide from right to left by exactly 50%
   (because items are duplicated, 50% = one full set width) */
@keyframes menuSlideLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Outer mask — clips overflow so items appear to scroll */
.menu-items-scroll-wrap {
    width: 100%;
    overflow: hidden;
    /* ← hide overflow, no scrollbar */
    overflow-x: auto;
    padding-bottom: 4px;
    /* Fade edges with gradient mask */
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            black 6%,
            black 94%,
            transparent 100%);
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 6%,
            black 94%,
            transparent 100%);
}

/* Pause slide when user hovers anywhere on the menu strip */
.menu-items-scroll-wrap:hover .menu-items-grid {
    animation-play-state: paused;
}

/* The inner flex row — animates endlessly to the left */
.menu-items-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    padding-top: 8px;
    padding-bottom: 2px;
    width: max-content;
    /* ← natural width of all items */
    /*animation: menuSlideLeft 28s linear infinite; */
}

.menu-item-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 8px;
    background: #f7fafc;
    border: 1px solid #edf2f7;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    flex-shrink: 0;
    /* ← don't shrink */
    width: 100px;
    /* ← fixed tile width */
}

.menu-item-box:hover {
    background: #edf2f7;
    transform: scale(1.03);
}

.menu-item-box img.image_menu {
    width: 42px;
    height: 42px;
    object-fit: contain;
    margin-bottom: 6px;
}

.menu-item-box p {
    margin: 0;
    font-size: 12.5px;
    color: #4a5568;
    word-break: break-word;
}

/* ════════════════════════════════════════════════════════════
   BIG BOOKING CALENDAR — Premium Modern Redesign
   ════════════════════════════════════════════════════════════ */

/* Outer box — takes full grid row when full-width-card is applied */
.calendar_dashboard_box {
    width: 100%;
}

/* ── Calendar wrapper shell ── */
.big-calendar-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(79, 70, 229, 0.07), 0 1.5px 6px rgba(0, 0, 0, 0.05);
}

/* ── Header bar: Month title + nav buttons + legend ── */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(135deg, #f8faff 0%, #f1f5fb 100%);
    border-bottom: 1.5px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 10px;
}

.calendar-title-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-month-year {
    font-size: 16px;
    font-weight: 800;
    min-width: 155px;
    text-align: center;
    color: #312e81;
    letter-spacing: -0.3px;
}

/* Navigation buttons: ‹ › */
.btn-cal-nav {
    background: #ffffff;
    border: 1.5px solid #c7d2fe;
    color: #4f46e5;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.1);
}

.btn-cal-nav:hover {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.35);
}

/* Today button */
.btn-cal-today {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border: none;
    color: #ffffff;
    padding: 5px 14px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.3);
}

.btn-cal-today:hover {
    background: linear-gradient(135deg, #4338ca, #6d28d9);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(79, 70, 229, 0.4);
}

/* Legend row (สีStatus) */
.calendar-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11.5px;
    color: #64748b;
    font-weight: 500;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-item i {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    display: inline-block;
}

/* ── Weekday header row ── */
.calendar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f8faff;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    color: #6366f1;
    border-bottom: 1.5px solid #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calendar-grid-header>div {
    padding: 9px 4px;
}

/* Sunday highlight */
.calendar-grid-header>div:first-child {
    color: #ef4444;
}

/* ── Day cells grid ── */
.calendar-grid-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: 1px;
    background: #e8eaf6;
}

.calendar-day-cell {
    background: #ffffff;
    padding: 7px 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 100px;
    transition: background 0.15s ease;
    cursor: default;
}

.calendar-day-cell:hover {
    background: #f5f3ff;
}

/* Muted cells for prev/next month days */
.calendar-day-cell.other-month {
    background: #f9fafb;
    opacity: 0.5;
}

/* Today highlight */
.calendar-day-cell.today-cell {
    background: rgba(99, 102, 241, 0.06);
    box-shadow: inset 0 0 0 2px #6366f1;
}

.calendar-day-cell.today-cell:hover {
    background: rgba(99, 102, 241, 0.1);
}

/* ── Day number ── */
.day-cell-number {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

/* Circle badge for today's date number */
.calendar-day-cell.today-cell .day-cell-number>span:first-child {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #ffffff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4);
}

.today-badge {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #ffffff;
    font-size: 9.5px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 5px rgba(79, 70, 229, 0.35);
}

/* ── Event cards list ── */
.booking-events-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    max-height: 80px;
}

.booking-events-list::-webkit-scrollbar {
    width: 3px;
}

.booking-events-list::-webkit-scrollbar-track {
    background: transparent;
}

.booking-events-list::-webkit-scrollbar-thumb {
    background: #c7d2fe;
    border-radius: 4px;
}

/* ── Individual event badge ── */
.booking-event-card {
    font-size: 11px;
    padding: 4px 7px;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    letter-spacing: 0.1px;
    transition: opacity 0.15s ease, transform 0.15s ease;
    border-left: 3px solid rgba(255, 255, 255, 0.4);
}

.booking-event-card:hover {
    opacity: 0.88;
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Status color variants */
.status-confirmed {
    background: linear-gradient(135deg, #10b981, #059669);
}

.status-pending {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.status-checked_in {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.status-cancelled {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    opacity: 0.75;
    text-decoration: line-through;
}

/* ════════════════════════════════════════════════════════════
   TABLE DASHBOARD — Premium Style
   ════════════════════════════════════════════════════════════ */

/* Outer card takes full grid row */
.table_dashboard_box {
    width: 100%;
}

/* Wrapper built by renderTable directive */
.tbl-dash-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Search bar row ── */
.tbl-dash-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
}

.tbl-dash-search-icon {
    font-size: 14px;
    flex-shrink: 0;
    color: #94a3b8;
}

.tbl-dash-search {
    flex: 1;
    height: 34px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 13px;
    color: #334155;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tbl-dash-search:focus {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.tbl-dash-count {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
}

/* ── Scrollable table wrapper ── */
.tbl-dash-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.05);
}

.tbl-dash-scroll::-webkit-scrollbar {
    height: 4px;
}

.tbl-dash-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.tbl-dash-scroll::-webkit-scrollbar-thumb {
    background: #c7d2fe;
    border-radius: 4px;
}

/* ── Table base ── */
.tbl-dash {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 400px;
}

/* ── Header ── */
.tbl-dash thead tr {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
}

.tbl-dash thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.4px;
    white-space: nowrap;
    border: none;
    user-select: none;
}

.tbl-dash thead th.tbl-th-num {
    width: 42px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

.tbl-sort-icon {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 4px;
}

/* ── Body rows ── */
.tbl-dash tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s ease;
}

.tbl-dash tbody tr:last-child {
    border-bottom: none;
}

.tbl-dash tbody tr.tbl-row-even {
    background: #ffffff;
}

.tbl-dash tbody tr.tbl-row-odd {
    background: #f9fafb;
}

.tbl-dash tbody tr:hover {
    background: #f0f0ff;
}

/* ── Cells ── */
.tbl-dash td {
    padding: 9px 14px;
    color: #334155;
    vertical-align: middle;
}

.tbl-td-num {
    text-align: center;
    color: #94a3b8 !important;
    font-size: 12px;
    font-weight: 600;
    width: 42px;
}

.tbl-td-num-val {
    text-align: right;
    font-weight: 700;
    color: #312e81 !important;
    font-variant-numeric: tabular-nums;
}

/* ── Empty state ── */
.tbl-empty {
    text-align: center;
    padding: 32px !important;
    color: #94a3b8;
    font-size: 13px;
}

/* ════════════════════════════════════════════════════════════
   REPORT PAGE — Premium 3-panel Layout
   ════════════════════════════════════════════════════════════ */
.rpt-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: calc(100vh - 80px);
    min-height: 400px;
    overflow: hidden;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ① Sidebar */
.rpt-sidebar {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #1e1e30;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: width 0.25s ease, min-width 0.25s ease;
}

.rpt-sidebar.collapsed {
    width: 0;
    min-width: 0;
}

.rpt-sidebar-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 10px;
    background: linear-gradient(135deg, #312e81, #4f46e5);
    flex-shrink: 0;
}

.rpt-sidebar-icon {
    font-size: 16px;
}

.rpt-sidebar-label {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

.rpt-sidebar-search {
    padding: 8px 10px;
    flex-shrink: 0;
    background: #1a1b2b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.rpt-sidebar-filter {
    width: 100%;
    height: 30px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 12px;
    padding: 0 10px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.rpt-sidebar-filter::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.rpt-sidebar-filter:focus {
    border-color: #6366f1;
    background: rgba(255, 255, 255, 0.12);
}

.rpt-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    flex: 1;
}

.rpt-list::-webkit-scrollbar {
    width: 3px;
}

.rpt-list::-webkit-scrollbar-thumb {
    background: #3b3d5c;
    border-radius: 4px;
}

.rpt-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 12.5px;
    color: #94a3b8;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
    user-select: none;
}

.rpt-list-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    border-left-color: #6366f1;
}

.rpt-list-item.rpt-active {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border-left-color: #6366f1;
    font-weight: 600;
}

.rpt-item-icon {
    font-size: 13px;
    flex-shrink: 0;
}

.rpt-item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpt-list-empty {
    padding: 20px 14px;
    font-size: 12px;
    color: #475569;
    text-align: center;
}

/* ② Right main */
.rpt-main {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: clip;
}

/* ②-a Topbar (h: 50px) */
.rpt-topbar {
    height: 50px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: #ffffff;
    border-bottom: 1.5px solid #e2e8f0;
    gap: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    overflow-x: auto;
}

.rpt-topbar::-webkit-scrollbar {
    height: 0;
}

.rpt-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.rpt-btn-toggle {
    background: none;
    border: 1px solid #e2e8f0;
    color: #64748b;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.rpt-btn-toggle:hover {
    background: #f1f5f9;
    color: #4f46e5;
}

.rpt-active-title {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpt-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rpt-field-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rpt-field-group label {
    font-size: 11.5px;
    color: #64748b;
    white-space: nowrap;
    font-weight: 600;
}

.rpt-input {
    height: 30px;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    padding: 0 10px;
    font-size: 12.5px;
    color: #334155;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rpt-input:focus {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

input[type="date"].rpt-input {
    width: 130px;
}

.rpt-field-search .rpt-input {
    width: 160px;
}

.rpt-btn-search {
    height: 30px;
    padding: 0 14px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    border: none;
    border-radius: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.rpt-btn-search:hover {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    transform: translateY(-1px);
}

.rpt-btn-export {
    height: 30px;
    padding: 0 12px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.rpt-btn-export:hover {
    background: #f0fdf4;
    border-color: #10b981;
    color: #059669;
}

/* ②-b Content area */
.rpt-content {
    flex: 1;
    min-width: 0;
    /* ← prevent flex children from overflowing */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px;
    background: #f8fafc;
    box-sizing: border-box;
}

.rpt-content::-webkit-scrollbar {
    width: 5px;
}

.rpt-content::-webkit-scrollbar-thumb {
    background: #c7d2fe;
    border-radius: 4px;
}

.rpt-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    gap: 10px;
    color: #94a3b8;
    text-align: center;
}

.rpt-empty-icon {
    font-size: 52px;
    opacity: 0.4;
}

.rpt-empty-state h3 {
    margin: 0;
    font-size: 16px;
    color: #64748b;
    font-weight: 600;
}

.rpt-empty-state p {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
}

.rpt-chart-area,
.rpt-table-area {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    padding: 16px;
    margin-bottom: 16px;
    min-width: 0;
    /* ← prevent stretching inside flex */
    max-width: 100%;
    /* ← never exceed parent width */
    box-sizing: border-box;
    overflow: hidden;
    /* ← clip any canvas overflow */
}

/* Chart.js canvas wrapper — must have explicit pixel height
   (Chart.js reads offsetHeight from the PARENT when responsive=true) */
.rpt-chart-box {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 320px;
    /* ← fixed pixel height Chart.js reads */
    overflow: hidden;
    /* ← prevent canvas bleed-out */
    box-sizing: border-box;
}

.rpt-chart-box canvas {
    display: block;
    max-width: 100% !important;
}

/* Table area */
.rpt-table-box {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    /* ← allow horizontal scroll on narrow screens */
    box-sizing: border-box;
}