/* ==========================================================================
   Market - back office
   A light, glassy shell: translucent surfaces over a soft colour wash, wide
   corner radii, and shadows that lift rather than outline. Built on top of
   Bootstrap 5; the POS screen has its own sheet (pos.css).
   ========================================================================== */

:root {
    /* Brand */
    --brand:        #0f9d63;
    --brand-2:      #12b981;
    --brand-dark:   #0a7a4c;
    --brand-soft:   #e7f7f0;
    --brand-glow:   rgba(18, 185, 129, .30);
    --accent:       #f5a524;
    --accent-soft:  #fdf3e0;
    --danger:       #e5484d;
    --danger-soft:  #fdecec;
    --info:         #3b82f6;
    --info-soft:    #e9f1fe;

    /* Ink */
    --ink:          #0f172a;
    --ink-soft:     #475569;
    --ink-faint:    #94a3b8;

    /* Glass */
    --glass:        rgba(255, 255, 255, .72);
    --glass-strong: rgba(255, 255, 255, .86);
    --glass-quiet:  rgba(255, 255, 255, .55);
    --hairline:     rgba(15, 23, 42, .07);
    --edge:         rgba(255, 255, 255, .75);
    --blur:         saturate(165%) blur(18px);

    --canvas:       #f4f7fb;

    /* Shape */
    --r-sm:  10px;
    --r:     14px;
    --r-lg:  20px;
    --r-xl:  26px;

    /* Elevation */
    --lift-1: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
    --lift-2: 0 2px 6px rgba(15, 23, 42, .05), 0 12px 34px rgba(15, 23, 42, .08);
    --lift-3: 0 20px 60px rgba(15, 23, 42, .16);

    --sidebar-w: 254px;
    --topbar-h:  70px;
}

* { box-sizing: border-box; }

/* The colour wash everything else floats on. Painted straight onto the body and
   fixed in place: a negative-z pseudo-element under a backdrop-filter is a
   stacking-context trap and paints unreliably. */
body.app-body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    background-color: var(--canvas);
    background-image:
        radial-gradient(760px 520px at 8% -6%,  rgba(18, 185, 129, .16), transparent 62%),
        radial-gradient(680px 480px at 98% 4%,  rgba(59, 130, 246, .14), transparent 60%),
        radial-gradient(720px 560px at 62% 104%, rgba(168, 85, 247, .10), transparent 62%),
        linear-gradient(180deg, #f7fafc 0%, #eef2f8 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ------------------------------------------------------------ shell ----- */

.app-shell { display: flex; min-height: 100vh; }

/* A floating glass column, not a wall. It is inset from the window edges, so
   the reserved space (--sidebar-w) is wider than the panel itself. */
.app-sidebar {
    position: fixed;
    inset-block: 12px;
    inset-inline-start: 12px;
    width: calc(var(--sidebar-w) - 24px);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    border-radius: var(--r-xl);
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--edge);
    box-shadow: var(--lift-2);
    overflow: hidden;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}

.app-main {
    flex: 1;
    min-width: 0;
    margin-inline-start: var(--sidebar-w);
    display: flex;
    flex-direction: column;
}

.app-content { padding: 20px 26px 44px; flex: 1; }

/* ---------------------------------------------------------- sidebar ----- */

.sidebar-brand { padding: 14px 14px 16px; }
.sidebar-brand a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }

