@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');



:root {
    --brand: #1456d9;
    --brand-soft: #e7efff;
    --bg: #eef3fb;
    --card: #fff;
    --line: #e3e9f3;
    --text: #142033;
    --muted: #6b7a90;
    --green: #17a05a;
    --red: #e5372e;
    --s-open: #dff5e8;
    --s-open-t: #157a45;
    --s-prep: #fff1cf;
    --s-prep-t: #a66a00;
    --s-ready: #d8f3e3;
    --s-ready-t: #14804a;
    --s-ord: #dbe8ff;
    --s-ord-t: #1d54c2;
    --s-new: #e6ecf8;
    --s-new-t: #42557a;
    --radius: 14px;
    --shadow: 0 2px 6px rgba(var(--blue-142850-rgb),.06),0 8px 24px rgba(var(--blue-142850-rgb),.06);
    /* =====================================================================
       Color variables - generated. Change a value here and it changes everywhere.
       Names: --<hue>-<hex>, so var(--blue-1c63f0) is always the color #1c63f0.
       With transparency: rgba(var(--blue-142850-rgb), .3). Rename a variable to suit your theme.
       ===================================================================== */
    --white: #ffffff;
    --black: #000000;
    /* blue */
    --blue-fafbff: #fafbff;
    --blue-fafcff: #fafcff;
    --blue-f7f9ff: #f7f9ff;
    --blue-f7faff: #f7faff;
    --blue-f6f8ff: #f6f8ff;
    --blue-f6f9ff: #f6f9ff;
    --blue-f5f7ff: #f5f7ff;
    --blue-f6f8fe: #f6f8fe;
    --blue-f8fafc: #f8fafc;
    --blue-f4f7ff: #f4f7ff;
    --blue-f4f8ff: #f4f8ff;
    --blue-f3f5ff: #f3f5ff;
    --blue-f3f6ff: #f3f6ff;
    --blue-f6f8fc: #f6f8fc;
    --blue-f1f4ff: #f1f4ff;
    --blue-f1f5ff: #f1f5ff;
    --blue-f1f6ff: #f1f6ff;
    --blue-f3f5fd: #f3f5fd;
    --blue-f3f6fd: #f3f6fd;
    --blue-f4f7fc: #f4f7fc;
    --blue-f0f5ff: #f0f5ff;
    --blue-f3f6fc: #f3f6fc;
    --blue-eff4ff: #eff4ff;
    --blue-f2f6fc: #f2f6fc;
    --blue-eef1ff: #eef1ff;
    --blue-eef3ff: #eef3ff;
    --blue-f1f4fc: #f1f4fc;
    --blue-eef2fd: #eef2fd;
    --blue-f0f3fb: #f0f3fb;
    --blue-f1f4fa: #f1f4fa;
    --blue-f1f5f9: #f1f5f9;
    --blue-eaeeff: #eaeeff;
    --blue-eaf0ff: #eaf0ff;
    --blue-eaf1ff: #eaf1ff;
    --blue-eaf2ff: #eaf2ff;
    --blue-f3f4f6: #f3f4f6;
    --blue-e9edff: #e9edff;
    --blue-eef1fa: #eef1fa;
    --blue-eef2fa: #eef2fa;
    --blue-e8ebff: #e8ebff;
    --blue-e8ecff: #e8ecff;
    --blue-e8edff: #e8edff;
    --blue-e8f0ff: #e8f0ff;
    --blue-e9f2fe: #e9f2fe;
    --blue-eef2f9: #eef2f9;
    --blue-e7efff: #e7efff;
    --blue-eef2f8: #eef2f8;
    --blue-e6eeff: #e6eeff;
    --blue-edf0f8: #edf0f8;
    --blue-eef2f7: #eef2f7;
    --blue-e5eeff: #e5eeff;
    --blue-e8eefb: #e8eefb;
    --blue-e3ecff: #e3ecff;
    --blue-e6edfc: #e6edfc;
    --blue-eceff6: #eceff6;
    --blue-e6edfb: #e6edfb;
    --blue-e0ebff: #e0ebff;
    --blue-dfe6ff: #dfe6ff;
    --blue-e8ecf6: #e8ecf6;
    --blue-e6ebf7: #e6ebf7;
    --blue-e6ecf7: #e6ecf7;
    --blue-e2e8fa: #e2e8fa;
    --blue-dfe6fb: #dfe6fb;
    --blue-e0e6fa: #e0e6fa;
    --blue-dbeafe: #dbeafe;
    --blue-e1e9f8: #e1e9f8;
    --blue-e3e8f6: #e3e8f6;
    --blue-d8ddff: #d8ddff;
    --blue-dfe5f8: #dfe5f8;
    --blue-e3e9f4: #e3e9f4;
    --blue-dbe6fb: #dbe6fb;
    --blue-dfe8f7: #dfe8f7;
    --blue-e1e7f5: #e1e7f5;
    --blue-e3e8f2: #e3e8f2;
    --blue-d9e1fb: #d9e1fb;
    --blue-dce8f8: #dce8f8;
    --blue-e3e8f0: #e3e8f0;
    --blue-e2e8f0: #e2e8f0;
    --blue-d6e2fb: #d6e2fb;
    --blue-dae3f6: #dae3f6;
    --blue-cfe0ff: #cfe0ff;
    --blue-dbe3f3: #dbe3f3;
    --blue-d8dff5: #d8dff5;
    --blue-d8e3f1: #d8e3f1;
    --blue-dbe3ee: #dbe3ee;
    --blue-d5dcf2: #d5dcf2;
    --blue-cfdcf7: #cfdcf7;
    --blue-dee2e6: #dee2e6;
    --blue-cdd8f5: #cdd8f5;
    --blue-cfd6ea: #cfd6ea;
    --blue-c5d5f3: #c5d5f3;
    --blue-ccd3ea: #ccd3ea;
    --blue-cdd7e8: #cdd7e8;
    --blue-bcd0f7: #bcd0f7;
    --blue-bccaf3: #bccaf3;
    --blue-c3cdea: #c3cdea;
    --blue-c9ced8: #c9ced8;
    --blue-b4bdd6: #b4bdd6;
    --blue-a9b4dd: #a9b4dd;
    --blue-86b7fe: #86b7fe;
    --blue-7aa2ff: #7aa2ff;
    --blue-9db4dc: #9db4dc;
    --blue-6c7bff: #6c7bff;
    --blue-a3adc7: #a3adc7;
    --blue-adb5bd: #adb5bd;
    --blue-98a1bb: #98a1bb;
    --blue-94a3b8: #94a3b8;
    --blue-4f86f7: #4f86f7;
    --blue-3b82f6: #3b82f6;
    --blue-2f8bff: #2f8bff;
    --blue-3b6cf0: #3b6cf0;
    --blue-2563eb: #2563eb;
    --blue-1c63f0: #1c63f0;
    --blue-0d6efd: #0d6efd;
    --blue-1a63e8: #1a63e8;
    --blue-6b7694: #6b7694;
    --blue-6b7a90: #6b7a90;
    --blue-1d4ed8: #1d4ed8;
    --blue-4d72a8: #4d72a8;
    --blue-64748b: #64748b;
    --blue-1456d9: #1456d9;
    --blue-152aca: #152aca;
    --blue-5d6680: #5d6680;
    --blue-0f49c4: #0f49c4;
    --blue-184cb9: #184cb9;
    --blue-1e40af: #1e40af;
    --blue-34508f: #34508f;
    --blue-4a5878: #4a5878;
    --blue-4a5370: #4a5370;
    --blue-44526f: #44526f;
    --blue-475569: #475569;
    --blue-4b5563: #4b5563;
    --blue-0b3a9e: #0b3a9e;
    --blue-1e3a8a: #1e3a8a;
    --blue-33415f: #33415f;
    --blue-33445f: #33445f;
    --blue-334155: #334155;
    --blue-0c2b73: #0c2b73;
    --blue-0f2a6b: #0f2a6b;
    --blue-0e2a66: #0e2a66;
    --blue-1f2a55: #1f2a55;
    --blue-343a40: #343a40;
    --blue-1b2a4a: #1b2a4a;
    --blue-1b2b4a: #1b2b4a;
    --blue-14214d: #14214d;
    --blue-1f2937: #1f2937;
    --blue-0f172a: #0f172a;
    --blue-111827: #111827;
    /* gray */
    --gray-e2e2e2: #e2e2e2;
    --gray-dfdfdf: #dfdfdf;
    /* green */
    --green-f4fcf8: #f4fcf8;
    --green-f0fbf4: #f0fbf4;
    --green-f1faf5: #f1faf5;
    --green-eefaf3: #eefaf3;
    --green-e9f9f0: #e9f9f0;
    --green-e6f8ee: #e6f8ee;
    --green-e3f7ec: #e3f7ec;
    --green-dcfce7: #dcfce7;
    --green-dcf5e8: #dcf5e8;
    --green-dcefe3: #dcefe3;
    --green-d5f3e2: #d5f3e2;
    --green-d0efdf: #d0efdf;
    --green-c7f6db: #c7f6db;
    --green-c9f0da: #c9f0da;
    --green-c8efd9: #c8efd9;
    --green-bfe9cf: #bfe9cf;
    --green-bfe8d0: #bfe8d0;
    --green-6ee7b7: #6ee7b7;
    --green-34c98a: #34c98a;
    --green-22c37a: #22c37a;
    --green-4f8a69: #4f8a69;
    --green-22b573: #22b573;
    --green-1fb465: #1fb465;
    --green-349e61: #349e61;
    --green-4b7a62: #4b7a62;
    --green-16a34a: #16a34a;
    --green-12a66a: #12a66a;
    --green-0e9a56: #0e9a56;
    --green-168a57: #168a57;
    --green-0f8a47: #0f8a47;
    --green-0e8a4e: #0e8a4e;
    --green-15803d: #15803d;
    --green-2d5a44: #2d5a44;
    /* indigo */
    --indigo-f3edff: #f3edff;
    --indigo-f1ecff: #f1ecff;
    --indigo-efeaff: #efeaff;
    --indigo-e3d9ff: #e3d9ff;
    --indigo-e0d4ff: #e0d4ff;
    --indigo-b79cff: #b79cff;
    --indigo-7c5cf0: #7c5cf0;
    --indigo-6d4ce0: #6d4ce0;
    --indigo-7c3aed: #7c3aed;
    --indigo-5b3fd1: #5b3fd1;
    --indigo-2a2f8f: #2a2f8f;
    /* orange */
    --orange-fff9ed: #fff9ed;
    --orange-fff0e4: #fff0e4;
    --orange-fff1de: #fff1de;
    --orange-fff1d9: #fff1d9;
    --orange-ffe9d6: #ffe9d6;
    --orange-ffd9bf: #ffd9bf;
    --orange-ffe6b8: #ffe6b8;
    --orange-ffd2ae: #ffd2ae;
    --orange-f6d9a0: #f6d9a0;
    --orange-ffc078: #ffc078;
    --orange-ffbf47: #ffbf47;
    --orange-ffb83d: #ffb83d;
    --orange-e08a4b: #e08a4b;
    --orange-ea580c: #ea580c;
    --orange-f08a00: #f08a00;
    --orange-d97706: #d97706;
    --orange-9a7a3f: #9a7a3f;
    --orange-b7791f: #b7791f;
    --orange-c2570c: #c2570c;
    --orange-c27300: #c27300;
    --orange-b8780a: #b8780a;
    --orange-b45f06: #b45f06;
    --orange-b86e00: #b86e00;
    --orange-8a5a00: #8a5a00;
    --orange-6b3410: #6b3410;
    --orange-7a4b00: #7a4b00;
    --orange-4a2e00: #4a2e00;
    /* pink */
    --pink-ffe6ee: #ffe6ee;
    --pink-ff8fc6: #ff8fc6;
    --pink-e5507a: #e5507a;
    --pink-d6368f: #d6368f;
    /* red */
    --red-fff5f5: #fff5f5;
    --red-fff5f4: #fff5f4;
    --red-fff3f3: #fff3f3;
    --red-ffecee: #ffecee;
    --red-ffe8ea: #ffe8ea;
    --red-ffe2e2: #ffe2e2;
    --red-fde4e4: #fde4e4;
    --red-fee2e2: #fee2e2;
    --red-ffd9dd: #ffd9dd;
    --red-fed9e1: #fed9e1;
    --red-f6c9c6: #f6c9c6;
    --red-f46a63: #f46a63;
    --red-e7625e: #e7625e;
    --red-ef4444: #ef4444;
    --red-ff3b30: #ff3b30;
    --red-d63a3a: #d63a3a;
    --red-d4303a: #d4303a;
    --red-dc2626: #dc2626;
    --red-c4241c: #c4241c;
    --red-b91c1c: #b91c1c;
    /* teal */
    --teal-e4f7f8: #e4f7f8;
    --teal-dff6f8: #dff6f8;
    --teal-d9f4f4: #d9f4f4;
    --teal-c4eef2: #c4eef2;
    --teal-5eead4: #5eead4;
    --teal-0e9aa7: #0e9aa7;
    --teal-0b9aa6: #0b9aa6;
    --teal-0b8691: #0b8691;
    --teal-0f8a8a: #0f8a8a;
    /* yellow */
    --yellow-fff7e6: #fff7e6;
    --yellow-fff6e0: #fff6e0;
    --yellow-fff4de: #fff4de;
    --yellow-fff5da: #fff5da;
    --yellow-fff3c4: #fff3c4;
    --yellow-ffecc0: #ffecc0;
    --yellow-f5e9c9: #f5e9c9;
    --yellow-ffe4a3: #ffe4a3;
    --yellow-ffe58a: #ffe58a;
    --yellow-f6d98f: #f6d98f;
    --yellow-ffdc66: #ffdc66;
    --yellow-f5b82e: #f5b82e;
    --yellow-e0a100: #e0a100;
    --yellow-c88a00: #c88a00;
    --yellow-9a6b00: #9a6b00;
    /* used before without being defined (had a fallback color) */
    --blue: var(--blue-1d4ed8);
    --navy: var(--blue-14214d);
    --border: var(--blue-e2e8f0);
    /* rgb channels for rgba(var(--x-rgb), alpha) */
    --accent-rgb: 245, 165, 36;
    --blue-0d6efd-rgb: 13, 110, 253;
    --blue-0f172a-rgb: 15, 23, 42;
    --blue-14214d-rgb: 20, 33, 77;
    --blue-142850-rgb: 20, 40, 80;
    --blue-1456d9-rgb: 20, 86, 217;
    --blue-1d4ed8-rgb: 29, 78, 216;
    --blue-1e2978-rgb: 30, 41, 120;
    --blue-1e40af-rgb: 30, 64, 175;
    --blue-2563eb-rgb: 37, 99, 235;
    --blue-283478-rgb: 40, 52, 120;
    --blue-96a0b4-rgb: 150, 160, 180;
    --blue-f5f7ff-rgb: 245, 247, 255;
    --brand-rgb: 59, 79, 216;
    --brand-2-rgb: 91, 108, 240;
    --brand-deep-rgb: 30, 42, 120;
    --green-rgb: 23, 160, 90;
    --green-0e9a56-rgb: 14, 154, 86;
    --green-15803d-rgb: 21, 128, 61;
    --indigo-2a2f8f-rgb: 42, 47, 143;
    --line-rgb: 228, 232, 243;
    --orange-e08a4b-rgb: 224, 138, 75;
    --red-rgb: 229, 55, 46;
    --text-rgb: 23, 32, 58;
    --white-rgb: 255, 255, 255;
    --yellow-f5b82e-rgb: 245, 184, 46;
}

* {
    box-sizing: border-box
}

body {
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    overflow: hidden;
    letter-spacing: -0.3px;
    font-weight: 500;
}

a {
    text-decoration: none
}

.app {
    display: flex;
    flex-direction: column;
    height: 100vh
}

/* topbar */
.topbar {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: .6rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1030
}
    /* dropdown ko hamesha upar rakhne ke liye */
    .topbar .dropdown-menu {
        z-index: 1040;
    }

.logo {
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--brand);
    letter-spacing: -.5px;
    line-height: 1
}

    .logo small {
        font-weight: 700;
        color: var(--blue-0b3a9e)
    }

.counter {
    border-left: 1px solid var(--line);
    padding-left: .9rem;
    font-weight: 600
}

.btn-brand {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-hover-color: var(--white);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-color: var(--white);
    font-weight: 500;
    background: var(--card)
}

.btn {
    transition: transform .15s,box-shadow .2s,background .2s
}

    .btn:active {
        transform: scale(.96)
    }

.btn-solid {
    background: linear-gradient(135deg,var(--blue-1c63f0),var(--blue-0f49c4));
    color: var(--white);
    border: 0;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(var(--blue-1456d9-rgb),.3)
}

    .btn-solid:hover {
        color: var(--white);
        box-shadow: 0 6px 16px rgba(var(--blue-1456d9-rgb),.4);
        transform: translateY(-1px)
    }

.btn-pay {
    background: linear-gradient(135deg,var(--green-1fb465),var(--green-0f8a47));
    color: var(--white);
    border: 0;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(var(--green-rgb),.3)
}

    .btn-pay:hover {
        color: var(--white);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(var(--green-rgb),.4);
    }

/* 3 section layout – auto-fill width */
.workspace {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: .75rem;
    padding: .75rem
}

