/* ============================================================================
   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); }
.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; }

/* --------------------------------------------------------------- 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;
  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; }

/* --------------------------------------------------------------- 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; }
.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); }

@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; }
}