: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(20,40,80,.06),0 8px 24px rgba(20,40,80,.06);
}

* {
    box-sizing: border-box
}

body {
    font-family: 'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    overflow: hidden;
    letter-spacing: -0.3px;
}

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

/* topbar */
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: .6rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap
}

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

    .logo small {
        font-weight: 700;
        color: #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: #fff;
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-color: #fff;
    font-weight: 500;
    background: #fff
}

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

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

.btn-solid {
    background: linear-gradient(135deg,#1c63f0,#0f49c4);
    color: #fff;
    border: 0;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(20,86,217,.3)
}

    .btn-solid:hover {
        color: #fff;
        box-shadow: 0 6px 16px rgba(20,86,217,.4);
        transform: translateY(-1px)
    }

.btn-pay {
    background: linear-gradient(135deg,#1fb465,#0f8a47);
    color: #fff;
    border: 0;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(23,160,90,.3)
}

    .btn-pay:hover {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(23,160,90,.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 320px
}

.panel-center {
    flex: 1 1 0
}
/* center fills whatever is left */
.panel-right {
    flex: 0 0 370px
}

.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: #cdd7e8;
        border-radius: 6px
    }

/* left */
.ph {
    padding: 1rem 1rem .6rem
}

    .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: #fafcff
    }

        .search input:focus, .form-control:focus, .form-select:focus {
            border-color: var(--brand);
            box-shadow: 0 0 0 .2rem rgba(20,86,217,.15)
        }

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

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

    .chip:hover {
        background: #dfe8f7
    }

    .chip.active {
        background: var(--brand);
        color: #fff;
        box-shadow: 0 3px 8px rgba(20,86,217,.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: #fff
}

    .order-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(20,40,80,.1);
        border-color: #c5d5f3
    }

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

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

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

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

    .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 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;
    
}

/* center */
.c-head {
    padding: 1rem 1.25rem .5rem
}

    .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: #1b2b4a
    }

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

    .tabs-nav button {
        border: 0;
        background: none;
        padding: .8rem 1rem;
        color: #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: #fff
}

    .box h6 {
        font-weight: 700;
        font-size: 1.05rem;
        color: #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: #fff
}

    .qty button {
        border: 0;
        background: #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: #f2f6fc;
        color: #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: #eef2f8
    }

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

        .table-pos tbody tr:hover, .table-pos tbody tr.sel {
            background: #eaf1ff
        }

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

.ib {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    display: inline-grid;
    place-items: center;
    color: #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: #f6c9c6;
        background: #fff5f4
    }

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

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

.kot {
    background: #eef2f9;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .3rem .8rem;
    font-weight: 600
}

/* right */
.r-head {
    display: flex;
    gap: .8rem;
    align-items: center;
    padding: 1rem;
    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: #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 {
    display: grid;
    grid-template-columns: 22px 1fr auto 78px;
    gap: .5rem;
    align-items: center;
    padding: .7rem 1rem;
    border-top: 1px solid #eef2f8;
    transition: background .15s
}

    .cart-row:hover {
        background: #f7faff
    }

    .cart-row .n {
        color: #33445f;
        font-size: .9rem
    }

    .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: 600;
        font-size: .9rem
    }

    .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: .8rem 1rem;
    border-top: 1px solid var(--line)
}

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

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

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

    .grand span:last-child {
        color: #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: #ff3b30;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: .7rem;
    display: grid;
    place-items: center;
    font-weight: 700;
    box-shadow: 0 0 0 3px #fff
}

/* 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: #f6f8fc;
        color: #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: #fff;
    transition: .2s
}

    .tbl:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(20,40,80,.1)
    }

    .tbl i {
        font-size: 1.4rem
    }

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

    .tbl.busy {
        background: #fff8e6;
        border-color: #f3dca0
    }

        .tbl.busy i {
            color: #c88a00
        }

    .tbl.free {
        background: #eefaf3;
        border-color: #bfe8d0
    }

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

    .tbl.cur {
        background: var(--brand-soft);
        border: 2px solid var(--brand)
    }

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

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

    .kv > div {
        background: #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: #33445f;
    font-size: .9rem
}
/* responsive */
@media (max-width:1399px) {
    .panel-left {
        flex-basis: 280px
    }

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

@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: #f4f7fc;
    color: var(--brand);
    border-color: var(--line)
}

.btn-check:checked + .chip {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 3px 8px rgba(20,86,217,.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: #fff;
    display: grid;
    text-decoration: none
}

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

    .list-group .order-card.active {
        background: #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: #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: #33445f;
        background: #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: #f1f6ff;
    color: #4d72a8;
    border: 1px solid #dce8f8;
}

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

.c-info .c-badge-waiter {
    background: #fff9ed;
    color: #9a7a3f;
    border: 1px solid #f5e9c9;
}
/* scrollbar hide (scroll phir bhi kaam karega) */
.panel-scroll,
.tabs-nav,
.table-responsive,
.orders {
    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 {
        width: 0;
        height: 0;
        display: none; /* Chrome, Edge, Safari */
    }