/* Truck Trade Tyres — Ops
   A light, high-contrast, thumb-first tool for daily phone/warehouse use.
   Same family (Oswald/Inter/Roboto Mono, amber accent) as the public site,
   but tuned for legibility and fast one-handed entry rather than editorial impact. */

:root{
  --bg:        #f6f5f1;
  --surface:   #ffffff;
  --surface-2: #fbfaf7;
  --border:    #e4e0d5;
  --ink:       #1b1d16;
  --ink-soft:  #6b6e62;
  --ink-faint: #9a9d8f;
  --accent:    #b5760a;   /* deep amber — legible as text/icon on white */
  --accent-fill: #ffc42d; /* bright amber — for filled buttons */
  --accent-ink: #1a1400;
  --accent-bg: #fff3d9;
  --good:      #1f8a4c;
  --good-bg:   #e6f4ea;
  --warn:      #b5760a;
  --warn-bg:   #fff3d9;
  --bad:       #c23b3b;
  --bad-bg:    #fbeaea;
  --shadow: 0 1px 2px rgba(27,29,22,0.06), 0 1px 1px rgba(27,29,22,0.04);

  --display: "Oswald", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;
  --nav-h: 64px;
  --topbar-h: 56px;
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); text-transform:uppercase; letter-spacing:0.01em; margin:0; font-weight:600; }
p{ margin:0; }
::selection{ background:var(--accent-fill); color:var(--accent-ink); }

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ============ App shell ============ */
#app-root{ display:none; min-height:100%; padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); }
#app-root.ready{ display:block; }

.topbar{
  position:sticky; top:0; z-index:30;
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px;
  padding-top:env(safe-area-inset-top);
}
.topbar h1{ font-size:16px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 8px; }
.topbar-actions{ display:flex; gap:4px; align-items:center; flex-shrink:0; }
.icon-btn{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--ink); border-radius:8px; flex-shrink:0;
}
.icon-btn:active{ background:var(--surface-2); }
.back-btn{ display:flex; align-items:center; gap:4px; color:var(--ink-soft); font-size:13px; font-family:var(--display); text-transform:uppercase; letter-spacing:0.03em; background:none; border:none; padding:8px 4px; flex-shrink:0; }

main#view{ padding:16px 14px 40px; max-width:640px; margin:0 auto; }

/* ============ Bottom nav ============ */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--surface);
  border-top:1px solid var(--border);
  display:flex;
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--ink-faint); font-size:10.5px; font-family:var(--display);
  text-transform:uppercase; letter-spacing:0.03em;
}
.bottom-nav a.active{ color:var(--accent); }
.bottom-nav svg{ width:22px; height:22px; }

/* ============ Cards / lists ============ */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:16px; box-shadow:var(--shadow);
}
.card + .card{ margin-top:12px; }
.stack{ display:flex; flex-direction:column; gap:12px; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.section-title{
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-faint); margin:22px 0 10px;
}
.section-title:first-child{ margin-top:0; }

.list-item{
  display:flex; align-items:center; gap:12px;
  padding:14px 4px; border-bottom:1px solid var(--border);
}
.list-item:last-child{ border-bottom:none; }
.list-item .main{ flex:1; min-width:0; }
.list-item .title{ font-size:15px; font-weight:600; }
.list-item .sub{ font-size:13px; color:var(--ink-soft); margin-top:2px; }
.list-item .meta{ text-align:right; flex:none; }
.list-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:2px 14px; box-shadow:var(--shadow); }

.empty{
  text-align:center; padding:48px 20px; color:var(--ink-faint); font-size:14px;
}
.empty svg{ margin-bottom:10px; opacity:0.5; }

.spinner-wrap{ display:flex; justify-content:center; padding:48px 0; }
.spinner{
  width:26px; height:26px; border-radius:50%;
  border:3px solid var(--border); border-top-color:var(--accent);
  animation:spin 0.7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spinner{ animation-duration:1.6s; } }

