/* =========================================================
   Futex POS – premium theme layer
   Load AFTER style.css:
   <link href="/assets/css/style.css" rel="stylesheet" />
   <link href="/assets/css/pos-theme.css" rel="stylesheet" />
   ========================================================= */

:root {
    --brand: #3b4fd8;
    --brand-2: #5b6cf0;
    --brand-deep: #1e2a78;
    --brand-soft: #eceffe;
    --accent: #f5a524;
    --bg: #eef1f8;
    --line: #e4e8f3;
    --text: #17203a;
    --muted: #6f7b96;
    --radius: 12px;
    --ease: cubic-bezier(.22, .8, .3, 1);
    --shadow: 0 1px 2px rgba(23,32,58,.04), 0 10px 30px -8px rgba(40,52,120,.14);
    --shadow-hover: 0 14px 30px -10px rgba(40,52,120,.28);
    --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(91,108,240,.16), transparent 60%),
        radial-gradient(700px 480px at 100% 0%, rgba(245,165,36,.10), transparent 60%),
        radial-gradient(800px 600px at 60% 110%, rgba(59,79,216,.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(255,255,255,.82);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(228,232,243,.9);
    box-shadow: 0 6px 24px -14px rgb(40 52 120 / 20%);
    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;
}
.btn:active { transform: scale(.96); }

.btn-brand {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: rgba(59,79,216,.35);
    background: #fff;
}
.btn-brand:hover {
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -8px rgba(59,79,216,.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(59,79,216,.65), inset 0 1px 0 rgba(255,255,255,.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(59,79,216,.7), inset 0 1px 0 rgba(255,255,255,.3);
}

.btn-pay {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #22c37a, #0e9a56);
    box-shadow: 0 8px 18px -8px rgba(14,154,86,.7), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-pay::after {               /* shine sweep on hover */
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 50%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg);
    transition: left .7s var(--ease);
}
.btn-pay:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -10px rgba(14,154,86,.75); }
.btn-pay:hover::after { left: 120%; }

.btn-light.border {
    background: #fff;
    border-color: var(--line) !important;
    color: #33415f;
}
.btn-light.border:hover {
    background: var(--brand-soft);
    border-color: rgba(59,79,216,.35) !important;
    color: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -10px rgba(59,79,216,.4);
}

.view-toggle .btn { border-color: var(--line); }

/* ---------- panels ---------- */
.workspace {
    gap: 0.5rem;
    padding: 0.5rem;
}

.panel {
    border: 1px solid rgba(255,255,255,.9);
    border-radius: var(--radius);
    background: rgba(255,255,255,.94);
    box-shadow: var(--shadow);
}

.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: #ccd3ea; border-radius: 8px; }
.panel-scroll::-webkit-scrollbar-thumb:hover { background: #a9b4dd; }

/* ---------- left: search, chips, order cards ---------- */
.ph h5 { font-weight: 800; letter-spacing: -.2px; }

.search input {
    height: 42px;
    border-radius: 12px;
    background: #f6f8fe;
    border: 1px solid transparent;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.search input:focus {
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(59,79,216,.14);
}

.chip {
    background: #f0f3fb;
    border-radius: 999px;
    padding: .4rem 0.8rem;
    font-weight: 600;
    transition: all .25s var(--ease);
}
.chip:hover { background: #e2e8fa; transform: translateY(-1px); }
.btn-check:checked + .chip {
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    box-shadow: 0 8px 16px -8px rgba(59,79,216,.7);
}

.list-group .order-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: .5rem .7rem;
    background: #fff;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s, background .28s;
}
.list-group .order-card:hover {
    background: #fff;
    transform: translateX(4px);
    border-color: rgba(59,79,216,.35);
    box-shadow: var(--shadow-hover);
}
.list-group .order-card.active {
    background: linear-gradient(135deg, #f3f5ff, #fff);
    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: #fff;
}
.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, #fff, rgba(255,255,255,.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, #f6f8ff, #fff);
}
.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(40,52,120,.4); }
.c-info .badge i { margin: 0; color: inherit; }

.nav-tabs.tabs-nav { background: #fff; padding: 0 1rem; }
.nav-tabs.tabs-nav .nav-link {
    position: relative;
    border-bottom: 0;
    color: #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: #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: #fafbff;
}

.box {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(23,32,58,.03);
    transition: box-shadow .3s var(--ease), border-color .3s;
}
.box:hover { box-shadow: 0 10px 24px -14px rgba(40,52,120,.3); border-color: #d5dcf2; }
.box h6 { font-weight: 800; color: var(--brand-deep); }

.form-control, .form-select, .input-group-text {
    border-radius: 11px;
    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: 11px 0 0 11px; }
.input-group > :last-child  { border-radius: 0 11px 11px 0; }
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(59,79,216,.14);
}
.lbl { font-weight: 600; }

/* ---------- tables ---------- */
.table-pos th {
    background: #f3f5fd;
    color: #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: #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(59,79,216,.5); }

.kot {
    background: linear-gradient(135deg, #fff6e0, #ffecc0);
    border-color: #f6d98f;
    color: #8a5a00;
    border-radius: 999px;
}

/* table grid + info cards */
.tbl { border-radius: 14px; transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.tbl:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.tbl.cur { background: linear-gradient(135deg, #eef1ff, #fff); box-shadow: 0 0 0 4px rgba(59,79,216,.12); }

.kv > div { border-radius: 12px; background: #f7f9ff; transition: transform .25s var(--ease), border-color .25s; }
.kv > div:hover { transform: translateY(-2px); border-color: rgba(59,79,216,.3); }
.kv b { font-family: var(--font-head); }

.timeline li > i { background: linear-gradient(135deg, var(--brand-soft), #fff); box-shadow: 0 0 0 3px #fff; }

/* ---------- right: cart ---------- */
.r-head {
    background: linear-gradient(135deg, #f3f5ff, #fff 70%);
    border-bottom: 1px solid var(--line);
}
.r-head .ic {
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    color: #fff;
    box-shadow: 0 10px 18px -8px rgba(59,79,216,.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: #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; }
.cart-row .pr { font-family: var(--font-head); font-weight: 700; }

.qty-bs .btn { border-radius: 0; }
.qty-bs .btn:hover { background: var(--brand); color: #fff; }

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

.grand {
    margin: .1rem 1rem 0;
    padding: .2rem 1.1rem;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-deep), var(--brand) 70%, var(--brand-2));
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    box-shadow: 0 14px 26px -12px rgb(30 42 120 / 24%), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.grand span:last-child {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.5px;
}

.kot-badge {
    background: linear-gradient(135deg, #ffb83d, var(--accent));
    color: #4a2e00;
    box-shadow: 0 0 0 3px #fff, 0 4px 8px rgba(245,165,36,.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; }
}