/* =====================================================================
   AHA Fashion — inventory admin
   Built against brand/BRAND-SYSTEM.md. Where anything here disagrees with
   that file, that file wins.

   Two families only: Bodoni Moda (display) and PT Sans / PT Sans Narrow.
   Fonts are self-hosted from the site build — no CDN, works offline.

   THE CONTRAST RULE, which the first draft of this file broke:
   --gold #917839 is 3.82:1 on --ground. That FAILS body text. It is for the
   mark and headline-scale display ONLY. Gold *text* is --gold-text #5C430E on
   light (8.35:1) and --gold-light #C9A961 on dark (7.87:1).
   ===================================================================== */

@font-face{font-family:"Bodoni Moda";src:url("fonts/bodoni-moda-latin-var.woff2") format("woff2-variations");
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"PT Sans";src:url("fonts/pt-sans-400-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PT Sans";src:url("fonts/pt-sans-700-latin.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"PT Sans";src:url("fonts/pt-sans-400-italic-latin.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"PT Sans Narrow";src:url("fonts/pt-sans-narrow-400-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PT Sans Narrow";src:url("fonts/pt-sans-narrow-700-latin.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  /* surfaces */
  --ground:#F7F2EF; --surface-warm:#F5E8E1; --surface-warm-2:#E5D6CD;
  --accent-warm:#DCC3B4; --surface-cool:#D2DAE3; --surface-cool-2:#E8EBEE;
  --paper:#FAFAFA;
  /* anchors */
  --ink:#151822; --ink-deep:#0E1017;
  --gold:#917839;            /* mark + display only — never body text */
  --gold-text:#5C430E;       /* readable gold on light */
  --gold-light:#C9A961;      /* readable gold on dark */
  /* states — desaturated to sit inside a neutral system */
  --ok:#1E6E3A; --ok-bg:#E3EFE6;
  --bad:#A32A21; --bad-bg:#F7E7E4;
  --warn:#8A5A08; --warn-bg:#F8EEDC;
  --line:#E0D7CF; --line-strong:#CFC3B8;
  --muted:#6B6259;

  --display:"Bodoni Moda","Didot","Times New Roman",serif;
  --body:"PT Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --label:"PT Sans Narrow","PT Sans",ui-sans-serif,system-ui,sans-serif;

  --r:8px; --r-sm:5px;
  --shadow:0 1px 2px rgba(21,24,34,.05), 0 4px 16px rgba(21,24,34,.05);
  --shadow-lift:0 2px 6px rgba(21,24,34,.07), 0 12px 32px rgba(21,24,34,.09);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 15px/1.6 var(--body);-webkit-font-smoothing:antialiased}

/* ---------------------------------------------------------- typography */
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0 0 .35em;letter-spacing:-.01em}
h1{font-size:32px;line-height:1.15;font-variation-settings:"opsz" 72}
h2{font-size:21px;line-height:1.25;font-variation-settings:"opsz" 40}
h3{font-size:17px;font-variation-settings:"opsz" 24}
p{margin:0 0 1em}
a{color:var(--gold-text);text-decoration:none;border-bottom:1px solid transparent}
a:hover{border-bottom-color:currentColor}

/* Tracked uppercase — the one place the logo's own small type is quoted. */
.eyebrow,.grid th,.chip,.tile .k,.top nav a,.btn,.lines th{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.eyebrow{font-size:11.5px;color:var(--muted);margin-bottom:6px;display:block}

.muted{color:var(--muted)}
.r{text-align:right}
.num,.money{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:13px;letter-spacing:-.01em}
.ok{color:var(--ok)} .bad{color:var(--bad)} .warn{color:var(--warn)}
.mt{margin-top:34px}
.lede{font-size:15px;color:var(--muted);max-width:74ch;margin:-2px 0 20px}

/* -------------------------------------------------------------- header */
.top{display:flex;align-items:center;gap:20px;padding:0 22px;height:64px;
  background:var(--ink-deep);color:var(--paper);position:sticky;top:0;z-index:30;
  border-bottom:1px solid #23262F}
.brand{display:flex;align-items:center;gap:11px;flex:none;
  border:none;padding-right:20px;margin-right:2px;border-right:1px solid #262A34}
.brand img{height:34px;width:auto;display:block;
  /* the mark is dark linework; invert it to gold-light on the dark bar */
  filter:brightness(0) saturate(100%) invert(78%) sepia(24%) saturate(543%)
         hue-rotate(1deg) brightness(92%) contrast(88%)}
.brand-txt{font-family:var(--label);text-transform:uppercase;letter-spacing:.13em;
  font-size:11.5px;font-weight:700;color:var(--gold-light);line-height:1.35}
.brand-txt small{display:block;color:#8C857C;letter-spacing:.1em;font-weight:400}

/* min-width:0 is required: a flex child will not shrink below its content
   width without it, so the nav would push the user block off the bar. */
.top nav{display:flex;gap:1px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.top nav a{color:#B9B2A9;padding:8px 12px;border-radius:var(--r-sm);font-size:11.5px;
  white-space:nowrap;border:none}
.top nav a:hover{background:#1B1E27;color:var(--paper)}
.top nav a.on{background:var(--gold);color:#fff}
.who{font-size:12.5px;color:#8C857C;display:flex;align-items:center;gap:14px;flex:none}
.who .out{color:var(--gold-light);border:none;font-family:var(--label);
  text-transform:uppercase;letter-spacing:.07em;font-size:11px;font-weight:700}

main{max-width:1280px;margin:0 auto;padding:30px 22px 90px}

/* -------------------------------------------------------------- flashes */
.flash{max-width:1280px;margin:16px auto -6px;padding:12px 16px;border-radius:var(--r);
  font-size:14px;border:1px solid;display:flex;gap:10px;align-items:flex-start}
.flash.ok{background:var(--ok-bg);color:#0F4A25;border-color:#B5D6BF}
.flash.bad{background:var(--bad-bg);color:#7A1F18;border-color:#E8BDB6}
.flash::before{font-weight:700;flex:none}
.flash.ok::before{content:"✓"} .flash.bad::before{content:"!"}

/* ------------------------------------------------------- cards + tables */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;margin-bottom:18px;box-shadow:var(--shadow)}
.card h2:first-child{margin-top:0}

.grid{width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.grid th{background:var(--surface-warm-2);text-align:left;font-size:11px;
  color:#4E453B;padding:11px 13px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.grid td{padding:11px 13px;border-top:1px solid var(--line);vertical-align:middle}
.grid tbody tr:first-child td{border-top:none}
.grid tbody tr:hover{background:var(--surface-warm)}
.grid tr.changed{animation:flash 1.8s ease-out}
@keyframes flash{from{background:#F8EEDC}to{background:transparent}}
.grid .r,.grid th.r{text-align:right}

/* The client's colour text runs long ("Peacock Blue with Magenta, brown ivory
   & multicolour motifs"). Left free it wraps to four lines and the table stops
   being scannable, so it is clamped to two with the full text on hover. */
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35}
.col-code{width:96px} .col-colour{width:24%} .col-fabric{width:15%}
.col-money{width:88px} .col-state{width:120px} .col-vis{width:132px}
.col-tiny{width:56px}
.grid td{line-height:1.45}

/* ---------------------------------------------------------------- chips */
.chip{display:inline-block;padding:3px 9px;border-radius:99px;font-size:10.5px;
  border:1px solid transparent;line-height:1.45}
.chip.available{background:var(--ok-bg);color:#0F4A25;border-color:#B5D6BF}
.chip.reserved {background:var(--warn-bg);color:#6E4706;border-color:#E4CFA4}
.chip.sold     {background:var(--surface-warm-2);color:#4E453B;border-color:var(--accent-warm)}
.chip.withdrawn,.chip.hidden{background:var(--bad-bg);color:#7A1F18;border-color:#E8BDB6}
.chip.online   {background:var(--surface-cool);color:#25313F;border-color:#B6C3D1}
.chip.store    {background:var(--surface-warm);color:#5C430E;border-color:var(--accent-warm)}
.chip.done     {background:var(--ok-bg);color:#0F4A25;border-color:#B5D6BF}
.chip.pending  {background:var(--surface-cool-2);color:#4A5260;border-color:#CFD6DD}

/* ---------------------------------------------------------------- forms */
label{display:block;font-size:12.5px;color:#4E453B;margin-bottom:13px;font-weight:700}
label .muted{font-weight:400}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);font:400 15px var(--body);background:#fff;margin-top:5px;color:var(--ink)}
textarea{line-height:1.6;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:-1px;
  border-color:var(--gold)}
input::placeholder{color:#A79C90}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.check{display:flex;align-items:center;gap:9px;font-weight:400}
.check input{width:auto;margin:0;accent-color:var(--gold)}
fieldset{border:1px solid var(--accent-warm);background:var(--surface-warm);
  border-radius:var(--r);padding:14px 16px 2px;margin:0 0 14px}
legend{padding:0 7px}

button{font:700 12px var(--label);text-transform:uppercase;letter-spacing:.08em;
  cursor:pointer;border-radius:var(--r-sm);padding:11px 20px;border:1px solid transparent}
.primary{background:var(--gold);color:#fff}
.primary:hover{background:#7A6430}
.primary:disabled{background:var(--accent-warm);color:#7A6E62;cursor:default}
.big{padding:15px 36px;font-size:13px;margin-top:18px}
.ghost{background:#fff;border-color:var(--line-strong);color:#4E453B}
.ghost:hover{background:var(--surface-warm);border-color:var(--accent-warm)}
.x{background:none;border:none;color:#A79C90;font-size:20px;padding:0 6px;line-height:1}
.x:hover{color:var(--bad)}

/* ------------------------------------------------------------------ POS */
.pos-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start}

.line{padding:11px 0;border-top:1px solid var(--line)}
.line:first-child{border-top:none;padding-top:0}
.line-main{display:grid;grid-template-columns:1fr 116px 96px 30px;gap:9px;align-items:center}
.line-main input{margin-top:0}
.line .code{font-family:ui-monospace,Menlo,monospace;font-weight:700;letter-spacing:.03em;
  font-size:16px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.desc{font-size:12.5px;line-height:1.45;margin-top:6px;min-height:18px}
.desc.ok{color:var(--ok)} .desc.bad{color:var(--bad);font-weight:700} .desc.warn{color:var(--warn)}

.total{margin-top:18px;padding-top:15px;border-top:2px solid var(--ink);
  display:flex;justify-content:space-between;align-items:baseline}
.total span{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;
  font-size:12px;font-weight:700;color:var(--muted)}
.total strong{font-family:var(--display);font-weight:600;font-size:32px;
  font-variation-settings:"opsz" 48;font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:15px;
  margin-bottom:28px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:17px 19px;box-shadow:var(--shadow);transition:box-shadow .18s,transform .18s}
.tile:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.tile .n{font-family:var(--display);font-weight:600;font-size:31px;line-height:1.05;
  font-variation-settings:"opsz" 48;font-variant-numeric:tabular-nums}
.tile .k{font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.4;
  text-transform:uppercase;letter-spacing:.07em;font-weight:700;font-family:var(--label)}
.tile.alert{border-color:#E8BDB6;background:var(--bad-bg)}
.tile.alert .n{color:var(--bad)}

.bar{height:6px;background:var(--surface-warm-2);border-radius:99px;overflow:hidden;min-width:64px}
.bar i{display:block;height:100%;background:var(--gold);border-radius:99px}

.thumb{width:42px;height:57px;object-fit:cover;border-radius:3px;
  background:var(--surface-warm-2);display:block;border:1px solid var(--line)}

/* --------------------------------------------------------- auto-populate */
.recall{background:var(--surface-warm);border:1px solid var(--accent-warm);
  border-left:3px solid var(--gold);border-radius:var(--r);padding:12px 15px;
  margin:2px 0 15px;font-size:13px;line-height:1.55}
.recall-head{font-family:var(--display);font-weight:600;font-size:18px;
  font-variation-settings:"opsz" 28;margin-bottom:3px}
.recall-line{margin-top:3px}
.prefilled{background:var(--surface-warm);border-color:var(--accent-warm)}

/* ------------------------------------------------------- integrations */
.int-row{display:flex;align-items:flex-start;gap:14px;padding:15px 0;
  border-top:1px solid var(--line)}
.int-row:first-child{border-top:none}
.dot{width:9px;height:9px;border-radius:99px;flex:none;margin-top:6px}
.dot.on{background:var(--ok)} .dot.off{background:var(--accent-warm)} .dot.err{background:var(--bad)}
.locked{opacity:.5}

/* -------------------------------------------------------------- footer */
.foot{position:fixed;bottom:0;left:0;right:0;background:var(--paper);
  border-top:1px solid var(--line);padding:9px 22px;font-size:12px;color:var(--muted);
  display:flex;gap:22px;justify-content:space-between;align-items:center;z-index:20;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.06em}

/* --------------------------------------------------------------- login */
.auth-wrap{display:grid;place-items:center;min-height:100vh;background:var(--ink-deep);
  margin:0;padding:24px}
.auth-card{width:376px;background:var(--paper);border-radius:12px;padding:34px 32px 28px;
  box-shadow:0 24px 70px rgba(0,0,0,.45)}
.auth-logo{display:block;margin:0 auto 20px;width:172px;height:auto}
.auth-card h1{font-size:20px;text-align:center;font-variation-settings:"opsz" 30;
  margin-bottom:2px}
.auth-sub{text-align:center;font-family:var(--label);text-transform:uppercase;
  letter-spacing:.14em;font-size:10.5px;color:var(--muted);font-weight:700;margin:0 0 24px}

@media (max-width:960px){
  .pos-grid,.row{grid-template-columns:1fr}
  .line-main{grid-template-columns:1fr 92px 78px 26px;gap:7px}
  .top{flex-wrap:wrap;height:auto;padding:11px 16px;gap:12px}
  .top nav{order:3;width:100%}
  .brand{border-right:none;padding-right:0}
  main{padding:22px 16px 100px}
  h1{font-size:26px}
  .grid{display:block;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}