.brand-mark {
    width: 42px; height: 42px; border-radius: var(--r);
    background: linear-gradient(145deg, var(--brand-2), var(--brand-dark));
    color: #fff;
    display: grid; place-items: center; font-size: 20px; flex: 0 0 42px;
    box-shadow: 0 6px 18px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.brand-text strong { display: block; font-size: 15px; line-height: 1.2; letter-spacing: -.01em; }
.brand-text small { color: var(--ink-faint); font-size: 11px; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .12); border-radius: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

/* Section headings are buttons that fold their group away. Only the group
   holding the current page opens on load, which keeps 23 links off the
   scrollbar without hiding where you are. */
.nav-section {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: transparent; border: 0; text-align: start;
    font-size: 10px; text-transform: uppercase; letter-spacing: .11em;
    color: var(--ink-faint); padding: 14px 12px 7px; font-weight: 700;
    cursor: pointer; border-radius: 9px;
    transition: color .16s, background .16s;
}
.nav-section span { flex: 1; }
.nav-section i {
    font-size: 11px; opacity: .8;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.nav-section:hover { color: var(--ink-soft); background: rgba(255, 255, 255, .6); }
.nav-section.is-closed i { transform: rotate(-90deg); }
html[dir="rtl"] .nav-section.is-closed i { transform: rotate(90deg); }

/* 0fr -> 1fr animates to the group's real height with no magic numbers. */
.nav-group {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .22s cubic-bezier(.4, 0, .2, 1);
}
.nav-group > ul { overflow: hidden; min-height: 0; }
.nav-group.is-closed { grid-template-rows: 0fr; }

.nav-list { list-style: none; margin: 0; padding: 0; }

.nav-list .nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: 11px;
    color: var(--ink-soft); text-decoration: none;
    font-size: 13.5px; line-height: 1.3; font-weight: 500;
    position: relative;
    transition: background .16s, color .16s, transform .16s;
}

.nav-list .nav-link i { font-size: 16px; width: 18px; text-align: center; opacity: .7; }

.nav-list .nav-link:hover {
    background: rgba(255, 255, 255, .8);
    color: var(--ink);
    box-shadow: var(--lift-1);
}

.nav-list .nav-link.active {
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    color: #fff; font-weight: 600;
    box-shadow: 0 6px 18px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.nav-list .nav-link.active i { opacity: 1; }

.sidebar-footer { padding: 10px 14px 14px; }

.btn-pos {
    background: linear-gradient(135deg, #ffc247, var(--accent));
    border: none; color: #43310a;
    font-weight: 700; padding: 13px; border-radius: var(--r); font-size: 14.5px;
    box-shadow: 0 8px 22px rgba(245, 165, 36, .34), inset 0 1px 0 rgba(255, 255, 255, .5);
    transition: transform .16s, box-shadow .16s;
}
.btn-pos:hover {
    background: linear-gradient(135deg, #ffcb5e, #f8ae33);
    color: #43310a; transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(245, 165, 36, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .32);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    z-index: 1030; display: none;
}
.sidebar-backdrop.show { display: block; }

/* ----------------------------------------------------------- topbar ----- */

.app-topbar {
    height: var(--topbar-h);
    display: flex; align-items: center; gap: 14px;
    padding: 0 26px;
    position: sticky; top: 0; z-index: 1020;
    background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .58));
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--hairline);
}

.topbar-title { flex: 1; min-width: 0; }
.topbar-title h1 { font-size: 19px; font-weight: 680; margin: 0; letter-spacing: -.022em; }
.topbar-title p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-faint); }

.topbar-actions { display: flex; align-items: center; gap: 9px; }
.topbar-buttons { display: flex; gap: 8px; margin-inline-end: 4px; }

.btn-icon {
    width: 40px; height: 40px; border-radius: 12px;
    border: 1px solid var(--edge);
    background: var(--glass-strong);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    color: var(--ink-soft);
    display: grid; place-items: center; font-size: 16px; padding: 0;
    box-shadow: var(--lift-1);
    transition: transform .16s, box-shadow .16s, color .16s;
}
.btn-icon:hover { color: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--lift-2); }

.btn-user {
    display: flex; align-items: center; gap: 10px;
    background: var(--glass-strong);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--edge); border-radius: 14px;
    padding: 5px 12px 5px 6px; color: var(--ink);
    box-shadow: var(--lift-1);
    transition: transform .16s, box-shadow .16s;
}
.btn-user:hover { transform: translateY(-1px); box-shadow: var(--lift-2); color: var(--ink); }
.btn-user .avatar {
    width: 32px; height: 32px; border-radius: 10px;
    background: linear-gradient(145deg, var(--brand-2), var(--brand-dark));
    color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 13px; text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-user .user-meta { text-align: start; line-height: 1.18; }
.btn-user .user-meta strong { display: block; font-size: 13px; font-weight: 600; }
.btn-user .user-meta small { font-size: 11px; color: var(--ink-faint); }
.btn-user i { font-size: 11px; color: var(--ink-faint); }

.dropdown-menu {
    border: 1px solid var(--edge);
    border-radius: var(--r);
    background: var(--glass-strong);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--lift-2);
    padding: 6px;
}
.dropdown-item { border-radius: 9px; padding: 8px 12px; font-size: 13.5px; }
.dropdown-item:hover { background: var(--brand-soft); color: var(--brand-dark); }
.dropdown-item.active { background: linear-gradient(135deg, var(--brand-2), var(--brand)); }

/* ------------------------------------------------------------ cards ----- */

.card {
    border: 1px solid var(--edge);
    border-radius: var(--r-lg);
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--lift-1);
    overflow: hidden;
}

