/* ============================================================
   IT Asset Helpdesk — Hyundai "Modern Premium" design system
   Tokens straight from Helpdesk_App_UIUX_Spec.md
   ============================================================ */

:root {
  /* Brand navy */
  --navy-900: #001E50;
  --navy-700: #003082;
  --navy-500: #2E6BD0;
  --navy-100: #E7EEF8;

  /* Sand surfaces */
  --sand-50: #F6F4EF;
  --sand-100: #EDEAE2;

  /* Ink text */
  --ink-900: #1A1A1A;
  --ink-500: #60605B;
  --ink-300: #BFBAAF;
  --white: #FFFFFF;

  /* Status */
  --success: #1E8E5A;
  --info: #2E6BD0;
  --warning: #C9821E;
  --danger: #C0392B;
  --neutral: #60605B;

  /* Tints (status @ subtle fill) */
  --success-bg: #E7F3EC;
  --info-bg: #E7EEF8;
  --warning-bg: #FBF1E2;
  --danger-bg: #F8E9E7;
  --neutral-bg: #EFEEEA;

  /* Geometry */
  --r-card: 12px;
  --r-btn: 8px;
  --r-pill: 999px;
  --shadow-float: 0 1px 2px rgba(0,30,80,.05), 0 14px 36px -10px rgba(0,30,80,.22);
  --shadow-soft: 0 1px 2px rgba(0, 30, 80, 0.04);

  --sidebar-w: 248px;
  --topbar-h: 64px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Type system — distinctive, premium, on-brand (not Inter/Roboto) */
  --font-sans: "Hanken Grotesk", "Hyundai Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Schibsted Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Premium tactile grain (very subtle) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--sand-50);
  color: var(--ink-900);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

/* premium tactile grain overlay — sits above surfaces, ignores pointer */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background-image: var(--grain); background-size: 160px 160px;
  opacity: .025; mix-blend-mode: multiply;
}

/* Display typography — the premium tier: page titles, hero numbers, brand */
.page-head h1, .topbar .page-title, .kpi .num, .ring-label .pct,
.lf-title, .lb-mid h1, .lb-wordmark, .detail-head h2, .brand-text b,
.sheet .s-asset h3, .decision h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}

.mono { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; letter-spacing: -0.2px; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--navy-100); }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }

/* ---------- Sidebar (desktop) ---------- */
.sidebar {
  width: var(--sidebar-w);
  background:
    radial-gradient(130% 50% at 0% 0%, rgba(46,107,208,.22), transparent 60%),
    linear-gradient(180deg, #052561 0%, var(--navy-900) 42%, #00102e 100%);
  color: #ffffff;
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; height: 100vh;
  z-index: 40;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
}
.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 22px 18px;
}
.brand .hy-logo { display: grid; place-items: center; color: #fff; flex: none; }
.brand .hy-logo svg { width: 52px; height: auto; display: block; }
.brand .brand-text b { display: block; font-size: 14px; font-weight: 600; letter-spacing: .2px; }
.brand .brand-text span { font-size: 11px; color: #9fb3d4; letter-spacing: .3px; }

.nav { padding: 8px 12px; flex: 1; overflow-y: auto; }
.nav-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6c84ab; padding: 16px 12px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px; border-radius: 8px;
  color: #c5d3ea; font-size: 14px; text-align: left;
  transition: background .18s var(--ease), color .18s var(--ease);
  position: relative;
}
.nav-item svg { width: 19px; height: 19px; flex: none; stroke-width: 1.8; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: var(--navy-700); color: #fff; font-weight: 500; }
.nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--navy-500);
}
.nav-item .badge { margin-left: auto; background: var(--navy-500); color: #fff; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }

.sidebar-foot { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); }
.role-switch { font-size: 11px; color: #8aa0c4; margin-bottom: 8px; letter-spacing: .3px; }
.role-pill {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: rgba(255,255,255,.06); border-radius: 10px; padding: 8px 10px; color: #fff;
  transition: background .18s;
}
.role-pill:hover { background: rgba(255,255,255,.12); }
.role-pill .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-500); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.role-pill .who { text-align: left; line-height: 1.2; }
.role-pill .who b { font-size: 13px; font-weight: 600; display: block; }
.role-pill .who span { font-size: 11px; color: #9fb3d4; }
.role-pill .chev { margin-left: auto; opacity: .6; }

/* ---------- Main area ---------- */
.main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FBFAF7 0%, var(--sand-50) 360px); }

