/* =============================================================================
   Lotward — Inventory Management System
   Brand design system + components
   Palette: Cacao #101B3D · Eggwhite #F5F7FC · Off-white #FFFFFF
   Type: GT Ultra Standard (display) · Noi Grotesk (headings) · Manrope (UI)
   ========================================================================== */

/* ----- Fonts --------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT Ultra Standard";
  src: url("../fonts/GTUltra-Light.woff2") format("woff2"),
       url("../fonts/GTUltra-Light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noi Grotesk";
  src: url("../fonts/NoiGrotesk-Bold.woff2") format("woff2"),
       url("../fonts/NoiGrotesk-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ----- Tokens -------------------------------------------------------------- */
:root {
  /* Brand — Lotward: black · warm white · mint */
  --cacao:        #315CF5;   /* cobalt primary interactive */
  --cacao-soft:   #5B7CF0;
  --cacao-hover:  #2549D6;
  --cacao-press:  #1C3AAF;
  --eggwhite:     #F5F7FC;   /* warm off-white (light logo/button on dark) */
  --offwhite:     #FFFFFF;
  --paper:        #F5F7FC;   /* page background — soft warm white */

  /* Cool neutral text */
  --ink:      #101B3D;
  --ink-2:    #414B67;
  --muted:    #657089;
  --faint:    #9BA3B6;
  --line:     #E4E8F1;
  --line-2:   #D2D9E6;
  --field:    #FFFFFF;

  /* Sidebar (navy) */
  --side-bg:     #101B3D;
  --side-bg-2:   #17234E;
  --side-ink:    #E9ECF6;
  --side-muted:  #8B95B2;
  --side-active: #80D5C4;   /* mint — active nav */
  --side-line:   rgba(233,236,246,.10);

  /* Semantic — clean, lightly warm */
  --success:    #4F8A5B; --success-bg: #E9F1E8; --success-ink: #2F5738;
  --warning:    #B07D1E; --warning-bg: #F6EDD8; --warning-ink: #76510E;
  --danger:     #BF4436; --danger-bg:  #F6E2DE; --danger-ink:  #7E271C;
  --info:       #4E6C82; --info-bg:    #E6ECF1; --info-ink:    #33485A;
  --gold:       #315CF5;    /* cobalt accent */

  /* Radii */
  --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* Shadow — neutral */
  --sh-1: 0 1px 2px rgba(16,27,61,.05), 0 1px 3px rgba(16,27,61,.05);
  --sh-2: 0 2px 6px rgba(16,27,61,.06), 0 8px 20px rgba(16,27,61,.07);
  --sh-3: 0 10px 30px rgba(16,27,61,.14);
  --sh-pop: 0 24px 60px rgba(0,0,0,.30);

  /* Type families */
  --f-display: "GT Ultra Standard", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-head: "Noi Grotesk", "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --topbar-h: 68px;
  --side-w: 268px;
}

/* ----- Reset / base -------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--eggwhite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5 { margin: 0; font-weight: 700; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--cacao); text-decoration: none; }
svg.ico { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
input, select, textarea { font-family: inherit; font-size: 14px; color: var(--ink); }
::selection { background: rgba(16,27,61,.16); }
:focus-visible { outline: 2px solid var(--cacao); outline-offset: 2px; border-radius: 4px; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; }

/* ----- App layout ---------------------------------------------------------- */
.app { display: grid; grid-template-columns: var(--side-w) 1fr; grid-template-rows: minmax(0, 1fr); height: 100vh; overflow: hidden; }

/* Sidebar */
.side {
  background: linear-gradient(180deg, var(--side-bg) 0%, #0A1024 100%);
  color: var(--side-ink);
  display: flex; flex-direction: column;
  border-right: 1px solid #1B2A52;
  position: relative;
}
.side-brand { padding: 22px 22px 14px; display: flex; align-items: center; gap: 12px; }
.side-brand img { height: 30px; width: auto; }
.side-brand .wordmark { display:flex; flex-direction:column; line-height:1; }
.side-brand .wordmark b { font-family: var(--f-head); font-size: 15px; letter-spacing:.04em; color: var(--side-active); }
.side-brand .wordmark span { font-size: 10.5px; letter-spacing:.16em; text-transform: uppercase; color: var(--side-muted); margin-top:4px; }

.side-scroll { flex: 1; overflow-y: auto; padding: 6px 12px 12px; }
.nav-group { margin-top: 16px; }
.nav-group > .nav-label {
  font-family: var(--f-head); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--side-muted); padding: 6px 12px; display:flex; align-items:center; justify-content:space-between;
}
.nav-label .add-inv { color: var(--side-muted); border:0; background:transparent; padding:2px; border-radius:6px; display:grid; place-items:center; }
.nav-label .add-inv:hover { color: var(--side-active); background: var(--side-line); }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--side-ink); font-weight: 500; font-size: 13.5px;
  border: 0; background: transparent; width: 100%; text-align: left;
  cursor: pointer; margin: 1px 0; position: relative; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--side-line); color: var(--side-active); }