/* Cards that are links lift on hover. */
a.card { transition: transform .18s, box-shadow .18s; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--hairline);
    padding: 16px 20px; display: flex; align-items: center; gap: 12px;
}
.card-header h2, .card-header h3 { font-size: 15px; font-weight: 660; margin: 0; letter-spacing: -.01em; }
.card-header .spacer { flex: 1; }
.card-body { padding: 20px; }
.card-footer { background: transparent; border-top: 1px solid var(--hairline); padding: 16px 20px; }

/* ------------------------------------------------------- stat tiles ----- */

.stat-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 22px;
}

.stat-card {
    position: relative;
    background: var(--glass);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--edge);
    border-radius: var(--r-lg); padding: 18px 20px;
    display: flex; align-items: flex-start; gap: 15px;
    box-shadow: var(--lift-1);
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }

/* A faint tint bleeding in from the corner, keyed to the tile's mood. */
.stat-card::after {
    content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -18%;
    width: 190px; height: 190px; border-radius: 50%;
    background: radial-gradient(circle, var(--brand-glow), transparent 70%);
    pointer-events: none;
}
.stat-card.is-warning::after { background: radial-gradient(circle, rgba(245, 165, 36, .26), transparent 70%); }
.stat-card.is-danger::after  { background: radial-gradient(circle, rgba(229, 72, 77, .22), transparent 70%); }
.stat-card.is-info::after    { background: radial-gradient(circle, rgba(59, 130, 246, .22), transparent 70%); }

