/* btns-ui.css (v2, rev 2) — Bartons Admin central design system
   REFERENCE / REVIEW FILE — NOT the live shared CSS.
   Approved as the working v2 design reference. Will be deployed to
   /srv/btns/shared/web/css/btns-ui.css only after the app audit and a
   deliberate decision on how each pre-standard module migrates.

   Built from the approved rev2 palette + DESIGN_STANDARD.md / CSS_STANDARD.md.

   Changes since v2 rev 1, per review:
     1. .form-row (flex) no longer sits in the grid-template-columns mobile
        rule — it gets its own flex-direction:column rule.
     2. Status pill text colour: .status-{state} now sets colour on the
        pill itself, separate from .status-{state} .status-dot which sets
        the dot background.
     3. Added a clearly marked TEMPORARY v1 compatibility bridge so that
        when this file is eventually deployed, pre-standard modules
        (cds.css, payroll-creed.css) referencing old token names don't
        silently break before they're converted. Remove once every
        pre-standard module is migrated to v2 token names.
     4. Centralised the remaining one-off hex values as named tokens:
        --text-label, --disabled-bg, --disabled-text, --table-hover.
     5. Tables: .table-wrap owns border/radius/overflow; .table itself is
        just the table styling. Markup pattern:
        <div class="table-wrap"><table class="table">...</table></div>.
     6. Mobile picker confirmed: the actual hit target is the <input
        type=color> filling the full .picker box (position:absolute;
        inset:0), so at the 20x20px mobile size the whole visible dot is
        tappable — not relying on hover at any point.
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  /* surfaces */
  --page-bg:#FAF6EF;
  --card-bg:#FFFFFF;
  --card-soft:#F4EEE2;

  /* text */
  --text-main:#2E2A22;
  --text-muted:#6E655C;
  --text-label:#5C564B;

  /* structure */
  --border:#E7DFD0;
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-pill:999px;
  --shadow-card:0 6px 16px rgba(70,50,30,.07);
  --shadow-panel:0 10px 26px rgba(70,50,30,.09);
  --shadow-popover:0 16px 40px rgba(70,50,30,.16);

  /* brand / interactive */
  --accent:#B2613C;
  --accent-dark:#8B4A2C;
  --accent-soft:#F4E2D5;
  --header:#6E5A4C;

  /* semantic state */
  --success:#4C7A4B;        --success-soft:#E5F0E2; --success-text:#3C6B3A; --success-border:#CFE6CC;
  --warning:#C28A2E;        --warning-soft:#FBF0D9; --warning-text:#8A611E; --warning-border:#EED9AB;
  --danger:#B5483C;         --danger-soft:#F8E1DE;  --danger-text:#8A3327;  --danger-border:#EDC4BD;
  --info:#5A7FA6;           --info-soft:#E7EEF5;    --info-text:#3C5A78;   --info-border:#CFE0EE;

  /* status/monitoring ONLY */
  --mon-green:#1a7f37; --mon-amber:#bf8700; --mon-red:#cf222e; --mon-grey:#6e7781;

  /* form/table specific tokens */
  --disabled-bg:#F6F3EC;
  --disabled-text:#B3AD9F;
  --table-hover:#FDFBF7;

  /* spacing scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;

  /* typography scale */
  --text-xs:11px; --text-sm:12px; --text-base:14px; --text-lg:16px; --text-xl:20px; --text-2xl:28px;

  /* ===== TEMPORARY v1 compatibility aliases — remove once every
     pre-standard module is migrated to v2 token names ===== */
  --bg: var(--page-bg);
  --card: var(--card-bg);
  --soft: var(--card-soft);
  --line: var(--border);
  --line-strong: var(--border);
  --ink: var(--text-main);
  --muted: var(--text-muted);
  --green: var(--success);
  --amber: var(--warning);
  --red: var(--danger);
  --grey: var(--text-muted);
  /* ===== end temporary compatibility block ===== */
}

*{ box-sizing:border-box; }
body{ margin:0; font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--text-base); line-height:1.55; background:var(--page-bg); color:var(--text-main); }

a{ color:var(--accent); }
a:focus-visible{ outline:2px solid var(--accent-dark); outline-offset:2px; }

