/* Kaetee Field Order — app styles. Tokens are the design-system originals (offline, no CDN). */
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/fonts.css";

/* ---- dark theme (from the design mockup) ---- */
.kt-dark {
  color-scheme: dark;
  --surface-page: #0b1018; --surface-card: #141b26; --surface-raised: #1a2230; --surface-sunken: #1b2431;
  --text-strong: #f2f6fb; --text-body: #d3dbe6; --text-muted: #9aa6b8; --text-faint: #6b7789;
  --border-subtle: #26313f; --border-default: #374151; --border-strong: #4d586a;
  --color-primary: #1a5da8; --color-primary-hover: #2069bc; --color-primary-soft: #132a41;
  --success-bg: #10261b; --success-fg: #7fd6a4; --success-solid: #1f9d5b;
  --caution-bg: #2b1f0c; --caution-fg: #f0b95f; --caution-solid: #e08a0b;
  --danger-bg: #2b1113; --danger-fg: #f3a1a1; --danger-solid: #dd2f2f;
  --company-01: #7fb2ea; --company-02: #6fd39b; --company-03: #f0a05a;
  --company-01-soft: #12293f; --company-02-soft: #10281c; --company-03-soft: #2f1c0c;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans); background: var(--surface-page); color: var(--text-body);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body.gu { font-family: var(--font-gujarati); }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
.mono { font-family: var(--font-mono); }
.tab { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
@keyframes ktRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- app shell: full screen on phone, framed & centered on desktop ---- */
.app {
  width: 100%; max-width: 480px; margin: 0 auto; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; background: var(--surface-page); position: relative; overflow: hidden;
}
html, body { height: 100%; }
.screen { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }

/* ---- header ---- */
.hdr { background: var(--color-primary); color: var(--text-inverse); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.hdr-row { display: flex; align-items: center; gap: 10px; }
.hdr-title { font: var(--weight-bold) var(--text-lg)/1.2 var(--font-sans); }
.hdr-sub { font-size: var(--text-xs); opacity: .82; }
.hdr .grow { flex: 1; min-width: 0; }
.iconbtn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--text-inverse); background: rgba(255,255,255,.14); border: 0; border-radius: var(--radius-sm); }
.pillbtn { height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 6px; font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); color: var(--text-inverse); background: rgba(255,255,255,.14); border: 0; border-radius: var(--radius-pill); }
.syncwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.syncago { font-size: var(--text-2xs); color: var(--text-inverse); opacity: .8; }

/* ---- search field ---- */
.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; }
.search input { width: 100%; height: 52px; padding: 0 40px 0 40px; font-size: var(--text-base); color: var(--text-strong);
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.search .clear { position: absolute; right: 6px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--text-muted); background: transparent; border: 0; }
.search input:focus { outline: none; box-shadow: var(--shadow-focus); border-color: var(--color-primary); }

/* ---- buttons ---- */
.btn { height: var(--control-height); padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--weight-bold) var(--text-sm)/1 var(--font-sans); border-radius: var(--radius-sm); border: 1px solid transparent; }
.btn:active { transform: scale(.98); }
.btn-lg { height: var(--control-lg); font-size: var(--text-base); }
.btn-primary { background: var(--color-primary); color: var(--text-inverse); }
.btn-secondary { background: var(--surface-card); color: var(--text-body); border-color: var(--border-default); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; }

/* ---- generic card / eyebrow ---- */
.card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.eyebrow { font: var(--weight-semibold) var(--text-2xs)/1 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }

/* ---- login ---- */
.login { flex: 1; display: flex; flex-direction: column; padding: 44px 24px 24px; gap: 0; }
.login .brand { font: var(--weight-heavy) var(--text-3xl)/1 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--color-primary); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font: var(--weight-semibold) var(--text-xs)/1 var(--font-sans); color: var(--text-muted); }
.field input { height: var(--control-height); padding: 0 14px; font-size: var(--text-base); color: var(--text-strong);
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.field input:focus { outline: none; box-shadow: var(--shadow-focus); border-color: var(--color-primary); }

/* ---- shop list ---- */
.shop-row { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px; text-align: left; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.shop-init { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary); font: var(--weight-bold) var(--text-sm)/1 var(--font-sans); }
.shop-name { font: var(--weight-semibold) var(--text-base)/1.2 var(--font-sans); color: var(--text-strong); }
.shop-meta { font-size: var(--text-xs); color: var(--text-muted); }

/* ---- catalog ---- */
.cat-count { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.cat-count .live { display: flex; align-items: center; gap: 5px; color: var(--success-fg); }
.cat-head, .cat-row { display: grid; grid-template-columns: 1fr 66px 46px 96px; gap: 8px; align-items: center; }
.cat-head { position: sticky; top: 33px; z-index: 1; padding: 7px 12px; background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle);
  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.cat-head span:nth-child(2), .cat-head span:nth-child(3) { text-align: center; }
.item { background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); }
.cat-row { padding: 8px 10px; cursor: pointer; }
.item-name { font: var(--weight-semibold) var(--text-base)/1.2 var(--font-sans); color: var(--text-strong); text-wrap: pretty; }
.item-sub { display: flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--text-muted); }
.rate-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; font-variant-numeric: tabular-nums; }
.rate-lbl { font: var(--weight-semibold) var(--text-2xs)/1 var(--font-sans); letter-spacing: var(--tracking-label); color: var(--text-muted); }
.rate-val { font: var(--weight-bold) var(--text-sm)/1 var(--font-sans); color: var(--text-strong); }
.rate-flag { align-items: center; padding: 3px 5px; background: var(--caution-bg); border: 2px solid var(--caution-solid); border-radius: var(--radius-xs); }
.rate-flag .rate-lbl, .rate-flag .rate-val { color: var(--caution-fg); font-weight: var(--weight-bold); }
.uom { width: 46px; height: 48px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-xs);
  font: var(--weight-bold) var(--text-xs)/1 var(--font-sans); letter-spacing: var(--tracking-label); }