.stat-card .stat-icon {
    width: 46px; height: 46px; border-radius: 14px; flex: 0 0 46px;
    display: grid; place-items: center; font-size: 20px;
    background: linear-gradient(145deg, var(--brand-2), var(--brand-dark));
    color: #fff;
    box-shadow: 0 6px 16px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.stat-card.is-warning .stat-icon {
    background: linear-gradient(145deg, #ffc247, #e0900e);
    box-shadow: 0 6px 16px rgba(245, 165, 36, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.stat-card.is-danger .stat-icon {
    background: linear-gradient(145deg, #f2666a, #c93338);
    box-shadow: 0 6px 16px rgba(229, 72, 77, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.stat-card.is-info .stat-icon {
    background: linear-gradient(145deg, #60a5fa, #2563eb);
    box-shadow: 0 6px 16px rgba(59, 130, 246, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.stat-card .stat-label { font-size: 11.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .07em; font-weight: 650; }
.stat-card .stat-value { font-size: 26px; font-weight: 720; line-height: 1.12; margin-top: 4px; letter-spacing: -.028em; }
.stat-card .stat-hint  { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }

/* ----------------------------------------------------------- tables ----- */

.table-wrap { overflow-x: auto; }

.table { margin: 0; font-size: 13.5px; --bs-table-bg: transparent; }
.table > thead > tr > th {
    background: rgba(255, 255, 255, .5);
    border-bottom: 1px solid var(--hairline);
    font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-faint); font-weight: 700; padding: 12px 16px; white-space: nowrap;
}
.table > tbody > tr > td {
    padding: 12px 16px; vertical-align: middle;
    border-color: var(--hairline); background: transparent;
}
.table > tbody > tr { transition: background .14s; }
.table > tbody > tr:hover > td { background: rgba(255, 255, 255, .62); }
.table > tfoot > tr > td { padding: 13px 16px; border-top: 1px solid var(--hairline); background: rgba(255, 255, 255, .45); }
.table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .muted { color: var(--ink-faint); font-size: 12.5px; }

.empty-state { text-align: center; padding: 54px 20px; color: var(--ink-faint); }
.empty-state i { font-size: 38px; opacity: .35; display: block; margin-bottom: 12px; }

/* ------------------------------------------------------------ forms ----- */

.form-label { font-size: 12.5px; font-weight: 620; color: var(--ink-soft); margin-bottom: 6px; }

.form-control, .form-select {
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 12px; padding: 10px 13px; font-size: 14px;
    background: rgba(255, 255, 255, .8);
    transition: border-color .16s, box-shadow .16s, background .16s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-2);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(18, 185, 129, .14);
}
.form-control::placeholder { color: var(--ink-faint); }
.form-text { font-size: 12px; color: var(--ink-faint); }
.form-check-input { border-color: rgba(15, 23, 42, .22); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(18, 185, 129, .14); border-color: var(--brand-2); }

.btn {
    border-radius: 12px; font-size: 14px; font-weight: 560; padding: 10px 18px;
    transition: transform .16s, box-shadow .16s, background .16s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    border: none; color: #fff;
    box-shadow: 0 6px 18px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #16c98d, var(--brand-dark));
    box-shadow: 0 10px 26px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.btn-outline-primary { color: var(--brand-dark); border-color: rgba(18, 185, 129, .4); background: rgba(255, 255, 255, .6); }
.btn-outline-primary:hover { background: linear-gradient(135deg, var(--brand-2), var(--brand)); border-color: transparent; }

.btn-outline-secondary {
    color: var(--ink-soft); border-color: rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .7);
}
.btn-outline-secondary:hover { background: #fff; color: var(--ink); border-color: rgba(15, 23, 42, .2); }

.btn-outline-danger { color: var(--danger); border-color: rgba(229, 72, 77, .35); background: rgba(255, 255, 255, .6); }
.btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); }

.btn-danger { background: linear-gradient(135deg, #f2666a, #d13a3f); border: none; box-shadow: 0 6px 18px rgba(229, 72, 77, .3); }
.btn-link { color: var(--ink-soft); text-decoration: none; }
.btn-link:hover { color: var(--brand-dark); }

.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }

.filter-bar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
    padding: 16px 20px; border-bottom: 1px solid var(--hairline);
    background: rgba(255, 255, 255, .35);
}
.filter-bar .form-control, .filter-bar .form-select { min-width: 155px; }

/* ----------------------------------------------------------- badges ----- */

.badge { font-weight: 650; font-size: 11.5px; padding: 5px 11px; border-radius: 999px; letter-spacing: .01em; }
.badge-soft-success { background: var(--brand-soft); color: var(--brand-dark); }
.badge-soft-danger  { background: var(--danger-soft); color: #b52a2f; }
.badge-soft-warning { background: var(--accent-soft); color: #9a6407; }
.badge-soft-info    { background: var(--info-soft); color: #1d4ed8; }
.badge-soft-muted   { background: rgba(15, 23, 42, .06); color: var(--ink-soft); }

/* ------------------------------------------------------------ alerts ---- */

.alert {
    border: 1px solid var(--edge);
    border-radius: var(--r);
    font-size: 13.5px; display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px;
    box-shadow: var(--lift-1);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.alert i { font-size: 17px; margin-top: 1px; }
.alert-success { background: rgba(231, 247, 240, .85); color: var(--brand-dark); }
.alert-danger  { background: rgba(253, 236, 236, .85); color: #b52a2f; }
.alert-warning { background: rgba(253, 243, 224, .85); color: #9a6407; }
.alert-info    { background: rgba(233, 241, 254, .85); color: #1d4ed8; }

/* -------------------------------------------------------- auth page ----- */

body.auth-body {
    margin: 0; min-height: 100vh;
    display: grid; place-items: center;
    font-family: system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
    padding: 24px;
    overflow: hidden;
    background-color: #0b1220;
    background-image:
        radial-gradient(620px 460px at 18% 12%, rgba(18, 185, 129, .34), transparent 62%),
        radial-gradient(560px 420px at 84% 82%, rgba(59, 130, 246, .28), transparent 60%),
        linear-gradient(150deg, #0b1220 0%, #10352a 55%, #0d2a3a 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.auth-wrap { width: 100%; max-width: 412px; position: relative; }

.auth-card {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--r-xl); padding: 38px 34px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
}
.auth-brand { text-align: center; margin-bottom: 26px; }
.auth-brand .brand-mark { width: 58px; height: 58px; font-size: 27px; margin: 0 auto 14px; border-radius: 18px; }
.auth-brand h1 { font-size: 22px; font-weight: 720; margin: 0; letter-spacing: -.02em; }
.auth-brand p { font-size: 13px; color: var(--ink-faint); margin: 5px 0 0; }
.auth-locale { text-align: center; margin-top: 20px; position: relative; }
.auth-locale a { color: rgba(255, 255, 255, .6); text-decoration: none; font-size: 13px; margin: 0 9px; }
.auth-locale a.active, .auth-locale a:hover { color: #fff; font-weight: 600; }

/* --------------------------------------------------- line-item picker ---- */

.picker-cell { position: relative; min-width: 220px; }

.picker-results {
    position: absolute; z-index: 30; inset-inline-start: 0; inset-block-start: 100%;
    width: 350px; max-height: 290px; overflow-y: auto;
    background: var(--glass-strong);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--edge); border-radius: var(--r);
    box-shadow: var(--lift-3); display: none; padding: 6px;
}

.picker-option {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
    width: 100%; text-align: start; border: none; background: transparent;
    padding: 9px 11px; border-radius: 10px; cursor: pointer;
    transition: background .14s;
}
.picker-option:hover { background: var(--brand-soft); }
.picker-option .p-name { font-size: 13.5px; font-weight: 570; }
.picker-option .p-meta { grid-column: 1; font-size: 11.5px; color: var(--ink-faint); }
.picker-option .p-price {
    grid-row: 1 / span 2; align-self: center;
    font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-dark);
}

.line-table td { vertical-align: top; }
.line-table input { font-size: 13.5px; }
.line-total { font-variant-numeric: tabular-nums; font-weight: 620; padding-top: 8px; display: inline-block; }

.totals-box {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 16px 20px; border-top: 1px solid var(--hairline);
    background: rgba(255, 255, 255, .45);
}
.totals-box .label { font-size: 12.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.totals-box .value { font-size: 24px; font-weight: 740; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }

/* ---------------------------------------------------------- utility ----- */

.text-muted-soft { color: var(--ink-faint) !important; }
.num-cell { font-variant-numeric: tabular-nums; }
.cursor-pointer { cursor: pointer; }
.w-140 { width: 140px; }
.w-110 { width: 110px; }
.w-90  { width: 90px; }

.page-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.section-title {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-faint); margin: 24px 0 11px;
}

/* Bootstrap surfaces that would otherwise sit flat white on the wash. */
.collapse .form-control, .collapse .form-select { background: rgba(255, 255, 255, .9); }

/* -------------------------------------------------------- responsive ---- */

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(calc(-100% - 12px)); }
    html[dir="rtl"] .app-sidebar { transform: translateX(calc(100% + 12px)); }
    .app-sidebar.open { transform: translateX(0); }
    .app-main { margin-inline-start: 0; }
    .app-content { padding: 16px; }
    .app-topbar { padding: 0 16px; }
}

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

@media print {
    .app-sidebar, .app-topbar, .no-print { display: none !important; }
    body.app-body::before { display: none; }
    .app-main { margin: 0; }
    .app-content { padding: 0; }
    .card, .stat-card { border: none; box-shadow: none; background: #fff; backdrop-filter: none; }
}

/* ==========================================================================
   Collapsed sidebar (desktop)
   The rail keeps every destination one click away while giving the content
   ~165px back. State lives on <html> so it can be restored before first paint.
   ========================================================================== */

:root { --sidebar-w-collapsed: 88px; }

@media (min-width: 992px) {
    html.sidebar-collapsed .app-sidebar { width: calc(var(--sidebar-w-collapsed) - 24px); }
    html.sidebar-collapsed .app-main { margin-inline-start: var(--sidebar-w-collapsed); }

    /* Ease the width, not the transform: the transform transition belongs to
       the off-canvas slide and would fight this one. */
    .app-sidebar { transition: width .22s cubic-bezier(.4, 0, .2, 1), transform .24s cubic-bezier(.4, 0, .2, 1); }
    .app-main    { transition: margin-inline-start .22s cubic-bezier(.4, 0, .2, 1); }

    /* Brand shrinks to just its mark. */
    html.sidebar-collapsed .sidebar-brand { padding: 14px 8px 16px; }
    html.sidebar-collapsed .sidebar-brand a { justify-content: center; }
    html.sidebar-collapsed .brand-text { display: none; }

    /* Section headings become a hairline rule - the grouping survives, the
       words do not fit. */
    html.sidebar-collapsed .nav-section {
        font-size: 0; padding: 0; height: 0;
        border-bottom: 1px solid var(--hairline);
        margin: 8px 8px 10px;
        pointer-events: none;
    }
    html.sidebar-collapsed .nav-section i { display: none; }

    /* Folding is meaningless on the rail - there is nothing to read. */
    html.sidebar-collapsed .nav-group { grid-template-rows: 1fr; }

    html.sidebar-collapsed .sidebar-nav { padding: 4px 6px 16px; }

    html.sidebar-collapsed .nav-list .nav-link {
        justify-content: center;
        padding: 11px 0;
        gap: 0;
    }
    html.sidebar-collapsed .nav-list .nav-link i { font-size: 18px; opacity: .85; }
    html.sidebar-collapsed .nav-list .nav-link.active i { opacity: 1; }
    html.sidebar-collapsed .nav-list .nav-link span { display: none; }

    /* The POS shortcut keeps its colour, loses its label. */
    html.sidebar-collapsed .sidebar-footer { padding: 10px 8px 14px; }
    html.sidebar-collapsed .btn-pos { padding: 13px 0; font-size: 0; }
    html.sidebar-collapsed .btn-pos i { font-size: 18px; }

    /* Rotate the toggle so the icon reads as a state, not just a button. */
    html.sidebar-collapsed #sidebarToggle i { transform: rotate(90deg); }
    #sidebarToggle i { transition: transform .22s cubic-bezier(.4, 0, .2, 1); display: inline-block; }
}