.page-shell{ margin:0 auto; padding:var(--space-5) var(--space-4); }
.page-narrow{ max-width:640px; }
.page-standard{ max-width:860px; }
.page-wide{ max-width:1140px; }
.page-full{ max-width:none; }

.page-title{ font-size:var(--text-2xl); font-weight:600; margin:0 0 var(--space-1); }
.page-subtitle{ font-size:var(--text-base); color:var(--text-muted); margin:0 0 var(--space-5); }
.section-title{ font-size:var(--text-xl); font-weight:600; margin:0 0 var(--space-3); }
.section-subtitle{ font-size:var(--text-sm); color:var(--text-muted); margin:calc(var(--space-3) * -1) 0 var(--space-3); }
.meta-text{ font-size:var(--text-xs); color:var(--text-muted); }
.help-text{ font-size:var(--text-sm); color:var(--text-muted); }

.grid{ display:grid; gap:var(--space-4); }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); }
.grid-main-sidebar{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:var(--space-4); align-items:start; }
.grid-main-sidebar .sticky-panel{ position:sticky; top:var(--space-4); }
.grid-form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
.grid-actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; }

.btns-header{ background:var(--header); color:#fff; border-bottom:1px solid rgba(0,0,0,.08);
  padding:var(--space-4) var(--space-5); display:flex; align-items:center; gap:var(--space-3); position:relative; }
.btns-header h1{ font-size:var(--text-lg); margin:0; font-weight:600; }
.btns-header .sub{ margin-left:auto; font-size:var(--text-sm); color:rgba(255,255,255,.85); }
.btns-header a{ color:#fff; }

.picker{ position:absolute; top:6px; left:6px; width:14px; height:14px; padding:0;
  border:none; border-radius:50%; background:rgba(255,255,255,.2); cursor:pointer;
  opacity:.3; transition:opacity .15s; }
.picker:hover{ opacity:.9; }
.picker input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; border:none; cursor:pointer; }

.card{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card); padding:var(--space-4); margin-bottom:var(--space-3); }
.card-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3);
  padding-bottom:var(--space-3); margin-bottom:var(--space-3); border-bottom:1px solid var(--border); }
.card-title{ font-size:var(--text-lg); font-weight:600; margin:0; }
.card-subtitle{ font-size:var(--text-sm); color:var(--text-muted); margin:var(--space-1) 0 0; }
.card-body{ }
.card-footer{ padding-top:var(--space-3); margin-top:var(--space-3); border-top:1px solid var(--border); }

.panel{ border-radius:var(--radius-md); border:1px solid var(--border); padding:var(--space-4); }
.panel-soft{ background:var(--card-soft); border-color:var(--border); }
.panel-calc{ background:var(--success-soft); border-color:var(--success-border); }
.panel-calc .card-title,.panel-calc .panel-title{ color:var(--success-text); }
.panel-info{ background:var(--info-soft); border-color:var(--info-border); }
.panel-info .card-title,.panel-info .panel-title{ color:var(--info-text); }
.panel-warning{ background:var(--warning-soft); border-color:var(--warning-border); }
.panel-warning .card-title,.panel-warning .panel-title{ color:var(--warning-text); }
.panel-danger{ background:var(--danger-soft); border-color:var(--danger-border); }
.panel-danger .card-title,.panel-danger .panel-title{ color:var(--danger-text); }
.panel-success{ background:#fff; border-color:var(--success-border); }
.panel-success .card-title,.panel-success .panel-title{ color:var(--success-text); }
.panel-title{ font-size:var(--text-base); font-weight:600; margin:0 0 var(--space-1); }

.form-group{ margin-bottom:var(--space-4); }
.form-label{ display:block; font-size:var(--text-sm); font-weight:600; color:var(--text-label); margin-bottom:var(--space-2); }
.form-row{ display:flex; gap:var(--space-4); flex-wrap:wrap; align-items:flex-end; }
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }

.form-input,.form-select,.form-textarea,
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=time],input[type=tel],input[type=search],select,textarea{
  width:100%; font:inherit; font-size:var(--text-base); color:var(--text-main); background:var(--card-bg);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-3); }
.form-input:focus,.form-select:focus,.form-textarea:focus,
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); }
.form-textarea,textarea{ resize:vertical; min-height:72px; }