.nav-item.active { background: rgba(233,236,246,.12); color: var(--side-active); font-weight: 700; }
.nav-item.active::before {
  content:""; position:absolute; left:-12px; top:50%; transform: translateY(-50%);
  width:4px; height: 22px; background: var(--gold); border-radius: 0 4px 4px 0;
}
.nav-item .ico { width: 18px; height: 18px; flex: none; opacity: .92; }
.nav-item .count { margin-left: auto; font-size: 11px; color: var(--side-muted); font-variant-numeric: tabular-nums; }
.nav-item .dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; }
.nav-item .swatch { width:10px; height:10px; border-radius:3px; flex:none; }

.side-foot { border-top: 1px solid var(--side-line); padding: 10px; }
.user-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  background: transparent; border: 0; width: 100%; cursor: pointer; color: var(--side-ink); text-align:left;
}
.user-chip:hover { background: var(--side-line); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--f-head); font-size: 13px; color: #fff; letter-spacing:.02em;
}
.user-chip .u-meta { line-height: 1.2; overflow: hidden; }
.user-chip .u-meta b { font-size: 13px; color: var(--side-active); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-chip .u-meta span { font-size: 11px; color: var(--side-muted); }
.user-chip .chev { margin-left: auto; color: var(--side-muted); }

/* Main */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--eggwhite); }
.topbar {
  height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 16px;
  padding: 0 26px; border-bottom: 1px solid var(--line); background: rgba(245,247,252,.86);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20;
}
.topbar .page-title { display:flex; flex-direction:column; min-width:0; }
.topbar .page-title h1 { font-family: var(--f-display); font-weight: 300; font-size: 25px; letter-spacing: .2px; color: var(--ink); line-height:1.1; white-space:nowrap; }
.topbar .page-title .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.topbar .spacer { flex: 1; }

.content { flex: 1; min-height: 0; overflow-y: auto; padding: 26px; }
.content-inner { max-width: 1500px; margin: 0 auto; }