.panel {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.panel-left {
    flex: 0 0 160px;
    border-radius: 0 !important;
}
    /* ===== .panel-left : vertical tabs-nav ===== */
    .panel-left .nav-tabs.tabs-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        /* gap: .3rem;*/
        gap: .0rem;
        margin: 0;
        padding: .4rem;
        background: transparent;
        border-bottom: 1px solid var(--line);
        overflow: visible;
    }

        .panel-left .nav-tabs.tabs-nav .nav-item {
            width: 100%;
        }

        .panel-left .nav-tabs.tabs-nav .nav-link {
            position: relative;
            display: flex;
            align-items: center;
            gap: .5rem;
            width: 100%;
            margin: 0;
            /* padding: .5rem .65rem; */
            padding: 1rem 0.6rem;
            border: 1px solid transparent;
            border-radius: 12px;
            background: transparent;
            color: var(--blue-184cb9);
            font-weight: 600;
            font-size: .92rem;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s;
        }

            /* icon chip */
            .panel-left .nav-tabs.tabs-nav .nav-link i {
                flex: 0 0 auto;
                display: grid;
                place-items: center;
                width: 2rem;
                height: 2rem;
                margin: 0;
                border-radius: 9px;
                background: var(--brand-soft);
                color: var(--brand);
                font-size: 1.5rem;
                transition: background .25s, color .25s, transform .3s var(--ease);
            }

            /* right side chevron */
            .panel-left .nav-tabs.tabs-nav .nav-link::before {
                content: "\f285"; /* bi-chevron-right */
                font-family: "bootstrap-icons";
                order: 3;
                margin-left: auto;
                font-size: .8rem;
                opacity: 0;
                transform: translateX(-6px);
                transition: opacity .25s, transform .25s var(--ease);
            }

            /* left accent bar (purani underline ::after ko override) */
            .panel-left .nav-tabs.tabs-nav .nav-link::after {
                content: "";
                position: absolute;
                left: 0;
                right: auto;
                top: 22%;
                bottom: 22%;
                width: 3px;
                height: auto;
                border-radius: 0 3px 3px 0;
                /*background: linear-gradient(180deg, var(--brand), #4f86f7);*/
                background: transparent;
                transform: scaleY(0);
                transition: transform .3s var(--ease);
            }

            /* hover */
            .panel-left .nav-tabs.tabs-nav .nav-link:hover {
                background: var(--blue-f3f6fd);
                color: var(--brand);
                transform: translateX(3px);
            }

                .panel-left .nav-tabs.tabs-nav .nav-link:hover i {
                    transform: scale(1.08) rotate(-4deg);
                }

                .panel-left .nav-tabs.tabs-nav .nav-link:hover::before {
                    opacity: .6;
                    transform: none;
                }

            /* active */


            .panel-left .nav-tabs.tabs-nav .nav-link.active i {
                background: linear-gradient(135deg, var(--brand), var(--blue-4f86f7));
                color: var(--white);
                box-shadow: 0 4px 10px -3px rgba(var(--blue-1456d9-rgb),.6);
            }

            .panel-left .nav-tabs.tabs-nav .nav-link.active::before {
                opacity: 1;
                transform: none;
            }

            .panel-left .nav-tabs.tabs-nav .nav-link.active::after {
                transform: scaleY(1);
            }

            /* keyboard focus */
            .panel-left .nav-tabs.tabs-nav .nav-link:focus-visible {
                outline: 0;
                box-shadow: 0 0 0 3px rgba(var(--blue-1456d9-rgb),.25);
            }
/* ===== panel-left : extra polish ===== */

/* panel ka halka gradient background */
.panel-left {
    background: linear-gradient(180deg, var(--white) 0%, var(--blue-f6f9ff) 100%);
}



    /* divider ko fade karo */
    .panel-left .nav-tabs.tabs-nav {
        border-bottom: 1px solid;
        border-image: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent) 1;
        padding-bottom: .8rem;
    }

    /* har tab ka apna rang */
    .panel-left .tabs-nav .nav-item:nth-child(1) {
        --c: var(--indigo-7c5cf0);
        --c-soft: var(--indigo-efeaff);
    }

    .panel-left .tabs-nav .nav-item:nth-child(2) {
        --c: var(--blue-1456d9);
        --c-soft: var(--blue-e7efff);
    }

    .panel-left .tabs-nav .nav-item:nth-child(3) {
        --c: var(--teal-0e9aa7);
        --c-soft: var(--teal-dff6f8);
    }

    .panel-left .tabs-nav .nav-item:nth-child(4) {
        --c: var(--orange-f08a00);
        --c-soft: var(--orange-fff1d9);
    }

    .panel-left .tabs-nav .nav-item:nth-child(5) {
        --c: var(--green);
        --c-soft: var(--s-open);
    }

    .panel-left .tabs-nav .nav-item:nth-child(6) {
        --c: var(--pink-e5507a);
        --c-soft: var(--pink-ffe6ee);
    }

    /*.panel-left .nav-tabs.tabs-nav .nav-link i {
    background: var(--c-soft, var(--brand-soft));
    color: var(--c, var(--brand));
}*/
    .panel-left .nav-tabs.tabs-nav .nav-link i {
        background: none;
        color: var(--c, var(--brand));
    }

    .panel-left .nav-tabs.tabs-nav .nav-link i {
        background: none;
        /* color: var(--c, var(--brand));*/
        color: var(--blue-184cb9) !important
    }



    /* hover: chip poora rang pakad le */
    .panel-left .nav-tabs.tabs-nav .nav-link:hover i {
        /*background: var(--c, var(--brand));*/
        color: var(--white);
        /*box-shadow: 0 6px 12px -4px var(--c, var(--brand));*/;
        box-shadow: none !important
    }

    /* active: solid gradient pill */
    .panel-left .nav-tabs.tabs-nav .nav-link.active {
        background: linear-gradient(135deg, var(--blue-1456d9), var(--blue-4f86f7));
        border-color: transparent;
        color: var(--white);
        box-shadow: 0 6px 16px -10px rgba(var(--blue-1456d9-rgb),.55);
    }

        .panel-left .nav-tabs.tabs-nav .nav-link.active i {
            /*background: rgba(255, 255, 255, .2);*/
            background: none;
            color: var(--white) !important;
            /*box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);*/
            box-shadow: none
        }

        .panel-left .nav-tabs.tabs-nav .nav-link.active::before {
            color: var(--white);
        }

/*.panel-left .nav-tabs.tabs-nav .nav-link.active::after {
    background: #fff;
}*/

/* slide-in entrance */
@keyframes tabSlideIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
}

.panel-left .nav-tabs.tabs-nav .nav-item {
    animation: tabSlideIn .45s var(--ease) backwards;
}

.panel-left .tabs-nav .nav-item:nth-child(2) {
    animation-delay: .05s;
}

.panel-left .tabs-nav .nav-item:nth-child(3) {
    animation-delay: .10s;
}

.panel-left .tabs-nav .nav-item:nth-child(4) {
    animation-delay: .15s;
}

.panel-left .tabs-nav .nav-item:nth-child(5) {
    animation-delay: .20s;
}

.panel-left .tabs-nav .nav-item:nth-child(6) {
    animation-delay: .25s;
}

@media (prefers-reduced-motion: reduce) {
    .panel-left .nav-tabs.tabs-nav .nav-item {
        animation: none;
    }
}

.panel-center {
    flex: 1 1 0
}
/* center fills whatever is left */
.panel-right {
    flex: 0 0 370px;
    background: var(--card) !important
}

.panel.is-hidden {
    display: none
}
/* hide any one – others expand automatically */
.panel-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0
}

    .panel-scroll::-webkit-scrollbar {
        width: 6px
    }

    .panel-scroll::-webkit-scrollbar-thumb {
        background: var(--blue-cdd7e8);
        border-radius: 6px
    }

/* left */
.ph {
    padding: .3rem .7rem .0rem
}

    .ph h5 {
        font-weight: 700;
        margin: 0
    }

.search {
    position: relative
}

    .search i {
        position: absolute;
        left: .8rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted)
    }

    .search input {
        padding-left: 2.2rem;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: var(--blue-fafcff)
    }

        .search input:focus, .form-control:focus, .form-select:focus {
            border-color: var(--brand);
            box-shadow: 0 0 0 .2rem rgba(var(--blue-1456d9-rgb),.15)
        }

.chips {
    display: flex;
    gap: .5rem;
    margin: .75rem 0 .25rem
}

.chip {
    border: 0;
    background: var(--blue-eef2f9);
    border-radius: 8px;
    padding: .4rem .9rem;
    font-weight: 500;
    font-size: .85rem;
    color: var(--text);
    transition: .2s
}

    .chip:hover {
        background: var(--blue-dfe8f7)
    }

    .chip.active {
        background: var(--brand);
        color: var(--white);
        box-shadow: 0 3px 8px rgba(var(--blue-1456d9-rgb),.3)
    }

.orders {
    padding: .5rem 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem
}

.order-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .7rem .8rem;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: .7rem;
    align-items: center;
    transition: .2s;
    background: var(--card)
}

    .order-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(var(--blue-142850-rgb),.1);
        border-color: var(--blue-c5d5f3)
    }

    .order-card.active {
        border: 2px solid var(--brand);
        background: var(--blue-f4f8ff);
        padding: calc(.7rem - 1px) calc(.8rem - 1px)
    }

    .order-card .ic {
        font-size: 1.6rem;
        color: var(--blue-1b2b4a);
        grid-row: 1/3
    }

    .order-card .no {
        font-weight: 700
    }

    .order-card .sub {
        color: var(--muted);
        font-size: .8rem
    }

    .order-card .meta {
        grid-column: 1/4;
        display: flex;
        justify-content: space-between;
        color: var(--muted);
        font-size: .85rem;
        margin-top: .35rem
    }

        .order-card .meta span {
            font-size: .8rem
        }

        .order-card .meta b {
            color: var(--text);
            font-size: .95rem
        }

    .order-card .right {
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: .2rem;
        font-size: .8rem;
        color: var(--muted)
    }

.st {
    display: inline-block;
    padding: .18rem .65rem;
    border-radius: 7px;
    font-size: .8rem;
    font-weight: 600
}

.st-open {
    background: var(--s-open);
    color: var(--s-open-t)
}

.st-prep {
    background: var(--s-prep);
    color: var(--s-prep-t)
}

.st-ready {
    background: var(--s-ready);
    color: var(--s-ready-t)
}

.st-ord {
    background: var(--s-ord);
    color: var(--s-ord-t)
}

.st-new {
    background: var(--s-new);
    color: var(--s-new-t)
}

.left-foot {
    padding: .75rem 1rem;
}

.left-foot-menu {
    margin-top: auto;
    padding: 0px 0px 0px 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    background: url(/assets/images/futex-bg-label.png) no-repeat right bottom;
    background-size: cover;
    background-position-x: -123px;
}

/* button ab image ke upar sirf content hai, apna background nahi */
.foot-menu-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 6px 6px 6px 10px;
    background: none;
    box-shadow: none;
    border-radius: 0;
    color: var(--white);
    text-decoration: none;
    transition: transform .25s var(--ease);
}


    .foot-menu-btn i {
        font-size: 2rem;
        line-height: 1;
    }

.foot-menu-text {
    align-items: flex-start;
}

.foot-menu-btn:hover {
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(var(--blue-14214d-rgb),.35);
}

.foot-menu-btn i {
    font-size: 2rem;
    line-height: 1;
}

.foot-menu-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.foot-menu-title {
    font-size: 1.0rem;
    font-weight: 700;
    letter-spacing: .5px;
}

.foot-menu-url {
    font-size: .7rem;
    opacity: .85;
}
/* center */


.c-head h3 {
    font-weight: 700;
    margin: 0 0 .35rem;
    font-size: 1.5rem;
}

    .c-head h3 span {
        color: var(--muted);
        font-weight: 400
    }

.c-info {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    color: var(--muted);
    align-items: center
}

    .c-info i {
        margin-right: .35rem;
        color: var(--brand)
    }

    .c-info span:first-child i {
        color: var(--blue-1b2b4a)
    }

.tabs-nav {
    display: flex;
    border-bottom: 1px solid var(--line);
    padding: 0 .75rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-top: .5rem;
    background: var(--blue-fafcff)
}

    .tabs-nav button {
        border: 0;
        background: none;
        padding: .8rem 1rem;
        color: var(--blue-33445f);
        font-weight: 500;
        white-space: nowrap;
        border-bottom: 3px solid transparent;
        transition: .2s
    }

        .tabs-nav button i {
            margin-right: .4rem
        }

        .tabs-nav button:hover {
            color: var(--brand)
        }

        .tabs-nav button.active {
            color: var(--brand);
            border-color: var(--brand)
        }

.c-body {
    padding: 1rem 1.25rem
}

.box {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.6rem;
    background: var(--card)
}

    .box h6 {
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--blue-0e2a66);
        margin-bottom: .75rem
    }

.lbl {
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: .25rem;
    display: block
}

    .lbl i {
        margin-right: .3rem;
        color: var(--brand)
    }

.qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
    background: var(--card)
}

    .qty button {
        border: 0;
        background: var(--blue-f4f7fc);
        width: 30px;
        height: 34px;
        transition: .15s
    }

        .qty button:hover {
            background: var(--brand-soft);
            color: var(--brand)
        }

    .qty span {
        min-width: 30px;
        text-align: center;
        font-weight: 600
    }

.table-pos {
    margin: 0;
    font-size: .9rem
}

    .table-pos th {
        background: var(--blue-f2f6fc);
        color: var(--blue-33445f);
        font-weight: 600;
        font-size: .8rem;
        border: 0;
        padding: .55rem .6rem;
        white-space: nowrap
    }

    .table-pos td {
        padding: .5rem .6rem !important;
        vertical-align: middle;
        border-color: var(--blue-eef2f8)
    }

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(var(--blue-f5f7ff-rgb),.48);
}

.table-pos tbody tr {
    transition: background .15s;
    cursor: pointer
}

    .table-pos tbody tr:hover, .table-pos tbody tr.sel {
        background: var(--blue-eaf1ff)
    }

.table-pos small {
    color: var(--muted);
    display: block;
    font-size: .78rem;
    line-height: 12px;
}

.ib {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--card);
    display: inline-grid;
    place-items: center;
    color: var(--blue-33445f);
    transition: .15s;
    font-size: .85rem
}

    .ib:hover {
        transform: translateY(-1px);
        background: var(--brand-soft);
        color: var(--brand)
    }

    .ib.del {
        color: var(--red);
        border-color: var(--red-f6c9c6);
        background: var(--red-fff5f4)
    }

        .ib.del:hover {
            background: var(--red);
            color: var(--white)
        }

.detail-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr;
    gap: 1rem
}

.kot {
    background: var(--blue-eef2f9);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .3rem .8rem;
    font-weight: 600
}
/* right */
.r-head {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .5rem;
    flex-wrap: wrap
}

    .r-head .ic {
        width: 42px;
        height: 40px;
        border-radius: 12px;
        background: var(--brand-soft);
        display: grid;
        place-items: center;
        font-size: 1.3rem;
        color: var(--blue-1b2b4a);
    }

    .r-head h5 {
        font-weight: 700;
        margin: 0;
        flex: 1 1 150px
    }

    .r-head small {
        color: var(--muted);
        font-weight: 400;
        display: block;
        font-size: .85rem
    }



.cart-row img {
    flex-shrink: 0
}

.cart-row .btn {
    color: var(--red);
    border-color: var(--red-f6c9c6);
    background: var(--red-fff5f4);
    padding: 2px 5px;
}

    .cart-row .btn:hover {
        color: var(--card) !important;
        background: var(--red);
    }

.cart-row .n {
    color: var(--blue-33445f);
    font-size: .rem
}

.cart-row .nm {
    font-weight: 600;
    line-height: 1.2;
}

    .cart-row .nm small {
        display: block;
        color: var(--muted);
        font-weight: 400
    }

.cart-row .pr {
    text-align: right;
    font-weight: 500;
    font-size: .8rem;
    line-height: 15px;
}

.cart-row .tl {
    text-align: right;
    font-weight: 700;
    font-size: .8rem;
    line-height: 15px;
}

.cart-row .trash {
    color: var(--red);
    border: 0;
    background: none;
    font-size: 1.1rem;
    transition: .15s
}

    .cart-row .trash:hover {
        transform: scale(1.2)
    }

.totals {
    padding: .3rem 1rem;
    border-top: 1px solid var(--line)
}

    .totals div {
        display: flex;
        justify-content: space-between;
        color: var(--blue-33445f);
        padding: .1rem 0
    }

    .totals b {
        color: var(--text)
    }

.grand {
    margin: 0 1rem;
    background: linear-gradient(90deg,var(--blue-e5eeff),var(--blue-f0f5ff));
    border-radius: 10px;
    padding: .7rem .9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--blue-0c2b73)
}

    .grand span:last-child {
        color: var(--blue-0c2b73);
        font-size: 1.6rem
    }

.actions {
    padding: .8rem 1rem 1rem;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .4rem
}

    .actions .btn {
        white-space: nowrap;
        font-size: 0.8rem
    }

.kot-badge {
    position: absolute;
    top: -8px;
    right: -6px;
    background: var(--red-ff3b30);
    color: var(--white);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: .7rem;
    display: grid;
    place-items: center;
    font-weight: 700;
    box-shadow: 0 0 0 3px var(--white)
}
/* view toggles for the 3 panels */
.view-toggle .btn {
    --bs-btn-padding-y: .3rem
}

.fade-swap {
    animation: swap .25s ease
}

@keyframes swap {
    from {
        opacity: .4;
        transform: translateY(4px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.pane {
    display: none
}

    .pane.active {
        display: block;
        animation: swap .25s ease
    }

fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0
}

    fieldset:disabled .form-control, fieldset:disabled .form-select, fieldset:disabled .input-group-text {
        background: var(--blue-f6f8fc);
        color: var(--blue-6b7a90)
    }

    fieldset:disabled .btn, fieldset:disabled .qty button {
        opacity: .55;
        cursor: not-allowed
    }

.ib:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none
}

.table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
    gap: .75rem
}

.tbl {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .9rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    background: var(--card);
    transition: .2s;
    text-align: center;
}

    .tbl:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(var(--blue-142850-rgb),.1)
    }

    .tbl i {
        font-size: 1.4rem
    }

    .tbl small {
        color: var(--muted)
    }

    .tbl.busy {
        background: linear-gradient(135deg, var(--red-fff5f5), var(--white));
        border-color: var(--red-ffe2e2);
    }

        .tbl.busy i {
            color: var(--yellow-c88a00)
        }

.table-icon {
    margin-bottom: 5px
}

.tbl .table-icon img {
    width: 75px
}

.tbl.free {
    background: linear-gradient(135deg, var(--green-eefaf3), var(--white));
    border-color: var(--green-bfe8d0)
}

    .tbl.free i {
        color: var(--green)
    }