.uom.is-unit { background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border-default); }
.uom.is-case { background: var(--color-primary); color: var(--text-inverse); border: 2px solid var(--color-primary); }
.qty { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.qbtn { width: 30px; height: 48px; flex: none; display: grid; place-items: center; border: 1px solid var(--border-default); }
.qbtn.minus { color: var(--text-body); background: var(--surface-sunken); border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.qbtn.plus { color: var(--text-inverse); background: var(--color-primary); border-color: var(--color-primary); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.qbtn:active { transform: scale(.96); }
.qinput { width: 36px; height: 48px; flex: none; padding: 0 1px; text-align: center; font: var(--weight-semibold) var(--text-lg)/1 var(--font-sans);
  font-variant-numeric: tabular-nums; color: var(--text-strong); background: var(--surface-card); border: 1px solid var(--border-default); border-left: 0; border-right: 0; -moz-appearance: textfield; }
.qinput.has { color: var(--success-fg); background: var(--success-bg); font-weight: var(--weight-bold); }
.qinput:focus { outline: none; }

/* ---- item detail (expanded) ---- */
.detail { display: flex; flex-direction: column; gap: 12px; padding: 4px 12px 14px; background: var(--surface-sunken); animation: ktRise var(--dur-base) var(--ease-standard); }
.detail-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.livebar { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--success-bg); border-radius: var(--radius-sm); }
.livebar .lbl { font: var(--weight-bold) var(--text-2xs)/1 var(--font-sans); letter-spacing: var(--tracking-label); color: var(--success-fg); }
.livebar .txt { font: var(--weight-semibold) var(--text-sm)/1.2 var(--font-sans); color: var(--success-fg); font-variant-numeric: tabular-nums; }
.livebar.oos { background: var(--danger-bg); }
.livebar.oos .lbl, .livebar.oos .txt { color: var(--danger-fg); }
.tag-mini { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: var(--radius-pill); font: var(--weight-bold) var(--text-2xs)/1.4 var(--font-sans); letter-spacing: var(--tracking-label); }
.tag-mini.restock { background: var(--color-primary-soft); color: var(--color-primary); }
.tag-mini.oos { background: var(--danger-bg); color: var(--danger-fg); }
.tag-mini.exp { background: var(--caution-bg); color: var(--caution-fg); }
.tag-mini.offer { background: var(--success-bg); color: var(--success-fg); }

/* bell */
.iconbtn.bell { position: relative; }
.bell-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center;
  background: var(--danger-solid); color: #fff; border-radius: var(--radius-pill); font: var(--weight-bold) var(--text-2xs)/1 var(--font-sans); }

/* notification sheet items */
.notif { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); }
.notif .nicon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); }
.notif.restock .nicon { background: var(--success-bg); color: var(--success-fg); }
.notif.special .nicon { background: var(--success-bg); color: var(--success-solid); }
.notif.ann .nicon { background: var(--color-primary-soft); color: var(--color-primary); }
.notif .ngrow { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif .ntitle { font: var(--weight-semibold) var(--text-base)/1.2 var(--font-sans); color: var(--text-strong); }
.notif .nbody { font-size: var(--text-sm); color: var(--text-body); }
.notif .nspecial { font: var(--weight-semibold) var(--text-sm)/1.3 var(--font-sans); color: var(--success-fg); }
.notif .nwhen { font-size: var(--text-2xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.notif .ndot { flex: none; width: 9px; height: 9px; margin-top: 6px; background: var(--danger-solid); border-radius: var(--radius-pill); }
.notif.is-new { background: var(--color-primary-soft); }

/* admin special-rate offer */
.rate-flag.offer { background: var(--success-bg); border-color: var(--success-solid); }
.rate-flag.offer .rate-lbl, .rate-flag.offer .rate-val { color: var(--success-fg); }
.offer-banner { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--success-bg); border: 2px solid var(--success-solid); border-radius: var(--radius-sm); color: var(--success-fg); }
.offer-banner.on { background: var(--success-solid); color: #08210f; border-color: var(--success-solid); }
.offer-banner .ob-grow { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 0; text-align: left; }
.offer-banner .ob-lbl { font: var(--weight-bold) var(--text-2xs)/1.3 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.offer-banner .ob-val { font: var(--weight-bold) var(--text-lg)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.offer-banner .ob-apply { font: var(--weight-bold) var(--text-sm)/1 var(--font-sans); }
.nearbtn { width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); color: var(--text-inverse); background: rgba(255,255,255,.14); border: 0; border-radius: var(--radius-pill); }
.nearbtn.on { background: var(--caution-solid); color: #23180a; }
.stockseg { display: flex; gap: 4px; padding: 4px; background: rgba(255,255,255,.12); border-radius: var(--radius-pill); }
.stockseg button { flex: 1; height: 40px; font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); color: var(--text-inverse); background: transparent; border: 0; border-radius: var(--radius-pill); opacity: .75; }
.stockseg button.on { background: var(--text-inverse); color: var(--color-primary); opacity: 1; }
.batches { display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.batches .bhead { display: grid; grid-template-columns: 24px 1fr 64px 56px; gap: 8px; padding: 7px 11px; background: var(--surface-sunken);
  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.brow { display: grid; grid-template-columns: 24px 1fr 64px 56px; gap: 8px; align-items: center; width: 100%; min-height: 48px; padding: 6px 11px; text-align: left;
  background: transparent; border: 0; border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-body); font-variant-numeric: tabular-nums; }
.brow .radio { width: 18px; height: 18px; border: 2px solid var(--border-default); border-radius: var(--radius-pill); }
.brow.sel .radio { border: 0; color: var(--color-primary); }
.brow .bno { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-strong); }
.brow .btag { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); color: var(--text-faint); }
.brow.static { cursor: default; }
.batch-note { padding: 2px 2px 0; font-size: var(--text-2xs); line-height: 1.4; color: var(--text-muted); }
.brow.hold { background: var(--caution-bg); }
.brow.hold .bno, .brow.hold .btag { color: var(--caution-fg); }
.hold-badge { font: var(--weight-bold) var(--text-2xs)/1 var(--font-sans); letter-spacing: var(--tracking-label); color: #fff; background: var(--caution-solid); padding: 1px 5px; border-radius: 3px; }
.hold-reason { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--caution-bg); border: 2px solid var(--caution-solid); border-radius: var(--radius-sm); }
.hold-reason .lbl { display: flex; align-items: center; gap: 6px; font: var(--weight-bold) var(--text-2xs)/1.3 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--caution-fg); }
.hold-reason textarea { width: 100%; padding: 10px; font: var(--weight-regular) var(--text-sm)/1.4 var(--font-sans); color: var(--text-strong); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xs); resize: none; }
.chip.hold { background: var(--caution-bg); color: var(--caution-fg); }
.rate3 { display: flex; gap: 8px; }
.rseg { flex: 1; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: var(--radius-sm);
  background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-default); }