/* ----- Pagination ---------------------------------------------------------- */
.pager { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.pager .pg-info { font-size: 12.5px; color: var(--muted); }
.pager .pg-btns { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pg-num, .pg-nav {
  min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid var(--line);
  background: var(--offwhite); border-radius: var(--r-sm); font-family: var(--f-body);
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pg-num:hover:not(.active), .pg-nav:hover:not([disabled]) { background: var(--paper); border-color: var(--line-2); }
.pg-num.active { background: var(--cacao); color: var(--offwhite); border-color: var(--cacao); cursor: default; }
.pg-nav[disabled] { opacity: .4; cursor: default; }
.pg-nav svg { width: 16px; height: 16px; }
.pg-gap { color: var(--faint); padding: 0 3px; font-size: 13px; }

/* ----- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: var(--r-sm);
  font-family: var(--f-body); font-weight: 600; font-size: 13.5px; letter-spacing:.005em;
  border: 1px solid transparent; background: var(--offwhite); color: var(--ink);
  cursor: pointer; white-space: nowrap; transition: background .13s, box-shadow .13s, border-color .13s, transform .05s;
  user-select: none;
}
.btn:active { transform: translateY(.5px); }
.btn .ico { width: 16px; height: 16px; }
.btn-primary { background: var(--cacao); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--cacao-hover); }
.btn-primary:active { background: var(--cacao-press); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.btn-ghost:hover { background: #fff; border-color: var(--faint); color: var(--ink); }
.btn-subtle { background: rgba(16,27,61,.06); color: var(--cacao); }
.btn-subtle:hover { background: rgba(16,27,61,.11); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.06); }
.btn-danger-ghost { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-bg); }
.btn-sm { height: 31px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-xs); }
.btn-lg { height: 44px; padding: 0 22px; font-size: 15px; }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); border: 1px solid transparent; }
.btn-icon:hover { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-icon.sm { width: 30px; height: 30px; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ----- Cards / panels ------------------------------------------------------ */
.card {
  background: var(--offwhite); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.card-pad { padding: 20px; }
.panel { background: var(--offwhite); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.panel-head { display:flex; align-items:center; gap:12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.panel-head h3 { font-family: var(--f-head); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.panel-head .spacer { flex: 1; }
.panel-body { padding: 18px; }

.section-title { font-family: var(--f-head); font-size: 12px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); margin-bottom: 12px; }

/* ----- Stat / KPI ---------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); gap: 16px; }
.kpi {
  background: var(--offwhite); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--sh-1); position: relative; overflow: hidden;
}
.kpi .k-label { font-family: var(--f-head); font-size: 11px; letter-spacing:.1em; text-transform: uppercase; color: var(--muted); display:flex; align-items:center; gap:8px; }
.kpi .k-value { font-family: var(--f-display); font-weight: 300; font-size: 42px; line-height: 1; margin-top: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi .k-sub { font-size: 12px; color: var(--muted); margin-top: 8px; }
.kpi .k-ico { position: absolute; right: 16px; top: 16px; width: 30px; height: 30px; border-radius: var(--r-sm); display:grid; place-items:center; }
.kpi.accent-warn .k-value { color: var(--warning-ink); }
.kpi.accent-danger .k-value { color: var(--danger-ink); }
.kpi.accent-ok .k-value { color: var(--success-ink); }

/* ----- Badges / pills ------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
  border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; letter-spacing:.02em;
  background: rgba(16,27,61,.07); color: var(--cacao); white-space: nowrap;
}
.badge .bdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--success-bg); color: var(--success-ink); }
.badge.warn { background: var(--warning-bg); color: var(--warning-ink); }
.badge.danger { background: var(--danger-bg); color: var(--danger-ink); }
.badge.info { background: var(--info-bg); color: var(--info-ink); }
.badge.muted { background: #EDEFF5; color: var(--muted); }
.badge.inbound { background: var(--info-bg); color: var(--info-ink); }
.badge.outbound { background: #E8ECF3; color: #5A6478; }
.badge.lg { height: 26px; padding: 0 12px; font-size: 12.5px; }

.tag { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--r-pill); background:rgba(16,27,61,.06); color:var(--cacao); font-size:12px; font-weight:600; }

/* clustered badges in a table cell (e.g. shipment status): wrap tidily instead of ragged spaces */
.badge-cell { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cell-nowrap { white-space: nowrap; }
.badge.quar { background: #f4e3d3; color: #8a4b00; }
/* lot quarantine/released toggle — a little status pill with a state dot */
.lot-quar-toggle { height: 22px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--offwhite); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .02em; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lot-quar-toggle::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success-ink); }
.lot-quar-toggle:hover { border-color: var(--cacao); }
.lot-quar-toggle.on { background: #f4e3d3; border-color: #e3c7ad; color: #8a4b00; }
.lot-quar-toggle.on::before { background: #c8791f; }

/* ----- Inputs -------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .flabel { font-size: 12.5px; font-weight: 600; color: var(--ink-2); display:flex; align-items:center; gap:6px; }
.field .hint { font-size: 11.5px; color: var(--muted); }
.req { color: var(--danger); }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--field); color: var(--ink);
  transition: border-color .13s, box-shadow .13s; outline: none;
}
.textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height:1.5; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--cacao); box-shadow: 0 0 0 3px rgba(16,27,61,.12); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
select.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A7867' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px; cursor: pointer; }
.input.sm, .select.sm { height: 34px; }
.input-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(166,58,41,.14) !important; }

.search {
  position: relative; display: flex; align-items: center;
}
.search .ico { position: absolute; left: 12px; color: var(--faint); width:17px; height:17px; pointer-events:none; }
.search input { padding-left: 37px; }
.search .clear { position:absolute; right:8px; color:var(--faint); background:none; border:0; padding:4px; border-radius:6px; display:none; }
.search .clear:hover { background: rgba(16,27,61,.08); color: var(--ink); }
.search.has-val .clear { display:grid; place-items:center; }

.switch { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.switch input { display:none; }
.switch .track { width: 40px; height: 23px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; flex:none; }
.switch .track::after { content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow: var(--sh-1); transition: transform .15s; }
.switch input:checked + .track { background: var(--cacao); }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch .stxt { font-size:13px; color:var(--ink-2); }

.checkbox { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; font-size:13.5px; color:var(--ink-2); }
.checkbox input { width:17px; height:17px; accent-color: var(--cacao); }

.seg { display: inline-flex; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: rgba(16,27,61,.06); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg::-webkit-scrollbar { height: 0; display: none; }
.seg button { flex: 0 0 auto; white-space: nowrap; border: 0; background: transparent; padding: 6px 14px; border-radius: var(--r-xs); font-weight: 600; font-size: 13px; color: var(--muted); }
.seg button.active { background: var(--offwhite); color: var(--cacao); box-shadow: var(--sh-1); }

/* ----- Toolbar / filter bar ------------------------------------------------ */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .search { flex: 1; min-width: 220px; max-width: 460px; }
.toolbar .search input { height: 40px; background: var(--offwhite); border-color: var(--line); }

/* ----- Table --------------------------------------------------------------- */
.tbl-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--offwhite); box-shadow: var(--sh-1); }
.tbl-scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl thead th {
  position: sticky; top: 0; background: var(--paper); z-index: 2;
  font-family: var(--f-head); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-2);
  white-space: nowrap; user-select: none;
}
table.tbl thead th.sortable { cursor: pointer; }
table.tbl thead th.sortable:hover { color: var(--ink-2); }
table.tbl thead th .th-in { display:inline-flex; align-items:center; gap:5px; }
table.tbl thead th .sort-ind { opacity: .35; }
table.tbl thead th.sorted .sort-ind { opacity: 1; color: var(--cacao); }
table.tbl thead th.num, table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr.prow { cursor: pointer; transition: background .1s; }
table.tbl tbody tr.prow:hover { background: var(--paper); }
table.tbl tbody tr.vrow { background: #F5F7FC; }
table.tbl tbody tr.vrow td { border-bottom: 1px solid #E4E8F1; color: var(--ink-2); font-size: 13px; }
table.tbl tbody tr.vrow td:first-child { padding-left: 42px; position: relative; }
table.tbl tbody tr.vrow td:first-child::before { content:""; position:absolute; left:24px; top:0; bottom:0; width:2px; background: var(--line-2); }
.cell-primary { font-weight: 600; color: var(--ink); }
.cell-sub { font-size: 12px; color: var(--muted); }
.exp-btn { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; border:0; background:transparent; color:var(--muted); transition: transform .12s, background .12s; }
.exp-btn:hover { background: rgba(16,27,61,.08); color:var(--cacao); }
.exp-btn.open { transform: rotate(90deg); }
.row-actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; opacity: 0; transition: opacity .12s; }
tr:hover .row-actions { opacity: 1; }
.qty-strong { font-family: var(--f-head); font-size: 14px; color: var(--ink); }

/* ----- Empty state --------------------------------------------------------- */
.empty { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty .emp-ico { width: 62px; height: 62px; border-radius: 50%; background: rgba(16,27,61,.06); display: grid; place-items: center; margin: 0 auto 16px; color: var(--cacao); }
.empty h3 { font-family: var(--f-display); font-weight: 300; font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.empty p { max-width: 420px; margin: 0 auto 18px; font-size: 13.5px; }

/* ----- Modal --------------------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; background: rgba(16,27,61,.44); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; padding: 44px 20px; z-index: 100;
  opacity: 0; animation: ov-in .16s ease forwards; overflow-y: auto;
}
@keyframes ov-in { to { opacity: 1; } }
.modal {
  background: var(--offwhite); border-radius: var(--r-lg); box-shadow: var(--sh-pop);
  width: 100%; max-width: 560px; margin: auto; transform: translateY(8px) scale(.99);
  animation: mo-in .18s cubic-bezier(.2,.8,.2,1) forwards; border: 1px solid var(--line); overflow: hidden;
}
@keyframes mo-in { to { transform: translateY(0) scale(1); } }
.modal.md { max-width: 680px; } .modal.lg { max-width: 860px; } .modal.xl { max-width: 1040px; }
.modal-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.modal-head .m-title { flex: 1; min-width: 0; }
.modal-head h2 { font-family: var(--f-display); font-weight: 300; font-size: 23px; color: var(--ink); line-height:1.15; }
.modal-head .m-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.modal-body { padding: 22px; max-height: calc(100vh - 250px); overflow-y: auto; }
.modal-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 16px 22px; border-top: 1px solid var(--line); background: var(--paper); }
.modal-foot .spacer { flex: 1; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 16px; }
.form-grid .col-2 { grid-column: span 2; }
@media (max-width: 620px){ .form-grid { grid-template-columns: 1fr; } .form-grid .col-2 { grid-column: span 1; } }

/* ----- Drawer -------------------------------------------------------------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(16,27,61,.4); backdrop-filter: blur(2px); z-index: 90; opacity:0; animation: ov-in .16s ease forwards; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 560px; max-width: 94vw; z-index: 95;
  background: var(--eggwhite); box-shadow: var(--sh-pop); display: flex; flex-direction: column;
  transform: translateX(20px); opacity: 0; animation: dr-in .22s cubic-bezier(.2,.8,.2,1) forwards; border-left: 1px solid var(--line);
}
@keyframes dr-in { to { transform: translateX(0); opacity: 1; } }
.drawer-head { padding: 20px 22px 16px; border-bottom: 1px solid var(--line); background: var(--offwhite); display:flex; align-items:flex-start; gap:12px; }
.drawer-head h2 { font-family: var(--f-display); font-weight: 300; font-size: 24px; color: var(--ink); line-height:1.12; }
.drawer-head .d-sub { font-size: 12.5px; color: var(--muted); margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.drawer-foot { padding: 14px 22px; border-top: 1px solid var(--line); background: var(--offwhite); display:flex; gap:10px; }
.drawer-tabs { display:flex; gap:4px; padding: 0 22px; background: var(--offwhite); border-bottom: 1px solid var(--line); }
.drawer-tabs button { border:0; background:transparent; padding: 12px 4px; margin-right:16px; font-weight:600; font-size:13px; color:var(--muted); border-bottom: 2px solid transparent; }
.drawer-tabs button.active { color: var(--cacao); border-bottom-color: var(--cacao); }

/* Detail rows */
.dl { display: grid; grid-template-columns: 150px 1fr; gap: 2px 14px; }
.dl dt { color: var(--muted); font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.dl dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); font-weight: 500; font-size: 13.5px; }

/* ----- Toast --------------------------------------------------------------- */
.toast-wrap { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast {
  min-width: 260px; max-width: 380px; background: var(--ink); color: #fff; border-radius: var(--r);
  padding: 13px 15px; box-shadow: var(--sh-pop); display: flex; align-items: flex-start; gap: 11px;
  transform: translateX(20px); opacity: 0; animation: to-in .2s ease forwards; font-size: 13.5px;
}
@keyframes to-in { to { transform: translateX(0); opacity: 1; } }
.toast.out { animation: to-out .2s ease forwards; }
@keyframes to-out { to { transform: translateX(20px); opacity: 0; } }
.toast .t-ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.toast.ok { background: #3d5233; } .toast.ok .t-ico { color: #b9d3a6; }
.toast.err { background: #7a2517; } .toast.err .t-ico { color: #f0b3a6; }
.toast.warn { background: #79500f; } .toast.warn .t-ico { color: #f0d19a; }
.toast b { display:block; font-weight:700; margin-bottom:1px; }
.toast .t-msg { color: rgba(255,255,255,.86); }

/* ----- Dropzone / attachments --------------------------------------------- */
.dropzone {
  border: 1.5px dashed var(--line-2); border-radius: var(--r); padding: 22px; text-align: center;
  color: var(--muted); background: var(--paper); transition: border-color .13s, background .13s; cursor: pointer;
}
.dropzone:hover, .dropzone.drag { border-color: var(--cacao); background: rgba(16,27,61,.05); color: var(--cacao); }
.dropzone .dz-ico { width: 34px; height: 34px; margin: 0 auto 8px; color: var(--cacao); }
.att-list { display: flex; flex-direction: column; gap: 8px; }
.att {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--offwhite);
}
.att .a-ico { width: 38px; height: 38px; border-radius: var(--r-xs); display: grid; place-items: center; flex: none; background: var(--danger-bg); color: var(--danger); }
.att .a-ico.img { background: var(--info-bg); color: var(--info); }
.att .a-ico.doc { background: var(--warning-bg); color: var(--warning-ink); }
.att .a-meta { flex: 1; min-width: 0; }
.att .a-meta b { font-size: 13px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att .a-meta span { font-size: 11.5px; color: var(--muted); }
.att .a-cat { flex: none; }

/* ----- Alert rows ---------------------------------------------------------- */
.alert-row { display:flex; align-items:center; gap:12px; padding: 11px 14px; border-radius: var(--r-sm); border:1px solid var(--line); background: var(--offwhite); }
.alert-row + .alert-row { margin-top: 8px; }
.alert-row .ar-ico { width:34px; height:34px; border-radius:var(--r-xs); display:grid; place-items:center; flex:none; }
.alert-row .ar-body { flex:1; min-width:0; }
.alert-row .ar-body b { font-size:13.5px; font-weight:600; }
.alert-row .ar-body div { font-size:12px; color:var(--muted); }
.alert-row.warn .ar-ico { background: var(--warning-bg); color: var(--warning-ink); }
.alert-row.danger .ar-ico { background: var(--danger-bg); color: var(--danger-ink); }

/* ----- Activity feed ------------------------------------------------------- */
.feed { display:flex; flex-direction:column; }
.feed-item { display:flex; gap:12px; padding: 11px 0; border-bottom:1px solid var(--line); }
.feed-item:last-child { border-bottom:0; }
.feed-item .fi-dot { width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; background: rgba(16,27,61,.07); color:var(--cacao); }
.feed-item .fi-body { flex:1; min-width:0; }
.feed-item .fi-body .fi-txt { font-size:13px; }
.feed-item .fi-body .fi-meta { font-size:11.5px; color:var(--muted); margin-top:2px; }

/* ----- Menu / dropdown ----------------------------------------------------- */
.menu {
  position: fixed; background: var(--offwhite); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-pop); padding: 6px; min-width: 190px; z-index: 300;
  animation: mo-in .12s ease forwards;
}
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 10px; border-radius: var(--r-xs); font-size: 13.5px; color: var(--ink-2); font-weight:500; }
.menu button:hover { background: var(--paper); color: var(--ink); }
.menu button .ico { width: 16px; height: 16px; color: var(--muted); }
.menu button.danger { color: var(--danger); } .menu button.danger .ico { color: var(--danger); }
.menu button.danger:hover { background: var(--danger-bg); }
.menu .sep { height: 1px; background: var(--line); margin: 5px 4px; }
.menu .mlabel { font-size: 10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--faint); padding: 6px 10px 3px; font-family: var(--f-head); }

/* ----- Chips row / line items ---------------------------------------------- */
.line-item { display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--offwhite); }
.line-item + .line-item { margin-top:8px; }
.line-item .li-body { flex:1; min-width:0; }
.line-item .li-body b { font-size:13.5px; display:block; }
.line-item .li-body span { font-size:12px; color:var(--muted); }

/* ----- Misc utilities ------------------------------------------------------ */
.row { display:flex; align-items:center; gap:10px; }
.col { display:flex; flex-direction:column; }
.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12px; }
.strong { font-weight: 700; }
.center { text-align:center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width: 1080px){ .grid-3 { grid-template-columns:1fr 1fr; } }
@media (max-width: 800px){ .grid-2, .grid-3 { grid-template-columns:1fr; } }
.divider { height:1px; background: var(--line); margin: 16px 0; border:0; }
.dot-sep { color: var(--faint); margin: 0 6px; }
.link { color: var(--cacao); font-weight:600; cursor:pointer; }
.link:hover { text-decoration: underline; }
.pill-count { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background: rgba(16,27,61,.1); color:var(--cacao); font-size:11px; font-weight:700; }

/* color swatch input */
.swatch-pick { display:flex; gap:8px; flex-wrap:wrap; }
.swatch-pick label { width:30px; height:30px; border-radius:8px; cursor:pointer; position:relative; border:2px solid transparent; }
.swatch-pick input { position:absolute; opacity:0; }
.swatch-pick input:checked + span { position:absolute; inset:0; border:2.5px solid var(--ink); border-radius:8px; }

/* field-config sortable list */
.fld-list { display:flex; flex-direction:column; gap:8px; }
.fld-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--offwhite); }
.fld-item .grip { color:var(--faint); cursor:grab; display:grid; place-items:center; }
.fld-item.dragging { opacity:.5; }
.fld-item.drop-target { border-color: var(--cacao); box-shadow: 0 0 0 2px rgba(16,27,61,.15); }
.fld-item .f-name { font-weight:600; font-size:13.5px; }
.fld-item .f-tags { display:flex; gap:5px; align-items:center; }

/* ----- Login / user-select screen ------------------------------------------ */
.gate {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  background: radial-gradient(1200px 600px at 30% -10%, #16234B 0%, #101B3D 45%, #070B1A 100%);
}
.gate-card { width: 100%; max-width: 440px; text-align: center; padding: 40px; }
.gate-logo { height: 46px; margin-bottom: 30px; }
.gate h1 { font-family: var(--f-display); font-weight: 300; color: var(--eggwhite); font-size: 30px; margin-bottom: 6px; }
.gate p { color: var(--side-muted); margin-bottom: 28px; }
.gate-users { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gate-user {
  background: rgba(233,236,246,.06); border: 1px solid rgba(233,236,246,.14); border-radius: var(--r);
  padding: 18px 14px; cursor: pointer; transition: background .13s, border-color .13s, transform .08s;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.gate-user:hover { background: rgba(233,236,246,.12); border-color: rgba(233,236,246,.3); transform: translateY(-2px); }
.gate-user b { color: var(--eggwhite); font-size: 14px; }
.gate-user span { color: var(--side-muted); font-size: 11.5px; }
.gate-add { color: var(--side-muted); background: transparent; border: 1px dashed rgba(233,236,246,.2); border-radius: var(--r); padding: 18px; cursor: pointer; }
.gate-add:hover { color: var(--eggwhite); border-color: rgba(233,236,246,.4); }

/* progressbar (inventory value / capacity) */
.bar { height:7px; border-radius:999px; background: var(--line); overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:999px; background: var(--cacao); }

/* stepper for shipment lines quantity */
.stepper { display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; height:34px; background:#fff; }
.stepper button { width:30px; height:32px; border:0; background:transparent; color:var(--muted); font-size:16px; }
.stepper button:hover { background: var(--paper); color:var(--ink); }
.stepper input { width:56px; height:32px; border:0; text-align:center; font-variant-numeric:tabular-nums; font-weight:600; }
.stepper input:focus { outline:none; }

/* ===== Responsive / mobile ==================================================
   The old rule here squeezed the sidebar into a 76px rail and hid every label,
   which is what made phones unusable: unlabelled icons, a fifth of the width
   gone, and a topbar that could not wrap so its buttons were clipped off-screen.
   Now, under 900px:
     - the sidebar becomes an off-canvas drawer at full width WITH section names,
       opened by the waffle button in the topbar (see app.toggleNav)
     - the topbar wraps instead of overflowing
     - anything that can't fit scrolls INSIDE its own card, never the whole page
   Desktop is untouched — it stays the primary experience.
   ========================================================================== */

.nav-toggle { display: none; }          /* desktop: the sidebar is always visible */
.nav-scrim { display: none; }

@media (max-width: 900px) {
  /* ---- shell: one column, sidebar lifted out of the grid ---- */
  .app { grid-template-columns: 1fr; }
  /* 100dvh tracks the real viewport as mobile browser chrome hides/shows.
     Plain 100vh is taller than what you can see, which pushed the bottom of
     every screen underneath the URL bar. */
  @supports (height: 100dvh) { .app { height: 100dvh; } }

  .side {
    position: fixed; z-index: 95; top: 0; bottom: 0; left: 0;
    width: min(86vw, 330px);
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
    border-right: 0;
    padding-left: env(safe-area-inset-left, 0px);
  }
  body.nav-open .side { transform: translateX(0); box-shadow: 0 0 44px rgba(8,12,28,.5); }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 94;
    background: rgba(16,27,61,.45); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .22s;
  }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  /* Roomier nav rows — these are now the primary touch targets. */
  .side-scroll { padding: 8px 12px 16px; }
  .nav-item { padding: 13px 13px; font-size: 15px; gap: 13px; min-height: 46px; }
  .nav-item .ico { width: 20px; height: 20px; }
  .nav-group > .nav-label { padding: 8px 12px; font-size: 11px; }
  .side-brand { padding: 18px 18px 12px; }
  .side-foot { padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .user-chip { padding: 11px 10px; min-height: 48px; }

  /* ---- topbar: wraps, and carries the waffle ---- */
  .topbar {
    height: auto; min-height: var(--topbar-h); flex-wrap: wrap;
    gap: 10px; padding: 10px 14px;
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px));
  }
  .nav-toggle {
    display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; margin-left: -6px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--offwhite); color: var(--cacao); cursor: pointer;
  }
  .nav-toggle:active { background: var(--paper); }
  .topbar .page-title { flex: 1 1 auto; min-width: 0; }
  .topbar .page-title h1 { font-size: 20px; overflow: hidden; text-overflow: ellipsis; }
  .topbar .page-title .sub { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .spacer { display: none; }
  /* Actions drop to their own full-width row and wrap, instead of being pushed
     off the right edge where they couldn't be reached at all. */
  .topbar #tbActions { flex: 1 0 100%; flex-wrap: wrap; }

  /* ---- content ---- */
  .content {
    padding: 14px;
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .content-inner { min-width: 0; }

  /* ---- tables: contain the sideways scroll ----
     13 of the app's tables sit directly inside .tbl-wrap, which was overflow:hidden —
     so on a narrow screen their right-hand columns were silently clipped away.
     Scrolling the card (not the page) shows them and keeps the rounded corners. */
  .tbl-wrap { overflow: auto hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .tbl-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  table.tbl { font-size: 13px; }
  table.tbl thead th { padding: 10px 12px; }
  table.tbl tbody td { padding: 11px 12px; }
  /* break-word, NOT anywhere: `anywhere` lowers a cell's min-content width to one
     character, so the whole table silently squeezes to fit and every product name
     breaks mid-word into a tall stack. Better to let the table keep readable column
     widths and scroll inside its card (above). break-word still rescues a single
     unbreakable 40-character code from blowing out a column. */
  table.tbl td { overflow-wrap: break-word; }
  /* cap just the name column so one long item title can't dominate the row */
  table.tbl td.cell-primary { max-width: 240px; }

  /* ---- cards / stats ---- */
  .kpi { padding: 15px 16px; }
  .kpi .k-value { font-size: 32px; margin-top: 9px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }

  /* ---- controls sized for thumbs ---- */
  .btn { min-height: 44px; padding: 0 15px; }
  .btn.btn-sm { min-height: 38px; }
  .btn-icon { min-width: 42px; min-height: 42px; }
  /* NOT .textarea — it already has a taller min-height (84px) that this would shrink. */
  .input, .select { min-height: 44px; }
  /* 16px stops iOS Safari from zooming the whole page in on focus — that zoom is
     itself a cause of the "everything overlaps" feeling. */
  .input, .select, .textarea, input, select, textarea { font-size: 16px; }
  .toolbar { gap: 8px; }
  .toolbar .search { flex: 1 1 100%; max-width: none; min-width: 0; }
  .pg-num, .pg-nav { min-width: 42px; height: 42px; }
  .stepper { height: 42px; }
  .stepper button { width: 38px; height: 40px; }
  .stepper input { height: 40px; }

  /* ---- sign-in ----
     The gate is position:fixed and vertically centred with no scroll, so when the
     on-screen keyboard shrinks the viewport the Sign in button ends up below the fold
     with no way to reach it. Top-align and allow scrolling instead. */
  .gate { place-items: start center; overflow-y: auto; padding: 26px 0; }
  .gate-card { padding: 24px 18px; }
  .gate-logo { height: 38px; margin-bottom: 22px; }
  .gate h1 { font-size: 25px; }
  .gate-users { grid-template-columns: 1fr; }

  /* ---- overlays ---- */
  .modal { max-width: none !important; margin: 0; }
  .modal-head { padding: 16px 16px 13px; }
  .modal-head h2 { font-size: 19px; }
  .drawer { width: 100% !important; max-width: none !important; border-left: 0; }
  @supports (height: 100dvh) { .drawer { height: 100dvh; } }
}

/* ---- phones: the tighter end of the range ---- */
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr; gap: 12px; }
  .content { padding: 12px; }
  .topbar .page-title h1 { font-size: 18px; }
  /* Sheet-style modal: anchored to the bottom, never taller than the viewport,
     with only the body scrolling so the header and footer buttons stay reachable.
     Rounded top corners only, since it now sits flush against the bottom edge. */
  .overlay { align-items: flex-end; padding: 0; }
  .modal { max-height: 92dvh; display: flex; flex-direction: column; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  /* the base rule caps this at calc(100vh - 250px); flex + max-height on the modal
     handles the sizing here, and leaving the cap in fights it on short screens */
  .modal-body { max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; }
}

/* ----- Print (packing slip) ----------------------------------------------- */
@media print {
  /* Print ONLY .print-area. Modals, drawers, toasts and menus are appended to <body>
     (not inside #root), and they're position:fixed — left visible they render over page 1
     and clip the document, which is how invoices lost their totals. Hide them all. */
  #root, .overlay, .modal, .drawer, .drawer-overlay, .toast-wrap, .menu,
  .side, .topbar, .toolbar, .no-print, .drawer-foot, .modal-foot { display: none !important; }
  /* height:100% on html/body clips printed content to a single viewport */
  html, body { height: auto !important; min-height: 0 !important; overflow: visible !important; background: #fff; }
  .app { display: block; height: auto; }
  .content { padding: 0; overflow: visible; }
  .print-area { display: block !important; position: static !important; width: auto !important; }
  @page { size: letter portrait; margin: 0.45in; }
  /* keep table headers on every page and never split a row or a totals block */
  .print-area thead { display: table-header-group; }
  .print-area tfoot { display: table-footer-group; }
  .print-area tr, .print-area .keep-together { break-inside: avoid; page-break-inside: avoid; }
}
.print-area { display: none; }

/* ----- Lot cards (item drawer) ---------------------------------------------
   Each lot is a self-contained card: its identity and quantity on top, its own
   documents (COA / SDS / COC) listed underneath. Files sit inside the card on
   purpose — a lot that's missing its paperwork should read as missing without
   anyone having to open anything.
   ------------------------------------------------------------------------- */
[hidden] { display: none !important; }

.lot-search { margin-bottom: 14px; }
.lot-list { display: flex; flex-direction: column; gap: 10px; }

.lot-card {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--offwhite);
  padding: 12px 14px; transition: border-color .13s, box-shadow .13s, opacity .13s;
}
.lot-card.dim { opacity: .62; }
.lot-card.dim:hover { opacity: 1; }
.lot-card.focus { border-color: var(--cacao); box-shadow: 0 0 0 2px rgba(16,27,61,.12); }

.lot-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.lot-id { min-width: 0; flex: 1; }
.lot-id > b { font-size: 14px; font-weight: 700; display: block; line-height: 1.3; }
.lot-fields { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 5px; }
.lot-f { font-size: 12px; color: var(--muted); }
.lot-f b { font-weight: 600; color: var(--ink-2); }

.lot-right { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.lot-qty {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 17px; font-weight: 700; color: var(--cacao); font-variant-numeric: tabular-nums;
}
.lot-qty i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.lot-qty.zero { color: var(--faint); }
.lot-qty.zero i { color: var(--faint); }
.lot-actions { display: inline-flex; gap: 2px; margin-left: 2px; }

/* Files pinned to the lot they belong to */
.lot-files { margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.lot-files.solo { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.lf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.lf-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-head); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.lf-empty { font-size: 12px; color: var(--faint); padding: 2px 0; }
.att.att-sm { padding: 6px 9px; gap: 9px; }
.att.att-sm .a-ico { width: 28px; height: 28px; }
.att.att-sm .a-meta b { font-size: 12.5px; }
.att.att-sm .a-meta span { font-size: 11px; }
.att-compact .att-list { gap: 6px; }

/* Depleted / archived lots, tucked below the active ones */
.lot-arch-toggle {
  display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 16px;
  background: none; border: 0; border-top: 1px solid var(--line); padding: 12px 2px 0;
  font-family: var(--f-head); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; text-align: left;
}
.lot-arch-toggle:hover { color: var(--cacao); }
.lot-arch-toggle svg { transition: transform .15s; flex: none; }
.lot-arch-toggle.open svg { transform: rotate(90deg); }
.lot-arch { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.lot-empty {
  font-size: 13px; color: var(--muted); padding: 16px; text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--paper);
}
.lot-hint { font-size: 12.5px; color: var(--muted); margin: 10px 0 2px; }

/* An item with no lot identity: one plain number instead of a lot list */
.simple-stock {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--offwhite); padding: 14px 16px;
}
.ss-num { font-size: 28px; font-weight: 700; line-height: 1; color: var(--cacao); font-variant-numeric: tabular-nums; }
.ss-num i {
  display: block; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: 6px;
}

@media (max-width: 560px) {
  .lot-top { flex-direction: column; gap: 10px; }
  .lot-right { justify-content: flex-start; width: 100%; }
}

.avatar { background: var(--gold) !important; color: #fff !important; }