.form-input[readonly],input[readonly]{ background:var(--card-soft); color:var(--text-label); cursor:not-allowed; }
.form-input[disabled],input[disabled],select[disabled],textarea[disabled]{
  background:var(--disabled-bg); color:var(--disabled-text); cursor:not-allowed; border-style:dashed; }
.form-input.error,input.error{ border-color:var(--danger); }
.form-help{ font-size:var(--text-xs); color:var(--text-muted); margin-top:var(--space-1); }
.form-error{ font-size:var(--text-xs); color:var(--danger); margin-top:var(--space-1); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font:inherit; font-weight:600; font-size:var(--text-base); border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4); border:1px solid var(--border); background:var(--card-bg);
  color:var(--text-main); cursor:pointer; transition:border-color .15s, box-shadow .15s, opacity .15s; }
.btn:focus-visible{ outline:2px solid var(--accent-dark); outline-offset:2px; }
.btn:hover{ border-color:var(--accent-dark); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

.btn-primary{ background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }
.btn-secondary{ background:var(--card-soft); border-color:var(--border); color:var(--text-main); }
.btn-success{ background:var(--success); border-color:var(--success); color:#fff; }
.btn-warning{ background:var(--warning); border-color:var(--warning); color:var(--text-main); }
.btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--accent-dark); }

.btn-sm{ padding:var(--space-2) var(--space-3); font-size:var(--text-sm); }
.btn-lg{ padding:14px 24px; font-size:var(--text-lg); }
.btn-block{ width:100%; }

.status-pill{ display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-pill); background:var(--card-bg); border:1px solid var(--border);
  box-shadow:var(--shadow-card); color:var(--text-muted); font-size:var(--text-sm); white-space:nowrap; }
.status-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }

.status-loading{ color:var(--warning-text); }
.status-success{ color:var(--success-text); }
.status-warning{ color:var(--warning-text); }
.status-danger{ color:var(--danger-text); }
.status-muted{ color:var(--text-muted); }

.status-loading .status-dot{ background:var(--warning); }
.status-success .status-dot{ background:var(--success); }
.status-warning .status-dot{ background:var(--warning); }
.status-danger .status-dot{ background:var(--danger); }
.status-muted .status-dot{ background:var(--text-muted); }

.alert{ border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); font-size:var(--text-sm);
  border:1px solid; margin-bottom:var(--space-3); }
.alert-info{ background:var(--info-soft); border-color:var(--info-border); color:var(--info-text); }
.alert-success{ background:var(--success-soft); border-color:var(--success-border); color:var(--success-text); }
.alert-warning{ background:var(--warning-soft); border-color:var(--warning-border); color:var(--warning-text); }
.alert-danger{ background:var(--danger-soft); border-color:var(--danger-border); color:var(--danger-text); }
.alert-loading{ background:var(--card-soft); border-color:var(--border); color:var(--text-muted); }

.table-wrap{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden; }
.table{ width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.table th{ text-align:left; padding:var(--space-3) var(--space-3); font-size:10px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text-muted); background:var(--card-soft); }
.table td{ padding:var(--space-3) var(--space-3); border-top:1px solid var(--border); }
.table tr:hover td{ background:var(--table-hover); }
.table-compact th,.table-compact td{ padding:var(--space-2) var(--space-3); }
.table-striped tbody tr:nth-child(even) td{ background:var(--card-soft); }
.table-actions{ text-align:right; white-space:nowrap; }
.table-status .badge{ font-size:10px; font-weight:600; padding:3px 9px; border-radius:var(--radius-pill); }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.table-cards{ display:flex; flex-direction:column; gap:var(--space-2); }
.table-cards .table-card-row{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); }
.table-cards .table-card-main{ font-weight:600; font-size:var(--text-sm); }
.table-cards .table-card-meta{ font-size:var(--text-xs); color:var(--text-muted); }

@media (max-width: 768px){
  .page-shell{ padding:var(--space-3); }

  .grid-main-sidebar,
  .grid-2,
  .grid-3,
  .form-grid{ grid-template-columns:1fr; }

  .form-row{ flex-direction:column; align-items:stretch; }

  .grid-main-sidebar .sticky-panel{ position:static; }
  .btn,input,select,textarea{ min-height:44px; }
  input,select,textarea{ font-size:16px; }
  .picker{ width:20px; height:20px; opacity:.5; }
}

