/* =====================================================================
   StitchSuite — Design tokens
   Palette: ink navy + brass/gold thread accent on a soft bone background,
   evoking a tailor's workroom (chalk, thread spools, measuring tape)
   without being literal or decorative.
   ===================================================================== */
:root{
  --navy:        #16213E;
  --navy-2:      #1E2C52;
  --navy-soft:   #2A3B66;
  --gold:        #C69A3D;
  --gold-dark:   #A87F2C;
  --bone:        #F6F4EF;
  --panel:       #FFFFFF;
  --ink:         #1C2333;
  --muted:       #707486;
  --border:      #E7E3D8;
  --success:     #2E7D5B;
  --success-bg:  #E7F5EE;
  --danger:      #C0392B;
  --danger-bg:   #FBEAE8;
  --warning:     #B8860B;
  --warning-bg:  #FBF3DF;
  --info:        #2E6E9E;
  --info-bg:     #E8F1F9;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 2px 10px rgba(22,33,62,0.06);
  --shadow-md:   0 8px 24px rgba(22,33,62,0.10);
}

*{ box-sizing:border-box; }

/* html is the single designated scroll root — body must NOT also get a
   fixed height + non-visible overflow, or it becomes its own independent
   nested scroll container and the page silently stops scrolling at all
   (a real regression: two elements both claiming height:100% plus
   overflow-x:hidden fight each other for who owns the page scroll). */