.tbl.cur {
    background: linear-gradient(135deg, var(--blue-eef1ff), var(--white));
    border: 2px solid var(--brand)
}

    .tbl.cur i {
        color: var(--brand)
    }

.role {
    font-weight: 600;
    display: inline-block;
    margin: auto;
    padding: 3px 12px;
    border-radius: 6px;
    font-size: .8rem;
}

.tbl.busy .role {
    background: var(--red-fed9e1);
    color: var(--red-e7625e);
}

.tbl.free .role {
    background: var(--green-c7f6db);
    color: var(--green-349e61);
}

.tbl.cur .role {
    background: var(--blue-d8ddff);
    color: var(--blue-152aca);
}

.table-info-card {
    background: var(--card);
    border: 1px solid var(--blue-e3e8f0);
    border-radius: 12px;
    padding: 8px 15px;
}

.ti-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    color: var(--blue-1b2a4a);
    margin-bottom: 12px;
}

    .ti-title i {
        font-size: 18px;
        color: var(--blue-0d6efd);
    }

.ti-row {
    display: flex;
    align-items: center;
    padding: 2px 0;
    font-size: 13px;
}

.ti-label {
    width: 90px;
    color: var(--blue-4b5563);
}

.ti-value {
    font-weight: 700;
    color: var(--blue-111827);
}

.ti-badge {
    background: var(--blue-dbeafe);
    color: var(--blue-1d4ed8);
    font-weight: 600;
    font-size: 12px;
    padding: 4px 14px;
    border-radius: 6px;
}

.kv {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: .75rem
}

    .kv > div {
        background: var(--blue-f7faff);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: .7rem .9rem;
        display: flex;
        flex-direction: column;
        gap: .15rem
    }

    .kv span {
        color: var(--muted);
        font-size: .8rem
    }

.timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 .4rem;
    position: relative
}

    .timeline:before {
        content: "";
        position: absolute;
        left: 1.05rem;
        top: .5rem;
        bottom: .5rem;
        width: 2px;
        background: var(--line)
    }

    .timeline li {
        display: flex;
        gap: .9rem;
        align-items: flex-start;
        padding: .5rem 0;
        position: relative
    }

        .timeline li > i {
            background: var(--brand-soft);
            color: var(--brand);
            width: 1.7rem;
            height: 1.7rem;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: .9rem;
            z-index: 1
        }

    .timeline small {
        display: block;
        color: var(--muted)
    }

.cart-row .qv {
    font-weight: 600;
    color: var(--blue-33445f);
    font-size: .9rem
}
/* responsive */
@media (max-width:1399px) {
    /* .panel-left {
                flex-basis: 280px
            }*/

    .panel-right {
        flex-basis: 410px
    }
}

@media (max-width:1199px) {
    /* .panel-left {
                flex-basis: 250px
            }*/

    .panel-right {
        flex-basis: 300px
    }

    .detail-grid {
        grid-template-columns: 1fr 1fr
    }

        .detail-grid > :first-child {
            grid-column: 1/-1
        }
}

@media (max-width:991px) {
    body {
        height: auto;
        overflow: auto
    }

    .app {
        height: auto;
        min-height: 100vh
    }

    .workspace {
        flex-direction: column
    }

    .panel {
        flex: none !important;
        max-height: none
    }

    .panel-left .panel-scroll {
        max-height: 380px
    }

    .orders {
        flex-direction: row;
        overflow-x: auto
    }

    .order-card {
        min-width: 240px
    }
}

@media (max-width:575px) {
    .logo {
        font-size: 1.25rem
    }

    .counter {
        display: none
    }

    .actions {
        grid-template-columns: 1fr 1fr
    }

        .actions .btn-pay, .actions .btn-solid {
            grid-column: span 1
        }

    .detail-grid {
        grid-template-columns: 1fr
    }

    .add-row .btn {
        width: 100%
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none !important;
        animation: none !important
    }
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px
}
/* ---- Bootstrap-native overrides ---- */
.main-tc {
    display: contents
}

    .main-tc > .main-pane {
        display: none
    }

        .main-tc > .main-pane.active {
            display: contents
        }

.app:has(#tgLeft:not(:checked)) .panel-left {
    display: none
}

.app:has(#tgRight:not(:checked)) .panel-right {
    display: none
}

.app:has(#tgLeft:checked) label[for=tgLeft], .app:has(#tgRight:checked) label[for=tgRight] {
    background: var(--blue-f4f7fc);
    color: var(--brand);
    border-color: var(--line)
}

.btn-check:checked + .chip {
    background: var(--brand);
    color: var(--white);
    box-shadow: 0 3px 8px rgba(var(--blue-1456d9-rgb),.3)
}

.btn-check:focus-visible + .chip {
    outline: 2px solid var(--brand);
    outline-offset: 2px
}

.chip {
    cursor: pointer;
    margin: 0
}

.panel-left:has(#fDine:checked) .order-card[data-type=take] {
    display: none
}

.panel-left:has(#fTake:checked) .order-card[data-type=dine] {
    display: none
}

.list-group .order-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .7rem .8rem;
    margin: 0;
    color: var(--text);
    background: var(--card);
    display: grid;
    text-decoration: none
}

    .list-group .order-card:hover {
        background: var(--card);
        color: var(--text)
    }

    .list-group .order-card.active {
        background: var(--blue-f4f8ff);
        color: var(--text);
        border: 2px solid var(--brand);
        padding: calc(.7rem - 1px) calc(.8rem - 1px)
    }

.nav-tabs.tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--line)
}

    .nav-tabs.tabs-nav .nav-link {
        border: 0;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        color: var(--blue-33445f);
        font-weight: 500;
        padding: .8rem 1rem;
        white-space: nowrap;
        background: none;
        margin-bottom: -1px
    }

        .nav-tabs.tabs-nav .nav-link:hover {
            color: var(--brand)
        }

        .nav-tabs.tabs-nav .nav-link.active {
            color: var(--brand);
            background: none;
            border-color: transparent transparent var(--brand)
        }

        .nav-tabs.tabs-nav .nav-link i {
            margin-right: .4rem
        }

.cart-row {
    grid-template-columns: 22px 1fr 108px 78px
}

.qty-bs {
    width: 80px;
    flex-wrap: nowrap
}

    .qty-bs .btn {
        padding: .2rem .5rem;
        line-height: 1.2;
        border-color: var(--line);
        color: var(--blue-33445f);
        background: var(--blue-f4f7fc)
    }

        .qty-bs .btn:hover {
            background: var(--brand-soft);
            color: var(--brand)
        }

    .qty-bs .form-control {
        padding: .2rem 0;
        text-align: center;
        font-weight: 600;
        border-color: var(--line);
        -moz-appearance: textfield
    }

        .qty-bs .form-control::-webkit-outer-spin-button, .qty-bs .form-control::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0
        }

.c-info .c-badge-table {
    background: var(--blue-f1f6ff);
    color: var(--blue-4d72a8);
    border: 1px solid var(--blue-dce8f8);
}

.c-info .c-badge-guests {
    background: var(--green-f1faf5);
    color: var(--green-4f8a69);
    border: 1px solid var(--green-dcefe3);
}

.c-info .c-badge-waiter {
    background: var(--orange-fff9ed);
    color: var(--orange-9a7a3f);
    border: 1px solid var(--yellow-f5e9c9);
}
/* scrollbar hide (scroll phir bhi kaam karega) */
.panel-scroll,
.tabs-nav,
.table-responsive,
.orders, .offcanvas-body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* purana Edge/IE */
}

    .panel-scroll::-webkit-scrollbar,
    .tabs-nav::-webkit-scrollbar,
    .table-responsive::-webkit-scrollbar,
    .orders::-webkit-scrollbar, .offcanvas-body::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none; /* Chrome, Edge, Safari */
    }


:root {
    --brand: #3b4fd8;
    --brand-2: #5b6cf0;
    --brand-deep: #1e2a78;
    --brand-soft: #eceffe;
    --accent: #f5a524;
    --bg: #eef1f8;
    --line: #e4e8f3;
    --text: #17203a;
    --muted: #6f7b96;
    --radius: 6px;
    --ease: cubic-bezier(.22, .8, .3, 1);
    --shadow: 0 1px 2px rgba(var(--text-rgb),.04), 0 10px 30px -8px rgba(var(--blue-283478-rgb),.14);
    --shadow-hover: 0 14px 30px -10px rgba(var(--blue-283478-rgb),.28);
    --shadow2: 0 1px 2px rgba(var(--text-rgb),.03), 0 6px 18px -8px rgba(var(--blue-283478-rgb),.08);
    --shadow2-hover: 0 10px 22px -10px rgba(var(--blue-283478-rgb),.16);
    --font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* ---------- base & background ---------- */
body {
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--text);
    background: radial-gradient(900px 500px at 8% -10%, rgba(var(--brand-2-rgb),.16), transparent 60%), radial-gradient(700px 480px at 100% 0%, rgba(var(--accent-rgb),.10), transparent 60%), radial-gradient(800px 600px at 60% 110%, rgba(var(--brand-rgb),.10), transparent 60%), var(--bg);
    -webkit-font-smoothing: antialiased;
}

h3, h5, h6, .logo, .no, .grand, .btn {
    font-family: var(--font-head);
}
/* ---------- topbar ---------- */
.topbar {
    background: rgba(var(--white-rgb),.82);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(var(--line-rgb),.9);
    box-shadow: 0 6px 24px -14px rgba(var(--blue-283478-rgb),.2);
    padding: .35rem 1.1rem;
}

.logo {
    font-weight: 800;
    background: linear-gradient(120deg, var(--brand-deep), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

    .logo small {
        color: transparent;
        font-weight: 700;
    }

.counter {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--brand-deep);
}
/* ---------- buttons ---------- */
.btn {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: .1px;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
    font-size: .9rem;
    --bs-btn-padding-x: 0.6rem;
}



    .btn:active {
        transform: scale(.96);
    }

.btn-brand {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: rgba(var(--brand-rgb),.35);
    background: var(--card);
}

    .btn-brand:hover {
        background: linear-gradient(135deg, var(--brand-2), var(--brand));
        border-color: transparent;
        color: var(--white);
        transform: translateY(-2px);
        box-shadow: 0 10px 20px -8px rgba(var(--brand-rgb),.55);
    }

.btn-solid {
    background: linear-gradient(135deg, var(--brand-2), var(--brand) 55%, var(--brand-deep));
    background-size: 160% 160%;
    background-position: 0% 50%;
    box-shadow: 0 8px 18px -8px rgba(var(--brand-rgb),.65), inset 0 1px 0 rgba(var(--white-rgb),.25);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease);
}

    .btn-solid:hover {
        background-position: 100% 50%;
        transform: translateY(-2px);
        box-shadow: 0 14px 24px -10px rgba(var(--brand-rgb),.7), inset 0 1px 0 rgba(var(--white-rgb),.3);
    }

.btn-pay {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--green-22c37a), var(--green-0e9a56));
    box-shadow: 0 8px 18px -8px rgba(var(--green-0e9a56-rgb),.7), inset 0 1px 0 rgba(var(--white-rgb),.3);
}

    .btn-pay::after { /* shine sweep on hover */
        content: "";
        position: absolute;
        inset: 0 auto 0 -60%;
        width: 50%;
        background: linear-gradient(100deg, transparent, rgba(var(--white-rgb),.45), transparent);
        transform: skewX(-20deg);
        transition: left .7s var(--ease);
    }

    .btn-pay:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 24px -10px rgba(var(--green-0e9a56-rgb),.75);
    }

        .btn-pay:hover::after {
            left: 120%;
        }

.btn-light.border {
    background: var(--card);
    border-color: var(--line) !important;
    color: var(--blue-33415f);
}

    .btn-light.border:hover {
        background: var(--brand-soft);
        border-color: rgba(var(--brand-rgb),.35) !important;
        color: var(--brand);
        transform: translateY(-2px);
        box-shadow: 0 8px 16px -10px rgba(var(--brand-rgb),.4);
    }

.view-toggle .btn {
    border-color: var(--line);
}
/* ---------- panels ---------- */
.workspace {
    gap: 0.3rem;
    padding: 0.3rem;
    padding-left: 0;
    padding-bottom: 0;
}

/* .panel {
       
        border-radius: var(--radius);
        background: rgba(255,255,255,.94);
        box-shadow: var(--shadow);
    }*/
.panel {
    border-radius: var(--radius);
    background: transparent;
    box-shadow: none;
}


.main-pane.active > .panel {
    animation: paneIn .38s var(--ease) both;
}

.main-pane.active > .panel-right {
    animation-delay: .06s;
}

@keyframes paneIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.panel-scroll::-webkit-scrollbar {
    width: 6px;
}

.panel-scroll::-webkit-scrollbar-thumb {
    background: var(--blue-ccd3ea);
    border-radius: 8px;
}

    .panel-scroll::-webkit-scrollbar-thumb:hover {
        background: var(--blue-a9b4dd);
    }
/* ---------- left: search, chips, order cards ---------- */
.ph h5 {
    font-weight: 800;
    letter-spacing: -.2px;
}

.search input {
    height: 38px;
    border-radius: 12px;
    background: var(--blue-f6f8fe);
    border: 1px solid transparent;
    transition: background .2s, border-color .2s, box-shadow .2s;
    font-size: 0.9rem
}

    .search input:focus {
        background: var(--card);
        border-color: var(--brand);
        box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.14);
    }

.chip {
    background: var(--blue-f0f3fb);
    border-radius: 999px;
    padding: .4rem 0.8rem;
    font-weight: 600;
    transition: all .25s var(--ease);
}

    .chip:hover {
        background: var(--blue-e2e8fa);
        transform: translateY(-1px);
    }

.btn-check:checked + .chip {
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    box-shadow: 0 8px 16px -8px rgba(var(--brand-rgb),.7);
}

.list-group .order-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: .5rem .7rem;
    background: var(--card);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s, background .28s;
}

    .list-group .order-card:hover {
        background: var(--card);
        transform: translateX(4px);
        border-color: rgba(var(--brand-rgb),.35);
        box-shadow: var(--shadow-hover);
    }

    .list-group .order-card.active {
        background: linear-gradient(135deg, var(--blue-f3f5ff), var(--white));
        border: 1px solid var(--brand);
        padding: .8rem .9rem;
    }

.order-card .ic {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.35rem;
    transition: background .28s, color .28s, transform .28s var(--ease);
}

.order-card:hover .ic {
    transform: rotate(-6deg) scale(1.06);
}

.order-card.active .ic {
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    color: var(--white);
}

.order-card .no {
    font-weight: 800;
}

.order-card .meta b {
    font-family: var(--font-head);
    font-weight: 800;
    color: var(--brand-deep);
}

.left-foot {
    background: linear-gradient(to top, var(--white), rgba(var(--white-rgb),.6));
}
/* ---------- status pills ---------- */
.st {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .76rem;
}

    .st::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.st-prep::before, .st-new::before {
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    50% {
        opacity: .25;
        transform: scale(1.5);
    }
}
/* ---------- center ---------- */
.c-head {
    padding: 1rem 1.0rem .5rem;
    background: linear-gradient(180deg, var(--blue-f6f8ff), var(--white));
}

    .c-head h3 {
        font-weight: 800;
        letter-spacing: -.5px;
        color: var(--brand-deep);
    }

.c-info .badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .85rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .82rem;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

    .c-info .badge:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 14px -8px rgba(var(--blue-283478-rgb),.4);
    }

    .c-info .badge i {
        margin: 0;
        color: inherit;
    }

.nav-tabs.tabs-nav {
    background: var(--card);
    padding: 0 1rem;
}

    .nav-tabs.tabs-nav .nav-link {
        position: relative;
        border-bottom: 0;
        color: var(--blue-4a5878);
        font-weight: 600;
        padding: .4rem 1.05rem;
        transition: color .25s, background .25s;
    }

        .nav-tabs.tabs-nav .nav-link::after {
            content: "";
            position: absolute;
            left: 14%;
            right: 14%;
            bottom: 0;
            height: 3px;
            border-radius: 3px 3px 0 0;
            background: linear-gradient(90deg, var(--brand-2), var(--brand));
            transform: scaleX(0);
            transition: transform .35s var(--ease);
        }

        .nav-tabs.tabs-nav .nav-link:hover {
            color: var(--brand);
            background: var(--blue-f6f8ff);
        }

            .nav-tabs.tabs-nav .nav-link:hover::after {
                transform: scaleX(.5);
            }

        .nav-tabs.tabs-nav .nav-link.active {
            color: var(--brand);
            border: 0;
        }

            .nav-tabs.tabs-nav .nav-link.active::after {
                transform: scaleX(1);
            }

        .nav-tabs.tabs-nav .nav-link i {
            transition: transform .3s var(--ease);
        }

        .nav-tabs.tabs-nav .nav-link:hover i {
            transform: translateY(-2px);
        }

.tab-pane.fade {
    transition: opacity .3s ease, transform .3s var(--ease);
}

    .tab-pane.fade:not(.show) {
        transform: translateY(6px);
    }

.c-body {
    padding: 0.7rem 0.7rem;
    background: var(--blue-fafbff);
}

.box {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: 0 1px 2px rgba(var(--text-rgb),.03);
    transition: box-shadow .3s var(--ease), border-color .3s;
}

    .box:hover {
        box-shadow: 0 10px 24px -14px rgba(var(--blue-283478-rgb),.3);
        border-color: var(--blue-d5dcf2);
    }

    .box h6 {
        font-weight: 800;
        color: var(--brand-deep);
    }

.form-control, .form-select, .input-group-text {
    border-radius: 6px;
    border-color: var(--line);
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.input-group > .form-control, .input-group > .input-group-text {
    border-radius: 0;
}

.input-group > :first-child {
    border-radius: 4px 0 0 4px;
}

.input-group > :last-child {
    border-radius: 0 4px 4px 0;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.14);
}

.lbl {
    font-weight: 600;
}
/* ---------- tables ---------- */
.table-pos th {
    background: var(--blue-f3f5fd);
    color: var(--blue-44526f);
    font-size: .74rem;
    letter-spacing: .3px;
    padding: .7rem .75rem;
}

.table-pos td {
    padding: .65rem .75rem;
}