/* ============ Badges ============ */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--display); font-size:11px; font-weight:500; letter-spacing:0.04em;
  text-transform:uppercase; padding:4px 9px; border-radius:100px;
}
.badge-warn{ background:var(--warn-bg); color:var(--warn); }
.badge-good{ background:var(--good-bg); color:var(--good); }
.badge-bad{ background:var(--bad-bg); color:var(--bad); }
.badge-neutral{ background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--border); }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-weight:600; font-size:13.5px; letter-spacing:0.04em;
  text-transform:uppercase; padding:13px 20px; border-radius:10px; border:1px solid transparent;
  min-height:46px;
}
.btn:active{ transform:scale(0.98); }
.btn-primary{ background:var(--accent-fill); color:var(--accent-ink); }
.btn-secondary{ background:var(--surface); color:var(--ink); border-color:var(--border); }
.btn-danger{ background:var(--bad-bg); color:var(--bad); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; min-height:36px; font-size:12px; }
.btn[disabled]{ opacity:0.5; }

.fab{
  position:fixed; right:16px; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); z-index:35;
  width:54px; height:54px; border-radius:50%; background:var(--accent-fill); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; border:none; box-shadow:0 6px 16px rgba(181,118,10,0.35);
}
.fab:active{ transform:scale(0.95); }

/* ============ Forms ============ */
.field{ margin-bottom:16px; }
.field label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:7px;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:13px 14px; font-size:15.5px; color:var(--ink); min-height:46px;
}
.field textarea{ min-height:80px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hint{ font-size:12px; color:var(--ink-faint); margin-top:6px; }
.form-error{
  background:var(--bad-bg); color:var(--bad); border-radius:10px; padding:12px 14px; font-size:13.5px;
  margin-bottom:16px;
}
fieldset{ border:none; padding:0; margin:0; }

/* Segmented filter */
.segmented{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.segmented::-webkit-scrollbar{ display:none; }
.segmented button{
  flex:none; background:var(--surface); border:1px solid var(--border); color:var(--ink-soft);
  font-family:var(--display); font-size:12.5px; letter-spacing:0.03em; text-transform:uppercase;
  padding:9px 14px; border-radius:100px; white-space:nowrap;
}
.segmented button.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

.search-box{ position:relative; margin-bottom:16px; }
.search-box svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-faint); }
.search-box input{ padding-left:40px; }

/* Stat tiles (dashboard) */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stat-tile{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:var(--shadow); }
.stat-tile .num{ font-family:var(--display); font-size:26px; }
.stat-tile .label{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.stat-tile.alert{ background:var(--bad-bg); border-color:transparent; }
.stat-tile.alert .num{ color:var(--bad); }

/* Quick actions */
.quick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.quick-grid a{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 6px;
  font-family:var(--display); font-size:10.5px; text-transform:uppercase; letter-spacing:0.02em; color:var(--ink);
  box-shadow:var(--shadow);
}
.quick-grid svg{ color:var(--accent); }

/* Order/stock detail rows */
.kv{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:14px; gap:12px; }
.kv:last-child{ border-bottom:none; }
.kv dt{ color:var(--ink-soft); }
.kv dd{ margin:0; text-align:right; }

.checkline{
  display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--border);
}
.checkline:last-child{ border-bottom:none; }
.checkline input[type=checkbox]{ width:20px; height:20px; accent-color:var(--accent-fill); flex:none; }

/* Toast */
#toast{
  position:fixed; left:50%; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
  transform:translateX(-50%) translateY(20px); z-index:60;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:10px; font-size:13.5px;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  max-width:90vw; text-align:center;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#toast.error{ background:var(--bad); }

/* Login screen */
.login-screen{
  min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; background:var(--bg); gap:28px;
}
.login-logo{ display:flex; flex-direction:column; align-items:center; gap:2px; line-height:0.95; }
.login-logo span{ font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:0.02em; }
.login-logo span:nth-child(2){ color:var(--accent); }
.login-card{ width:100%; max-width:340px; }
.pin-input{
  width:100%; text-align:center; font-family:var(--mono); font-size:28px; letter-spacing:0.5em;
  padding:16px 14px 16px 20px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
}
.pin-input:focus{ outline:none; border-color:var(--accent); }

/* Print (invoice) */
@media print{
  .bottom-nav, .topbar, .fab, #toast{ display:none !important; }
  main#view{ padding:0; max-width:none; }
  body{ background:#fff; }
}

@media (max-width:340px){
  .quick-grid{ grid-template-columns:repeat(2,1fr); }
}