.rseg .k { font: var(--weight-bold) var(--text-2xs)/1 var(--font-sans); letter-spacing: var(--tracking-label); color: var(--text-muted); }
.rseg .v { font: var(--weight-semibold) var(--text-base)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.rseg.spl { flex: none; width: 62px; }
.rseg.is-on-ptr { background: var(--color-primary); color: var(--text-inverse); border: 2px solid var(--color-primary); }
.rseg.is-on-ptr .k { color: var(--text-inverse); }
.rseg.aspl { background: var(--caution-bg); color: var(--caution-fg); border-color: var(--caution-fg); }
.rseg.aspl .k { color: var(--caution-fg); }
.rseg.is-on-aspl { background: var(--caution-solid); color: #23180a; border: 2px solid var(--caution-solid); }
.rseg.is-on-aspl .k { color: #23180a; }
.rseg.spl { color: var(--text-muted); }
.rseg.is-on-spl { background: var(--danger-solid); color: var(--text-inverse); border: 2px solid var(--danger-solid); }
.spl-input { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--danger-bg); border: 2px solid var(--danger-solid); border-radius: var(--radius-sm); }
.spl-input .lbl { font: var(--weight-bold) var(--text-2xs)/1 var(--font-sans); letter-spacing: var(--tracking-label); color: var(--danger-fg); }
.spl-input input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; font: var(--weight-bold) var(--text-lg)/1 var(--font-sans); font-variant-numeric: tabular-nums;
  color: var(--text-strong); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xs); }
.aspl-note { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--caution-fg); font-variant-numeric: tabular-nums; }
.add-btn { width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; gap: 6px; font: var(--weight-bold) var(--text-sm)/1 var(--font-sans); border-radius: var(--radius-sm); }
.add-btn.off { color: var(--text-inverse); background: var(--color-primary); border: 0; }
.add-btn.on { color: var(--success-fg); background: var(--success-bg); border: 2px solid var(--success-fg); }

/* ---- basket bar ---- */
.basket { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px 18px;
  background: var(--surface-card); border-top: 1px solid var(--border-subtle); box-shadow: var(--shadow-basket); }
.basket .total { font: var(--weight-bold) var(--text-2xl)/1 var(--font-sans); color: var(--text-strong); font-variant-numeric: tabular-nums; }

/* ---- cart ---- */
.line-card { display: flex; flex-direction: column; gap: 10px; padding: 13px 14px; }
.line-name { font: var(--weight-semibold) var(--text-base)/1.2 var(--font-sans); color: var(--text-strong); }
.line-meta { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--radius-pill);
  font: var(--weight-semibold) var(--text-2xs)/1.4 var(--font-sans); letter-spacing: var(--tracking-label); }
