/* Branch Finance — design tokens inspired by the Lifecare Pharmacy POS reference */
:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f9fbfa;
    --ink: #1f2937;
    --ink-soft: #4b5563;
    --muted: #9ca3af;
    --border: #e5edf2;

    --primary: #1ea672;
    --primary-600: #15835a;
    --accent-green: #1ea672;
    --accent-green-dark: #15835a;
    --warn: #f6c66b;
    --pink: #f29ab0;
    --bank: #7fb6f0;
    --danger: #dc3545;
    --shadow-sm: 0 1px 2px rgba(20, 40, 70, .06);
    --shadow-md: 0 6px 18px rgba(20, 40, 70, .08);
    --radius: 10px;
    --radius-lg: 14px;
}

* { box-sizing: border-box; }

/* ----- Layout ----- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
}
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, Segoe, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
}
.app-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: calc(100vh - 64px);
}
.app-main {
    padding: 24px 28px 48px;
}

/* ----- Topbar ----- */
.app-topbar {
    height: 64px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar-left { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.topbar-right { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.language-switcher { position:relative; }
.language-switcher-btn {
    min-height:36px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 9px;
    border:1px solid #d5e6df;
    border-radius:999px;
    background:#f3faf7;
    color:#176f4c;
    font-size:12px;
    font-weight:750;
    line-height:1;
}
.language-switcher-btn:hover,
.language-switcher-btn:focus { border-color:#19a66b; background:#e8f6ef; outline:0; }
.language-switcher-current { min-width:25px; padding:4px 5px; border-radius:999px; background:#19a66b; color:#fff; font-size:10px; font-weight:850; text-align:center; }
.language-switcher-chevron { font-size:10px; }
.language-switcher-menu { min-width:188px; padding:6px; border:1px solid #d9e5e9; border-radius:10px; box-shadow:0 10px 26px rgba(24,54,79,.15); }
.language-switcher-menu .dropdown-header { padding:7px 10px; color:#577083; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.language-switcher-menu .dropdown-item { width:100%; padding:9px 10px; border:0; border-radius:6px; background:transparent; color:#284158; font-size:13px; font-weight:700; text-align:left; }
.language-switcher-menu .dropdown-item:hover,
.language-switcher-menu .dropdown-item.active { background:#e9f7f0; color:#15744e; }
.language-switcher-menu .dropdown-item .bi-check2 { opacity:0; }
.language-switcher-menu .dropdown-item.active .bi-check2 { opacity:1; }
@media (max-width: 650px) {
    .language-switcher-title { display:none; }
    .language-switcher-btn { min-width:36px; justify-content:center; padding:6px 8px; gap:5px; }
    .language-switcher-chevron { display:none; }
}
/* Admin global branch filter in topbar */
.branch-filter {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 12px; border-radius: 999px;
    background: #f4f9f7; border: 1px solid #e1efea;
    color: #1c9768; font-weight: 600; font-size: 12px;
}
.branch-filter-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.branch-filter-label i { font-size: 12px; }
.branch-filter-select {
    border: 1px solid #d6e6e0 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1c9768 !important;
    background-color: #fff !important;
    padding: 3px 28px 3px 8px !important;
    max-width: 180px;
    cursor: pointer;
}
.branch-filter-select:focus { border-color: #1b9365 !important; box-shadow: 0 0 0 3px rgb(33, 179, 123,.15) !important; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-logo {
    width: 40px; height: 40px;
    background: var(--accent-green);
    color: #fff;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    box-shadow: var(--shadow-sm);
}
.brand-name { font-weight: 700; letter-spacing: 1px; font-size: 18px; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); text-decoration: none; }
.user-avatar { font-size: 28px; color: #f0a868; line-height: 1; }
.user-name { font-weight: 500; }
.btn-bell {
    width: 40px; height: 40px; border-radius: 999px;
    background: #ebf1ef; color: var(--ink-soft);
    border: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
}

/* ----- Layout ----- */
.app-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: calc(100vh - 64px);
}
.app-main {
    padding: 24px 28px 48px;
}
.app-sidebar { background: #ffffff; padding: 24px 16px; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; border-right: 1px solid var(--border); }
.side-nav { display: flex; flex-direction: column; gap: 6px; }
.side-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius);
    color: #1f2937;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.side-link i { font-size: 18px; }
.side-link:hover { background: var(--primary); color: #fff; }
.side-link.active {
    background: var(--primary-600);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.side-version {
    color: var(--muted);
    font-size: 12px;
    padding: 8px 16px;
    cursor: default;
}

/* ----- Cards ----- */
.card-soft {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}
.card-soft + .card-soft { margin-top: 16px; }
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.page-head h1 { font-size: 20px; font-weight: 700; margin: 0; }
.crumbs { color: var(--ink-soft); font-size: 13px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs .back-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 12px 4px 8px; border-radius:999px; background:#f1f5f9; color:#475569; font-size:12px; font-weight:600; text-decoration:none; transition:all .15s; }
.crumbs .back-pill:hover { background:#e2e8f0; color:#0f172a; }
.crumbs .back-pill i { font-size:13px; }
.crumbs .sep { color:#cbd5e1; font-size:14px; font-weight:300; }
.crumbs .home-link { display:inline-flex; align-items:center; gap:4px; color:#64748b; font-size:13px; }
.crumbs .home-link:hover { color:var(--primary); }
.crumbs .current { color:#0f172a; font-weight:600; font-size:13px; }

/* ----- Tables ----- */
.table-soft { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-soft thead th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .5px;
    color: var(--accent-green);
    background: #f5fbf7;
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid #e1efe6;
    font-weight: 700;
}
.table-soft tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    vertical-align: middle;
    white-space: nowrap;
}
.table-soft tbody tr:nth-child(even) td { background: #f9fafa; }
.table-soft tbody tr:hover td { background: var(--surface-2); }
.table-soft .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ----- Buttons ----- */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
.btn-success { background: var(--accent-green); border-color: var(--accent-green); }
.btn-success:hover { background: var(--accent-green-dark); border-color: var(--accent-green-dark); }
.btn-pill { border-radius: 999px; padding: 10px 22px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-size: 12px; }
.btn-cash { background: #e9ecef; color: var(--ink); }
.btn-credit { background: var(--warn); color: #4a3500; }
.btn-mpesa { background: var(--pink); color: #5a1830; }
.btn-bank { background: var(--bank); color: #225a45; }
.btn-pill:hover { filter: brightness(.95); }

/* ----- Forms ----- */
.form-label { font-weight: 600; color: var(--ink-soft); font-size: 13px; }
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    padding: 10px 12px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(33, 179, 123, .15);
}
.input-card {
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    padding: 16px;
    background: #fff;
    position: relative;
    margin-top: 8px;
}
.input-card label.floating {
    position: absolute; top: -10px; left: 14px;
    background: #fff; padding: 0 8px; color: var(--primary);
    font-size: 12px; font-weight: 600;
}

/* ----- Stat cards (dashboard) ----- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.stat-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 20px 22px;
    transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.stat-card .label { color: #64748b; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.stat-card .value { font-size: 26px; font-weight: 800; margin-top: 0; color: #0f172a; line-height: 1.2; }
.stat-card .delta { font-size: 12px; margin-top: 4px; color: #94a3b8; }

/* ============================================================
   Premium stat cards — denser, tinted gradient backgrounds
   (scoped: only when .stat-grid has .premium)
   ============================================================ */
.stat-grid.premium { gap: 12px; }
.stat-grid.premium .stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 13px;
    padding: 13px 14px 12px;
    color: #0f172a;
    transition: transform .2s, box-shadow .2s;
}
.stat-grid.premium .stat-card::after {
    content: '';
    position: absolute;
    right: -30px; top: -30px;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    pointer-events: none;
}
.stat-grid.premium .stat-card .stat-ic {
    width: 30px; height: 30px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
    color: #fff;
    margin-bottom: 8px;
    box-shadow: 0 4px 10px rgba(15,23,42,.16);
}
.stat-grid.premium .stat-card .label {
    color: rgba(15,23,42,.62);
    font-size: 10px;
    letter-spacing: .07em;
    font-weight: 700;
    margin-bottom: 3px;
    text-transform: uppercase;
}
.stat-grid.premium .stat-card .value { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: #0f172a; line-height: 1.15; }
.stat-grid.premium .stat-card .delta { color: rgba(15,23,42,.55); font-weight: 600; font-size: 11px; margin-top: 2px; }
.stat-grid.premium .stat-card.c-green { background: linear-gradient(135deg, #e2ede9 0%, #c0dfd3 100%); }
.stat-grid.premium .stat-card.c-blue  { background: linear-gradient(135deg, #dbeafe 0%, #d3eae1 100%); }
.stat-grid.premium .stat-card.c-indigo{ background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); }
.stat-grid.premium .stat-card.c-amber { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.stat-grid.premium .stat-card.c-red   { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); }
.stat-grid.premium .stat-card.c-violet{ background: linear-gradient(135deg, #f0f7f4 0%, #e3f1ec 100%); }
.stat-grid.premium .stat-card.c-slate { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); }
.stat-grid.premium .stat-card .ic-green  { background: #19895e; }
.stat-grid.premium .stat-card .ic-blue   { background: #21b47b; }
.stat-grid.premium .stat-card .ic-indigo { background: #23bf83; }
.stat-grid.premium .stat-card .ic-amber  { background: #d97706; }
.stat-grid.premium .stat-card .ic-red    { background: #dc2626; }
.stat-grid.premium .stat-card .ic-violet { background: #23bd82; }
.stat-grid.premium .stat-card .ic-slate  { background: #475569; }

/* ----- Auth ----- */
.auth-main {
    min-height: 100vh; background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.auth-card {
    width: 100%; max-width: 420px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 32px;
    border: 1px solid var(--border);
}
.auth-logo {
    width: 56px; height: 56px; border-radius: 999px;
    background: var(--accent-green); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; margin-bottom: 16px;
}

/* Login split layout with quiet brand slideshow */
.auth-split {
    width: 100%;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    min-height: 540px;
}
.auth-split .auth-card {
    border: none; border-radius: 0; box-shadow: none;
    align-self: center; max-width: none;
    padding: 48px 56px;
}
.auth-stage {
    position: relative;
    background: #0f3a52;
    overflow: hidden;
    color: #fff;
}
.auth-slideshow { position: absolute; inset: 0; }
.auth-slideshow .slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    animation: authFade 30s infinite;
}
.auth-slideshow .slide:nth-child(1) { animation-delay:  0s; }
.auth-slideshow .slide:nth-child(2) { animation-delay:  6s; }
.auth-slideshow .slide:nth-child(3) { animation-delay: 12s; }
.auth-slideshow .slide:nth-child(4) { animation-delay: 18s; }
.auth-slideshow .slide:nth-child(5) { animation-delay: 24s; }
@keyframes authFade {
    0%   { opacity: 0; transform: scale(1.05); }
    4%   { opacity: 1; transform: scale(1.00); }
    20%  { opacity: 1; transform: scale(1.02); }
    24%  { opacity: 0; transform: scale(1.04); }
    100% { opacity: 0; }
}
.auth-stage-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(8,40,60,.78), rgba(8,40,60,.55) 55%, rgba(8,40,60,.85));
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 36px 40px;
}
.auth-stage-overlay h2 { font-size: 22px; font-weight: 700; margin: 0 0 6px; letter-spacing: .3px; }
.auth-stage-overlay p { margin: 0; font-size: 13px; color: rgba(255,255,255,.82); max-width: 380px; }
@media (max-width: 820px) {
    .auth-split { grid-template-columns: 1fr; max-width: 460px; }
    .auth-stage { min-height: 180px; }
    .auth-split .auth-card { padding: 32px; }
}

/* ----- Status badges ----- */
.badge-status { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.badge-paid    { background: #e6eeeb; color: #2a6e54; }
.badge-partial { background: #fff3d6; color: #8a5a00; }
.badge-unpaid  { background: #fde2e6; color: #a3142a; }
.badge-claimed { background: #e3eefd; color: #15448a; }
.badge-pending { background: #fff3d6; color: #8a5a00; }
.badge-approved  { background: #e3eefd; color: #15448a; }
.badge-dispatched{ background: #e6e7ff; color: #4338ca; }
.badge-declined  { background: #fde2e6; color: #a3142a; }
.badge-agent     { background: #eaf3f0; color: #20ad77; }
/* Payment-mode badges */
.badge-status.badge-cash   { background: #e6eeeb; color: #2a6e54; }
.badge-status.badge-credit { background: #fff3d6; color: #8a5a00; }
.badge-status.badge-mpesa  { background: #fde9ef; color: #c2185b; }
.badge-status.badge-bank   { background: #e3eefd; color: #15448a; }

/* ============================================================
   POS — New Sale (checkout)
   ============================================================ */
.pos-main-wrap { display: block; }
.pos-main { display: flex; gap: 16px; align-items: stretch; }
.pos-left {
    flex: 0 0 520px; min-width: 0;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px;
}
.pos-right {
    flex: 1 1 auto; min-width: 0;
    background: #f0f5f3; border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex; flex-direction: column;
    overflow: hidden;
    /* Desktop POS: lock the panel to the viewport so the totals row and the
       payment buttons always stay visible — the cart scrolls internally. */
    height: calc(100vh - 175px);
    max-height: calc(100vh - 175px);
    height: calc(100dvh - 175px);
    max-height: calc(100dvh - 175px);
}
.pos-store-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: #e8f3ec; color: var(--accent-green-dark);
    font-weight: 700; font-size: 12px; border: 1px solid #d3ead8;
}
.pos-store-badge i { font-size: 12px; }
.pos-item-grid {
    background: #fff; border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 620px; overflow-y: auto; padding: 16px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 16px;
}
.pos-item-card {
    text-align: center; cursor: pointer; user-select: none;
    padding: 10px 6px; border-radius: 12px;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    border: 1px solid transparent;
}
.pos-item-card:hover { transform: translateY(-2px); border-color: #ddede7; box-shadow: 0 6px 16px rgb(33, 179, 123,.10); }
.pos-item-card:active { transform: translateY(0); }
.pos-item-thumb {
    width: 58px; height: 58px; border-radius: 50%;
    background: linear-gradient(135deg, #eaf1fe, #e9efed);
    margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-size: 22px;
}
.pos-item-name { font-weight: 700; font-size: 12.5px; color: var(--ink); line-height: 1.3; }
.pos-item-code { color: #9aa7b5; font-size: 11px; margin-top: 2px; }
.pos-item-price { color: var(--accent-green-dark); font-size: 12px; font-weight: 700; margin-top: 4px; }
.pos-item-stock { color: #c0392b; font-size: 11px; font-weight: 700; margin-top: 2px; }
.pos-item-stock.ok { color: #1a8f62; }
.pos-item-price.po-cost-link { cursor: pointer; }
.pos-item-price.po-cost-link:hover { text-decoration: underline dotted; }
/* Adjustment lines — availability pill in the standard POS tone */
.adj-avail { display:inline-block; padding:3px 10px; border-radius:999px; background:#eef2f6; color:#566b80; font-size:11.5px; font-weight:700; line-height:1.4; }
.adj-avail.ok { background:#ebf0ee; color:#2a6e54; }
.adj-avail.zero { background:#fdeaea; color:#c0392b; }
.pos-empty { grid-column: 1 / -1; text-align: center; color: #94a3b8; padding: 40px 0; font-size: 13px; }

.sales-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: #f2f6f4; border-bottom: 1px solid var(--border);
}
.sales-header h2 { margin: 0; font-size: 15px; color: var(--ink); font-weight: 800; letter-spacing: .3px; }
.date-box { background: #fff; border: 1px solid var(--border); padding: 6px 12px; font-size: 13px; color: var(--ink); border-radius: 8px; font-weight: 600; }
.customer-row { padding: 12px 16px; }
.pos-cart-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.cart-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cart-table thead th {
    background: #f2f6f4; padding: 8px 12px; font-size: 11px; font-weight: 800;
    color: var(--accent-green-dark); text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap;
}
.cart-table thead th.num { text-align: right; }
.cart-table tbody td { padding: 9px 12px; border-bottom: 1px solid #e9efed; vertical-align: middle; }
.cart-table tbody td.num { text-align: right; white-space: nowrap; }
.cart-name { font-weight: 600; color: var(--ink); }
.cart-code { display: block; color: #9aa7b5; font-size: 10.5px; }
.qty-input { width: 52px; padding: 4px; border: 1px solid var(--border); text-align: center; border-radius: 6px; font-size: 12px; }
.disc-input { width: 62px; padding: 4px; border: 1px solid var(--border); text-align: right; border-radius: 6px; font-size: 12px; }
.trash { color: #c084c8; cursor: pointer; text-align: center; font-size: 14px; }
.trash:hover { color: #c0392b; }
.cart-body-empty {
    flex: 1 1 auto; min-height: 120px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 13px; gap: 8px;
}
.cart-body-empty i { font-size: 34px; opacity: .45; }

.totals-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-top: 1px solid var(--border); background: #fff;
}
.totals-row .total-label { font-weight: 800; color: var(--ink); font-size: 13px; }
.totals-row .clear-link { color: #c0392b; font-size: 12px; cursor: pointer; margin-right: 12px; font-weight: 600; }
.totals-row .total-amount { font-weight: 800; font-size: 19px; color: var(--ink); }
.payment-row { display: flex; border-top: 1px solid var(--border); }
.pay-btn {
    flex: 1; text-align: center; padding: 15px 0; font-weight: 800;
    letter-spacing: .5px; color: #fff; cursor: pointer; font-size: 13px;
    border: 0; transition: filter .12s ease;
}
.pay-btn:hover { filter: brightness(1.06); }
.pay-btn:active { filter: brightness(.96); }
.pay-btn:disabled { opacity: .55; cursor: not-allowed; }
.pay-cash   { background: #1c9b6a; }
.pay-credit { background: #f0a93b; }
.pay-mpesa  { background: #ec4899; }
.pay-bank   { background: #7fb3e8; }

/* ============================================================
   Sales register — two-panel counter layout
   The sales page deliberately uses its own compact New / Orders / Bills
   rail so the cashier has the whole desktop width for stock and the cart.
   No checkout behaviour is changed by these rules.
   ============================================================ */
body:has(.pos-screen) .app-shell {
    grid-template-columns: minmax(0, 1fr);
}
body:has(.pos-screen) .app-sidebar { display: none; }
body:has(.pos-screen) .app-main {
    padding: 18px 18px 12px;
    min-height: calc(100dvh - 64px);
}
.pos-screen {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 18px;
    height: calc(100dvh - 94px);
    min-height: 620px;
}
.pos-workspace { display:flex; flex-direction:column; min-width:0; min-height:0; }
.pos-breadcrumb {
    display:flex;
    align-items:center;
    min-height:30px;
    gap:10px;
    color:#526480;
    font-family:Georgia, 'Times New Roman', serif;
    font-size:16px;
}
.pos-breadcrumb a { color:#526480; text-decoration:none; }
.pos-breadcrumb a:hover { color:#20ac76; }
.pos-breadcrumb strong { color:#111827; font-family:var(--font-ui); font-size:18px; }
.pos-section-nav {
    align-self: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.pos-section-nav a {
    display: block;
    padding: 12px 14px;
    color: #172033;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    border-bottom: 1px solid #e2e8f0;
}
.pos-section-nav a:last-child { border-bottom: 0; }
.pos-section-nav a:hover { color: #1ea571; background: #f8fbfa; }
.pos-section-nav a.active { background: #20ac76; color: #fff; }
.pos-main-wrap { min-width: 0; height:100%; flex:1 1 auto; min-height:0; }
.pos-main { gap: 18px; height: 100%; }
.pos-left {
    flex: 0 0 40%;
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 12px;
    border-radius: 5px;
    background: #fff;
    border-color: #cdd5df;
}
.pos-left .form-label {
    margin: 0 0 3px 7px;
    color: #536276;
    font-size: 10px;
    font-weight: 500;
}
.pos-left .form-select,
.pos-left .form-control {
    min-height: 36px;
    border-color: #c4cbd4;
    border-radius: 4px;
    box-shadow: none;
    font-size: 12px;
}
.pos-left .input-ic > i { display: none; }
.pos-left .input-ic .form-select { padding-left: 12px; }
.pos-left .search-field { margin-bottom: 0 !important; }
.pos-left .search-wrap > i,
.pos-left .search-clear { display: none; }
.pos-left .search-wrap .form-control { padding-left: 12px; }
.pos-store-badge {
    width: 100%;
    min-height: 36px;
    justify-content: center;
    border-radius: 4px;
    background: #fff;
    border-color: #c4cbd4;
    color: #536276;
    font-size: 11px;
}
.pos-item-grid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-top: 0;
    padding: 22px 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(165px, auto);
    gap: 12px 10px;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border: 0;
    border-radius: 0;
    background: #f6f9f8;
}
.pos-item-card {
    align-content: center;
    padding: 10px 8px;
    border: 0;
    border-radius: 0;
    position:relative;
}
.pos-item-card:hover {
    transform: none;
    background: rgba(255,255,255,.56);
    border-color: transparent;
    box-shadow: none;
}
.pos-item-card:focus-visible { outline:2px solid #20ac76; outline-offset:-3px; }
.pos-item-thumb {
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
    background: #d3d3d3;
    box-shadow: 0 3px 8px rgba(15,23,42,.12);
    color: #9aa8c6;
    font-size: 7px;
}
.pos-item-name {
    color: #111827;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}
.pos-item-code {
    margin-top: 3px;
    color: #8394ae;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    font-weight: 700;
}
.pos-item-price {
    margin-top: 5px;
    color: #8394ae;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14px;
    font-weight: 700;
}
.pos-item-stock,
.pos-item-stock.ok {
    margin-top: 6px;
    color: #ed6262;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    font-weight: 700;
}
.pos-right {
    height: 100%;
    max-height: none;
    border-radius: 5px;
    border-color: #cdd5df;
    background: #fff;
}
.sales-header {
    min-height: 42px;
    padding: 7px 12px;
    background: #f8f8f8;
    border-bottom-color: #d9dee5;
}
.sales-header h2 {
    color: #526480;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    letter-spacing: 0;
}
.date-box {
    min-width: 190px;
    padding: 6px 12px;
    border: 0;
    border-radius: 0;
    background: #eef0f3;
    color: #536276;
    font-size: 12px;
    font-weight: 500;
}
.customer-row { padding: 8px 12px 7px; }
.customer-row .input-ic { max-width: 460px; }
.customer-row .input-ic > i { display: none; }
.customer-row .form-control {
    min-height: 35px;
    padding-left: 12px;
    border-color: #c4cbd4;
    border-radius: 4px;
    box-shadow: none;
    font-size: 12px;
}
.customer-row .input-ic + .input-ic { display: none; }
.cart-table { font-size: 12px; }
.cart-table thead th {
    padding: 8px 9px;
    background: #f2f3fa;
    color: #26654d;
    font-size: 11px;
    border-bottom-color: #d6dce5;
}
.cart-table tbody td { padding: 9px; }
.cart-body-empty { color: transparent; }
.cart-body-empty i { display: none; }
.totals-row {
    padding: 12px;
    border-top: 0;
    background: #fff;
}
.totals-row .total-label,
.totals-row .total-amount {
    color: #526480;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 700;
}
.totals-row .total-amount { color: #111827; }
.clear-link { display: none; }
.payment-row { gap: 2px; padding: 0 12px 12px; border-top: 0; background: #fff; }
.pay-btn {
    padding: 10px 0;
    color: #8793a5;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: 2px;
}
.pay-btn i { display: none; }
.pay-cash { background: #fff; }
.pay-credit { background: #ffd28b; }
.pay-mpesa { background: #f89bb0; }
.pay-bank { background: #91bcef; }

@media (max-width: 991.98px) {
    body:has(.pos-screen) .app-shell { grid-template-columns: 1fr; }
    body:has(.pos-screen) .app-main { padding: 14px; }
    .pos-screen { display: block; height: auto; min-height: 0; }
    .pos-section-nav { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; }
    .pos-section-nav a { text-align: center; border-bottom: 0; border-right: 1px solid #e2e8f0; }
    .pos-section-nav a:last-child { border-right: 0; }
    .pos-main { height: auto; }
    .pos-left { flex: 1 1 auto; }
    .pos-right { height: auto; }
    .pos-item-grid { max-height: 520px; }
}

@media (max-width: 991.98px) {
    .pos-main { flex-direction: column; }
    .pos-left { flex: 1 1 auto; }
    .pos-right { height: auto; max-height: none; }
    .pos-item-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); max-height: 320px; }
    .pos-cart-scroll { min-height: 220px; }
}

/* ---- POS: tablet (stacked, comfortable touch) ---- */
@media (max-width: 767.98px) {
    .pos-left, .pos-right { width: 100%; }
    .pos-left { padding: 12px; }
    .pos-item-grid { max-height: 42vh; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 14px 12px; }
    .pos-item-thumb { width: 50px; height: 50px; font-size: 20px; }
    .pos-item-name { font-size: 12px; }
    .pos-item-price { font-size: 11.5px; }
    /* Cart: let it scroll horizontally on narrow screens instead of squashing */
    .pos-cart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cart-table { min-width: 560px; }
    /* Bigger touch targets for qty/discount */
    .qty-input, .disc-input { width: 64px; min-height: 44px; font-size: 16px; }
    .sales-header { padding: 10px 12px; }
    .sales-header h2 { font-size: 14px; }
    .customer-row { padding: 10px 12px; }
    .totals-row { padding: 12px; }
    .totals-row .total-amount { font-size: 17px; }
    .pay-btn { padding: 16px 4px; font-size: 12.5px; }
    .pay-btn i { display: none; }
}

/* ---- POS: phone (2x2 payment grid, compact cards) ---- */
@media (max-width: 575.98px) {
    .pos-left { padding: 10px; }
    .pos-item-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 10px; max-height: 38vh; padding: 12px; }
    .pos-item-thumb { width: 44px; height: 44px; font-size: 18px; margin-bottom: 6px; }
    .pos-item-name { font-size: 11.5px; }
    .pos-item-code { font-size: 10px; }
    .pos-item-price { font-size: 11px; }
    .pos-item-stock { font-size: 10px; }
    .payment-row { display: grid; grid-template-columns: 1fr 1fr; }
    .pay-btn { padding: 15px 6px; font-size: 12.5px; letter-spacing: .3px; }
    .pos-cart-scroll { min-height: 180px; }
}

/* ---- POS: very small phones (2-col item grid) ---- */
@media (max-width: 399.98px) {
    .pos-item-grid { grid-template-columns: 1fr 1fr; min-width: 0; }
    .pos-store-badge { display: none; }
}

/* POS / Inventory helpers */
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.item-name-link { color: var(--primary); font-weight: 600; }
.item-name-link:hover { text-decoration: underline; }

/* ============================================================
   Bin Card (item stock ledger)
   ============================================================ */
.bin-picker { padding: 14px 16px; }
.bin-item-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px; max-height: 260px; overflow-y: auto; padding: 2px;
}
.bin-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    text-align: left; cursor: pointer; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 10px; background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.bin-item:hover { border-color: #ddede7; box-shadow: 0 4px 12px rgb(33, 179, 123,.08); }
.bin-item.active { border-color: var(--primary); background: #f3f9f7; box-shadow: 0 0 0 3px rgb(33, 179, 123,.12); }
.bin-item-name { font-weight: 600; font-size: 12.5px; color: var(--ink); line-height: 1.3; }
.bin-item-code { color: #9aa7b5; font-size: 11px; }
.bin-item-stock { color: var(--accent-green-dark); font-size: 11px; font-weight: 700; }
.bin-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.bin-balance-badge {
    padding: 6px 14px; border-radius: 999px; background: #e8f3ec; color: var(--accent-green-dark);
    font-size: 12px; font-weight: 600; border: 1px solid #d3ead8; white-space: nowrap;
}
.bin-balance-badge strong { font-size: 15px; }
@media (max-width: 575.98px) {
    .bin-item-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); max-height: 200px; }
}

/* ============================================================
   Premium inventory tables — clean, standard, modern look
   ============================================================ */
.card-table {
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 42, 67, .05), 0 8px 24px rgba(16, 42, 67, .04);
}
.card-table > nav { padding: 14px 18px; margin: 0; }

/* Premium filter toolbar (no-submit live filters) */
.filter-bar {
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 42, 67, .05), 0 6px 16px rgba(16, 42, 67, .04);
    padding: 12px 14px;
    margin-bottom: 14px;
}
.filter-bar .form-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: #64748b; margin-bottom: 4px; }
.filter-bar .form-control, .filter-bar .form-select { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
.filter-bar .row { --bs-gutter-y: .4rem; }
.purchase-register { max-width: 100%; }
.purchase-register-filters { display:grid; grid-template-columns:minmax(260px,1.4fr) minmax(160px,.6fr) auto; align-items:end; gap:10px; padding:10px 12px; }
.purchase-register-filters .search-wrap { align-self:stretch; }
.purchase-register-filters .form-control { min-height:37px; }
.purchase-register-filters .form-label { display:block; }
.purchase-register-filters .filter-actions { display:flex; }
.purchase-register-filters .filter-actions .btn { min-width:40px; min-height:37px; border-radius:0; }
.purchase-register-filters .filter-actions .btn:first-child { border-radius:5px 0 0 5px; }
.purchase-register-filters .filter-actions .btn:last-child { border-radius:0 5px 5px 0; border-left:0; }
.purchase-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 12px; }
.purchase-kpis article { min-height:78px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:11px; border:1px solid #d8e6ea; border-radius:5px; background:#fff; box-shadow:0 1px 3px rgba(27,66,83,.07); text-align:center; }
.purchase-kpis span { color:#5c80a0; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.purchase-kpis strong { margin-top:5px; color:#182f45; font-size:15px; font-variant-numeric:tabular-nums; }
.purchase-register-table .table-soft th { white-space:nowrap; }
.purchase-register-table .table-soft td { padding-top:11px; padding-bottom:11px; }
.purchase-success-overlay { position:fixed; z-index:1090; inset:0; display:grid; place-items:center; padding:24px; background:rgba(255,255,255,.18); opacity:0; transition:opacity .2s ease; pointer-events:none; }
.purchase-success-overlay.show { opacity:1; }
.purchase-success-message { display:flex; align-items:center; gap:26px; width:min(534px,calc(100vw - 48px)); padding:32px 38px; border-radius:18px; background:var(--primary); color:#fff; box-shadow:0 18px 40px rgba(18,135,88,.26); font-size:32px; font-weight:500; }
.purchase-success-message i { display:grid; width:58px; height:58px; flex:0 0 58px; place-items:center; border-radius:50%; background:#fff; color:var(--primary); font-size:39px; font-weight:900; }
.purchase-report-summary { grid-template-columns:repeat(2, minmax(210px, 224px)); margin-top:18px; }
.purchase-report-summary .report-summary-card { min-height:77px; padding:13px 16px; text-align:center; }
.purchase-report-summary .report-summary-card .value { margin-top:4px; font-size:15px; }
.purchase-report-summary .report-summary-card .note { display:none; }
.purchase-report-details { margin-top:4px; }
.purchase-report-details .report-table-shell { max-height:none; }
@media (max-width:780px) { .purchase-register-filters { grid-template-columns:1fr 1fr; } .purchase-register-filters .search-wrap { grid-column:span 2; } .purchase-kpis { grid-template-columns:1fr 1fr; } }
@media (max-width:550px) { .purchase-success-message { gap:16px; padding:24px; font-size:22px; } .purchase-success-message i { width:46px; height:46px; flex-basis:46px; font-size:30px; } .purchase-report-summary { grid-template-columns:1fr; } }
.search-wrap { position: relative; }
.search-wrap .bi-search {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: 14px; pointer-events: none;
}
.search-wrap .form-control { padding-left: 36px; padding-right: 36px; }
.search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border: none; border-radius: 999px;
    background: #eef2f6; color: #64748b; font-size: 14px; line-height: 1;
    display: none; align-items: center; justify-content: center; cursor: pointer;
}
.search-clear:hover { background: #dbe4ec; color: #1f2937; }

/* ============================================================
   Premium item form (modal) — sectioned, icon-labelled fields
   ============================================================ */
.modal-body-premium { padding: 22px 26px 26px; }
.form-section {
    border: 1px solid #e8eef5;
    border-radius: 12px;
    background: #fbfcfe;
    padding: 16px 18px 18px;
    margin-bottom: 16px;
}
.form-section:last-child { margin-bottom: 0; }
.form-section-head {
    display: flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .7px; color: #475569;
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 1px dashed #dfe6ef;
}
.form-section-head .fs-icon {
    width: 26px; height: 26px; border-radius: 8px;
    background: #f1f8f5; color: #21b47b;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.form-section .form-label {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
    color: #64748b; margin-bottom: 6px;
}
.input-ic { position: relative; }
.input-ic > i {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: 15px; pointer-events: none; z-index: 1;
}
.input-ic .form-control, .input-ic .form-select { padding-left: 40px; }
.input-ic .form-control:focus + i, .input-ic:focus-within > i { color: #21b47b; }
.form-hint { font-size: 12px; color: #94a3b8; margin-top: 6px; line-height: 1.45; }
.hint-inline { font-weight: 400; font-style: italic; color: #94a3b8; text-transform: none; letter-spacing: 0; }
.form-switch-premium .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; margin-top: 0; }
.form-switch-premium .form-check-input:checked { background-color: #1b9365; border-color: #1b9365; }
.form-switch-premium .form-check-input:focus { box-shadow: 0 0 0 3px rgb(27, 147, 101,.18); }
.form-switch-premium .form-check-label { color: #334155; font-weight: 600; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; }
/* Barcode scan feedback under the barcode field */
.scan-hint { font-size: 12px; margin-top: 6px; line-height: 1.4; min-height: 0; }
.scan-hint-ok { color: #2a6e54; }
.scan-hint-new { color: #b07612; }

/* ============================================================
   Internal Order (stock transfer) modal — premium lines
   ============================================================ */
.io-store-badge { min-height: 20px; margin-top: 6px; }
.io-badge {
    display: inline-block;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.io-badge.from { background: #e0f2fe; color: #0369a1; }
.io-badge.to   { background: #e6f2ed; color: #296c52; }
.io-lines { display: flex; flex-direction: column; gap: 8px; }
.io-line-row {
    display: grid;
    grid-template-columns: 1fr 110px 90px 40px;
    gap: 10px; align-items: center;
    background: #fff;
    border: 1px solid #e8eef5;
    border-radius: 10px;
    padding: 8px 10px;
}
.io-line-row .io-qty { text-align: center; }
.io-line-stock { font-size: 11px; white-space: nowrap; text-align: right; }
.io-line-del .btn { padding: 4px 8px; }
.io-total {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px dashed #dfe6ef;
}
.io-total-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: #64748b; }
.io-total-val { font-size: 20px; font-weight: 800; color: #0f172a; }
.io-note-tip {
    display: flex; align-items: flex-start; gap: 6px;
    background: #f5faf8; border: 1px solid #dbeafe;
    color: #1c9768; font-size: 12.5px; line-height: 1.5;
    border-radius: 10px; padding: 10px 12px; margin-top: 14px;
}



.table-soft.premium {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
    min-width: 720px;
}
.table-soft.premium thead th {
    background: #f8faf9;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-bottom: 2px solid #e3eaf2;
    white-space: nowrap;
}
.table-soft.premium thead th:first-child { border-top-left-radius: 13px; }
.table-soft.premium thead th:last-child  { border-top-right-radius: 13px; }
.table-soft.premium tbody td {
    padding: 8px 14px;
    border-bottom: 1px solid #eef2f6;
    vertical-align: middle;
    color: #1f2937;
    background: #fff;
    white-space: nowrap;
}
.table-soft.premium tbody tr:last-child td { border-bottom: none; }
.table-soft.premium tbody tr { transition: background .14s ease; }
.table-soft.premium tbody tr:nth-child(even) td { background: #f8faf9; }
.table-soft.premium tbody tr:hover td { background: #f4f9f7; }
.table-soft.premium tbody tr.row-out td { background: #fff5f5 !important; }
.table-soft.premium .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-soft.premium .mono { color: #64748b; }
.table-soft.premium .actions { white-space: nowrap; }
.table-soft.premium .actions .btn {
    padding: 5px 9px;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    transition: all .14s ease;
}
.table-soft.premium .actions .btn.btn-outline-danger { color: #dc2626; border-color: #fecaca; font-weight: 700; }
.table-soft.premium .actions .btn:hover { border-color: var(--primary); color: var(--primary); background: #f4faf8; }
.table-soft.premium .actions .btn.btn-outline-danger:hover { border-color: var(--danger); color: var(--danger); background: #fef2f2; }
.table-soft.premium .actions .btn.btn-outline-success:hover { border-color: var(--accent-green); color: var(--accent-green-dark); background: #f2f7f5; }
.table-soft.premium .actions .btn.btn-outline-secondary:hover { border-color: #94a3b8; color: #334155; background: #f1f5f9; }
/* item name + code stack */
.table-soft.premium .cell-main { display: flex; flex-direction: row; align-items: baseline; gap: 8px; }
.table-soft.premium .cell-main .item-name-link { color: #1f2937; font-weight: 600; font-size: 13.5px; }
.table-soft.premium .cell-main .item-name-link:hover { color: var(--primary); }
.table-soft.premium .cell-main .item-code { color: #94a3b8; font-size: 11.5px; letter-spacing: .3px; }
/* pills for status inside premium tables */
.table-soft.premium .badge-status { padding: 5px 12px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; }
.table-soft.premium .badge-status.badge-paid    { background: #edf2f0; color: #2a6e54; box-shadow: inset 0 0 0 1px rgb(42, 110, 84,.18); }
.table-soft.premium .badge-status.badge-pending { background: #fff6e5; color: #b07612; box-shadow: inset 0 0 0 1px rgba(176,118,18,.18); }
.table-soft.premium .badge-status.badge-unpaid  { background: #fdecee; color: #c4303f; box-shadow: inset 0 0 0 1px rgba(196,48,63,.18); }
.table-soft.premium .badge-status.badge-claimed { background: #eaf1fe; color: #2b5cc4; box-shadow: inset 0 0 0 1px rgba(43,92,196,.18); }


/* Closed-day visual cue on tables — subtle, not loud */
.table-soft tbody tr.row-closed td { background: #f6faf7; color: var(--ink-soft); }
.table-soft tbody tr.row-closed td .num { color: var(--ink-soft); }

/* Scroll wrapper so wide tables remain usable on small screens */
.card-soft { overflow-x: auto; }

/* Day-summary report inside modal */
.summary-report { font-size: 13px; }
.summary-report .sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.summary-report .sr-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.summary-report .sr-cell .lbl { color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.summary-report .sr-cell .val { font-weight: 700; font-size: 16px; margin-top: 2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.summary-report .sr-meta { color: var(--ink-soft); font-size: 12px; margin-bottom: 10px; }

/* ----- Footer total bar ----- */
.total-bar {
    margin-top: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: var(--shadow-sm);
}
.total-bar .total-label { font-weight: 700; color: var(--ink-soft); }
.total-bar .total-value { font-size: 22px; font-weight: 800; }

/* ----- Misc ----- */
a.text-link { color: var(--primary); text-decoration: none; }
a.text-link:hover { text-decoration: underline; }
.muted { color: var(--ink-soft); }
.right { text-align: right; }
.actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.actions .btn { padding: 4px 10px; font-size: 12px; }

/* ----- Unified row actions (square icon buttons, horizontal) ----- */
.actions-th { text-align: right; }
.actions-cell { text-align: right; white-space: nowrap; }
.actions-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.actions-sep {
    width: 1px; height: 22px;
    background: var(--border);
    margin: 0 4px;
    display: inline-block;
}
.btn-icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--ink-soft);
    font-size: 14px;
    text-decoration: none;
    padding: 0; line-height: 1;
    transition: background .12s, border-color .12s, color .12s, transform .08s;
    cursor: pointer;
}
.btn-icon:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.btn-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-icon-primary { border-color: rgb(33, 179, 123,.35); color: var(--primary); }
.btn-icon-primary:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-icon-warn { border-color: rgba(246,198,107,.55); color: #8a5a00; }
.btn-icon-warn:hover { background: var(--warn); color: #4a3500; border-color: var(--warn); }
.btn-icon-danger { border-color: rgba(220,53,69,.4); color: var(--danger); }
.btn-icon-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ----- Empty state ----- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-soft); }
.empty-state i { font-size: 36px; opacity: .45; }

/* ----- Petty cash preview block ----- */
.petty-block {
    margin-top: 10px;
    background: linear-gradient(135deg, #f5fbf7, #f4faf8);
    border: 1px solid #d6ecdc;
    border-radius: 10px;
    padding: 10px 12px;
}
.petty-block dt { font-weight: 500; color: var(--ink-soft); }
.petty-block dd { font-variant-numeric: tabular-nums; }
.petty-block .pc-over { color: var(--danger); font-weight: 700; }

/* ----- SMS / Email log inline list ----- */
.notif-log { margin-top: 14px; }
.notif-log h6 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); margin: 0 0 8px; }
.notif-log-item {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    background: #fff;
}
.notif-log-item.failed { border-left: 3px solid var(--danger); }
.notif-log-item.sent { border-left: 3px solid var(--accent-green); }
.notif-log-item .channel { font-weight: 700; text-transform: uppercase; font-size: 11px; }
.notif-log-item .resp { color: var(--ink-soft); font-family: Menlo, Consolas, monospace; font-size: 11px; word-break: break-word; }

/* ----- Sidebar toggle (mobile) ----- */
.sidebar-toggle {
    display: none;
    width: 40px; height: 40px; border-radius: 999px;
    background: #ebf1ef; color: var(--ink-soft); border: none;
    align-items: center; justify-content: center; font-size: 20px;
    margin-right: 8px;
}
.sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
    z-index: 80;
}
body.sidebar-open .sidebar-backdrop { display: block; }

@media (max-width: 991.98px) {
    .sidebar-toggle { display: inline-flex; }
    .app-topbar { grid-template-columns: auto 1fr auto; padding: 0 14px; gap: 8px; }
    .app-topbar .brand-name small { display: none !important; }
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar {
        position: fixed; top: 64px; left: 0; bottom: 0;
        width: 260px; background: #ffffff;
        padding: 16px; transform: translateX(-105%);
        transition: transform .22s ease; z-index: 90;
        box-shadow: var(--shadow-md); overflow-y: auto;
        border-right: 1px solid var(--border);
    }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    .side-link span { display: inline; }
    .side-link { padding: 12px 14px; }
    .app-main { padding: 16px 14px 32px; }
}

@media (max-width: 575.98px) {
    .page-head h1 { font-size: 18px; }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 10px 12px; }
    .stat-card .value { font-size: 16px; }
    .stat-card .label { font-size: 10px; }
    .stat-card .delta { font-size: 9px; }
    .modal-dialog { margin: 0; max-width: 100%; }
    .modal-content { border-radius: 0; min-height: 100vh; }
    .btn-pill { padding: 9px 16px; font-size: 11px; }
    /* iOS/Android zoom prevention */
    .form-control, .form-select { font-size: 16px; padding: 11px 12px; min-height: 44px; }
    .table-soft thead th, .table-soft tbody td { padding: 10px 10px; font-size: 13px; }
    .crumbs { font-size: 12px; }
    .crumbs .back-pill { font-size: 11px; padding: 3px 10px 3px 6px; }
    .crumbs .sep, .crumbs .home-link { display: none; }
    /* Modal backdrop cleanup for mobile */
    body { overflow-y: auto; }
}

/* ----- Toast container ----- */
.toast-stack {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 1080;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: 100%; max-width: 600px; padding: 0 16px;
    pointer-events: none;
}
.toast-stack .toast-fms { pointer-events: auto; width: 100%; }
.toast-fms {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius); padding: 13px 44px 13px 16px;
    box-shadow: 0 12px 32px rgba(15,23,42,.18); font-size: 14.5px; font-weight: 600;
    line-height: 1.45; color: #0f172a; text-align: center; text-wrap: pretty;
    animation: toastIn .25s ease;
}
/* Translated messages are routinely longer than their English source, so they
   wrap over several lines. Those get a left reading edge and extra breathing
   room instead of being squeezed into a narrow centred block. */
.toast-fms.is-long {
    justify-content: flex-start;
    text-align: left;
    padding: 14px 44px 14px 18px;
    font-size: 15px;
    line-height: 1.5;
}
.toast-fms.success {
    background: linear-gradient(135deg, #1a8f62 0%, #296c52 100%);
    border: none; border-left: 4px solid #14532d;
    color: #fff;
}
.toast-fms.success i { color: #fff; }
.toast-fms.error {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border: none; border-left: 4px solid #7f1d1d;
    color: #fff;
}
.toast-fms.error i { color: #fff; }
.toast-close {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    border: 0; background: transparent; color: inherit; opacity: .7;
    font-size: 18px; line-height: 1; padding: 2px 6px; cursor: pointer;
    border-radius: 6px;
}
.toast-close:hover { opacity: 1; background: rgba(255,255,255,.18); }
.toast-fms:not(.success):not(.error) .toast-close:hover { background: rgba(15,23,42,.08); }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

@media (max-width: 575.98px) {
    .toast-stack {
        position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
        right: auto; top: auto; max-width: 92vw; padding: 0;
    }
    .branch-filter { max-width: 150px; }
    .branch-filter-label { display: none; }
}

/* Very small phones: hide brand text to make room for the branch filter */
@media (max-width: 419.98px) {
    .app-topbar .brand-name { display: none; }
    .branch-filter { max-width: 132px; }
    .branch-filter-select { max-width: 132px; padding: 3px 22px 3px 6px !important; font-size: 11px !important; }
    .topbar-left { gap: 4px; }
}

/* ----- Enterprise polish ----- */
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.kpi-link:focus-visible .stat-card { box-shadow: 0 0 0 3px rgb(33, 179, 123,.25); }
.btn-pill[disabled], .btn-pill:disabled { opacity: .7; cursor: not-allowed; }
.spinner-border-sm { vertical-align: -.125em; }

/* ============================================================
   Login redesign (v2) — professional, brand-aligned, background slideshow
   ============================================================ */
.auth-shell-v2 {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 20px 20px 70px;
    box-sizing: border-box;
}
.auth-slideshow { position: absolute; inset: 0; }
.auth-slideshow .slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    animation: authFade 25s infinite;
}
.auth-slideshow .slide:nth-child(1) { animation-delay:  0s; }
.auth-slideshow .slide:nth-child(2) { animation-delay:  5s; }
.auth-slideshow .slide:nth-child(3) { animation-delay: 10s; }
.auth-slideshow .slide:nth-child(4) { animation-delay: 15s; }
.auth-slideshow .slide:nth-child(5) { animation-delay: 20s; }
@keyframes authFade {
    0%   { opacity: 0; transform: scale(1.08); }
    5%   { opacity: 1; transform: scale(1.00); }
    20%  { opacity: 1; transform: scale(1.03); }
    25%  { opacity: 0; transform: scale(1.05); }
    100% { opacity: 0; }
}
.auth-slide-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(15,40,60,.78), rgba(15,40,60,.65) 50%, rgba(15,40,60,.85));
}
.auth-card-v2 {
    position: relative; z-index: 2;
    width: 100%;
    max-width: 480px;
    /* background: rgba(255,255,255,.94); */
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border: 1px solid rgba(229,237,242,.9);
    border-radius: 20px;
    box-shadow: 0 30px 60px -20px rgba(15,58,82,.35), 0 10px 25px -10px rgb(33, 179, 123,.25);
    padding: 44px 40px 36px;
    margin: 40px 20px;
}

.auth-brand { 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 26px;
    text-align: center;
}
.auth-brand-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.auth-brand-mark {
    width: 60px; height: 60px; border-radius: 18px;
    background: linear-gradient(135deg, var(--accent-green), #1ea370);
    color: #fff; font-size: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px -6px rgb(27, 147, 101,.55);
}
/* Admin-set shop logo on the login page: shown cleanly by itself, never
   wrapped in the green icon plate (that plate is only for the no-logo case). */
.auth-brand-logo {
    display: block;
    max-width: 260px;
    max-height: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.3));
}
.auth-brand-name { font-size: 26px; font-weight: 800; letter-spacing: 1px; color: var(--ink); line-height: 1; }
.auth-brand-tagline { font-size: 14px; color: var(--ink-soft); margin-top: 6px; letter-spacing: .3px; }

.auth-title { font-size: 26px; font-weight: 700; margin: 8px 0 8px; color: var(--ink); }
.auth-subtitle { font-size: 15px; color: var(--ink-soft); margin: 0 0 24px; }

.auth-alert {
    display: flex; align-items: center; gap: 12px;
    background: #fde2e6; color: #a3142a; border: 1px solid #f5c2c9;
    border-radius: 12px; padding: 12px 14px; margin-bottom: 18px;
    font-size: 14px; font-weight: 600;
}
.auth-alert i { font-size: 18px; }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 8px; }
.auth-field-label { font-size: 14px; font-weight: 700; color: var(--ink-soft); letter-spacing: .3px; text-transform: uppercase; }
.auth-input-wrap {
    display: flex; align-items: center;
    background: #fff; border: 1px solid var(--border);
    border-radius: 12px; padding: 0 14px;
    transition: border-color .15s, box-shadow .15s;
}
.auth-input-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgb(33, 179, 123,.12); }
.auth-input-wrap > i { font-size: 18px; color: var(--ink-soft); }
.auth-input {
    flex: 1; border: 0; outline: 0; background: transparent;
    padding: 14px 12px; font-size: 16px; color: var(--ink); min-height: 52px;
}
.auth-input::placeholder { color: var(--muted); }
.auth-input-toggle {
    border: 0; background: transparent; color: var(--ink-soft);
    padding: 8px 6px; cursor: pointer; font-size: 18px; line-height: 1;
}
.auth-input-toggle:hover { color: var(--primary); }

.auth-submit {
    margin-top: 8px; border: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--primary), #22b97f);
    color: #fff; font-weight: 700; letter-spacing: .4px;
    border-radius: 12px; padding: 16px 20px; font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 10px 22px -8px rgb(33, 179, 123,.55);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s;
}
.auth-submit:hover { transform: translateY(-1px); filter: brightness(1.04); }
.auth-submit:active { transform: translateY(0); }

.auth-hint { margin: 22px 0 0; text-align: center; color: var(--ink-soft); font-size: 13px; }
.auth-hint code { background: #f2f7f5; padding: 2px 6px; border-radius: 6px; color: var(--primary); }

.auth-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #fff;
    padding: 14px 16px;
    margin-top: auto;
}
.auth-center {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.auth-footer code {
    background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.3);
    padding: 2px 8px; border-radius: 6px; color: #fff; font-weight: 600;
}
.auth-footer-sep { opacity: .7; }
.auth-footer i { color: #fff; }

@media (max-width: 480px) {
    .auth-card-v2 { padding: 26px 22px; border-radius: 16px; }
    .auth-title { font-size: 19px; }
    .auth-footer { font-size: 11px; }
}

/* =====================================================================
   Loading + micro-interactions
   ===================================================================== */
#fmsBar {
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 3px; 
    width: 0;
    background: linear-gradient(90deg, var(--primary), var(--accent-green));
    box-shadow: 0 0 10px rgb(33, 179, 123,.6);
    z-index: 9999;
    transition: width .25s ease, opacity .3s ease;
    pointer-events: none;
}

.kpi-link, .stat-card { transition: transform .2s ease, box-shadow .2s ease; }
.btn:active { transform: scale(.97); }
.btn[disabled] .spinner-border { vertical-align: -2px; }

/* Content entrance — subtle fade/slide so pages feel dynamic on load */
.app-main { animation: mainFade .35s ease; }
@keyframes mainFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   Mobile / Android responsiveness audit
   ===================================================================== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > .table-soft { min-width: 640px; }

/* Modals — Android-safe */
@media (max-width: 575.98px) {
    .modal-dialog { margin: .5rem; max-width: calc(100% - 1rem); }
    .modal-dialog-centered { min-height: calc(100% - 1rem); }
    .modal-fullscreen-sm-down .modal-dialog,
    .modal-fullscreen-sm-down.modal-dialog { margin: 0; max-width: 100%; height: 100%; }
    .modal-fullscreen-sm-down .modal-content { border-radius: 0; min-height: 100%; }
    .modal-body { -webkit-overflow-scrolling: touch; }
    .modal-footer { flex-wrap: wrap; gap: .5rem; }
    .modal-footer > .btn { flex: 1 1 100%; }
    .summary-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
    .app-main { padding: 16px 14px 32px; }
    .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .page-head .btn { width: 100%; justify-content: center; }
    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-card .value { font-size: 20px; }
    input, select, textarea, .form-control, .form-select { font-size: 16px !important; min-height: 44px; }
    .btn { min-height: 42px; }
    .btn-sm { min-height: 34px; }
    .toast-stack { left: 50% !important; right: auto !important; bottom: 14px !important; top: auto !important; transform: translateX(-50%) !important; }
    .sidebar-backdrop.show { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 60; }
    .crumbs { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .crumbs .home-link, .crumbs .sep { display: none; }
    .crumbs .current { font-size: 11px; }
    .crumbs .back-pill { font-size: 10px; padding: 2px 8px 2px 5px; }
    .dash-filter { position: static !important; }
    .dash-filter .quick { width: 100%; }
    .dash-filter .quick a { flex: 1; text-align: center; }
    .filter-chip { font-size: 11px; }
}

@media (max-width: 420px) {
    .auth-card-v2 { padding: 22px 18px; }
    .page-head h1 { font-size: 20px; }
    .crumbs a:not(:last-child), .crumbs .sep { display: none; }
}

/* =====================================================================
   v3 — Corporate polish + Android-first refinement
   (No new colors; only spacing, weight, radius, elevation, motion)
   ===================================================================== */

/* Numeric columns: tabular figures everywhere money shows */
.num, .table-soft .num, .stat-card .value, .total-bar .total-value,
.summary-report .sr-cell .val { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; }

/* Cards — uniform 12px radius, hairline border, soft elevation */
.card-soft { border-radius: 12px; box-shadow: 0 1px 2px rgba(20,40,70,.04), 0 4px 14px -8px rgba(20,40,70,.08); }
.card-soft + .card-soft { margin-top: 18px; }

/* Page heading rhythm */
.page-head h1 { letter-spacing: -.01em; }
.crumbs { letter-spacing: .01em; }

/* Tables — sticky header inside scroll container, refined row hover */
.table-scroll { border-radius: 10px; }
.table-scroll > .table-soft thead th { position: sticky; top: 0; z-index: 2; background: #f5fbf7; }
.table-scroll > .table-soft.premium thead th { background: #f8faf9; }
.table-soft tbody tr { transition: background .12s ease; }
.table-soft tbody tr:hover { background: #f5f8f7; }
.table-soft tbody td { font-size: 13.5px; }

/* Buttons — consistent corporate height */
.btn { border-radius: 10px; font-weight: 600; }
.btn-pill { letter-spacing: .6px; }
.btn-primary, .btn-success, .btn-warning, .btn-danger { box-shadow: 0 6px 14px -8px rgba(20,40,70,.25); }

/* KPI card — tighter, more confident */
.stat-card { border-radius: 12px; padding: 12px 16px; }
.stat-card .label { font-weight: 600; letter-spacing: .05em; font-size: 10px; margin-bottom: 2px; }
.stat-card .value { font-size: 18px; letter-spacing: -.01em; }
.stat-card .delta { font-size: 10px; margin-top: 2px; }
.stat-card:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -16px rgba(20,40,70,.25); }

/* Badges — uniform shape */
.badge-status { padding: 5px 10px; border-radius: 6px; font-size: 10.5px; }

/* Branch chip in topbar */
.branch-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: #e8f3ec; color: var(--accent-green-dark);
    font-weight: 700; font-size: 12px; letter-spacing: .3px;
    border: 1px solid #d3ead8; max-width: 220px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.branch-chip.missing {
    background: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}
.branch-chip i { font-size: 13px; }

/* Top app bar elevation when scrolled */
.app-topbar { box-shadow: 0 1px 0 var(--border); }

/* Inputs — consistent corporate feel */
.form-control, .form-select { box-shadow: none; transition: border-color .12s, box-shadow .12s; }

/* Skeleton shimmer for loading states */
.skeleton { position: relative; overflow: hidden; background: #eef3f6; border-radius: 8px; }
.skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: translateX(-100%); animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* =====================================================================
   Android-first refinements
   ===================================================================== */

/* Use dynamic viewport height so Chrome Android URL bar doesn't clip */
@supports (height: 100dvh) {
    .auth-shell-v2 { height: 100dvh; }
    .app-shell { min-height: calc(100dvh - 64px); }
}

/* Safe-area insets for notched Android devices */
.app-topbar { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.app-main { padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px)); }

/* Sidebar drawer animation polish */
@media (max-width: 991.98px) {
    .app-sidebar { box-shadow: 12px 0 28px -16px rgba(15,40,60,.28); }
    .sidebar-backdrop { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: opacity .2s ease; }
    body.sidebar-open { overflow: hidden; }
    .branch-chip { max-width: 140px; font-size: 11px; padding: 5px 10px; }
}

/* Phones — denser cards, larger touch areas, cleaner page-head */
@media (max-width: 575.98px) {
    .app-topbar { height: 58px; }
    .app-shell { min-height: calc(100vh - 58px); }
    .app-sidebar { top: 58px; }
    .brand-name { font-size: 16px; letter-spacing: .5px; }
    .brand-logo { width: 34px; height: 34px; font-size: 18px; }
    .topbar-date { display: none !important; }
    .user-name { display: none; }
    .btn-bell { width: 36px; height: 36px; font-size: 16px; }
    .card-soft { padding: 16px; border-radius: 12px; }
    .stat-card { padding: 14px; }
    .stat-card .value { font-size: 20px; }
    .page-head { margin-bottom: 14px; }
    .page-head h1 { font-size: 18px; }
    .table-soft thead th { font-size: 11px; padding: 10px 10px; }
    .table-soft tbody td { font-size: 13px; padding: 10px; }
    .actions { flex-wrap: wrap; }
    .actions .btn { padding: 6px 10px; font-size: 12px; min-height: 36px; }
    /* Form rows stack cleanly */
    .row > [class*="col-"] + [class*="col-"] { margin-top: 12px; }
    /* Bottom-sheet feel for primary modals */
    .modal-fullscreen-sm-down .modal-content { border-radius: 16px 16px 0 0; }
}

/* Tap feedback — subtle, snappy */
@media (hover: none) {
    .table-soft tbody tr:hover { background: transparent; }
    .btn:active { transform: scale(.98); filter: brightness(.97); }
    .side-link:active { background: var(--primary); color: #fff; }
}

/* Print-friendly reports */
@media print {
    .app-topbar, .app-sidebar, .page-head .btn, .actions, .sidebar-backdrop { display: none !important; }
    .app-shell { grid-template-columns: 1fr; }
    .app-main { padding: 0; }
    .card-soft { box-shadow: none; border-color: #ccc; }
}

/* =====================================================================
   v4 — system-wide responsive hardening for Android and small screens
   ===================================================================== */
html { overflow-x: hidden; }
body { overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }
.app-shell, .app-main, .card-soft, .stat-grid, .table-scroll, .table-responsive,
.page-head, .total-bar, form, fieldset { min-width: 0; }
.app-main { width: 100%; max-width: 100vw; }
.card-soft { overflow-x: visible; }
.table-scroll, .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.table-scroll > .table-soft,
.table-responsive > .table,
.table-responsive > .table-soft { min-width: 680px; margin-bottom: 0; }
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.stat-grid > *, .kpi-link, .stat-card { min-width: 0; }
.stat-card { height: 100%; overflow: hidden; }
.stat-card .label, .stat-card .delta { overflow-wrap: anywhere; }
.stat-card .value {
    line-height: 1.15;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}
.page-head > div { min-width: 0; }
.page-head h1 { overflow-wrap: anywhere; }
.actions { min-width: 0; flex-wrap: nowrap; }
.modal { padding-left: 0 !important; padding-right: 0 !important; }
.modal-dialog { max-width: min(100% - 1rem, var(--bs-modal-width, 500px)); }
.modal-content { max-height: calc(100dvh - 1rem); overflow: hidden; }
.modal-dialog-scrollable .modal-content { display: flex; flex-direction: column; max-height: calc(100dvh - 1rem); overflow: hidden; }
.modal-dialog-scrollable .modal-body { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
/* Guarantee the modal body scrolls on its own when content is tall */
.modal-body { max-height: calc(100dvh - 190px); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 991.98px) {
    .app-topbar { min-width: 0; }
    .topbar-left, .topbar-right, .brand { min-width: 0; }
    .brand { justify-content: center; overflow: hidden; }
    .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-sidebar { width: min(82vw, 280px); max-width: calc(100vw - 28px); }
}

@media (max-width: 767.98px) {
    .app-main { padding: 14px 12px max(28px, calc(env(safe-area-inset-bottom) + 20px)); }
    .page-head { align-items: stretch; }
    .page-head .btn { min-height: 44px; }
    .card-soft { padding: 14px; }
    form.card-soft.d-flex { flex-direction: column; align-items: stretch !important; }
    form.card-soft.d-flex > * { width: 100%; min-width: 0; }
    form.card-soft .row .btn { width: 100%; justify-content: center; }
    .total-bar { align-items: stretch; flex-direction: column; gap: 8px; padding: 14px; }
    .total-bar .total-value { font-size: 20px; overflow-wrap: anywhere; }
    .row > [class*="col-"] + [class*="col-"] { margin-top: 0; }
    .dash-filter .d-flex { min-width: 0; }
    .filter-chip { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dash-filter .quick { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .dash-filter .quick a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 7px 8px; }
}

@media (max-width: 575.98px) {
    .app-topbar { grid-template-columns: auto minmax(72px, 1fr) auto; gap: 6px; padding-inline: 10px; }
    .sidebar-toggle { width: 38px; height: 38px; margin-right: 4px; flex: 0 0 auto; }
    .branch-chip { max-width: 112px; padding: 5px 8px; }
    .topbar-right { gap: 8px; }
    .user-avatar { font-size: 24px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    .stat-card { padding: 13px 12px; }
    .stat-card .label { font-size: 10.5px; line-height: 1.25; letter-spacing: .35px; }
    .stat-card .value { font-size: 18px; margin-top: 7px; }
    .stat-card .delta { font-size: 11px; line-height: 1.3; }
    .table-scroll,
    .table-responsive { margin-inline: -2px; padding-bottom: 2px; }
    .table-scroll::after,
    .table-responsive::after {
        content: "";
        position: sticky;
        right: 0;
        display: block;
        width: 22px;
        height: 1px;
        margin-top: -1px;
        background: linear-gradient(90deg, transparent, var(--surface));
        pointer-events: none;
    }
    .modal-dialog,
    .modal-dialog-centered { margin: 0; max-width: 100%; min-height: 100dvh; }
    .modal-content,
    .modal-dialog-scrollable .modal-content { min-height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .modal-header, .modal-footer { flex-shrink: 0; }
    .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 380px) {
    .app-main { padding-inline: 10px; }
    .stat-grid { grid-template-columns: 1fr !important; }
    .dash-filter .quick { grid-template-columns: 1fr; }
    .branch-chip { display: none; }
}

/* ===== v10: premium loading + confirm modal ===== */
.fms-skel {
    display: inline-block;
    width: 80%;
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef2f7 0%, #f9fafa 50%, #eef2f7 100%);
    background-size: 200% 100%;
    animation: fmsShimmer 1.2s ease-in-out infinite;
}
@keyframes fmsShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.fms-confirm-modal .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}
.fms-confirm-modal .modal-title { font-weight: 700; }
.fms-confirm-modal .btn-pill { padding: 8px 20px; font-weight: 600; }

button[disabled] .spinner-border { vertical-align: -2px; }

/* ===== v11: chart polish + skeleton row ===== */
.fms-skel-row td { padding: 14px 12px; }
.fms-skel-row .fms-skel { width: 100%; height: 12px; }
.chart-box { background:#fff; border:1px solid var(--border, #e7eef5); border-radius:14px; padding:16px; height:100%; }
.chart-title { font-size:13px; font-weight:700; color:var(--ink, #1f2d3d); margin-bottom:6px; letter-spacing:.2px; }
.chart-sub   { font-size:11px; color:var(--muted, #6b7a8c); margin-bottom:10px; }
.chart-empty { text-align:center; color:var(--muted, #6b7a8c); padding:48px 12px; font-size:13px; }
.apex-chart-host { min-height: 280px; }
@media (prefers-reduced-motion: reduce) {
  #fmsBar, .fms-skel { transition: none !important; animation: none !important; }
}

/* ===== ONA EYE CARE preview card ===== */
.ona-report{border:1px solid #e6ebf2;background:linear-gradient(180deg,#fff,#fbfcfd)}
.ona-report .ona-header{border-bottom:2px solid #0a2540;padding-bottom:8px;margin-bottom:14px}
.ona-report .ona-brand{color:#0a2540;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.ona-report .ona-divider{height:1px;background:linear-gradient(90deg,transparent,#cbd5e1,transparent);margin:10px 0}
.ona-report .ona-mono{font-family:"SFMono-Regular",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.ona-report .ona-counts{border-top:1px dashed #e2e8f0;padding-top:10px;margin-top:6px}
.ona-report .ona-count{flex:1 1 22%;display:flex;flex-direction:column;align-items:center;text-align:center;background:#f8fafc;border-radius:8px;padding:8px 4px;min-width:60px}
.ona-report .ona-count span:first-child{font-size:10px;letter-spacing:.08em;color:#64748b}
.ona-report .ona-count span:last-child{font-size:18px;color:#0a2540;margin-top:2px}

/* ============================================================
   v13 — Enterprise polish layer (system-wide, additive only)
   Targets existing global selectors used across all pages:
   .card-soft, .table, .btn, .form-control, .form-label,
   .modal-content, .kpi, .page-header, .badge, etc.
   ============================================================ */

:root {
  --ent-ink: #0b1a2b;
  --ent-ink-soft: #475569;
  --ent-muted: #64748b;
  --ent-border: #e3e9f0;
  --ent-border-strong: #cfd8e3;
  --ent-surface: #ffffff;
  --ent-surface-2: #f8faf9;
  --ent-primary: #1ea672;
  --ent-primary-700: #15835a;
  --ent-success: #15835a;
  --ent-warning: #d68910;
  --ent-danger: #c0392b;
  --ent-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --ent-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --ent-shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
  --ent-radius: 10px;
  --ent-radius-lg: 14px;
  --ent-fs-xs: 11px;
  --ent-fs-sm: 12.5px;
  --ent-fs-base: 14px;
}

/* Typography rhythm */
body { font-feature-settings: "cv02","cv03","cv04","ss01"; -webkit-font-smoothing: antialiased; color: var(--ent-ink); }
h1, .h1 { font-weight: 700; letter-spacing: -0.02em; color: var(--ent-ink); }
h2, .h2 { font-weight: 700; letter-spacing: -0.015em; color: var(--ent-ink); }
h3, .h3, h4, .h4 { font-weight: 600; letter-spacing: -0.01em; color: var(--ent-ink); }
.text-muted, .muted { color: var(--ent-muted) !important; }

/* Page header — confident hierarchy */
.page-header { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--ent-border); }
.page-header h1, .page-header .h1 { font-size: 22px; margin: 0 0 4px; }
.page-header .lead, .page-header .subtitle { font-size: 13px; color: var(--ent-muted); margin: 0; }

/* Cards — crisper borders, less gradient noise */
.card-soft, .card {
  background: var(--ent-surface);
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  box-shadow: var(--ent-shadow-xs);
}
.card-soft .card-header, .card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--ent-border);
  padding: 14px 18px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ent-ink);
  letter-spacing: -0.005em;
}
.card-soft .card-body, .card .card-body { padding: 18px; }

/* KPI tiles — enterprise dashboard */
.kpi {
  background: var(--ent-surface);
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  padding: 16px 18px;
  box-shadow: var(--ent-shadow-xs);
  transition: box-shadow .15s ease, transform .15s ease;
}
.kpi:hover { box-shadow: var(--ent-shadow-sm); }
.kpi .kpi-label,
.kpi .label { font-size: var(--ent-fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ent-muted); font-weight: 600; }
.kpi .kpi-value,
.kpi .value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ent-ink); font-variant-numeric: tabular-nums; margin-top: 4px; }
.kpi .kpi-delta { font-size: 11.5px; font-weight: 600; margin-top: 6px; }
.kpi .kpi-delta.up { color: var(--ent-success); }
.kpi .kpi-delta.down { color: var(--ent-danger); }

/* Tables — enterprise grade */
.table {
  --bs-table-bg: transparent;
  font-size: 13px;
  color: var(--ent-ink);
  border-color: var(--ent-border);
}
.table thead th {
  background: var(--ent-surface-2);
  color: var(--ent-ink-soft);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--ent-border-strong);
  padding: 11px 12px;
  white-space: nowrap;
  position: relative;
}
.table tbody td {
  padding: 12px;
  border-color: var(--ent-border);
  vertical-align: middle;
}
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:hover { background: #f4f8f6; }
.table tfoot td, .table .totals-row td {
  background: var(--ent-surface-2);
  font-weight: 700;
  border-top: 2px solid var(--ent-border-strong);
  font-variant-numeric: tabular-nums;
}
.table .num, .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Sticky table headers inside scroll containers */
.table-scroll { max-height: 70vh; overflow: auto; border: 1px solid var(--ent-border); border-radius: var(--ent-radius-lg); }
.table-scroll .table { margin: 0; }
.table-scroll thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--ent-border-strong); }

/* Buttons — consistent weight, less rubbery */
.btn { font-weight: 600; font-size: 13px; letter-spacing: -.005em; border-radius: 8px; padding: 7px 14px; transition: background-color .12s, box-shadow .12s, transform .04s; }
.btn:active { transform: translateY(1px); }
.btn-pill { border-radius: 999px; padding: 7px 16px; }
.btn-primary { background: var(--ent-primary); border-color: var(--ent-primary); }
.btn-primary:hover { background: var(--ent-primary-700); border-color: var(--ent-primary-700); }
.btn-outline-secondary { color: var(--ent-ink-soft); border-color: var(--ent-border-strong); }
.btn-outline-secondary:hover { background: var(--ent-surface-2); color: var(--ent-ink); border-color: var(--ent-border-strong); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-lg { padding: 10px 20px; font-size: 14px; }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 3px rgb(33, 179, 123, .25); outline: none; }

/* Forms — clearer focus, better grouping */
.form-label { font-size: 12px; font-weight: 600; color: var(--ent-ink-soft); letter-spacing: .01em; margin-bottom: 5px; text-transform: none; }
.form-control, .form-select {
  font-size: 13.5px;
  padding: 8px 12px;
  border: 1px solid var(--ent-border-strong);
  border-radius: 8px;
  background: var(--ent-surface);
  color: var(--ent-ink);
  transition: border-color .12s, box-shadow .12s;
}
.form-control::placeholder { color: #94a3b8; }
.form-control:focus, .form-select:focus {
  border-color: var(--ent-primary);
  box-shadow: 0 0 0 3px rgb(33, 179, 123, .15);
  outline: none;
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ent-danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .15); }
.invalid-feedback { font-size: 11.5px; font-weight: 500; }
.form-text { color: var(--ent-muted); font-size: 11.5px; }
.input-group-text { background: var(--ent-surface-2); border-color: var(--ent-border-strong); color: var(--ent-ink-soft); font-size: 12.5px; }

/* Field group / fieldset visual */
.form-section {
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  padding: 18px;
  margin-bottom: 18px;
  background: var(--ent-surface);
}
.form-section > .form-section-title {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ent-muted); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--ent-border);
}

/* Modals — quieter chrome, sharper title */
.modal-content { border: 1px solid var(--ent-border); border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .22); }
.modal-header { border-bottom: 1px solid var(--ent-border); padding: 16px 20px; }
.modal-title { font-weight: 700; letter-spacing: -.01em; font-size: 16px; }
.modal-body { padding: 20px; font-size: 13.5px; }
.modal-footer { border-top: 1px solid var(--ent-border); padding: 14px 20px; gap: 8px; }

/* Badges */
.badge { font-weight: 600; font-size: 11px; padding: 4px 8px; border-radius: 6px; letter-spacing: .02em; }
.badge.bg-success-soft { background: #e6f7ef; color: var(--ent-success); }
.badge.bg-warning-soft { background: #fdf3e2; color: var(--ent-warning); }
.badge.bg-danger-soft  { background: #fbeae7; color: var(--ent-danger); }
.badge.bg-info-soft    { background: #e7f6ef; color: var(--ent-primary-700); }

/* Empty / loading / error states */
.empty-state { text-align: center; padding: 48px 24px; color: var(--ent-muted); }
.empty-state .empty-icon { font-size: 36px; color: #cbd5e1; margin-bottom: 10px; }
.empty-state .empty-title { font-size: 14px; font-weight: 600; color: var(--ent-ink); margin: 0 0 4px; }
.empty-state .empty-sub { font-size: 12.5px; color: var(--ent-muted); }
.state-error { border-left: 3px solid var(--ent-danger); background: #fef6f5; color: #7a2218; padding: 12px 14px; border-radius: 8px; font-size: 13px; }
.state-success { border-left: 3px solid var(--ent-success); background: #effaf4; color: #0a5d40; padding: 12px 14px; border-radius: 8px; font-size: 13px; }

/* Pagination */
.pagination { gap: 4px; }
.pagination .page-link { border-radius: 8px !important; border: 1px solid var(--ent-border); color: var(--ent-ink-soft); font-size: 12.5px; font-weight: 600; padding: 6px 10px; }
.pagination .page-item.active .page-link { background: var(--ent-primary); border-color: var(--ent-primary); color: #fff; }

/* Filter bar above tables */
.filters-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 14px 16px; background: var(--ent-surface); border: 1px solid var(--ent-border); border-radius: var(--ent-radius-lg); margin-bottom: 14px; }
.filters-bar .form-label { margin-bottom: 4px; }
.filters-bar .form-control, .filters-bar .form-select { min-width: 140px; }

/* Sidebar refinement */
.app-sidebar { border-right: 1px solid var(--ent-border); }
.app-sidebar .nav-link { font-size: 13px; font-weight: 500; color: var(--ent-ink-soft); border-radius: 8px; padding: 8px 12px; }
.app-sidebar .nav-link:hover { background: var(--ent-surface-2); color: var(--ent-ink); }
.app-sidebar .nav-link.active { background: #e7f6ef; color: var(--ent-primary-700); font-weight: 600; }

/* Skeleton shimmer (already used by loading.js) — calmer */
.fms-skel { background: linear-gradient(90deg, #eef2f7 0%, #f8faf9 50%, #eef2f7 100%); background-size: 200% 100%; animation: fmsShimmer 1.2s linear infinite; border-radius: 6px; }
@keyframes fmsShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Tabular numerics everywhere it matters */
.money, .num, td.money, .table .money { font-variant-numeric: tabular-nums; }

/* Responsive — tables become scroll containers on small screens */
@media (max-width: 768px) {
  .app-main { padding: 16px 14px 40px; }
  .page-header h1 { font-size: 19px; }
  .kpi .kpi-value, .kpi .value { font-size: 20px; }
  .table-responsive { border: 1px solid var(--ent-border); border-radius: var(--ent-radius-lg); }
  .filters-bar { padding: 12px; }
  .filters-bar .form-control, .filters-bar .form-select { min-width: 100%; flex: 1 1 100%; }
  .modal-body { padding: 16px; }
}

/* Accessibility — visible focus ring on interactive controls */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, .nav-link:focus-visible {
  outline: 2px solid var(--ent-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Print — reports */
@media print {
  .app-sidebar, .app-topbar, .filters-bar, .btn, .pagination { display: none !important; }
  .app-main { padding: 0; }
  .card-soft, .card { border: none; box-shadow: none; }
  .table thead th { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Collection form — premium professional refresh (scoped to .collection-premium)
   Visual-only: no markup or JS contracts changed.
   ───────────────────────────────────────────────────────────────────────── */
.collection-premium {
  --cp-surface: #ffffff;
  --cp-surface-2: #f8fafc;
  --cp-border: #e6eaf2;
  --cp-border-strong: #d6dbe6;
  --cp-text: #0f172a;
  --cp-muted: #64748b;
  --cp-accent: #0a2540;
  --cp-accent-soft: #eef2f7;
  --cp-gold: #c79a3a;
  --cp-radius: 16px;
  --cp-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 32px -20px rgba(15,23,42,.18);
}
.collection-premium .cp-main {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
  padding: 28px 28px 24px;
  position: relative;
}
.collection-premium .cp-main::before {
  content: ""; display: block; position: absolute; inset: 0 0 auto 0; height: 4px;
  border-radius: var(--cp-radius) var(--cp-radius) 0 0;
  background: linear-gradient(90deg, var(--cp-accent) 0%, #1a3a66 55%, var(--cp-gold) 100%);
}
.collection-premium .cp-main hr {
  margin: 28px -28px;
  border: 0; border-top: 1px solid var(--cp-border);
}
.collection-premium .cp-main h2.h6 {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cp-accent); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.collection-premium .cp-main h2.h6 i { color: var(--cp-gold); }
.collection-premium .form-label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cp-muted); font-weight: 600; margin-bottom: 6px;
}
.collection-premium .form-control,
.collection-premium .form-select {
  border-radius: 10px;
  border: 1px solid var(--cp-border-strong);
  height: 42px;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.collection-premium .form-control:focus,
.collection-premium .form-select:focus {
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 3px rgba(10,37,64,.10);
}
.collection-premium .form-control-sm,
.collection-premium .form-select-sm { height: 36px; font-size: 13px; }
.collection-premium .btn-pill { border-radius: 999px; padding: .45rem 1rem; font-weight: 600; }
.collection-premium .btn-outline-primary { border-color: var(--cp-accent); color: var(--cp-accent); }
.collection-premium .btn-outline-primary:hover { background: var(--cp-accent); color: #fff; }
.collection-premium .btn-primary {
  background: var(--cp-accent); border-color: var(--cp-accent);
  box-shadow: 0 6px 18px -10px rgba(10,37,64,.6);
}
.collection-premium .btn-primary:hover { background: #14365b; border-color: #14365b; }
.collection-premium .table-soft { font-size: 13.5px; }
.collection-premium .table-soft thead th {
  background: var(--cp-surface-2);
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 11px; color: var(--cp-muted); font-weight: 600;
  border-bottom: 1px solid var(--cp-border);
}
.collection-premium .table-soft tbody tr { transition: background .12s; }
.collection-premium .table-soft tbody tr:hover { background: var(--cp-accent-soft); }
.collection-premium .ona-report {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
  padding: 22px;
  position: sticky; top: 16px;
}
.collection-premium .ona-report .ona-brand {
  color: var(--cp-accent) !important;
  border-left: 3px solid var(--cp-gold);
  padding-left: 10px;
}
.collection-premium .ona-divider {
  height: 1px; background: linear-gradient(90deg, transparent, var(--cp-border), transparent);
  margin: 14px 0;
}
.collection-premium .ona-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: "tnum";
  letter-spacing: -.01em;
}
.collection-premium .ona-count {
  flex: 1 1 0; min-width: 80px;
  background: var(--cp-surface-2);
  border: 1px solid var(--cp-border);
  border-radius: 10px; padding: 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.collection-premium .badge.bg-primary-subtle {
  background: var(--cp-accent) !important; color: #fff !important;
  letter-spacing: .12em; font-size: 10px; padding: 4px 8px;
}
.collection-premium .alert {
  border-radius: 12px; border: 1px solid var(--cp-border);
  font-size: 13px;
}
.collection-premium .list-group-item-action:hover { background: var(--cp-accent-soft); }
@media (max-width: 991.98px) {
  .collection-premium .ona-report { position: static; }
  .collection-premium .cp-main { padding: 20px; }
  .collection-premium .cp-main hr { margin: 22px -20px; }
}
@media print {
  .collection-premium .col-lg-4 { display: none; }
  .collection-premium .col-lg-8 { width: 100%; max-width: 100%; flex: 0 0 100%; }
  .collection-premium .cp-main { box-shadow: none; border: none; padding: 0; }
}

/* =========================================================
   Communication Center — Compose (scoped .cc-* styles)
   ========================================================= */
.cc-wrap { max-width: 1180px; margin: 0 auto; }
.cc-steps { gap: .25rem; flex-wrap: wrap; }
.cc-steps .nav-link {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--bs-light, #f6f7fb);
  color: #4a5567; border: 1px solid #e6e9ef;
  padding: .55rem 1rem; border-radius: 999px; font-weight: 500;
  transition: all .15s ease;
}
.cc-steps .nav-link:hover { border-color: #c7d2fe; color: #1e3a8a; }
.cc-steps .nav-link.active {
  background: linear-gradient(135deg, #21b47b, #23bf83);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgb(33, 180, 123,.25);
}
.cc-steps .cc-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.25); font-size: .78rem; font-weight: 700;
}
.cc-steps .nav-link:not(.active) .cc-num { background: #e0e7ff; color: #3730a3; }

.cc-rows-wrap { max-height: 460px; overflow: auto; border: 1px solid #eef0f4; border-radius: 8px; }
.cc-thead th { position: sticky; top: 0; background: #fafbfd; z-index: 1; }

.cc-preview {
  min-height: 140px; padding: 1rem 1.1rem;
  border-radius: 10px; border: 1px solid #e6e9ef;
  background: linear-gradient(180deg, #fafbff, #f5f7fb);
  white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92rem; color: #1f2937;
}

.cc-confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
.cc-confirm-grid > div {
  display: flex; justify-content: space-between; padding: .55rem .8rem;
  background: #f8fafc; border: 1px solid #eef0f4; border-radius: 8px;
}
.cc-confirm-grid span { color: #64748b; }
.cc-confirm-grid b { color: #0f172a; }

.cc-send-box {
  background: linear-gradient(135deg, rgb(33, 180, 123,.06), rgb(35, 191, 131,.05));
  border: 1px dashed #c7d2fe; border-radius: 10px;
}

#cc-send[aria-busy="true"] { opacity: .8; cursor: progress; }

@media (max-width: 640px) {
  .cc-steps .nav-link { padding: .45rem .7rem; font-size: .85rem; }
  .cc-confirm-grid { grid-template-columns: 1fr; }
}

/* ===== Sidebar groups (Finance / HR / Settings) ===== */
.side-group { display: flex; flex-direction: column; }
.side-group-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem; background: transparent; border: 0;
  color: #1f2937; font-weight: 600; text-align: left; width: 100%;
  cursor: pointer; border-radius: .5rem;
  font-family: Georgia, 'Times New Roman', serif;
}
.side-group-head:hover { background: var(--primary); color: #fff; }
.side-group-head span { flex: 1; }
.side-chev { transition: transform .18s ease; opacity: .6; font-size: .8em; }
.side-group.open .side-chev { transform: rotate(180deg); }
.side-group-body { display: none; padding-left: .8rem; border-left: 2px solid rgba(0,0,0,.06); margin-left: .9rem; }
.side-group.open .side-group-body { display: flex; flex-direction: column; gap: .15rem; }
.side-group-body .side-link { padding-left: .8rem; font-size: .92em; color: #1f2937; }
.side-group-body .side-link:hover { background: var(--primary); color: #fff; }

/* ===== Communication Center premium grid ===== */
.cc-pro-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cc-pro-card {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .9rem 1rem; background: #fff; border: 1px solid #e7e9ee;
  border-left: 4px solid #cfd4dc; border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(20,20,40,.04);
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cc-pro-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,20,40,.1); border-color: #83d1b3; }
.cc-pro-card:active { transform: translateY(0); }
.cc-pro-action {
  display: none; font-size: .7rem; color: #83d1b3; margin-top: .2rem; font-weight: 600;
}
.cc-pro-card:hover .cc-pro-action { display: block; }
.cc-pro-card.risk-low    { border-left-color: #1a9063; }
.cc-pro-card.risk-medium { border-left-color: #d97706; }
.cc-pro-card.risk-high   { border-left-color: #dc2626; }

/* ===== Premium shared form styles ===== */
.fm-wrap { max-width:820px; margin:0 auto; }
.fm-card { background:#fff; border-radius:16px; box-shadow:0 2px 16px rgba(15,23,42,.06); overflow:hidden; }
.fm-head { padding:24px 32px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:12px; }
.fm-head-icon { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#1b9365,#1d9b6b);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; flex-shrink:0; }
.fm-head-text { flex:1; }
.fm-head-text h2 { margin:0; font-size:18px; font-weight:700; color:#0f172a; }
.fm-head-text p { margin:2px 0 0; font-size:13px; color:#64748b; }
.fm-body { padding:28px 32px; }
.fm-field { margin-bottom:20px; }
.fm-field label { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#334155; margin-bottom:6px; }
.fm-field label i { color:#1b9365; font-size:15px; }
input.fm-input, select.fm-input, textarea.fm-input { width:100%; padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px;
  transition:border-color .2s,box-shadow .2s; background:#fff; font-family:inherit; box-sizing:border-box; }
input.fm-input:focus, select.fm-input:focus, textarea.fm-input:focus { outline:none; border-color:#1b9365; box-shadow:0 0 0 3px rgb(33, 179, 123,.1); }
input.fm-input:hover, select.fm-input:hover, textarea.fm-input:hover { border-color:#cbd5e1; }
.fm-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fm-footer { padding:20px 32px; border-top:1px solid #f1f5f9; display:flex; gap:12px; align-items:center; background:#fafbfc; }
@media(max-width:640px){ .fm-row{grid-template-columns:1fr} .fm-body{padding:20px} }
.cc-pro-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #83d1b3, #1fa974);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.cc-pro-meta { flex: 1; min-width: 0; }
.cc-pro-name { font-weight: 600; }
.cc-pro-sub  { display: flex; gap: .8rem; flex-wrap: wrap; color: #6b7280; font-size: .82em; margin: .15rem 0 .4rem; }
.cc-pro-sub i { margin-right: .15rem; }
.cc-pro-balance { font-weight: 700; font-size: 1.05em; color: #111827; }
.cc-pro-tags { display: flex; gap: .35rem; margin-top: .3rem; }
.cc-pro-risk {
  font-size: .72em; padding: .15rem .55rem; border-radius: 99px; font-weight: 600;
  background: #e5e7eb; color: #374151;
}
.cc-pro-risk.risk-low    { background: #e6f2ed; color: #225944; }
.cc-pro-risk.risk-medium { background: #fef3c7; color: #92400e; }
.cc-pro-risk.risk-high   { background: #fee2e2; color: #991b1b; }
.cc-pro-age { font-size: .72em; padding: .15rem .55rem; border-radius: 99px; background: #f3f4f6; color: #6b7280; }
.cc-pro-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.cc-pro-dot.low { background: #1a9063; }
.cc-pro-dot.med { background: #d97706; }
.cc-pro-dot.high{ background: #dc2626; }
.cc-pro-search { position: relative; }
.cc-pro-search i { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.cc-pro-search input { padding-left: 2rem; min-width: 260px; }

.cc-pro-drawer { width: min(520px, 95vw); }
.cc-dw-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.cc-tl { position: relative; padding-left: 1rem; }
.cc-tl-item { position: relative; padding: .35rem 0 .6rem .9rem; border-left: 2px solid #e5e7eb; margin-left: .2rem; }
.cc-tl-dot  { position: absolute; left: -7px; top: .75rem; width: 12px; height: 12px; border-radius: 50%; background: #1b9667; box-shadow: 0 0 0 3px #fff; }

/* ===== Expense Management ===== */
.em-kpi { background: linear-gradient(180deg, #fff, #f9fafb); }
.em-form { padding: 1.25rem; }

/* ===== Communication Center — Stepper ===== */
.cc-stepper { display: flex; align-items: center; justify-content: center; gap: 0; }
.cc-step { display: flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; border-radius: .5rem; font-size: .9rem; font-weight: 500; color: #6b7280; background: transparent; transition: all .2s; }
.cc-step.active { color: #111827; background: #f3f4f6; font-weight: 600; }
.cc-step-num { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #d1d5db; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; flex-shrink: 0; }
.cc-step.active .cc-step-num { border-color: #83d1b3; background: #83d1b3; color: #fff; }
.cc-step-line { flex: 1; height: 2px; background: #e5e7eb; min-width: 2rem; }
.cc-step.active + .cc-step-line { background: #83d1b3; }

/* ===== Communication Center — Compose ===== */
.cc-pane { animation: ccFadeIn .2s ease; }
@keyframes ccFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.cc-thead th { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; border-bottom: 2px solid #e5e7eb; padding: .5rem .75rem; }
.cc-preview { font-size: .95rem; line-height: 1.6; color: #1f2937; min-height: 3rem; }
.cc-result-box { border-radius: .5rem; }

/* ====== Communication Center (system-tone restyle) ====== */
.cc-search { position: relative; min-width: 260px; }
.cc-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.cc-search .form-control { padding-left: 30px; }

.cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.cc-card {
  display: flex; gap: 12px; align-items: flex-start;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
  box-shadow: var(--shadow-sm);
}
.cc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--primary); }
.cc-card.risk-medium { border-left-color: var(--warn); }
.cc-card.risk-high   { border-left-color: var(--danger); }

.cc-card-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  color: #fff; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cc-card-body { flex: 1; min-width: 0; }
.cc-card-name { font-weight: 600; color: var(--ink); }
.cc-card-sub  { color: var(--ink-soft); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.cc-card-sub i { margin-right: 3px; color: var(--muted); }
.cc-card-balance { font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.cc-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cc-risk, .cc-age, .cc-open {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--border);
}
.cc-risk.risk-low    { background: #e8f5ef; color: var(--accent-green-dark); border-color: #bfe5d1; }
.cc-risk.risk-medium { background: #fff5dc; color: #8a6300; border-color: #f1d68a; }
.cc-risk.risk-high   { background: #fde0e3; color: #9c1822; border-color: #f3aab1; }
.cc-card-action { font-size: 12px; color: var(--primary); margin-top: 8px; }

/* Modal */
#clientModal .modal-content { border-radius: var(--radius-lg); border: 1px solid var(--border); }
#clientModal .modal-header { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cc-kpi { padding: 8px 4px; }
.cc-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cc-kpi-value { font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.cc-tabs .nav-link { color: var(--ink-soft); border: none; border-bottom: 2px solid transparent; padding: 8px 14px; }
.cc-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; }
.cc-summary { background: var(--surface-2); }
.cc-msg { background: var(--surface); }

/* =====================================================================
   Agent stock request lifecycle (premium)
   ===================================================================== */
/* Status badges for the full workflow */
.badge-status.badge-received { background: #e6eeeb; color: #2a6e54; }
.badge-status.badge-transit  { background: #e6e7ff; color: #4338ca; }

/* Per-line availability in the admin review table */
.avail-ok   { display:inline-block; padding:1px 8px; border-radius:999px; background:#edf2f0; color:#2a6e54; font-weight:700; font-size:12px; }
.avail-short{ display:inline-block; padding:1px 8px; border-radius:999px; background:#fdecee; color:#c4303f; font-weight:700; font-size:12px; }

/* Compact lifecycle timeline (agent "My Requests") */
.req-timeline { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.req-step { display:flex; align-items:center; gap:8px; min-width:0; }
.req-step-ic {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; background:#f1f5f9; color:#94a3b8;
  border:1.5px solid #e2e8f0;
}
.req-step.done .req-step-ic { background:#e6eeeb; color:#2a6e54; border-color:#bfe5d1; }
.req-step.current .req-step-ic { background:#1b9365; color:#fff; border-color:#1b9365; box-shadow:0 0 0 4px rgb(33, 179, 123,.12); }
.req-step-tx { display:flex; flex-direction:column; line-height:1.15; }
.req-step-tx strong { font-size:12px; color:#0f172a; }
.req-step-tx small { font-size:10.5px; color:#94a3b8; white-space:nowrap; }
.req-step-line { flex:1 1 14px; min-width:10px; height:2px; background:#e2e8f0; margin:0 2px; }

/* Confirmation modal item list (agent stock request) */
.req-confirm-list { max-height:260px; overflow-y:auto; border:1px solid #eef2f7; border-radius:10px; }
.req-confirm-item {
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  padding:9px 12px; border-bottom:1px solid #f1f5f9; font-size:13px;
}
.req-confirm-item:last-child { border-bottom:none; }
.req-confirm-item span { color:#334155; }
.req-confirm-item strong { color:#1b9365; background:#f4faf8; padding:1px 10px; border-radius:999px; }

/* Cart input fields laid out in one horizontal row */
.cart-input-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pos-input-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pos-input-row .input-ic { width:100%; }
@media (max-width:575.98px) {
  .cart-input-row, .pos-input-row { grid-template-columns:1fr; }
}

/* Dashboard starts with the operational overview itself; a repeated page title
   adds no value. Keep the reference layout: period controls top-right, then
   greeting and notification content below. These final rules intentionally
   win over earlier mobile dashboard variants. */
/* .dashboard-title { display:none; }
.dashboard-welcome { min-height:236px; }
.dashboard-dates { grid-template-columns:190px 190px 104px; gap:12px; justify-content:end; }
.dashboard-period { width:104px; }
@media (max-width:650px) {
  .dashboard-welcome { min-height:0; padding:12px 16px 28px; }
  .dashboard-dates { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:7px; justify-content:stretch; }
  .dashboard-dates .form-control { min-width:0; height:36px; padding:5px 7px; font-size:12px; }
  .dashboard-period { grid-column:1 / -1; justify-self:start; width:auto; min-width:106px; height:34px; padding:5px 16px; font-size:12px; }
} */

/* Offline primary system typeface. */
@font-face { font-family:'IBM Plex Serif'; src:url('../fonts/ibm-plex-serif-400.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:'IBM Plex Serif'; src:url('../fonts/ibm-plex-serif-500.ttf') format('truetype'); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:'IBM Plex Serif'; src:url('../fonts/ibm-plex-serif-600.ttf') format('truetype'); font-style:normal; font-weight:600; font-display:swap; }
@font-face { font-family:'IBM Plex Serif'; src:url('../fonts/ibm-plex-serif-700.ttf') format('truetype'); font-style:normal; font-weight:700; font-display:swap; }
@font-face { font-family:'IBM Plex Serif'; src:url('../fonts/ibm-plex-serif-italic-400.ttf') format('truetype'); font-style:italic; font-weight:400; font-display:swap; }

:root { --font-ui:'IBM Plex Serif', Georgia, 'Times New Roman', serif; --app-font:var(--font-ui); --bs-body-font-family:var(--font-ui); }
body, button, input, select, textarea, .btn, .form-control, .form-select, .modal, .table,
h1, h2, h3, h4, h5, h6, .side-link, .side-group-head, .page-head h1,
.report-section-header h2, .sheet-label, .sheet-store, .mini-kpis small {
  font-family:var(--font-ui) !important;
}
code, pre, kbd, samp, .mono, .font-monospace, .ona-report .ona-mono { font-family:'JetBrains Mono', Consolas, monospace !important; }
.bi, [class^="bi-"], [class*=" bi-"] { font-family:'bootstrap-icons' !important; }

/* IBM Plex Serif is bundled with the application so the official interface
   remains identical when the shop is running without internet access. */
@font-face {
  font-family:'IBM Plex Serif';
  src:url('../fonts/ibm-plex-serif-400.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:'IBM Plex Serif';
  src:url('../fonts/ibm-plex-serif-500.ttf') format('truetype');
  font-style:normal;
  font-weight:500;
  font-display:swap;
}
@font-face {
  font-family:'IBM Plex Serif';
  src:url('../fonts/ibm-plex-serif-600.ttf') format('truetype');
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
@font-face {
  font-family:'IBM Plex Serif';
  src:url('../fonts/ibm-plex-serif-700.ttf') format('truetype');
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
@font-face {
  font-family:'IBM Plex Serif';
  src:url('../fonts/ibm-plex-serif-italic-400.ttf') format('truetype');
  font-style:italic;
  font-weight:400;
  font-display:swap;
}
:root { --font-ui:'IBM Plex Serif', Georgia, 'Times New Roman', serif; --app-font:var(--font-ui); --bs-body-font-family:var(--font-ui); }
body, body *:not(.bi):not([class^="bi-"]):not([class*=" bi-"]) { font-family:var(--font-ui) !important; }
code, pre, kbd, samp, .mono, .font-monospace, .ona-report .ona-mono { font-family:'JetBrains Mono', Consolas, monospace !important; }
.bi, [class^="bi-"], [class*=" bi-"] { font-family:'bootstrap-icons' !important; }

/* Agent cart lines — keep inputs on one horizontal line */
.agent-pos .cart-line { flex-wrap:nowrap; }
.agent-pos .cart-line .amount-txt { white-space:nowrap; }

/* =====================================================================
   Agent stock request — v2 (request cart + in-transit truck)
   ===================================================================== */
/* Moving truck for "In Transit" */
.truck-move { display:inline-block; animation:truckMove 1.4s ease-in-out infinite; }
@keyframes truckMove {
    0%   { transform: translateX(0); }
    45%  { transform: translateX(12px); }
    55%  { transform: translateX(12px); }
    100% { transform: translateX(0); }
}

/* Per-row "Request" button (highlight rows already added) */
.req-row .req-btn { white-space:nowrap; }
.req-row.added td { background:#f5faf8 !important; }

/* Request cart list */
.req-cart-line {
    display:flex; align-items:center; gap:10px;
    padding:9px 12px; border:1px solid #eef2f7; border-radius:10px; margin-bottom:8px; background:#fff;
}
.req-cart-line .nm { flex:1; min-width:0; }
.req-cart-line .nm .t { font-weight:600; color:#0f172a; font-size:13px; }
.req-cart-line .nm .s { font-size:11px; color:#94a3b8; }
.req-cart-line input[type="number"] { width:76px; }
.req-cart-line .req-cart-del { padding:2px 8px; }

/* Adjustment modal — available stock per line */
.adj-avail {
    display:inline-block; padding:3px 8px; border-radius:999px;
    background:#eef2f7; color:#64748b; font-size:11px; font-weight:700; white-space:nowrap;
}
.adj-avail.ok   { background:#edf2f0; color:#2a6e54; }
.adj-avail.zero { background:#fdecee; color:#c4303f; }

/* =====================================================================
   Purchases — payment mode (cash / credit / part-cash)
   ===================================================================== */
.po-pay-wrap { background:#fff; border-top:1px solid var(--border,#e3e9f0); padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.po-mode-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.po-mode-btn {
  border:1.5px solid #dde3ec; background:#fff; color:#475569; border-radius:9px;
  padding:8px 4px; font-weight:700; font-size:12px; cursor:pointer; transition:all .12s; text-align:center;
}
.po-mode-btn:hover { border-color:#c7d2fe; color:#1e3a8a; }
.po-mode-btn.active { background:linear-gradient(135deg,#21b47b,#23bf83); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgb(33, 180, 123,.22); }
.po-pay-extras { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.po-pay-extras .input-ic { flex:1; min-width:0; }
@media (max-width:575.98px) {
  .po-pay-extras { flex-direction:column; align-items:stretch; }
}

/* =====================================================================
   Procurement suppliers — card grid
   ===================================================================== */
.sup-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.sup-card {
  background:var(--ent-surface,#fff); border:1px solid var(--ent-border,#e3e9f0); border-radius:14px;
  padding:16px; display:flex; flex-direction:column; gap:10px;
  box-shadow:var(--ent-shadow-xs,0 1px 2px rgba(15,23,42,.04));
  transition:box-shadow .15s,transform .15s;
}
.sup-card:hover { box-shadow:var(--ent-shadow-md,0 4px 12px rgba(15,23,42,.06)); transform:translateY(-1px); }
.sup-card .head { display:flex; gap:12px; align-items:center; }
.sup-avatar {
  width:44px; height:44px; border-radius:12px; flex-shrink:0; color:#fff;
  background:linear-gradient(135deg,#1b9365,#1d9b6b);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
}
.sup-card .nm { font-weight:700; color:#0f172a; font-size:14px; }
.sup-card .meta { display:flex; flex-direction:column; gap:3px; font-size:12px; color:#64748b; min-width:0; }
.sup-card .meta span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sup-card .meta i { margin-right:6px; color:#94a3b8; }
.sup-card .foot { display:flex; gap:6px; justify-content:flex-end; border-top:1px solid #f1f5f9; padding-top:10px; margin-top:auto; }

/* =====================================================================
   Sidebar — white background that ends where the menu ends
   The nav is a white panel that hugs its content (does not paint a tall
   empty white column below the items).
   ===================================================================== */
.app-sidebar {
  background: #ffffff;
  align-self: start;
  position: sticky;
  top: 64px;
  height: auto;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
@media (min-width: 992px) {
  .app-sidebar { margin: 0 0 24px 0; border-radius: 0 14px 0 0; }
}
@media (max-width: 575.98px) {
  .app-sidebar { top: 58px; border-radius: 0; } /* drawer on phones */
}

/* =====================================================================
   POS package picker (crate / dozen / half-dozen ...)
   ===================================================================== */
.pack-opt {
  display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  padding:10px 12px; border:1px solid var(--ent-border,#e3e9f0); border-radius:10px;
  background:#fff; cursor:pointer; transition:border-color .12s, box-shadow .12s;
}
.pack-opt:hover { border-color:#1b9365; box-shadow:0 2px 10px rgb(33, 179, 123,.12); }
.pack-opt .pack-name { font-weight:700; color:#0f172a; flex:1; }
.pack-opt .pack-qty { color:#64748b; font-size:12px; white-space:nowrap; }
.pack-opt .pack-price { font-weight:700; color:#1b9365; min-width:96px; text-align:right; white-space:nowrap; }
.pack-opt.pack-muted { border-style:dashed; }

/* =====================================================================
   Reporting language
   Compact, calm controls and ledger-like tables shared by reporting views.
   ===================================================================== */
.report-page { max-width: 1500px; }
.report-heading { margin: 0 0 18px; }
.report-heading h1 { font-size: 23px; margin: 5px 0 2px; }
.report-heading p { margin: 0; color: var(--ent-muted); font-size: 13px; }
.report-crumbs { font-size: 13px; }
.report-crumbs > i { color: #607286; font-size: 13px; }
.report-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) minmax(155px, .8fr) minmax(145px, .7fr) minmax(145px, .7fr) auto;
  gap: 10px; align-items: end; padding: 14px 16px;
  background: #f0f7f5; border: 1px solid #dae5e1; border-radius: 10px;
}
.report-field { min-width: 0; }
.report-field label { display:block; margin:0 0 4px 8px; color:#4e687a; font-size:11px; font-weight:700; }
.report-toolbar .form-control, .report-toolbar .form-select { min-height: 40px; border-color:#b9cbd3; border-radius:5px; box-shadow:none; }
.report-toolbar .form-control:focus, .report-toolbar .form-select:focus { border-color:#1c9b6a; box-shadow:0 0 0 3px rgb(28, 155, 106,.14); }
.report-actions { display:flex; align-items:stretch; gap:0; }
.report-actions .btn { height:40px; min-width:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #b9cbd3; border-radius:0; color:#516377; background:#fff; }
.report-actions .report-apply { gap:6px; padding:0 13px; background:#1b9365; border-color:#1b9365; color:#fff; border-radius:5px 0 0 5px; }
.report-actions .report-apply:hover { background:#18835a; }
.report-actions .report-icon-btn + .report-icon-btn { border-left:0; }
.report-actions .report-icon-btn:last-child { border-radius:0 5px 5px 0; }
.report-actions .report-icon-btn:hover { background:#edf5f7; color:#245f48; }
.report-period { display:flex; align-items:center; gap:6px; margin:12px 2px 17px; color:#5b7182; font-size:12px; }
.report-period i { color:#1c9768; }
.report-period span { color:#99aab4; }
.report-summary-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-bottom:22px; }
.report-summary-card { min-height:105px; padding:17px 18px; background:#fff; border:1px solid #dbe7ea; border-radius:6px; box-shadow:0 2px 5px rgba(27,66,83,.08); }
.report-summary-card .label { color:#5683a3; font-size:10px; font-weight:800; letter-spacing:.045em; text-transform:uppercase; }
.report-summary-card .value { margin-top:6px; color:#16293a; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.report-summary-card .note { margin-top:4px; color:#778b9a; font-size:11px; }
.report-value-positive { color:#188259 !important; }
.report-value-danger { color:#b34a50 !important; }
.report-section { margin-top:2px; }
.report-section-header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 1px 7px; }
.report-section-header h2 { margin:0; color:#5b7892; font-family:Georgia, 'Times New Roman', serif; font-size:14px; font-weight:700; text-transform:uppercase; }
.report-section-header span { color:#8295a2; font-size:12px; }
.report-table-shell { overflow:auto; border:1px solid #cbdce4; border-radius:5px; background:#fff; max-height:70vh; }
.report-table { min-width:1020px; margin:0; border-collapse:collapse; }
.table-soft.report-table thead th { position:sticky; top:0; z-index:2; background:#f7f9f8; color:#52708b; border-bottom:1px solid #c9dce5; padding:10px 12px; font-size:10.5px; }
.table-soft.report-table tbody td { padding:11px 12px; color:#405b73; border-bottom:1px solid #fff; }
.table-soft.report-table tbody tr:nth-child(odd) td { background:#e9edf0; }
.table-soft.report-table tbody tr:nth-child(even) td { background:#fff; }
.table-soft.report-table tbody tr:hover td { background:#e7efec; }
.report-table .report-name { color:#435f7b; font-weight:700; }
.report-table .report-debt { color:#8a5c14; }
.report-table .report-expense { color:#a34248; }
.report-table .report-net { color:#205541; font-weight:800; }
.report-table tfoot td { padding:10px 12px; background:#e5f0ec; border-top:2px solid #c2dcd2; color:#2a6e54; font-weight:800; }
.report-empty { display:flex; min-height:145px; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:#e5f0ec; border:1px solid #d6e9e2; border-radius:5px; color:#1b9264; }
.report-empty i { font-size:26px; opacity:.65; }
.report-empty strong { font-family:Georgia, 'Times New Roman', serif; font-size:20px; }
.report-empty span { font-size:12px; color:#6083a4; }
.report-footnotes { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:12px; color:#657988; font-size:12px; }
.report-footnotes strong { color:#3d5f76; }

/* Shared ledger tables: a single readable baseline for inventory, sales and
   finance lists. Scoped specialty tables can still provide their own layout. */
.table-soft thead th { background:#f7f9f8; color:#52708b; border-bottom-color:#c9dce5; }
.table-soft tbody td { color:#405b73; }
.table-soft tbody tr:nth-child(even) td { background:#e9edf0; }
.table-soft tbody tr:hover td { background:#e7efec; }
.table:not(.table-borderless) thead th { background:#f7f9f8; color:#52708b; border-bottom-color:#c9dce5; }
.table:not(.table-borderless) tbody td { color:#405b73; }
.table:not(.table-borderless) tbody tr:nth-child(even) td { background:#e9edf0; }
.table:not(.table-borderless) tbody tr:hover td { background:#e7efec; }

@media (max-width: 1080px) { .report-toolbar { grid-template-columns:repeat(4, minmax(0, 1fr)); } .report-actions { grid-column:span 4; } }
@media (max-width: 720px) { .report-toolbar { grid-template-columns:1fr 1fr; padding:12px; } .report-field-wide, .report-actions { grid-column:span 2; } .report-summary-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 430px) { .report-toolbar { grid-template-columns:1fr; } .report-field-wide, .report-actions { grid-column:span 1; } .report-summary-grid { grid-template-columns:1fr; } .report-summary-card { min-height:auto; } .report-heading h1 { font-size:21px; } }
@media print { .report-toolbar, .report-period, .report-footnotes, .app-sidebar, .app-topbar { display:none !important; } .report-page { max-width:none; } .report-summary-card { box-shadow:none; } .report-table-shell { max-height:none; overflow:visible; } .report-table { min-width:0; } }

/* Sidebar hierarchy mirrors the operational flow: sell, manage money, buy,
   manage stock, people, then reporting and setup. */
.side-nav { gap:3px; padding:10px 6px 18px; }
.side-brand { order:0; display:flex; align-items:center; gap:12px; padding:13px 9px 20px; color:#1f2937; font:700 18px Georgia, 'Times New Roman', serif; text-decoration:none; }
.side-brand-mark { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--primary); color:#fff; font:20px/1 'bootstrap-icons'; }
.side-nav > .side-link { order:1; border-radius:0; padding:12px 16px; font:700 18px Georgia, 'Times New Roman', serif; color:#1f2937; }
.side-nav > .side-link.active { color:#fff; background:var(--primary-600); border-left:3px solid var(--primary); padding-left:13px; box-shadow:none; }
.side-group { margin:0; }
.side-group-head { padding:12px 16px; border-radius:0; color:#1f2937; font:700 18px Georgia, 'Times New Roman', serif; }
.side-group-head > i:first-child, .side-nav > .side-link > i { font-size:19px; }
.side-group-head:hover { background:var(--primary); color:#fff; }
.side-group-body { margin-left:18px; padding-left:10px; border-left-color:#d9eee4; }
.side-group-body .side-link { padding:8px 10px; font-size:13px; color:#1f2937; }
.side-group-body .side-link:hover { background:var(--primary); color:#fff; }
.nav-agent-workspace { order:2; }
.nav-sales { order:2; }
.nav-finance { order:3; }
/* Cashier navigation follows the counter workflow: sell first, then finance. */
.nav-finance-cashier { order:3; }
.nav-procurement { order:4; }
.nav-inventory { order:5; }
.nav-human-resources { order:6; }
.nav-reports { order:7; }
.nav-agents { order:8; }
.nav-settings { order:9; }
.side-version { order:10; }
@media (max-width: 991.98px) { .side-brand { padding-top:8px; } }

/* Drawer submenus must not look like stacked primary actions.  On touch
   screens :hover can remain stuck after a tap, so keep both the group header
   and its active link calm and clearly nested. */
.side-group.open .side-group-head { background:#fff; color:#1f2937; border-left:3px solid var(--primary); padding-left:13px; }
.side-group-body .side-link.active { background:#eaf7f1; color:#137a51; border-left:3px solid #16a66b; border-radius:0; padding-left:7px; box-shadow:none; }
@media (hover:none) {
  .side-group-head:hover { background:#fff; color:#1f2937; }
  .side-group-body .side-link:hover { background:transparent; color:#1f2937; }
  .side-group-body .side-link.active:hover { background:#eaf7f1; color:#137a51; }
}

/* The dashboard period is an operational filter, not a full-screen form.
   Two dates share the first phone row and the action stays compact below. */
@media (max-width:575.98px) {
  .dashboard-welcome { padding:12px 16px 28px; }
  .dashboard-dates { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:7px; justify-content:stretch; }
  .dashboard-dates .form-control { min-width:0; height:36px; padding:5px 7px; font-size:12px; }
  .dashboard-period { grid-column:1 / -1; justify-self:start; width:auto; min-width:106px; height:34px; padding:5px 16px; font-size:12px; }
  .branch-filter { max-width:118px; padding:0; border:0; border-radius:0; background:transparent; }
  .branch-filter-select { width:108px; max-width:108px; min-width:108px; padding:3px 21px 3px 6px !important; font-size:11px !important; }
}

/* System typography — use the same editorial serif language as the sidebar.
   Bootstrap icon elements retain their dedicated icon font from the CDN. */
body, button, input, select, textarea, .btn, .form-control, .form-select,
.table, .table-soft, .card, .card-soft, .modal-content {
  font-family: Georgia, 'Times New Roman', serif;
}
code, pre, .mono, .font-monospace { font-family: 'JetBrains Mono', Consolas, monospace !important; }
.bi, [class^="bi-"], [class*=" bi-"] { font-family: 'bootstrap-icons' !important; }

/* Dashboard Reports — restrained layout matching the operational overview. */
@media (min-width: 992px) { .app-shell { grid-template-columns:260px minmax(0,1fr); } }
.dashboard-report { max-width:1600px; }
/* The dashboard is the application home. It must always retain the standard
   shell on desktop, even if a focused register/report layout rule was left in
   a cached stylesheet after navigating away from that page. */
@media (min-width:992px) {
  body:has(.dashboard-report) .app-topbar {
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  body:has(.dashboard-report) .app-shell {
    grid-template-columns:245px minmax(0,1fr) !important;
  }
  body:has(.dashboard-report) .app-sidebar {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}
.dashboard-escape-nav {
  position:fixed;
  top:12px;
  right:14px;
  z-index:10050;
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px;
  border:1px solid #cfe2dc;
  border-radius:10px;
  background:#fff;
  box-shadow:0 6px 20px rgba(24,54,79,.18);
}
.dashboard-escape-nav a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:7px 10px;
  border-radius:7px;
  color:#23536b;
  font-size:12px;
  font-weight:750;
  text-decoration:none;
}
.dashboard-escape-nav a:hover { background:#eaf7f1; color:#137a51; }
.dashboard-escape-nav .dashboard-escape-logout { color:#b42318; }
.dashboard-escape-nav .dashboard-escape-logout:hover { background:#fff0ef; color:#9f1b12; }
/* With the normal shell present the escape hatch is not needed. */
body:has(.app-topbar) .dashboard-escape-nav { display:none !important; }
@media print { .dashboard-escape-nav { display:none !important; } }
@media (max-width:575.98px) {
  .dashboard-escape-nav { top:8px; right:8px; }
  .dashboard-escape-nav a { min-width:34px; justify-content:center; padding:7px; }
  .dashboard-escape-nav a span { display:none; }
}
.dashboard-title { margin:0 0 14px; }
.dashboard-title h1 { margin:4px 0 0; font-size:23px; }
.dashboard-welcome { position:relative; min-height:295px; padding:16px 38px 34px; background:#fff; border-left:3px solid #1a8e62; border-radius:4px; box-shadow:0 2px 6px rgba(25,65,81,.11); }
.dashboard-dates { display:grid; grid-template-columns:190px 190px auto; gap:16px; justify-content:end; }
.dashboard-dates .form-control, .dashboard-period { height:38px; min-width:0; border-radius:3px; background:#fff; color:#405b73; }
.dashboard-period { width:102px; border:1px solid #c7d2da; font-size:13px; }
.dashboard-welcome-body { display:grid; grid-template-columns:220px minmax(0, 1fr); gap:28px; margin-top:20px; }
.dashboard-greeting h2 { margin:0 0 12px; font-size:25px; color:#152637; }
.dashboard-greeting p { margin:0; color:#546d86; font-size:22px; font-weight:700; }
.dashboard-notification-label { margin:0 0 6px; color:#748ca1; font-size:13px; font-weight:700; }
.dashboard-alert { display:grid; grid-template-columns:1fr auto; gap:5px 20px; align-items:center; max-width:965px; padding:17px 16px; background:#fff4d9; border:1px solid #f5dfa7; border-radius:6px; color:#714f11; }
.dashboard-alert small { grid-column:1 / -1; font-style:italic; font-weight:700; }
.dashboard-alert strong { font-size:19px; line-height:1.25; }
.dashboard-alert a { color:#566d85; text-decoration:none; }
.dashboard-seen { position:absolute; right:38px; bottom:42px; color:#1c9a6a; font-size:16px; font-style:italic; font-weight:700; }
.dashboard-columns { display:grid; grid-template-columns:minmax(480px, 1fr) minmax(520px, 1fr); gap:20px; margin-top:22px; }
.dashboard-kpis { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px 22px; }
.dashboard-kpi { min-height:112px; padding:22px 18px 14px; text-align:center; background:#fff; border:1px solid #e5edf0; border-radius:5px; box-shadow:0 2px 5px rgba(25,65,81,.10); }
.dashboard-kpi .label { color:#6681a0; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.dashboard-kpi .value { margin-top:5px; color:#111c29; font-size:17px; font-weight:800; }
.dashboard-kpi .trend { margin-top:4px; color:#21b17a; font-family:Arial, sans-serif; }
.dashboard-kpi .trend.down { color:#21b17a; }
.dashboard-kpi-wide { grid-column:1 / -1; min-height:110px; }
.dashboard-kpi-wide .value { font-size:29px; }
.dashboard-kpi .positive { color:#50b987; }.dashboard-kpi .negative { color:#b34a50; }
.dashboard-tables { display:grid; gap:20px; }
.dashboard-branch-card { overflow:hidden; min-height:0; background:#fff; border:1px solid #e5edf0; border-radius:5px; box-shadow:0 2px 5px rgba(25,65,81,.10); }
.dashboard-branch-card header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid #dce5e9; color:#162536; font-size:16px; }
.dashboard-branch-card header span { color:#526f8f; font-size:15px; font-weight:400; }
.dashboard-branch-card table { width:calc(100% - 48px); margin:22px 24px 16px; border-collapse:collapse; }
.dashboard-branch-card th { padding:7px; color:#6681a0; border-bottom:2px solid #d4dfe5; font-size:11px; font-weight:400; text-align:left; }
.dashboard-branch-card td { padding:10px 7px; color:#415f7c; font-size:16px; }
.dashboard-branch-card td.num, .dashboard-branch-card th.num { text-align:right; }.dashboard-branch-card tbody td.num { color:#111c29; font-weight:800; }
.dashboard-branch-card tfoot td { padding-top:10px; border-top:1px solid #e6edf0; color:#7187a0; font-size:12px; }.dashboard-no-data { text-align:center; color:#8193a0; }
/* Shared numeric language — figures follow the product-card reference:
   confident Georgia digits, lining/tabular alignment, and the same quiet
   blue-gray used by item metadata. */
.plain-number, .num, .money, .mono, .numeric, .amount, .currency, .total,
.stat-card .value, .kpi .value, .report-summary-card .value, .dashboard-kpi .value,
.total-value, .total-bar .total-value, .amount-txt, .amount-due, .balance, .bal,
.val, .cl-row-amount, .cl-stat-num, .ins-row-amount, .pc-bal-chip,
.pos-item-price, .price, .cost, .qty, .stock, .dashboard-period,
.table-soft .num, .table .num, td.num, th.num, input[type="number"],
input[type="date"], input[type="time"], input[type="datetime-local"], output {
  font-family:Georgia, 'Times New Roman', serif !important;
  color:#71829a;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1, 'lnum' 1;
}
/* Gain / loss figures — strong color so the shared gray numeric style never
   hides whether a headline number is a profit (green) or a loss (red). */
.dashboard-kpi .value.positive { color:#1a8f62 !important; }
.dashboard-kpi .value.negative { color:#dc2626 !important; }
.report-summary-card .value.report-value-positive { color:#1a8f62 !important; }
.report-summary-card .value.report-value-danger { color:#dc2626 !important; }
@media (max-width:1100px) { .dashboard-columns { grid-template-columns:1fr; }.dashboard-welcome { min-height:270px; } }
@media (max-width:650px) { .dashboard-welcome { padding:14px 16px 50px; }.dashboard-dates { grid-template-columns:1fr; gap:8px; }.dashboard-period { width:100%; }.dashboard-welcome-body { grid-template-columns:1fr; gap:14px; }.dashboard-seen { right:16px; bottom:18px; font-size:13px; }.dashboard-alert { grid-template-columns:1fr; }.dashboard-alert strong { font-size:16px; }.dashboard-columns { grid-template-columns:1fr; }.dashboard-kpis { grid-template-columns:1fr; gap:12px; }.dashboard-kpi-wide { grid-column:auto; }.dashboard-branch-card header { align-items:flex-start; flex-direction:column; }.dashboard-branch-card table { width:calc(100% - 24px); margin:12px; } }

/* Manage Items — dense stock catalogue and structured item editor. */
.manage-items-head { margin-bottom:12px; }
.manage-items-head h1 { font-size:22px; }
.manage-items-toolbar { padding:0; margin:0 0 20px; border:0; background:transparent; box-shadow:none; }
.manage-category-filter { display:none; }
.manage-items-toolbar .row { align-items:end; }
.manage-items-toolbar .form-label { margin:0 0 -7px 10px; position:relative; z-index:1; width:max-content; padding:0 4px; background:var(--bg); color:#4b6578; font-size:11px; }
.manage-items-toolbar .search-wrap > i, .manage-items-toolbar .search-clear { display:none; }
.manage-items-toolbar .form-control, .manage-items-toolbar .form-select { height:44px; border-color:#b7c5cd; border-radius:5px; background:#fff; }
.manage-items-toolbar #stockSearch:focus { border:2px solid #1fa974; box-shadow:none; }
.manage-table-actions { display:flex; gap:0; }
.manage-table-actions .btn { height:40px; min-width:74px; border-radius:0; border-color:#b9c8d1; box-shadow:none; }
.manage-table-actions .btn + .btn { border-left:0; }
.manage-table-actions .btn:last-child { min-width:84px; border-radius:0 5px 5px 0; }
.manage-table-actions .btn:first-child { border-radius:5px 0 0 5px; }
.manage-items-table { padding:0; overflow:hidden; border:0; border-radius:5px; background:transparent; box-shadow:none; }
.manage-items-table .table-scroll { max-height:none; border:0; border-radius:5px; }
.manage-items-grid { min-width:1200px; border-collapse:collapse; }
.manage-items-grid thead th { position:static !important; padding:10px 8px; background:#fff !important; color:#55708d !important; border-bottom:0 !important; font-size:11px; }
.manage-items-grid tbody td { padding:10px 8px; border:0; vertical-align:middle; color:#48627b; font-size:14px; }
.manage-items-grid tbody tr:nth-child(odd) td { background:#e8e8e8 !important; }
.manage-items-grid tbody tr:nth-child(even) td { background:#fff !important; }
.manage-items-grid tbody tr:hover td { background:#e7f0ed !important; }
.manage-items-grid .cell-main { min-width:300px; max-width:330px; }
.manage-items-grid .item-name-link { display:block; overflow:hidden; color:#506b87; font-size:21px; font-weight:700; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.manage-items-grid .mono { color:#547393; font-size:15px; }
.manage-items-grid .num { color:#4b6580; font-size:15px; }
.manage-package { display:inline-block; min-width:113px; padding:3px 8px; border:1px solid #b9c5d0; background:#fff; color:#4e6882; font-size:11px; text-align:center; }
.manage-reorder-input { width:100%; min-width:130px; height:30px; padding:2px 8px; border:1px solid #737d83; border-radius:2px; background:#fff; color:#111; text-align:center; }
.manage-expire { display:inline-flex; gap:10px; align-items:center; min-width:135px; padding:3px 5px; border:1px solid #83909b; background:#fff; color:#24c386; }
.manage-items-grid .actions { white-space:nowrap; }
.manage-action-btn { min-width:38px; padding:2px 7px; border:0; border-radius:0; color:#fff !important; font-size:11px; line-height:18px; }
.manage-clone { border:1px solid #b5c0c9; background:#fff; color:#4d6480 !important; }.manage-edit { background:#1a8e62; }.manage-delete { background:#ef5358; }
.manage-action-btn:hover { filter:brightness(.92); }
.manage-item-modal { border:0; border-radius:6px; overflow:hidden; background:#e8f4ef; }
.manage-item-modal .modal-header { min-height:52px; padding:14px; background:#fff; border-bottom:1px solid #d8e0e5; }.manage-item-modal .modal-title { color:#27323e; font-size:12px; font-weight:800; text-transform:uppercase; }.manage-item-modal .modal-body { padding:12px; background:#e8f4ef; }.manage-item-modal .modal-footer { padding:12px 20px; background:#fff; border-top:0; }
.manage-item-modal .form-section { margin:0 0 9px; padding:15px 20px 18px; border:0; border-radius:4px; background:#fff; }.manage-item-modal .form-section:last-child { margin-bottom:0; }.manage-item-modal .form-section-head { margin:0 0 25px; color:#188259; font-size:12px; font-weight:800; text-transform:uppercase; }.manage-item-modal .fs-icon { display:none; }.manage-item-modal .form-label { margin-bottom:-6px; margin-left:8px; position:relative; z-index:1; width:max-content; padding:0 4px; background:#fff; color:#5b636d; font-size:10px; }.manage-item-modal .input-ic > i { display:none; }.manage-item-modal .form-control, .manage-item-modal .form-select { min-height:35px; padding:6px 12px; border-color:#c2c9cf; border-radius:4px; box-shadow:none; }.manage-item-modal .input-ic { display:block; }.manage-item-modal .form-switch-premium { padding:9px 12px; border:1px solid #c2c9cf; border-radius:4px; }.manage-item-modal .modal-footer .btn { min-width:110px; }
.package-rows { display:grid; gap:12px; margin:16px 0 12px; }
.package-row { display:grid; grid-template-columns:1.5fr .72fr 1fr 1fr 28px; gap:16px; align-items:end; }
.package-row label { display:block; width:max-content; margin:0 0 -6px 8px; padding:0 4px; position:relative; z-index:1; background:#fff; color:#5b636d; font-size:10px; }
.package-remove { width:28px; height:35px; padding:0; border:0; background:transparent; color:#b122ba; font-size:14px; }
.add-package-btn { min-width:120px; padding:7px 12px; background:#1a8f62; border-color:#1a8f62; color:#fff; font-size:12px; }
.add-package-btn:hover { background:#286950; color:#fff; }
@media (max-width:767px) { .package-row { grid-template-columns:1fr 1fr; gap:10px; }.package-remove { grid-column:2; justify-self:end; } }
@media (max-width:767px) { .manage-items-toolbar .col-md-5, .manage-items-toolbar .col-md-3 { width:100%; }.manage-table-actions { margin-top:8px; }.manage-item-modal .form-section { padding:13px; } }

/* =====================================================================
   System-wide table unification — every list/report table adopts the
   Manage Items look: white header, alternating grey/white rows, light-blue
   hover, no row dividers. Special row tints (out/closed) are kept.
   ===================================================================== */
.table-soft thead th,
.table-soft.premium thead th,
.report-table thead th,
.manage-items-grid thead th,
.table thead th {
    background: #ffffff !important;
    color: #55708d !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
}
.table-soft tbody td,
.table-soft.premium tbody td,
.report-table tbody td,
.manage-items-grid tbody td,
.table tbody td {
    border-bottom: 0 !important;
}
.table-soft tbody tr:nth-child(odd) td,
.table-soft.premium tbody tr:nth-child(odd) td,
.report-table tbody tr:nth-child(odd) td,
.manage-items-grid tbody tr:nth-child(odd) td,
.table tbody tr:nth-child(odd) td { background: #e8e8e8 !important; }
.table-soft tbody tr:nth-child(even) td,
.table-soft.premium tbody tr:nth-child(even) td,
.report-table tbody tr:nth-child(even) td,
.manage-items-grid tbody tr:nth-child(even) td,
.table tbody tr:nth-child(even) td { background: #ffffff !important; }
.table-soft tbody tr:hover td,
.table-soft.premium tbody tr:hover td,
.report-table tbody tr:hover td,
.manage-items-grid tbody tr:hover td,
.table tbody tr:hover td { background: #e7f0ed !important; }
/* keep special row highlights */
.table-soft tbody tr.row-out td,
.table-soft.premium tbody tr.row-out td,
.table tbody tr.row-out td { background: #fff5f5 !important; }
.table-soft tbody tr.row-closed td,
.table-soft.premium tbody tr.row-closed td,
.table tbody tr.row-closed td { background: #f6faf7 !important; color: var(--ink-soft) !important; }

/* =====================================================================
   Vivid accent pass — light background kept, colours more saturated so the
   system looks bright and lively instead of faint.
   ===================================================================== */
:root {
    --bg: #f6fbf9;
    --border: #cfe3da;
    --primary: #1ea672;
    --primary-600: #15835a;
    --accent-green: #1ea672;
    --accent-green-dark: #15835a;
    --accent-green-hi: #29c08c;
    --warn: #ffb52e;
    --pink: #ff5d8f;
    --bank: #4d9fff;
}
body { background: linear-gradient(180deg, #f8fcfa 0%, #eef8f3 100%); color: #16233a; }
a { color: var(--primary); }
a:hover { color: var(--primary-600); }
/* vivid buttons */
.btn-primary { background: linear-gradient(180deg, #29c08c, #1ea672); border-color: #1ea672; box-shadow: 0 6px 16px -8px rgba(30, 166, 114, .55); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(180deg, #1ea672, #15835a); border-color: #15835a; }
.btn-success { background: linear-gradient(180deg, #29c08c, #1ea672); border-color: #1ea672; box-shadow: 0 6px 16px -8px rgba(30, 166, 114, .5); }
.btn-success:hover, .btn-success:focus { background: linear-gradient(180deg, #1ea672, #15835a); border-color: #15835a; }
.btn-outline-primary { color: var(--primary); border-color: #98dcc2; }
.btn-outline-primary:hover { background: #f1f8f5; border-color: var(--primary); color: var(--primary-600); }
/* headings & page titles pop */
.page-head h1 { color: #0d2a49; letter-spacing: -.01em; }
.page-head .crumbs .current { color: #0d2a49; }
h1, h2, h3, h4 { color: #122c47; }
/* brand/accent text richer */
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--accent-green-dark) !important; }
.text-danger { color: #e0243c !important; }

/* =====================================================================
   POS — bigger, clearer numbers (qty / amount / stock) on every screen,
   especially small devices. Applied last so it wins over older rules.
   ===================================================================== */
.pos-item-stock { font-size: 13px; line-height: 1.3; }
.pos-item-price { font-size: 13.5px; }
.pos-item-stock, .pos-item-price { font-variant-numeric: tabular-nums; }
.cart-table tbody td.num { font-size: 14.5px; font-weight: 800; color: #132a40; white-space: nowrap; }
.qty-input { font-size: 15px; font-weight: 800; color: #0f2a45; width: 58px; }
.disc-input { font-size: 15px; font-weight: 800; color: #0f2a45; }
#cartCount { font-size: 18px; font-weight: 900; }
.totals-row .total-amount { font-size: 23px; }

@media (max-width: 991.98px) {
    .pos-item-stock { font-size: 14px; }
    .pos-item-price { font-size: 14px; }
}
@media (max-width: 767.98px) {
    .pos-item-stock { font-size: 14px; }
    .pos-item-price { font-size: 14px; }
    .cart-table tbody td.num { font-size: 15px; }
    .qty-input, .disc-input { min-height: 46px; font-size: 18px !important; }
    #cartCount { font-size: 18px; }
    .totals-row .total-amount { font-size: 22px; }
}
@media (max-width: 575.98px) {
    .pos-item-stock { font-size: 13.5px; line-height: 1.25; }
    .pos-item-price { font-size: 13.5px; }
    .cart-table tbody td.num { font-size: 15px; }
    .qty-input, .disc-input { min-height: 46px; font-size: 18px !important; }
    .cart-table tbody td { padding: 10px 8px; }
    .totals-row .total-amount { font-size: 21px; }
    .pay-btn { font-size: 13px; }
}

/* =====================================================================
   Mobile fix: keep the sidebar an off-canvas OVERLAY on phones/tablets.
   A later "white sidebar" block had re-declared .app-sidebar as
   position: sticky at ALL widths, which put it back in-flow on small
   screens — it then reserved a huge empty first row (≈600px) and pushed
   every page's content to the bottom of the viewport.
   These rules (last in file → win) force the drawer to be position:fixed
   below 992px so .app-main starts right under the topbar again.
   ===================================================================== */
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed !important;
        top: 64px;
        left: 0;
        bottom: 0;
        height: auto;
        max-height: calc(100vh - 64px);
        margin: 0 !important;
        align-self: auto;
        width: min(82vw, 280px);
        max-width: calc(100vw - 28px);
        background: #ffffff;
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-105%);
        transition: transform .22s ease;
        z-index: 90;
        box-shadow: 12px 0 28px -16px rgba(15, 40, 60, .28);
    }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
}
@media (max-width: 575.98px) {
    .app-sidebar { top: 58px; max-height: calc(100vh - 58px); }
}

/* =====================================================================
   Dashboard KPI cards as clickable links (drill into the reports)
   ===================================================================== */
.dashboard-kpis a.dashboard-kpi {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.dashboard-kpis a.dashboard-kpi:hover {
    border-color: #cfe4dc;
    box-shadow: 0 8px 18px rgb(33, 179, 123, .14);
    transform: translateY(-1px);
}
.dashboard-kpis a.dashboard-kpi:focus-visible {
    outline: 2px solid #20af78;
    outline-offset: 2px;
}
.dashboard-kpis a.dashboard-kpi .trend { color: #94a3b8; }

/* ---------------------------------------------------------------------
   Shared operational-sheet language
   Reports, stock, bills, orders and finance use the same calm, centred
   working surface.  The font declaration is local-only: it uses Anthropic
   Sans when installed/provided locally and never requests it from a CDN.
   --------------------------------------------------------------------- */
@font-face {
    font-family: 'Anthropic Sans';
    src: local('Anthropic Sans');
    font-display: swap;
}
:root { --font-ui: 'Anthropic Sans', 'Segoe UI', Arial, sans-serif; }
body, button, input, select, textarea { font-family: var(--font-ui) !important; }
.plain-number, .num, .money, .amount, .currency, .stat-card .value,
.report-summary-card .value, .dashboard-kpi .value, .total-amount {
    font-family: var(--font-ui) !important;
    font-variant-numeric: tabular-nums;
}

/* Centre each operational page without narrowing mobile layouts. */
.app-main > .page-head,
.app-main > .filter-bar,
.app-main > .stat-grid,
.app-main > .card-soft,
.app-main > .report-page,
.app-main > .ss-card { max-width: 1300px; margin-left: auto; margin-right: auto; }
.report-page, .compact-report { width: 100%; }
.compact-report { margin-left:auto; margin-right:auto; }
.compact-report .report-toolbar { justify-content:center; }
.compact-report .report-heading, .compact-report .sheet-label { max-width:100%; }
.report-period { text-align:center; justify-content:center; }

/* Spreadsheet-like cells make financial work, orders and inventory easy to
   scan and match the report sheets.  Cart tables are deliberately excluded. */
.card-table, .report-table-shell { border:1px solid #deebf1; border-radius:4px; background:#fff; box-shadow:0 1px 3px rgb(38, 99, 76,.04); }
.table-soft:not(.cart-table) { border-collapse:collapse !important; background:#fff; }
.table-soft:not(.cart-table) thead th,
.table-soft:not(.cart-table) tbody td,
.table-soft:not(.cart-table) tfoot td {
    border:1px solid #c9cdd2 !important;
    padding:7px 9px;
}
.table-soft:not(.cart-table) thead th {
    background:#f7faf9 !important;
    color:#296b52 !important;
    font-family:var(--font-ui) !important;
    font-size:11px;
    letter-spacing:.02em;
}
.table-soft:not(.cart-table) tbody tr:nth-child(odd) td,
.table-soft:not(.cart-table) tbody tr:nth-child(even) td { background:#fff !important; }
.table-soft:not(.cart-table) tbody tr:hover td { background:#f5faf8 !important; }
.table-soft:not(.cart-table) tfoot td { background:#f7faf9 !important; color:#296b52; font-weight:800; }
.filter-bar { background:#fff; border:1px solid #deebf1; border-radius:4px; box-shadow:0 1px 3px rgb(38, 99, 76,.04); }
.stat-grid .stat-card, .report-summary-card { border-radius:4px; box-shadow:0 1px 3px rgb(38, 99, 76,.08); }

/* The stock sheet is a report as well, so it aligns with every report page. */
.ss-card { width:100%; }
@media (max-width: 640px) {
    .app-main > .page-head, .app-main > .filter-bar, .app-main > .stat-grid,
    .app-main > .card-soft, .app-main > .report-page, .app-main > .ss-card { max-width:100%; }
}

/* Compact, printable report sheets.  The cell borders are deliberate: reports
   are designed to be read on screen and printed for stock/cash reconciliation. */
.compact-report { max-width: 1300px; }
.compact-report .report-heading { margin-bottom: 8px; }
.compact-report .report-heading h1 { font-size: 21px; margin: 2px 0 0; }
.mini-kpis { display:flex; flex-wrap:wrap; gap:16px; margin:14px 0 8px; }
.mini-kpis > div { width:205px; min-height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; border:1px solid #e2e8f0; border-radius:5px; box-shadow:0 2px 5px rgb(38, 99, 76,.08); }
.mini-kpis small { color:#7ad2b0; font-family:Georgia, 'Times New Roman', serif; font-size:11px; font-weight:700; text-transform:uppercase; }
.mini-kpis strong { margin-top:3px; color:#172b4d; font-size:14px; }
.sheet-label { margin:8px 0 5px; color:#66819d; font-family:Georgia, 'Times New Roman', serif; font-size:12px; font-weight:700; text-transform:uppercase; }
.sheet-card, .cash-sheet { background:#fff; border:1px solid #deebf1; border-radius:4px; padding:10px; box-shadow:0 1px 3px rgb(38, 99, 76,.04); }
.cash-sheet { max-width:645px; }
.sheet-store { padding:1px 0 9px; text-align:center; color:#75d1ae; font-family:Georgia, 'Times New Roman', serif; font-size:18px; font-weight:700; }
.sheet-grid { width:100%; border-collapse:collapse; background:#fff; }
.sheet-grid th, .sheet-grid td { border:1px solid #c9cdd2 !important; padding:5px 7px; font-size:12px; line-height:1.2; color:#15243a; }
.sheet-grid th { background:#f7faf9 !important; color:#296b52 !important; font-family:Georgia, 'Times New Roman', serif; font-size:11px; font-weight:700; text-transform:uppercase; }
.sheet-grid td { font-weight:600; }
.sheet-grid .num { text-align:right; white-space:nowrap; }
.sheet-grid tfoot td { background:#f7faf9 !important; color:#296b52; font-weight:800; }
.sheet-grid .amount-good { color:#18835a !important; }
.sheet-grid .balance-row { background:#f5f8f7 !important; color:#7ad2b0 !important; font-weight:800; }
.sheet-empty { color:#68809c !important; text-align:center; font-weight:500 !important; padding:18px !important; }

/* ----- Report note: keeps money held outside the selected period visible --
   A closing report must never silently drop what it excluded, so the excluded
   amount is stated on the page and linked to the report that carries it. */
.report-note { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:8px 0 4px; padding:9px 12px; font-size:12.5px; font-weight:600; color:#1f4f6b; background:#f2f8fc; border:1px solid #cfe2ef; border-left:3px solid #3e82d4; border-radius:5px; }
.report-note a { color:#1b6fb3; font-weight:800; text-decoration:underline; }
/* Warning variant: money the books cannot see must never look settled. */
.report-note.warn { color:#8a4b00; background:#fff8ec; border-color:#f3ddb5; border-left-color:#d48a12; }

/* ----- Receivable Report: the agent column spans its own block of rows, so
   each collection run reads as one unit instead of repeating the name. */
.sheet-grid .agent-cell { font-weight:800; color:#1b5e8a; background:#f4f9fd; text-align:left; vertical-align:top; white-space:nowrap; border-left:3px solid #3e82d4 !important; }

/* ----- Money Distribution: one colour per kind of money ----------------
   The nine rows answer three different questions — which channel did the
   money arrive through, how much actually landed, and how much went back
   out — so they are tinted by meaning instead of by row order:
     green / blue / teal / amber = payment channels
     slate = subtotal, emerald = money confirmed in
     red / orange               = money out
     dark slate                 = the closing balance
   Every text colour clears 4.5:1 on its own tint. */
.money-distribution tbody tr > td {
    background: var(--md-bg) !important;
    color: var(--md-fg) !important;
}
/* Accent bar on the description cell. An inset shadow is used rather than a
   border because the table is border-collapsed and a real border would be
   merged away by the neighbouring cells. */
.money-distribution tbody tr > td:first-child {
    box-shadow: inset 4px 0 0 var(--md-accent);
    padding-left: 10px;
}
.money-distribution tbody tr > td.num { font-variant-numeric: tabular-nums; }

.money-distribution tbody tr.md-cash     { --md-bg:#f0fdf4; --md-fg:#14532d; --md-accent:#16a34a; }
.money-distribution tbody tr.md-mpesa    { --md-bg:#eff6ff; --md-fg:#1e40af; --md-accent:#2563eb; }
.money-distribution tbody tr.md-bank     { --md-bg:#f0fdfa; --md-fg:#115e59; --md-accent:#0d9488; }
.money-distribution tbody tr.md-credit   { --md-bg:#fffbeb; --md-fg:#92400e; --md-accent:#f59e0b; }
.money-distribution tbody tr.md-total    { --md-bg:#f1f5f9; --md-fg:#334155; --md-accent:#64748b; font-weight:800 !important; }
.money-distribution tbody tr.md-received { --md-bg:#dcfce7; --md-fg:#065f46; --md-accent:#059669; font-weight:800 !important; }
.money-distribution tbody tr.md-expense  { --md-bg:#fee2e2; --md-fg:#991b1b; --md-accent:#dc2626; }
.money-distribution tbody tr.md-purchase { --md-bg:#ffedd5; --md-fg:#9a3412; --md-accent:#ea580c; }
.money-distribution tbody tr.md-balance  { --md-bg:#1e293b; --md-fg:#f8fafc; --md-accent:#0f172a; font-weight:800 !important; font-size:14px !important; }
/* A negative closing balance flips to red — the one row that must never be
   misread at a glance. */
.money-distribution tbody tr.md-balance.neg { --md-bg:#7f1d1d; --md-fg:#fee2e2; --md-accent:#dc2626; }

@media print { .compact-report .report-heading, .compact-report .report-toolbar, .mini-kpis { display:none !important; } .sheet-card, .cash-sheet { box-shadow:none; } }
@media (max-width: 640px) { .mini-kpis > div { flex:1 1 145px; } .sheet-card { overflow-x:auto; } .sheet-grid { min-width:650px; } }

/* =====================================================================
   Shared ledger design language
   Reports established the intended visual direction: a quiet blue canvas,
   white working surfaces, and clear ruled rows for operational data.  These
   shared rules deliberately cover the reusable table/card components, so
   inventory, bills, orders, procurement and finance stay in step.

   Anthropic Sans is resolved locally only.  An installed local copy is used
   when present, then the offline system fallback.  No remote font is loaded.
   ===================================================================== */
@font-face {
    font-family: 'Anthropic Sans';
    src: local('Anthropic Sans'), local('Anthropic Sans Regular');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
:root { --app-font: 'Anthropic Sans', Arial, Helvetica, sans-serif; }
body, button, input, select, textarea, .btn, .form-control, .form-select, .modal, .table {
    font-family: var(--app-font) !important;
}
h1, h2, h3, h4, h5, h6, .page-head h1, .side-link, .side-group-head,
.report-section-header h2, .sheet-label, .sheet-store, .mini-kpis small {
    font-family: var(--app-font) !important;
}
/* Numbers remain plain, aligned and easy to scan—never decorative. */
.plain-number, .num, .money, .mono, .numeric, .amount, .currency, .total,
.stat-card .value, .table-soft .num, .table .num, td.num, th.num, input[type="number"] {
    font-family: var(--app-font) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0 !important;
}
.filter-bar, .report-toolbar {
    background:#f0f5f3;
    border:0;
    border-radius:0;
    box-shadow:none;
}
.stat-grid .stat-card, .card-soft, .sheet-card, .cash-sheet {
    border-color:#d8e4ea;
    border-radius:4px;
    box-shadow:0 1px 3px rgb(38, 99, 76,.06);
}
.stat-grid .stat-card { background:#fff; }
.stat-grid .stat-card .label { color:#66819d; font-size:11px; font-weight:700; text-transform:uppercase; }
.table-scroll { border:1px solid #d8e4ea; border-radius:4px; background:#fff; }
.table-soft, .table-soft.premium {
    width:100%;
    border-collapse:collapse !important;
    border-spacing:0 !important;
    background:#fff;
}
.table-soft thead th, .table-soft.premium thead th {
    background:#f7faf9 !important;
    color:#296b52 !important;
    border:1px solid #c9cdd2 !important;
    padding:7px 8px !important;
    font-family:var(--app-font) !important;
    font-size:11px !important;
    font-weight:700;
    text-transform:uppercase;
}
.table-soft tbody td, .table-soft.premium tbody td {
    background:#fff !important;
    color:#15243a;
    border:1px solid #c9cdd2 !important;
    padding:7px 8px !important;
    font-size:12px !important;
    vertical-align:middle;
}
.table-soft tbody tr:nth-child(odd) td, .table-soft.premium tbody tr:nth-child(odd) td,
.table-soft tbody tr:nth-child(even) td, .table-soft.premium tbody tr:nth-child(even) td { background:#fff !important; }
.table-soft tbody tr:hover td, .table-soft.premium tbody tr:hover td { background:#f2f7f5 !important; }
.table-soft tfoot td, .table-soft.premium tfoot td {
    background:#f7faf9 !important;
    border:1px solid #c9cdd2 !important;
    color:#296b52 !important;
    font-weight:800;
}
.table-soft .cell-main .item-name-link, .table-soft .report-name, .table-soft .cust-name { color:#243c59; font-weight:700; }
.badge-status { border-radius:3px; }

/* Use the available workspace.  Operational pages are data-heavy, so their
   tables should begin at the content edge instead of sitting in a narrow
   centred column. */
.app-main > .page-head,
.app-main > .filter-bar,
.app-main > .stat-grid,
.app-main > .card-soft,
.app-main > .report-page,
.app-main > .ss-card {
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
}
.report-page, .compact-report { max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.compact-report .report-toolbar { justify-content:stretch; }
.report-period { justify-content:flex-start; text-align:left; }
.cash-sheet { max-width:none; width:100%; }

/* Sales bills / orders — compact operational ledger from the reference.
   The data remains full-width; controls stay on one calm, short row. */
.sales-ledger-head { margin-bottom:8px; }
.sales-ledger-head h1 { font-size:20px; }
.sales-ledger-head .btn { min-height:34px; padding:7px 12px; }
.sales-ledger-filters, .adjustment-filters {
    padding:8px 10px;
    background:#f0f7f5;
    border:0;
    box-shadow:none;
}
.sales-ledger-filters .form-label, .adjustment-filters .form-label { font-size:10px; margin-bottom:2px; }
.sales-ledger-filters .form-control, .sales-ledger-filters .form-select,
.adjustment-filters .form-control, .adjustment-filters .form-select { min-height:35px; }
.sales-ledger-kpis { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin:10px 0 8px; max-width:850px; }
.sales-ledger-kpis .sales-ledger-due { display:none; }
.sales-ledger-kpis .stat-card { min-height:70px; padding:10px 14px; text-align:center; }
.sales-ledger-kpis .stat-ic, .sales-ledger-kpis .delta { display:none; }
.sales-ledger-kpis .stat-card .value { margin-top:3px; font-size:13px; color:#16243a; }
.sales-ledger-table, .adjustment-table { border:0; box-shadow:none; background:transparent; padding:0; }
.sales-ledger-table .table-scroll, .adjustment-table .table-scroll { border-color:#d8e4ea; }
.sales-ledger-table .table-soft thead th, .adjustment-table .table-soft thead th { padding:7px 8px !important; }
.sales-ledger-table .table-soft tbody td, .adjustment-table .table-soft tbody td { min-height:54px; }
.sales-ledger-table .cust-name { display:block; }
.sales-ledger-table .cust-items, .sales-ledger-table .cust-branch { display:block; margin-top:4px; color:#66819d; }

/* Orders and Bills share the reference ledger: compact controls first, then
   dense, easily scannable financial rows across the full working width. */
.sales-reference-filters { order:2; padding:0; margin:0 0 10px; border:0; box-shadow:none; background:transparent; }
.sales-reference-filters > .row:first-child { --bs-gutter-x:4px; }
.sales-reference-filters > .row:first-child > div { display:flex; flex-direction:column; }
.sales-reference-filters .search-wrap { flex:1; }
.sales-reference-filters .search-wrap .form-control,
.sales-reference-filters .form-select,
.sales-reference-filters .form-control { min-height:36px; border-color:#bdcbd6; border-radius:4px; background:#fff; font-size:12px; }
.sales-reference-filters .search-wrap .bi-search,
.sales-reference-filters .search-clear { display:none; }
.sales-reference-filters .search-wrap .form-control { padding-left:13px; }
.sales-reference-filters .form-label { margin:0 0 2px 8px; color:#526480; font-size:10px; font-weight:600; }
.sales-reference-filters .btn { min-height:36px; padding:6px 8px; border-color:#bdcbd6; border-radius:0; color:#4d6176; background:#fff; }
.sales-reference-filters .btn:first-child { border-radius:4px 0 0 4px; }
.sales-reference-filters .btn:last-child { border-left:0; border-radius:0 4px 4px 0; }
.sales-reference-more { display:none; --bs-gutter-x:5px; }
.sales-reference-more.is-open { display:flex; }
/* Bills uses the Sales Reports pattern: a compact first row with the date
   range and financial dimensions immediately available below it. */
.bills-report-filters .sales-reference-more { display:flex; margin-top:6px !important; }
.bills-report-filters .sales-reference-more > div { display:flex; flex-direction:column; }
.bills-report-filters #sbMore { display:none; }
.bills-report-filters #sbReset { border-left:1px solid #bdcbd6; border-radius:4px; }
.sales-ledger-table .table-soft { min-width:1160px; }
.sales-ledger-table .table-soft thead th { height:31px; padding:7px 8px !important; background:#fff !important; color:#425b7a !important; font-size:10px !important; }
.sales-ledger-table .table-soft tbody td { min-height:68px; padding:10px 8px; color:#425b7a; font-size:12px !important; font-weight:700; vertical-align:middle; }
.sales-ledger-table .table-soft tbody tr:nth-child(odd) td { background:#e9e9e9; }
.sales-ledger-table .table-soft tbody tr:nth-child(even) td { background:#fff; }
.sales-ledger-table .table-soft tbody tr:hover td { background:#e5f3ee; }
.sales-ledger-table .cust-name { color:#405474; font-size:12px; font-weight:800; text-transform:uppercase; }
.sales-ledger-table .cust-items { display:none; }
.sales-ledger-table .cust-branch { margin-top:5px; color:#7995b2; font-family:Georgia,'Times New Roman',serif; font-size:17px; font-style:italic; font-weight:700; }
.sales-ledger-table .badge-status { min-width:76px; border-radius:0; padding:4px 7px; color:#fff; font-size:9px; font-weight:800; text-align:center; }
.sales-ledger-table .badge-cash, .sales-ledger-table .badge-mpesa, .sales-ledger-table .badge-bank, .sales-ledger-table .badge-paid { background:#51cf87; color:#fff; }
.sales-ledger-table .badge-credit, .sales-ledger-table .badge-pending, .sales-ledger-table .badge-unpaid { background:#f0513d; color:#fff; }
.sales-ledger-table .actions { white-space:nowrap; }
.sales-ledger-table .actions .btn { min-width:31px; padding:2px 6px; border-radius:0; font-size:10px; }
.sales-ledger-table .actions .btn-outline-primary { color:#526480; border-color:#bfcbd7; background:#fff; }
.sales-ledger-table .actions .btn-outline-danger { color:#fff; border-color:#ed6262; background:#ed6262; }
.sales-ledger-table .receive-visible { min-width:auto !important; padding:3px 8px !important; border:0 !important; border-radius:0 !important; background:#16845b !important; color:#fff !important; }
.mini-kpis.bills-kpis { order:3; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:0 0 10px; overflow:visible; }
.mini-kpis.bills-kpis > div { min-width:0; min-height:78px; padding:10px 6px; border:1px solid #dce7ec; border-left:3px solid #16a66b; border-radius:5px; background:#fff !important; box-shadow:0 1px 4px rgba(24,54,79,.08); }
.mini-kpis.bills-kpis > div:nth-child(2) { border-left-color:#e2a52d; }
.mini-kpis.bills-kpis > div:nth-child(4) { border-left-color:#e2648e; }
.mini-kpis.bills-kpis > div:nth-child(5) { border-left-color:#438bdc; }
.mini-kpis.bills-kpis > div:nth-child(6) { border-left-color:#e55353; }
.mini-kpis.bills-kpis > div:nth-child(7) { display:none; }
.mini-kpis.bills-kpis small { color:#2c9a61; font-size:10px; font-weight:800; }
.mini-kpis.bills-kpis strong { color:#172b4d; font-size:13px; }
@media (max-width:1000px) { .sales-reference-filters .col-md-4 { flex:0 0 42%; max-width:42%; } .mini-kpis.bills-kpis { grid-template-columns:repeat(3,minmax(150px,1fr)); overflow-x:auto; } }

/* Adjustment order — compact stock-taking dialog, following the agreed POS layout. */
.adjustment-page-head h1 { font-size:20px; }
.adjustment-dialog { max-width:880px; }
.adjustment-modal-content { overflow:hidden; border:0; border-radius:7px; box-shadow:0 18px 52px rgba(27,45,59,.24); }
.adjustment-modal-content .modal-header { min-height:51px; padding:14px; border-bottom:3px solid #19a463; background:#fff; }
.adjustment-modal-content .modal-title { font-size:13px; font-weight:850; text-transform:uppercase; color:#263441; }
.adjustment-modal-content .btn-close { opacity:.55; }
.adjustment-modal-content .modal-body { padding:14px 8px 0; background:#fff; }
.adjustment-source-row { margin:0 0 14px !important; padding:0 8px 18px; border-bottom:2px solid #19a463; }
.adjustment-source-block { display:grid; gap:10px; }
.adjustment-source-row .form-label { display:block; margin:0; padding:13px 10px; background:#18a663; color:#fff; font-size:12px; font-weight:850; text-transform:uppercase; }
.adjustment-source-row .form-select, .adjustment-source-row .form-control { min-height:28px; padding:0 10px; border:0; border-bottom:1px solid #9ba4ab; border-radius:0; box-shadow:none; font-size:14px; }
.adjustment-source-row .form-control:focus, .adjustment-source-row .form-select:focus { border-bottom-color:#178a59; box-shadow:none; }
.adjustment-empty-state { padding:0 0 20px; color:#5a6678; font-family:Georgia,serif; font-size:19px; font-weight:700; text-align:center; }
.adjustment-picker { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:16px; min-height:62px; padding:6px; background:#dceafa; border-top:1px solid #bfd8f2; border-bottom:2px solid #19a463; }
.adjustment-picker-field { position:relative; max-width:595px; }
.adjustment-picker-field .form-control { height:40px; padding-right:38px; border-color:#aeb7c1; border-radius:4px; font-size:14px; }
.adjustment-picker-field > .bi { position:absolute; top:13px; right:14px; color:#687582; pointer-events:none; font-size:12px; }
.adjustment-show-all { display:flex; align-items:center; gap:8px; margin:0; color:#587091; font-size:14px; white-space:nowrap; }
.adjustment-show-all input { width:15px; height:15px; accent-color:#178a59; }
.adjustment-item-count { min-width:58px; color:#718eaf; font-size:12px; font-weight:700; text-align:right; white-space:nowrap; }
.adjustment-picker-results { position:static; z-index:10; width:100%; max-height:none; margin-top:4px; overflow:visible; border:1px solid #b7c8d8; border-radius:4px; background:#fff; box-shadow:0 10px 24px rgba(28,48,69,.16); }
.adjustment-picker-option { display:block; width:100%; padding:12px 14px; border:0; border-bottom:1px solid #edf1f5; background:#fff; color:#1e3143; font-size:14px; text-align:left; }
.adjustment-picker-option:hover, .adjustment-picker-option:focus { background:#eff8f4; outline:0; }
.adjustment-picker-none { color:#6a8298; font-size:12px; }
.adjustment-picker-none { padding:12px; }
.adjustment-modal-content #adjLinesEditor { max-height:none; overflow:visible; background:#fff; padding:8px 8px 0; }
.adjustment-modal-content #adjLinesEditor:empty { display:none; }
.adjustment-modal-content .adj-line { border-color:#d9e5ee !important; border-radius:4px !important; background:#fafcfd !important; }
.adjustment-modal-content .modal-footer { display:flex; align-items:center; gap:12px; min-height:89px; padding:18px 26px 16px; border-top:0; background:#fff; }
.adjustment-total { display:flex; flex:1; justify-content:space-between; align-items:center; color:#5a6678; font-family:Georgia,serif; font-size:18px; }
.adjustment-total span { color:#222; font-family:inherit; font-size:12px; font-weight:700; }
.adjustment-modal-content .modal-footer .btn { text-transform:uppercase; font-size:11px; font-weight:800; }
.adjustment-modal-content .modal-footer .btn-primary { background:#19a463; border-color:#19a463; }
.adjustment-modal-content .modal-footer .btn-primary:disabled { border-color:transparent; background:transparent; color:#8b95a2; opacity:1; }
@media (max-width:767px) { .adjustment-picker { grid-template-columns:1fr auto; gap:8px; } .adjustment-item-count { display:none; } .adjustment-source-row { gap:12px; } }
@media (max-width:767px) { .sales-ledger-kpis { grid-template-columns:1fr; max-width:none; } }

/* Reports are read at arm's length and often printed.  Give every textual
   label enough weight and size to remain clear without enlarging the numbers. */
.report-page .report-heading h1 { font-size:23px; font-weight:800; }
.report-page .crumbs, .report-page .report-field label, .report-page .report-period { font-size:13px; font-weight:650; }
.report-page .report-toolbar .form-control, .report-page .report-toolbar .form-select { font-size:14px; font-weight:600; }
.report-page .sheet-label, .report-page .report-section-header h2 { font-size:13px; font-weight:800; }
.report-page .sheet-store { font-size:19px; font-weight:800; }
.report-page .sheet-grid th { font-size:12px; font-weight:800; }
.report-page .sheet-grid td { font-size:13px; font-weight:650; }
.report-page .sheet-grid td:not(.num) { color:#1d334c; }
.report-page .sheet-grid tfoot td { font-size:13px; font-weight:800; }
.report-page .report-table th { font-size:12px !important; font-weight:800; }
.report-page .report-table td { font-size:13px !important; font-weight:650; }
.report-page .report-table .report-name { font-weight:800; }
.report-page .mini-kpis small { font-size:12px; font-weight:800; }

/* Payment collection must be immediately discoverable in Bills and Orders. */
.receive-visible {
    background:#1a8c60 !important;
    border-color:#1a8c60 !important;
    color:#fff !important;
    box-shadow:0 2px 5px rgb(26, 140, 96,.28) !important;
    font-size:12px !important;
    font-weight:800 !important;
}
.receive-visible:hover, .receive-visible:focus { background:#26654d !important; border-color:#26654d !important; color:#fff !important; }

/* Finance screens use the same enlarged, high-legibility language as reports. */
.finance-readable.page-head h1 { font-size:23px; font-weight:800; }
.finance-readable .crumbs, .finance-readable .form-label { font-size:13px; font-weight:700; }
.finance-readable.stat-grid .stat-card .label { font-size:12px; font-weight:800; }
.finance-readable.stat-grid .stat-card .value { font-size:18px; font-weight:750; }
table.finance-readable th { font-size:12px !important; font-weight:800 !important; }
table.finance-readable td { font-size:13px !important; font-weight:650 !important; color:#1d334c !important; }
table.finance-readable td .muted, table.finance-readable .muted { font-weight:600 !important; }

/* Login form only — the slideshow/art layer is intentionally untouched. */
.auth-card-v2 {
    width:min(360px, calc(100vw - 40px));
    max-width:none;
    margin:0;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.auth-brand { gap:8px; margin:0 0 32px; }
.auth-brand-mark {
    width:60px; height:60px;
    border-radius:0;
    background:rgba(255,255,255,.92);
    color:#64748b;
    box-shadow:none;
    font-size:28px;
}
.auth-brand-logo { max-width:112px; max-height:76px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.22)); }
.auth-brand-name { color:#fff; font-size:15px; font-weight:800; letter-spacing:.3px; text-shadow:0 1px 2px rgba(0,0,0,.3); }
.auth-form { gap:10px; }
.auth-field { gap:0; }
.auth-input-wrap {
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.92);
    border-radius:0;
    padding:0 10px;
    box-shadow:none;
}
.auth-input-wrap:focus-within { border-color:#1a8d61; box-shadow:0 0 0 2px rgb(26, 141, 97,.35); }
.auth-input { min-height:31px; padding:6px 2px; font-size:13px; color:#2f4357; }
.auth-input::placeholder { color:#718096; }
.auth-input-toggle { color:#66819d; font-size:14px; padding:4px 0 4px 8px; }
.auth-forgot { display:block; margin:10px 0 4px; color:rgba(255,255,255,.95); font-size:14px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.auth-submit {
    width:100%; min-height:40px; margin-top:0;
    border-radius:2px;
    background:#198b5f;
    color:#fff;
    box-shadow:none;
    font-family:Georgia, 'Times New Roman', serif !important;
    font-size:17px;
    font-weight:700;
    letter-spacing:0;
    padding:8px 16px;
}
.auth-submit:hover, .auth-submit:focus { background:#27674e; filter:none; transform:none; }
.auth-alert { border-radius:0; margin-bottom:12px; font-size:12px; }
@media (max-width:480px) { .auth-card-v2 { width:min(360px, calc(100vw - 32px)); } }

/* Dashboard refinement — retain the established overview but make every
   important figure and control easier to scan at a glance. */
.dashboard-report { width:100%; }
.dashboard-title { margin-bottom:12px; }
.dashboard-title h1 { font-size:22px; font-weight:800; }
.dashboard-welcome {
    min-height:236px;
    padding:14px 32px 30px;
    border-left-width:4px;
    border-color:#1a8c60;
    box-shadow:0 2px 8px rgb(38, 99, 76,.10);
}
.dashboard-dates { grid-template-columns:190px 190px 104px; gap:12px; }
.dashboard-dates .form-control, .dashboard-period { height:36px; font-size:13px; font-weight:700; }
.dashboard-period { background:#f8fbfc; color:#35536f; }
.dashboard-welcome-body { grid-template-columns:180px minmax(0, 1fr); gap:26px; margin-top:18px; }
.dashboard-greeting h2 { margin-bottom:8px; font-size:23px; font-weight:800; }
.dashboard-greeting p { font-size:19px; color:#607995; }
.dashboard-notification-label { margin-bottom:5px; font-size:12px; font-weight:800; }
.dashboard-alert { max-width:920px; padding:14px 15px; border-radius:5px; }
.dashboard-alert strong { font-size:16px; font-weight:800; }
.dashboard-alert a { font-size:13px; font-weight:700; color:#466783; }
.dashboard-seen { right:32px; bottom:25px; font-size:14px; }
.dashboard-columns { gap:18px; margin-top:18px; }
.dashboard-kpis { gap:16px; }
.dashboard-kpi { min-height:96px; padding:16px 14px 11px; border-color:#dce7eb; box-shadow:0 2px 6px rgb(38, 99, 76,.08); }
.dashboard-kpi .label { font-size:11px; font-weight:800; }
.dashboard-kpi .value { font-size:18px; font-weight:800; }
.dashboard-kpi-wide { min-height:88px; }
.dashboard-kpi-wide .value { font-size:27px; }
.dashboard-branch-card { border-color:#dce7eb; box-shadow:0 2px 6px rgb(38, 99, 76,.08); }
.dashboard-branch-card header { padding:14px 16px; font-size:15px; font-weight:800; }
.dashboard-branch-card header span { font-size:13px; font-weight:650; }
.dashboard-branch-card table { width:calc(100% - 36px); margin:14px 18px 12px; }
.dashboard-branch-card th { padding:7px; font-size:11px; font-weight:700; }
.dashboard-branch-card td { padding:9px 7px; font-size:14px; font-weight:650; }
.dashboard-branch-card tfoot td { font-size:12px; font-weight:800; }
.dashboard-no-data { padding:16px !important; font-weight:600 !important; }
@media (max-width:650px) {
    .dashboard-welcome { min-height:0; padding:14px 16px 50px; }
    .dashboard-welcome-body { grid-template-columns:1fr; }
    .dashboard-dates { grid-template-columns:1fr; }
}

/* Human Resource — visual staff directory. */
.staff-page-head { margin-bottom:7px; }
.staff-page-head h1 { font-size:21px; font-weight:800; }
.staff-directory-toolbar { display:flex; align-items:end; gap:6px; max-width:670px; margin-bottom:2px; }
.staff-directory-toolbar label { display:block; margin:0 0 2px 10px; color:#4d7a9b; font-size:10px; font-weight:700; }
.staff-search-field { flex:1 1 420px; }.staff-status-field { width:170px; }
.staff-directory-toolbar .form-control, .staff-directory-toolbar .form-select { min-height:36px; font-size:13px; }
.staff-directory-toolbar .form-control:focus { border-color:#20b17a; box-shadow:0 0 0 1px #20b17a; }
.staff-refresh, .staff-add { height:36px; min-width:42px; border-radius:3px; }
.staff-add { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; }
.staff-directory { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:26px; padding:42px 28px; min-height:348px; background:#f8fcfa; }
.staff-profile-card { position:relative; display:flex; min-height:275px; flex-direction:column; align-items:center; padding:10px 12px 16px; text-align:center; background:transparent; }
.staff-avatar { display:flex; align-items:center; justify-content:center; width:138px; height:138px; margin-bottom:13px; border:12px solid #fff; border-radius:50%; background:#b8b8b8; box-shadow:0 7px 14px rgba(38,53,83,.17); color:#fff; font-size:69px; }
.staff-profile-card h2 { margin:0; color:#111827; font-size:17px; font-weight:800; }
.staff-role, .staff-phone, .staff-branch { margin:4px 0 0; color:#6e87a8; font-size:13px; font-weight:700; }
.staff-branch { color:#7290b2; font-size:15px; font-style:italic; }
.staff-card-actions { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:auto; padding-top:14px; }
.staff-card-actions form { margin:0; }.staff-card-actions .btn { min-width:34px; height:32px; border-radius:4px; }
.staff-state { display:inline-flex; min-height:27px; align-items:center; padding:3px 8px; border-radius:3px; font-size:11px; font-weight:800; }
.staff-state.is-active { background:#e7efec; color:#27664e; }.staff-state.is-inactive { background:#edf0f4; color:#667085; }
.staff-empty { grid-column:1 / -1; display:flex; min-height:220px; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#6f86a3; text-align:center; }
.staff-empty i { font-size:32px; }.staff-empty strong { color:#26405e; font-size:16px; }.staff-empty span { font-size:13px; }
#staffModal .modal-content { border:0; border-top:3px solid #1a8d61; border-radius:5px; }
#staffModal .modal-header { padding:12px 16px; } #staffModal .modal-title { font-size:14px; font-weight:800; text-transform:uppercase; }
#staffModal .modal-body { margin:10px; padding:20px 28px; background:#fff; border:1px solid #e1efea; box-shadow:0 0 0 10px #edf6f3; }
#staffModal .form-label { color:#5d6d7d; font-size:11px; font-weight:700; }
#staffModal .form-control, #staffModal .form-select { border-width:0 0 1px; border-radius:0; padding-left:0; }
@media (max-width:700px) { .staff-directory-toolbar { max-width:none; flex-wrap:wrap; }.staff-search-field { flex-basis:100%; }.staff-status-field { flex:1; }.staff-directory { padding:20px 12px; gap:16px; }.staff-profile-card { min-height:250px; } }

/* Keep the requested font consistent in headings and report labels as well. */
h1, h2, h3, h4, h5, h6,
.side-link, .side-group-head, .page-head h1, .report-section-header h2,
.mini-kpis small, .sheet-label, .sheet-store, .sheet-grid th {
    font-family:var(--font-ui) !important;
}

/* Sales orders and bills share the same wide cashier workspace as New Sale. */
body:has(.sales-ledger-screen) .app-shell { grid-template-columns:minmax(0, 1fr); }
body:has(.sales-ledger-screen) .app-sidebar { display:none; }
body:has(.sales-ledger-screen) .app-main {
    min-height:calc(100dvh - 64px);
    padding:18px 18px 28px;
}
.pos-screen { gap:56px; }
.sales-ledger-screen {
    display:grid;
    grid-template-columns:120px minmax(0, 1fr);
    gap:56px;
    min-height:calc(100dvh - 110px);
}
.sales-ledger-nav {
    align-self:start;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid #e2e8f0;
}
.sales-ledger-nav a {
    display:block;
    padding:12px 14px;
    color:#172033;
    font-size:13px;
    font-weight:750;
    text-decoration:none;
    border-bottom:1px solid #e2e8f0;
}
.sales-ledger-nav a:last-child { border-bottom:0; }
.sales-ledger-nav a:hover { color:#1ea571; background:#f8fbfa; }
.sales-ledger-nav a.active { color:#fff; background:#20ac76; }
.sales-ledger-workspace { min-width:0; display:flex; flex-direction:column; }
.sales-ledger-head { order:1; min-height:32px; margin:0 0 5px; }
.sales-ledger-head h1 { font-size:18px; }
.sales-ledger-head .d-flex { display:none !important; }
.sales-ledger-filters {
    order:2;
    width:100%;
    padding:0 0 9px;
    background:transparent;
}
.sales-ledger-filters .form-label { margin:0 0 3px 7px; color:#536276; font-size:10px; }
.sales-ledger-filters .form-control,
.sales-ledger-filters .form-select {
    min-height:35px;
    border-color:#c4cbd4;
    border-radius:4px;
    box-shadow:none;
    font-size:12px;
}
.sales-ledger-kpis {
    order:3;
    width:min(850px, 100%);
    margin:4px 0 15px;
    gap:16px;
}
.sales-ledger-kpis .stat-card { min-height:70px; border-radius:4px; border-color:#dfe6ed; box-shadow:0 1px 3px rgba(30,55,80,.07); }
.sales-ledger-kpis .stat-card .label { font-size:10px; font-weight:800; }
.sales-ledger-kpis .stat-card .value { font-size:13px; font-weight:800; }
.sales-ledger-table { order:4; width:100%; }
.sales-ledger-table .table-scroll { background:#fff; border:1px solid #d8e4ea; border-radius:3px; }
.sales-ledger-table .table-soft thead th { background:#f5f6fb; color:#415777; font-size:10px !important; font-weight:800; }
.sales-ledger-table .table-soft tbody td { font-size:12px !important; font-weight:650; }

/* A payment is available only after the cart has at least one valid line. */
.payment-row:not(.is-ready) .pay-btn {
    background:#eef1f5;
    color:#9aa6b6;
    cursor:default;
    filter:none;
}
.payment-row.is-ready .pay-btn { color:#fff; }
.payment-row.is-ready .pay-cash { background:#1a8e62; }
.payment-row.is-ready .pay-credit { background:#ffbd58; }
.payment-row.is-ready .pay-mpesa { background:#f8617b; }
.payment-row.is-ready .pay-bank { background:#61a4f4; }

/* Current Stock KPIs — quiet, professional values rather than rainbow cards. */
.stock-summary-cards { gap:14px; }
.stock-summary-cards .stat-card {
    min-height:112px;
    border:1px solid #dbe5ea;
    border-radius:8px;
    background:#fff;
    box-shadow:0 2px 7px rgba(35,65,88,.07);
}
.stock-summary-cards .stat-ic { width:34px; height:34px; border-radius:7px; font-size:16px; }
.stock-summary-cards .label { color:#60738b; font-size:11px; font-weight:800; letter-spacing:.2px; text-transform:uppercase; }
.stock-summary-cards .value { color:#1c334d; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.stock-summary-cards .delta { color:#71839a; font-size:11px; font-weight:650; }
.stock-summary-cards .c-green .stat-ic, .stock-summary-cards .c-blue .stat-ic,
.stock-summary-cards .c-indigo .stat-ic, .stock-summary-cards .c-amber .stat-ic { background:#edf6f2; color:#16845b; }
.stock-summary-cards .c-indigo .stat-ic { background:#eef3fb; color:#4570ac; }
.stock-summary-cards .c-amber .stat-ic { background:#fff5df; color:#b97712; }
.report-period-shortcut { min-width:128px; }
.report-period-shortcut .form-select { cursor:pointer; }

@media (max-width:991.98px) {
    body:has(.sales-ledger-screen) .app-main { padding:14px; }
    .pos-screen, .sales-ledger-screen { display:block; height:auto; min-height:0; }
    .pos-section-nav, .sales-ledger-nav { display:grid; grid-template-columns:repeat(3, 1fr); margin-bottom:12px; }
    .pos-section-nav a, .sales-ledger-nav a { text-align:center; border-bottom:0; border-right:1px solid #e2e8f0; }
    .pos-section-nav a:last-child, .sales-ledger-nav a:last-child { border-right:0; }
}

/* POS catalog: show about 6 product cards, then scroll inside the list (search stays above). */
@media (min-width: 1200px){
    .pos-item-grid { max-height: 566px; overflow-y: auto; }
}
@media (min-width: 992px) and (max-width: 1199.98px){
    .pos-item-grid { max-height: 558px; overflow-y: auto; }
}
/* POS catalog: results start at the TOP-LEFT and flow in rows (never centered / stacked). */
.pos-item-grid { align-content: start; justify-content: start; }

/* ============================================================
   POS — New Sale quality pass: editable sale date, optional
   phone, and a crisper checkout (appended last so it wins).
   ============================================================ */
/* Editable sale-date chip in the SALES DETAILS header */
.pos-right .date-box {
    position:relative;
    display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    min-width:0; margin:0; padding:4px 12px 4px 10px;
    border:1px solid #d8dfe8; border-radius:8px; background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.pos-right .date-box:hover { border-color:#b7dacd; box-shadow:0 2px 5px rgb(32, 172, 118,.12); }
.pos-right .date-box > i { color:#18835a; font-size:13px; line-height:1; }
.pos-right .sale-date-input {
    position:relative; z-index:1;
    border:0; background:transparent; outline:0; padding:0; margin:0;
    color:#233244; font-family:var(--font-ui); font-size:12px; font-weight:700;
    min-width:116px; min-height:20px; line-height:1; text-transform:none;
}
.pos-right .sale-date-input::-webkit-calendar-picker-indicator {
    opacity:0; position:absolute; inset:-4px 0 -4px 0; width:100%; height:auto; cursor:pointer;
}
/* Optional phone shown next to Customer Name (the old counter skin hid it) */
.pos-right .customer-row.pos-input-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.pos-right .customer-row.pos-input-row .input-ic { display:block !important; max-width:none; width:100%; }
.pos-right .customer-row.pos-input-row .input-ic + .input-ic { display:block !important; }

/* Cashier date chip is locked to today (admin-only backdating) */
.sale-date-static {
    border:0; background:transparent; outline:0; padding:0; margin:0;
    color:#526480; font-size:12.5px; font-weight:700; letter-spacing:.3px;
    min-width:116px; line-height:1.6; cursor:default;
}

/* Slightly richer product cards (white tiles on the light grid) */
.pos-item-grid .pos-item-card { background:#fff; border:1px solid #e6ebf2; border-radius:10px; }
.pos-item-grid .pos-item-card:hover {
    transform:translateY(-2px); border-color:#ddede7;
    box-shadow:0 6px 16px rgb(33, 179, 123,.10);
}
.pos-item-grid .pos-item-thumb {
    width:40px; height:40px; font-size:16px; color:#20ac76;
    background:linear-gradient(135deg,#eff7f4,#e8f0ed);
    box-shadow:0 2px 5px rgba(15,23,42,.08);
}
/* Crisper checkout header + totals */
.pos-right .sales-header { border-bottom:1px solid #d9e0e9; }
.pos-right .totals-row .total-amount { font-weight:800; letter-spacing:.2px; }
@media (max-width:575.98px){
    .pos-right .sales-header { flex-wrap:wrap; row-gap:6px; }
    .pos-right .sale-date-input { min-width:104px; }
    .pos-right .customer-row.pos-input-row { grid-template-columns:1fr; }
}

/* ============================================================
   SEGOE UI — main application font (appended last so it wins).
   Replaces the earlier Inter / Anthropic Sans / Georgia stacks.
   ============================================================ */
:root { --font-ui: 'Segoe UI', 'Segoe UI Variable Text', Arial, sans-serif; }
html, body, button, input, select, textarea, .btn, .form-control, .form-select,
.table, .table-soft, .card, .card-soft, .modal-content {
    font-family: 'Segoe UI', 'Segoe UI Variable Text', Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .page-head h1, .side-brand, .side-nav > .side-link,
.side-group-head, .side-link, .pos-section-nav a, .sales-ledger-nav a,
.pos-breadcrumb, .pos-breadcrumb strong, .sales-ledger-head h1,
.pos-item-name, .pos-item-code, .pos-item-price, .pos-item-stock,
.sales-header h2, .totals-row .total-label, .totals-row .total-amount,
.pay-btn, .cart-name, .sheet-label, .sheet-store, .sheet-grid th,
.mini-kpis small, .report-section-header h2, .report-empty strong,
.auth-submit, .pay-eyebrow, .dashboard-greeting h2, .dashboard-title h1 {
    font-family: 'Segoe UI', 'Segoe UI Variable Text', Arial, sans-serif !important;
}
/* Numbers/tables that previously forced Georgia now follow the main font. */
.plain-number, .num, .money, .numeric, .amount, .currency, .total,
.stat-card .value, .kpi .value, .report-summary-card .value, .dashboard-kpi .value,
.total-value, .amount-txt, .amount-due, .balance, .bal, .val, .cl-row-amount,
.cl-stat-num, .ins-row-amount, .pc-bal-chip, .price, .cost, .qty, .stock,
.dashboard-period, .table-soft .num, .table .num, td.num, th.num,
input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"], output {
    font-family: 'Segoe UI', 'Segoe UI Variable Text', Arial, sans-serif !important;
    font-variant-numeric: tabular-nums;
}
/* Keep code/mono and the Bootstrap icon font as they are. */
code, pre, .mono, .font-monospace { font-family: 'JetBrains Mono', Consolas, monospace !important; }
.bi, [class^="bi-"], [class*=" bi-"] { font-family: 'bootstrap-icons' !important; }

/* ============================================================
   Purchases — lives inside Procurement (sidebar page), but the
   register itself is styled like the Sales New-Sale screen.
   ============================================================ */
.po-main { height:min(calc(100dvh - 230px), 820px); min-height:480px; }
.po-main .pos-left .pos-item-grid { max-height:none; }
.po-main .pos-right { background:#fff; height:100%; max-height:none; }
.po-main .pos-right .date-box { cursor:default; }
.po-main .pos-left > .row { align-items:end; }
.po-main .pos-left > .row .btn-primary { min-height:36px; border-color:var(--primary); background:var(--primary); font-size:11px; font-weight:800; }
.po-main .pos-right .customer-row.pos-input-row { padding-bottom:6px; }
.po-main .pos-right .customer-row.pos-input-row .form-select,
.po-main .pos-right .customer-row.pos-input-row .form-control { color:#6e7782; }
.po-note-row { padding:0 12px 8px; }
.po-note-row .form-control { border-color:#d8e1e8; border-radius:3px; font-size:11px; }

/* New Purchase uses the dedicated receiving-counter composition: a quiet
   utility strip, large split workspace and the order panel shown at all times. */
.purchase-entry-form { margin:-18px -20px -24px; background:#eef1f2; min-height:calc(100vh - 58px); }
.purchase-entry-topbar { display:flex; justify-content:space-between; align-items:center; min-height:58px; padding:10px 14px; border-bottom:1px solid #dce2e6; background:#fff; }
.purchase-entry-topbar .btn { padding:7px 13px; border:0; background:#f5f7fd; color:#16845b; font-size:11px; font-weight:800; }
.purchase-entry-heading { display:none !important; }
.purchase-entry-form .po-main { height:calc(100vh - 142px); min-height:590px; margin:8px; gap:18px; }
.purchase-entry-form .po-main .pos-left { flex:0 0 calc(58% - 9px); padding:12px; border-radius:4px; box-shadow:none; }
.purchase-entry-form .po-main .pos-right { flex:1 1 auto; border-radius:4px; box-shadow:none; }
.purchase-entry-form .po-main .pos-left .row { margin-bottom:14px !important; }
.purchase-entry-form .po-main .search-field { margin-bottom:0 !important; }
.purchase-entry-form .po-main .search-field .form-control { min-height:55px; border:2px solid #1479e8; font-size:13px; }
.purchase-entry-form .po-main .pos-item-grid { padding:21px 14px; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(174px,auto); gap:20px 18px; background:#f4f5fc; }
.purchase-entry-form .po-main .pos-item-card { padding:12px 8px; }
.purchase-entry-form .po-main .pos-item-thumb { width:48px; height:48px; margin-bottom:10px; }
.purchase-entry-form .po-main .pos-item-name { font-size:16px; }
.purchase-entry-form .po-main .pos-item-price { font-size:14px; }
.purchase-entry-form .po-main .sales-header { min-height:47px; padding:10px 14px; }
.purchase-entry-form .po-main .sales-header h2 { font-size:18px; }
.purchase-entry-form .po-main .date-box { min-width:218px; }
.purchase-entry-form .po-main .customer-row { padding:7px 14px; }
.purchase-entry-form .po-main .po-note-row { padding:0 14px 7px; }
.purchase-entry-form .po-main .cart-table thead th { padding:11px 12px; font-size:12px; }
.purchase-entry-form .po-main .totals-row { padding:13px 14px; }
.purchase-entry-form .po-main .po-pay-wrap { padding:12px 14px 14px; }
@media (max-width:991px) { .purchase-entry-form { margin:-12px; } .purchase-entry-form .po-main { height:auto; min-height:0; } .purchase-entry-form .po-main .pos-left { flex:1 1 auto; } }
.po-pay-wrap { padding:12px; border-top:1px solid #e2e8f0; background:#fff; }
.po-mode-row { display:flex; gap:6px; margin-bottom:8px; }
.po-mode-btn {
    flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:10px 4px; border:1px solid #d8dfe8; border-radius:8px; background:#fff;
    color:#475569; font-family:'Segoe UI',Arial,sans-serif; font-size:12.5px; font-weight:700;
    transition:filter .12s ease, border-color .12s ease;
}
.po-mode-btn:hover { border-color:#aebccd; }
.po-mode-btn.active[data-po-mode="CASH"]   { background:#1a8e62; border-color:#1a8e62; color:#fff; }
.po-mode-btn.active[data-po-mode="CREDIT"] { background:#f0a93b; border-color:#f0a93b; color:#fff; }
.po-mode-btn.active[data-po-mode="BOTH"]   { background:#61a4f4; border-color:#61a4f4; color:#fff; }
.po-pay-extras { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.po-pay-wrap .pay-btn { border-radius:8px; margin-top:2px; }

/* POS cart — brief red flash when a typed quantity is pulled back to stock */
.qty-input.qty-flash {
    border-color:#dc3545 !important; background:#fff5f5;
    box-shadow:0 0 0 3px rgba(220,53,69,.16);
    transition:box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

/* Dashboard KPI — official navy titles, softer (lighter) money figures */
.dashboard-kpi .label { color:#2a6e54; }
.dashboard-kpi .value { color:#334e68; font-weight:600; }
/* Gross Profit headline figure — bolder than the other KPI amounts */
.dashboard-kpi-wide .value { font-weight:800; }

/* Dashboard — carry the same design (navy uppercase titles + softer figures)
   across the whole page: title, notifications, branch cards and their tables. */
.dashboard-title h1 { color:#2a6e54; text-transform:uppercase; letter-spacing:.03em; }
.dashboard-notification-label { color:#2a6e54; text-transform:uppercase; letter-spacing:.05em; font-weight:800; }
.dashboard-greeting h2 { color:#2a6e54; }
.dashboard-greeting p { color:#334e68; font-weight:600; }
.dashboard-branch-card header strong { color:#2a6e54; text-transform:uppercase; letter-spacing:.04em; font-weight:800; }
.dashboard-branch-card header span { color:#334e68; font-weight:600; }
.dashboard-branch-card th { color:#2a6e54; text-transform:uppercase; letter-spacing:.04em; font-weight:800; font-size:11px; }
.dashboard-branch-card tbody td { color:#334e68; font-weight:600; }
.dashboard-branch-card tbody td.num { color:#334e68; font-weight:600; }
.dashboard-branch-card tfoot td { color:#2a6e54; font-weight:800; }
.dashboard-branch-card tfoot td.num { color:#2a6e54; font-weight:800; }

/* Bills — money distribution uses the compact sales-report card style and
   stays on ONE horizontal line (no wrapping, scrolls sideways on phones).
   order:3 keeps it between the filters (2) and the bills table (4). */
.mini-kpis.bills-kpis { order:3; width:100%; flex-wrap:nowrap; gap:10px; margin:6px 0 12px; overflow-x:auto; }
.mini-kpis.bills-kpis > div { flex:1 1 0; width:auto; min-width:0; min-height:62px; padding:8px 6px; }
.mini-kpis.bills-kpis small { font-size:10.5px; letter-spacing:.02em; white-space:nowrap; }
.mini-kpis.bills-kpis strong { font-size:13.5px; white-space:nowrap; }
@media (max-width: 991.98px) { .mini-kpis.bills-kpis > div { min-width:132px; } }
@media (max-width: 575.98px) { .mini-kpis.bills-kpis > div { min-width:116px; } }

/* ============================================================
   New login UI (replaces .auth-shell-v2 / .auth-card-v2)
   ============================================================ */
* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.login-shell {
  align-items: flex-start;
  background: #f2f7f5;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(88px, 11vh, 150px) 24px 24px;
  position: relative;
  overflow: hidden;
}

.login-slideshow,
.login-overlay {
  inset: 0;
  position: fixed;
  z-index: 0;
}

.login-slide {
  animation: login-fade 45s infinite;
  background-position: center;
  background-size: cover;
  inset: 0;
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.login-slide:nth-child(1) { animation-delay: 0s; }
.login-slide:nth-child(2) { animation-delay: 9s; }
.login-slide:nth-child(3) { animation-delay: 18s; }
.login-slide:nth-child(4) { animation-delay: 27s; }
.login-slide:nth-child(5) { animation-delay: 36s; }

@keyframes login-fade {
  0% { opacity: 0; transform: scale(1.08); }
  5%, 20% { opacity: 1; }
  5% { transform: scale(1); }
  20% { transform: scale(1.03); }
  25%, 100% { opacity: 0; transform: scale(1.05); }
}

.login-overlay { background: rgba(255, 255, 255, .08); }

.login-panel {
  position: relative;
  width: min(360px, calc(100vw - 48px));
  z-index: 1;
}

.login-logo-box {
  align-items: center;
  background: #fff;
  display: flex;
  height: 124px;
  justify-content: center;
  margin: 0 auto 16px;
  padding: 14px;
  width: 152px;
}

.login-logo { display: block; height: 100%; max-width: 100%; object-fit: contain; }

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

.login-form input {
  background: rgba(255, 255, 255, .96);
  border: 1px solid #d9d9d9;
  border-radius: 0;
  color: #1f2937;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  min-height: 45px;
  outline: 0;
  padding: 7px 12px;
}

.login-form input::placeholder { color: #7786a2; opacity: 1; }
.login-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgb(27, 147, 101, .22); }

.forgot-password {
  align-self: flex-start;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  margin: 6px 0 3px;
  text-decoration: none;
}

.forgot-password:hover,
.forgot-password:focus-visible { text-decoration: underline; }

.login-form button {

  background: #1b9365;
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  min-height: 49px;
  padding: 9px 18px;
}

.login-form button:hover { background: var(--primary-600); }
.login-form button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Language choice on the sign-in screen: the pick is remembered on the cookie
   (and on the account once signed in), so it is still here after a sign-out. */
.login-languages {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.login-languages-label {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  opacity: .85;
}

.login-languages form { display: inline; }

.login-language-btn {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  padding: 5px 14px;
}

.login-language-btn:hover,
.login-language-btn:focus-visible { background: rgba(255, 255, 255, .28); }

.login-language-btn.active {
  background: #fff;
  color: #1b9365;
  font-weight: 700;
}

.sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .login-shell { padding: 72px 20px 20px; }
  .login-panel { width: min(360px, calc(100vw - 40px)); }
}

/* Default shop icon used when no logo is set (kept from old auth CSS) */
.auth-brand-mark {
  width: 60px; height: 60px; border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-green), #1ea370);
  color: #fff; font-size: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -6px rgb(27, 147, 101,.55);
}

.auth-alert {
  display: flex; align-items: center; gap: 10px;
  background: #fde2e6; color: #a3142a; border: 1px solid #f5c2c9;
  border-radius: 12px; padding: 10px 12px; margin-bottom: 16px;
  font-size: 13px; font-weight: 600;
}
.auth-alert i { font-size: 16px; }

/* Official inventory exception notification for blocked stock sales. */
.toast-fms.inventory-alert {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: min(440px, calc(100vw - 28px));
  padding: 14px 14px;
  color: #5b2c31;
  background: #fff8f7;
  border: 1px solid #f0b8b7;
  border-left: 5px solid #c94646;
  box-shadow: 0 9px 22px rgba(120, 42, 42, .18);
}
.toast-fms.inventory-alert .toast-alert-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #b33434;
  background: #fde4e2;
  font-size: 19px;
}
.toast-fms.inventory-alert .toast-alert-copy { display: grid; gap: 3px; min-width: 0; }
.toast-fms.inventory-alert .toast-alert-copy strong {
  color: #8d2424;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.toast-fms.inventory-alert .toast-alert-copy span {
  color: #4a3032; font-size: 14.5px; font-weight: 700; line-height: 1.45; text-wrap: pretty;
}
.toast-fms.inventory-alert .toast-close { color: #8d2424; }

/* Manage Items — structured offline item form, aligned with the operational
   modal reference while retaining every existing data field and behaviour. */
#itemModal .modal-dialog { max-width: 900px; margin: 18px auto; }
#itemModal .manage-item-modal {
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(10, 30, 45, .28);
}
#itemModal .modal-header {
  min-height: 52px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #d7e3ea;
}
#itemModal .modal-title {
  color: #20334a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
#itemModal .btn-close {
  width: 34px;
  height: 34px;
  margin: -5px -5px -5px auto;
  border: 2px solid #bfdcff;
  border-radius: 9px;
  box-shadow: none;
  opacity: .88;
}
#itemModal .modal-body-premium {
  padding: 14px;
  background: #e5f1ff;
}
#itemModal .form-section {
  margin: 0 0 8px;
  padding: 17px 16px 18px;
  background: #fff;
  border: 1px solid #d8e4ea;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(24, 54, 79, .05);
}
#itemModal .form-section-head {
  margin: 0 0 20px;
  color: #07975c;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
#itemModal .form-label,
#itemModal .package-row label {
  position: relative;
  z-index: 1;
  width: max-content;
  margin: 0 0 -7px 8px;
  padding: 0 4px;
  background: #fff;
  color: #596879;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
}
#itemModal .input-ic > i { display: none; }
#itemModal .input-ic { display: block; }
#itemModal .form-control,
#itemModal .form-select {
  min-height: 38px;
  border-color: #c3ccd5;
  border-radius: 5px;
  box-shadow: none;
  color: #263849;
  font-size: 13px;
}
#itemModal .form-control:focus,
#itemModal .form-select:focus {
  border-color: #1d7fe5;
  box-shadow: 0 0 0 2px rgba(29, 127, 229, .12);
}
#itemModal .scan-hint { min-height: 0; margin: 3px 8px 0; font-size: 10px; }
#itemModal .item-section-basic .row,
#itemModal .item-section-stock .row,
#itemModal .item-section-price .row,
#itemModal .item-section-packaging .row { --bs-gutter-x: 18px; --bs-gutter-y: 10px; }
#itemModal .item-section-stock .form-section-head { margin-bottom: 18px; }
#itemModal .item-section-packaging .form-section-head { margin-bottom: 14px; }
#itemModal .item-section-packaging .form-text { color: #668099; font-size: 11px; }
#itemModal .package-rows { gap: 9px; margin: 12px 0 10px; }
#itemModal .package-row {
  grid-template-columns: 1.4fr .72fr 1fr 1fr 32px;
  gap: 12px;
  padding: 8px 10px;
  background: #f8fbff;
  border: 1px solid #e0eaf4;
  border-radius: 5px;
}
#itemModal .package-row label { background: #f8fbff; }
#itemModal .package-remove {
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  background: #fff1f3;
  color: #ba2f5c;
}
#itemModal .add-package-btn {
  min-width: 126px;
  padding: 8px 14px;
  border-radius: 5px;
  background: #16a66b;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
#itemModal .modal-footer {
  min-height: 64px;
  padding: 13px 20px;
  background: #fff;
  border-top: 1px solid #d7e3ea;
}
#itemModal .modal-footer .btn { min-width: 92px; font-size: 12px; font-weight: 800; }
#itemModal .modal-footer .btn-light { color: #16845b; background: #f4f7fd; border-color: #eef2f7; }

@media (max-width: 991.98px) {
  #itemModal .modal-dialog { max-width: calc(100vw - 24px); margin: 12px auto; }
}
@media (max-width: 767.98px) {
  #itemModal .modal-body-premium { padding: 9px; }
  #itemModal .form-section { padding: 14px 12px; }
  #itemModal .package-row { grid-template-columns: 1fr 1fr; }
  #itemModal .package-remove { grid-column: 2; justify-self: end; }
}

/* ------------------------------------------------------------------
   Product design baseline
   The dashboard, Bills and purchase register establish the visual language
   for every operational page: airy blue workspace, white working cards,
   navy information hierarchy, green action colour and restrained rules.
   Components inherit these tokens instead of creating page-specific themes.
   ------------------------------------------------------------------ */
:root {
  --bg: #e7f8fb;
  --surface: #ffffff;
  --surface-2: #f5f7fc;
  --ink: #172b4d;
  --ink-soft: #536a80;
  --border: #d7e3ea;
  --primary: #16a66b;
  --primary-600: #128758;
  --accent-green: #16a66b;
  --accent-green-dark: #128758;
}

body { background: #f5f7fc; color: var(--ink); }
.app-shell, .app-main { background: var(--bg); }
.app-shell { grid-template-columns: 245px minmax(0, 1fr); }
.app-sidebar { background: #fff; border-right-color: var(--border); padding: 18px 6px; }
.app-topbar { background: #fff; border-bottom-color: var(--border); box-shadow: 0 1px 3px rgba(24, 54, 79, .06); }
.card-soft, .stat-grid .stat-card, .filter-bar, .report-toolbar {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 2px 7px rgba(24, 54, 79, .07);
}
.table-soft thead th, .table-soft.premium thead th, .cart-table thead th {
  background: #f5f7fc !important;
  color: #128758 !important;
}

/* Procurement uses the same calm counter layout as Sales, not a separate UI. */
.po-main .pos-left,
.po-main .pos-right {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(24, 54, 79, .07);
}
.po-main .pos-item-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #f5f7fc;
  border-top: 1px solid var(--border);
}
.po-main .pos-item-card {
  border: 1px solid transparent;
  border-radius: 8px;
}
.po-main .pos-item-card:hover,
.po-main .pos-item-card:focus-visible {
  background: #fff;
  border-color: #cfe3da;
  box-shadow: 0 5px 14px rgba(24, 54, 79, .09);
  outline: 0;
}
.po-main .sales-header { background: #fff; border-bottom-color: var(--border); }
.po-main .sales-header h2 { color: #173b5d; }
.po-main .po-pay-wrap { background: #fff; border-top-color: var(--border); }

@media (max-width: 991.98px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .po-main .pos-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .po-main .pos-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Current Stock financial summary: the same calm, high-contrast tone as Bills. */
.stock-summary-cards {
  gap: 12px;
}

.stock-summary-cards .stat-card {
  min-height: 118px;
  padding: 16px 17px;
  border: 1px solid #d7e3ea;
  border-left: 5px solid #317a9b;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(24, 54, 79, .10);
}

.stock-summary-cards .stat-ic {
  width: 36px;
  height: 36px;
  margin-bottom: 9px;
  border-radius: 8px;
}

.stock-summary-cards .label {
  color: #516a7f;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
}

.stock-summary-cards .value {
  margin-top: 5px;
  color: #18364f;
  font-family: inherit;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.18;
  font-variant-numeric: tabular-nums;
}

.stock-summary-cards .delta { color: #667d91; font-size: 12px; font-weight: 650; }
.stock-summary-cards .c-green { border-left-color: #169c63; background: #f4fcf8; }
.stock-summary-cards .c-blue { border-left-color: #2563eb; background: #f7faff; }
.stock-summary-cards .c-indigo { border-left-color: #3e82d4; background: #f5f9ff; }
.stock-summary-cards .c-amber { border-left-color: #d48a12; background: #fffaf0; }

/* Current Stock mirrors the stock-value sheet: three measured financial cards
   followed by a dense inventory ledger, without altering live quantities. */
.stock-value-cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.stock-value-cards .stat-card { min-height:88px; align-items:center; justify-content:center; padding:13px; border:1px solid #d9e3e8; border-left:1px solid #d9e3e8; border-radius:5px; background:#fff !important; box-shadow:0 2px 6px rgba(24,54,79,.08); text-align:center; }
.stock-value-cards .stat-card .label { color:#4485ff; font-family:Georgia,'Times New Roman',serif; font-size:11px; font-weight:800; text-transform:uppercase; }
.stock-value-cards .stat-card:nth-child(3) .label { color:#1d9c5d; }
.stock-value-cards .stat-card .value { margin-top:6px; color:#152c45; font-family:Georgia,'Times New Roman',serif; font-size:25px; font-weight:800; }
.stock-value-label { margin:2px 0 5px; color:#5b7892; font-family:Georgia,'Times New Roman',serif; font-size:12px; font-weight:800; text-transform:uppercase; }
.stock-value-sheet { padding:10px 8px 0; border-radius:4px; }
.stock-sheet-heading { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:0 8px 8px; color:#4c8bff; font-family:Georgia,'Times New Roman',serif; font-size:19px; font-weight:700; text-align:center; }
.stock-sheet-heading span { flex:1; text-align:center; }
.stock-sheet-heading .btn { color:#4b83e5; background:#f5f7ff; border:0; font-family:inherit; font-size:11px; }
.stock-value-sheet .table-scroll { border:1px solid #c9d4da; }
.stock-value-sheet .table-soft { min-width:1120px; }
.stock-value-sheet .table-soft thead th { padding:5px 7px !important; background:#f5f6fb !important; color:#009a57 !important; font-size:11px !important; }
.stock-value-sheet .table-soft tbody td { padding:4px 7px; border:1px solid #d1d1d1; color:#1e3550; font-size:12px; font-weight:700; }
.stock-value-sheet .table-soft tbody tr:nth-child(even) td { background:#fff; }
.stock-value-sheet .item-name-link { color:#182d42; font-weight:800; }
.stock-value-sheet .stock-profit-cell { color:#176e4d; font-weight:800; }
@media (max-width:700px) { .stock-value-cards { grid-template-columns:1fr; } .stock-value-cards .stat-card .value { font-size:21px; } }

@media (max-width: 575.98px) {
  .stock-summary-cards .stat-card { min-height: 108px; padding: 13px; }
  .stock-summary-cards .value { font-size: 17px; }
}

/* High-visibility payment and totals cards used by Bills and financial reports. */
.mini-kpis.bills-kpis,
.report-page .mini-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 12px;
  width: 100%;
  margin: 14px 0 18px;
  overflow: visible;
}

.mini-kpis.bills-kpis > div,
.report-page .mini-kpis > div {
  width: auto;
  min-width: 0;
  min-height: 104px;
  padding: 15px 16px;
  align-items: flex-start;
  justify-content: center;
  background: #fff;
  border: 1px solid #d7e3ea;
  border-left: 5px solid #317a9b;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(24, 54, 79, .10);
}

.mini-kpis.bills-kpis small,
.report-page .mini-kpis small {
  color: #516a7f;
  font-family: inherit;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: normal;
}

.mini-kpis.bills-kpis strong,
.report-page .mini-kpis strong {
  margin-top: 7px;
  color: #18364f;
  font-family: inherit;
  font-size: 20px !important;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Total, discount, and payment-mode cues make values scannable at a glance. */
.mini-kpis.bills-kpis > div:nth-child(1),
.report-page .mini-kpis > div:nth-child(1) { border-left-color: #2563eb; background: #f7faff; }
.mini-kpis.bills-kpis > div:nth-child(2),
.report-page .mini-kpis > div:nth-child(2) { border-left-color: #d48a12; background: #fffaf0; }
.mini-kpis.bills-kpis > div:nth-child(3),
.report-page .mini-kpis > div:nth-child(3) { border-left-color: #169c63; background: #f4fcf8; }
.mini-kpis.bills-kpis > div:nth-child(4),
.report-page .mini-kpis > div:nth-child(4) { border-left-color: #d64779; background: #fff6f8; }
.mini-kpis.bills-kpis > div:nth-child(5),
.report-page .mini-kpis > div:nth-child(5) { border-left-color: #3e82d4; background: #f5f9ff; }
.mini-kpis.bills-kpis > div:nth-child(6),
.report-page .mini-kpis > div:nth-child(6) { border-left-color: #8665b7; background: #faf8ff; }
.mini-kpis.bills-kpis > div:nth-child(7) { border-left-color: #d25353; background: #fff7f7; }

@media (max-width: 575.98px) {
  .mini-kpis.bills-kpis,
  .report-page .mini-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .mini-kpis.bills-kpis > div,
  .report-page .mini-kpis > div { min-height: 92px; padding: 12px; }
  .mini-kpis.bills-kpis strong,
  .report-page .mini-kpis strong { font-size: 16px !important; white-space: normal; }
}

/* Premium sales ledger filters — shared by Orders and Bills.  These rules
   deliberately style controls only; the live date/search/payment filters and
   their event handlers stay unchanged. */
.sales-ledger-workspace .sales-reference-filters {
  width:100%;
  padding:14px;
  margin:0 0 14px;
  border:1px solid #d9e5e9;
  border-radius:10px;
  background:linear-gradient(135deg,#fff 0%,#f9fcfb 100%);
  box-shadow:0 5px 16px rgba(25,58,77,.08);
}
.sales-ledger-workspace .sales-reference-filters > .row {
  --bs-gutter-x:10px;
  --bs-gutter-y:8px;
}
.sales-ledger-workspace .sales-reference-filters .form-label {
  margin:0 0 5px;
  color:#577083;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.sales-ledger-workspace .sales-reference-filters .search-wrap,
.sales-ledger-workspace .sales-reference-filters .form-control,
.sales-ledger-workspace .sales-reference-filters .form-select {
  min-height:42px;
  border:1px solid #cbd9df;
  border-radius:7px;
  background:#fff;
  color:#243b53;
  font-size:13px;
  box-shadow:none;
}
.sales-ledger-workspace .sales-reference-filters .search-wrap {
  display:flex;
  align-items:center;
  position:relative;
}
.sales-ledger-workspace .sales-reference-filters .search-wrap .form-control {
  width:100%;
  min-height:40px;
  border:0;
  background:transparent;
}
.sales-ledger-workspace .sales-reference-filters .form-control:focus,
.sales-ledger-workspace .sales-reference-filters .form-select:focus,
.sales-ledger-workspace .sales-reference-filters .search-wrap:focus-within {
  border-color:#18a66b;
  box-shadow:0 0 0 3px rgba(24,166,107,.12);
  outline:0;
}
.sales-ledger-workspace .sales-reference-filters .btn {
  min-height:42px;
  border:1px solid #cbd9df;
  border-radius:7px;
  color:#176f4c;
  background:#f5fbf8;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.sales-ledger-workspace .sales-reference-filters .btn:hover {
  border-color:#19a66b;
  background:#e7f6ee;
  transform:translateY(-1px);
}
.sales-ledger-workspace .sales-reference-filters .btn + .btn { margin-left:6px; border-left:1px solid #cbd9df; border-radius:7px; }
.sales-ledger-workspace .sales-reference-filters .sales-reference-more {
  margin-top:5px !important;
  padding-top:10px;
  border-top:1px solid #e4edef;
}
.sales-ledger-workspace .bills-report-filters #sbReset { margin-left:0; }
@media (max-width:767.98px) {
  .sales-ledger-workspace .sales-reference-filters { padding:11px; }
  .sales-ledger-workspace .sales-reference-filters .sales-reference-more { padding-top:8px; }
}

/* Record-payment dialog — shared by Orders and Bills. */
.rcv-modal { max-width:440px; }
.rcv-modal .modal-content {
  border:1px solid #e2ebef;
  border-radius:18px;
  box-shadow:0 26px 60px rgba(15,44,62,.20), 0 2px 6px rgba(15,44,62,.06);
  overflow:hidden;
}
.rcv-head {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:20px 20px 18px 22px;
  background:linear-gradient(135deg,#f4faf8 0%,#ffffff 100%);
  border-bottom:1px solid #edf3f5;
}
.rcv-head .btn-close { margin:2px 0 0 auto; flex:0 0 auto; }
.rcv-ic {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:11px;
  background:linear-gradient(145deg,#21ad77,#0d7d55);
  color:#fff;
  font-size:18px;
  box-shadow:0 7px 16px rgba(13,125,85,.26);
}
.rcv-title { margin:0; font-size:17px; font-weight:800; letter-spacing:-.01em; color:#12212f; }
.rcv-sub { margin:4px 0 0; font-size:12.5px; line-height:1.45; color:#6b7d8c; }
.rcv-ref {
  display:flex;
  align-items:center;
  gap:1px;
  margin:16px 22px 0;
  background:#eaf1f4;
  border:1px solid #eaf1f4;
  border-radius:11px;
  overflow:hidden;
}
.rcv-ref > div { flex:1; min-width:0; padding:11px 14px; background:#fff; }
.rcv-ref span {
  display:block;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8a99a6;
  margin-bottom:3px;
}
.rcv-ref strong {
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;
  font-weight:800;
  color:#12212f;
  overflow-wrap:anywhere;
}
.rcv-ref .rcv-due strong { color:#d25353; }
.rcv-body { padding:16px 22px 4px; }
.rcv-modal .form-label { font-size:11.5px; font-weight:700; color:#42586a; margin-bottom:5px; }
.rcv-modal .form-control,
.rcv-modal .form-select { min-height:44px; border-color:#cbd9df; border-radius:9px; font-size:14px; box-shadow:none; }
.rcv-modal .form-control:focus,
.rcv-modal .form-select:focus { border-color:#18a66b; box-shadow:0 0 0 3px rgba(24,166,107,.12); }
.rcv-modal .input-ic .form-control { padding-left:38px; }
.rcv-opt { color:#8a99a6; font-weight:600; }
.rcv-hint { margin-top:7px; font-size:12px; color:#6b7d8c; }
.rcv-hint.is-clear { color:#16845b; font-weight:700; }
.rcv-hint.is-over { color:#d25353; font-weight:700; }
.rcv-foot { display:flex; gap:10px; padding:16px 22px 22px; }
.rcv-foot .btn { flex:1; min-height:44px; border-radius:10px; font-size:13.5px; font-weight:700; }
.rcv-foot .btn-light { background:#f2f5f7; border:1px solid #dde5ea; color:#42586a; }
.rcv-foot .btn-light:hover { background:#e9eef1; color:#2c3f4e; }
.rcv-foot .btn-success {
  border:0;
  background:linear-gradient(145deg,#21ad77,#0d7d55);
  color:#fff;
  box-shadow:0 7px 16px rgba(13,125,85,.26);
}
.rcv-foot .btn-success:hover { background:linear-gradient(145deg,#1c9d6b,#0a6f4b); color:#fff; }

/* =====================================================================
   POS operational standard
   A counter must be fast on desktop and entirely usable one-handed on a
   phone. These are layout-only rules: item selection, cart calculations and
   payment submission remain the existing, audited implementation.
   ===================================================================== */
body:has(.pos-screen) { background:#eef5f6; }
.pos-screen { gap:16px; }
.pos-section-nav {
  overflow:hidden;
  border:1px solid #d4e0e4;
  border-radius:8px;
  box-shadow:0 2px 7px rgba(24,54,79,.06);
}
.pos-section-nav a { min-height:46px; display:flex; align-items:center; border-color:#e4ecef; color:#365168; font-size:12px; font-weight:750; }
.pos-section-nav a.active { background:#176f4c; color:#fff; }
.pos-main { gap:16px; }
.pos-left, .pos-right { border:1px solid #d5e1e5; border-radius:10px; box-shadow:0 3px 12px rgba(20,51,70,.07); }
.pos-left { background:#fff; padding:14px; }
.pos-right { background:#fff; }
.pos-left .form-label { margin-bottom:5px; color:#536a80; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.pos-left .form-select, .pos-left .form-control { min-height:42px; border-color:#c9d7dc; border-radius:7px; color:#20364d; font-size:13px; }
.pos-left .form-select:focus, .pos-left .form-control:focus, .customer-row .form-control:focus { border-color:#16845b; box-shadow:0 0 0 3px rgba(22,132,91,.12); }
.pos-store-badge { min-height:42px; border-radius:7px; background:#f3faf7; border-color:#d5e9df; color:#176f4c; }
.pos-left .search-field { margin:4px 0 10px !important; }
.pos-left .search-wrap { display:flex; align-items:center; min-height:52px; border:1px solid #aebfc7; border-radius:8px; background:#fff; }
.pos-left .search-wrap .form-control { min-height:48px; font-size:14px; }
.pos-item-grid { padding:14px; gap:10px; grid-auto-rows:minmax(146px,auto); background:#f5f8fa; border:1px solid #e1e9ec; border-radius:8px; }
.pos-item-card { display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid transparent; border-radius:8px; padding:12px 10px; background:transparent; }
.pos-item-card:hover, .pos-item-card:focus-visible { border-color:#bfded0; background:#fff; box-shadow:0 5px 14px rgba(24,54,79,.08); transform:none; }
.pos-item-thumb { width:38px; height:38px; margin-bottom:9px; border-radius:50%; background:#eaf0f1; color:#5a7890; font-size:15px; box-shadow:none; }
.pos-item-name { color:#1d3046; font-family:var(--font-ui,system-ui); font-size:13px; font-weight:780; }
.pos-item-code { color:#7790a4; font-family:inherit; font-size:11px; font-weight:600; }
.pos-item-price { color:#3e6680; font-family:inherit; font-size:12px; font-weight:750; }
.pos-item-stock, .pos-item-stock.ok { color:#c65353; font-family:inherit; font-size:11px; }
.pos-item-stock.ok { color:#16845b; }
.sales-header { min-height:58px; padding:12px 16px; background:#fff; border-bottom-color:#dce7ea; }
.sales-header h2 { color:#183b56; font-family:var(--font-ui,system-ui); font-size:14px; font-weight:800; letter-spacing:.06em; }
.date-box { min-width:160px; border:1px solid #d4e0e4; border-radius:7px; background:#f8fbfc; color:#435d72; }
.customer-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,.45fr); gap:10px; padding:12px 16px; border-bottom:1px solid #e5edef; }
.customer-row .input-ic, .customer-row .input-ic + .input-ic { display:block; max-width:none; }
.customer-row .form-control { min-height:42px; border-color:#c9d7dc; border-radius:7px; font-size:13px; }
.cart-table thead th { padding:10px 12px; background:#f3f7f8; color:#4d6b7e; font-size:10px; }
.cart-table tbody td { padding:11px 12px; }
.qty-input, .disc-input { min-height:34px; border-color:#c7d7dc; border-radius:6px; font-size:13px; }
.totals-row { min-height:64px; padding:14px 16px; background:#fff; }
.totals-row .total-label { color:#435d72; font-size:13px; letter-spacing:.04em; }
.totals-row .total-amount { color:#173b56; font-size:21px; }
.clear-link { display:inline !important; color:#a94747 !important; }
.payment-row { gap:8px; padding:0 16px 16px; border:0; background:#fff; }
.pay-btn { min-height:48px; padding:12px 8px; border-radius:7px; color:#fff; font-family:var(--font-ui,system-ui); font-size:12px; font-weight:800; letter-spacing:.035em; }
.pay-cash { background:#16845b; }.pay-credit { background:#b7791f; }.pay-mpesa { background:#187a8a; }.pay-bank { background:#356f9d; }
.pay-btn:hover { filter:brightness(.96); }
.pos-mobile-cart-trigger, .pos-mobile-close-cart, .pos-mobile-cart-backdrop { display:none; }
.ledger-filter-toggle { display:none; }
.ledger-branch-readonly { display:flex; align-items:center; gap:6px; min-height:36px; padding:7px 10px; border:1px solid #cbd9df; border-radius:4px; background:#f5fbf8; color:#176f4c; font-size:12px; font-weight:750; }
.topbar-branch-note { display:block; margin-top:3px; color:#60798d; font-size:10px; font-weight:650; }

/* Android: vertical workflow, large targets, and a cart that reflows instead
   of becoming a sideways table. */
@media (max-width:767.98px) {
  body.pos-cart-open { overflow:hidden; }
  body:has(.pos-screen) .app-main { padding:10px; }
  .pos-screen { display:block; min-height:0; height:auto; }
  /* Keep every POS section available in one compact row on phones. */
  .pos-section-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 10px; }
  .pos-section-nav a { justify-content:center; min-height:48px; padding:8px 5px; border-right:1px solid #e4ecef; font-size:12px; }
  .pos-workspace, .pos-main-wrap { min-height:0; }
  .pos-breadcrumb { min-height:32px; padding:0 2px; font-size:14px; }
  .pos-main { display:flex; flex-direction:column; gap:10px; }
  .pos-left { width:100%; padding:12px; }
  .pos-right { display:none; }
  .pos-right.is-mobile-open {
    position:fixed; z-index:1052; inset:8px; display:flex; flex-direction:column;
    width:auto; max-width:none; padding:0; overflow:hidden; border:1px solid #bad0d5;
    border-radius:5px; box-shadow:0 18px 48px rgba(15,41,56,.28);
  }
  .pos-mobile-cart-backdrop.is-visible { position:fixed; z-index:1051; inset:0; display:block; border:0; background:rgba(16,38,51,.52); }
  .pos-mobile-cart-trigger {
    position:fixed; z-index:1050; right:14px; bottom:calc(14px + env(safe-area-inset-bottom));
    display:grid; grid-template-columns:auto auto auto; align-items:center; column-gap:8px;
    min-height:58px; padding:8px 12px; border:1px solid #0d6847; border-radius:4px;
    background:#176f4c; color:#fff; box-shadow:0 8px 22px rgba(13,72,51,.3);
    font-family:var(--font-ui,system-ui); font-size:13px; font-weight:800;
  }
  .pos-mobile-cart-trigger i { font-size:20px; }
  .pos-mobile-cart-trigger strong { display:grid; place-items:center; min-width:25px; height:25px; border-radius:50%; background:#fff; color:#176f4c; font-size:12px; }
  .pos-mobile-cart-trigger em { grid-column:2 / -1; color:#d8f3e6; font-size:11px; font-style:normal; font-weight:700; text-align:left; }
  .pos-mobile-cart-trigger:not(.has-items) { background:#516a79; border-color:#435967; }
  .pos-mobile-close-cart { align-items:center; gap:5px; min-height:36px; padding:5px 8px; border:0; background:transparent; color:#176f4c; font-size:12px; font-weight:800; }
  .pos-left .row { --bs-gutter-y:8px; }
  .pos-left .row > div { width:100%; }
  /* Store and price are operational settings, not the main task. Keep them
     compact on one line and remove the duplicate location badge on phones. */
  .pos-left .row.g-2.mb-2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:8px; row-gap:0; }
  .pos-left .row > div:nth-child(1), .pos-left .row > div:nth-child(2) { width:auto; max-width:none; padding:0; }
  .pos-left .row > div:nth-child(3) { display:none; }
  .pos-left .form-label { margin-bottom:3px; font-size:9px; }
  .pos-left .form-select { min-height:38px; padding-top:5px; padding-bottom:5px; font-size:12px; border-radius:4px; }
  .pos-left .search-wrap { min-height:56px; }
  .pos-left .search-wrap .form-control { min-height:52px; font-size:16px; }
  .pos-item-grid { max-height:44vh; min-height:250px; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(132px,auto); gap:8px; padding:8px; overflow-y:auto; }
  .pos-item-card { padding:10px 6px; }
  .pos-item-thumb { width:42px; height:42px; font-size:17px; }
  .pos-item-name { font-size:13px; }.pos-item-code { font-size:10px; }.pos-item-price { font-size:12px; }
  .sales-header { min-height:54px; padding:10px 12px; }.sales-header h2 { font-size:13px; }.date-box { min-width:128px; }
  .pos-right.is-mobile-open .sales-header { display:grid; grid-template-columns:1fr auto; gap:7px; align-items:center; }
  .pos-right.is-mobile-open .sales-header h2 { grid-column:1; grid-row:1; }
  .pos-right.is-mobile-open .sales-header .date-box { grid-column:2; grid-row:1; min-width:118px; }
  .pos-right.is-mobile-open .pos-mobile-close-cart { display:inline-flex; grid-column:1 / -1; grid-row:2; justify-self:start; }
  .customer-row { grid-template-columns:1fr 1fr; padding:8px 12px; gap:7px; }.customer-row .form-control { min-height:40px; padding:7px 8px; font-size:13px; }
  .pos-right.is-mobile-open .pos-cart-scroll { flex:1; overflow-x:hidden; overflow-y:auto; min-height:0; max-height:none; padding:0 12px; }
  .cart-table { display:block; min-width:0 !important; font-size:13px; }
  .cart-table thead { display:none; }
  .cart-table tbody { display:block; }
  .cart-table tbody tr { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px 6px; padding:8px 0 12px; border-bottom:1px solid #deeaed; }
  .cart-table tbody td { display:block; padding:0; border:0; text-align:left !important; white-space:normal; }
  .cart-table tbody td:nth-child(1) { grid-column:1 / span 3; grid-row:1; min-height:30px; padding:4px 2px; font-size:14px; display:flex; align-items:center; }
  .cart-table tbody td:nth-child(2) { display:none; }
  .cart-table tbody td:nth-child(3)::before { content:'Qty'; }
  .cart-table tbody td:nth-child(4)::before { content:'Price'; }
  .cart-table tbody td:nth-child(5)::before { content:'Discount'; }
  .cart-table tbody td:nth-child(6)::before { content:'Amount'; }
  .cart-table tbody td:nth-child(3)::before, .cart-table tbody td:nth-child(4)::before, .cart-table tbody td:nth-child(5)::before, .cart-table tbody td:nth-child(6)::before { display:block; margin-bottom:3px; color:#71879a; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
  .cart-table tbody td:nth-child(n+3):nth-child(-n+6) { display:flex; min-width:0; min-height:56px; flex-direction:column; align-items:center; justify-content:center; padding:5px 3px !important; border:1px solid #d6e1e6; background:#f8fafb !important; color:#19354f; text-align:center !important; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .cart-table tbody td:nth-child(3) { grid-column:1; grid-row:2; }
  .cart-table tbody td:nth-child(4) { grid-column:2; grid-row:2; }
  .cart-table tbody td:nth-child(5) { grid-column:3; grid-row:2; }
  .cart-table tbody td:nth-child(6) { grid-column:4; grid-row:2; }
  .cart-table tbody td:nth-child(n+3):nth-child(-n+6)::before { width:100%; text-align:center; }
  .cart-table tbody td:nth-child(7) { position:static; grid-column:4; grid-row:1; display:flex; width:30px; height:30px; justify-self:end; align-items:center; justify-content:center; border:1px solid #f0c5e9; background:#fff8fe !important; color:#b95caf; font-size:16px; line-height:1; }
  .cart-table tbody td:nth-child(7):active { background:#fff0f9 !important; color:#9b357f; }
  .qty-input, .disc-input { width:100%; min-height:25px; padding:0; border:0; background:transparent; box-shadow:none; font-size:15px; text-align:center; }
  .qty-input:focus, .disc-input:focus { border:1px solid #16845b; background:#fff; box-shadow:none; }
  .totals-row { min-height:62px; padding:12px 0; }.totals-row .total-amount { font-size:20px; }
  .payment-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0; }
  .pay-btn { min-height:58px; padding:12px 8px; font-size:13px; border-radius:4px; }
}

/* Operational pages keep their filters compact so the ledger/data remains the
   focus. The detailed choices remain available; they simply no longer consume
   most of a phone screen. */
.expense-report-filters { padding:9px 11px; background:#fff; }
.expense-report-filters .form-label { margin-bottom:2px; color:#536a80; font-size:10px; font-weight:800; text-transform:uppercase; }
.expense-report-filters .form-control, .expense-report-filters .form-select, .expense-report-filters .btn { min-height:36px; font-size:12px; }
@media (max-width:767.98px) {
  .ledger-filter-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; margin:0 0 8px; padding:7px 10px; border:1px solid #cbd9df; border-radius:4px; background:#fff; color:#176f4c; font-size:12px; font-weight:800; }
  .sales-ledger-workspace .sales-reference-filters { display:none; }
  .sales-ledger-workspace .sales-reference-filters.is-mobile-open { display:block; }
  .sales-ledger-workspace .sales-reference-filters > .row,
  .sales-reference-filters > .row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0; }
  .sales-reference-filters > .row > [class*="col-"] { width:auto; max-width:none; padding:0; }
  .sales-reference-filters > .row > [class*="col-"]:first-child { grid-column:1 / -1; }
  .sales-reference-filters .form-label { margin:0 0 2px 2px; font-size:9px; }
  .sales-reference-filters .search-wrap .form-control,
  .sales-reference-filters .form-select,
  .sales-reference-filters .form-control,
  .sales-ledger-workspace .sales-reference-filters .search-wrap,
  .sales-ledger-workspace .sales-reference-filters .form-select,
  .sales-ledger-workspace .sales-reference-filters .form-control { min-height:34px; font-size:12px; }
  .expense-report-filters .row { --bs-gutter-x:6px; --bs-gutter-y:6px; }
  .expense-report-filters .form-label { font-size:9px; }
  .expense-report-filters .form-control, .expense-report-filters .form-select, .expense-report-filters .btn { min-height:34px; font-size:12px; }
}

/* Enterprise controls use restrained corners—never a playful bubble/pill UI. */
.btn-pill, .filter-bar, .card-soft, .stat-card, .form-control, .form-select,
.search-wrap, .mini-kpis > div, .sales-ledger-nav, .pos-left, .pos-right,
.pos-section-nav, .pos-item-grid, .pos-item-card, .pay-btn, .badge-status { border-radius:4px !important; }
.btn, .modal-content, .dropdown-menu, .toast-fms { border-radius:5px; }

/* Order detail: a ledger table is useful on desktop, but must not be clipped on a phone. */
@media (max-width: 575.98px) {
  /* On the compact Expenses screen, the breadcrumb repeats the active module
     and pushes the real working controls below the fold. Keep its action only. */
  .expense-page-head > div:first-child { display:none; }
  .expense-page-head { justify-content:flex-end !important; margin-bottom:10px; }

  /* Date and payment fields in the Expense form are intentionally a pair.
     Force their labels and controls onto one shared baseline on phones. */
  #addExpenseModal .modal-body > .row.g-3 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin:0 0 1rem; }
  #addExpenseModal .modal-body > .row.g-3 > [class*="col-"] { display:flex; flex-direction:column; align-self:start; width:auto; max-width:none; margin:0 !important; padding:0; }
  #addExpenseModal .modal-body > .row.g-3 .form-label { display:flex; align-items:center; height:14px; margin:0 0 5px !important; line-height:14px; }
  #addExpenseModal .modal-body > .row.g-3 .form-control,
  #addExpenseModal .modal-body > .row.g-3 .form-select { width:100%; margin:0; }

  .odm-modal { margin:0; min-height:100%; max-width:none; }
  .odm-modal .modal-content { min-height:100vh; border:0; border-radius:0 !important; }
  .odm-modal .modal-header { padding:14px 16px; }
  .odm-modal .modal-title { min-width:0; max-width:calc(100% - 42px); font-size:18px; overflow-wrap:anywhere; }
  .odm-modal .modal-body { padding:16px; }
  .odm-meta { display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:14px 12px; }
  .odm-meta > div { min-width:0; }
  .odm-meta strong { display:block; font-size:16px !important; line-height:1.25; overflow-wrap:anywhere; }
  .odm-summary .odm-card { border-radius:4px !important; padding:11px; }
  .odm-summary .odm-card .val { font-size:18px; white-space:nowrap; }
  .odm-modal .table-scroll { max-height:none !important; overflow:visible !important; border:0 !important; border-radius:0 !important; }
  #odmItems, #odmItems tbody { display:block; width:100%; }
  #odmItems thead { display:none; }
  #odmItems tbody tr { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 14px; padding:11px 0; border-bottom:1px solid #dbe5e9; }
  #odmItems tbody td { display:block; min-width:0; padding:5px 0; border:0; background:#fff !important; text-align:left !important; font-size:13px; }
  #odmItems tbody td:first-child { display:none; }
  #odmItems tbody td:nth-child(2) { grid-column:1 / -1; padding-top:0; color:#15324a; }
  #odmItems tbody td:nth-child(n+3)::before { content:attr(data-label); display:block; margin-bottom:2px; color:#64748b; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
  #odmItems tbody td:nth-child(7) { grid-column:1 / -1; display:flex; align-items:baseline; justify-content:space-between; margin-top:3px; padding-top:8px; border-top:1px solid #e3eaee; font-weight:800; color:#157957; }
  #odmItems tbody td:nth-child(7)::before { margin:0; }
  #odmItems tbody tr:has(td[colspan]) { display:block; }
  #odmItems tbody td[colspan] { display:block; text-align:center !important; }
  .odm-modal .modal-footer { display:grid; grid-template-columns:1fr; gap:8px; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .odm-modal .modal-footer .btn { width:100%; min-height:50px; margin:0; }

  /* Branch scope is already clear from the disabled POS field; the generic
     helper note made the two selectors different heights. */
  .pos-left .topbar-branch-note { display:none; }
  .pos-left .row.g-2.mb-2 > [class*="col-"] { display:flex; flex-direction:column; min-width:0; }
  .pos-left .row.g-2.mb-2 > .col-md-5,
  .pos-left .row.g-2.mb-2 > .col-md-4 { align-self:start; margin:0 !important; padding-top:0 !important; }
  .pos-left .row.g-2.mb-2 .form-label { display:flex; align-items:center; height:12px; margin:0 0 4px !important; padding:0; line-height:12px; }
  .pos-left .row.g-2.mb-2 .input-ic { display:block; margin:0; padding:0; }
  .pos-left .row.g-2.mb-2 .form-control,
  .pos-left .row.g-2.mb-2 .form-select { width:100%; }

  /* Expenses: filters are available on demand, then entries become cards so
     financial information is never hidden behind horizontal scrolling. */
  .expense-report-filters { display:none; margin-bottom:10px !important; }
  .expense-report-filters.is-mobile-open { display:block; }
  .expense-report-filters .row { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0; }
  .expense-report-filters .row > [class*="col-"] { width:auto; max-width:none; padding:0; }
  .expense-report-filters .row > [class*="col-"]:last-child { grid-column:1 / -1; }
  .expense-report-filters .btn { width:100%; }
  .expense-list-card { padding:10px; }
  .expense-list-scroll { overflow:visible; }
  .expense-list-table, .expense-list-table tbody { display:block; min-width:0 !important; width:100%; }
  .expense-list-table thead { display:none; }
  .expense-list-table tbody tr { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 14px; padding:11px 4px; border-bottom:1px solid #dbe5e9; }
  .expense-list-table tbody td { display:block; min-width:0; padding:5px 0 !important; border:0; background:#fff !important; text-align:left !important; font-size:12px !important; }
  .expense-list-table tbody td::before { content:attr(data-label); display:block; margin-bottom:2px; color:#687f94; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
  .expense-list-table tbody td:nth-child(3) { grid-column:1 / -1; color:#183b55; font-weight:800; }
  .expense-list-table tbody td:nth-child(7) { grid-column:1 / -1; display:flex; align-items:baseline; justify-content:space-between; padding-top:8px !important; border-top:1px solid #e3eaee; font-size:15px !important; }
  .expense-list-table tbody td:nth-child(7)::before { margin:0; }
  .expense-list-table tbody td:last-child:empty { display:none; }
  .expense-list-table tbody td[colspan] { grid-column:1 / -1; text-align:center !important; }
  .expense-list-table tbody td[colspan]::before { display:none; }
}

/* Final dashboard reference layout: this follows the older dashboard blocks
   above, so responsive rules cannot turn the period back into three rows. */
/* .dashboard-title { display:none; }
@media (min-width:651px) {
  .dashboard-welcome { min-height:236px; }
  .dashboard-dates { grid-template-columns:190px 190px 104px; gap:12px; justify-content:end; }
  .dashboard-period { width:104px; }
}
@media (max-width:650px) {
  .dashboard-welcome { min-height:0; padding:12px 16px 28px; }
  .dashboard-dates { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:7px; justify-content:stretch; }
  .dashboard-dates .form-control { min-width:0; height:36px; padding:5px 7px; font-size:12px; }
  .dashboard-period { grid-column:1 / -1; justify-self:start; width:auto; min-width:106px; height:34px; padding:5px 16px; font-size:12px; }
} */

/* Final typography authority: IBM Plex Serif is local and must win over
   older page-specific font declarations above. */
:root { --font-ui:'IBM Plex Serif', Georgia, 'Times New Roman', serif; --app-font:var(--font-ui); --bs-body-font-family:var(--font-ui); }
/* Slightly larger default reading size without changing the compact controls
   and data-density of reports. */
html body { font-size:15px; line-height:1.5; }
html body,
html body button, html body input, html body select, html body textarea,
html body .btn, html body .form-control, html body .form-select,
html body .modal, html body .table,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .side-link, html body .side-group-head, html body .page-head h1,
html body .report-section-header h2, html body .sheet-label,
html body .sheet-store, html body .mini-kpis small {
  font-family:var(--font-ui) !important;
}

/* A number of legacy pages set their own font directly on labels, cards and
   report cells.  Keep glyph icons and technical values intact, but make every
   human-facing element inherit the same application typeface. */
html body *:not(.bi):not([class^="bi-"]):not([class*=" bi-"]) {
  font-family:var(--font-ui) !important;
}
html body code,
html body pre,
html body kbd,
html body samp,
html body .font-monospace {
  font-family:Consolas, 'Courier New', monospace !important;
}

/* The selected Point of Service is already the branch context in POS.  A
   second helper line below it breaks the shared control baseline on desktop. */
.pos-left .topbar-branch-note { display:none !important; }

/* Application identity: use the supplied vector mark consistently in the
   sidebar instead of a generic icon. */
.side-brand-mark { overflow:hidden; background:transparent !important; }
.side-brand-mark img { display:block; width:100%; height:100%; object-fit:contain; }

/* Android page context has one rule across every module.  Individual pages
   must not right-align their breadcrumbs merely because they contain actions. */
.mobile-filter-toggle { display:none; }

/* Purchase receiving intentionally uses the same counter layout as New Sale.
   Only its terminology and two supplier-payment choices differ. */
.purchase-pos-screen .purchase-entry-form {
  margin:0;
  min-height:0;
  background:transparent;
}
.purchase-pos-screen {
  display:block;
  height:calc(100dvh - 94px);
  min-height:620px;
}
.purchase-pos-screen .pos-workspace { width:100%; height:100%; }
.purchase-pos-screen .po-main {
  height:calc(100vh - 175px);
  height:calc(100dvh - 175px);
  min-height:480px;
  margin:0;
  gap:16px;
}
.purchase-pos-screen .po-main .pos-left {
  flex:0 0 520px;
  padding:14px;
  border-radius:4px;
  box-shadow:0 3px 12px rgba(20,51,70,.07);
}
.purchase-pos-screen .po-main .pos-right {
  height:100%;
  max-height:none;
  border-radius:4px;
  box-shadow:0 3px 12px rgba(20,51,70,.07);
}
.purchase-pos-screen .po-main .pos-item-grid {
  padding:14px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  grid-auto-rows:minmax(146px,auto);
  gap:10px;
  background:#f5f8fa;
}
.purchase-pos-screen .po-main .pos-item-card { padding:12px 10px; }
.purchase-pos-screen .po-main .pos-item-name { font-size:13px; }
.purchase-pos-screen .po-main .search-field .form-control { min-height:48px; border:0; font-size:14px; }
.purchase-pos-screen .po-main .date-box { min-width:160px; }
.purchase-pos-screen .po-main .customer-row { padding:12px 16px; }
.purchase-pos-screen .po-pay-wrap { padding:0 16px 16px; border:0; }
.purchase-pos-screen .po-payment-row { padding:0; }
.purchase-pos-screen .po-payment-row .po-mode-btn { border:0; }
.purchase-pos-screen .po-mode-btn:not(.active) { background:#eef3f4; color:#4b6373; }
.purchase-pos-screen #poReceive { margin-top:8px; }

@media (min-width:768px) {
  /* Purchases has no left module rail.  Its checkout must therefore always
     claim the remaining desktop space instead of inheriting a mobile-only
     hidden-cart state. */
  .purchase-pos-screen .po-main { display:flex; width:100%; }
  .purchase-pos-screen .po-main .pos-right {
    display:flex !important;
    flex:0 0 clamp(420px,33vw,540px) !important;
    min-width:420px;
    visibility:visible;
  }
  /* Receiving is catalogue-led: products get the large working area while
     purchase details stay a focused, readable checkout column. */
  .purchase-pos-screen .po-main .pos-left { flex:1 1 0 !important; }
}

@media (max-width:991.98px) {
  /* Sales and Purchases deliberately hide the sidebar on large screens, but
     the Android menu button must still be able to reveal its drawer. */
  body:has(.pos-screen) .app-sidebar { display:block !important; }
}

@media (max-width:767.98px) {
  .purchase-pos-screen { display:block; height:auto; min-height:0; }
  .purchase-pos-screen .purchase-entry-form { margin:0; }
  .purchase-pos-screen .po-main { height:auto; min-height:0; margin:0; }
  .purchase-pos-screen .po-main .pos-left { flex:1 1 auto; width:100%; padding:12px; }
  .purchase-pos-screen .po-main .pos-item-grid { max-height:44vh; min-height:250px; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(132px,auto); gap:8px; padding:8px; }
  .purchase-pos-screen .po-main .pos-right.is-mobile-open { height:auto; max-height:none; }
  .purchase-pos-screen .po-pay-wrap { padding:0 12px 12px; }
  .purchase-pos-screen .po-payment-row { padding:0; }
  .purchase-pos-screen #poReceive { min-height:54px; margin-top:8px; }
  .purchase-pos-screen .cart-table tbody td:nth-child(4)::before { content:'Cost'; }
  .purchase-pos-screen .cart-table tbody td:nth-child(5)::before { content:'Amount'; }
  .purchase-pos-screen .cart-table tbody td:nth-child(5) { grid-column:3 / span 2; grid-row:2; }
  .purchase-pos-screen .cart-table tbody td:nth-child(6) {
    position:static; grid-column:4; grid-row:1; display:flex; width:30px; min-height:30px;
    height:30px; justify-self:end; align-items:center; justify-content:center; padding:0 !important;
    border:1px solid #f0c5e9; background:#fff8fe !important; color:#b95caf; font-size:16px; line-height:1;
  }
  .purchase-pos-screen .cart-table tbody td:nth-child(6)::before { content:none; }
}

/* Cart totals use three deliberate columns.  The old nested inline spans let
   Clear drift toward the amount differently from one checkout screen to the
   next, especially when the item count or amount length changed. */
.totals-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  column-gap:14px;
}
.totals-row > .total-label { min-width:0; white-space:nowrap; }
.totals-row > span:last-child { display:contents; }
.totals-row .clear-link {
  grid-column:2;
  margin:0;
  white-space:nowrap;
  line-height:1;
}
.totals-row .total-amount {
  grid-column:3;
  justify-self:end;
  min-width:max-content;
  white-space:nowrap;
  line-height:1;
  text-align:right;
}
@media (max-width:420px) {
  .totals-row { column-gap:9px; }
  .totals-row .total-label { font-size:11px; }
  .totals-row .total-amount { font-size:18px; }
}
@media (max-width:767.98px) {
  .app-main .page-head,
  .app-main .report-heading,
  .app-main .dashboard-title {
    justify-content:flex-start !important;
    align-items:flex-start !important;
    text-align:left !important;
  }
  .app-main .page-head > div:first-child,
  .app-main .report-heading > div:first-child,
  .app-main .dashboard-title > div:first-child,
  .app-main .crumbs,
  .app-main .report-crumbs {
    display:block;
    width:100%;
    margin-left:0 !important;
    margin-right:auto !important;
    text-align:left !important;
  }

  /* POS operational controls share a true two-column grid on phones. */
  .pos-left .row.g-2.mb-2 {
    width:100%;
    margin:0 !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:0 8px !important;
  }
  .pos-left .row.g-2.mb-2 > .col-md-6 {
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  .pos-left .row.g-2.mb-2 .form-label {
    height:12px;
    margin:0 0 4px !important;
    padding:0 !important;
    line-height:12px;
    text-align:left;
  }

  /* Filters are available on demand so data remains the first thing an
     operator sees on Android.  Desktop is deliberately unaffected. */
  .mobile-filter-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:36px;
    margin:0 0 9px;
    padding:7px 13px;
    border:1px solid #bfd0d7;
    border-radius:4px;
    background:#fff;
    color:#26465d;
    font-size:12px;
    font-weight:800;
    line-height:1;
  }
  .mobile-filter-toggle.is-open { border-color:#176f4c; background:#176f4c; color:#fff; }
  .mobile-filter-panel:not(.is-mobile-open) { display:none !important; }
  .mobile-filter-panel.is-mobile-open { margin-bottom:11px; }
}

/* Sales module navigation: a cashier sees the exact same ribbon on New Sale,
   Orders, Bills and Expenses.  It remains a compact vertical rail on desktop
   where the page owns one, and becomes one stable touch-friendly row on phones. */
.sales-expense-nav { display:none; }
@media (max-width:767.98px) {
  .sales-module-nav {
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    width:100%;
    margin:0 0 10px !important;
    overflow:hidden;
    background:#fff;
    border:1px solid #d4e0e4;
    border-radius:4px !important;
    box-shadow:0 2px 7px rgba(24,54,79,.06);
  }
  .sales-module-nav:has(a:nth-child(4)) { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .sales-module-nav a {
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:46px;
    padding:7px 4px !important;
    border:0 !important;
    border-right:1px solid #e4ecef !important;
    color:#365168;
    background:#fff;
    font-size:12px !important;
    font-weight:750;
    line-height:1.1;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
  }
  .sales-module-nav a:last-child { border-right:0 !important; }
  .sales-module-nav a.active { color:#fff; background:#176f4c; }
  .sales-expense-nav { display:grid !important; margin:10px 10px 12px !important; width:calc(100% - 20px); }

  /* Page context stays at the left edge on phones.  Expenses previously hid
     it and right-aligned the remaining action, unlike the rest of Sales. */
  .sales-ledger-head,
  .expense-page-head {
    justify-content:flex-start !important;
    align-items:flex-start !important;
    text-align:left !important;
  }
  .sales-ledger-head > div:first-child,
  .expense-page-head > div:first-child {
    display:block !important;
    align-self:stretch;
    width:100%;
    text-align:left !important;
  }
  .sales-ledger-head .crumbs,
  .expense-page-head .crumbs,
  .sales-ledger-head h1,
  .expense-page-head h1,
  .pos-breadcrumb { margin-left:0; text-align:left !important; justify-content:flex-start; }
}