html{
  height:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body{
  min-height:100%;
  max-width:100%;
  background:var(--bone);
  color:var(--ink);
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,sans-serif;
  font-optical-sizing:auto;
}

body{
  font-size:15px; font-weight:500;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

a, button, .btn, .nav-link, [role="button"]{ -webkit-tap-highlight-color:transparent; }
button, .btn{ touch-action:manipulation; }

h1,h2,h3,h4,h5,h6{ font-weight:800; letter-spacing:-0.01em; color:var(--navy); }
.fw-800{ font-weight:800 !important; }
.fw-700{ font-weight:700 !important; }
.text-muted-2{ color:var(--muted) !important; }
.text-gold{ color:var(--gold-dark) !important; }
a{ text-decoration:none; }

/* ---------------------------------------------------------------
   Auth screens (login / register)
   --------------------------------------------------------------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(180deg, rgba(22,33,62,.97), rgba(30,44,82,.97)),
    repeating-linear-gradient(135deg, rgba(198,154,61,.10) 0 2px, transparent 2px 26px);
  padding:24px;
}
.auth-card{
  width:100%; max-width:960px;
  background:var(--panel);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  display:grid;
  grid-template-columns:1fr 1fr;
}
.auth-stack{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  width:100%; max-width:960px;
}
.demo-card{
  width:100%;
  background:var(--panel);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}
.demo-card-header{
  padding:12px 18px; font-weight:800; color:var(--navy);
  border-bottom:1px solid var(--border); background:var(--bone);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px;
  border-top-left-radius:16px; border-top-right-radius:16px;
}
.demo-card .table-responsive{ border-radius:0 0 16px 16px; }
.demo-table thead th{ font-size:11px; white-space:nowrap; }
.demo-table td{ white-space:nowrap; }
.demo-row{ cursor:pointer; }
.demo-row:hover{ background:#faf8f3; }
.auth-side{
  background:var(--navy);
  color:#fff;
  padding:48px 40px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.auth-side::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 85% 12%, rgba(198,154,61,.20), transparent 45%);
  pointer-events:none;
}
.auth-brand{ display:flex; align-items:center; gap:12px; font-size:22px; font-weight:800; }
.auth-brand .bi{ color:var(--gold); font-size:26px; }
.auth-logo-chip{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border-radius:12px; padding:6px 10px; flex-shrink:0;
}
.auth-logo-chip img{ height:30px; max-width:150px; object-fit:contain; display:block; }
.tape-rule{
  height:6px; border-radius:4px; width:64px; margin:18px 0;
  background:repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 14px);
}
.auth-feature-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; position:relative;
}
.auth-feature{
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  border-radius:12px; padding:12px;
}
.auth-feature .bi{ color:var(--gold); font-size:18px; margin-top:1px; flex-shrink:0; }
.auth-feature b{ display:block; color:#fff; font-size:13px; font-weight:800; }
.auth-feature span{ display:block; color:#a9b0cc; font-size:11.5px; margin-top:1px; }
.auth-form{ padding:48px 44px; position:relative; }
.auth-form-mobile-brand{ display:none; }
.input-icon-group{ position:relative; }
.input-icon-group .bi{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:15px; pointer-events:none;
}
.input-icon-group .form-control{ padding-left:40px; }
@media (max-width:820px){
  .auth-card{ grid-template-columns:1fr; }
  .auth-side{ display:none; }
  .auth-form-mobile-brand{
    display:flex; align-items:center; gap:10px; margin-bottom:22px; padding-bottom:20px;
    border-bottom:1px solid var(--border);
  }
  .auth-form-mobile-brand .bi{ color:var(--gold-dark); font-size:22px; }
  .auth-form-mobile-brand .auth-logo-chip{ background:var(--bone); border:1px solid var(--border); }
  .auth-form-mobile-brand span{ font-weight:800; font-size:17px; color:var(--navy); }
}

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

.sidebar{
  width:250px; flex-shrink:0;
  background:var(--navy);
  color:#dfe3ee;
  display:flex; flex-direction:column;
  position:fixed; top:0; bottom:0; left:0;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  z-index:1050;
  -webkit-overflow-scrolling:touch;
  padding-top:env(safe-area-inset-top, 0);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding:20px 20px 14px;
  color:#fff; font-weight:800; font-size:19px;
}
.sidebar-brand .bi{ color:var(--gold); font-size:22px; }
.sidebar-brand-logo{
  height:32px; max-width:150px; width:auto; object-fit:contain;
  border-radius:6px; background:#fff; padding:3px 5px;
}
.sidebar-brand-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-scroll{ overflow-y:auto; flex:1; padding:6px 12px 20px; -webkit-overflow-scrolling:touch; }
.sidebar .nav-section{
  text-transform:uppercase; font-size:11px; letter-spacing:.08em;
  color:#8992ad; font-weight:700; margin:16px 10px 6px;
}
.sidebar .nav-link{
  display:flex; align-items:center; gap:12px;
  color:#c7cce0; padding:10px 12px; border-radius:var(--radius-sm);
  font-weight:600; font-size:14.5px; margin-bottom:2px;
  -webkit-tap-highlight-color:transparent;
}
.sidebar .nav-link .bi{ font-size:17px; width:18px; text-align:center; color:#9aa2c2; }
.sidebar .nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar .nav-link:active{ background:rgba(255,255,255,.1); }
.sidebar .nav-link.active{ background:var(--gold); color:var(--navy); }
.sidebar .nav-link.active .bi{ color:var(--navy); }
.sidebar .nav-link-danger .bi{ color:#e6828c; }
.sidebar .nav-link-danger:hover{ background:rgba(220,53,69,.15); }
.sidebar .nav-link-danger.active{ background:#dc3545; color:#fff; }
.sidebar .nav-link-danger.active .bi{ color:#fff; }
.sidebar-foot{ padding:14px 20px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#7c85a6; }

/* Real backdrop for the mobile drawer — intercepts taps to content
   behind it (unlike the old box-shadow trick) and fades in/out. */
.sidebar-backdrop{
  position:fixed; inset:0; background:rgba(10,14,26,.55);
  z-index:1040; opacity:0; visibility:hidden;
  transition:opacity .28s ease, visibility .28s ease;
}
.sidebar-backdrop.show{ opacity:1; visibility:visible; }
body.sidebar-locked{ overflow:hidden; }

.main{ margin-left:250px; flex:1; min-width:0; display:flex; flex-direction:column; min-height:100vh; }

.topbar{
  height:64px; background:var(--panel); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; position:sticky; top:0; z-index:1020;
  padding-top:env(safe-area-inset-top, 0);
}
.topbar .page-title{
  font-weight:800; font-size:19px; color:var(--navy);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.burger{
  display:none; background:none; border:0; font-size:22px; color:var(--navy);
  width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:10px; flex-shrink:0; -webkit-tap-highlight-color:transparent;
}
.burger:active{ background:var(--bone); }
.branch-pill{
  background:var(--bone); border:1px solid var(--border); border-radius:999px;
  padding:6px 14px; font-size:13px; font-weight:700; color:var(--navy);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:180px;
}

/* Connection status badge (topbar) */
.conn-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bone); border:1px solid var(--border); border-radius:999px;
  padding:6px 12px; font-size:12.5px; font-weight:700; color:var(--navy);
  white-space:nowrap;
}
.conn-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.conn-dot.conn-online{ background:var(--success); box-shadow:0 0 0 3px var(--success-bg); }
.conn-dot.conn-offline{ background:var(--danger); box-shadow:0 0 0 3px var(--danger-bg); }
.conn-badge-offline{ background:var(--danger-bg); border-color:#f2c2c2; color:var(--danger); }
.conn-sync-btn{
  border:0; background:var(--gold); color:var(--navy); font-weight:800; font-size:11px;
  padding:4px 10px; border-radius:999px; margin-left:4px; cursor:pointer; min-height:26px;
}
.conn-sync-btn:hover{ background:var(--gold-dark); color:#fff; }
.conn-sync-btn:disabled{ opacity:.6; cursor:default; }
.user-menu img, .user-avatar{
  width:36px; height:36px; border-radius:50%; background:var(--gold);
  color:var(--navy); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; flex-shrink:0;
}

.content{ padding:24px; flex:1; }

/* ---------------------------------------------------------------
   Mobile (<=960px): drawer sidebar + native-app touches throughout
   --------------------------------------------------------------- */
@media (max-width:960px){
  .sidebar{ transform:translateX(-100%); box-shadow:0 0 50px rgba(0,0,0,.35); width:82vw; max-width:300px; }
  .sidebar.open{ transform:translateX(0); }
  .main{ margin-left:0; }
  .burger{ display:inline-flex; }

  /* Search/filter bars across list pages (customers, products, invoices,
     orders, users...) hard-code pixel widths on their inputs for a clean
     desktop layout — e.g. style="width:220px". Those don't shrink on
     their own, so on mobile they were forcing the whole page wider than
     the viewport. Let them go full-width and stack instead. */
  form.d-flex{ flex-wrap:wrap; }
  .form-control[style*="width:"], .form-select[style*="width:"]{
    width:100% !important;
    max-width:100%;
  }

  /* Header rows like "avatar + name + ms-auto action button" (customer
     profile, etc.) push their button off-screen on mobile without this —
     same root cause as the stat-card fix above, just a different shape.
     Scoped via :has() so only rows that actually contain an .ms-auto
     button are affected. */
  .d-flex.align-items-center:has(> .ms-auto){ flex-wrap:wrap; }
  .d-flex.align-items-center > a.ms-auto, .d-flex.align-items-center > .btn.ms-auto{
    margin-left:0 !important;
    width:100%;
    justify-content:center;
    order:99;
  }

  .topbar{ padding:0 10px; height:56px; gap:8px; }
  .topbar .page-title{ font-size:16.5px; max-width:38vw; }
  .topbar > .d-flex{ gap:8px !important; }
  .content{ padding:14px; }

  .branch-pill{ max-width:110px; padding:5px 10px; font-size:11.5px; }
  .conn-badge{ padding:5px 8px; font-size:0; gap:0; }
  .conn-badge #connText{ display:none; }
  .conn-badge #connPending{ font-size:11px !important; }
  .conn-badge #connPending .conn-sync-btn{ font-size:10px; }
  .user-menu .d-none.d-md-block{ display:none !important; }
  .user-avatar{ width:34px; height:34px; font-size:13px; }

  /* Touch targets & inputs: 16px prevents iOS auto-zoom on focus */
  .btn{ min-height:40px; }
  .btn-sm{ min-height:34px; padding-top:6px; padding-bottom:6px; }
  .form-control, .form-select, textarea.form-control{ font-size:16px !important; min-height:42px; }
  .form-control-sm, select.form-select-sm{ font-size:14.5px !important; min-height:36px; }
  input[type=checkbox], input[type=radio]{ width:18px; height:18px; }
  .sidebar .nav-link{ padding:12px 12px; font-size:15px; min-height:44px; }

  /* Cards & stat grid */
  .stat-card{ padding:14px; gap:10px; }
  .stat-card .icon-badge{ width:38px; height:38px; font-size:17px; }
  .stat-card .stat-value{ font-size:19px; }
  .card-body{ padding:14px; }

  /* Tables: smoother momentum scroll, slightly tighter text */
  .table-responsive{ -webkit-overflow-scrolling:touch; }
  .table td, .table th{ font-size:13.5px; }

  /* Modals feel closer to a native sheet: less side margin, rounded, capped height */
  .modal-dialog{ margin:10px; }
  .modal-content{ border-radius:16px; }
  .modal-body{ max-height:70vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
}

@media (max-width:480px){
  .content{ padding:12px; }
  .topbar{ padding:0 8px; }
  .topbar > .d-flex{ gap:6px !important; }
  .topbar .page-title{ max-width:26vw; font-size:14.5px; }
  .card-body{ padding:12px; }
  .branch-pill{ max-width:84px; padding:5px 8px; font-size:11px; }
  .conn-badge{ padding:4px 6px; }
  .user-avatar{ width:30px; height:30px; font-size:12px; }

  /* Stat cards: stack to one per row below 480px so long labels like
     "Outstanding Receivables" have room to breathe instead of wrapping
     into a tall, cramped column. Scoped to stat-card grids only (via
     :has), so other legitimate 2-column layouts (e.g. form fields)
     aren't forced to stack unnecessarily. */
  .row.g-3 > div:has(> .stat-card){ flex:0 0 100%; max-width:100%; }
  .stat-card{ padding:14px 16px; }
  .stat-card .stat-value{ font-size:21px; }
  .stat-card .stat-label{ font-size:11.5px; letter-spacing:.02em; }
}

/* ---------------------------------------------------------------
   Cards / components
   --------------------------------------------------------------- */
.card{ border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-header{ background:transparent; border-bottom:1px solid var(--border); font-weight:800; color:var(--navy); }

.stat-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.stat-card .icon-badge{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.stat-card > div:last-child{ min-width:0; flex:1; }
.stat-card .stat-value{ font-size:24px; font-weight:800; color:var(--navy); line-height:1.1; overflow-wrap:break-word; }
.stat-card .stat-label{ font-size:12.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; overflow-wrap:break-word; }

.bg-navy{ background:var(--navy) !important; color:#fff; }
.bg-gold-soft{ background:#FBF3DF !important; color:var(--gold-dark) !important; }
.bg-gold{ background:var(--gold) !important; }
.bg-success-soft{ background:var(--success-bg) !important; color:var(--success) !important; }
.bg-danger-soft{ background:var(--danger-bg) !important; color:var(--danger) !important; }
.bg-info-soft{ background:var(--info-bg) !important; color:var(--info) !important; }
.bg-warning-soft{ background:var(--warning-bg) !important; color:var(--warning) !important; }
.bg-secondary-soft{ background:#eef0f4 !important; color:#5b6072 !important; }
.bg-primary-soft{ background:#e7ecfb !important; color:#3448a8 !important; }
.bg-dark-soft{ background:#e7e8ec !important; color:#232838 !important; }

/* Fabric-tag style badges (used for order status / stock status) */
.tag-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:700;
}

/* ---------------------------------------------------------------
   Billing toolbar (New Invoice screen)
   --------------------------------------------------------------- */
.billing-toolbar{
  display:flex; align-items:stretch; gap:8px; flex-wrap:wrap;
}
.bt-field{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:0 10px; height:42px;
}
.bt-field.bt-grow{ flex:1 1 320px; }
.bt-field > i{ color:var(--gold-dark); font-size:15px; }
.bt-field input, .bt-field select{
  border:0; outline:none; flex:1; height:100%; font-weight:600; font-size:14px; background:transparent;
}

/* ---------------------------------------------------------------
   Invoice "document" — the itemized billing table
   --------------------------------------------------------------- */
.invoice-doc{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.invoice-doc-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:14px 16px; border-bottom:2px dashed var(--border);
}
.item-search-input{
  width:100%; border:0; outline:none; padding:12px 16px; font-weight:700; font-size:14.5px;
}
.item-search-input:focus{ background:#fffdf6; }
.item-suggest{
  display:none; position:absolute; left:8px; right:8px; top:calc(100% - 2px);
  background:#fff; border:1px solid var(--border); border-radius:0 0 10px 10px;
  box-shadow:var(--shadow-md); max-height:320px; overflow-y:auto; z-index:60;
}
.item-suggest-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 14px; cursor:pointer; border-bottom:1px solid var(--border); font-size:13.5px;
}
.item-suggest-row:last-child{ border-bottom:0; }
.item-suggest-row:hover, .item-suggest-row.active{ background:var(--bone); }
.item-suggest-row.disabled{ opacity:.5; pointer-events:none; }
.item-suggest-empty{ padding:14px; text-align:center; color:var(--muted); font-size:13px; }

/* Shared billing-cart bits — used on Billing's New Invoice, Tailoring's
   New Size Invoice, and inline on Tailoring's New Order. Kept in one
   place so all three stay visually consistent. */
.item-search-wrap{ position:relative; }
#itemSearch{ font-size:16px; padding:14px 16px; }
.qty-box{ display:inline-flex; align-items:center; gap:6px; }
.qty-box button{ width:28px; height:28px; border:1px solid var(--border); background:#fff; border-radius:6px; font-weight:800; color:var(--navy); }
.qty-box button:hover{ background:var(--bone); }
.qty-box input{ width:48px; text-align:center; border:1px solid var(--border); border-radius:6px; padding:4px; }
.price-cell{ width:90px; text-align:right; border:1px solid var(--border); border-radius:6px; padding:4px 8px; }
.line-remove-btn{ border:0; background:none; color:var(--danger); padding:0; }
.totals-sticky{ position:sticky; top:84px; }
.suggest-add-custom{ background:var(--bone); }
.suggest-add-custom:hover{ background:#ece7db; }

.cust-result-row{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; cursor:pointer;
  border:1px solid var(--border); border-radius:8px; margin-bottom:6px;
}
.cust-result-row:hover{ background:var(--bone); border-color:var(--gold); }

.billing-table{ font-size:13.5px; }
.billing-table thead th{
  background:var(--bone); border-bottom:2px solid var(--border) !important;
  font-size:11px; padding:8px 10px;
}
.billing-table td{ padding:7px 10px; vertical-align:middle; border-color:#eee6; }
.billing-table tbody tr{ border-bottom:1px solid var(--border); }
.billing-table .qty-box{ width:96px; height:30px; }
.billing-table .qty-box input{ width:34px; border:0; text-align:center; font-weight:700; padding:0; }
.billing-table .qty-box button{ width:26px; height:28px; }
.price-cell{
  width:88px; text-align:right; border:1px solid var(--border); border-radius:6px;
  padding:4px 8px; font-weight:700; font-size:13px;
  transition:box-shadow .15s ease, border-color .15s ease;
}
/* Cue for a just-added line item waiting on its price — this is the
   moment focus lands here automatically instead of a prompt() popup. */
.price-cell.needs-price{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(198,154,61,.22); }
.kbd-hint{ font-size:11px; font-weight:700; letter-spacing:.02em; }

.btn{ font-weight:700; border-radius:var(--radius-sm); font-size:14.5px; }
.btn-gold{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
.btn-gold:hover{ background:var(--gold-dark); border-color:var(--gold-dark); color:#fff; }
.btn-navy{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-2); border-color:var(--navy-2); color:#fff; }
.btn-outline-navy{ border-color:var(--navy); color:var(--navy); }
.btn-outline-navy:hover{ background:var(--navy); color:#fff; }

.table thead th{
  text-transform:uppercase; font-size:11.5px; letter-spacing:.05em; color:var(--muted);
  border-bottom:2px solid var(--border); font-weight:800; white-space:nowrap;
}
.table td{ vertical-align:middle; font-size:14.5px; }
.table-hover tbody tr:hover{ background:#faf8f3; }

.form-label{ font-weight:700; font-size:13.5px; color:var(--navy); }
.form-control,.form-select{ border-radius:var(--radius-sm); border-color:var(--border); font-weight:600; font-size:14.5px; }
.form-control:focus,.form-select:focus{ border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(198,154,61,.18); }

/* Stitched divider */
.stitch-divider{
  border:0; height:0; border-top:2px dashed var(--border); margin:20px 0;
}

/* Order status timeline (tailoring) */
.status-track{ display:flex; align-items:center; }
.status-track .step{ flex:1; text-align:center; position:relative; }
.status-track .dot{
  width:30px; height:30px; border-radius:50%; background:#eee; color:#999;
  display:flex; align-items:center; justify-content:center; margin:0 auto 6px; font-size:14px;
  border:2px solid var(--border);
}
.status-track .step.done .dot{ background:var(--success); border-color:var(--success); color:#fff; }
.status-track .step.current .dot{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
.status-track .line{
  position:absolute; top:15px; left:-50%; width:100%; height:2px; background:var(--border); z-index:-1;
}
.status-track .step:first-child .line{ display:none; }
.status-track .step.done .line{ background:var(--success); }
.status-track small{ font-size:11px; color:var(--muted); font-weight:700; }

/* POS terminal */
.pos-grid{ display:grid; grid-template-columns:1fr 380px; gap:18px; align-items:start; }
@media (max-width:1100px){ .pos-grid{ grid-template-columns:1fr; } }
.product-tile{
  border:1px solid var(--border); border-radius:var(--radius); background:#fff; padding:14px;
  cursor:pointer; transition:.15s; height:100%;
}
.product-tile:hover{ border-color:var(--gold); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.product-tile .p-icon{
  width:100%; height:64px; border-radius:10px; background:var(--bone);
  display:flex; align-items:center; justify-content:center; color:var(--gold-dark); font-size:26px; margin-bottom:10px;
}
.product-tile .p-name{ font-weight:800; font-size:13.5px; color:var(--navy); line-height:1.25; }
.product-tile .p-price{ font-weight:700; color:var(--gold-dark); font-size:13px; }
.product-tile .p-stock{ font-size:11px; color:var(--muted); }

.cart-panel{ position:sticky; top:80px; }
.cart-line{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed var(--border); }
.cart-line .qty-box{ display:flex; align-items:center; border:1px solid var(--border); border-radius:8px; }
.cart-line .qty-box button{ border:0; background:none; width:26px; height:26px; font-weight:800; color:var(--navy); }
.cart-line .qty-box input{ width:34px; text-align:center; border:0; font-weight:700; }

/* Login/register helper text */
.hint{ font-size:12.5px; color:var(--muted); }

/* ---------------------------------------------------------------
   Branding module (Settings > Branding)
   --------------------------------------------------------------- */
.logo-preview-chip{
  background:var(--bone); border:1px solid var(--border); border-radius:10px;
  padding:8px; display:flex; align-items:center; justify-content:center;
  width:76px; height:56px; flex-shrink:0;
}
.logo-preview-chip img{ max-width:100%; max-height:100%; object-fit:contain; }
.color-input-group{ display:flex; align-items:center; gap:10px; }
.color-input-group input[type="color"]{
  width:44px; height:44px; padding:2px; border:1px solid var(--border); border-radius:8px;
  background:#fff; cursor:pointer; flex-shrink:0;
}
.color-input-group input[type="text"]{ font-family:monospace; font-weight:700; text-transform:uppercase; }

.brand-preview{ border-radius:0 0 var(--radius) var(--radius); overflow:hidden; }
.brand-preview-sidebar{ background:var(--navy); padding:16px 14px; }
.brand-preview-brand{
  display:flex; align-items:center; gap:8px; color:#fff; font-weight:800; font-size:14px; margin-bottom:12px;
}
.brand-preview-brand .bi{ color:var(--gold); font-size:17px; }
.brand-preview-brand img{ height:22px; max-width:100px; object-fit:contain; border-radius:4px; background:#fff; padding:2px 3px; }
.brand-preview-nav{ display:flex; flex-direction:column; gap:3px; }
.brand-preview-link{
  display:flex; align-items:center; gap:9px; color:#c7cce0; font-weight:600; font-size:12.5px;
  padding:7px 9px; border-radius:7px;
}
.brand-preview-link .bi{ font-size:13.5px; width:15px; text-align:center; color:#9aa2c2; }
.brand-preview-link.active{ background:var(--gold); color:var(--navy); }
.brand-preview-link.active .bi{ color:var(--navy); }
.brand-preview-main{ padding:16px 14px; background:var(--panel); border-top:1px solid var(--border); }

/* ---------------------------------------------------------------
   WhatsApp-style message bubble (campaign composer live preview)
   --------------------------------------------------------------- */
.wa-bubble{
  background:#fff; border-radius:8px; padding:6px; max-width:280px;
  box-shadow:0 1px 1px rgba(0,0,0,.1); position:relative;
}
.wa-bubble-img{ width:100%; border-radius:6px; display:block; margin-bottom:4px; max-height:180px; object-fit:cover; }
.wa-bubble-text{ font-size:13.5px; color:#111b21; white-space:pre-wrap; word-break:break-word; padding:2px 4px; }
.wa-bubble-meta{ text-align:right; font-size:10.5px; color:#8696a0; padding:0 4px; margin-top:2px; }


/* Print invoice */
@media print{
  .no-print{ display:none !important; }
  .print-only{ display:block !important; }
  body{ background:#fff; }
  /* Belt-and-braces: modals must never appear in print output even if
     Bootstrap's own CSS didn't load for some reason on this page. */
  .modal, .modal-backdrop{ display:none !important; }
}
.print-only{ display:none; }

/* Empty state */
.empty-state{ text-align:center; padding:50px 20px; color:var(--muted); }
.empty-state .bi{ font-size:42px; color:var(--border); margin-bottom:10px; display:block; }

/* Scrollbar (subtle) */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#d8d4c6; border-radius:8px; }