.table-pos tbody tr {
    transition: background .2s, box-shadow .2s;
}

    .table-pos tbody tr:hover {
        background: var(--blue-f3f5fd);
        box-shadow: inset 3px 0 0 var(--brand);
    }

.ib {
    border-radius: 10px;
    transition: transform .22s var(--ease), background .2s, color .2s, box-shadow .2s;
}

    .ib:hover {
        transform: translateY(-2px) scale(1.06);
        box-shadow: 0 8px 14px -8px rgba(var(--brand-rgb),.5);
    }

.kot {
    background: linear-gradient(135deg, var(--yellow-fff6e0), var(--yellow-ffecc0));
    border-color: var(--yellow-f6d98f);
    color: var(--orange-8a5a00);
    border-radius: 999px;
}
/* table grid + info cards */
.tbl {
    border-radius: 8px;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}

    .tbl:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
    }



.kv > div {
    border-radius: 12px;
    background: var(--blue-f7f9ff);
    transition: transform .25s var(--ease), border-color .25s;
}

    .kv > div:hover {
        transform: translateY(-2px);
        border-color: rgba(var(--brand-rgb),.3);
    }

.kv b {
    font-family: var(--font-head);
}

.timeline li > i {
    background: linear-gradient(135deg, var(--brand-soft), var(--white));
    box-shadow: 0 0 0 3px var(--white);
}
/* ---------- right: cart ---------- */
.r-head {
    background: linear-gradient(135deg, var(--blue-f3f5ff), var(--white) 70%);
    border-bottom: 1px solid var(--line);
}

    .r-head .ic {
        background: linear-gradient(135deg, var(--brand-2), var(--brand));
        color: var(--white);
        box-shadow: 0 10px 18px -8px rgba(var(--brand-rgb),.6);
    }

    .r-head h5 {
        font-weight: 800;
        color: var(--brand-deep);
    }

.cart-row {
    transition: background .2s, padding-left .25s var(--ease);
}

    .cart-row:hover {
        background: var(--blue-f3f5ff);
        padding-left: 1.2rem;
    }

    .cart-row .n {
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--brand-soft);
        color: var(--brand);
        font-size: .72rem;
        font-weight: 700;
    }

    .cart-row .nm {
        font-weight: 700;
    }
/* .qty-bs .btn {
            border-radius: 0;
        }*/

.qty-bs .btn:hover {
    background: var(--brand);
    color: var(--white);
}

.totals {
    background: var(--blue-fafbff);
}

    .totals div {
        font-size: .92rem;
    }

.grand {
    margin: .1rem 1rem 0;
    padding: .2rem 1.1rem;
    border-radius: 8px;
    background: rgba(var(--blue-0d6efd-rgb),.14);
    /* color: #fff; */
    font-size: 1.15rem;
    font-weight: 800;
}

    .grand span:last-child {
        font-size: 1.6rem;
        font-weight: 800;
        letter-spacing: -.5px;
    }

.kot-badge {
    background: linear-gradient(135deg, var(--orange-ffb83d), var(--accent));
    color: var(--orange-4a2e00);
    box-shadow: 0 0 0 3px var(--white), 0 4px 8px rgba(var(--accent-rgb),.5);
    animation: pop 2.4s ease-in-out infinite;
}

@keyframes pop {
    50% {
        transform: scale(1.15);
    }
}
/* ---------- a11y ---------- */
:focus-visible {
    outline: 2px solid var(--brand-2);
    outline-offset: 2px;
}

@media (max-width: 991px) {
    .list-group .order-card:hover {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}


/*order page*/


/* New classes only. Colors use your vars; the fallback after the comma is used if a var is missing. */
.search-wrap {
    position: relative
}

    .search-wrap i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%)
    }

    .search-wrap input {
        padding-left: 40px;
        height: 38px;
        border-radius: 8px;
    }

.cat-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 4px 2px 8px;
    margin: 14px 0 6px
}

.cat {
    flex: 0 0 84px;
    text-align: center;
    background: var(--card);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 4px 4px;
    color: inherit;
    transition: .2s;
    line-height: 12px;
}

    .cat:hover {
        transform: translateY(-2px);
        color: inherit
    }

    .cat img {
        width: 100%;
        height: 63px;
        border-radius: 12px;
        object-fit: cover;
        display: block;
        margin: 0 auto 4px
    }

    .cat span {
        font-size: .75rem;
        font-weight: 600
    }

    .cat.active {
        background: var(--blue-f6f9ff) !important;
        border-color: var(--blue);
        color: inherit !important
    }

.head-row {
    display: flex;
    justify-content: end;
    align-items: center;
    margin: 8px 0 -26px;
}

.pane-title {
    font-weight: 800;
    margin: 0 0 12px
}

.view-toggle .btn {
    --bs-btn-padding-y: .3rem;
    color: inherit
}

.view-toggle .btn-check:checked + .btn {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white)
}

.item-card {
    height: 100%;
    background: var(--card);
    border: 1px solid var(--blue-e3e9f4);
    border-radius: 12px;
    padding: 8px;
    transition: .2s
}

    .item-card:hover {
        box-shadow: 0 8px 20px rgba(var(--blue-14214d-rgb),.12);
        transform: translateY(-3px)
    }

    .item-card img {
        width: 100%;
        height: 110px;
        object-fit: cover;
        border-radius: 10px;
        background: var(--blue-f1f4fa);
        transition: transform .4s ease;
    }
    /* card par hover karne se image halka zoom ho */
    .item-card:hover img {
        transform: scale(1.03);
    }

    .item-card .nm {
        font-weight: 700;
        font-size: .9rem;
        margin: 4px 7px 3px;
    }

    .item-card .form-select, .list-row .form-select {
        font-size: .75rem
    }

    .item-card .form-select {
        margin-bottom: 8px;
        margin: 0 5px 7px;
        width: 93%;
    }

    .item-card .price {
        margin-left: 6px
    }

    .item-card .add-circle {
        margin-right: 3px
    }

.price {
    font-weight: 800;
    font-size: .85rem
}

    .price small {
        font-weight: 600;
        opacity: .6
    }

.add-circle {
    width: 25px;
    height: 24px;
    border-radius: 100%;
    border: 0;
    background: var(--blue);
    color: var(--white);
    transition: .15s;
    font-weight: 900;
}

.add-btn {
    background: var(--blue);
    color: var(--white);
    font-weight: 600;
    border: 0;
    border-radius: 8px;
    padding: .45rem 0;
    transition: .15s
}

    .add-circle:hover, .add-btn:hover {
        background: var(--navy)
    }

    .add-circle:active, .add-btn:active {
        transform: scale(.9)
    }

.l-view {
    display: none
}

.list-head, .list-row {
    display: grid;
    grid-template-columns: 2.4fr 1fr 1.1fr 1fr;
    gap: 10px;
    align-items: center
}

.list-head {
    background: var(--blue-f3f6fc);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: .78rem;
    font-weight: 700;
    opacity: .8
}

.list-row {
    padding: 10px 12px;
    border-bottom: 1px solid var(--blue-e3e9f4)
}

    .list-row .who {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700
    }

    .list-row img {
        width: 56px;
        height: 44px;
        object-fit: cover;
        border-radius: 8px
    }

/* Grid/List toggle (pure CSS). List view exists for Burgers only for now. */
.menu-box:has(#vList:checked) .tab-pane:has(.l-view) .g-view {
    display: none
}

.menu-box:has(#vList:checked) .l-view {
    display: block
}

@media(max-width:575px) {
    .list-head, .list-row {
        grid-template-columns: 2fr 1fr 1fr
    }

        .list-head :nth-child(3), .list-row :nth-child(3) {
            display: none
        }
}

.cat-slider {
    position: relative;
    padding: 7px 40px;
    margin: 6px 0;
    background: var(--brand-soft);
    border-radius: 8px;
    --n: 5;
    --gap: 5px
}

.cat-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0px 2px 0px
}

    .cat-track::-webkit-scrollbar {
        display: none
    }

    .cat-track .cat {
        flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
        min-width: 0;
        scroll-snap-align: start
    }

.cat-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--blue-e3e9f4);
    background: var(--card);
    color: inherit;
    transition: .2s;
    z-index: 2
}

    .cat-arrow:hover {
        background: var(--blue);
        border-color: var(--blue);
        color: var(--white)
    }

.cat-prev {
    left: 4px
}

.cat-next {
    right: 4px
}

@media(min-width:576px) {
    .cat-slider {
        --n: 6
    }
}

@media(max-width:575px) {
    .cat-slider {
        padding: 10px 36px
    }

    .cat img {
        width: 34px;
        height: 34px
    }

    .cat span {
        font-size: .65rem
    }
}





/* New classes only (uses your .box, .st, .st-open). Fallback colors apply if your vars are missing. */
.oi-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

.oi-head {
    h1, h2, h3, h4, h5, h6 {
        font-weight: 700
    }
}

.oi-field {
    display: flex;
    align-items: flex-start;
    gap: 12px
}

.oi-icon {
    flex: 0 0 37px;
    font-size: 1.1rem;
    color: var(--blue);
    margin-top: 19px;
    background: var(--brand-soft);
    text-align: center;
    height: 38px;
    border-radius: 8px;
    line-height: 38px;
}

.oi-body {
    flex: 1;
    min-width: 0
}

    .oi-body .form-control, .oi-body .form-select, .oi-body .input-group-text {
        font-size: 0.9rem;
        font-weight: 600;
    }

.oi-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: 2px;
    opacity: .6;
    margin-left: 12px;
}

.oi-guests {
    max-width: 150px
}

    .oi-guests .form-control {
        background: var(--card)
    }

.input-group-lg.qty-bs {
    width: 110px;
    flex-wrap: nowrap;
    height: 38px;
}

.oi-pay .btn {
    background: var(--blue-eef2f9);
    border: 0;
    font-weight: 600
}

.oi-pay .btn-check:checked + .btn {
    background: var(--blue);
    color: var(--white)
}

.oi-count {
    text-align: right;
    font-size: .72rem;
    opacity: .6;
    margin-top: 2px
}

.oi-extra {
    background: var(--blue-f3f6fc);
    border-radius: 10px;
    padding: 12px;
    margin-top: 16px
}

.oi-extra-title {
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: 10px
}

.oi-extra .form-control[readonly] {
    background: var(--blue-e6ecf7)
}

.oi-save {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    border: 0;
    border-radius: 10px;
    background: var(--blue);
    color: var(--white);
    font-weight: 600;
    transition: .2s
}

    .oi-save:hover {
        background: var(--navy)
    }

    .oi-save:active {
        transform: scale(.98)
    }

@media(max-width:767px) {
    .oi-icon {
        margin-top: 28px
    }
}

.dt-input {
    height: 42px;
    border: 1px solid var(--blue-dee2e6);
    border-radius: 8px;
    background-color: var(--card);
    color: var(--blue-343a40);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    transition: all .2s ease;
}

    .dt-input:hover {
        border-color: var(--blue-adb5bd);
    }

    .dt-input:focus {
        border-color: var(--blue-86b7fe);
        box-shadow: 0 0 0 .2rem rgba(var(--blue-0d6efd-rgb),.12);
        outline: 0;
    }

    /* Calendar icon area */
    .dt-input::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: .65;
        padding: 4px;
    }

        .dt-input::-webkit-calendar-picker-indicator:hover {
            opacity: 1;
        }

/* ---- input par calendar icon (right side) ---- */
.js-datetime.form-control,
.js-date.form-control {
    background-color: var(--card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231d4ed8'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px;
    cursor: pointer
}

.dt-alt {
    background-color: var(--card) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231d4ed8'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 38px !important;
    cursor: pointer
}

/* ---- chhota calendar ---- */
.flatpickr-calendar {
    width: 256px;
    font-size: 12px
}

.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer {
    width: 256px;
    min-width: 256px;
    max-width: 256px
}

.flatpickr-day {
    max-width: 34px;
    height: 34px;
    line-height: 34px
}

.flatpickr-weekday {
    font-size: 11px
}

.flatpickr-months .flatpickr-month {
    height: 36px
}

.flatpickr-current-month {
    font-size: 105%;
    padding-top: 6px
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 8px 10px
}

.flatpickr-time,
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    height: 36px;
    max-height: 36px;
    line-height: 36px;
    font-size: 13px
}

.other-order-btn {
    background: var(--blue-e9f2fe);
    align-items: center;
    display: flex;
    max-height: 35px;
    border: 1px solid var(--blue-d8e3f1) !important;
}

    .other-order-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--gray-dfdfdf) 0px 10px 20px -8px;
        border-color: transparent;
    }

.cashier-btn {
    align-items: center;
    display: flex;
    max-height: 35px;
    border: 1px solid var(--gray-e2e2e2) !important;
}

    .cashier-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--gray-dfdfdf) 0px 10px 20px -8px;
        border-color: transparent;
    }

.offcanvas-header .icon {
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    box-shadow: 0 8px 16px -8px rgba(var(--brand-rgb),.7);
    color: var(--white);
    width: 35px;
    height: 32px;
    text-align: center;
    border-radius: 11px;
    margin-right: 10px;
}

.offcanvas-header {
    h1, h2, h3, h4, h5, h6 {
        font-weight: 700
    }
}

.offcanvas-header {
    padding: 10px 16px;
    justify-content: space-between;
}

.menu-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--blue-0f172a);
}

    .menu-title i {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        background: var(--blue-eaf0ff);
        color: var(--blue-2563eb);
        border-radius: 8px;
        font-size: 15px;
    }

.menu-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--blue-64748b);
    background: var(--blue-f1f5f9);
    padding: 2px 8px;
    border-radius: 999px;
}

.edit-row:hover {
    background: transparent !important;
}

.edit-panel {
    position: relative;
    margin: 0;
    padding: 16px 18px;
    background: var(--blue-eaf1ff);
    border: 1px solid var(--blue-e6edfc);
    border-radius: 12px;
}

.table-pos .edit-row > td:has(> .collapse:not(.show)) {
    padding: 0 !important;
    border: 0 !important;
}

.edit-collapse {
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: transparent;
    color: var(--blue-2563eb);
    font-size: 16px;
}

.ep-col {
    padding: 0 18px;
    border-right: 1px solid var(--blue-cfdcf7);
}

    .ep-col:first-child {
        padding-left: 0;
    }

.ep-last {
    border-right: 0;
    padding-right: 0;
}

.ep-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-0f172a);
    margin-bottom: 10px;
}

.ep-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    cursor: pointer;
}

    .ep-opt .form-check-input {
        margin: 0;
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

.ep-name {
    flex: 1;
}

.ep-price {
    color: var(--blue-475569);
    font-weight: 500;
}

.ep-note {
    position: relative;
}

    .ep-note .form-control {
        font-size: 13px;
        border: 1px solid var(--blue-cfdcf7);
        border-radius: 8px;
        resize: none;
        box-shadow: none;
        padding-bottom: 22px;
    }

        .ep-note .form-control:focus {
            border-color: var(--blue-2563eb);
            box-shadow: 0 0 0 3px rgba(var(--blue-2563eb-rgb),.15);
        }

.ep-count {
    position: absolute;
    right: 10px;
    bottom: 6px;
    color: var(--blue-94a3b8);
    font-size: 11px;
}

.ep-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--blue-cfdcf7);
}

/* quantity (Bootstrap input-group) */
.ep-qty {
    width: 140px;
    flex-wrap: nowrap;
}

    .ep-qty .btn {
        width: 38px;
        background: var(--card);
        border: 1px solid var(--blue-cfdcf7);
        color: var(--blue-2563eb);
        font-size: 17px;
        padding: 0;
    }

        .ep-qty .btn:hover {
            background: var(--blue-2563eb);
            color: var(--white);
            border-color: var(--blue-2563eb);
        }

    .ep-qty .form-control {
        border: 1px solid var(--blue-cfdcf7);
        border-left: 0;
        border-right: 0;
        font-weight: 600;
        box-shadow: none;
        background: var(--card);
    }

.btn-save-item {
    background: var(--blue-1d4ed8);
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
    padding: 9px 26px;
    border-radius: 9px;
    border: 0;
    box-shadow: 0 4px 12px rgba(var(--blue-1d4ed8-rgb),.28);
    transition: .2s;
}

    .btn-save-item:hover {
        background: var(--blue-1e40af);
        color: var(--white);
        transform: translateY(-1px);
    }

@media (max-width:767.98px) {
    .ep-col {
        padding: 0 0 12px;
        border-right: 0;
        border-bottom: 1px solid var(--blue-cfdcf7);
        margin-bottom: 12px;
    }

    .ep-last {
        border-bottom: 0;
    }

    .ep-foot {
        flex-direction: column;
        align-items: stretch;
    }
}




.bill-head {
    padding: 16px 18px 12px;
}

    .bill-head h6 {
        font-size: 20px;
        font-weight: 700;
        color: var(--blue-0f172a);
    }

    .bill-head small {
        color: var(--blue-64748b);
        font-size: 12.5px;
    }

/* table */
.bill-table thead th {
    background: var(--blue-eef3ff);
    color: var(--blue-334155);
    font-size: 12px;
    font-weight: 600;
    padding: 10px 14px;
    border-bottom: 1px solid var(--blue-dbe6fb);
    white-space: nowrap;
}

.bill-table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--blue-eef2f9);
    vertical-align: middle;
}

.bill-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .bill-item b {
        display: block;
        font-weight: 600;
    }

    .bill-item small {
        display: block;
        color: var(--blue-64748b);
        font-size: 11.5px;
    }

.bill-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--blue-e3e8f2);
    flex: none;
}

/* qty */
.bill-qty {
    width: 104px;
    flex-wrap: nowrap;
}

    .bill-qty .btn {
        width: 30px;
        padding: 0;
        background: var(--card);
        border: 1px solid var(--blue-cfdcf7);
        color: var(--blue-2563eb);
        font-size: 15px;
    }

        .bill-qty .btn:hover {
            background: var(--blue-2563eb);
            color: var(--white);
            border-color: var(--blue-2563eb);
        }

    .bill-qty .form-control {
        border: 1px solid var(--blue-cfdcf7);
        border-left: 0;
        border-right: 0;
        font-weight: 600;
        font-size: 13px;
        padding: 3px 0;
        box-shadow: none;
    }