/* refined keyboard focus ring */
:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; border-radius: 5px; }
.btn:focus-visible, .nav-item:focus-visible { outline-offset: 3px; }

.topbar {
  height: var(--topbar-h); background: rgba(246,244,239,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sand-100);
  display: flex; align-items: center; gap: 16px; padding: 0 28px;
  position: sticky; top: 0; z-index: 30;
}
.topbar .page-title { font-size: 18px; font-weight: 600; color: var(--navy-900); }
.topbar .crumb { color: var(--ink-500); font-size: 13px; }
.global-search {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--sand-100); border-radius: var(--r-pill);
  padding: 8px 14px; width: 280px; color: var(--ink-500); font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}
.global-search:focus-within { border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--navy-100); }
.global-search input { border: none; outline: none; flex: 1; font-size: 14px; background: transparent; color: var(--ink-900); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-500); transition: background .18s; position: relative; }
.icon-btn:hover { background: var(--sand-100); }
.icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 1.5px solid var(--sand-50); }

.content { padding: 28px; max-width: 1240px; width: 100%; margin: 0 auto; }

/* ---------- Screen transitions ---------- */
.screen { display: none; }
.screen.active { display: block; animation: screenIn .32s var(--ease); }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.page-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; font-weight: 600; color: var(--navy-900); }
.page-head .sub { color: var(--ink-500); font-size: 14px; }
.page-head .spacer { flex: 1; }

