/* ============================================================================
   Pultrack design tokens + chrome — design-handoff-v1 applied over Bootstrap 5.
   Source of truth: branding/design-handoff-v1/ (Design Handoff §02–§05).
   This file loads AFTER bootstrap + style.css so its tokens win.
   ============================================================================ */

@import url('/static/fonts/plex.css');

:root{
  /* -- colour tokens (handoff §02) -- */
  --green:#1B5739; --green-2:#103A26; --green-soft:#E7F0EA; --green-line:#CDE0D4;
  --ink:#13211B; --gold:#C28A2C; --gold-2:#9C6E1C; --gold-soft:#F7EAD0; --gold-line:#E7D2A0;
  --paper:#F4F1E9;
  --muted:#6E685B; --line:#E3DDD0;
  --debt:#992C22; --debt-soft:#F4E0DC; --debt-line:#E2C2BB;
  --money-2:#564E41;
  --shadow:0 1px 2px rgba(20,30,24,.05),0 8px 28px rgba(20,30,24,.07);
  --app-bg:#EEECE3; --app-card:#FFFFFF; --app-line:#E0DACC;
  --app-line-soft:#ECE7DC; --app-hover:#F6F4EE; --app-ink:#1A241F;
  /* -- layout -- */
  --sidebar-w:236px; --sidebar-rail:62px; --topbar-h:50px;

  /* Re-point Bootstrap's own palette at the brand tokens so every
     .btn-primary / .text-success / .table-striped etc. follows along. */
  --bs-primary:#1B5739; --bs-primary-rgb:27,87,57;
  --bs-success:#1B5739; --bs-success-rgb:27,87,57;
  --bs-danger:#992C22;  --bs-danger-rgb:153,44,34;
  --bs-warning:#C28A2C; --bs-warning-rgb:194,138,44;
  --bs-body-bg:#EEECE3; --bs-body-color:#1A241F;
  --bs-border-color:#E0DACC;
  --bs-font-sans-serif:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bs-font-monospace:'IBM Plex Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --bs-link-color:#1B5739; --bs-link-hover-color:#103A26;
}