/* bottom area */
.bill-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 16px 18px;
}

.bill-foot-left {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.disc-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--blue-f4f7ff);
    border: 1px solid var(--blue-dbe6fb);
    border-radius: 10px;
    font-size: 13px;
    color: var(--blue-334155);
}

    .disc-box > i {
        color: var(--blue-2563eb);
        font-size: 16px;
    }

    .disc-box .form-control {
        width: 90px;
        height: 34px;
        font-size: 13px;
        box-shadow: none;
        border: 1px solid var(--blue-cfdcf7);
    }

.disc-type .btn {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    background: var(--card);
    color: var(--blue-334155);
    border: 1px solid var(--blue-cfdcf7);
}

.disc-type .btn-check:checked + .btn {
    background: var(--blue-2563eb);
    border-color: var(--blue-2563eb);
    color: var(--white);
}

.btn-print {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blue-f4f7ff);
    border: 1px solid var(--blue-cfdcf7);
    color: var(--blue-1e3a8a);
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 18px;
    border-radius: 10px;
    transition: .2s;
}

    .btn-print:hover {
        background: var(--blue-2563eb);
        color: var(--white);
        border-color: var(--blue-2563eb);
    }

/* totals (aap ke .totals ke upar) */
.bill-totals {
    flex: 1 1 260px;
    padding-left: 18px;
    border-left: 1px solid var(--blue-e3e8f2);
}

    .bill-totals > div {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        font-size: 13px;
    }

        .bill-totals > div span {
            color: var(--blue-475569);
        }

        .bill-totals > div b {
            color: var(--blue-0f172a);
        }

    .bill-totals .bill-grand {
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--blue-e3e8f2);
    }

        .bill-totals .bill-grand span {
            font-size: 18px;
            font-weight: 700;
            color: var(--blue-0f172a);
        }

        .bill-totals .bill-grand b {
            font-size: 20px;
            font-weight: 800;
            color: var(--blue-1d4ed8);
        }

/* payment method */
.pay-wrap {
    margin: 0 18px 18px;
    padding: 14px;
    background: var(--blue-f4f7ff);
    border: 1px solid var(--blue-dbe6fb);
    border-radius: 12px;
}

.pay-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-0f172a);
    margin-bottom: 10px;
}

.pay-methods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.pay-opt {
    position: relative; /* zaroori: input label ke andar hi rahe */
    display: block;
    margin: 0;
    cursor: pointer;
}

    .pay-opt input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 1;
    }

.pay-card {
    pointer-events: none;
}

.pay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 66px;
    background: var(--card);
    border: 1px solid var(--blue-cfdcf7);
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--blue-1e3a8a);
    text-align: center;
    transition: .2s;
}

    .pay-card i {
        font-size: 20px;
        color: var(--blue-2563eb);
    }

.pay-opt:hover .pay-card {
    border-color: var(--blue-2563eb);
    transform: translateY(-1px);
}

.pay-opt input:checked + .pay-card {
    background: var(--blue-eaf1ff);
    border-color: var(--blue-2563eb);
    box-shadow: 0 0 0 2px rgba(var(--blue-2563eb-rgb),.18);
}

.pay-opt input:focus-visible + .pay-card {
    outline: 2px solid var(--blue-2563eb);
    outline-offset: 2px;
}

@media (max-width:575.98px) {
    .pay-methods {
        grid-template-columns: repeat(2, 1fr);
    }

    .bill-totals {
        border-left: 0;
        padding-left: 0;
    }
}


/* ================= ACTIVITY LOG ================= */

/* ---------- card ---------- */
.act-box {
    background: linear-gradient(180deg,var(--blue-f7faff) 0%,var(--white) 160px);
    border: 1px solid var(--blue-dbe6fb);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(var(--blue-1e40af-rgb),.06);
}

/* ---------- header ---------- */
.act-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

    .act-head h6 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 20px;
        font-weight: 700;
        color: var(--blue-0f172a);
        letter-spacing: -.2px;
    }

    .act-head small {
        color: var(--blue-64748b);
        font-size: 12.5px;
    }

.act-count {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--blue-1d4ed8);
    background: var(--blue-e3ecff);
    padding: 3px 10px;
    border-radius: 999px;
}

.act-date {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--card);
    border: 1px solid var(--blue-cfdcf7);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-1e3a8a);
    box-shadow: 0 2px 6px rgba(var(--blue-0f172a-rgb),.05);
    transition: .2s;
}

    .act-date i {
        color: var(--blue-2563eb);
    }

    .act-date:hover {
        border-color: var(--blue-2563eb);
        box-shadow: 0 2px 8px rgba(var(--blue-2563eb-rgb),.12);
    }

/* ---------- filter pills ---------- */
.act-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.act-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 8px;
    background: var(--card);
    border: 1px solid var(--blue-e1e9f8);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(var(--blue-0f172a-rgb),.04);
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-1e3a8a);
    white-space: nowrap;
    cursor: pointer;
    transition: .2s;
}

    .act-pill i {
        font-size: 15px;
        color: var(--blue-2563eb);
        transition: .2s;
    }

    .act-pill:hover {
        transform: translateY(-1px);
        border-color: var(--blue-2563eb);
        box-shadow: 0 4px 12px rgba(var(--blue-2563eb-rgb),.14);
    }

.btn-check:checked + .act-pill {
    background: linear-gradient(135deg,var(--blue-2563eb),var(--blue-1d4ed8));
    border-color: var(--blue-1d4ed8);
    color: var(--white);
    box-shadow: 0 6px 16px rgba(var(--blue-1d4ed8-rgb),.32);
}

    .btn-check:checked + .act-pill i {
        color: var(--white);
    }

/* ---------- search ---------- */
.act-search {
    position: relative;
    margin-bottom: 16px;
}

    .act-search > i {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--blue-64748b);
        pointer-events: none;
    }

    .act-search .form-control {
        height: 40px;
        padding-left: 38px;
        background: var(--card);
        font-size: 13px;
        border: 1px solid var(--blue-dbe3f3);
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(var(--blue-0f172a-rgb),.04);
        transition: .2s;
    }

        .act-search .form-control:focus {
            border-color: var(--blue-2563eb);
            box-shadow: 0 0 0 3px rgba(var(--blue-2563eb-rgb),.15);
        }

/* ---------- timeline ---------- */
.timeline.act-log {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 22px;
}

    .timeline.act-log::before { /* vertical line */
        content: "";
        position: absolute;
        left: 5px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: linear-gradient(180deg,var(--blue-2563eb) 0%,var(--blue-cfdcf7) 35%,var(--blue-e6edfb) 100%);
        border-radius: 2px;
    }

    /* har row ek soft card */
    .timeline.act-log > li {
        position: relative;
        display: grid;
        grid-template-columns: 54px 48px 1fr auto;
        align-items: start;
        gap: 12px;
        margin: 0 0 10px;
        padding: 12px 14px 12px 12px;
        background: var(--card);
        border: 1px solid var(--blue-e8eefb);
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(var(--blue-0f172a-rgb),.04);
        transition: transform .2s, box-shadow .2s, border-color .2s;
    }

        .timeline.act-log > li:hover {
            transform: translateX(3px);
            border-color: var(--blue-bcd0f7);
            box-shadow: 0 8px 22px rgba(var(--blue-2563eb-rgb),.12);
        }

        /* dot */
        .timeline.act-log > li::before {
            content: "";
            position: absolute;
            left: -23px;
            top: 50%;
            margin-top: -7px;
            width: 14px;
            height: 14px;
            background: var(--card);
            border: 3px solid var(--blue-2563eb);
            border-radius: 50%;
            box-sizing: border-box;
            box-shadow: 0 0 0 4px var(--blue-eaf1ff);
        }
        /* latest event ka dot dhadakta hua */
        .timeline.act-log > li.is-latest::before {
            background: var(--blue-2563eb);
            animation: actPulse 1.8s infinite;
        }

@keyframes actPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--blue-2563eb-rgb),.45);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(var(--blue-2563eb-rgb),0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--blue-2563eb-rgb),0);
    }
}

/* time pill */
.act-time {
    align-self: start;
    margin-top: 10px;
    padding: 5px 0;
    text-align: center;
    background: linear-gradient(180deg,var(--blue-f1f5ff),var(--blue-e6eeff));
    border: 1px solid var(--blue-d6e2fb);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--blue-1e3a8a);
    font-variant-numeric: tabular-nums;
}

/* gradient icon tiles */
.act-ico {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 21px;
    box-shadow: inset 0 0 0 1px rgba(var(--white-rgb),.7), 0 4px 10px rgba(var(--blue-0f172a-rgb),.08);
    transition: transform .25s;
}

.timeline.act-log > li:hover .act-ico {
    transform: scale(1.08) rotate(-4deg);
}

.timeline.act-log .act-ico i { /* purane li > i rule se bachne ke liye */
    position: static;
    width: auto;
    height: auto;
    background: none;
    border: 0;
    color: inherit;
    font-size: inherit;
}

.ico-blue {
    background: linear-gradient(135deg,var(--blue-e8f0ff),var(--blue-cfe0ff));
    color: var(--blue-2563eb);
}

.ico-purple {
    background: linear-gradient(135deg,var(--indigo-f3edff),var(--indigo-e0d4ff));
    color: var(--indigo-7c3aed);
}

.ico-green {
    background: linear-gradient(135deg,var(--green-e6f8ee),var(--green-c9f0da));
    color: var(--green-16a34a);
}

.ico-orange {
    background: linear-gradient(135deg,var(--orange-fff0e4),var(--orange-ffd9bf));
    color: var(--orange-ea580c);
}

.ico-amber {
    background: linear-gradient(135deg,var(--yellow-fff5da),var(--yellow-ffe4a3));
    color: var(--orange-d97706);
}

/* text */
.act-body b {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--blue-0f172a);
}

.act-body small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--blue-64748b);
}

/* user chip + avatar */
.act-user {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 4px 12px 4px 4px;
    background: var(--blue-f4f7ff);
    border: 1px solid var(--blue-e1e9f8);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--blue-1e3a8a);
    white-space: nowrap;
}

.act-av {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,var(--blue-3b82f6),var(--blue-1d4ed8));
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
}

/* ---------- mobile ---------- */
@media (max-width:575.98px) {
    .act-filters {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline.act-log > li {
        grid-template-columns: 54px 48px 1fr;
    }

        .timeline.act-log > li:hover {
            transform: none;
        }

    .act-user {
        grid-column: 3;
        justify-self: start;
        margin-top: 0;
    }
}













/* =========================================================
   Futex POS – Offcanvas drawers  (sirf NEW classes)
   style.css ke BAAD load karo. Aapke :root vars use hue hain.
   ========================================================= */

/* ---------- drawer shell ---------- */
.offcanvas.oc {
    --bs-offcanvas-width: 440px;
    --bs-offcanvas-bg: var(--blue-f6f8ff);
    --bs-offcanvas-border-width: 0;
    --bs-offcanvas-box-shadow: -24px 0 60px -24px rgba(var(--brand-deep-rgb),.45);
    max-width: 100vw;
    font-size: .9rem;
    color: var(--text);
    background-image: radial-gradient(420px 220px at 100% 0,rgba(var(--brand-2-rgb),.10),transparent 70%)
}

    .offcanvas.oc.oc-lg {
        --bs-offcanvas-width: 500px
    }

.offcanvas-backdrop {
    --bs-backdrop-bg: var(--text);
    --bs-backdrop-opacity: .45
}

    .offcanvas-backdrop.show {
        backdrop-filter: blur(3px)
    }

.oc .offcanvas-header {
    position: relative;
    background: rgba(var(--white-rgb),.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line)
}

    .oc .offcanvas-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        background: linear-gradient(90deg,var(--brand-2),var(--brand) 40%,transparent 85%)
    }

.oc .offcanvas-title {
    display: flex;
    align-items: center;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--brand-deep);
    letter-spacing: -.2px;
    line-height: 22px
}

.oc .offcanvas-header .icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
    border-radius: 12px
}

    .oc .offcanvas-header .icon.is-red {
        background: linear-gradient(135deg,var(--red-f46a63),var(--red));
        box-shadow: 0 8px 16px -8px rgba(var(--red-rgb),.7)
    }

    .oc .offcanvas-header .icon.is-green {
        background: linear-gradient(135deg,var(--green-22c37a),var(--green-0e9a56));
        box-shadow: 0 8px 16px -8px rgba(var(--green-0e9a56-rgb),.7)
    }

.oc .btn-close {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    background-color: var(--blue-f1f4fc);
    background-size: 10px;
    opacity: 1;
    transition: transform .3s var(--ease),background-color .2s
}

    .oc .btn-close:hover {
        background-color: var(--brand-soft);
        transform: rotate(90deg)
    }

.oc .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px
}

.oc.show .offcanvas-body > * {
    animation: ocRise .45s var(--ease) both
}

.oc.show .offcanvas-body > :nth-child(2) {
    animation-delay: .05s
}

.oc.show .offcanvas-body > :nth-child(3) {
    animation-delay: .1s
}

.oc.show .offcanvas-body > :nth-child(4) {
    animation-delay: .15s
}

.oc.show .offcanvas-body > :nth-child(n+5) {
    animation-delay: .2s
}

@keyframes ocRise {
    from {
        opacity: 0;
        transform: translateY(10px)
    }
}

.oc-stack > * + * {
    margin-top: 12px
}

/* sticky footer */
.oc-foot {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(var(--white-rgb),.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 24px -18px rgba(var(--blue-283478-rgb),.35)
}

    .oc-foot.is-stack {
        grid-template-columns: 1fr
    }

    .oc-foot .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 44px;
        font-size: .95rem
    }

.btn-danger-solid {
    position: relative;
    border: 0;
    color: var(--white);
    background: linear-gradient(135deg,var(--red-f46a63),var(--red) 60%,var(--red-c4241c));
    box-shadow: 0 8px 18px -8px rgba(var(--red-rgb),.7),inset 0 1px 0 rgba(var(--white-rgb),.28)
}

    .btn-danger-solid:hover {
        color: var(--white);
        transform: translateY(-2px);
        box-shadow: 0 14px 24px -10px rgba(var(--red-rgb),.75)
    }

/* ---------- form bits ---------- */
.oc .form-control, .oc .form-select {
    border-radius: 10px;
    border: 1px solid var(--line);
    background-color: var(--card);
    font-weight: 600
}

.oc textarea.form-control {
    height: auto
}

.oc .input-group > .form-control, .oc .input-group > .input-group-text, .oc .input-group > .btn {
    border-radius: 0
}

.oc .input-group > :first-child {
    border-radius: 6px 0 0 6px
}

.oc .input-group > :last-child {
    border-radius: 0 6px 6px 0
}

.oc .input-group-text {
    background: var(--brand-soft);
    border-color: var(--line);
    color: var(--brand-deep);
    font-weight: 800
}

.oc .form-check-input {
    cursor: pointer;
    border: 1.5px solid var(--blue-c3cdea)
}

    .oc .form-check-input:checked {
        background-color: var(--brand);
        border-color: var(--brand)
    }

    .oc .form-check-input:focus {
        box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.15)
    }

    .oc .form-check-input[type=checkbox] {
        flex: none;
        width: 1.2rem;
        height: 1.2rem;
        margin: 0;
        border-radius: 6px
    }

.oc-label {
    display: block;
    margin: 0 0 6px 2px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted)
}

    .oc-label small {
        font-weight: 600;
        opacity: .7
    }

.oc-amount .form-control {
    text-align: right;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.15rem
}

.oc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.oc .chip {
    background: var(--card);
    border: 1px solid var(--line);
    padding: .4rem .95rem
}

.oc .btn-check:checked + .chip {
    border-color: transparent
}

.oc .t-green {
    color: var(--green) !important
}

.oc .t-red {
    color: var(--red) !important
}

/* ---------- cards ---------- */
.oc-card {
    background: var(--card);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(var(--text-rgb),.03)
}

.oc-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.05rem;
    transition: transform .3s var(--ease)
}

    .oc-ico.is-green {
        background: var(--green-e3f7ec);
        color: var(--s-ready-t)
    }

    .oc-ico.is-red {
        background: var(--red-ffe8ea);
        color: var(--red-d4303a)
    }

    .oc-ico.is-amber {
        background: var(--orange-fff1d9);
        color: var(--orange-c27300)
    }

    .oc-ico.is-purple {
        background: var(--indigo-efeaff);
        color: var(--indigo-6d4ce0)
    }

    .oc-ico.is-teal {
        background: var(--teal-dff6f8);
        color: var(--teal-0b8691)
    }

.st-unpaid {
    background: var(--red-ffe8ea);
    color: var(--red-d4303a)
}

.st-occ {
    background: var(--orange-ffe9d6);
    color: var(--orange-c2570c)
}

/* order hero */
.oc-order {
    padding: 0;
    /*overflow: hidden;*/
    border-color: var(--blue-dfe5f8);
    background: linear-gradient(135deg,var(--blue-f1f4ff),var(--white) 65%)
}

.oc-order-main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px
}

.oc-thumb {
    flex: 0 0 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg,var(--blue-e9edff),var(--white));
    box-shadow: inset 0 0 0 1px var(--blue-e0e6fa);
    overflow: hidden
}

    .oc-thumb img {
        width: 78px;
        height: 78px;
        object-fit: contain;
        filter: drop-shadow(0 8px 8px rgba(var(--blue-283478-rgb),.22))
    }

    .oc-thumb.is-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 14px;
        filter: none
    }

.oc-order-info {
    flex: 1;
    min-width: 0
}

.oc-order-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px
}

    .oc-order-top h6 {
        margin: 0;
        font-family: var(--font-head);
        font-weight: 800;
        font-size: 1.12rem;
        color: var(--brand-deep)
    }

.oc-no {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .8rem
}

.oc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
    font-size: .82rem
}

    .oc-meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--muted)
    }

        .oc-meta span i {
            color: var(--brand)
        }

    .oc-meta b {
        font-weight: 700
    }