/* =====================================================================
   APP SHELL — merged in from the Stock Count reference app (2026-07-01).
   Components for the Nunjucks module pattern: branded header with module
   launcher, in-module nav, main column, footer, FAB, modal, picklist,
   plus small layout utilities. All values use v2 tokens. Tenant brand
   (accent, header, page-bg etc) is injected as a :root override by the
   layout from config/platform.js — no brand literals in templates.
   ===================================================================== */
.app-header{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-4) var(--space-5); background:var(--card-bg); border-bottom:1px solid var(--border); }
.app-header__brand{ display:flex; align-items:center; gap:var(--space-3); font-weight:600; }
.app-header__logo{ display:grid; place-items:center; width:34px; height:34px;
  border-radius:var(--radius-sm); background:var(--accent); color:#fff; font-weight:700; }
.app-header__name em{ font-style:normal; color:var(--accent-dark); font-weight:600; }
.app-header__title{ color:var(--text-muted); font-weight:500; }

.app-launcher{ position:relative; }
.app-launcher__btn{ border:1px solid var(--border); background:var(--card-bg);
  border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3); font-size:var(--text-lg); cursor:pointer; }
.app-launcher__menu{ position:absolute; right:0; top:44px; background:var(--card-bg);
  border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-popover);
  width:280px; padding:var(--space-2); z-index:40; }
.app-launcher__item{ display:block; padding:var(--space-3); border-radius:var(--radius-sm);
  text-decoration:none; color:var(--text-main); }
.app-launcher__item span{ display:block; color:var(--text-muted); font-size:var(--text-sm); }
.app-launcher__item:hover{ background:var(--accent-soft); }
.app-launcher__item.is-current{ background:var(--accent-soft); color:var(--accent-dark); }

.app-nav{ display:flex; gap:var(--space-2); padding:var(--space-3) var(--space-5);
  background:var(--card-bg); border-bottom:1px solid var(--border); overflow-x:auto; }
.app-nav__link{ padding:var(--space-2) var(--space-3); border-radius:var(--radius-pill);
  text-decoration:none; color:var(--text-muted); font-weight:500; white-space:nowrap; }
.app-nav__link.is-active{ background:var(--accent-soft); color:var(--accent-dark); }

.app-main{ margin:var(--space-4) 0; padding:0 var(--space-4) 90px; }
.app-footer{ margin:0; padding:var(--space-4);
  color:var(--text-muted); font-size:var(--text-sm); text-align:left; }

.fab{ position:fixed; right:var(--space-4); bottom:var(--space-4); background:var(--accent-dark);
  color:#fff; border:none; border-radius:var(--radius-pill); padding:14px 20px; font:inherit;
  font-weight:700; box-shadow:var(--shadow-panel); cursor:pointer; z-index:20; }

.modal{ position:fixed; inset:0; background:rgba(40,30,20,.4); display:grid;
  place-items:center; z-index:30; padding:var(--space-4); }
.modal[hidden]{ display:none; }
.modal__box{ background:var(--card-bg); border-radius:var(--radius-md); padding:var(--space-5);
  width:100%; max-width:420px; box-shadow:var(--shadow-popover); }

.picklist{ list-style:none; margin:var(--space-2) 0; padding:0; max-height:180px; overflow:auto;
  border:1px solid var(--border); border-radius:var(--radius-sm); }
.picklist li{ padding:var(--space-3); cursor:pointer; border-bottom:1px solid var(--border); }
.picklist li:hover,.picklist li.sel{ background:var(--accent-soft); }

/* layout utilities */
.row{ display:flex; gap:var(--space-3); align-items:center; margin-top:var(--space-4); flex-wrap:wrap; }
.row.spread{ justify-content:space-between; }
.muted{ color:var(--text-muted); }
.table th.num,.table td.num{ text-align:right; width:110px; }

@media (max-width:560px){
  .app-main{ margin:var(--space-3) 0; }
  .app-header__title{ display:none; }
}
/* ===== end app shell ===== */