body{
  background:var(--app-bg);
  color:var(--app-ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
}

/* Numbers are the product — tabular figures wherever amounts line up. */
table, .text-end, .money, input[type=number]{ font-variant-numeric:tabular-nums; }

code, .mono, kbd{ font-family:'IBM Plex Mono',monospace; }
code{ color:var(--green); }

/* ---------------------------------------------------------------- buttons */
.btn-primary, .btn-success{
  --bs-btn-bg:var(--green); --bs-btn-border-color:var(--green);
  --bs-btn-hover-bg:var(--green-2); --bs-btn-hover-border-color:var(--green-2);
  --bs-btn-active-bg:var(--green-2); --bs-btn-active-border-color:var(--green-2);
  --bs-btn-disabled-bg:var(--green); --bs-btn-disabled-border-color:var(--green);
}
.btn-outline-primary, .btn-outline-success{
  --bs-btn-color:var(--green); --bs-btn-border-color:var(--green-line);
  --bs-btn-hover-bg:var(--green); --bs-btn-hover-border-color:var(--green);
  --bs-btn-active-bg:var(--green); --bs-btn-active-border-color:var(--green);
}
.btn-danger{ --bs-btn-bg:var(--debt); --bs-btn-border-color:var(--debt);
  --bs-btn-hover-bg:#7d241c; --bs-btn-hover-border-color:#7d241c; }
.btn-outline-danger{ --bs-btn-color:var(--debt); --bs-btn-border-color:var(--debt-line);
  --bs-btn-hover-bg:var(--debt); --bs-btn-hover-border-color:var(--debt); }
.btn-warning{ --bs-btn-bg:var(--gold); --bs-btn-border-color:var(--gold); }
.btn{ border-radius:9px; }
.btn-sm{ border-radius:7px; }
.btn:focus-visible{ box-shadow:0 0 0 .25rem rgba(27,87,57,.25); }

/* ------------------------------------------------------------------ cards */
.card{
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  background:var(--app-card);
}
.card-header{
  background:transparent;
  border-bottom:1px solid var(--app-line-soft);
  font-weight:600;
}

/* ------------------------------------------------------------------ forms */
.form-control, .form-select{
  border-radius:9px;
  border-color:var(--app-line);
  color:var(--app-ink);
}
.form-control:focus, .form-select:focus{
  border-color:var(--green);
  box-shadow:0 0 0 .25rem rgba(27,87,57,.15);
}
.form-label{ font-size:.83rem; font-weight:500; color:var(--muted); margin-bottom:.25rem; }
.input-group .btn{ border-radius:0 9px 9px 0; }

/* ----------------------------------------------------------------- tables */
.table{ --bs-table-hover-bg:var(--app-hover); }
.table > :not(caption) > * > *{ border-bottom-color:var(--app-line-soft); }
.table-light, .table-light th{ background-color:var(--app-hover) !important; color:var(--muted); }
table.sortable thead th, table.sticky-head thead th{ background-color:var(--app-hover); }
table.sortable thead th:hover{ background-color:var(--app-line-soft); }
thead th{ font-size:.8rem; font-weight:600; color:var(--muted); }
/* Short structured values must never wrap onto two lines. Doc numbers live in
   <code>; date cells carry .dt. Keeps "2026-06-30" / "PAY-20260630-0002" intact. */
.table code{ white-space:nowrap; }
td.dt, th.dt, td.nowrap, th.nowrap{ white-space:nowrap; }
.table-success, .table-success th, .table-success td{
  --bs-table-bg:var(--green-soft); color:var(--app-ink);
}

/* ----------------------------------------------------------------- badges */
.badge.bg-secondary{ background-color:var(--app-hover) !important; color:var(--muted);
  border:1px solid var(--app-line); font-weight:500; }
.badge.bg-success{ background-color:var(--green-soft) !important; color:var(--green);
  border:1px solid var(--green-line); font-weight:600; }
.badge.bg-danger{ background-color:var(--debt-soft) !important; color:var(--debt);
  border:1px solid var(--debt-line); font-weight:600; }
.badge.bg-warning{ background-color:var(--gold-soft) !important; color:var(--gold-2);
  border:1px solid var(--gold-line); font-weight:600; }

/* ------------------------------------------------ semantic text (handoff) */
.text-danger{ color:var(--debt) !important; }          /* red = already owed */
.text-success{ color:var(--green) !important; }
.text-warning{ color:var(--gold-2) !important; }       /* amber = debt this sale adds */
a{ color:var(--green); }
.alert-danger{ --bs-alert-bg:var(--debt-soft); --bs-alert-border-color:var(--debt-line); --bs-alert-color:var(--debt); }
.alert-warning{ --bs-alert-bg:var(--gold-soft); --bs-alert-border-color:var(--gold-line); --bs-alert-color:var(--gold-2); }
.alert-success{ --bs-alert-bg:var(--green-soft); --bs-alert-border-color:var(--green-line); --bs-alert-color:var(--green-2); }

/* Secondary USD figures — --money-2, AA+ on white and paper (handoff §02). */
.money-sec{ color:var(--money-2); font-size:.85em; }

/* ============================================================ BACK OFFICE
   The two chrome modes (brief Revision 1 §7):
   back office = left sidebar; POS = chrome-free top strip. */
.bo{ display:flex; min-height:100vh; min-height:100dvh; }

/* --------------------------------------------------------------- sidebar */
.sidebar{
  width:var(--sidebar-w); flex:none;
  background:var(--green-2); color:#cfdcd2;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; height:100dvh;
  transition:width .15s ease;
  z-index:1030;
}
.sidebar .sb-head{
  display:flex; align-items:center; gap:9px;
  padding:11px 12px 11px 14px; flex:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar .sb-head .tile{ width:30px; height:30px; border-radius:8px; flex:none; }
.sidebar .sb-head .wm{ font-weight:600; font-size:16px; color:var(--paper); letter-spacing:-.01em; white-space:nowrap; }
.sidebar .sb-toggle{
  margin-left:auto; background:none; border:0; color:#9fb3a6;
  width:26px; height:26px; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.sidebar .sb-toggle:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sidebar .sb-toggle svg{ width:15px; height:15px; }

.sidebar .sb-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 8px 10px; }
.sidebar .sb-scroll::-webkit-scrollbar{ width:5px; }
.sidebar .sb-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:3px; }

.sidebar .sb-glabel{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#7e957f; padding:12px 8px 4px; white-space:nowrap;
}
.sidebar .sb-item{
  display:flex; align-items:center; gap:10px;
  padding:7px 9px; margin:1px 0;
  border-radius:8px; border-left:3px solid transparent;
  color:#cfdcd2; text-decoration:none; font-size:13.5px; font-weight:500;
  white-space:nowrap; overflow:hidden;
}
.sidebar .sb-item:hover{ background:rgba(255,255,255,.07); color:#fff; }
.sidebar .sb-item.active{
  background:rgba(255,255,255,.10); color:#fff;
  border-left-color:var(--gold);
}
.sidebar .sb-item .ic{ width:17px; height:17px; flex:none; display:flex; }
.sidebar .sb-item .ic i{ font-size:15px; line-height:1; }
.sidebar .sb-item .lbl{ overflow:hidden; text-overflow:ellipsis; }

.sidebar .sb-foot{
  flex:none; border-top:1px solid rgba(255,255,255,.08); padding:10px 12px;
}
.sidebar .sb-user{ display:flex; align-items:center; gap:9px; }
.sidebar .sb-user .av{
  width:30px; height:30px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.12); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:600;
}
.sidebar .sb-user .uw{ display:flex; flex-direction:column; min-width:0; }
.sidebar .sb-user .un{ font-size:12.5px; font-weight:600; color:var(--paper);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar .sb-user .ur{ font-size:10.5px; color:#8aa18e; white-space:nowrap; }
.sidebar .sb-user .out{
  margin-left:auto; background:none; border:0; color:#9fb3a6; cursor:pointer;
  width:26px; height:26px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
}
.sidebar .sb-user .out:hover{ background:rgba(255,255,255,.1); color:#fff; }

/* Collapsed icon rail */
.sidebar.rail{ width:var(--sidebar-rail); }
.sidebar.rail .wm, .sidebar.rail .sb-glabel, .sidebar.rail .sb-item .lbl,
.sidebar.rail .sb-user .uw{ display:none; }
.sidebar.rail .sb-head{ padding-left:12px; }
.sidebar.rail .sb-item{ justify-content:center; padding:9px 0; }
.sidebar.rail .sb-toggle{ margin-left:0; }
.sidebar.rail .sb-head{ flex-direction:column; gap:7px; }
.sidebar.rail .sb-user{ justify-content:center; }
.sidebar.rail .sb-user .out{ margin-left:0; }

/* Collapsible nav group (e.g. Administration) — folds away the least-used
   section so the list doesn't force a scroll. */
.sidebar .sb-ghead{
  width:100%; display:flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer; text-align:left;
}
.sidebar .sb-ghead:hover{ color:#cfdcd2; }
.sidebar .sb-ghead .chev{ margin-left:auto; transition:transform .15s ease; line-height:1; }
.sidebar .sb-ghead .chev i{ font-size:11px; }
.sidebar .sb-group.collapsible.open .sb-ghead .chev{ transform:rotate(180deg); }
.sidebar:not(.rail) .sb-group.collapsible:not(.open) .sb-gitems{ display:none; }
.sidebar.rail .sb-ghead{ pointer-events:none; }   /* rail: items always show as icons */

/* Users page — section access as a multi-select dropdown */
.sec-multi{ min-width:190px; max-width:230px; }
.sec-multi .sec-toggle{ cursor:pointer; overflow:hidden; }
.sec-multi .sec-label{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sec-menu{ min-width:210px; border-color:var(--app-line); box-shadow:0 8px 28px rgba(20,30,24,.12); }
.sec-menu .sec-opt{ display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:13.5px; border-radius:7px; padding:6px 9px; }
.sec-menu .sec-opt:hover{ background:var(--app-hover); }
.sec-menu .sec-opt input{ margin:0; }

/* Users page — inline name/username editor */
.name-edit > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; }
.name-edit > summary::-webkit-details-marker{ display:none; }
.name-edit .sec-pen{ color:#9aa39c; font-size:12px; opacity:0; transition:opacity .12s; }
.name-edit > summary:hover .sec-pen{ opacity:1; }
.name-edit[open] > summary{ margin-bottom:6px; }
.name-form{ display:flex; flex-direction:column; gap:5px; max-width:220px; }

/* --------------------------------------------------------------- main col */
.bo-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.botop{
  height:var(--topbar-h); flex:none;
  background:var(--app-card); border-bottom:1px solid var(--app-line);
  display:flex; align-items:center; gap:10px; padding:0 16px;
  position:sticky; top:0; z-index:1020;
}
.botop .crumb{ font-size:13.5px; color:var(--muted); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Named "‹ Parent" breadcrumb at the top of a detail page — always returns to
   the parent list (restoring its last filter), the way QuickBooks does. */
.backlink{ display:inline-flex; align-items:center; gap:5px; font-size:13.5px;
  font-weight:600; color:var(--brand,#1B5739); text-decoration:none; margin:0 0 12px; }
.backlink:hover{ text-decoration:underline; }
.backlink .bi{ font-size:12px; }
@media print { .backlink{ display:none !important; } }
.botop .right{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.bo-main > main{ padding:1rem; }

/* ================================================================== POS */
.topstrip{
  height:var(--topbar-h);
  background:var(--app-card); border-bottom:1px solid var(--app-line);
  display:flex; align-items:center; gap:12px; padding:0 16px;
  position:sticky; top:0; z-index:1030;
}
.topstrip .brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.topstrip .brand .tile{ width:28px; height:28px; border-radius:7px; }
.topstrip .brand .wm{ font-weight:600; font-size:15.5px; color:var(--app-ink); letter-spacing:-.01em; }
.topstrip .sep{ width:1px; height:22px; background:var(--app-line); }
.topstrip .right{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.topstrip .user{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.topstrip .avatar{ width:28px; height:28px; border-radius:50%;
  background:var(--green-soft); color:var(--green);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }

/* Currency / language segmented controls in either chrome bar */
.ts-seg{ display:flex; border:1px solid var(--app-line); border-radius:8px; overflow:hidden; }
.ts-seg button{ padding:5px 10px; font-size:12px; font-weight:500; color:var(--muted);
  background:none; border:0; cursor:pointer; }
.ts-seg button.on{ background:var(--green); color:#fff; font-weight:600; }

/* POS payment guards (handoff §05: guarded-debt blocks) */
.pos-remain{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--gold-soft); border:1px solid var(--gold-line);
  color:var(--gold-2); border-radius:9px; padding:8px 12px; font-weight:600;
}
.pos-confirm{
  display:flex; gap:9px; align-items:flex-start;
  border:1px solid var(--gold-line); border-radius:9px; padding:8px 10px;
  font-size:12.5px; background:var(--app-card);
}
.pos-confirm input{ margin-top:2px; }

kbd{
  background:var(--app-bg); border:1px solid var(--app-line); border-radius:5px;
  color:var(--app-ink); font-size:.78em; padding:1px 6px;
}

/* ---------------------------------------------------------------- login */
/* Split-panel login: the brand introduces itself on green-2; the form sits
   on the paper ground. Escapes base.html's main padding to fill the screen. */
.login-split{
  display:flex; min-height:100vh; margin:-1rem;
}
.login-brand{
  width:44%; max-width:560px; flex:none;
  background:var(--green-2); color:var(--paper);
  display:flex; flex-direction:column;
  padding:40px 44px; position:relative; overflow:hidden;
}
.login-brand .lb-top{ display:flex; align-items:center; gap:11px; cursor:default; }
.login-brand .lb-top .pl-mark{ width:44px; height:44px; flex:none; }
.login-brand .lb-top .wm{ font-size:21px; font-weight:700; letter-spacing:-.015em; }

/* -- brand-mark entrance (adapted from design-handoff-v1 §02 Motion) -------
   The rail draws, then the coin (ring riding with it) rolls in from the left
   and rocks right-left on the rail with decaying swings until it settles —
   one continuous motion, no after-the-fact ring pop. Replays on hover/click
   (login.html re-adds .pl-anim). */
@keyframes pl-railGrow{ 0%{transform:scaleX(0)} 100%{transform:scaleX(1)} }
@keyframes pl-coinRock{
  0%   { transform:translateX(-66px) }   /* enters from off-rail left  */
  46%  { transform:translateX(9px)  }    /* swings past centre → right */
  64%  { transform:translateX(-6px) }    /* back left                  */
  79%  { transform:translateX(4px)  }    /* right again, smaller       */
  90%  { transform:translateX(-2px) }    /* left, smaller still        */
  100% { transform:translateX(0)    }    /* settles home               */
}
.pl-anim .rail{ transform-origin:left center; transform-box:fill-box;
  animation:pl-railGrow .5s cubic-bezier(.4,0,.2,1) both; }
.pl-anim .coin-g{
  animation:pl-coinRock 1.8s cubic-bezier(.45,.05,.35,1) .15s both; }
@media (prefers-reduced-motion: reduce){
  .pl-anim .rail, .pl-anim .coin-g{ animation:none; }
}
.login-brand .lb-mid{ margin:auto 0; position:relative; z-index:1; }
.login-brand .lb-tag{
  font-size:clamp(26px, 2.6vw, 34px); font-weight:700; letter-spacing:-.02em;
  line-height:1.15; margin-bottom:26px;
}
.login-brand .lb-pillars{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:13px; }
.login-brand .lb-pillars li{
  display:flex; align-items:center; gap:12px;
  font-size:14.5px; font-weight:500; color:#cfdcd2;
}
.login-brand .lb-pillars i{
  width:34px; height:34px; flex:none; border-radius:9px;
  background:rgba(255,255,255,.08); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.login-brand .lb-mark{
  position:absolute; right:-90px; bottom:-70px; width:340px; height:340px;
  color:var(--paper); opacity:.07; pointer-events:none;
}
.login-brand .lb-foot{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:.14em; color:#7e957f; position:relative; z-index:1;
}

.login-side{
  flex:1; min-width:0; display:flex; flex-direction:column;
  background:var(--app-bg); padding:22px 26px;
}
.login-side .ls-head{ display:flex; justify-content:flex-end; flex:none; }
.login-side .ls-body{ flex:1; display:flex; align-items:center; justify-content:center; }
.login-card{
  width:100%; max-width:380px;
  background:var(--app-card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:34px 34px 30px;
}
.login-card .lc-brand{
  display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:14px;
}
.login-card .lc-brand img{ width:30px; height:30px; border-radius:8px; }
.login-card .lc-brand span{ font-weight:700; font-size:17px; }
.login-card .lc-title{
  font-size:19px; font-weight:700; letter-spacing:-.01em;
  text-align:center; margin:0 0 22px; color:var(--app-ink);
}
.login-side .ls-foot{
  flex:none; display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:11.5px; color:var(--muted); padding-top:14px;
}
.login-side .ls-foot svg{ width:13px; height:13px; color:var(--muted); }

/* Language selector — segmented, code + native name, the active segment
   carries the brand green. */
.lang-seg{
  display:flex; background:var(--app-card);
  border:1px solid var(--app-line); border-radius:11px;
  padding:3px; gap:3px; box-shadow:var(--shadow);
}
.lang-seg form{ margin:0; }
.lang-seg button{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  min-width:78px; padding:7px 12px 6px;
  background:none; border:0; border-radius:8px; cursor:pointer;
}
.lang-seg .cd{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600;
  letter-spacing:.06em; color:var(--app-ink);
}
.lang-seg .nm{ font-size:10.5px; color:var(--muted); }
.lang-seg button:hover{ background:var(--app-hover); }
.lang-seg button.on{ background:var(--green); }
.lang-seg button.on .cd{ color:#fff; }
.lang-seg button.on .nm{ color:rgba(255,255,255,.75); }

/* Login language picker: compact dropdown (replaces the segmented button row) */
.lang-pick{ display:flex; align-items:center; gap:6px; margin:0; color:var(--muted); }
.lang-pick .bi{ font-size:15px; opacity:.7; }
.lang-pick select{ width:auto; min-width:150px; }

@media (max-width: 991px){
  .login-brand{ display:none; }
}

/* Toasts follow the semantic tokens */
.text-bg-success{ background-color:var(--green) !important; }
.text-bg-danger{ background-color:var(--debt) !important; }

/* ---- salary-payout decision panel (expense form) ---- */
.emp-decide{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--app-line); border:1px solid var(--app-line);
  border-radius:10px; overflow:hidden;
}
.emp-decide .ed-cell{
  background:var(--app-card); padding:10px 14px;
  display:flex; flex-direction:column; gap:2px; position:relative;
}
.emp-decide .ed-l{ font-size:11.5px; color:var(--muted); font-weight:500; }
.emp-decide .ed-v{ font-size:18px; font-weight:700; color:var(--app-ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.emp-decide .ed-accent{ background:var(--green-soft); }
.emp-decide .ed-accent .ed-v{ color:var(--green); }
.emp-decide .ed-debt{ color:var(--debt); }
.emp-decide .ed-muted .ed-v{ color:var(--muted); font-weight:600; font-size:14px; }
.emp-decide .ed-fill{
  position:absolute; top:9px; right:10px;
  font-size:11px; font-weight:600; color:var(--green);
  background:#fff; border:1px solid var(--green-line); border-radius:6px;
  padding:2px 8px; cursor:pointer;
}
.emp-decide .ed-fill:hover{ background:var(--green); color:#fff; }
@media (max-width: 720px){ .emp-decide{ grid-template-columns:repeat(2,1fr); } }

/* ---- license renewal banner ---- */
.lic-banner{
  display:flex; align-items:center; gap:10px;
  padding:8px 16px; font-size:13.5px; font-weight:500;
  position:sticky; top:0; z-index:1040;
}
.lic-banner i{ font-size:16px; }
.lic-banner a{ margin-left:auto; font-weight:600; white-space:nowrap; text-decoration:none; }
.lic-banner.lic-grace{ background:var(--gold-soft); color:var(--gold-2); border-bottom:1px solid var(--gold-line); }
.lic-banner.lic-grace a{ color:var(--gold-2); }
.lic-banner.lic-expired, .lic-banner.lic-tampered, .lic-banner.lic-invalid{
  background:var(--debt-soft); color:var(--debt); border-bottom:1px solid var(--debt-line); }
.lic-banner.lic-expired a, .lic-banner.lic-tampered a, .lic-banner.lic-invalid a{ color:var(--debt); }

/* ---- license status page ---- */
.lic-badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 12px;
  border-radius:999px; font-size:13px; font-weight:600; }
.lic-badge.s-valid{ background:var(--green-soft); color:var(--green); border:1px solid var(--green-line); }
.lic-badge.s-grace{ background:var(--gold-soft); color:var(--gold-2); border:1px solid var(--gold-line); }
.lic-badge.s-expired, .lic-badge.s-tampered, .lic-badge.s-invalid{ background:var(--debt-soft); color:var(--debt); border:1px solid var(--debt-line); }
.lic-badge.s-unlicensed{ background:var(--app-hover); color:var(--muted); border:1px solid var(--app-line); }
.lic-facts{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:14px; margin:4px 0; }
.lic-facts dt{ color:var(--muted); }
.lic-facts dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; }

/* ---- renewal two-option chooser ---- */
.renew-opt{ padding:4px 0; }
.renew-opt .ro-head{ display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.renew-opt .ro-n{ width:22px; height:22px; flex:none; border-radius:50%;
  background:var(--green-soft); color:var(--green); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.renew-opt .ro-head h3{ font-size:15px; font-weight:600; margin:0; color:var(--app-ink); }
.renew-or{ display:flex; align-items:center; text-align:center; color:var(--muted);
  font-size:12px; margin:14px 0; }
.renew-or::before, .renew-or::after{ content:""; flex:1; border-top:1px solid var(--app-line); }
.renew-or span{ padding:0 12px; }
.lic-contact{ display:flex; flex-wrap:wrap; gap:10px 20px; margin:6px 0 2px; }
.lic-contact a{ display:inline-flex; align-items:center; gap:7px; font-weight:600;
  font-size:15px; color:var(--green); text-decoration:none; }
.lic-contact a:hover{ text-decoration:underline; }

@media print{
  .sidebar, .botop, .topstrip, .lic-banner{ display:none !important; }
  body{ background:#fff; }
}

/* ---------------- top bar: global search + account menu ---------------- */
.botop{ gap:14px; }
.topsearch{ position:relative; flex:1; max-width:520px; display:flex; align-items:center; }
.topsearch > .bi{ position:absolute; left:12px; color:var(--muted); font-size:14px; pointer-events:none; }
.topsearch input{ width:100%; padding:8px 12px 8px 34px; border:1px solid var(--app-line); border-radius:10px; background:#fff; font-size:14px; color:var(--app-ink); }
.topsearch input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(27,87,57,.12); }
.ts-pop{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--app-line); border-radius:12px; box-shadow:var(--shadow); z-index:1100; max-height:60vh; overflow:hidden auto; }
.ts-item{ display:flex; flex-direction:column; gap:1px; padding:9px 13px; text-decoration:none; color:var(--app-ink); border-bottom:1px solid var(--app-line-soft); }
.ts-item:last-child{ border-bottom:0; }
.ts-item:hover{ background:var(--app-hover); }
.ts-nm{ font-weight:600; font-size:13.5px; }
.ts-meta{ font-size:11.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }
.ts-empty{ padding:12px 13px; color:var(--muted); font-size:13px; font-style:italic; }
.ts-newsale .bi{ font-size:13px; }
.acct{ position:relative; }
.acct-btn{ display:flex; align-items:center; gap:8px; background:none; border:1px solid transparent; border-radius:10px; padding:5px 9px; cursor:pointer; color:var(--app-ink); }
.acct-btn:hover{ background:var(--app-hover); }
.acct-btn .av{ width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; flex:none; }
.acct-nm{ font-size:13.5px; font-weight:500; }
.acct-store{ font-size:12px; font-weight:600; color:var(--green); background:var(--app-hover); border-radius:999px; padding:2px 9px; display:inline-flex; align-items:center; gap:4px; }
.acct-store .bi{ font-size:11px; }
.acct-btn > .bi{ font-size:11px; color:var(--muted); }
.acct-pop{ position:absolute; top:calc(100% + 6px); right:0; min-width:222px; background:#fff; border:1px solid var(--app-line); border-radius:12px; box-shadow:var(--shadow); z-index:1100; padding:6px; }
.acct-hdr{ padding:9px 11px 10px; border-bottom:1px solid var(--app-line-soft); margin-bottom:5px; }
.acct-shop{ font-weight:600; font-size:14px; color:var(--app-ink); }
.acct-u{ font-size:11.5px; color:var(--muted); }
.acct-pop a, .acct-pop button{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 11px; border-radius:8px; border:0; background:none; color:var(--app-ink); font-size:13.5px; text-decoration:none; cursor:pointer; }
.acct-pop a:hover, .acct-pop button:hover{ background:var(--app-hover); }
.acct-pop .bi{ font-size:14px; color:var(--muted); width:16px; text-align:center; }

/* ======================================================= MOBILE SHELL
   Phone breakpoint (≤767.98px = Bootstrap md boundary): the sidebar
   becomes an off-canvas drawer behind a hamburger in the top bar.
   Everything in this section is inert at ≥768px — desktop unchanged. */
.bo-hamburger{
  display:none; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none;
  background:none; border:0; border-radius:9px;
  color:var(--app-ink); font-size:22px; cursor:pointer;
}
.bo-hamburger:hover{ background:var(--app-hover); }
.bo-backdrop{ position:fixed; inset:0; background:rgba(19,33,27,.45); z-index:1045; }
@media (min-width: 768px){ .bo-backdrop{ display:none !important; } }

@media (max-width: 767.98px){
  .bo-hamburger{ display:flex; }
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; height:100dvh;
    width:min(84vw, 300px);
    transform:translateX(-100%);
    transition:transform .18s ease;
    z-index:1050;
  }
  .sidebar.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.35); }
  /* The desktop icon-rail state is meaningless in a drawer: neutralize it
     (JS also strips .rail on phones — this is the CSS backstop). */
  .sidebar.rail{ width:min(84vw, 300px); }
  .sidebar.rail .wm, .sidebar.rail .sb-glabel, .sidebar.rail .sb-item .lbl,
  .sidebar.rail .sb-user .uw{ display:revert; }
  .sidebar.rail .sb-item{ justify-content:flex-start; padding:7px 9px; }
  .sidebar.rail .sb-head{ flex-direction:row; padding-left:14px; }
  .sidebar.rail .sb-ghead{ pointer-events:auto; }
  .sidebar .sb-toggle{ display:none; }   /* rail toggle is desktop-only */
  .botop{ padding:0 10px; gap:8px; }
  .botop .crumb{ display:none; }         /* hamburger + search need the room */
}

/* ---------------------------------------------- MOBILE CONTENT (≤767.98px) */
@media (max-width: 767.98px){
  .bo-main > main{ padding:12px !important; }
  /* iOS zooms any focused input under 16px — hold the line at 16. */
  .form-control, .form-select{ font-size:16px; }
  .topsearch input{ font-size:16px; }
  /* Cards flush to the edge feel roomier on a 375px screen. */
  .card{ border-radius:10px; }
}
/* Touch targets on any coarse-pointer device (phone AND tablet). */
@media (pointer: coarse){
  .btn-sm{ padding:.45rem .7rem; }
  .sidebar .sb-item{ padding:10px 9px; }
  .acct-pop a, .acct-pop button{ padding:11px 11px; }
}

/* ------------------------------------------------------- POS ON TABLETS
   The POS grid (col-lg-7 / col-lg-5) already stacks below 992px: portrait
   tablets get item entry above payment. These rules only make the stacked
   layout comfortable to touch. Phones are served by /m/, not /pos. */
@media (pointer: coarse) and (max-width: 1199.98px){
  .topstrip .btn, .topstrip .ts-seg button{ min-height:38px; }
  /* Cart quantity/price/discount inputs need finger-sized hit areas. */
  main table.table input.form-control-sm,
  main table.table .btn-sm{ min-height:40px; font-size:15px; }
  .pos-remain{ padding:12px 14px; font-size:16px; }
  .pos-confirm{ padding:12px; font-size:14px; }
  .pos-confirm input{ width:20px; height:20px; }
}

/* Sidebar logo is now a link home (click Pultrack → dashboard). */
.sb-head .sb-brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; flex:1; min-width:0; }
.sb-head .sb-brand .wm{ white-space:nowrap; overflow:hidden; }