.oc-lines {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin: 0;
    padding: 9px 14px;
    list-style: none;
    border-top: 1px dashed var(--blue-d8dff5);
    background: rgba(var(--white-rgb),.7)
}

    .oc-lines li {
        display: flex;
        flex-direction: column;
        padding-left: 8px;
        border-left: 2px solid var(--blue-d9e1fb)
    }

    .oc-lines span {
        font-size: .72rem;
        color: var(--muted)
    }

    .oc-lines b {
        font-size: .84rem
    }

.oc-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: linear-gradient(90deg,var(--green-e6f8ee),var(--green-f4fcf8));
    border-top: 1px solid var(--green-d0efdf);
    border-radius: 0 0 14px 14px;
}

    .oc-total span {
        font-weight: 600;
        color: var(--green-2d5a44)
    }

    .oc-total b {
        font-family: var(--font-head);
        font-weight: 800;
        font-size: 1.3rem;
        letter-spacing: -.4px;
        color: var(--green)
    }

/* segmented choice (radio label OR tab button) */
.oc-seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px
}

.oc-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 8px;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    font-size: .85rem;
    color: var(--blue-44526f);
    text-align: center;
    cursor: pointer;
    transition: transform .25s var(--ease),border-color .2s,box-shadow .25s,background .2s,color .2s
}

    .oc-opt i {
        font-size: 1.35rem;
        color: var(--brand-2)
    }

    .oc-opt small {
        font-weight: 600;
        font-size: .74rem;
        color: var(--muted)
    }

    .oc-opt.is-sm {
        flex-direction: row;
        gap: 6px;
        padding: 9px 8px
    }

        .oc-opt.is-sm i {
            font-size: 1rem
        }

    .oc-opt:hover {
        transform: translateY(-2px);
        border-color: rgba(var(--brand-rgb),.45);
        color: var(--brand);
        box-shadow: 0 10px 18px -12px rgba(var(--brand-rgb),.5)
    }

    .oc-opt.active, .btn-check:checked + .oc-opt {
        background: linear-gradient(180deg,var(--blue-f3f5ff),var(--blue-e8ecff));
        border-color: var(--brand);
        color: var(--brand-deep);
        box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12)
    }

        .oc-opt.has-tick.active::after, .btn-check:checked + .oc-opt.has-tick::after {
            content: "\f26a";
            font-family: "bootstrap-icons";
            position: absolute;
            top: 5px;
            right: 7px;
            font-size: .8rem;
            color: var(--brand)
        }

/* calc / due */
.oc-calc {
    padding: 10px 14px;
    border: 1px solid var(--blue-dfe6fb);
    border-radius: 14px;
    background: linear-gradient(180deg,var(--blue-f3f6ff),var(--white))
}

.oc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: .86rem;
    color: var(--blue-44526f)
}

    .oc-row b {
        color: var(--text)
    }

    .oc-row.is-big {
        margin-top: 6px;
        padding-top: 9px;
        border-top: 1px dashed var(--blue-cdd8f5)
    }

        .oc-row.is-big span {
            font-weight: 700;
            color: var(--text)
        }

        .oc-row.is-big b {
            font-family: var(--font-head);
            font-weight: 800;
            font-size: 1.25rem
        }

.oc-due {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--blue-d9e1fb);
    border-radius: 14px;
    background: linear-gradient(90deg,var(--blue-e8edff),var(--blue-f5f7ff));
    font-weight: 700
}

    .oc-due b {
        font-family: var(--font-head);
        font-weight: 800;
        font-size: 1.35rem;
        color: var(--brand-deep)
    }

    .oc-due.is-green b {
        color: var(--green)
    }

/* switch card */
.oc-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .2s,box-shadow .25s
}

    .oc-switch:hover {
        border-color: rgba(var(--brand-rgb),.4);
        box-shadow: 0 10px 20px -16px rgba(var(--blue-283478-rgb),.5)
    }

        .oc-switch:hover .oc-ico {
            transform: scale(1.08) rotate(-4deg)
        }

    .oc-switch > div {
        flex: 1;
        min-width: 0
    }

    .oc-switch b {
        display: block;
        font-size: .86rem
    }

    .oc-switch small {
        color: var(--muted);
        font-size: .74rem
    }

    .oc-switch .form-check {
        margin: 0;
        padding: 0;
        min-height: 0
    }


.oc .oc-switch .form-check-input[type=checkbox] {
    float: none;
    width: 2.6em;
    height: 1.4em;
    margin: 0;
    border-radius: 2em
}

/* stepper (Bootstrap input-group) */
.oc .oc-qty {
    width: 126px;
    flex-wrap: nowrap
}

    .oc .oc-qty .btn {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        padding: 0;
        background: var(--card);
        border: 1px solid var(--line);
        color: var(--brand);
        box-shadow: none
    }

        .oc .oc-qty .btn:hover {
            background: var(--brand);
            border-color: var(--brand);
            color: var(--white)
        }

    .oc .oc-qty .form-control {
        height: 38px;
        padding: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        text-align: center;
        font-family: var(--font-head);
        font-weight: 800
    }

    .oc .oc-qty > .btn:first-child {
        border-radius: 10px 0 0 10px
    }

    .oc .oc-qty > .btn:last-child {
        border-radius: 0 10px 10px 0
    }

    .oc .oc-qty.is-sm {
        width: 98px
    }

        .oc .oc-qty.is-sm .btn, .oc .oc-qty.is-sm .form-control {
            height: 32px;
            width: 30px
        }

        .oc .oc-qty.is-sm .form-control {
            width: auto
        }

/* order actions */
.oc-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 14px
}

    .oc-times div {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .oc-times small {
        display: block;
        font-size: .72rem;
        color: var(--muted)
    }

    .oc-times b {
        font-family: var(--font-head);
        font-size: 1rem
    }

.oc-grid3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

.oc-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    font: inherit;
    font-weight: 700;
    font-size: .8rem;
    color: var(--text);
    text-align: center;
    transition: transform .25s var(--ease),border-color .2s,box-shadow .25s
}

    .oc-tile .oc-ico {
        width: 40px;
        height: 40px;
        font-size: 1.15rem
    }

    .oc-tile:hover {
        transform: translateY(-3px);
        border-color: rgba(var(--brand-rgb),.4);
        box-shadow: var(--shadow-hover)
    }

        .oc-tile:hover .oc-ico {
            transform: scale(1.1) rotate(-5deg)
        }

/* item information */
.oc-item-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px
}

    .oc-item-title h6 {
        margin: 0;
        font-family: var(--font-head);
        font-weight: 800;
        color: var(--brand-deep)
    }

    .oc-item-title small {
        color: var(--muted)
    }

.oc-price {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--brand-deep)
}

.oc-addon {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 6px;
    border-bottom: 1px solid var(--blue-eef1fa);
    font-weight: 600;
    cursor: pointer;
    transition: background .2s,padding-left .25s var(--ease)
}

    .oc-addon:last-child {
        border-bottom: 0
    }

    .oc-addon:hover {
        background: var(--blue-f5f7ff);
        padding-left: 12px
    }

    .oc-addon span {
        flex: 1
    }

    .oc-addon b {
        color: var(--blue-44526f);
        font-size: .82rem
    }

.oc-qtyrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

    .oc-qtyrow .oc-label {
        margin: 0
    }

    .oc-qtyrow div:last-child {
        text-align: right
    }

    .oc-qtyrow small {
        display: block;
        color: var(--muted);
        font-size: .72rem
    }

    .oc-qtyrow b {
        font-family: var(--font-head);
        font-weight: 800;
        font-size: 1.2rem;
        color: var(--green)
    }

/* close order */
.oc-paid {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--green-c8efd9);
    border-radius: 14px;
    background: linear-gradient(135deg,var(--green-e6f8ee),var(--green-f4fcf8))
}

.oc-paid-ic {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--green-22c37a),var(--green-0e9a56));
    color: var(--white);
    font-size: 1.5rem;
    box-shadow: 0 10px 18px -8px rgba(var(--green-0e9a56-rgb),.7)
}

.oc-paid-t {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: .6px;
    color: var(--green-0e8a4e)
}

.oc-paid-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-left: auto;
    padding-left: 14px;
    border-left: 1px solid var(--green-bfe8d0)
}

    .oc-paid-cols span {
        display: block;
        font-size: .72rem;
        color: var(--green-4b7a62)
    }

    .oc-paid-cols b {
        font-family: var(--font-head);
        color: var(--green-0e8a4e)
    }

.oc-tick {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 2px;
    border-bottom: 1px solid var(--blue-eef1fa);
    font-weight: 600;
    cursor: pointer
}

    .oc-tick:last-child {
        border-bottom: 0
    }

    .oc-tick i {
        margin-left: auto;
        color: var(--green)
    }

/* print documents */
.oc-print {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 14px;
    align-items: start
}

.oc-paper {
    position: relative;
    margin-bottom: 8px;
    padding: 12px 12px 14px;
    border-radius: 4px 4px 0 0;
    background: var(--card);
    font-size: .66rem;
    color: var(--blue-1f2937);
    filter: drop-shadow(0 10px 14px rgba(var(--blue-283478-rgb),.18))
}

    .oc-paper::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 7px;
        background: radial-gradient(circle at 6px 0,var(--white) 5.5px,transparent 6px) 0 0/12px 7px repeat-x
    }

    .oc-paper h6 {
        margin: 0;
        text-align: center;
        font-family: var(--font-head);
        font-weight: 800;
        font-size: .95rem;
        letter-spacing: 1px;
        color: var(--brand-deep)
    }

    .oc-paper .sub {
        text-align: center;
        font-size: .6rem;
        letter-spacing: 2px;
        color: var(--muted);
        margin-bottom: 6px
    }

.oc-rc-row {
    display: grid;
    grid-template-columns: 1.3fr .4fr .8fr .9fr;
    gap: 4px;
    padding: 2px 0
}

    .oc-rc-row span:nth-child(n+2) {
        text-align: right
    }

    .oc-rc-row.is-head {
        margin-top: 6px;
        padding-bottom: 4px;
        border-bottom: 1px dashed var(--blue-cfd6ea);
        font-weight: 800
    }

.oc-rc-sum {
    display: flex;
    justify-content: space-between;
    padding: 1px 0
}

.oc-rc-total {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--blue-cfd6ea);
    font-size: .85rem;
    font-weight: 800
}

    .oc-rc-total b {
        color: var(--green)
    }

.oc-set .oc-label {
    margin-top: 10px
}

    .oc-set .oc-label:first-child {
        margin-top: 0
    }

.oc-ready {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px solid var(--green-c8efd9);
    border-radius: 12px;
    background: var(--green-e9f9f0);
    font-size: .74rem;
    color: var(--green-2d5a44)
}

    .oc-ready i {
        font-size: 1.1rem;
        color: var(--green)
    }

    .oc-ready b {
        display: block;
        color: var(--green-0e8a4e);
        font-size: .82rem
    }

/* send to kitchen */
.oc-kitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: transform .25s var(--ease),box-shadow .25s,border-color .2s
}

    .oc-kitem:hover {
        transform: translateX(3px);
        border-color: rgba(var(--brand-rgb),.4);
        box-shadow: var(--shadow-hover)
    }

.oc-kimg {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    background: linear-gradient(135deg,var(--blue-e9edff),var(--white))
}

.oc-kname {
    flex: 1;
    min-width: 0
}

    .oc-kname b {
        display: block;
        font-family: var(--font-head);
        font-weight: 700
    }

.oc-station {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700
}

    .oc-station.is-hot {
        background: var(--orange-fff0e4);
        color: var(--orange-ea580c)
    }

    .oc-station.is-fry {
        background: var(--yellow-fff5da);
        color: var(--orange-b8780a)
    }

    .oc-station.is-bev {
        background: var(--teal-dff6f8);
        color: var(--teal-0b8691)
    }

.oc-grip {
    color: var(--blue-b4bdd6);
    cursor: grab;
    font-size: 1.2rem
}

/* split payment */
.oc-split-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0
}

    .oc-split-row b {
        flex: 1;
        font-family: var(--font-head)
    }

    .oc-split-row .input-group {
        width: 150px
    }

.oc-ib {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--red-f6c9c6);
    border-radius: 10px;
    background: var(--red-fff5f4);
    color: var(--red);
    transition: transform .2s,background .2s,color .2s
}

    .oc-ib:hover {
        background: var(--red);
        color: var(--white);
        transform: translateY(-1px)
    }

.oc-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 9px;
    border: 1.5px dashed var(--blue-bccaf3);
    border-radius: 12px;
    background: var(--blue-f6f8ff);
    font-weight: 700;
    color: var(--brand);
    transition: background .2s,border-color .2s
}

    .oc-add:hover {
        background: var(--brand-soft);
        border-color: var(--brand)
    }

.oc-link {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    font-weight: 700;
    color: var(--brand);
    transition: transform .2s
}

    .oc-link:hover {
        transform: translateY(-1px);
        text-decoration: underline
    }

.oc-note {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--blue-d6e2fb);
    border-radius: 12px;
    background: var(--blue-eef3ff);
    font-size: .82rem;
    color: var(--blue-34508f)
}

    .oc-note i {
        font-size: 1.05rem
    }

@media (max-width:575.98px) {
    .oc-print {
        grid-template-columns: 1fr
    }

    .oc-paid {
        flex-wrap: wrap
    }

    .oc-paid-cols {
        margin: 0;
        padding: 10px 0 0;
        border-left: 0;
        border-top: 1px solid var(--green-bfe8d0);
        width: 100%
    }
}

.more-menu {
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-hover)
}

    .more-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 10px;
        font-weight: 600;
        font-size: .88rem;
        color: var(--text);
        transition: background .2s,transform .2s var(--ease)
    }

        .more-menu .dropdown-item i {
            display: grid;
            place-items: center;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: var(--brand-soft);
            color: var(--brand);
            font-size: .95rem
        }

        .more-menu .dropdown-item:hover {
            background: var(--blue-f3f5ff);
            color: var(--brand);
            transform: translateX(3px)
        }

        .more-menu .dropdown-item.is-danger {
            color: var(--red-d4303a)
        }

            .more-menu .dropdown-item.is-danger i {
                background: var(--red-ffe8ea);
                color: var(--red-d4303a)
            }

            .more-menu .dropdown-item.is-danger:hover {
                background: var(--red-fff3f3)
            }

    .more-menu .dropdown-divider {
        margin: 6px 4px;
        border-color: var(--line)
    }


/* =========================================================
   Futex HMS – page layouts (Cashier Shifts, Settings)
   Sirf NEW classes. style.css ke baad load karo.
   ========================================================= */

/* page shell: body overflow hidden hai, isliye .pg khud scroll karta hai */
.pg {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.pg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px
}

.pg-title {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -.4px;
    color: var(--brand-deep)
}

.pg-sub {
    font-size: .85rem;
    color: var(--muted)
}

.pg .t-green {
    color: var(--green) !important
}

.pg .t-red {
    color: var(--red) !important
}

/* filters */
.pg-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
    gap: 10px;
    margin-bottom: 10px
}

.pg-sel {
    position: relative;
    margin: 0
}

    .pg-sel > i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--brand);
        pointer-events: none
    }

.pg .form-select, .pg .form-control {
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background-color: var(--card);
    font-weight: 600;
    font-size: .88rem
}

.pg textarea.form-control {
    height: auto
}

.pg-sel .form-select {
    padding-left: 36px
}

/* KPI cards */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
    gap: 8px;
    margin-bottom: 10px
}

    .kpi-grid.reports {
        grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    }

.kpi {
    --tint: var(--blue-eef1ff);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 7px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg,var(--tint),var(--white) 72%);
    /*box-shadow: var(--shadow);*/
    transition: transform .25s var(--ease),box-shadow .25s var(--ease)
}

    .kpi:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover)
    }

    .kpi.is-green {
        --tint: var(--green-e6f8ee);
        border-color: var(--green-d5f3e2);
    }

    .kpi.is-amber {
        --tint: var(--yellow-fff4de);
        border-color: var(--orange-ffe6b8);
    }

    .kpi.is-red {
        --tint: var(--red-ffecee)
    }

.kpi-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.3rem
}

.kpi.is-green .kpi-ic {
    background: var(--green-d5f3e2);
    color: var(--s-open-t)
}

.kpi.is-amber .kpi-ic {
    background: var(--orange-ffe6b8);
    color: var(--orange-b86e00)
}

.kpi.is-red .kpi-ic {
    background: var(--red-ffd9dd);
    color: var(--red-d4303a)
}

.kpi small {
    display: block;
    font-size: .8rem;
    color: var(--muted)
}

.kpi b {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.4px;
    color: var(--brand-deep)
}

/* card + table */
.pg-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--shadow2)
}

.pg-card-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
}

    .pg-card-h h6 {
        margin: 0;
        font-family: var(--font-head);
        font-weight: 800;
        color: var(--brand-deep)
    }

.pg-table {
    margin: 0;
    font-size: .85rem
}

    .pg-table th {
        padding: .7rem .9rem;
        border-bottom: 1px solid var(--line);
        background: var(--blue-f6f8ff);
        white-space: nowrap;
        font-size: .78rem;
        font-weight: 700;
        color: var(--brand-deep)
    }

    .pg-table td {
        padding: .7rem .9rem;
        border-color: var(--blue-eef1fa);
        vertical-align: middle
    }

    .pg-table tbody tr {
        transition: background .2s
    }

        .pg-table tbody tr:hover {
            background: var(--blue-f6f8ff)
        }

    .pg-table small {
        display: block;
        color: var(--muted);
        font-size: .74rem
    }

.pg-user {
    display: flex;
    align-items: center;
    gap: 10px
}

.av {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--brand-2),var(--brand));
    color: var(--white);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .8rem;
    box-shadow: 0 6px 12px -6px rgba(var(--brand-rgb),.7)
}

    .av.is-amber {
        background: linear-gradient(135deg,var(--orange-ffbf47),var(--orange-f08a00))
    }

    .av.is-green {
        background: linear-gradient(135deg,var(--green-34c98a),var(--green-0e9a56))
    }