/* ---------- Cards ---------- */
.card { background: #fff; border: 1px solid var(--sand-100); border-radius: var(--r-card); padding: 22px; }
.card.tight { padding: 16px; }
.card-title { font-size: 16px; font-weight: 600; color: var(--navy-900); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.card-sub { font-size: 13px; color: var(--ink-500); }
.grid { display: grid; gap: 18px; }
.cols-2 { grid-template-columns: 1.6fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-btn); font-size: 14px; font-weight: 500; transition: background .16s, transform .12s, box-shadow .16s; }
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: linear-gradient(180deg, #0a3b97 0%, var(--navy-700) 100%); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 2px 8px -2px rgba(0,48,130,.45); }
.btn-primary:hover { background: linear-gradient(180deg, #2e6bd0 0%, #1f56b4 100%); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: #fff; color: var(--navy-700); border: 1px solid var(--sand-100); }
.btn-ghost:hover { border-color: var(--navy-500); background: var(--navy-100); }
.btn-quiet { color: var(--ink-500); padding: 9px 12px; }
.btn-quiet:hover { background: var(--sand-100); color: var(--ink-900); }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background: #f3ddd9; }
.btn-sm { padding: 6px 11px; font-size: 13px; }

/* ---------- Status chip ---------- */
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; line-height: 1; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip.success { background: var(--success-bg); color: #146c43; } .chip.success .dot { background: var(--success); }
.chip.info    { background: var(--info-bg); color: var(--navy-700); } .chip.info .dot { background: var(--info); }
.chip.warning { background: var(--warning-bg); color: #8a5a10; } .chip.warning .dot { background: var(--warning); }
.chip.danger  { background: var(--danger-bg); color: #99281c; } .chip.danger .dot { background: var(--danger); }
.chip.neutral { background: var(--neutral-bg); color: var(--ink-500); } .chip.neutral .dot { background: var(--neutral); }

/* ---------- KPI strip ---------- */
.kpi { background: #fff; border: 1px solid var(--sand-100); border-radius: var(--r-card); padding: 18px 20px; position: relative; overflow: hidden; }
.kpi .label { font-size: 13px; color: var(--ink-500); display: flex; align-items: center; gap: 7px; }
.kpi .num { font-size: 34px; font-weight: 600; color: var(--navy-900); margin-top: 6px; line-height: 1; }
.kpi .trend { font-size: 12px; color: var(--ink-500); margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.kpi .trend.up { color: var(--success); }
.kpi .trend.down { color: var(--danger); }
.kpi .spark { position: absolute; right: 14px; top: 16px; opacity: .5; }
.kpi .accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }

/* ---------- Queue / activity list ---------- */
.qitem { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--sand-100); transition: background .15s; cursor: pointer; border-radius: 8px; }
.qitem:last-child { border-bottom: none; }
.qitem:hover { background: var(--sand-50); }
.qitem .q-ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.qitem .q-ic.info { background: var(--info-bg); color: var(--info); }
.qitem .q-ic.warning { background: var(--warning-bg); color: var(--warning); }
.qitem .q-ic.success { background: var(--success-bg); color: var(--success); }
.qitem .q-ic.danger { background: var(--danger-bg); color: var(--danger); }
.qitem .q-body { flex: 1; min-width: 0; }
.qitem .q-body b { font-size: 14px; font-weight: 500; }
.qitem .q-body p { font-size: 13px; color: var(--ink-500); }
.qitem .q-time { font-size: 12px; color: var(--ink-300); white-space: nowrap; }

.stagger > * { opacity: 0; animation: staggerIn .42s var(--ease) forwards; }

@keyframes staggerIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Alerts strip ---------- */
.alert-strip { display: flex; gap: 12px; flex-wrap: wrap; }
.alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13px; border: 1px solid; }
.alert.warning { background: var(--warning-bg); border-color: #f0dcb8; color: #8a5a10; }
.alert.danger { background: var(--danger-bg); border-color: #f0cfc9; color: #99281c; }
.alert b { font-weight: 600; }

/* ---------- Table ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.search-field { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--sand-100); border-radius: var(--r-btn); padding: 9px 13px; min-width: 280px; transition: border-color .18s, box-shadow .18s; }
.search-field:focus-within { border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--navy-100); }
.search-field input { border: none; outline: none; flex: 1; font-size: 14px; background: transparent; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fchip { padding: 7px 14px; border-radius: var(--r-pill); font-size: 13px; border: 1px solid var(--sand-100); background: #fff; color: var(--ink-500); position: relative; overflow: hidden; transition: color .2s; }
.fchip::before { content: ""; position: absolute; inset: 0; background: var(--navy-700); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease); z-index: 0; }
.fchip span { position: relative; z-index: 1; }
.fchip.on { color: #fff; border-color: var(--navy-700); }
.fchip.on::before { transform: scaleX(1); }

.tbl { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--sand-100); border-radius: var(--r-card); overflow: hidden; }
.tbl thead th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-500); font-weight: 600; padding: 13px 18px; border-bottom: 1px solid var(--sand-100); background: var(--sand-50); }
.tbl tbody td { padding: 14px 18px; border-bottom: 1px solid var(--sand-100); font-size: 14px; vertical-align: middle; }
.tbl tbody tr { transition: background .15s; cursor: pointer; position: relative; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--navy-100); }
.tbl tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--navy-700); }
.tbl .assignee { display: flex; align-items: center; gap: 9px; }
.avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: var(--navy-100); color: var(--navy-700); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.fade-out { opacity: .12 !important; }

/* ---------- Asset detail ---------- */
.detail-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; }
.detail-head .device-ic { width: 64px; height: 64px; border-radius: 14px; background: var(--navy-100); color: var(--navy-700); display: grid; place-items: center; flex: none; }

/* generated product photo thumbnails (Higgsfield) */
.device-photo { border-radius: 13px; overflow: hidden; background: #F4F1EA; border: 1px solid var(--sand-100); display: grid; place-items: center; flex: none; }
.device-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbl .device-photo { border-radius: 8px; }
.detail-head .d-meta h2 { font-size: 20px; font-weight: 600; color: var(--navy-900); }
.detail-head .d-id { color: var(--navy-700); margin: 2px 0 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.detail-head .d-id:hover { text-decoration: underline; }
.quick-actions { display: flex; gap: 9px; margin-left: auto; flex-wrap: wrap; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sand-100); margin-bottom: 20px; }
.tab { padding: 11px 16px; font-size: 14px; color: var(--ink-500); position: relative; transition: color .18s; }
.tab:hover { color: var(--ink-900); }
.tab.active { color: var(--navy-700); font-weight: 600; }
.tab.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2.5px; background: var(--navy-700); border-radius: 2px; }
.tabpane { display: none; }
.tabpane.active { display: block; animation: screenIn .28s var(--ease); }

.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.spec-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--sand-100); font-size: 14px; }
.spec-row .k { color: var(--ink-500); }
.spec-row .v { font-weight: 500; }

.warranty-bar { height: 9px; border-radius: 999px; background: var(--sand-100); overflow: hidden; margin-top: 10px; }
.warranty-bar i { display: block; height: 100%; border-radius: 999px; background: var(--success); width: 0; transition: width 1s var(--ease); }

/* Timeline */
.timeline { position: relative; padding-left: 8px; }
.tl-node { display: flex; gap: 16px; position: relative; padding-bottom: 22px; }
.tl-node:last-child { padding-bottom: 0; }
.tl-rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.tl-rail .d { width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px currentColor; flex: none; z-index: 1; }
.tl-rail .line { width: 2px; flex: 1; background: var(--sand-100); margin-top: 2px; transform: scaleY(0); transform-origin: top; }
.tl-node.draw .tl-rail .line { animation: drawLine .4s var(--ease) forwards; }
@keyframes drawLine { to { transform: scaleY(1); } }
.tl-body { padding-bottom: 4px; }
.tl-body .tl-top { display: flex; align-items: center; gap: 10px; }
.tl-body b { font-size: 14px; font-weight: 500; }
.tl-body .tl-meta { font-size: 13px; color: var(--ink-500); margin-top: 2px; }
.tl-body .tl-time { font-size: 12px; color: var(--ink-300); }

/* Documents */
.doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.doc { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px solid var(--sand-100); border-radius: 11px; transition: border-color .18s, background .18s; cursor: pointer; }
.doc:hover { border-color: var(--navy-500); background: var(--navy-100); }
.doc .doc-ic { width: 42px; height: 42px; border-radius: 9px; background: var(--sand-50); display: grid; place-items: center; color: var(--navy-700); flex: none; }
.doc b { font-size: 14px; font-weight: 500; display: block; }
.doc span { font-size: 12px; color: var(--ink-500); }
.verified-badge { margin-left: auto; }

/* ---------- Scan screen ---------- */
.scan-stage { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.viewfinder {
  position: relative; aspect-ratio: 3/4; max-height: 560px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, #2a3550 0%, #141a28 60%, #0b0f18 100%);
  display: grid; place-items: center;
}
.viewfinder .vf-noise { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.05), transparent 40%), radial-gradient(circle at 80% 70%, rgba(46,107,208,.18), transparent 45%); }
.reticle { position: relative; width: 230px; height: 230px; }
.reticle .corner { position: absolute; width: 38px; height: 38px; border: 4px solid var(--navy-500); transition: all .12s var(--ease); }
.reticle .tl { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 14px; }
.reticle .tr { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 14px; }
.reticle .bl { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 14px; }
.reticle .br { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 14px; }
.reticle.breathing { animation: breathe 2s var(--ease) infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.reticle.found .corner { border-color: var(--success); }
.reticle.found { animation: snap .12s var(--ease); }
@keyframes snap { from { transform: scale(1.06); } to { transform: scale(1); } }
.reticle.fail { animation: shake .12s 2; }
.reticle.fail .corner { border-color: var(--danger); }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.scanline { position: absolute; left: 6px; right: 6px; height: 2px; background: linear-gradient(90deg, transparent, var(--navy-500), transparent); top: 10%; animation: sweep 2.2s linear infinite; }
@keyframes sweep { 0% { top: 6%; } 50% { top: 94%; } 100% { top: 6%; } }
.vf-help { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: #e6ecf6; font-size: 14px; }
.vf-help .pill { background: rgba(0,0,0,.4); backdrop-filter: blur(4px); padding: 8px 16px; border-radius: 999px; display: inline-block; }
.vf-tag { position: absolute; top: 18px; left: 18px; background: rgba(0,0,0,.4); color: #fff; font-size: 12px; padding: 5px 11px; border-radius: 999px; display: flex; align-items: center; gap: 7px; }
.vf-tag .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .3; } }

.scan-side .card + .card { margin-top: 18px; }
.manual { display: flex; gap: 10px; margin-top: 14px; }
.manual input { flex: 1; border: 1px solid var(--sand-100); border-radius: var(--r-btn); padding: 10px 13px; font-size: 14px; font-family: "SF Mono", monospace; outline: none; }
.manual input:focus { border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--navy-100); }
.recent-scan { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--sand-100); font-size: 14px; }
.recent-scan:last-child { border-bottom: none; }

/* Bottom sheet */
.sheet-scrim { position: fixed; inset: 0; background: rgba(0,30,80,.28); backdrop-filter: blur(2px); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .25s; }
.sheet-scrim.show { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%); width: min(520px, 94vw); background: #fff; border-radius: 22px 22px 0 0; box-shadow: var(--shadow-float); z-index: 61; padding: 10px 24px 28px; transition: transform .42s var(--spring), visibility .42s; visibility: hidden; }
.sheet.show { transform: translate(-50%, 0); visibility: visible; }
.sheet .grab { width: 42px; height: 5px; border-radius: 999px; background: var(--ink-300); margin: 8px auto 18px; }
.sheet .s-asset { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.sheet .s-asset .device-ic { width: 52px; height: 52px; border-radius: 12px; background: var(--navy-100); color: var(--navy-700); display: grid; place-items: center; flex: none; }
.sheet .s-asset h3 { font-size: 17px; font-weight: 600; }
.sheet .s-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.sheet .s-actions .btn { justify-content: center; padding: 13px; }

/* ---------- Stepper ---------- */
.stepper { display: flex; align-items: center; margin: 8px 0 4px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; width: 92px; text-align: center; }
.step .sdot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sand-100); color: var(--ink-500); font-size: 13px; font-weight: 600; transition: all .3s; }
.step.done .sdot { background: var(--navy-700); color: #fff; }
.step.current .sdot { background: var(--navy-700); color: #fff; box-shadow: 0 0 0 5px var(--navy-100); animation: pulseDot 1.6s infinite; }
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 5px var(--navy-100); } 50% { box-shadow: 0 0 0 9px rgba(46,107,208,.12); } }
.step .slabel { font-size: 12px; color: var(--ink-500); }
.step.done .slabel, .step.current .slabel { color: var(--navy-900); font-weight: 500; }
.step-line { flex: 1; height: 2.5px; background: var(--sand-100); position: relative; margin: 0 -6px; top: -15px; border-radius: 2px; }
.step-line i { position: absolute; inset: 0; background: var(--navy-700); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); border-radius: 2px; }
.step-line.fill i { transform: scaleX(1); }

/* request cards */
.req-card { border: 1px solid var(--sand-100); border-radius: 12px; padding: 18px; transition: transform .3s var(--ease), opacity .3s; }
.req-card .rc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.req-card.collapsing { transform: scale(.97); opacity: 0; }
.req-card.rejected { opacity: .5; }
.check-sweep { position: relative; overflow: hidden; }
.check-sweep::after { content: ""; position: absolute; inset: 0; background: var(--success-bg); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.check-sweep.go::after { transform: scaleX(1); }

/* ---------- Service / checklist ---------- */
.service-stage { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.checklist { display: flex; flex-direction: column; }
.cl-item { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: 10px; border: 1px solid transparent; transition: background .2s, border-color .2s; cursor: pointer; }
.cl-item:hover { background: var(--sand-50); }
.cl-item.checked { background: var(--success-bg); }
.cl-box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--ink-300); display: grid; place-items: center; flex: none; transition: all .2s; }
.cl-item.checked .cl-box { background: var(--success); border-color: var(--success); }
.cl-box svg { width: 15px; height: 15px; stroke: #fff; stroke-width: 3; stroke-dasharray: 20; stroke-dashoffset: 20; }
.cl-item.checked .cl-box svg { animation: drawCheck .3s var(--ease) forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.cl-item .cl-txt b { font-size: 14px; font-weight: 500; display: block; }
.cl-item .cl-txt span { font-size: 12px; color: var(--ink-500); }

.ring-wrap { display: grid; place-items: center; text-align: center; }
.ring { transform: rotate(-90deg); }
.ring .track { fill: none; stroke: var(--sand-100); stroke-width: 12; }
.ring .prog { fill: none; stroke: var(--navy-700); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease); }
.ring-label { margin-top: -96px; margin-bottom: 60px; }
.ring-label .pct { font-size: 30px; font-weight: 600; color: var(--navy-900); }
.ring-label .cap { font-size: 12px; color: var(--ink-500); }
.btn.bounce { animation: bounce .4s var(--spring); }
@keyframes bounce { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---------- Returns decision cards ---------- */
.decision-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.decision { border: 1.5px solid var(--sand-100); border-radius: 16px; padding: 28px; text-align: center; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s, opacity .3s; cursor: pointer; }
.decision:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); border-color: var(--navy-500); }
.decision .d-ic { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 16px; }
.decision.reuse .d-ic { background: var(--success-bg); color: var(--success); }
.decision.eol .d-ic { background: var(--neutral-bg); color: var(--neutral); }
.decision h3 { font-size: 18px; font-weight: 600; }
.decision p { font-size: 13px; color: var(--ink-500); margin-top: 6px; }
.decision.chosen { transform: scale(1.03); border-color: var(--navy-700); box-shadow: var(--shadow-float); }
.decision.dismissed { opacity: 0; transform: translateX(40px); pointer-events: none; }

.shelf-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 14px; }
.slot { aspect-ratio: 1; border: 1px solid var(--sand-100); border-radius: 9px; display: grid; place-items: center; font-size: 12px; color: var(--ink-500); transition: all .18s; cursor: pointer; }
.slot:hover { border-color: var(--navy-500); }
.slot.picked { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.slot.full { background: var(--sand-100); color: var(--ink-300); cursor: not-allowed; }

/* ---------- Disposal pipeline ---------- */
.pipeline { display: flex; gap: 0; overflow-x: auto; padding: 10px 4px 24px; }
.pstage { flex: none; width: 200px; position: relative; }
.pstage .pconnect { position: absolute; top: 19px; left: 50%; right: -50%; height: 3px; background: var(--sand-100); z-index: 0; }
.pstage:last-child .pconnect { display: none; }
.pstage .pconnect i { position: absolute; inset: 0; background: var(--success); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.pstage.done .pconnect i { transform: scaleX(1); }
.pstage .pdot { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 3px solid var(--sand-100); display: grid; place-items: center; margin: 0 auto 12px; position: relative; z-index: 1; transition: all .3s; color: var(--ink-300); }
.pstage.done .pdot { border-color: var(--success); background: var(--success); color: #fff; }
.pstage.current .pdot { border-color: var(--navy-700); color: var(--navy-700); box-shadow: 0 0 0 5px var(--navy-100); }
.pcard { background: #fff; border: 1px solid var(--sand-100); border-radius: 11px; padding: 13px; margin: 0 8px; text-align: center; }
.pcard.cur { border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--navy-100); }
.pcard .powner { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--navy-700); font-weight: 600; }
.pcard .pact { font-size: 13px; margin: 5px 0 8px; line-height: 1.35; }
.pcard .pdate { font-size: 11px; color: var(--ink-300); }
.stamp { animation: stamp .5s var(--spring); }
@keyframes stamp { 0% { transform: scale(1.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Reports ---------- */
.donut-wrap { display: flex; align-items: center; gap: 28px; }
.donut { transform: rotate(-90deg); }
.legend { display: flex; flex-direction: column; gap: 10px; }
.legend .li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.legend .li .sw { width: 12px; height: 12px; border-radius: 3px; }
.legend .li .lv { margin-left: auto; font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: 16px; height: 180px; padding-top: 10px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; justify-content: flex-end; }
.bar { width: 70%; background: var(--navy-500); border-radius: 6px 6px 0 0; transition: height .6s var(--ease); }
.bar-col .bl { font-size: 12px; color: var(--ink-500); }

.stocktake-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--sand-100); font-size: 14px; animation: slideRight .4s var(--ease); }
@keyframes slideRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.stocktake-row.mismatch { animation: slideRight .4s var(--ease), flashDanger 1s .4s; }
@keyframes flashDanger { 0%,100% { background: transparent; } 30% { background: var(--danger-bg); } }

/* ---------- Settings ---------- */
.label-preview { border: 1px dashed var(--ink-300); border-radius: 10px; padding: 18px; display: flex; align-items: center; gap: 18px; background: var(--sand-50); }
.qr-box { width: 88px; height: 88px; border-radius: 8px; background:
  repeating-conic-gradient(#1A1A1A 0% 25%, #fff 0% 50%) 0 0 / 14px 14px; border: 4px solid #fff; box-shadow: inset 0 0 0 1px var(--sand-100); flex: none; }
.seg { display: inline-flex; background: var(--sand-100); border-radius: 9px; padding: 3px; gap: 3px; }
.seg button { padding: 7px 14px; border-radius: 7px; font-size: 13px; color: var(--ink-500); transition: all .18s; }
.seg button.on { background: #fff; color: var(--navy-900); font-weight: 500; box-shadow: var(--shadow-soft); }
.toggle { width: 42px; height: 24px; border-radius: 999px; background: var(--ink-300); position: relative; transition: background .2s; flex: none; }
.toggle.on { background: var(--navy-700); }
.toggle i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s var(--ease); }
.toggle.on i { left: 21px; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--sand-100); }
.set-row:last-child { border-bottom: none; }
.set-row .sr-body { flex: 1; }
.set-row .sr-body b { font-size: 14px; font-weight: 500; display: block; }
.set-row .sr-body span { font-size: 13px; color: var(--ink-500); }

/* ---------- Toast ---------- */
.toast-host { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast { background: var(--navy-900); color: #fff; padding: 12px 18px; border-radius: 11px; font-size: 14px; box-shadow: var(--shadow-float); display: flex; align-items: center; gap: 12px; animation: toastIn .3s var(--spring); }
.toast .t-ic { color: var(--success); display: grid; place-items: center; }
.toast button { color: var(--navy-500); font-weight: 600; font-size: 13px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Role menu ---------- */
.role-menu { position: fixed; bottom: 78px; left: 16px; width: 216px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-float); z-index: 70; padding: 6px; display: none; }
.role-menu.show { display: block; animation: screenIn .2s var(--ease); }
.role-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px; text-align: left; font-size: 14px; transition: background .15s; }
.role-menu button:hover { background: var(--sand-50); }
.role-menu button.sel { background: var(--navy-100); color: var(--navy-700); font-weight: 500; }
.role-menu .rm-sep { height: 1px; background: var(--sand-100); margin: 6px 8px; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 50px 20px; color: var(--ink-500); }
.empty svg { color: var(--ink-300); margin-bottom: 14px; }

/* ---------- Misc ---------- */
.muted { color: var(--ink-500); }
.flex { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 14px; } .mt-4 { margin-top: 20px; }
.mb-3 { margin-bottom: 14px; }
.gap-row { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Mobile bottom tabs (hidden on desktop) ---------- */
.mobile-tabs { display: none; }

@media (max-width: 920px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .content { padding: 18px 16px 92px; }
  .cols-2, .cols-3, .cols-4, .scan-stage, .service-stage, .decision-row, .doc-grid, .spec-grid { grid-template-columns: 1fr; }
  .global-search { display: none; }
  .topbar { padding: 0 16px; }
  .mobile-tabs {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 64px;
    background: #fff; border-top: 1px solid var(--sand-100); z-index: 50;
    justify-content: space-around; align-items: center; padding: 0 8px;
  }
  .mtab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-500); flex: 1; }
  .mtab svg { width: 22px; height: 22px; }
  .mtab.active { color: var(--navy-700); }
  .mtab.scan-fab { margin-top: -28px; }
  .mtab.scan-fab .fab { width: 56px; height: 56px; border-radius: 50%; background: var(--navy-700); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,48,130,.4); animation: fabPulse 2.4s infinite; }
  @keyframes fabPulse { 0%,100% { box-shadow: 0 6px 18px rgba(0,48,130,.4); } 50% { box-shadow: 0 6px 26px rgba(0,48,130,.6); } }
  .kpi .num { font-size: 28px; }
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-body { background: var(--navy-900); }
.login { display: flex; min-height: 100vh; }

/* brand panel */
.login-brand {
  flex: 1.05; position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) 0 0 / 28px 28px,
    linear-gradient(118deg, rgba(2,16,42,.80) 0%, rgba(0,30,80,.55) 46%, rgba(1,12,36,.92) 100%),
    url("img/login-hero.jpg") center / cover no-repeat,
    #001233;
  padding: 56px 60px; display: flex; flex-direction: column; justify-content: space-between;
}
.login-brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: 180px 180px;
  opacity: .06; mix-blend-mode: soft-light;
}
.login-brand .lb-orbits {
  position: absolute; right: -160px; bottom: -160px; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,107,208,.18), transparent 62%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), inset 0 0 0 90px rgba(255,255,255,.015);
}
.login-brand .lb-orbits::before, .login-brand .lb-orbits::after {
  content: ""; position: absolute; border: 1px solid rgba(255,255,255,.06); border-radius: 50%;
}
.login-brand .lb-orbits::before { inset: 70px; }
.login-brand .lb-orbits::after { inset: 150px; border-color: rgba(255,255,255,.09); }
.lb-top { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.lb-logo svg { width: 58px; color: #fff; display: block; }
.lb-wordmark { font-size: 18px; font-weight: 700; letter-spacing: 7px; }
.lb-mid { position: relative; z-index: 1; max-width: 460px; }
.lb-mid h1 { font-size: 52px; font-weight: 600; line-height: 1.04; letter-spacing: -1px; }
.lb-mid p { color: #b9c8e3; font-size: 16px; line-height: 1.6; margin-top: 20px; }
.lb-feats { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 13px; }
.lb-feats li { display: flex; align-items: center; gap: 12px; color: #d6e0f2; font-size: 15px; }
.lb-tick { width: 24px; height: 24px; border-radius: 50%; background: rgba(46,107,208,.25); color: #8fb4f0; display: grid; place-items: center; font-size: 13px; flex: none; }
.lb-foot { position: relative; z-index: 1; color: #6c84ab; font-size: 13px; letter-spacing: .3px; }

/* form panel */
.login-form { flex: 1; background: var(--sand-50); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 28px; position: relative; }
.lf-card { width: min(400px, 100%); animation: screenIn .5s var(--ease); }
.lf-card.signing { animation: signOff .45s var(--ease) forwards; }
@keyframes signOff { to { opacity: 0; transform: translateY(-10px) scale(.99); } }
.lf-mobile-logo { display: none; }
.lf-title { font-size: 26px; font-weight: 600; color: var(--navy-900); }
.lf-sub { color: var(--ink-500); font-size: 14px; margin: 6px 0 26px; }

.lf-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-900); margin: 14px 0 7px; }
.lf-field { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--sand-100); border-radius: var(--r-btn); padding: 12px 14px; transition: border-color .18s, box-shadow .18s; }
.lf-field:focus-within { border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--navy-100); }
.lf-field svg { width: 18px; height: 18px; color: var(--ink-500); flex: none; }
.lf-field input { flex: 1; border: none; outline: none; font-size: 15px; background: transparent; color: var(--ink-900); }
.lf-eye { font-size: 12px; color: var(--navy-700); font-weight: 600; padding: 2px 4px; flex: none; }

.lf-row { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 22px; }
.lf-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-500); cursor: pointer; }
.lf-check input { accent-color: var(--navy-700); width: 15px; height: 15px; }
.lf-link { font-size: 13px; color: var(--navy-700); text-decoration: none; font-weight: 500; }
.lf-link:hover { text-decoration: underline; }

.lf-submit { width: 100%; justify-content: center; padding: 13px; font-size: 15px; }
.lf-or { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--ink-300); font-size: 12px; }
.lf-or::before, .lf-or::after { content: ""; flex: 1; height: 1px; background: var(--sand-100); }
.lf-sso { width: 100%; justify-content: center; padding: 12px; gap: 10px; }
.lf-sso-logo svg { width: 22px; color: var(--navy-700); display: block; }

.lf-demo { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--sand-100); }
.lf-demo-label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-500); }
.lf-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.lf-role { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--sand-100); background: #fff; color: var(--ink-500); font-size: 13px; font-weight: 500; transition: all .16s; }
.lf-role:hover { border-color: var(--navy-500); color: var(--navy-700); }
.lf-role.on { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.lf-legal { position: absolute; bottom: 22px; color: var(--ink-300); font-size: 12px; }

@media (max-width: 860px) {
  .login-brand { display: none; }
  .login-form { background: var(--sand-50); }
  .lf-mobile-logo { display: grid; place-items: center; margin-bottom: 18px; }
  .lf-mobile-logo .hy-logo svg { width: 60px; color: var(--navy-700); display: block; }
  .lf-card { text-align: left; }
}

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