/* Custom theme on top of Bootstrap 5 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&display=swap');
:root {
  /* ===== Brand colors ===== */
  --brij-primary:      #1f3a5f;
  --brij-primary-dark: #15294a;
  --brij-accent:       #d4a946;

  /* ===== Semantic colors (Phase B — extracted from inline hex usage across pages) =====
     Use these instead of hard-coded hex so theme overrides cascade. Existing hex
     values were not migrated (700+ occurrences) — new code should use the vars. */
  --brij-success: #1e8449;  /* sale, RE, OK */
  --brij-danger:  #c0392b;  /* purchase, IS, error */
  --brij-warning: #b9770e;  /* PAYM, caution */
  --brij-info:    #2874a6;  /* RCPT, info */
  --brij-purple:  #8e44ad;  /* Diamond, BC, special */
  --brij-teal:    #16a085;  /* SST, cash */
  --brij-muted:   #888;     /* secondary text */
  --brij-border:  #e1e5eb;  /* borders, dividers */
  --brij-bg-soft: #f5f6f8;  /* thead background, inputs */
  --brij-bg-card: #ffffff;
  --brij-text:    #1f3a5f;  /* body text in cards */

  /* ===== Typography scale (Phase B + F) ===== */
  --fs-xs:   11px;     /* small UI text — labels, footnotes */
  --fs-sm:   12px;     /* compact body, list rows */
  --fs-md:   13px;     /* form controls inside cards */
  --fs-lg:   14px;     /* default body (matches body font-size below) */
  --fs-xl:   15px;     /* emphasized values, summary numbers */
  --fs-2xl:  1.4rem;   /* page titles */

  /* Smaller / looser variants commonly seen in legacy CSS */
  --fs-xs-tight: 10.5px;   /* legends, ultra-compact labels */
  --fs-sm-tight: 11.5px;   /* form-label uppercase */
  --fs-md-tight: 12.5px;   /* dense grid body */

  /* ===== Spacing scale ===== */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;

  /* ===== Shadow scale ===== */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07);
  --shadow-md: 0 2px 6px rgba(0,0,0,.10);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.12);
}

/* === GLOBAL FONT SYSTEM ========================================================
   Modern "system font stack" — picks the OS-native UI font on each platform:
     macOS / iOS  → -apple-system / BlinkMacSystemFont (San Francisco)
     Windows      → Segoe UI
     Android      → Roboto
     fallback     → Helvetica / Arial
   This is the same stack used by GitHub, Bootstrap 5, Stack Overflow, etc.
   It looks crisp on every platform AND has the same metrics across pages —
   no layout shift like Arial was causing.
================================================================================ */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

/* Form controls don't inherit body font in older browsers — set them explicitly */
input, select, textarea, button,
.form-control, .form-select, .btn,
.dropdown-menu, .dropdown-item, .modal,
table, th, td {
    font-family: inherit;
}

/* Bootstrap icon glyphs MUST keep their own font */
.bi, [class^="bi-"], [class*=" bi-"], i.bi, i[class^="bi-"], i[class*=" bi-"] {
    font-family: 'bootstrap-icons' !important;
}

/* Code-style elements stay monospace (used by Setup / DbHealth / Audit / log boxes) */
code, pre, kbd, samp,
.diag, .ci-log, .bm-log, .bu-log {
    font-family: 'Consolas', 'Courier New', monospace !important;
}