.pg-ib {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--brand);
    transition: transform .2s,background .2s,color .2s,border-color .2s
}

    .pg-ib:hover {
        border-color: var(--brand);
        background: var(--brand);
        color: var(--white);
        transform: translateY(-1px)
    }

    .pg-ib.is-red {
        color: var(--red)
    }

        .pg-ib.is-red:hover {
            border-color: var(--red);
            background: var(--red);
            color: var(--white)
        }

.pg-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    /*border-top: 1px solid var(--line);*/
    font-size: .85rem;
    color: var(--muted)
}

.pg-pager {
    display: flex;
    gap: 6px
}

    .pg-pager button {
        min-width: 34px;
        height: 34px;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: var(--card);
        font-weight: 700;
        color: var(--text);
        transition: border-color .2s,color .2s,background .2s
    }

        .pg-pager button:hover {
            border-color: var(--brand);
            color: var(--brand)
        }

        .pg-pager button.active {
            border-color: var(--brand);
            background: var(--brand);
            color: var(--white)
        }

/* settings */
.set-wrap {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 14px;
    align-items: start
}

.set-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px
}

    .set-nav button {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border: 0;
        border-radius: 12px;
        background: none;
        font-weight: 700;
        text-align: left;
        color: var(--blue-44526f);
        transition: background .2s,transform .25s var(--ease),box-shadow .25s
    }

        .set-nav button i {
            display: grid;
            place-items: center;
            width: 32px;
            height: 32px;
            border-radius: 10px;
            background: var(--brand-soft);
            color: var(--brand);
            transition: background .2s,color .2s
        }

        .set-nav button:hover {
            background: var(--blue-f3f5ff);
            transform: translateX(3px)
        }

        .set-nav button.active {
            background: linear-gradient(135deg,var(--brand-2),var(--brand));
            color: var(--white);
            box-shadow: 0 10px 18px -10px rgba(var(--brand-rgb),.7)
        }

            .set-nav button.active i {
                background: rgba(var(--white-rgb),.2);
                color: var(--white)
            }

.set-body {
    padding: 18px
}

    .set-body .tab-pane.active {
        animation: tabSlideIn .45s var(--ease) backwards
    }

.pg-label {
    display: block;
    margin: 0 0 6px 0px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted)
}

.set-logo {
    display: grid;
    place-items: center;
    gap: 4px;
    height: 100%;
    min-height: 120px;
    border: 1.5px dashed var(--blue-bccaf3);
    border-radius: 14px;
    background: var(--blue-f6f8ff);
    text-align: center;
    font-weight: 700;
    color: var(--brand);
    transition: background .2s,border-color .2s
}

    .set-logo:hover {
        border-color: var(--brand);
        background: var(--brand-soft)
    }

    .set-logo i {
        font-size: 1.8rem
    }

.set-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--blue-eef1fa)
}

    .set-row:last-child {
        border-bottom: 0
    }

    .set-row .grow {
        flex: 1;
        min-width: 0
    }

    .set-row b {
        display: block;
        font-family: var(--font-head);
        font-weight: 700
    }

    .set-row small {
        color: var(--muted)
    }

.set-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.15rem
}

    .set-ico.is-green {
        background: var(--green-e3f7ec);
        color: var(--s-ready-t)
    }

    .set-ico.is-purple {
        background: var(--indigo-efeaff);
        color: var(--indigo-6d4ce0)
    }

    .set-ico.is-amber {
        background: var(--orange-fff1d9);
        color: var(--orange-c27300)
    }

.pg .form-switch .form-check-input {
    float: none;
    width: 2.6em;
    height: 1.4em;
    margin: 0;
    cursor: pointer;
    border-color: var(--blue-c3cdea)
}

.pg .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand)
}

.pg .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.15)
}

.set-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: var(--blue-fafbff)
}

@media (max-width:900px) {
    .set-wrap {
        grid-template-columns: 1fr
    }

    .set-nav {
        flex-direction: row;
        overflow-x: auto
    }

        .set-nav button {
            white-space: nowrap
        }
}

/* =========================================================
   Dashboard / Sales List / Reports  (naye classes)
   ========================================================= */
.kpi.is-purple {
    --tint: var(--indigo-f1ecff);
    border-color: var(--indigo-e3d9ff);
}

    .kpi.is-purple .kpi-ic {
        background: var(--indigo-e3d9ff);
        color: var(--indigo-6d4ce0)
    }

.kpi.is-teal {
    --tint: var(--teal-e4f7f8)
}

    .kpi.is-teal .kpi-ic {
        background: var(--teal-c4eef2);
        color: var(--teal-0b8691)
    }

.kpi small + b + small, .kpi b + small {
    margin-top: 1px
}

.trend {
    margin-top: 2px;
    font-size: .72rem;
    color: var(--muted)
}

    .trend .up {
        font-weight: 700;
        color: var(--green)
    }

    .trend .dn {
        font-weight: 700;
        color: var(--red)
    }

.dash-grid {
    display: grid;
    grid-template-columns: 1.53fr 1fr;
    gap: 12px;
    margin-bottom: 10px
}

    .dash-grid.is-even {
        grid-template-columns: 1fr 1fr
    }

.pg-card-b {
    padding: 14px 16px
}

.pg-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--muted)
}

.pg-link {
    font-size: .8rem;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none
}

    .pg-link:hover {
        text-decoration: underline
    }

.pg-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.pg-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums
}

.thumb-sm {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
    background: linear-gradient(135deg,var(--blue-e9edff),var(--white));
    box-shadow: 0 6px 12px -8px rgba(var(--blue-283478-rgb),.5)
}

.ico-txt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap
}

    .ico-txt i {
        color: var(--brand)
    }

/* hourly bar chart (CSS only) */
.chart-main {
    display: flex;
    height: 220px
}

.chart-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 34px;
    padding-bottom: 1px;
    font-size: .7rem;
    color: var(--muted)
}

.chart-plot {
    flex: 1;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(var(--blue-eef1fa) 1px,transparent 1px) 0 0/100% 25%
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 100%;
    padding: 0 6px
}

/* hourly chart: patle, rang-birangay bars */
.bars {
    display: grid;
    grid-template-columns: repeat(13,1fr);
    grid-template-rows: 100%;
    align-items: end;
    height: 100%;
    padding: 0 6px
}

.chart-x {
    display: grid;
    grid-template-columns: repeat(13,1fr);
    margin-left: 34px;
    padding: 6px 6px 0
}

.bar {
    --c1: var(--blue-7aa2ff);
    --c2: var(--blue-3b6cf0);
    position: relative;
    justify-self: center;
    width: 20px;
    height: var(--h);
    min-height: 3px;
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg,var(--c1),var(--c2));
    box-shadow: 0 10px 16px -10px var(--c2);
    transform-origin: bottom;
    animation: barGrow .8s var(--ease) backwards;
    transition: filter .2s,transform .25s var(--ease)
}

    .bar:hover {
        filter: brightness(1.08) saturate(1.15);
        transform: scale(1.2,1.03)
    }

    .bar:nth-child(7n+2) {
        --c1: var(--indigo-b79cff);
        --c2: var(--indigo-6d4ce0)
    }

    .bar:nth-child(7n+3) {
        --c1: var(--pink-ff8fc6);
        --c2: var(--pink-d6368f)
    }

    .bar:nth-child(7n+4) {
        --c1: var(--orange-ffc078);
        --c2: var(--orange-f08a00)
    }

    .bar:nth-child(7n+5) {
        --c1: var(--yellow-ffdc66);
        --c2: var(--yellow-e0a100)
    }

    .bar:nth-child(7n+6) {
        --c1: var(--green-6ee7b7);
        --c2: var(--green-12a66a)
    }

    .bar:nth-child(7n+7) {
        --c1: var(--teal-5eead4);
        --c2: var(--teal-0b9aa6)
    }

    .bar:hover {
        filter: brightness(1.1);
        transform: scaleX(1.06)
    }

    .bar::after {
        content: attr(data-v);
        position: absolute;
        left: 50%;
        bottom: 100%;
        transform: translate(-50%,-6px);
        padding: 2px 8px;
        border-radius: 6px;
        background: var(--brand-deep);
        color: var(--white);
        font-size: .7rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s
    }

    .bar:hover::after {
        opacity: 1
    }

.chart-x {
    display: flex;
    gap: 10px;
    margin-left: 34px;
    padding: 6px 6px 0
}

    .chart-x span {
        flex: 1;
        text-align: center;
        font-size: .68rem;
        color: var(--muted)
    }

@keyframes barGrow {
    from {
        transform: scaleY(0)
    }
}

/* payment mix donut */
.donut {
    position: relative;
    display: grid;
    place-items: center;
    width: 168px;
    height: 168px;
    margin: 4px auto 14px;
    border-radius: 50%;
    background: conic-gradient(var(--brand-deep) 0 55%,var(--blue-2f8bff) 55% 90%,var(--green-22b573) 90% 100%)
}

    .donut::before {
        content: "";
        position: absolute;
        inset: 26px;
        border-radius: 50%;
        background: var(--card);
        box-shadow: inset 0 2px 8px rgba(var(--blue-283478-rgb),.12)
    }

    .donut div {
        position: relative;
        text-align: center;
        line-height: 1.15
    }

    .donut small {
        display: block;
        font-size: .72rem;
        color: var(--muted)
    }

    .donut b {
        font-family: var(--font-head);
        font-weight: 800;
        font-size: 1.3rem;
        color: var(--brand-deep)
    }

.legend {
    display: grid;
    gap: 8px;
    font-size: .84rem
}

    .legend div {
        display: grid;
        grid-template-columns: 14px 1fr auto auto;
        align-items: center;
        gap: 10px
    }

    .legend i {
        width: 11px;
        height: 11px;
        border-radius: 50%
    }

    .legend b {
        font-weight: 700
    }

    .legend span {
        color: var(--muted);
        min-width: 70px;
        text-align: right
    }

@media (max-width:992px) {
    .dash-grid, .dash-grid.is-even {
        grid-template-columns: 1fr
    }
}

/* =========================================================
   POS page (menu grid + cart)
   ========================================================= */
.pos-wrap {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 12px;
    align-items: start
}

.pos-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px
}

    .pos-bar h1 {
        margin: 0;
        font-family: var(--font-head);
        font-weight: 800;
        font-size: 1.3rem;
        letter-spacing: -.3px;
        color: var(--brand-deep)
    }

        .pos-bar h1 small {
            margin-left: 6px;
            font-size: .8rem;
            font-weight: 600;
            color: var(--muted)
        }

.pos-search {
    position: relative;
    width: 240px;
    margin-left: auto
}

    .pos-search i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--brand)
    }

.pg .pos-search .form-control {
    padding-left: 36px
}

.pos-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 12px
}

    .pos-chips .chip {
        white-space: nowrap
    }

.pi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
    gap: 12px
}

.pi {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow);
    transition: transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s
}

    .pi:hover {
        transform: translateY(-4px);
        border-color: rgba(var(--brand-rgb),.4);
        box-shadow: var(--shadow-hover)
    }

.pi-img {
    aspect-ratio: 4/3;
    background: linear-gradient(135deg,var(--blue-e9edff),var(--white));
    overflow: hidden
}

    .pi-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s var(--ease)
    }

.pi:hover .pi-img img {
    transform: scale(1.08)
}

.pi-b {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px
}

    .pi-b b {
        display: block;
        font-family: var(--font-head);
        font-size: .88rem;
        line-height: 1.2
    }

    .pi-b small {
        font-weight: 700;
        color: var(--green)
    }

.pi-add {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg,var(--brand-2),var(--brand));
    color: var(--white);
    box-shadow: 0 8px 14px -8px rgba(var(--brand-rgb),.8);
    transition: transform .2s
}

    .pi-add:hover {
        transform: scale(1.12) rotate(90deg)
    }

.pos-wrap:has(#pcBurger:checked) .pi:not([data-c=burger]),
.pos-wrap:has(#pcShawarma:checked) .pi:not([data-c=shawarma]),
.pos-wrap:has(#pcSides:checked) .pi:not([data-c=sides]),
.pos-wrap:has(#pcGrill:checked) .pi:not([data-c=grill]),
.pos-wrap:has(#pcDrinks:checked) .pi:not([data-c=drinks]) {
    display: none
}

/* cart */
.pos-cart {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px)
}

.pc-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg,var(--blue-f1f4ff),var(--white))
}

    .pc-head h6 {
        margin: 0 0 8px;
        font-family: var(--font-head);
        font-weight: 800;
        color: var(--brand-deep)
    }

        .pc-head h6 span {
            float: right;
            color: var(--brand);
            font-size: .85rem
        }

.pc-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto
}

.pc-row {
    display: grid;
    grid-template-columns: 1fr auto 74px 34px;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--blue-eef1fa)
}

    .pc-row b {
        display: block;
        font-size: .85rem
    }

    .pc-row small {
        color: var(--muted)
    }

    .pc-row .lt {
        text-align: right;
        font-weight: 800;
        font-family: var(--font-head)
    }

.pg .pc-qty {
    width: 100px;
    flex-wrap: nowrap
}

    .pg .pc-qty .btn {
        display: grid;
        place-items: center;
        width: 30px;
        height: 32px;
        padding: 0;
        border: 1px solid var(--line);
        background: var(--card);
        color: var(--brand);
        box-shadow: none
    }

        .pg .pc-qty .btn:hover {
            border-color: var(--brand);
            background: var(--brand);
            color: var(--white)
        }

    .pg .pc-qty .form-control {
        width: 40px;
        height: 32px;
        padding: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        text-align: center;
        font-weight: 800
    }

    .pg .pc-qty > .btn:first-child {
        border-radius: 9px 0 0 9px
    }

    .pg .pc-qty > .btn:last-child {
        border-radius: 0 9px 9px 0
    }

.pc-foot {
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    background: var(--blue-fafbff)
}

.pc-tot {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-size: .85rem;
    color: var(--blue-44526f)
}

    .pc-tot.is-big {
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px dashed var(--blue-cdd8f5);
        color: var(--text);
        font-weight: 700
    }

        .pc-tot.is-big b {
            font-family: var(--font-head);
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--green)
        }

.pc-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px
}

    .pc-btns .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 42px
    }

    .pc-btns .btn-pay {
        grid-column: 1/-1;
        height: 46px;
        font-size: 1rem
    }

@media (max-width:1100px) {
    .pos-wrap {
        grid-template-columns: 1fr
    }

    .pos-cart {
        position: static;
        max-height: none
    }
}


/* Jis page mein .pg (Dashboard, Sales, Reports, Shifts) ho, wahan right panel hide */
/* In 6 pages mein se koi bhi active ho to right panel hide */
.app:has( #nav-dashboard.active, #nav-pos.active, #nav-sales.active, #nav-reports.active, #nav-shifts.active, #nav-settings.active ) .panel-right {
    display: none
}



/* =========================================================
   REUSABLE TABLE SYSTEM  (prefix: pg-table + t-*)
   ========================================================= */

/* ---------- 1) Colour tokens: kisi bhi t-* element ke saath lagao ---------- */
.c-blue {
    --c: var(--blue-2563eb);
    --bg: var(--blue-e0ebff)
}

.c-indigo {
    --c: var(--indigo-2a2f8f);
    --bg: var(--blue-e8ebff)
}

.c-purple {
    --c: var(--indigo-5b3fd1);
    --bg: var(--indigo-efeaff)
}

.c-green {
    --c: var(--green-168a57);
    --bg: var(--green-dcf5e8)
}

.c-orange {
    --c: var(--orange-b45f06);
    --bg: var(--orange-fff1de)
}

.c-red {
    --c: var(--red-d63a3a);
    --bg: var(--red-fde4e4)
}

.c-yellow {
    --c: var(--yellow-9a6b00);
    --bg: var(--yellow-fff3c4)
}

.c-teal {
    --c: var(--teal-0f8a8a);
    --bg: var(--teal-d9f4f4)
}

.c-gray {
    --c: var(--blue-5d6680);
    --bg: var(--blue-eceff6)
}

/* ---------- 2) Card wrapper + header ---------- */
.pg-card-table {
    overflow: hidden;
    transition: box-shadow .25s ease
}

    .pg-card-table:hover {
        box-shadow: 0 14px 34px rgba(var(--blue-1e2978-rgb),.10)
    }

    .pg-card-table .pg-card-h h6 {
        display: flex;
        align-items: center;
        gap: 8px
    }

        .pg-card-table .pg-card-h h6 i {
            width: 30px;
            height: 30px;
            border-radius: 9px;
            display: grid;
            place-items: center;
            font-size: .9rem;
            color: var(--brand-deep);
            background: linear-gradient(135deg,var(--blue-eef1ff),var(--blue-dfe6ff))
        }

    .pg-card-table .pg-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-weight: 600;
        transition: gap .2s ease
    }

        .pg-card-table .pg-link:hover {
            gap: 8px
        }

    .pg-card-table .table-responsive {
        overflow-x: auto
    }

/* ---------- 3) Table base ---------- */
.pg-table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0
}

    .pg-table thead th {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--blue-6b7694);
        background: linear-gradient(180deg,var(--blue-f6f8ff),var(--blue-eef2fd));
        padding: 12px 16px;
        border-top: 1px solid var(--blue-e6ebf7);
        border-bottom: 1px solid var(--blue-e1e7f5)
    }

    .pg-table tbody td {
        padding: 10px;
        vertical-align: middle;
        font-size: .84rem;
        color: var(--blue-4a5370);
        border-bottom: 1px dashed var(--blue-e8ecf6);
        background: transparent;
        transition: background .2s ease
    }

    .pg-table tbody tr:last-child td {
        border-bottom: 0
    }

    .pg-table tbody tr:hover td {
        background: linear-gradient(90deg,var(--blue-f5f7ff),var(--blue-fafbff))
    }

        .pg-table tbody tr:hover td:first-child {
            box-shadow: inset 3px 0 0 var(--brand-deep)
        }

    /* alignment helpers */
    .pg-table .num {
        text-align: right
    }

    .pg-table .ctr {
        text-align: center
    }

    .pg-table .nowrap {
        white-space: nowrap
    }

/* table modifiers */
.pg-table-compact thead th {
    padding: 9px 12px
}

.pg-table-compact tbody td {
    padding: 8px 12px;
    font-size: .8rem
}

