/* ==========================================================================
   Trade Management System — interface styles

   Colour carries one meaning each. Steel-blue is the system's own voice —
   used for the brand, navigation, and primary actions, nothing else.
   Construction-amber is reserved exclusively for "this needs attention":
   low stock and overdue credit. Nothing else may use it, so a warm colour
   anywhere on screen always means the same thing: act on this.

   Identifiers — SKUs, batch numbers, quantities, money — are set in
   monospace throughout, since staff read them off delivery notes and
   invoices where an ambiguous character is a costly mistake.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --ink:        #1B1A18;
  --ink-2:      #26251F;
  --ink-3:      #34322A;
  --paper:      #F5F3EE;
  --surface:    #FFFFFF;

  --brand:      #1E5C7A;
  --brand-lift: #24728F;
  --brand-soft: #EAF3F6;

  --amber:      #B4691E;
  --amber-soft: #FBF1E4;
  --rust:       #A3321F;
  --rust-soft:  #FBEEEB;
  --green:      #2C6E4F;
  --green-soft: #EAF5EF;

  --line:       #E1DDD3;
  --line-soft:  #EDEAE2;
  --muted:      #6B6659;

  --sans: 'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --head: 'Barlow Semi Condensed', var(--sans);
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --rail: 232px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;

  --shadow: 0 1px 2px rgba(27,26,24,.06), 0 4px 16px rgba(27,26,24,.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

a { color: var(--brand); }
code, .mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--brand-lift); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------- controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 9px 16px; border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-lift); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.btn-danger { background: var(--rust); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn-block { width: 100%; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 5px; }

input, select, textarea {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink);
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease;
}
input.mono, input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(30,92,122,.13); }
input::placeholder { color: #9C9788; }
textarea { resize: vertical; min-height: 76px; }

/* ----------------------------------------------------------------- layout */

.app { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; transition: grid-template-columns .18s ease; }
.app.nav-collapsed { grid-template-columns: 0 1fr; }

.app.nav-collapsed .rail { opacity: 0; pointer-events: none; }

.rail {
  background: var(--ink); color: #C9CDC5; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; min-width: 0; overflow: hidden; transition: opacity .15s ease;
}
.rail-brand { padding: 20px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.rail-brand .mark { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--brand-lift); display: block; margin-bottom: 3px; }
.rail-brand .name { font-family: var(--head); font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.01em; line-height: 1.3; }