.chip.fresh { background: var(--color-primary-soft); color: var(--color-primary); }
.stepper { display: flex; align-items: center; gap: 2px; }
.stepper .qinput { width: 48px; }
.amt { font: var(--weight-bold) var(--text-lg)/1 var(--font-sans); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.amt-flag { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 7px 10px; background: var(--caution-bg); border: 2px solid var(--caution-solid); border-radius: var(--radius-sm); }
.summary { display: flex; flex-direction: column; gap: 7px; padding: 14px; background: var(--surface-sunken); border-radius: var(--radius-md); }
.summary .r { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.summary .grand { display: flex; align-items: baseline; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.summary .grand b { font: var(--weight-heavy) var(--text-3xl)/1 var(--font-sans); color: var(--text-strong); font-variant-numeric: tabular-nums; }
textarea.remarks { width: 100%; padding: 12px; font: var(--weight-regular) var(--text-base)/1.4 var(--font-sans); color: var(--text-strong);
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); resize: none; }

/* ---- history ---- */
.order-card { display: flex; flex-direction: column; overflow: hidden; }
.order-head { display: flex; align-items: center; gap: 12px; padding: 14px; text-align: left; background: transparent; border: 0; min-height: 72px; width: 100%; }
.otbl { display: grid; grid-template-columns: 1fr 54px 54px; gap: 8px; }
.otbl.head { padding: 8px 14px; background: var(--surface-sunken); font: var(--weight-semibold) var(--text-2xs)/1 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.otbl.body { padding: 10px 14px; border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.otbl .r { text-align: right; }

/* ---- badges & company tags ---- */
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill); font: var(--weight-bold) var(--text-2xs)/1.5 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.badge.safe { background: var(--success-bg); color: var(--success-fg); }
.badge.caution { background: var(--caution-bg); color: var(--caution-fg); }
.badge.over { background: var(--danger-bg); color: var(--danger-fg); }
.ctag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill); font: var(--weight-bold) var(--text-2xs)/1.4 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ctag .co { font-family: var(--font-mono); }
.ctag[data-co="01"] { background: var(--company-01-soft); color: var(--company-01); }
.ctag[data-co="02"] { background: var(--company-02-soft); color: var(--company-02); }
.ctag[data-co="03"] { background: var(--company-03-soft); color: var(--company-03); }

/* ---- sheets / scrim / toast ---- */
.scrim { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(11,16,24,.55); z-index: 20; }
.sheet { background: var(--surface-card); border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 88%; display: flex; flex-direction: column; animation: ktRise var(--dur-slow) var(--ease-standard); }
/* grow to fit content; only scroll once content exceeds the sheet's max height */
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; border-bottom: 1px solid var(--border-subtle); }
.sheet-title { font: var(--weight-bold) var(--text-lg)/1.2 var(--font-sans); color: var(--text-strong); }
.sheet-opt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border-subtle); width: 100%; }
.sheet-opt .lbl { font: var(--weight-semibold) var(--text-base)/1.2 var(--font-sans); color: var(--text-strong); }
.sheet-opt .meta { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.iconbtn-dark { width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-muted); background: transparent; border: 0; }
.toast { position: absolute; left: 16px; right: 16px; bottom: 104px; z-index: 30; display: flex; justify-content: center; pointer-events: none; }
.toast .msg { padding: 12px 18px; background: var(--surface-inverse); color: #fff; border-radius: var(--radius-pill); font: var(--weight-semibold) var(--text-sm)/1.2 var(--font-sans); box-shadow: var(--shadow-lg); animation: ktRise var(--dur-base) var(--ease-standard); }

/* ---- empty state ---- */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--text-muted); }
.empty .t { font: var(--weight-semibold) var(--text-base)/1.2 var(--font-sans); color: var(--text-strong); }

/* ---- office desk (wide) ---- */
.office { max-width: 1040px; margin: 0 auto; padding: 24px 20px 48px; display: flex; flex-direction: column; gap: 14px; }
.office-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 2px 2px 4px; }
.office-brand { font: var(--weight-heavy) var(--text-xl)/1 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--color-primary); }
.office-brand span { font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); letter-spacing: 0; color: var(--text-muted); }
.office-actions { display: flex; align-items: center; gap: 12px; }
.office-who { font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); color: var(--text-body); }
.office .panel { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.office h1 { font: var(--weight-bold) var(--text-2xl)/1.15 var(--font-sans); color: var(--text-strong); margin: 0; }
.office .toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px; background: var(--surface-sunken); border-radius: var(--radius-md); }
.office select { height: 44px; padding: 0 10px; font-size: var(--text-sm); color: var(--text-strong); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.segmented { margin-left: auto; display: flex; gap: 6px; padding: 4px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); }
.segmented button { height: 44px; padding: 0 18px; font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); color: var(--text-muted); background: transparent; border: 0; border-radius: var(--radius-pill); }
.segmented button.on { color: var(--text-inverse); background: var(--color-primary); }
.otable-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
table.otable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; min-width: 720px; }
table.otable th { padding: 11px 14px; text-align: left; background: var(--surface-sunken); font: var(--weight-semibold) var(--text-2xs)/1 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
table.otable td { padding: 12px 14px; border-top: 1px solid var(--border-subtle); color: var(--text-body); }
table.otable td.num, table.otable th.num { text-align: right; }
table.otable .strong { font-weight: var(--weight-bold); color: var(--text-strong); }
.note { display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--text-muted); }
.office .ofield { height: 44px; padding: 0 12px; font-size: var(--text-sm); color: var(--text-strong); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.office .ofield:focus { outline: none; box-shadow: var(--shadow-focus); border-color: var(--color-primary); }
.psel-list { position: absolute; top: 72px; left: 0; right: 0; z-index: 10; max-height: 300px; overflow: auto; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.psel-opt { display: block; width: 100%; text-align: left; padding: 10px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-body); }
.psel-opt:hover { background: var(--color-primary-soft); }
.psel-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 6px 0 12px; background: var(--color-primary-soft); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-primary); }
.psel-chip button { width: 32px; height: 32px; font-size: 20px; line-height: 1; color: var(--color-primary); background: transparent; border: 0; }