.pg-table-striped tbody tr:nth-child(even) td {
    background: var(--blue-fafbff)
}

.pg-table-plain tbody td {
    border-bottom-style: solid
}
/* dashed ki jagah solid line */

/* footer / total row */
.pg-table tfoot td {
    padding: 12px 16px;
    font-weight: 700;
    color: var(--blue-1f2a55);
    background: var(--blue-f6f8ff);
    border-top: 1px solid var(--blue-e1e7f5)
}

/* ---------- 4) Cell components ---------- */

/* money / bold value */
.t-amt {
    color: var(--blue-1f2a55);
    font-weight: 700;
    font-variant-numeric: tabular-nums
}

.t-muted {
    color: var(--blue-98a1bb)
}

/* clickable id / code  ->  <a class="t-id c-blue">#1012</a> */
.t-id {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: .8rem;
    color: var(--c,var(--blue-1a63e8));
    background: var(--bg);
    text-decoration: none;
    transition: all .2s ease
}

    .t-id:hover {
        color: var(--white);
        background: var(--c,var(--blue-1a63e8));
        transform: translateY(-1px)
    }

/* time / date with icon */
.t-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue-6b7694);
    white-space: nowrap
}

    .t-time i {
        color: var(--blue-a3adc7);
        font-size: .8rem
    }

/* rank badge  ->  <span class="t-rank gold">1</span> */
.t-rank {
    width: 26px;
    height: 26px;
    border-radius: 24%;
    display: inline-grid;
    place-items: center;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--blue-6b7694);
    background: var(--blue-e0ebff);
}

    .t-rank.gold {
        color: var(--orange-7a4b00);
        background: linear-gradient(135deg,var(--yellow-ffe58a),var(--yellow-f5b82e));
        box-shadow: 0 4px 10px rgba(var(--yellow-f5b82e-rgb),.45)
    }

    .t-rank.silver {
        color: var(--blue-4b5563);
        background: linear-gradient(135deg,var(--blue-f3f4f6),var(--blue-c9ced8));
        box-shadow: 0 4px 10px rgba(var(--blue-96a0b4-rgb),.4)
    }

    .t-rank.bronze {
        color: var(--orange-6b3410);
        background: linear-gradient(135deg,var(--orange-ffd2ae),var(--orange-e08a4b));
        box-shadow: 0 4px 10px rgba(var(--orange-e08a4b-rgb),.4)
    }

/* image/avatar + title + subtitle */
.t-media {
    display: flex;
    align-items: center;
    gap: 12px
}

    .t-media b {
        display: block;
        color: var(--blue-1f2a55);
        font-size: .86rem;
        line-height: 1.2
    }

    .t-media small {
        display: block;
        color: var(--blue-98a1bb);
        font-size: .72rem;
        margin-top: 2px
    }

    .t-media > img {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        object-fit: cover;
        flex: none;
        box-shadow: 0 0 0 2px var(--white),0 0 0 3px var(--blue-e3e8f6),0 6px 12px rgba(var(--blue-1e2978-rgb),.14);
        transition: transform .25s ease
    }

.pg-table tbody tr:hover .t-media > img {
    transform: scale(1.08) rotate(-3deg)
}

.t-media .av { /* initials avatar: <span class="av c-purple">AK</span> */
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .8rem;
    color: var(--c,var(--indigo-2a2f8f));
    background: var(--bg)
}

/* number pill  ->  <span class="t-pill c-indigo">28</span> */
.t-pill {
    display: inline-block;
    min-width: 38px;
    padding: 3px 10px;
    border-radius: 20px;
    text-align: center;
    font-weight: 700;
    font-size: .78rem;
    color: var(--c,var(--indigo-2a2f8f));
    background: var(--bg)
}

/* tag with icon  ->  <span class="t-tag c-purple"><i class="bi bi-cup-hot"></i>Dine In</span> */
.t-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--c,var(--blue-5d6680));
    background: var(--bg)
}

/* status pill with dot  ->  <span class="t-status c-green">Completed</span>  (+ .live = pulse) */
.t-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--c,var(--blue-5d6680));
    background: var(--bg)
}

    .t-status::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor
    }

    .t-status.live::before {
        animation: tPulse 1.4s ease-in-out infinite
    }

@keyframes tPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--blue-2563eb-rgb),.55)
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--blue-2563eb-rgb),0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--blue-2563eb-rgb),0)
    }
}

/* progress bar under value  ->  <div class="t-bar c-indigo"><i style="--w:60%"></i></div> */
.t-bar {
    height: 5px;
    border-radius: 5px;
    background: var(--blue-edf0f8);
    margin: 6px 0 0 auto;
    width: 110px;
    overflow: hidden
}

    .t-bar i {
        display: block;
        height: 100%;
        width: var(--w,0);
        border-radius: 5px;
        background: linear-gradient(90deg,var(--blue-6c7bff),var(--c,var(--indigo-2a2f8f)));
        transform-origin: left;
        animation: tGrow .9s cubic-bezier(.2,.8,.2,1) both
    }

@keyframes tGrow {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

.pg-table td:not(.num) .t-bar {
    margin-left: 0
}

/* action buttons  ->  <div class="t-actions"><button class="c-blue"><i class="bi bi-eye"></i></button>...</div> */
.t-actions {
    display: inline-flex;
    gap: 6px
}

    .t-actions a, .t-actions button {
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 9px;
        display: grid;
        place-items: center;
        font-size: .85rem;
        color: var(--c,var(--blue-5d6680));
        background: var(--bg);
        text-decoration: none;
        cursor: pointer;
        transition: all .2s ease
    }

        .t-actions a:hover, .t-actions button:hover {
            color: var(--white);
            background: var(--c,var(--blue-5d6680));
            transform: translateY(-2px)
        }

@media (max-width:575.98px) {
    .pg-table thead th, .pg-table tbody td {
        padding: 11px 12px
    }

    .t-bar {
        width: 80px
    }
}
/* two-line cell: main text + small sub text (time/date, name/phone etc.) */
.t-stack {
    display: block;
    line-height: 1.25;
    color: var(--blue-1f2a55);
    font-weight: 600;
    white-space: nowrap
}

    .t-stack small {
        display: block;
        color: var(--blue-98a1bb);
        font-weight: 400;
        font-size: .72rem;
        margin-top: 2px
    }




/* date cell with icon box */
.t-date {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--blue-1f2a55);
    white-space: nowrap
}

    .t-date i {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        font-size: .85rem;
        color: var(--c,var(--indigo-2a2f8f));
        background: var(--bg)
    }

/* money with coloured dot (payment method columns) */
.t-money {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

    .t-money::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--c,var(--blue-98a1bb))
    }

/* highlighted total cell */
.t-total {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--c,var(--indigo-2a2f8f));
    background: var(--bg)
}

/* numeric cols: tabular numbers */
.pg-table td.num {
    font-variant-numeric: tabular-nums
}




/* variance pill  ->  <span class="t-var c-red"><i class="bi bi-arrow-down-short"></i>SAR 25.00</span> */
.t-var {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 10px 3px 6px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--c,var(--blue-5d6680));
    background: var(--bg)
}

    .t-var i {
        font-size: 1.05rem;
        line-height: 1
    }

/* table footer: info text + pager + button */
.t-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--blue-e6ebf7);
    background: var(--blue-fafbff);
    font-size: .8rem;
    color: var(--blue-6b7694)
}

.t-pager {
    display: inline-flex;
    gap: 6px
}

    .t-pager button {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        border: 1px solid var(--blue-e1e7f5);
        border-radius: 9px;
        background: var(--card);
        color: var(--blue-4a5370);
        font-weight: 600;
        font-size: .8rem;
        cursor: pointer;
        transition: all .2s ease
    }

        .t-pager button:hover {
            color: var(--brand-deep);
            border-color: var(--brand-deep);
            transform: translateY(-1px)
        }

        .t-pager button.active {
            color: var(--white);
            border-color: transparent;
            background: linear-gradient(135deg,var(--blue-6c7bff),var(--brand-deep));
            box-shadow: 0 6px 14px rgba(var(--indigo-2a2f8f-rgb),.28)
        }

.lang {
    border: 1px solid var(--blue-dae3f6);
    padding: 2px 5px;
    border-radius: 6px;
    background: var(--blue-eaf1ff);
    text-transform: uppercase;
    font-size: 12px
}

/* ===== Profile page ===== */
.profile-page .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--blue-64748b);
    margin-bottom: .3rem
}

.profile-page .input-group-text {
    background: var(--blue-f8fafc);
    color: var(--brand);
    border-color: var(--border)
}

.profile-page .form-control, .profile-page .form-select {
    border-color: var(--border);
    border-radius: .6rem
}

.profile-page .input-group > .form-control {
    border-radius: 0 .6rem .6rem 0
}

.profile-page .input-group > .input-group-text {
    border-radius: .6rem 0 0 .6rem
}

.profile-page .form-control:focus, .profile-page .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(var(--blue-1d4ed8-rgb),.12)
}

/* left card */
.pf-card {
    padding: 0 0 1.2rem;
    overflow: hidden
}

.pf-cover {
    height: 90px;
    background: linear-gradient(135deg,var(--brand),var(--blue-0f2a6b))
}

.pf-avatar-wrap {
    position: relative;
    width: 96px;
    margin: -48px auto 0
}

.pf-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--white);
    box-shadow: 0 6px 18px rgba(var(--blue-0f172a-rgb),.18);
    background: var(--card)
}

.pf-avatar-edit {
    position: absolute;
    right: 0;
    bottom: 4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--white);
    background: var(--brand);
    color: var(--white);
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s
}

    .pf-avatar-edit:hover {
        transform: scale(1.12)
    }

.pf-status {
    display: inline-block;
    padding: .2rem .7rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
    background: var(--green-dcfce7);
    color: var(--green-15803d)
}

    .pf-status i {
        font-size: .5rem;
        vertical-align: middle
    }

.pf-meta {
    padding: 0 1.2rem
}

    .pf-meta li {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .6rem 0;
        border-bottom: 1px dashed var(--blue-e2e8f0);
        font-size: .85rem
    }

        .pf-meta li:last-child {
            border-bottom: 0
        }

    .pf-meta i {
        color: var(--brand);
        font-size: 1rem
    }

    .pf-meta span {
        color: var(--blue-64748b);
        flex: 1
    }

    .pf-meta b {
        font-weight: 600;
        color: var(--blue-0f172a)
    }

/* section heads */
.pf-box-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--blue-eef2f7)
}

.pf-icon {
    width: 38px;
    height: 38px;
    border-radius: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--blue-1d4ed8-rgb),.1);
    color: var(--brand);
    font-size: 1.1rem
}

/* login activity */
.profile-page .table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--blue-64748b);
    border-bottom-width: 1px
}

.pf-badge {
    padding: .2rem .65rem;
    border-radius: 2rem;
    font-size: .72rem;
    font-weight: 600
}

    .pf-badge.ok {
        background: var(--green-dcfce7);
        color: var(--green-15803d)
    }

    .pf-badge.bad {
        background: var(--red-fee2e2);
        color: var(--red-b91c1c)
    }

.pf-card, .profile-page .box {
    transition: box-shadow .2s ease
}

    .profile-page .box:hover {
        box-shadow: 0 8px 24px rgba(var(--blue-0f172a-rgb),.07)
    }

@media (min-width: 992px) {
    .pf-side {
        position: sticky;
        top: 72px; /* topbar height (~48px) + gap */
    }
}



.nw-oc {
    --bs-offcanvas-width: 460px;
}

    .nw-oc .offcanvas-body {
        padding: 1rem 1.25rem 1.5rem;
    }

.nw-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 1.1rem 0 .5rem;
}

    .nw-label:first-child {
        margin-top: 0;
    }

.nw-sec[hidden] {
    display: none;
}

.nw-sec {
    animation: nwIn .3s ease;
}

@keyframes nwIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* order type cards */
.nw-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
}

.nw-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .8rem .4rem;
    border: 1.5px solid var(--line);
    border-radius: .8rem;
    background: var(--card);
    font-weight: 600;
    font-size: .9rem;
    color: var(--blue-334155);
    cursor: pointer;
    transition: all .2s;
}

    .nw-type i {
        font-size: 1.4rem;
        color: var(--blue-94a3b8);
        transition: color .2s;
    }

    .nw-type:hover {
        border-color: var(--blue-9db4dc);
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(var(--blue-1d4ed8-rgb),.08);
    }

.btn-check:checked + .nw-type {
    border-color: var(--brand);
    background: var(--blue-eff4ff);
    color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--blue-2563eb-rgb),.14);
}

    .btn-check:checked + .nw-type i {
        color: var(--brand);
    }

/* table picker */
.nw-tables {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}

.nw-tbl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .55rem .2rem;
    border: 1.5px solid var(--green-bfe9cf);
    border-radius: .7rem;
    background: var(--green-f0fbf4);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--green-15803d);
    cursor: pointer;
    transition: all .2s;
    line-height: 1.2;
}

    .nw-tbl small {
        font-size: .65rem;
        font-weight: 500;
        opacity: .85;
    }

    .nw-tbl:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(var(--green-15803d-rgb),.15);
    }

.btn-check:checked + .nw-tbl {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--white);
    box-shadow: 0 0 0 3px rgba(var(--blue-2563eb-rgb),.2);
}

.btn-check:disabled + .nw-tbl {
    background: var(--yellow-fff7e6);
    border-color: var(--orange-f6d9a0);
    color: var(--orange-b7791f);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: .85;
}

.nw-err {
    display: none;
    color: var(--red-dc2626);
    font-size: .8rem;
    font-weight: 500;
    margin-top: .4rem;
}

    .nw-err.show {
        display: block;
        animation: nwShake .4s;
    }

@keyframes nwShake {
    20%, 60% {
        transform: translateX(-5px);
    }

    40%, 80% {
        transform: translateX(5px);
    }
}

.nw-foot {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--line);
    background: var(--card);
}

.nw-create {
    min-width: 160px;
}

/* empty cart state (right panel) */
.cart-empty td {
    text-align: center;
    padding: 2.5rem 1rem !important;
    color: var(--blue-94a3b8);
    border: 0;
}

.cart-empty i {
    display: block;
    font-size: 2.2rem;
    margin-bottom: .4rem;
}


/* =========================================================
   Products page - sirf NEW classes (style.css ke baad paste karo)
   ========================================================= */

/* title ke saath 3 KPI cards (header ke right side par) */
.kpi-grid.is-inline {
    margin: 0;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

/* toolbar: left buttons, right filters */
.pr-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

    .pr-toolbar .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 42px;
    }

.pr-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .pr-filters .form-select {
        width: 150px;
    }

/* search: icon right side par */
.pr-search {
    position: relative;
    width: 260px;
}

    .pr-search i {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        pointer-events: none;
    }

.pg .pr-search .form-control {
    padding-right: 36px;
}

/* availability: dot + text  ->  <span class="t-dot c-green">In Stock</span> */
.t-dot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

    .t-dot::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--c,var(--blue-98a1bb));
    }

@media (max-width: 767.98px) {
    .kpi-grid.is-inline {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .pr-filters, .pr-search, .pr-filters .form-select {
        width: 100%;
    }
}


/* Customers pages - sirf NEW rules (style.css ke baad paste karo) */

/* list: round avatar in .t-media */
.t-media > img.is-round {
    border-radius: 50%
}

/* search box zyada chaura (icon left wala .pos-search) */
.pos-search.is-wide {
    width: 320px;
    max-width: 100%
}

/* edit: bara profile avatar */
.cu-avatar {
    width: 92px;
    height: 92px;
    margin: 4px auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    color: var(--white);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 2rem;
    box-shadow: 0 0 0 6px var(--brand-soft), 0 12px 20px -10px rgba(var(--brand-rgb),.6);
}

/* edit: mobile number ke saath country code select */
.input-group > .form-select.cu-cc {
    flex: none;
    width: 84px
}

/* edit: readonly fields grey */
.pg .form-control[readonly] {
    background-color: var(--blue-eef2fa)
}













/* Categories page - sirf NEW rule */
/* Display Order ka chhota number box */
.pg .form-control.ct-order {
    width: 64px;
    height: 36px;
    margin: 0 auto;
    padding: 0 6px;
    text-align: center;
    font-weight: 700;
}

/* ---------- Edit Category page - NEW rules ---------- */
/* category image preview (dashed box + delete button) */
.ct-img {
    position: relative;
    max-width: 240px;
    padding: 8px;
    border: 1.5px dashed var(--blue-bccaf3);
    border-radius: 14px;
    background: var(--blue-f6f8ff);
}

    .ct-img img {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 10px
    }

.ct-img-del {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--red-f6c9c6);
    border-radius: 10px;
    background: var(--card);
    color: var(--red);
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}

    .ct-img-del:hover {
        background: var(--red);
        border-color: var(--red);
        color: var(--white);
        transform: translateY(-1px)
    }

/* color swatch (input-group addon me) */
.ct-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sw,var(--red-ef4444));
    box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--line);
}

/* Edit Product + Edit Counter - sirf NEW rules (style.css ke baad paste karo)
   Note: cu-ig / cu-sec customers.css mein hain. */

/* right-side addon (AED / min / pcs) ke corners */
.cu-ig .input-group-text:last-child {
    border-radius: 0 10px 10px 0
}

/* tables ke andar chhota number input */
.pg .form-control.ep-num {
    width: 88px;
    height: 34px;
    padding: 0 8px;
    font-weight: 600;
}

/* product gallery */
.ep-hero {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px
}

.ep-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px
}

.ep-thumb {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .2s, transform .2s;
}

    .ep-thumb:hover {
        transform: translateY(-2px)
    }

    .ep-thumb.is-active {
        border-color: var(--brand)
    }

/* assigned cashiers (chips wala box) */
.ep-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
}

    .ep-chips .t-tag i {
        cursor: pointer;
        font-size: .7rem
    }


/* Settings page - sirf NEW rule.
   Note: .cu-ig (customers.css) aur uska right-addon rule (edit-pages.css) is page mein use hote hain. */

/* Receipt logo preview box */
.st-logo-box {
    place-items: center;
    width: 100px;
    height: 84px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
    text-align: center
}

    .st-logo-box img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain
    }