.rail-nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.rail-group { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #6B7168; padding: 14px 10px 6px; }

.rail-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--r-md);
  color: #C9CDC5; text-decoration: none; font-size: 14px; font-weight: 500; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left; font-family: var(--sans);
  transition: background .13s ease, color .13s ease;
}
.rail-link:hover { background: var(--ink-2); color: #fff; }
.rail-link.on { background: var(--ink-3); color: #fff; box-shadow: inset 2px 0 0 var(--brand-lift); }
.rail-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; }
.rail-link.on svg { opacity: 1; }

.rail-badge { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 700; background: var(--rust); color: #fff; padding: 1px 6px; border-radius: 20px; }

.rail-foot { padding: 14px; border-top: 1px solid rgba(255,255,255,.07); }
.rail-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rail-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.rail-user-meta { min-width: 0; }
.rail-user-meta .n { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-user-meta .r { font-size: 11px; color: #7E8579; text-transform: capitalize; }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 60px; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; padding: 0 24px; position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 18px; font-weight: 700; }
.topbar .branch { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); border: 1px solid var(--line); padding: 3px 9px; border-radius: 20px; }
.topbar .spacer { flex: 1; }

.view { padding: 24px; max-width: 1400px; width: 100%; }
.view-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.view-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.view-head .spacer { flex: 1; }

/* ------------------------------------------------------------------ cards */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.card-head { padding: 15px 18px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 12px; }
.card-head h2 { font-size: 15px; font-weight: 700; }
.card-head .spacer { flex: 1; }
.card-body { padding: 18px; }

/* Metric tiles ------------------------------------------------------------*/

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
.tile .label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tile .value { font-family: var(--mono); font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.tile .foot { font-size: 12px; color: var(--muted); margin-top: 6px; }
.tile .foot .up   { color: var(--green); font-weight: 600; }
.tile .foot .down { color: var(--rust);  font-weight: 600; }
.tile.alert-warn { border-color: #E8CBA6; background: var(--amber-soft); }
.tile.alert-warn .value, .tile.alert-warn .label { color: var(--amber); }
.tile.alert-bad  { border-color: #EBC0B8; background: var(--rust-soft); }
.tile.alert-bad .value, .tile.alert-bad .label  { color: var(--rust); }

/* -------------------------------------------------------- stock cover
   Signature element. Every fast-moving product with real stock, plotted as
   a bar sized by days of cover remaining at current sales pace — the risk
   that actually threatens this business is running out, not expiring.
   -------------------------------------------------------------------------*/

.cover-list { padding: 6px 18px 14px; }
.cover-row { display: grid; grid-template-columns: 1fr 90px 46px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.cover-row:last-child { border-bottom: none; }
.cover-name { font-size: 13px; font-weight: 500; }
.cover-name .s { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.cover-track { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.cover-fill { height: 100%; border-radius: 4px; background: var(--green); }
.cover-fill.risk-warning { background: #C9932F; }
.cover-fill.risk-critical { background: var(--rust); }
.cover-days { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--muted); }
.cover-days.risk-critical { color: var(--rust); font-weight: 700; }
.cover-days.risk-warning { color: var(--amber); font-weight: 700; }
.cover-empty { padding: 30px 8px; text-align: center; color: var(--muted); font-size: 13px; }

/* Sparkline ---------------------------------------------------------------*/

.spark { width: 100%; height: 140px; display: block; }
.spark path.line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark path.area { fill: rgba(30,92,122,.08); stroke: none; }
.spark circle { fill: var(--brand); }
.spark text { font-family: var(--mono); font-size: 9px; fill: var(--muted); }

/* ------------------------------------------------------------------ table */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #FAF9F6; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.id { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.t-name { font-weight: 500; }
.t-sub  { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------- pill */

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.pill-ok       { background: var(--green-soft); color: var(--green); }
.pill-warning  { background: var(--amber-soft); color: var(--amber); }
.pill-critical { background: var(--rust-soft);  color: var(--rust); }
.pill-expired  { background: var(--rust);       color: #fff; }
.pill-muted    { background: var(--line-soft);  color: var(--muted); }
.pill-brand    { background: var(--brand-soft); color: var(--brand); }

/* ------------------------------------------------------------ point of sale */

.pos { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
@media (max-width: 1060px) { .pos { grid-template-columns: 1fr; } }

.pos-search { position: relative; margin-bottom: 14px; }
.pos-search input { padding-left: 38px; font-size: 15px; padding-top: 11px; padding-bottom: 11px; }
.pos-search svg { position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; color: var(--muted); }

.scan-row { display: flex; gap: 10px; margin-bottom: 12px; }
.scan-field { position: relative; flex: 1; border: 1.5px solid var(--brand); border-radius: var(--r-md); background: var(--brand-soft); display: flex; align-items: center; }
.scan-field svg { width: 17px; height: 17px; color: var(--brand); margin-left: 12px; flex-shrink: 0; }
.scan-field input { border: none; background: transparent; padding: 10px 12px; font-size: 14px; color: var(--brand); }
.scan-field input:focus { outline: none; box-shadow: none; }
.scan-field input::placeholder { color: #4E85A0; }

.pos-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pos-item { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; cursor: pointer; font-family: var(--sans); transition: border-color .13s ease, transform .13s ease; }
.pos-item:hover:not(:disabled) { border-color: var(--brand); transform: translateY(-1px); }
.pos-item:disabled { opacity: .45; cursor: not-allowed; }
.pos-item .n { font-weight: 600; font-size: 13.5px; line-height: 1.3; margin-bottom: 3px; }
.pos-item .s { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.pos-item .row { display: flex; justify-content: space-between; align-items: center; }
.pos-item .p { font-family: var(--mono); font-weight: 700; font-size: 13.5px; }
.pos-item-img { width: 100%; height: 68px; border-radius: var(--r-sm); background: var(--line-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 8px; }
.pos-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pos-item-img svg { width: 24px; height: 24px; color: #A29C8A; }

.cart { position: sticky; top: 80px; }
.cart-lines { max-height: 36vh; overflow-y: auto; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.cart-line .n { font-size: 13px; font-weight: 500; line-height: 1.35; }
.cart-line .b { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cart-line .ctrl { display: flex; align-items: center; gap: 6px; }

.qty-btn { width: 24px; height: 24px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; font-size: 15px; line-height: 1; color: var(--ink); display: grid; place-items: center; }
.qty-btn:hover { border-color: var(--brand); color: var(--brand); }
.qty-val { font-family: var(--mono); font-weight: 700; min-width: 26px; text-align: center; }

.cart-total { border-top: 2px solid var(--ink); margin-top: 12px; padding-top: 12px; }
.total-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.total-row .v { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.total-row.grand { font-size: 19px; font-weight: 700; padding-top: 9px; }
.total-row.grand .v { font-size: 21px; }

/* ------------------------------------------------------------------ modal */

.modal-back { position: fixed; inset: 0; background: rgba(27,26,24,.45); display: grid; place-items: center; padding: 20px; z-index: 100; }
.modal { background: var(--surface); border-radius: var(--r-lg); width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(27,26,24,.28); }
.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; position: sticky; top: 0; background: var(--surface); }
.modal-head h2 { font-size: 17px; }
.modal-head .spacer { flex: 1; }
.modal-body { padding: 22px; }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--surface); }
.x-btn { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--muted); padding: 0 4px; }
.x-btn:hover { color: var(--ink); }

/* ------------------------------------------------------------------ toast */

.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 9px; z-index: 200; max-width: 380px; }
.toast { background: var(--ink); color: #EDF0EA; padding: 12px 16px; border-radius: var(--r-md); font-size: 13.5px; line-height: 1.45; box-shadow: 0 8px 28px rgba(27,26,24,.3); animation: toast-in .18s ease-out; border-left: 3px solid var(--brand-lift); }
.toast.bad { border-left-color: var(--rust); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Product photos ------------------------------------------------------------*/

.photo-row { display: flex; gap: 16px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.photo-preview { width: 84px; height: 84px; flex-shrink: 0; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--line-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-preview svg { width: 30px; height: 30px; color: #A29C8A; }
.thumb { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--line-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb svg { width: 16px; height: 16px; color: #A29C8A; }

/* ------------------------------------------------------------------ misc */

.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty .h { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.empty .p { font-size: 13px; max-width: 380px; margin: 0 auto 16px; line-height: 1.6; }
.loading { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
@media (max-width: 620px) { .grid2 { grid-template-columns: 1fr; } }

.row-gap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mt { margin-top: 18px; }
.hide { display: none !important; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: 60; transform: translateX(-100%); transition: transform .2s ease; }
  .rail.open { transform: none; }
  .view { padding: 16px; }
  .topbar { padding: 0 16px; }
}
.rail-toggle { display: inline-grid; }