/* Tabular numerals — keeps numeric columns visually aligned regardless of digit content */
.num, td.num, th.num,
.numeric, [data-numeric="true"],
.kpi-num, .lg-num, .dl-num, .au-num,
.bl-bill, .bl-gold, .bl-disc, .bl-tax,
.bl-cash, .bl-cheque, .bl-card, .bl-pay, .bl-net {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* === Standard list-row action buttons (Print → WhatsApp → Edit → Delete).
   Applied via `class="brij-actions"` on the GridView ItemStyle. Compact 30×30
   buttons in a single nowrap row so 4 buttons fit in ~150px column without
   wrapping to a second line. Hover scales the button slightly for affordance. */
.brij-actions {
    white-space: nowrap;
    text-align: center;
}
.brij-actions a, .brij-actions .btn {
    width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 5px; transition: all .12s;
    margin-left: 2px;
    font-size: var(--fs-lg);
    line-height: 1;
}
.brij-actions a:first-child, .brij-actions .btn:first-child { margin-left: 0; }
.brij-actions a:hover:not(.disabled), .brij-actions .btn:hover:not(.disabled) {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.brij-actions .disabled { opacity: .35; cursor: not-allowed; }

/* === Lock overlay — applied by Scripts/lock-overlay.js to inputs in a
   bill/voucher form when data-bill-locked="user" is set on the form.
   Visually communicates "you can't type here". =================== */
.brij-locked-input,
.brij-locked-input:focus,
input.brij-locked-input,
select.brij-locked-input,
textarea.brij-locked-input {
    background-color: #f0f3f7 !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: .85;
    border-color: #d4dae2 !important;
    box-shadow: none !important;
}
button.brij-locked-input,
a.brij-locked-input {
    pointer-events: none;
    opacity: .5 !important;
    cursor: not-allowed !important;
}
/* Lock banner gets a subtle border-emphasis so it's the visual anchor */
.brij-lock-banner {
    border-left: 4px solid #b07b00 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* === Barcode scan bar — used by Sale / Purchase / Diamond / Stock /
   Godown Transfer / Item Verification entry pages.
   The shared logic lives in Scripts/barcode-scan.js (BrijBarcodeScan).
   ============================================================ */
.bk-scan-bar {
    background: #fffbe6;
    border: 1px solid #f0d878;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    transition: background-color .25s, border-color .25s;
}
.bk-scan-bar i.bi { font-size: 18px; color: #b07b00; }
.bk-scan-bar input {
    flex: 1; max-width: 360px; font-size: var(--fs-lg);
    padding: 5px 10px; border: 1px solid #d4c060; border-radius: 4px;
    background: #fff; font-family: inherit;
}
.bk-scan-bar input:focus { outline: 0; border-color: var(--brij-primary); box-shadow: 0 0 0 2px rgba(31,58,95,.15); }
.bk-scan-bar .bk-scan-msg { font-size: var(--fs-sm); min-width: 200px; }
.bk-scan-bar.bk-flash-ok  { animation: bk-flash-ok  .55s ease-out; }
.bk-scan-bar.bk-flash-err { animation: bk-flash-err .55s ease-out; }
@keyframes bk-flash-ok {
    0%   { background: #d5f5e3; border-color: #1d8348; }
    100% { background: #fffbe6; border-color: #f0d878; }
}
@keyframes bk-flash-err {
    0%   { background: #fdebd0; border-color: #b03a2e; }
    100% { background: #fffbe6; border-color: #f0d878; }
}

/* Navbar */
.brij-navbar { background-color: var(--brij-primary) !important; }
.brij-navbar .navbar-brand,
.brij-navbar .nav-link { color: rgba(255,255,255,.92) !important; }
.brij-navbar .nav-link:hover { color: #fff !important; }
.brij-navbar .nav-link.active {
  color: #fff !important;
  border-bottom: 2px solid var(--brij-accent);
}
.brij-navbar .dropdown-menu { border: 0; box-shadow: 0 4px 12px rgba(0,0,0,.12); }

/* ============================================================
   Fixed-top navbar — the navbar is `position:fixed; top:0` (Bootstrap's
   .fixed-top class set in Site.master). To prevent the page content from
   sliding under it, push every page down by the navbar's height.
   The exact navbar height varies by viewport (toggle button on mobile, etc.)
   so we use slightly generous padding for breathing room.

   Dropdowns inside a fixed navbar can extend beyond the viewport — give them
   their own scroll so long menus (Reports has 5 sections) stay reachable.
   ============================================================ */
body { padding-top: 64px; }                 /* desktop: navbar ~56px + 8px buffer */
@media (max-width: 991.98px) { body { padding-top: 70px; } }   /* mobile: collapsed nav can be slightly taller */

.brij-navbar.fixed-top { z-index: 1030; }   /* keep above dropdowns of static content */

/* Long dropdowns (e.g. Reports has 5 sections) get their own scroll so
   they never overflow below the viewport when the nav is fixed at top. */
.brij-navbar .dropdown-menu {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

/* Anchored sections (e.g. <a name="..."> jumps) — offset so the heading
   isn't hidden behind the fixed navbar after the jump. */
:target { scroll-margin-top: 70px; }

/* ============================================================
   Grouped dropdown menus (Reports + User/Admin menus).
   `.menu-grouped` adds:
     • Tighter padding so 5+ sections still fit on one screen
     • Section headers (h6.dropdown-header) styled as small uppercase
       category labels with a subtle accent stripe + brand color
     • Items get a hover slide effect that reads as "active"
     • Section dividers are thinner / lighter than default Bootstrap
   ============================================================ */
.menu-grouped { padding: 4px 0; }
.menu-grouped .dropdown-header {
    font-size: var(--fs-xs-tight);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: var(--brij-primary);
    padding: 6px 14px 4px;
    margin-top: 2px;
    border-left: 3px solid var(--brij-accent);
    margin-left: 0;
    background: linear-gradient(to right, rgba(31,58,95,.04), transparent);
}
.menu-grouped .dropdown-header:first-child { margin-top: 0; }
.menu-grouped .dropdown-header i { color: var(--brij-primary); opacity: .85; }

.menu-grouped .dropdown-item {
    padding: 6px 14px 6px 18px;
    font-size: var(--fs-md-tight);
    transition: background-color .12s, padding-left .12s;
    border-left: 3px solid transparent;
}
.menu-grouped .dropdown-item:hover,
.menu-grouped .dropdown-item:focus {
    background-color: rgba(31, 58, 95, .07);
    border-left-color: var(--brij-primary);
    padding-left: 22px;
}
.menu-grouped .dropdown-item i { width: 18px; display: inline-block; text-align: center; }

.menu-grouped .dropdown-divider {
    margin: 4px 8px;
    border-color: #ebeef2;
    opacity: .6;
}

/* Inline "(detail)" subtitle inside dropdown items */
.menu-grouped .dropdown-item small.text-muted {
    font-size: var(--fs-xs-tight);
    margin-left: 4px;
    font-weight: 400;
}

/* Buttons - keep BS classes but tweak primary */
.btn-primary {
  background-color: var(--brij-primary);
  border-color: var(--brij-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--brij-primary-dark);
  border-color: var(--brij-primary-dark);
}

/* Headings — Phase A: universal page-title size + spacing across every page */
h1, h2, h3 { color: var(--brij-primary); }
h1.page-title { font-size: var(--fs-2xl); margin-bottom: var(--space-2); font-weight: 700; }
h1.page-title i { color: var(--brij-accent); margin-right: .4rem; }
/* Safety net — cancels any leftover inline font-size override that a future page may add */
h1.page-title[style] { font-size: var(--fs-2xl) !important; }
/* Universal title-row margin — pages mix mb-3 / mb-2 / flex-wrap variants; force one */
.d-flex.align-items-center.justify-content-between.flex-wrap.gap-2.mb-3:has(> h1.page-title),
.d-flex.align-items-center.flex-wrap.gap-2.mb-3:has(> h1.page-title) { margin-bottom: var(--space-2) !important; }

/* Cards */
.card { border: 0; box-shadow: var(--shadow-sm); }
.card-header { background-color: #fff; border-bottom: 2px solid #f0f0f0; font-weight: 600; }

/* ============================================================
   Phase C — Universal .brij-card chrome
   Single set of classes for ALL future card-style containers. Replaces
   the 78 page-specific variants (.db-card, .ve-card, .bk-card, .ag-card, ...)
   which each defined their own padding/head gradient/body padding.
   USAGE:
     <div class="brij-card">
       <div class="brij-card-head"><i class="bi bi-..."></i><h6>Title</h6></div>
       <div class="brij-card-body"> content </div>
     </div>
   HUE MODIFIERS on .brij-card-head:
     .brij-card-head.gold    → gold gradient (rate updates, estimates)
     .brij-card-head.purple  → purple gradient (Diamond, Bhaw Cut)
     .brij-card-head.red     → red gradient (Purchase, danger)
     .brij-card-head.green   → green gradient (Sale, success)
     .brij-card-head.teal    → teal gradient (cash, counter-settle)
   Existing per-page card classes are NOT touched — they continue to work.
   ============================================================ */
.brij-card {
    background: var(--brij-bg-card);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-2);
    overflow: hidden;
}
.brij-card-head {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-md);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--brij-primary) 0%, #2c4d77 100%);
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px 8px 0 0;
}
.brij-card-head h6 { color: #fff !important; margin: 0; font-weight: 600; font-size: var(--fs-lg); flex: 1; }
.brij-card-head small { color: rgba(255,255,255,.75); font-weight: 400; font-size: var(--fs-sm); }
.brij-card-head .brij-card-icon {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-md);
}
.brij-card-head .brij-card-count {
    background: rgba(255,255,255,.2);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: var(--fs-sm);
    font-weight: 600;
}
.brij-card-body { padding: var(--space-2) var(--space-3); }
.brij-card-body.p-0 { padding: 0; }
.brij-card-footer {
    padding: var(--space-2) var(--space-3);
    background: var(--brij-bg-soft);
    border-top: 1px solid var(--brij-border);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hue modifiers — keeps brand-specific accent per module (Diamond=purple, Purchase=red, etc.) */
.brij-card-head.gold   { background: linear-gradient(135deg, #b07b00, #d4a946); }
.brij-card-head.purple { background: linear-gradient(135deg, #6c3483, var(--brij-purple)); }
.brij-card-head.red    { background: linear-gradient(135deg, #962b22, var(--brij-danger)); }
.brij-card-head.green  { background: linear-gradient(135deg, #196f3d, var(--brij-success)); }
.brij-card-head.teal   { background: linear-gradient(135deg, #117a65, var(--brij-teal)); }
.brij-card-head.warn   { background: linear-gradient(135deg, #9a6700, var(--brij-warning)); }
.brij-card-head.info   { background: linear-gradient(135deg, #1b4f72, var(--brij-info)); }

/* Stat tile (dashboard) */
.stat-tile {
  display: block; text-decoration: none; color: var(--brij-primary);
  background: #fff; border-radius: .5rem; padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
  border-left: 4px solid var(--brij-accent);
  transition: transform .15s, box-shadow .15s;
}
.stat-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  color: var(--brij-primary-dark);
}
.stat-tile .stat-num { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.stat-tile .stat-lbl { color: #6c757d; font-size: .875rem; margin-top: .35rem; }
.stat-tile .stat-icon { font-size: 1.5rem; opacity: .35; }

/* Tables */
.table thead { background-color: var(--brij-primary); color: #fff; }
.table thead th { font-weight: 600; border: 0; }
.table-hover tbody tr:hover { background-color: rgba(31,58,95,.05); }

/* ============================================================
   Phase D — Universal .brij-grid table styling
   Replaces the 14+ list-page grid variants (.sm-grid, .bl-grid, .cl-grid,
   .bw-grid, .pl-grid, .db-grid, etc.) which each defined their own thead
   background, td padding, hover styling.
   USAGE:
     <asp:GridView CssClass="brij-grid" ...>
   MODIFIER CLASSES:
     .brij-grid.dense    → tight rows (used in dense reports)
     .brij-grid.striped  → zebra stripes
     .brij-grid.scroll   → wrap in scrollable container (sticky thead)
   Existing per-page grid classes are NOT touched — they continue to work.
   ============================================================ */
.brij-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}
.brij-grid thead th {
    background: var(--brij-bg-soft);
    color: #555;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
    padding: 9px 12px;
    border-bottom: 2px solid var(--brij-border);
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}
.brij-grid thead th.num { text-align: right; }
.brij-grid tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: var(--fs-md-tight);
    vertical-align: middle;
    color: var(--brij-text);
}
.brij-grid tbody tr { transition: background .12s; }
.brij-grid tbody tr:hover { background: #fafbfc; }
.brij-grid tbody tr:hover td { box-shadow: inset 3px 0 0 var(--brij-primary); }
.brij-grid tbody tr:last-child td { border-bottom: 0; }
.brij-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.brij-grid tfoot td {
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--brij-bg-soft) 0%, #fff 100%);
    border-top: 2px solid var(--brij-primary);
    font-weight: 700;
    color: var(--brij-primary);
    font-size: var(--fs-md);
}

/* Modifiers */
.brij-grid.dense thead th { padding: 6px 8px; font-size: 10.5px; }
.brij-grid.dense tbody td { padding: 4px 8px; font-size: var(--fs-sm); }
.brij-grid.striped tbody tr:nth-child(odd) { background: #fafbfc; }
.brij-grid-scroll { max-height: 65vh; overflow-y: auto; }
.brij-grid-scroll .brij-grid thead th { position: sticky; top: 0; z-index: 2; }

/* Login */
.login-container {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brij-primary) 0%, var(--brij-primary-dark) 100%);
  padding: 1rem;
}
.login-card {
  width: 100%; max-width: 400px;
  background: #fff; border-radius: .75rem; padding: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.login-card h1 { text-align: center; font-size: 1.4rem; margin-bottom: .25rem; }
.login-card .subtitle {
  text-align: center; color: #6c757d; margin-bottom: 1.5rem;
  font-size: .9rem;
}
.login-card .brand-icon {
  text-align: center; margin-bottom: 1rem;
  font-size: 2.5rem; color: var(--brij-accent);
}

/* Forms grid for edit pages: rendered via Bootstrap row/col */
.form-required::after { content: ' *'; color: #dc3545; }

/* Footer */
footer { border-top: 1px solid #e9ecef; margin-top: 2rem; }

/* ============================================================ */
/* Shared styling for master EDIT pages (Party / Item / Diamond /
   User / Group / Rate). Applied via .m-card / .m-header etc.    */
/* ============================================================ */

/* Section card */
.m-card { background: white; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: 14px; overflow: visible; }
.m-card.m-card-clip { overflow: hidden; }
.m-card-head { background: linear-gradient(135deg, #1f3a5f 0%, #2c4d77 100%); color: white; padding: 9px 16px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; border-radius: 10px 10px 0 0; }
.m-card-head .m-card-icon { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.m-card-head small { color: rgba(255,255,255,.7); font-weight: 400; margin-left: 4px; }
.m-card-body { padding: 14px 18px; }

/* Header strip */
.m-header { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #1f3a5f 0%, #2c4d77 100%); color: white; border-radius: 10px; padding: 12px 18px; box-shadow: 0 2px 6px rgba(0,0,0,.1); margin-bottom: 14px; }
.m-header .m-avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.15); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; flex-shrink: 0; }
.m-header h1 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.m-header .m-sub { color: rgba(255,255,255,.7); font-size: 12px; margin-top: 2px; }
.m-header .m-actions { margin-left: auto; }
.m-header .m-actions a, .m-header .m-actions .btn-link-light { color: white; opacity: .85; text-decoration: none; font-size: 13px; padding: 4px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; }
.m-header .m-actions a:hover { background: rgba(255,255,255,.12); opacity: 1; }

/* Compact form fields (master EDIT pages — PartyEdit, ItemEdit, etc.) */
.m-card-body .form-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .35px; color: #666; font-weight: 600; margin-bottom: 3px; display: block; }
.m-card-body .form-label.req::after { content: " *"; color: var(--brij-danger); font-weight: 700; }
.m-card-body .form-control, .m-card-body .form-select { padding: 6px 10px; font-size: var(--fs-md); border-radius: 5px; border: 1px solid #d4dae2; transition: border-color .12s, box-shadow .12s; }
.m-card-body .form-control:focus, .m-card-body .form-select:focus { border-color: var(--brij-primary); box-shadow: 0 0 0 3px rgba(31,58,95,.12); outline: none; }
.m-card-body .input-group-text { padding: 4px 10px; font-size: var(--fs-md); background: var(--brij-bg-soft); color: #666; border: 1px solid #d4dae2; border-right: 0; }
.m-card-body .input-group .form-control { border-left: 0; }
.m-card-body .field-hint { font-size: var(--fs-xs); color: var(--brij-muted); margin-top: 2px; line-height: 1.3; }
.m-card-body .field-hint.warn { color: var(--brij-danger); }
.m-card-body .field-hint.ok { color: var(--brij-success); }
.m-card-body .row { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.6rem; }

/* Sticky save bar at bottom */
.m-savebar { position: sticky; bottom: 0; background: white; border-radius: 10px; box-shadow: 0 -2px 8px rgba(0,0,0,.1); padding: 10px 18px; display: flex; gap: 8px; align-items: center; z-index: 10; margin-top: 10px; border: 1px solid #e1e5eb; }
.m-savebar .m-tip { color: #888; font-size: 12px; margin-right: auto; }
.m-savebar .btn { font-weight: 600; padding: 6px 18px; border-radius: 6px; }

/* ============================================================
   Universal Dr / Cr suffix labels for money amounts.
   Used by App_Code/MoneyFmt.Dr() / Cr() / Auto() / Net().
   Renders as a small badge right after the ₹ value.
   ============================================================ */
.amt-suffix {
    display: inline-block;
    font-size: 0.65em;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
    vertical-align: 0.15em;
    line-height: 1.35;
}
.amt-suffix.dr { background: #fdecea; color: var(--brij-danger); }
.amt-suffix.cr { background: #ebfaf1; color: var(--brij-success); }
.amt-suffix.zero { background: #ecf0f1; color: var(--brij-muted); }

/* ============================================================
   Universal modal polish — applies to every Bootstrap modal
   in the app (Add New Party, Confirm Bill, Counter Sale,
   Approve Decision, Send Karigar, Edit Request, etc.).
   Makes them feel consistent + premium across the app.
   ============================================================ */
.modal-content {
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(15, 35, 65, 0.18) !important;
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(135deg, var(--brij-primary) 0%, #2c4d77 100%);
    color: #fff !important;
    border: 0 !important;
    padding: 12px 18px !important;
}
.modal-header .modal-title {
    color: #fff !important;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.2px;
}
.modal-header .modal-title i {
    margin-right: 6px;
    color: var(--brij-accent);
}
.modal-header .btn-close {
    filter: invert(1) brightness(2);
    opacity: 0.85;
    transition: opacity 0.15s, transform 0.15s;
}
.modal-header .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}
/* Header colour modifiers — opt in by adding .modal-header.brij-mh-success
   (or warning / danger / accent). Used by destructive / status modals. */
.modal-header.brij-mh-success { background: linear-gradient(135deg, #196f3d 0%, var(--brij-success) 100%); }
.modal-header.brij-mh-danger  { background: linear-gradient(135deg, #922b21 0%, var(--brij-danger)  100%); }
.modal-header.brij-mh-warning { background: linear-gradient(135deg, #9c640c 0%, var(--brij-warning) 100%); }
.modal-header.brij-mh-accent  { background: linear-gradient(135deg, #b07b00 0%, var(--brij-accent)  100%); }

.modal-body { padding: 16px 18px !important; }
.modal-body .form-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.modal-body .form-control,
.modal-body .form-select {
    border-radius: 6px;
    font-size: 13.5px;
    padding: 6px 10px;
    border: 1px solid #d4dae2;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-body .form-control:focus,
.modal-body .form-select:focus {
    border-color: var(--brij-primary);
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.12);
}
.modal-footer {
    background: #fafbfc;
    border-top: 1px solid var(--brij-border) !important;
    padding: 10px 18px !important;
    gap: 6px;
}
.modal-footer .btn {
    border-radius: 6px;
    font-weight: 600;
    padding: 5px 14px;
    font-size: 13.5px;
}
.modal-footer .btn i { margin-right: 5px; }
/* ============================================================
   3-column mega-menu for the Transactions dropdown.
   Single-column was getting too tall (16+ items). The mega
   layout fans them across 3 columns so the menu height halves
   and related sections stay grouped column-wise.
   Falls back to single column on small screens (<768px).
   ============================================================ */
.dropdown-menu.menu-mega-3col {
    min-width: 640px;
    padding: 12px 8px;
}
.menu-mega-3col .mega-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px 12px;
}
.menu-mega-3col .mega-col { padding: 0 4px; }
.menu-mega-3col .mega-head {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6c757d;
    font-weight: 700;
    padding: 4px 12px;
    margin: 0 0 2px;
    border-bottom: 1px solid #f0f0f0;
}
.menu-mega-3col .mega-head.mt-2 { margin-top: 10px !important; padding-top: 6px; }
.menu-mega-3col .dropdown-item {
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 4px;
}
.menu-mega-3col .dropdown-item:hover {
    background: var(--brij-bg-soft);
}
@media (max-width: 767.98px) {
    .dropdown-menu.menu-mega-3col { min-width: 280px; }
    .menu-mega-3col .mega-cols { grid-template-columns: 1fr; }
}

/* Confirmation callout boxes (used by App.confirm() in Site.master) */
.modal .brij-callout {
    background: #fff8e1;
    border: 1px solid #f5c66f;
    border-left: 4px solid var(--brij-accent);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    color: #6e4d00;
}

/* ============================================================
   PHASE C: Universal card chrome (.brij-card / -head / -body / -foot)
   New code uses these instead of duplicating .db-card / .ve-card / .po-card
   per page. Existing pages keep their custom classes — no breaking change.
   Hue modifiers: .brij-card-head.primary / .accent / .success / etc.
   ============================================================ */
.brij-card {
    background: var(--brij-bg-card);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-2);
    overflow: visible;   /* so typeahead dropdowns escape the card (overrides the earlier .brij-card overflow:hidden) */
}
.brij-card.brij-card-clip { overflow: hidden; }   /* opt-in clipping */

.brij-card-head {
    background: linear-gradient(135deg, var(--brij-primary) 0%, #2c4d77 100%);
    color: #fff;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px 10px 0 0;
}
.brij-card-head h6,
.brij-card-head h5,
.brij-card-head .brij-card-title {
    color: #fff !important;
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    flex: 1;
}
.brij-card-head .brij-card-count {
    background: rgba(255,255,255,.2);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.brij-card-head i { color: rgba(255,255,255,.85); }
/* Hue modifiers for the head — change gradient by adding a class */
.brij-card-head.success { background: linear-gradient(135deg, #196f3d 0%, var(--brij-success) 100%); }
.brij-card-head.danger  { background: linear-gradient(135deg, #922b21 0%, var(--brij-danger)  100%); }
.brij-card-head.warning { background: linear-gradient(135deg, #9c640c 0%, var(--brij-warning) 100%); }
.brij-card-head.info    { background: linear-gradient(135deg, #1f618d 0%, var(--brij-info)    100%); }
.brij-card-head.purple  { background: linear-gradient(135deg, #6c3483 0%, var(--brij-purple)  100%); }
.brij-card-head.accent  { background: linear-gradient(135deg, #b07b00 0%, var(--brij-accent)  100%); }
.brij-card-head.teal    { background: linear-gradient(135deg, #117a65 0%, var(--brij-teal)    100%); }

.brij-card-body { padding: 12px 16px; }
.brij-card-body.dense  { padding: 8px 12px; }
.brij-card-body.flush  { padding: 0; }   /* edge-to-edge tables */

.brij-card-foot {
    background: #fafbfc;
    border-top: 1px solid var(--brij-border);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 0 0 10px 10px;
}

/* ============================================================
   PHASE D: Universal grid (.brij-grid)
   Same density + look as the existing per-page grids (sm-grid /
   bl-grid / dl-grid / vl-grid / sl-grid / pl-grid / etc.) but
   centralized. New tables use this; existing custom classes keep
   working — no breaking change.
   Modifiers:
     .dense   — tighter row padding
     .striped — zebra body rows
     .scroll  — sticky thead inside the wrapper (use with .brij-grid-scroll)
   ============================================================ */
.brij-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
}
.brij-grid thead th {
    background: var(--brij-bg-soft);
    color: #555;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
    padding: 9px 12px;
    border: 0;
    border-bottom: 2px solid var(--brij-border);
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
}
.brij-grid thead th.num,
.brij-grid thead th.text-end { text-align: right; }
.brij-grid tbody td {
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    font-size: var(--fs-md-tight);
}
.brij-grid tbody tr {
    transition: background .12s;
}
.brij-grid tbody tr:hover {
    background: #fafbfc;
}
.brij-grid tbody tr:hover td {
    box-shadow: inset 3px 0 0 var(--brij-primary);
}
.brij-grid tbody tr:last-child td {
    border-bottom: 0;
}
.brij-grid .num { text-align: right; }
.brij-grid .empty-cell { color: #c5cdd6; font-style: italic; }

.brij-grid tfoot td {
    background: linear-gradient(135deg, #f5f6f8 0%, #fcfcfd 100%);
    padding: 9px 12px;
    border-top: 2px solid var(--brij-primary);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--brij-text);
    white-space: nowrap;
}
.brij-grid tfoot td.num { text-align: right; }

/* ── Grid input alignment ────────────────────────────────────────────
   Bootstrap `.form-control` is display:block, so a fixed-width input in a
   right-aligned `.num` cell hugged the LEFT edge while the column header
   hugged the RIGHT → header and data looked misaligned. Make inputs (and
   input-groups) inline inside numeric grid cells so the cell's
   text-align:right lines them up directly under their header. */
.brij-grid td.num input,
.brij-grid td.num select,
.brij-grid td.num .form-control,
.brij-grid td.num .form-select {
    display: inline-block;
    vertical-align: middle;
}
.brij-grid td.num .input-group {
    display: inline-flex;
    width: auto;
    vertical-align: middle;
    flex-wrap: nowrap;
}
/* Checkboxes/radios in numeric cells stay centered, not stretched */
.brij-grid td.num input[type="checkbox"],
.brij-grid td.num input[type="radio"] { display: inline-block; }

/* Density variant — for very long lists */
.brij-grid.dense thead th { padding: 6px 8px; font-size: var(--fs-xs-tight); }
.brij-grid.dense tbody td { padding: 4px 8px; font-size: var(--fs-sm); }
.brij-grid.dense tfoot td { padding: 6px 8px; font-size: var(--fs-sm); }

/* Striped */
.brij-grid.striped tbody tr:nth-child(even) { background: #fafbfc; }
.brij-grid.striped tbody tr:hover { background: #f0f4f8; }

/* Scroll wrapper — sticky thead pattern.
   Usage: <div class="brij-grid-scroll"><table class="brij-grid">...</table></div> */
.brij-grid-scroll {
    max-height: 65vh;
    overflow-y: auto;
    position: relative;
}
.brij-grid-scroll .brij-grid thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--brij-primary) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--brij-accent) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.brij-grid-scroll .brij-grid tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 4;
}

/* Common cell content styles */
.brij-grid .brij-voucher {
    font-weight: 700;
    padding: 2px 8px;
    border: 1.5px solid var(--brij-primary);
    border-radius: 4px;
    color: var(--brij-primary);
    text-decoration: none;
    font-size: var(--fs-sm);
    white-space: nowrap;
    display: inline-block;
    transition: all .12s;
}
.brij-grid .brij-voucher:hover {
    background: var(--brij-primary);
    color: #fff;
    text-decoration: none;
}
.brij-grid .brij-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .3px;
    min-width: 36px;
    text-align: center;
}
.brij-grid .brij-tag.sale     { background: var(--brij-success); }
.brij-grid .brij-tag.purchase { background: var(--brij-danger);  }
.brij-grid .brij-tag.cash     { background: var(--brij-teal);    }
.brij-grid .brij-tag.diamond  { background: var(--brij-info);    }
.brij-grid .brij-tag.estimate { background: var(--brij-accent);  }
.brij-grid .brij-tag.receipt  { background: var(--brij-info);    }
.brij-grid .brij-tag.payment  { background: var(--brij-warning); }
.brij-grid .brij-tag.bhawcut  { background: var(--brij-purple);  }
.brij-grid .brij-tag.other    { background: #7f8c8d;             }

/* Status pill (active / deactivated) */
.status-pill { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.status-pill.active { background: #ebfaf1; color: var(--brij-success); }
.status-pill.deact  { background: #fdecea; color: var(--brij-danger); }

/* ===== Shared pager (matches BhawCut Party-wise summary pattern) =====
   Used everywhere PagerHelper.BuildPager() emits HTML into a Literal. */
.app-pager { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: #fafbfc; border-top: 1px solid #eef0f3; border-radius: 0 0 8px 8px; flex-wrap: wrap; gap: 10px; }
.app-pager-info { font-size: var(--fs-md-tight); color: #666; }
.app-pager-info strong { color: var(--brij-primary); }
.app-pager-buttons { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.app-pager-buttons .app-page-btn { padding: 4px 12px; font-size: var(--fs-sm); border: 1px solid #d4dae2; background: white; color: #555; border-radius: 4px; cursor: pointer; font-weight: 600; transition: all .12s; text-decoration: none; display: inline-block; line-height: 1.4; }
.app-pager-buttons a.app-page-btn:hover { background: var(--brij-primary); color: white; border-color: var(--brij-primary); text-decoration: none; }
.app-pager-buttons .app-page-btn.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.app-pager-buttons .app-page-btn.active { background: var(--brij-primary); color: white; border-color: var(--brij-primary); }
.app-pager-buttons .app-page-ellipsis { padding: 0 4px; color: var(--brij-muted); font-size: var(--fs-sm); }

/* ================================================================
   PHASE G — Design Consistency Pass (v2.36.54)
   ----------------------------------------------------------------
   Project-wide audit: standardise every Bootstrap component that
   showed visual drift across pages. Single source of truth for
   font sizes, paddings, heights and dropdown look-and-feel. New
   code should NOT override these — page-specific tweaks should
   use additive classes, not inline overrides.

   Scope:
     • Form controls (input / select / textarea / .form-control / .form-select)
     • Form labels (.form-label)
     • Buttons (.btn base sizing + .btn-sm + .btn-lg)
     • Input groups (.input-group-text)
     • Dropdowns (.dropdown-menu / .dropdown-item)
     • Tables (.table base + .table-sm)
     • Cards (.card variant unified with .brij-card defaults)
     • Modals (.modal-header / .modal-title)
     • Native HTML <select> (datalist-style)
   ================================================================ */

/* ---- 1. FORM CONTROLS — uniform 13px font, 6px×10px padding, 33px height ---- */
.form-control,
.form-select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="search"],
input[type="password"],
textarea,
select {
    font-size: var(--fs-md);              /* 13px — same as cards' body text */
    padding: 6px 10px;
    line-height: 1.4;
    border-radius: 5px;
    border: 1px solid #d4dae2;
    background-color: #fff;
    color: var(--brij-text);
    height: auto;                         /* let padding+line-height dictate */
    min-height: 33px;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
.form-select:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    border-color: var(--brij-primary);
    box-shadow: 0 0 0 2px rgba(31, 58, 95, .12);
    outline: 0;
}

/* Dropdowns (native select + .form-select) — Bootstrap uses a built-in chevron;
   make sure our font + chevron alignment match across browsers. Override the
   default Bootstrap form-select-bg-size which sometimes left chevron mis-aligned. */
.form-select,
select.form-control,
select:not([multiple]):not([size]) {
    background-position: right 10px center;
    background-size: 14px 10px;
    padding-right: 32px;                   /* room for chevron */
    appearance: none;
    -webkit-appearance: none;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231f3a5f' d='M8 11.5 1.5 5h13z'/%3E%3C/svg%3E");
    cursor: pointer;
}
.form-select option,
select option {
    font-size: var(--fs-md);
    padding: 4px 8px;
}

/* Disabled / read-only inputs share the same muted look across pages */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: #f1f4f8;
    color: #6c757d;
    cursor: not-allowed;
    opacity: .9;
}

/* Right-aligned numeric inputs — use .input-num utility class instead of inline style */
.input-num,
input[type="number"].text-end,
.form-control[style*="text-align:right"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ---- 2. FORM LABELS — uppercase tiny label is the project standard ---- */
.form-label {
    font-size: var(--fs-xs);              /* 11px */
    font-weight: 700;
    color: #6c7a8c;
    text-transform: uppercase;
    letter-spacing: .35px;
    margin-bottom: 4px;
    line-height: 1.3;
}
.form-label.req::after,
.form-label .req::after {
    content: " *";
    color: var(--brij-danger);
}
.form-label small,
.form-label .opt {
    text-transform: none;
    font-weight: 500;
    color: #b9c0c8;
    letter-spacing: 0;
    margin-left: 3px;
}

/* ---- 3. BUTTONS — consistent height + font + padding ---- */
.btn {
    font-size: var(--fs-md);              /* 13px */
    font-weight: 600;
    padding: 6px 14px;
    min-height: 33px;
    border-radius: 5px;
    line-height: 1.4;
    transition: background-color .12s, border-color .12s, box-shadow .12s, transform .08s;
}
.btn:active { transform: translateY(0); }

.btn-sm {
    font-size: var(--fs-sm);              /* 12px */
    padding: 4px 10px;
    min-height: 28px;
    border-radius: 4px;
}

.btn-lg {
    font-size: var(--fs-xl);              /* 15px */
    padding: 9px 20px;
    min-height: 42px;
    border-radius: 6px;
}

/* Outline buttons — keep the same height as their solid counterparts */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
    border-width: 1px;
    font-weight: 600;
}

/* Solid button hover lift — uniform feel across pages */
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    transform: translateY(-1px);
}

/* Icon-only round buttons (used in row-actions etc.) */
.btn-icon {
    width: 30px; height: 30px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 5px;
}
.btn-icon i { font-size: var(--fs-lg); line-height: 1; }

/* ---- 4. INPUT GROUPS — addon prefix/suffix matches form-control height ---- */
.input-group-text {
    font-size: var(--fs-md);
    padding: 6px 10px;
    background-color: var(--brij-bg-soft);
    border: 1px solid #d4dae2;
    color: #6c7a8c;
    line-height: 1.4;
    min-height: 33px;
}
.input-group .form-control,
.input-group .form-select {
    min-height: 33px;
}

/* ---- 5. DROPDOWN MENUS — uniform font + spacing ---- */
.dropdown-menu {
    font-size: var(--fs-md);
    padding: 4px 0;
    border-radius: 6px;
    border: 1px solid var(--brij-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.dropdown-item {
    font-size: var(--fs-md);
    padding: 6px 14px;
    line-height: 1.4;
    color: var(--brij-text);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--brij-bg-soft);
    color: var(--brij-primary);
}
.dropdown-divider { margin: 4px 0; }

/* ---- 6. TABLES — base styling (legacy GridViews still use .table directly) ---- */
.table {
    font-size: var(--fs-md);
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}
.table thead th {
    background-color: var(--brij-bg-soft);
    color: #555;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 8px 12px;
    border-bottom: 2px solid var(--brij-border);
    border-top: 0;
    white-space: nowrap;
}
.table tbody td {
    padding: 7px 12px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 0;
    vertical-align: middle;
    line-height: 1.4;
}
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr:hover {
    background-color: rgba(31, 58, 95, .03);
}
.table-sm thead th { padding: 6px 10px; }
.table-sm tbody td { padding: 5px 10px; }

/* ---- 7. CARDS — Bootstrap .card unified with .brij-card defaults ---- */
.card {
    border: 0;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}
.card-header {
    padding: 10px 14px;
    background-color: var(--brij-bg-card);
    border-bottom: 1px solid var(--brij-border);
    font-weight: 600;
    font-size: var(--fs-lg);
    color: var(--brij-primary);
}
.card-body {
    padding: 12px 14px;
    font-size: var(--fs-md);
}

/* ---- 8. MODALS — header / title consistency ---- */
.modal-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--brij-border);
    background: linear-gradient(135deg, var(--brij-primary) 0%, #2c4d77 100%);
    color: #fff;
}
.modal-header.modal-header-light {
    background: var(--brij-bg-card);
    color: var(--brij-primary);
}
.modal-title {
    font-size: var(--fs-lg);
    font-weight: 700;
}
.modal-header .btn-close {
    filter: brightness(0) invert(1);          /* white close button on dark header */
    opacity: .85;
}
.modal-body { padding: 14px 16px; font-size: var(--fs-md); }
.modal-footer { padding: 10px 16px; border-top: 1px solid var(--brij-border); gap: 8px; }

/* ---- 9. TAB / NAV / PILL bars — consistent spacing ---- */
.nav-tabs .nav-link {
    font-size: var(--fs-md);
    padding: 8px 14px;
    color: #6c7a8c;
    font-weight: 600;
    border-radius: 6px 6px 0 0;
}
.nav-tabs .nav-link.active {
    color: var(--brij-primary);
    border-bottom-color: transparent;
}
.nav-pills .nav-link {
    font-size: var(--fs-md);
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 600;
}

/* ---- 10. ALERTS — consistent padding + typography ---- */
.alert {
    font-size: var(--fs-md);
    padding: 9px 14px;
    border-radius: 6px;
    border-width: 1px;
    border-left-width: 4px;
}
.alert-success { border-left-color: var(--brij-success); }
.alert-danger  { border-left-color: var(--brij-danger); }
.alert-warning { border-left-color: var(--brij-warning); }
.alert-info    { border-left-color: var(--brij-info); }

/* ---- 11. BADGES — consistent capsule pill across status / chip uses ---- */
.badge {
    font-size: var(--fs-xs);
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .3px;
}

/* ---- 12. TEXT UTILITY OVERRIDES — Bootstrap's text-muted is too light grey ---- */
.text-muted { color: var(--brij-muted) !important; }
.small, small { font-size: var(--fs-sm); }
strong, b, .fw-bold, .fw-semibold { color: inherit; }

/* ---- 13. CHECKBOX + RADIO — same look across all forms ---- */
.form-check-input {
    width: 16px; height: 16px;
    margin-top: 3px;
    border: 1px solid #b9c0c8;
    border-radius: 3px;
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--brij-primary);
    border-color: var(--brij-primary);
}
.form-check-label {
    font-size: var(--fs-md);
    color: var(--brij-text);
    padding-left: 4px;
    cursor: pointer;
    line-height: 1.5;
}

/* ---- 14. CONTAINER / MAIN — consistent page padding everywhere ---- */
main.container-fluid {
    padding: 14px 18px;
}
@media (max-width: 768px) {
    main.container-fluid { padding: 10px 12px; }
}

/* ---- 15. LINKS — body links use brand primary by default ----
   v2.36.58 — wrapped in :where() to give the rule ZERO specificity. Earlier
   `a:not(.btn):not(.nav-link)...` had specificity (0,8,1) which beat per-page
   styles like `.dl-filter-head .dl-quick a { color: white }` and made coloured
   pills inside coloured headers invisible (white-text-on-purple-bg pills got
   re-coloured to navy-on-purple = unreadable). :where() resets all that, so any
   page-specific colour wins by default, and only links that don't have one fall
   through to brand primary. */
:where(a:not(.btn):not(.nav-link):not(.dropdown-item):not(.kpi-tile):not(.stat-tile):not(.rep-card):not(.brij-card-link)) {
    color: var(--brij-primary);
    text-decoration: none;
}
:where(a:not(.btn):not(.nav-link):not(.dropdown-item):not(.kpi-tile):not(.stat-tile):not(.rep-card):not(.brij-card-link)):hover {
    color: var(--brij-primary-dark);
    text-decoration: underline;
}

/* ---- 16. HR — softer divider ---- */
hr { border-top: 1px solid var(--brij-border); margin: 12px 0; opacity: 1; }

/* ---- 17. CODE PILL — voucher numbers / batch IDs shown inline ---- */
code {
    font-size: var(--fs-sm);
    background: var(--brij-bg-soft);
    color: var(--brij-primary);
    padding: 1px 7px;
    border-radius: 4px;
    font-weight: 600;
}

/* ---- 18. PRINT — clean "Save as PDF" output for any page/report ---- */
@media print {
    .navbar, footer, .no-print, .brij-card-foot, .app-pager, .modal { display: none !important; }
    body { padding-top: 0 !important; background: #fff !important; }
    .brij-card, .card, .m-card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
    main.container-fluid { padding: 0 !important; }
}

/* ============================================================================
   ===============  PROFESSIONAL POLISH LAYER (v-pro, 2026)  ===================
   A single refinement pass layered last so it wins the cascade. Elevates the
   whole app: Inter typography, softer layered shadows, refined navbar / cards /
   forms / tables / KPI tiles / login, custom scrollbars and smooth motion.
   Brand identity (navy + gold) is preserved; only depth, spacing, type and
   micro-interaction are refined. Dark theme keeps its own !important rules.
   ============================================================================ */

:root {
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --shadow-md: 0 4px 10px -2px rgba(16,24,40,.10), 0 2px 6px -2px rgba(16,24,40,.06);
  --shadow-lg: 0 16px 32px -8px rgba(16,24,40,.16), 0 6px 12px -6px rgba(16,24,40,.08);
  --brij-border: #e7eaf0;
  --brij-bg-soft: #f6f8fb;
  --pro-ring: 0 0 0 3px rgba(31,58,95,.13);
  --pro-radius: 12px;
}

/* ---- Typography ---- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  color: #3a4355;
}
body.bg-body-tertiary { background-color: #eef1f6; }
h1, h2, h3, h4, h5, h6, .page-title, .brij-card-title, .modal-title { letter-spacing: -0.02em; }
h1.page-title { font-weight: 700; }
.text-muted { color: #7b8696 !important; }

/* ---- Top navbar: subtle depth + crisp brand ---- */
.brij-navbar {
  background: linear-gradient(177deg, #284a76 0%, var(--brij-primary) 70%, #1c3556 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 6px 22px -8px rgba(16,24,40,.45);
}
.brij-navbar .navbar-brand { letter-spacing: -0.03em; font-weight: 700; }
.brij-navbar .nav-link { border-radius: 8px; padding-top: .35rem; padding-bottom: .35rem; transition: background-color .15s, color .15s; }
.brij-navbar .nav-link:hover { background: rgba(255,255,255,.10); }
.brij-navbar .nav-link.active { background: rgba(255,255,255,.12); border-bottom-color: var(--brij-accent); }
.dropdown-menu { border: 1px solid var(--brij-border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; }
.dropdown-item { border-radius: 8px; }

/* ---- Cards ---- */
.brij-card, .card {
  border: 1px solid var(--brij-border);
  border-radius: var(--pro-radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.brij-card:hover { box-shadow: var(--shadow-md); border-color: #dde2ea; }
.brij-card-head { border-radius: var(--pro-radius) var(--pro-radius) 0 0; letter-spacing: -0.01em; }
.brij-card-foot { border-radius: 0 0 var(--pro-radius) var(--pro-radius); }
.m-card { border: 1px solid var(--brij-border); border-radius: var(--pro-radius); box-shadow: var(--shadow-sm); }

/* ---- Buttons ---- */
.btn { font-weight: 500; letter-spacing: 0; border-radius: 9px; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .06s; }
.btn:active { transform: translateY(.5px); }
.btn-primary { background: linear-gradient(180deg, #294a73, var(--brij-primary)); border-color: var(--brij-primary-dark); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(180deg, #20395b, var(--brij-primary-dark)); border-color: var(--brij-primary-dark); }
.btn-lg { border-radius: 11px; }
.btn-sm { border-radius: 7px; }

/* ---- Form controls ---- */
.form-control, .form-select, input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
input[type="date"], input[type="search"], input[type="password"], textarea, select {
  border-radius: 9px;
  border-color: #d8dee8;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus { box-shadow: var(--pro-ring); border-color: var(--brij-primary); }
.form-label { color: #6a7689; }
.input-group-text { border-radius: 9px; }

/* ---- Tables / grids ---- */
.brij-grid thead th, .table thead th { background: #f4f6f9; color: #5b6678; letter-spacing: .5px; }
.brij-grid tbody tr:hover, .table-hover tbody tr:hover { background: #f5f8fc; }
.brij-grid tbody tr:hover td { box-shadow: inset 3px 0 0 var(--brij-accent); }

/* ---- KPI / stat tiles: premium ---- */
.stat-tile {
  border: 1px solid var(--brij-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 1.15rem 1.25rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #d7deea; }
.stat-tile .stat-num { letter-spacing: -0.035em; font-weight: 700; }
.stat-tile .stat-lbl { color: #7b8696; font-weight: 500; }
.stat-tile .stat-icon { opacity: .28; }

/* ---- Status pills / badges ---- */
.status-pill, .badge { letter-spacing: .3px; border-radius: 999px; }

/* ---- Modals ---- */
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(15,35,65,.32); }
.modal-header { border-radius: 16px 16px 0 0; }

/* ---- Login: premium ---- */
.login-container {
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(212,169,70,.18), transparent 60%),
    linear-gradient(135deg, #213d63 0%, var(--brij-primary) 45%, #122440 100%);
}
.login-card {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 30px 70px -20px rgba(8,18,38,.55), 0 8px 24px -12px rgba(8,18,38,.35);
  backdrop-filter: saturate(1.1);
}
.login-card .brand-icon { filter: drop-shadow(0 4px 10px rgba(212,169,70,.35)); }
.login-card h1 { font-weight: 700; letter-spacing: -0.025em; }

/* ---- Custom scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: #c4ccd9 transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4ccd9; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #aab4c4; background-clip: content-box; }

/* ---- Toasts ---- */
.toast { border-radius: 11px; box-shadow: var(--shadow-lg); }

/* ---- Typeahead stacking: the card/wrapper hosting a search dropdown forms its
   own stacking context so the suggestion list always paints ABOVE the following
   cards, never behind them (fixes "search list shows in the background"). ---- */
.brij-card:has(.pos-sugg), .brij-card:has(#pcSugg), .brij-card:has(#aSugg),
.brij-card:has(#tSugg), .brij-card:has(.cur-sugg), .m-card:has(.cur-sugg) {
  position: relative;
  z-index: 20;
}
.pos-sugg, .cur-sugg, #pcSugg, #aSugg, #tSugg, #csugg { z-index: 1200; }

/* ---- Footer ---- */
footer { color: #98a2b3 !important; }

/* ---- Honour reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .stat-tile, .btn, .brij-card { transition: none !important; }
  .stat-tile:hover, .btn:active { transform: none !important; }
}

/* ============================================================================
   SIDEBAR LAYOUT + PRO VISUAL UPGRADE  (2026 redesign)
   Replaces the fixed-top navbar with a professional left sidebar.
   All existing CSS rules are preserved above; this section only adds/overrides.
   ============================================================================ */

/* ── Reset body padding (was for fixed-top navbar) ── */
body { padding-top: 0 !important; }

/* ── App shell ──────────────────────────────────────────────────── */
.brij-app {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.brij-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #17293f 0%, #1e3654 55%, #172c47 100%);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 1040;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform .26s cubic-bezier(.4,0,.2,1), width .2s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.brij-sidebar::-webkit-scrollbar { width: 3px; }
.brij-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* Brand strip */
.sb-brand {
  padding: 0 14px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s;
}
.sb-brand:hover { background: rgba(255,255,255,.05); text-decoration: none; }
.sb-brand-icon { font-size: 1.15rem; color: var(--brij-accent); flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(212,169,70,.4)); }
.sb-brand-name { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* Nav */
.sb-nav { flex: 1; padding: 6px 0 16px; }

.sb-section-head {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(255,255,255,.28);
  padding: 16px 14px 3px;
}

.sb-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px 7px 14px;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 9px;
  margin: 1px 6px;
  transition: background-color .14s, color .14s, transform .1s;
  line-height: 1.25;
  position: relative;
}
.sb-link:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; transform: translateX(2px); }
.sb-link.active {
  background: linear-gradient(135deg, rgba(212,169,70,.22) 0%, rgba(212,169,70,.1) 100%);
  color: #e9c870;
  font-weight: 600;
}
.sb-link.active::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--brij-accent);
  border-radius: 0 3px 3px 0;
}
.sb-link i { font-size: 14px; flex-shrink: 0; width: 16px; text-align: center; opacity: .75; }
.sb-link:hover i { opacity: 1; }
.sb-link.active i { color: var(--brij-accent); opacity: 1; }

/* Sidebar footer */
.sb-foot { padding: 10px 14px 14px; border-top: 1px solid rgba(255,255,255,.07); flex-shrink: 0; }
.sb-foot-user { color: rgba(255,255,255,.75); font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-foot-role { font-size: 10px; color: rgba(255,255,255,.32); margin-top: 2px; text-transform: uppercase; letter-spacing: .5px; }

/* ── Main wrapper ─────────────────────────────────────────────────── */
.brij-main {
  flex: 1;
  margin-left: 220px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #eef1f6;
  /* Flex items default to min-width:auto, so any wide table's min-content
     width propagates up and stretches the whole shell past the viewport on
     phones. min-width:0 lets the main pane shrink; inner .brij-grid-scroll
     containers then do the sideways scrolling as intended. */
  min-width: 0;
}

/* ── Topbar ──────────────────────────────────────────────────────── */
.brij-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(231,234,240,.9);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 2px 8px -4px rgba(16,24,40,.08);
  flex-shrink: 0;
}

/* Hamburger toggle (mobile only) */
.topbar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--brij-border);
  background: transparent;
  color: #5b6678;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: background .14s;
}
.topbar-toggle:hover { background: var(--brij-bg-soft); }

/* Avatar circle for user button */
.topbar-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brij-primary), #3a6090);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

/* Topbar button styles */
.btn-topbar {
  background: transparent;
  border: 1px solid var(--brij-border);
  color: #4a5568;
  border-radius: 8px;
  font-size: 12.5px;
  padding: 5px 10px;
  height: 34px;
  font-weight: 500;
  transition: background .14s, border-color .14s;
}
.btn-topbar:hover { background: var(--brij-bg-soft); border-color: #c8d0da; color: var(--brij-primary); }
.btn-topbar.show { background: var(--brij-bg-soft); }
.btn-topbar-icon {
  background: transparent;
  border: 1px solid var(--brij-border);
  color: #6a7689;
  border-radius: 8px;
  width: 34px; height: 34px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  transition: background .14s, border-color .14s;
}
.btn-topbar-icon:hover { background: var(--brij-bg-soft); color: var(--brij-primary); border-color: #c8d0da; }
.btn-topbar-icon::after { display: none; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* ── Page content ──────────────────────────────────────────────────── */
.brij-content {
  flex: 1;
  padding: 18px 22px;
  background-image: radial-gradient(circle, #d0d7e3 1px, transparent 1px);
  background-size: 22px 22px;
  background-color: #eef1f6;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.brij-footer {
  border-top: 1px solid var(--brij-border);
  padding: 8px 22px;
  text-align: center;
  color: #98a2b3;
  font-size: 11px;
  background: #fff;
  flex-shrink: 0;
}

/* ── Sidebar overlay (mobile) ─────────────────────────────────────── */
.sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,20,40,.5);
  z-index: 1039;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sb-overlay.show { display: block; }

/* ── Mobile responsive ────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .brij-sidebar { transform: translateX(-100%); box-shadow: none; }
  .brij-sidebar.sb-open { transform: translateX(0); box-shadow: 8px 0 32px rgba(0,0,0,.2); }
  .brij-main { margin-left: 0; }
  .topbar-toggle { display: flex; }
  .brij-content { padding: 12px 14px; }
}

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
  .brij-sidebar, .brij-topbar, .brij-footer, .sb-overlay,
  .no-print, .brij-pager, .app-pager, .brij-actions { display: none !important; }
  .brij-main { margin-left: 0 !important; }
  .brij-content { padding: 0 !important; background: #fff !important; }
  body { font-size: 10pt !important; }
  .page-title { font-size: 14pt !important; margin-bottom: 6px !important; }
  .brij-grid td, .brij-grid th { padding: 2px 5px !important; font-size: 9pt !important; line-height: 1.3 !important; }
  .brij-grid-scroll { overflow: visible !important; max-height: none !important; }
  .brij-card { box-shadow: none !important; border: 1px solid #ccc !important; margin-bottom: 8px !important; break-inside: auto !important; page-break-inside: auto !important; }
  .brij-card-head { background: #1f3a5f !important; color: #fff !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; padding: 6px 10px !important; }
  .stat-tile { box-shadow: none !important; padding: 8px !important; border: 1px solid #ccc !important; }
  .row { margin-bottom: 4px !important; }
}

/* ── Dark theme overrides ─────────────────────────────────────────── */
body[data-theme="dark"] .brij-topbar { background: rgba(37,40,44,.96); border-color: #3a3d42; }
body[data-theme="dark"] .brij-content { background-color: #1a1d20; background-image: radial-gradient(circle, #2a2d32 1px, transparent 1px); }
body[data-theme="dark"] .brij-main { background: #1a1d20; }
body[data-theme="dark"] .brij-footer { background: #25282c; border-color: #3a3d42; }
body[data-theme="dark"] .btn-topbar, body[data-theme="dark"] .btn-topbar-icon { border-color: #3a3d42; color: #bdc3cc; }
body[data-theme="dark"] .btn-topbar:hover, body[data-theme="dark"] .btn-topbar-icon:hover { background: #2f3338; }

/* ── Enhanced visual polish ────────────────────────────────────────── */

/* Better page titles with subtle left accent */
h1.page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--brij-border);
}
h1.page-title i {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--brij-primary), #3a6090);
  color: #fff;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(31,58,95,.25);
}

/* Enhanced stat tiles */
.stat-tile {
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
  background: #fff;
  border: 1px solid var(--brij-border);
  box-shadow: 0 1px 4px rgba(16,24,40,.06);
  position: relative;
  overflow: hidden;
}
.stat-tile::after {
  content: '';
  position: absolute;
  right: -10px; top: -10px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: currentColor;
  opacity: .04;
}
.stat-tile .stat-num { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.04em; }
.stat-tile .stat-icon { font-size: 1.6rem; opacity: .22; }
.stat-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16,24,40,.12); border-color: #d4daea; }

/* Card header refinements */
.brij-card-head {
  background: linear-gradient(135deg, var(--brij-primary) 0%, #2e5080 100%);
  padding: 9px 16px;
}

/* ── Uniform card headers ────────────────────────────────────────────
   One calm, consistent header colour on EVERY card across the app. The
   codebase had two overlapping sets of "hue modifiers" (legacy gold/red/
   green/teal + newer success/danger/warning/info/accent) sprinkled per
   page, which made forms look scattered. Collapse them all to the theme
   default so no form shows a random red/orange/purple header. */
.brij-card-head.gold, .brij-card-head.purple, .brij-card-head.red,
.brij-card-head.green, .brij-card-head.teal, .brij-card-head.warn,
.brij-card-head.warning, .brij-card-head.danger, .brij-card-head.info,
.brij-card-head.accent, .brij-card-head.success, .brij-card-head.primary {
  background: linear-gradient(135deg, var(--brij-primary) 0%, #2e5080 100%);
}

/* Brij grid hover accent — gold instead of navy for boutique feel */
.brij-grid tbody tr:hover td { box-shadow: inset 3px 0 0 var(--brij-accent); }

/* Better filter bars */
.filter-bar {
  background: #fff;
  border: 1px solid var(--brij-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

/* Smoother toast */
.toast { animation: slideInRight .3s ease; }
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}

/* Card entrance animation on load */
.brij-card { animation: fadeUp .25s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.brij-card:nth-child(2) { animation-delay: .04s; }
.brij-card:nth-child(3) { animation-delay: .08s; }
.brij-card:nth-child(4) { animation-delay: .12s; }

/* POS / invoice total row */
.pos-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px dashed #eee;
}
.pos-total-row:last-child { border-bottom: 0; }
.pos-grand { font-size: 1.1rem; font-weight: 800; color: var(--brij-primary); letter-spacing: -0.02em; }

/* POS search suggestion dropdown */
.pos-sugg {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--brij-border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(16,24,40,.14);
  display: none;
  z-index: 9999;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 4px;
}
.pos-sugg .it {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid #f4f6f9;
  transition: background .1s;
}
.pos-sugg .it:last-child { border-bottom: 0; }
.pos-sugg .it:hover, .pos-sugg .it.sel { background: #f0f4f8; }
.pos-sugg .it.sel { background: rgba(31,58,95,.07); }

/* Keyboard-highlighted suggestion in the shared purchase-cart / adjustment /
   transfer search dropdowns (arrow-key nav). Gold left-accent, matching Stock In. */
#pcSugg .it.sel, #aSugg .it.sel, #tSugg .it.sel {
  background: var(--brij-bg-soft);
  box-shadow: inset 3px 0 0 var(--brij-accent);
}

/* ============================================================
   COLLAPSIBLE SIDEBAR SECTIONS
   Site.master JS wraps each section's links in .sb-section-body and
   makes .sb-section-head a toggle. Collapsed state persists per user.
   ============================================================ */
.sb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  padding-right: 12px;
  transition: color .14s;
}
.sb-section-head:hover { color: rgba(255,255,255,.6); }
.sb-chev {
  font-size: 9px;
  opacity: .5;
  transition: transform .18s ease;
}
.sb-section-head.sb-collapsed .sb-chev { transform: rotate(-90deg); }
.sb-section-body {
  overflow: hidden;
  max-height: 800px;
  transition: max-height .22s ease;
}
.sb-section-body.sb-collapsed { max-height: 0; }

/* ============================================================
   MOBILE-FIRST PRO LAYER
   Global rules so every page fits a 375px phone AND stays clean
   on desktop. Tables scroll sideways inside their card, forms
   stack, headers wrap, touch targets grow.
   ============================================================ */

/* Tables: always allow horizontal scroll inside the wrapper (all screens) */
.brij-grid-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Any bare bootstrap .table inside a card body scrolls too */
.brij-card-body.flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px) {

  /* ── Type scale — ~20% smaller than desktop for phones ── */
  body { font-size: 11.5px; }
  h1.page-title { font-size: 0.88rem; margin-bottom: 8px; padding-bottom: 7px; }
  h1.page-title i { width: 24px; height: 24px; font-size: 0.68rem; }
  .brij-card-head { font-size: 11px; }
  .brij-card-head .brij-card-title { font-size: 11.5px; }
  .brij-card-count { font-size: 10px; }
  .sb-link { font-size: 11.5px; padding: 6px 10px 6px 13px; }
  .sb-section-head { font-size: 8.5px; }
  .btn-topbar { font-size: 11px; height: 30px; padding: 4px 8px; }
  .btn-topbar-icon { width: 30px; height: 30px; font-size: 13px; }
  .topbar-avatar { width: 22px; height: 22px; font-size: 10px; }
  .dropdown-menu { font-size: 11.5px; }
  .dropdown-item { font-size: 11.5px; }

  /* ── Content breathing room ── */
  .brij-content { padding: 10px 10px 24px; }
  .brij-card-body { padding: 10px; }
  .brij-card-head { padding: 7px 11px; }

  /* ── Tables: keep columns readable, scroll sideways ── */
  .brij-grid th, .brij-grid td { white-space: nowrap; padding: 4px 7px; }
  .brij-grid th { font-size: 9.5px; }
  .brij-grid td { font-size: 11px; }
  .brij-grid-scroll { max-height: none; }
  .table-responsive, .brij-grid-scroll { border-radius: 0 0 10px 10px; }

  /* ── Forms: compact 20%-smaller controls (13px keeps Android crisp;
     NOTE: below 16px iOS Safari zooms on focus — accepted per user ask).
     Selector list mirrors the desktop form-control block (site.css §1)
     so the attribute selectors don't out-rank this mobile override. */
  .form-control, .form-select, .vp-form-ctrl, .sf-form-ctrl,
  input[type="text"], input[type="number"], input[type="email"],
  input[type="tel"], input[type="date"], input[type="search"],
  input[type="password"], textarea, select {
    font-size: 13px;
    min-height: 34px;
    padding: 5px 9px;
  }
  .form-label { font-size: 10px; margin-bottom: 2px; }
  .btn { font-size: 12px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm, .brij-actions a, .brij-actions .btn { font-size: 11px; min-height: 27px; }

  /* ── Header/filter/button rows wrap instead of overflowing ── */
  .d-flex { flex-wrap: wrap; }
  .brij-topbar .d-flex, .sf-qty, .input-group, .btn-group, .pagination { flex-wrap: nowrap; }

  /* Voucher type tabs: wrap + tighter so all 4 fit a phone */
  .ve-type { flex-wrap: wrap; }
  .ve-type label { padding: 6px 10px; font-size: 12px; }

  /* ── Topbar: compact, company name truncates ── */
  .brij-topbar { padding: 0 10px; gap: 6px; }
  .btn-topbar { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { gap: 4px; }

  /* ── Stat tiles: 2-up grid feel, 20%-smaller type ── */
  .stat-tile { padding: .7rem .8rem; }
  .stat-tile .stat-num { font-size: 1rem; }
  .stat-tile .stat-lbl { font-size: .6rem; }
  .stat-tile .stat-icon { font-size: 1.1rem; }

  /* ── Modals: use the full screen width ── */
  .modal-dialog { margin: 8px; max-width: none; }

  /* ── Pagers ── */
  .app-pager, .brij-pager { flex-wrap: wrap; gap: 4px; }

  /* ── Dropdown menus stay on screen ── */
  .dropdown-menu { max-width: calc(100vw - 24px); }

  /* ── Voucher entry table: sane minimum, scrolls in card ── */
  .ve-tbl { min-width: 560px; }
  .brij-card-body:has(.ve-tbl) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Footer ── */
  .brij-footer { padding: 8px 10px; font-size: 10px; }

  /* ── Roles permission search row wraps ── */
  .rp-search { flex-wrap: wrap; }
  .rp-search .form-control { min-width: 180px; }
}

/* Card footers wrap on every screen (long button rows) */
.brij-card-foot { flex-wrap: wrap; row-gap: 6px; }

/* Small phones: tighten further */
@media (max-width: 399.98px) {
  .brij-content { padding: 8px 6px 20px; }
  .btn-topbar { max-width: 110px; }
}

/* Tablet: comfortable middle ground */
@media (min-width: 768px) and (max-width: 991.98px) {
  .brij-content { padding: 14px 16px; }
}