/* btns-ui.css (v2, rev 2) — Bartons Admin central design system
   LIVE shared v2 CSS, deployed at /srv/btns/shared/web/css/btns-ui.css.
   Source of truth for all Bartons Admin modules (see CSS_STANDARD.md,
   DESIGN_STANDARD.md). Header updated 2026-07-03 after the app audit.

   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.
        (Bridge removed 2026-07-03 — all admin modules migrated to v2.)
     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;

}

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

/* landing-card links (nav landing pages: payroll, staff) */
a.table-card-row{ text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; }
a.table-card-row:hover{ border-color:var(--accent); box-shadow:var(--shadow-card); }
a.table-card-row .nav-arrow{ color:var(--text-muted); font-size:var(--text-lg); }
a.table-card-row:hover .nav-arrow{ color:var(--accent); }

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