/* ==========================================================================
   Shipment Tracker - design system
   Typography: Inter (variable, bundled) · Palette: restrained corporate navy/blue
   Spacing scale: 4 8 12 16 20 24 32 40 · Radius: 6 / 10 / 14 · Icons: one stroke icon set (Lucide style)
   ========================================================================== */
@font-face { font-family: 'Inter'; src: url('../fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
  --fs-xs: 11.5px; --fs-sm: 12.5px; --fs: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1); --t-fast: .12s; --t: .2s;

  --bg: #f4f6f9; --bg2: #eef1f5; --card: #ffffff; --card2: #f8fafc; --hover: #f2f5f9;
  --text: #0f1b2d; --text2: #2c3b50; --muted: #637387; --faint: #94a3b8;
  --border: #e2e8f0; --border2: #cfd8e3; --grid: #e9eef4;
  --brand: #1d4ed8; --brand-ink: #ffffff; --brand-soft: #e8efff; --brand-strong: #1e3a8a;
  --nav: #0b1626; --nav2: #13233a; --nav-text: #c9d4e3; --nav-muted: #7487a1; --nav-active: #ffffff;
  --ok: #0f7a54; --ok-soft: #e3f4ec; --warn: #b45309; --warn-soft: #fdf1e1; --bad: #c0352b; --bad-soft: #fcebe9;
  --info: #2563eb; --info-soft: #e7efff; --violet: #6d4bc4; --violet-soft: #efeafb;
  --series-1: #2563eb; --series-2: #e8542b; --series-3: #0f9d74; --series-4: #9b6bd6;
  --shadow-1: 0 1px 2px rgba(15, 27, 45, .05), 0 1px 1px rgba(15, 27, 45, .03);
  --shadow-2: 0 4px 14px rgba(15, 27, 45, .07), 0 1px 3px rgba(15, 27, 45, .05);
  --shadow-3: 0 18px 50px rgba(15, 27, 45, .18), 0 4px 12px rgba(15, 27, 45, .08);
  --focus: 0 0 0 3px rgba(37, 99, 235, .28);
  --skel: #e8edf3; --skel-hi: #f4f7fa;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #0b1220; --bg2: #0f1829; --card: #121c2e; --card2: #0f1828; --hover: #17233a;
  --text: #e6edf6; --text2: #c3cfdd; --muted: #8b9bb0; --faint: #5d6e85;
  --border: #22314a; --border2: #2c3e5c; --grid: #1c2a40;
  --brand: #4f7df0; --brand-ink: #ffffff; --brand-soft: #1a2a4d; --brand-strong: #9db8ff;
  --nav: #070d18; --nav2: #0f1a2c; --nav-text: #c3cfdd; --nav-muted: #6d7f99;
  --ok: #35c08d; --ok-soft: #10302a; --warn: #f0a443; --warn-soft: #36280f; --bad: #f2756a; --bad-soft: #3a1a1a;
  --info: #6b9bff; --info-soft: #172848; --violet: #b49cf0; --violet-soft: #271f44;
  --series-1: #6b9bff; --series-2: #ff8a5c; --series-3: #35c08d; --series-4: #c4a2f2;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 6px 18px rgba(0, 0, 0, .35); --shadow-3: 0 20px 60px rgba(0, 0, 0, .55);
  --skel: #18243a; --skel-hi: #1f2e48;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: var(--fs); line-height: 1.5; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01', 'tnum'; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.01em; color: var(--text); }
h1 { font-size: var(--fs-xl); font-weight: 700; }
h2 { font-size: var(--fs-lg); font-weight: 650; }
h3 { font-size: var(--fs-md); font-weight: 650; display: flex; align-items: center; gap: var(--s2); }
p { margin: 0 0 var(--s3); }
.muted { color: var(--muted); } .small { font-size: var(--fs-sm); } .xs { font-size: var(--fs-xs); }
.mono { font-family: var(--mono); font-size: .92em; }
.hidden { display: none !important; }
.grow { flex: 1; }
.mt { margin-top: var(--s4); } .mb { margin-bottom: var(--s4); } .mt2 { margin-top: var(--s2); }
.num-pos { color: var(--ok); } .num-neg { color: var(--bad); }
.up { color: var(--bad); } .down { color: var(--ok); }
.nowrap { white-space: nowrap; }
.ic { width: 18px; height: 18px; flex: none; }
::selection { background: rgba(37, 99, 235, .2); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 38px; padding: 0 var(--s4); border-radius: var(--r);
  border: 1px solid transparent; font: 600 var(--fs) var(--font); cursor: pointer; white-space: nowrap; text-decoration: none !important;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), color var(--t-fast); user-select: none; }
.btn .ic { width: 17px; height: 17px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 1px 2px rgba(29, 78, 216, .3); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(29, 78, 216, .28); }
.btn.ghost { background: var(--card); color: var(--text2); border-color: var(--border); }
.btn.ghost:hover:not(:disabled) { background: var(--hover); border-color: var(--border2); }
.btn.soft { background: var(--brand-soft); color: var(--brand); }
.btn.soft:hover:not(:disabled) { filter: brightness(.97); }
.btn.accent { background: var(--ok); color: #fff; }
.btn.accent:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 4px 12px rgba(15, 122, 84, .3); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.danger:hover:not(:disabled) { filter: brightness(1.07); }
.btn.sm { height: 32px; padding: 0 var(--s3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn.xs { height: 26px; padding: 0 var(--s2); font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.busy::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-color: rgba(255,255,255,.9) rgba(255,255,255,.9) transparent transparent; animation: spin .7s linear infinite; }
.btn.ghost.busy::after, .btn.soft.busy::after { border-color: var(--brand) var(--brand) transparent transparent; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r); border: 1px solid transparent; background: transparent;
  color: var(--text2); cursor: pointer; position: relative; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.sm { width: 30px; height: 30px; border-radius: var(--r-sm); }
.icon-btn.sm .ic { width: 16px; height: 16px; }
.icon-btn.danger:hover { color: var(--bad); background: var(--bad-soft); }
.link-btn { background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 4px; }
.link-btn:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ chips & badges */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600;
  background: var(--bg2); color: var(--text2); white-space: nowrap; line-height: 1; transition: background var(--t), color var(--t); }
.chip .ic { width: 13px; height: 13px; }
.chip.ok { background: var(--ok-soft); color: var(--ok); } .chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); } .chip.info { background: var(--info-soft); color: var(--info); }
.chip.brand { background: var(--brand-soft); color: var(--brand); } .chip.violet { background: var(--violet-soft); color: var(--violet); }
.chip.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-created { background: var(--bg2); color: var(--text2); }
.st-production, .st-warehouse { background: var(--warn-soft); color: var(--warn); }
.st-ready { background: var(--ok-soft); color: var(--ok); } /* 4.7: Goods Ready */
.st-loading, .st-in_transit, .st-landed { background: var(--info-soft); color: var(--info); }
.st-received { background: var(--violet-soft); color: var(--violet); }
.st-delivered { background: var(--ok-soft); color: var(--ok); }
.cs-planned { background: var(--bg2); color: var(--text2); } .cs-loading { background: var(--warn-soft); color: var(--warn); }
.cs-sailed { background: var(--info-soft); color: var(--info); } .cs-arrived, .cs-cleared { background: var(--violet-soft); color: var(--violet); }
.cs-delivered { background: var(--ok-soft); color: var(--ok); }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; }
.dotcount { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill); background: var(--bad); color: #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--card); }
.blink { animation: softpulse 1.8s ease-in-out infinite; }
@keyframes softpulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ------------------------------------------------------------------ layout */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--nav); color: var(--nav-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 40; }
.side-brand { display: flex; align-items: center; gap: var(--s3); padding: var(--s5) var(--s5) var(--s4); }
.brand-logo { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(140deg, #2563eb, #0e7490); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.brand-logo .ic { width: 21px; height: 21px; }
.brand-logo:has(img), .boot-splash .bs-logo:has(img) { background: #fff; }
.brand-logo img { width: 34px; height: 34px; object-fit: contain; } /* 4.3: app icon as the brand mark */
.side-brand b { display: block; color: #fff; font-size: 15.5px; letter-spacing: -.01em; }
.side-brand small { color: var(--nav-muted); font-size: var(--fs-xs); display: block; margin-top: 1px; }
.nav { flex: 1; overflow-y: auto; padding: 0 var(--s3) var(--s4); scrollbar-width: thin; scrollbar-color: #24344d transparent; }
.nav-group { padding: var(--s4) var(--s3) var(--s2); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--nav-muted); }
.nav a { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s3); border-radius: var(--r-sm); color: var(--nav-text); font-weight: 500;
  text-decoration: none; position: relative; transition: background var(--t-fast), color var(--t-fast); }
.nav a .ic { width: 18px; height: 18px; opacity: .8; }
.nav a:hover { background: var(--nav2); color: #fff; }
.nav a.active { background: rgba(79, 125, 240, .16); color: var(--nav-active); }
.nav a.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #4f7df0; }
.nav a.active .ic { opacity: 1; color: #8fb0ff; }
.nav a .badge { margin-left: auto; }
.side-foot { padding: var(--s3) var(--s5); border-top: 1px solid #1a2840; color: var(--nav-muted); font-size: var(--fs-xs); }
.side-scrim { position: fixed; inset: 0; display: none; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s6);
  background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); }
.menu-btn { display: none; }
.navarrows { display: flex; gap: 2px; }
.searchbtn { display: flex; align-items: center; gap: var(--s2); height: 38px; padding: 0 var(--s3); min-width: 280px; max-width: 420px; flex: 1;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--card2); color: var(--muted); cursor: pointer; font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.searchbtn:hover { border-color: var(--border2); }
.searchbtn span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd { font: 600 10.5px var(--font); color: var(--muted); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; background: var(--card); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.clocks { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card2); }
.clock { display: flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; line-height: 1.15; }
.clock .flag { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff; border-radius: 4px; padding: 2px 4px; }
.clock .flag.in { background: #e07b14; } .clock .flag.cn { background: #c8281e; }
.clock b { font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text); }
.clock small { display: block; font-size: 9.5px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.fxtick { display: flex; align-items: center; gap: var(--s2); padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card2); font-size: var(--fs-sm); cursor: pointer; text-decoration: none !important; color: var(--text); }
.fxtick b { font-variant-numeric: tabular-nums; }
.fxtick .live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(15, 122, 84, .5); animation: livedot 2s infinite; }
.fxtick .live.off { background: var(--faint); animation: none; }
@keyframes livedot { 0% { box-shadow: 0 0 0 0 rgba(15, 157, 116, .45); } 70% { box-shadow: 0 0 0 7px rgba(15, 157, 116, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 157, 116, 0); } }
.flash-up { animation: flashup .9s var(--ease); } .flash-down { animation: flashdown .9s var(--ease); }
@keyframes flashup { 0% { color: var(--bad); } 100% { color: inherit; } }
@keyframes flashdown { 0% { color: var(--ok); } 100% { color: inherit; } }
.userchip { display: flex; align-items: center; gap: var(--s2); padding: 3px 10px 3px 3px; border: 1px solid transparent; border-radius: var(--r-pill); background: none; cursor: pointer; font: inherit; color: var(--text); }
.userchip:hover { background: var(--hover); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #1d4ed8, #0e7490); color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.uname { text-align: left; line-height: 1.2; } .uname b { display: block; font-size: 13px; } .uname small { color: var(--muted); font-size: var(--fs-xs); }
.content { padding: var(--s6); max-width: 1560px; width: 100%; margin: 0 auto; flex: 1; }
.page-in { animation: pagein .28s var(--ease); }
@keyframes pagein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  padding: 6px; min-width: 220px; z-index: 60; animation: pop .16s var(--ease); transform-origin: top right; }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }
.dd { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: var(--r-sm); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.dd:hover { background: var(--hover); }
.dd-sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* ------------------------------------------------------------------ page */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.page-head p { margin: 4px 0 0; }
.crumbs { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.page-actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-1); min-width: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .card-head { padding: var(--s4) var(--s5) 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.card-head h3 .ic { color: var(--muted); }
.grid { display: grid; gap: var(--s4); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.span2 { grid-column: span 2; } .span-all { grid-column: 1 / -1; }
.split { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; }

/* KPI */
.kpi { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4) var(--s5); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); color: var(--text); text-decoration: none !important; min-width: 0; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--border2); }
.kpi-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--bg2); color: var(--text2); flex: none; }
.kpi-label { font-size: var(--fs-sm); color: var(--muted); font-weight: 550; }
.kpi-value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.25; margin-top: 2px; word-break: break-word; }
.kpi-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.kpi.t-blue .kpi-ic { background: var(--info-soft); color: var(--info); } .kpi.t-amber .kpi-ic { background: var(--warn-soft); color: var(--warn); }
.kpi.t-green .kpi-ic { background: var(--ok-soft); color: var(--ok); } .kpi.t-red .kpi-ic { background: var(--bad-soft); color: var(--bad); }
.kpi.t-violet .kpi-ic { background: var(--violet-soft); color: var(--violet); } .kpi.t-brand .kpi-ic { background: var(--brand-soft); color: var(--brand); }
.kpi.hero { background: linear-gradient(135deg, #12306e, #1d4ed8); color: #fff; border-color: transparent; }
.kpi.hero .kpi-label, .kpi.hero .kpi-sub { color: rgba(255,255,255,.75); } .kpi.hero .kpi-ic { background: rgba(255,255,255,.14); color: #fff; }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: var(--card); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat span { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat b { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat.ok b { color: var(--ok); } .stat.warn b { color: var(--warn); } .stat.bad b { color: var(--bad); } .stat.info b { color: var(--info); }

/* banners */
.alert-banner, .info-banner { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r); margin-bottom: var(--s4); font-size: var(--fs); color: inherit; text-decoration: none !important; }
.alert-banner { background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent); color: var(--text); }
.alert-banner > .ic:first-child { color: var(--bad); }
.alert-banner.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, transparent); } .alert-banner.warn > .ic:first-child { color: var(--warn); }
a.alert-banner:hover { filter: brightness(.98); }
.alert-banner span { flex: 1; }
.info-banner { background: var(--info-soft); color: var(--text2); font-size: var(--fs-sm); }
.info-banner > .ic { color: var(--info); }
.info-banner.warn { background: var(--warn-soft, #fff7e6); } .info-banner.warn > .ic { color: var(--warn, #b45309); } /* 4.13 holiday reminder */

/* tabs & segmented */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--s4); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: var(--s2); padding: 10px 14px; border: 0; background: none; color: var(--muted); font: 600 var(--fs) var(--font);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color var(--t-fast), border-color var(--t); }
.tab .ic { width: 16px; height: 16px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab em { font-style: normal; font-size: 11px; background: var(--bg2); color: var(--text2); border-radius: var(--r-pill); padding: 1px 7px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg2); border-radius: var(--r); flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; font: 600 var(--fs-sm) var(--font); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.seg button:hover:not(:disabled) { color: var(--text); }
.seg button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow-1); }
/* 4.7 (owner request): the chosen filter is clearly highlighted until another one is picked */
.seg button.on { background: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow-1); } .seg button.on .n { color: var(--brand-ink); opacity: .8; }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.seg button .n { font-weight: 600; color: var(--faint); }

/* choice cards (shipment type / mode selection) */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); }
.choice { position: relative; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1.5px solid var(--border); border-radius: var(--r); background: var(--card);
  cursor: pointer; transition: border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t); user-select: none; }
.choice:hover { border-color: var(--border2); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .cic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--bg2); color: var(--muted); transition: background var(--t), color var(--t); flex: none; }
.choice b { display: block; font-size: var(--fs); } .choice small { color: var(--muted); font-size: var(--fs-xs); }
.choice.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.choice.on .cic { background: var(--brand); color: #fff; }
.choice.on::after { content: ''; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat; }
.choice.disabled { opacity: .55; pointer-events: none; }

/* ------------------------------------------------------------------ tables */
.table-tools { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; }
.search-mini { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card2); min-width: 220px; color: var(--muted); }
.search-mini input { border: 0 !important; outline: 0; background: none !important; font: inherit; color: var(--text); width: 100%; height: 100% !important; padding: 0 !important; box-shadow: none !important; }
.search-mini:focus-within { border-color: var(--brand); box-shadow: var(--focus); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.tbl th { position: sticky; top: 0; z-index: 1; background: var(--card2); color: var(--muted); font-weight: 650; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl th.sortable { cursor: pointer; user-select: none; } .tbl th.sortable:hover { color: var(--text); }
.tbl th .sort { opacity: .7; font-size: 10px; margin-left: 3px; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--grid); vertical-align: middle; color: var(--text); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background var(--t-fast); }
.tbl tbody tr:hover { background: var(--hover); }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:active { background: var(--bg2); }
.tbl tfoot td { background: var(--card2); font-weight: 700; border-top: 1px solid var(--border); border-bottom: 0; }
.tbl .a-r { text-align: right; } .tbl .a-c { text-align: center; }
.tbl td.a-r { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.pulse-row td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.tbl tr.sel td { background: var(--brand-soft); }
.cell-title { font-weight: 600; color: var(--text); white-space: nowrap; } .cell-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.empty-cell { text-align: center; color: var(--muted); padding: var(--s7) !important; }
.pager { display: flex; justify-content: flex-end; align-items: center; gap: var(--s3); margin-top: var(--s3); font-size: var(--fs-sm); color: var(--muted); }
.tbl input.cell, .inp.cell { width: 100%; min-width: 60px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); color: var(--text); font: inherit; }
.tbl input.cell:focus { border-color: var(--brand); box-shadow: var(--focus); outline: 0; }
.row-actions { display: inline-flex; gap: 2px; flex-wrap: wrap; max-width: 100%; }

/* ------------------------------------------------------------------ forms */
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--text2); }
.req { color: var(--bad); margin-left: 2px; font-weight: 700; }
.input-row { display: flex; gap: 6px; align-items: center; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea, .inp {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--border2); border-radius: var(--r-sm); background: var(--card); color: var(--text);
  font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast); min-width: 0; }
textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23637387' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; cursor: pointer; }
input:focus, select:focus, textarea:focus, .inp:focus { outline: 0; border-color: var(--brand); box-shadow: var(--focus); }
input[readonly], select:disabled, textarea[readonly] { background: var(--card2); color: var(--muted); }
input.invalid, select.invalid, textarea.invalid { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
.help { font-size: var(--fs-xs); color: var(--muted); }
.field-err { font-size: var(--fs-xs); color: var(--bad); font-weight: 600; }
.form-section { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--s3); margin-top: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.form-section span { font-weight: 700; font-size: var(--fs); }
.form-section small { color: var(--muted); font-size: var(--fs-xs); }
.form-error { background: var(--bad-soft); color: var(--bad); padding: var(--s3) var(--s4); border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-sm); margin-top: var(--s4); white-space: pre-line; }
.form-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); flex-wrap: wrap; }
.check { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; font-weight: 500; }
.check input { width: 17px; height: 17px; accent-color: var(--brand); }
.addon-btn { width: 40px; height: 40px; flex: none; border: 1px solid var(--border2); border-radius: var(--r-sm); background: var(--card2); color: var(--brand); cursor: pointer; display: grid; place-items: center; }
.addon-btn:hover { background: var(--brand-soft); }
.display-val { min-height: 40px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--r-sm); background: var(--card2); border: 1px dashed var(--border2); font-weight: 650; word-break: break-all; }
.filters { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.filters .field { min-width: 150px; }
.filters .inp { height: 36px; }
.dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s3) var(--s4); }
.dl > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl span { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.dl b { font-weight: 550; word-break: break-word; }
.sum-row { display: flex; justify-content: space-between; gap: var(--s3); padding: 9px 0; border-bottom: 1px dashed var(--border); align-items: center; }
.sum-row:last-child { border-bottom: 0; }
.sum-row .v { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.sum-row.total { border-top: 2px solid var(--text); border-bottom: 0; margin-top: 4px; padding-top: 12px; font-size: var(--fs-md); }
.sum-row.total .v { font-size: 18px; }
.notes-area { width: 100%; min-height: 220px; }

/* ------------------------------------------------------------------ modal, drawer, toast */
.modal-wrap { position: fixed; inset: 0; z-index: 100; background: rgba(8, 15, 28, 0); display: grid; place-items: center; padding: var(--s4); transition: background var(--t); }
.modal-wrap.show { background: rgba(8, 15, 28, .5); }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(10px) scale(.985); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); border: 1px solid var(--border); }
.modal-wrap.show .modal { opacity: 1; transform: none; }
.modal.wide { width: min(860px, 100%); } .modal.xwide { width: min(1240px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: var(--fs-md); }
.modal-body { padding: var(--s5); overflow-y: auto; }
.confirm-text { font-size: var(--fs-md); line-height: 1.55; }
.drawer-wrap { position: fixed; inset: 0; z-index: 90; background: rgba(8, 15, 28, 0); transition: background var(--t); }
.drawer-wrap.show { background: rgba(8, 15, 28, .35); }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--card); box-shadow: var(--shadow-3); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s var(--ease); border-left: 1px solid var(--border); }
.drawer-wrap.show .drawer { transform: none; }
.drawer-head { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--s3); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--s2); }
#toasts { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 200; display: flex; flex-direction: column; gap: var(--s2); align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--s3); min-width: 280px; max-width: 420px; padding: 12px 14px; border-radius: var(--r); background: var(--card); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow-3); font-weight: 550; animation: toastin .28s var(--ease); position: relative; overflow: hidden; }
.toast .ic { margin-top: 1px; }
.toast-ok .ic { color: var(--ok); } .toast-err .ic { color: var(--bad); } .toast-warn .ic { color: var(--warn); } .toast-info .ic { color: var(--info); }
.toast::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; opacity: .25; animation: toastbar var(--dur, 3.2s) linear forwards; }
.toast-ok::after { color: var(--ok); } .toast-err::after { color: var(--bad); }
.toast.out { animation: toastout .25s var(--ease) forwards; }
@keyframes toastin { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastout { to { opacity: 0; transform: translateX(16px); } }
@keyframes toastbar { from { width: 100%; } to { width: 0; } }

/* notification items */
.nfilters { display: flex; gap: 6px; flex-wrap: wrap; }
.notif { display: flex; gap: var(--s3); padding: var(--s3); border-radius: var(--r); color: var(--text); text-decoration: none !important; position: relative; transition: background var(--t-fast); }
.notif:hover { background: var(--hover); }
.notif .nic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--bg2); color: var(--muted); }
.notif.critical .nic { background: var(--bad-soft); color: var(--bad); } .notif.warning .nic { background: var(--warn-soft); color: var(--warn); }
.notif.ok .nic { background: var(--ok-soft); color: var(--ok); } .notif.info .nic { background: var(--info-soft); color: var(--info); }
.notif b { display: block; font-size: var(--fs-sm); font-weight: 650; } .notif small { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.notif .when { font-size: 10.5px; color: var(--faint); margin-top: 3px; }
.notif.unread::before { content: ''; position: absolute; right: 10px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.notif.read { opacity: .66; }
.ngroup { padding: var(--s3) var(--s3) 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }

/* command palette (global search) */
.palette { width: min(680px, 100%); align-self: start; margin-top: 10vh; }
.palette .modal-body { padding: 0; }
.pal-input { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.pal-input input { border: 0 !important; box-shadow: none !important; height: 44px !important; background: none !important; font-size: 16px; padding: 0; background: none; }
.pal-results { max-height: 60vh; overflow-y: auto; padding: var(--s2); }
.pal-item { display: flex; align-items: center; gap: var(--s3); padding: 10px 12px; border-radius: var(--r-sm); color: var(--text); text-decoration: none !important; }
.pal-item .pic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--bg2); color: var(--muted); flex: none; }
.pal-item b { display: block; font-size: var(--fs); font-weight: 600; } .pal-item small { color: var(--muted); font-size: var(--fs-xs); }
.pal-item em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.pal-item.sel, .pal-item:hover { background: var(--brand-soft); }
.pal-item.sel .pic { background: var(--brand); color: #fff; }
.pal-hint { display: flex; gap: var(--s4); padding: 10px var(--s4); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--muted); flex-wrap: wrap; }

/* ------------------------------------------------------------------ loading: skeletons + logistics loaders */
.skel { position: relative; overflow: hidden; background: var(--skel); border-radius: 6px; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skel-hi), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-line { height: 12px; margin: 6px 0; } .skel-title { height: 22px; width: 240px; margin-bottom: 10px; }
.skel-badge { height: 20px; width: 78px; border-radius: 999px; display: inline-block; }
.skel-card { height: 92px; border-radius: var(--r-lg); }
.skel-row { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr .8fr 1fr; gap: var(--s4); align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--grid); }
.skel-timeline { display: flex; justify-content: space-between; gap: 6px; padding: var(--s2) 0; }
.skel-timeline .skel { width: 28px; height: 28px; border-radius: 50%; }
.loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s8) var(--s4); color: var(--muted); font-size: var(--fs-sm); }
.loader.sm { padding: var(--s5); }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--border2); border-top-color: var(--brand); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.logi { width: 220px; height: 70px; color: var(--brand); }
.logi .route { stroke: var(--border2); stroke-dasharray: 3 5; animation: dash 1.2s linear infinite; }
.logi .mover { animation: travel 2.4s var(--ease) infinite; }
.logi .bob { animation: bob 1.2s ease-in-out infinite; }
.logi .wave { stroke: var(--info); opacity: .5; animation: wave 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -16; } }
@keyframes travel { 0% { transform: translateX(-10px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(170px); opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes wave { to { transform: translateX(-12px); } }

/* ------------------------------------------------------------------ shipment timeline (stepper) */
.stepper { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; overflow-x: auto; }
.stepper li { flex: 1; min-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; padding: 0 4px; }
.stepper li::before { content: ''; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.stepper li:first-child::before { display: none; }
.stepper li.done::before, .stepper li.now::before { background: var(--brand); transition: background .4s var(--ease); }
.stepper .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 2px solid var(--border2); font-size: 12px; font-weight: 700; color: var(--muted); z-index: 1; transition: all .35s var(--ease); }
.stepper .dot .ic { width: 15px; height: 15px; }
.stepper li.done .dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.stepper li.now .dot { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 16%, transparent); animation: nowpulse 2.2s infinite; }
@keyframes nowpulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 6%, transparent); } }
.stepper .lbl { font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.stepper li.now .lbl { color: var(--text); } .stepper li.done .lbl { color: var(--text2); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 var(--s4) var(--s3); }
.timeline li::before { content: ''; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--brand); }
.timeline li:first-child::before { background: var(--brand); }

/* route bar for shipments */
.routebar { display: flex; align-items: center; gap: var(--s3); }
.routebar .port { font-weight: 650; font-size: var(--fs-sm); white-space: nowrap; }
.routebar .track { flex: 1; height: 6px; border-radius: 6px; background: var(--bg2); position: relative; min-width: 80px; }
.routebar .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, var(--brand), #0e7490); transition: width .6s var(--ease); }
.routebar .track .ic { position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; margin-left: -9px; color: var(--brand); background: var(--card); border-radius: 50%; transition: left .6s var(--ease); }

/* ------------------------------------------------------------------ misc components */
.empty-state { text-align: center; padding: var(--s8) var(--s5); }
.empty-state > .ic { width: 40px; height: 40px; color: var(--faint); margin-bottom: var(--s2); }
.empty-state h3 { justify-content: center; margin-bottom: 4px; }
.party-head { display: flex; gap: var(--s4); align-items: center; }
.party-av { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; background: linear-gradient(135deg, #1d4ed8, #0e7490); flex: none; }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; } .legend i.dot { width: 9px; height: 9px; border-radius: 50%; }
.chart-box { position: relative; height: 300px; }
.rate-card { border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3) var(--s4); background: var(--card2); }
.rate-card .big { font-size: 26px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dropzone { border: 2px dashed var(--border2); border-radius: var(--r-lg); padding: var(--s6); text-align: center; color: var(--muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: var(--s2); transition: border-color var(--t), background var(--t); }
.dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3); }
.thumb { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--card2); }
.thumb img { width: 100%; height: 110px; object-fit: cover; display: block; }
.thumb .pdf { height: 110px; display: grid; place-items: center; color: var(--muted); gap: 4px; }
.thumb .cap { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 6px 8px; font-size: var(--fs-xs); }
.thumb .cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wait-box { text-align: center; padding: var(--s5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card2); margin-top: var(--s4); }
.price-pick { border: 1px solid var(--border); border-radius: var(--r); margin-top: 6px; overflow: hidden; }
.price-pick button { display: flex; width: 100%; justify-content: space-between; gap: var(--s3); padding: 8px 12px; border: 0; border-bottom: 1px solid var(--grid); background: var(--card); color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left; }
.price-pick button:hover { background: var(--brand-soft); }
.price-pick button.best b { color: var(--ok); }
.price-hint { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.ctotals { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-sm); }
.ctotals b { font-variant-numeric: tabular-nums; }
.month-block { margin-bottom: var(--s5); }
.month-block h3 { margin-bottom: var(--s3); }
.event-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--r); background: var(--card); margin-bottom: var(--s2); transition: box-shadow var(--t), transform var(--t); }
.event-row:hover { box-shadow: var(--shadow-2); }
.event-date { text-align: center; border-radius: 9px; background: var(--bg2); padding: 6px 4px; line-height: 1.1; }
.event-date b { display: block; font-size: 20px; } .event-date small { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.event-row.expo .event-date { background: var(--info-soft); color: var(--info); } .event-row.holiday .event-date, .event-row.tentative .event-date { background: var(--bad-soft); color: var(--bad); }
.event-row.advisory .event-date { background: var(--warn-soft); color: var(--warn); }
.cal-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dow { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; padding: 4px; text-transform: uppercase; }
.day { min-height: 92px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px; display: flex; flex-direction: column; gap: 2px; background: var(--card); overflow: hidden; }
.day .n { font-size: 12px; font-weight: 650; color: var(--muted); }
.day.out { opacity: .45; } .day.today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .day.today .n { color: var(--brand); }
.day.hol { background: color-mix(in srgb, var(--bad-soft) 60%, var(--card)); } .day.adv { background: color-mix(in srgb, var(--warn-soft) 60%, var(--card)); }
.tag { font-size: 10.5px; font-weight: 600; padding: 1px 5px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; text-decoration: none !important; }
.tag.hol, .tag.ten { background: var(--bad-soft); color: var(--bad); } .tag.work { background: var(--info-soft); color: var(--info); }
.tag.adv { background: var(--warn-soft); color: var(--warn); } .tag.expo { background: var(--brand-soft); color: var(--brand); } .tag.ord { background: var(--ok-soft); color: var(--ok); }
.perm-table select { height: 34px; }
.mobile-only { display: none; }
.bottom-nav { display: none; }
.print-only { display: none; }

/* ------------------------------------------------------------------ auth screens */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); background: var(--card); }
.auth-art { position: relative; overflow: hidden; color: #fff; padding: var(--s8); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6);
  background: radial-gradient(1200px 600px at 10% 0%, #1e3a8a 0%, transparent 60%), radial-gradient(900px 600px at 100% 100%, #0e5d74 0%, transparent 55%), #08121f; }
.auth-art::before { content: ''; position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 85%); }
.auth-art > * { position: relative; }
.auth-art h2 { color: #fff; font-size: 34px; line-height: 1.15; letter-spacing: -.025em; max-width: 520px; margin: var(--s4) 0 var(--s3); font-weight: 750; }
.auth-art p { color: rgba(255,255,255,.72); max-width: 480px; font-size: var(--fs-md); }
.auth-brand { display: flex; align-items: center; gap: var(--s3); }
.auth-brand b { font-size: 20px; letter-spacing: -.01em; } .auth-brand small { display: block; color: rgba(255,255,255,.6); font-size: var(--fs-sm); }
.auth-route { width: 100%; max-width: 560px; height: 120px; }
.auth-route .sea { stroke: rgba(255,255,255,.22); stroke-dasharray: 4 7; animation: dash 1.6s linear infinite; }
.auth-route .shipg { animation: sail 9s linear infinite; }
@keyframes sail { 0% { transform: translate(40px, 0); } 100% { transform: translate(470px, 0); } }
.auth-stats { display: flex; gap: var(--s6); flex-wrap: wrap; }
.auth-stats div { font-size: var(--fs-sm); color: rgba(255,255,255,.6); } .auth-stats b { display: block; color: #fff; font-size: var(--fs-lg); }
.auth-form { display: grid; place-items: center; padding: var(--s7) var(--s5); background: var(--bg); }
.auth-card { width: min(410px, 100%); }
.auth-card h1 { font-size: 26px; margin-bottom: 6px; }
.auth-card form { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s5); }
.auth-card .btn { height: 44px; }
/* 4.18 (owner request): login page "Concept C" - centred card, route ORDERED → RECEIVED behind it, app colours */
.auth.auth-c { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; position: relative; overflow-x: hidden; background: radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%), var(--bg); }
.auth.auth-c::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(700px 500px at 50% 45%, #000 30%, transparent 75%); }
/* 4.18.1: the page is centred on every screen; the route sits behind the card at the middle of the page */
.auth-c-route { position: absolute; left: 0; right: 0; top: calc(50% - 175px); width: 100%; height: 200px; pointer-events: none; }
.auth-c-route text { font-family: inherit; }
.auth-c-wrap { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(24px, 6vh, 64px) var(--s4) clamp(16px, 3vh, 28px); }
.auth-c-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.auth-c-brand img { width: 58px; height: auto; } .auth-c-brand b { font-size: 19px; display: block; color: var(--text); } .auth-c-brand small { color: var(--muted); font-size: var(--fs-sm); }
.auth-c .auth-card { width: min(430px, 100%); padding: 30px 32px 24px; box-shadow: 0 30px 60px -28px rgba(15, 27, 45, .35); }
.auth-c .auth-card h1 { font-size: 24px; margin: 0 0 6px; }
.auth-c .auth-card > p.muted { margin: 0; }
.auth-c-feats { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
.auth-c-feats .chip { height: 30px; padding: 0 12px; font-size: 12px; gap: 6px; background: var(--card); border: 1px solid var(--border); color: var(--text2); }
.auth-c-feats .chip .ic { color: var(--brand); width: 15px; height: 15px; }
.auth-c-foot { position: relative; flex: none; text-align: center; font-size: 11.5px; color: var(--muted); padding: 0 var(--s4) max(20px, env(safe-area-inset-bottom)); }
.auth-forgot { margin: 0; text-align: center; display: flex; gap: 6px; justify-content: center; align-items: center; }
.auth-device { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (max-height: 560px) { .auth-c-route { display: none; } } /* short / landscape screens: no route behind the card */
.linkish { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; cursor: pointer; text-decoration: underline; }
@media (max-width: 600px) {
  .auth-c-route { display: none; }
  .auth-c-wrap { padding: max(24px, env(safe-area-inset-top)) 16px 20px; } .auth-c-brand img { width: 50px; }
  .auth-c .auth-card { padding: 24px 20px 20px; }
}
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-wrap button { position: absolute; right: 4px; top: 4px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1280px) {
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clock small { display: none; }
}
@media (max-width: 1100px) {
  .fxtick { display: none; }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1199px) {
  .menu-btn { display: inline-grid; }
  .side-scrim { display: block; position: fixed; inset: 0; background: rgba(8, 15, 28, .45); z-index: 35; opacity: 0; pointer-events: none; transition: opacity var(--t); }
  .side.open + .side-scrim { opacity: 1; pointer-events: auto; }
}
/* tablet (768-1199): collapsed icon rail, menu button opens the full sidebar over the page */
@media (min-width: 768px) and (max-width: 1199px) {
  .app { grid-template-columns: 72px minmax(0, 1fr); }
  .side { width: 72px; transition: width .22s var(--ease), box-shadow .22s var(--ease); }
  .side:not(.open) .side-brand { justify-content: center; padding: var(--s4) 0; }
  .side:not(.open) .side-brand > div:last-child, .side:not(.open) .nav-group, .side:not(.open) .nav a > span:not(.badge), .side:not(.open) .side-foot { display: none; }
  .side:not(.open) .nav { padding: var(--s2) 10px; }
  .side:not(.open) .nav a { justify-content: center; padding: 12px 0; margin-bottom: 2px; }
  .side:not(.open) .nav a .ic { width: 20px; height: 20px; }
  .side:not(.open) .nav a .badge { position: absolute; top: 3px; right: 3px; margin: 0; }
  .side:not(.open) .nav a.active::before { left: -10px; }
  .side.open { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; box-shadow: var(--shadow-3); }
}
@media (max-width: 767px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; max-width: 86vw; transform: translateX(-100%); transition: transform .26s var(--ease); box-shadow: var(--shadow-3); }
  .side.open { transform: none; }
}
@media (max-width: 980px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g2 { grid-template-columns: minmax(0, 1fr); } .span2 { grid-column: auto; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-art { padding: var(--s6) var(--s5); min-height: 0; }
  .auth-art h2 { font-size: 24px; } .auth-route, .auth-stats { display: none; }
  .searchbtn { min-width: 0; }
}
@media (max-width: 767px) {
  body { font-size: 14.5px; }
  .topbar { padding: 0 var(--s3); height: 56px; gap: 4px; }
  .searchbtn { width: 40px; flex: none; padding: 0; justify-content: center; } .searchbtn span, .searchbtn kbd { display: none; }
  .uname { display: none; } .userchip { padding: 2px; }
  .clocks { padding: 2px; } .clock { padding: 2px 6px; gap: 4px; } .clock b { font-size: 12px; } .clock .flag { font-size: 9px; padding: 1px 3px; }
  .content { padding: var(--s4) var(--s3) 88px; }
  h1 { font-size: 20px; }
  .page-head { margin-bottom: var(--s4); }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .card { padding: var(--s4); border-radius: var(--r); }
  .g5, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .kpi { padding: var(--s3); gap: var(--s2); } .kpi-ic { width: 32px; height: 32px; } .kpi-value { font-size: 19px; }
  .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .col-3, .col-4, .col-2 { grid-column: 1 / -1; } .col-1 { grid-column: span 1; }
  .modal-wrap { padding: 0; place-items: end stretch; }
  .modal, .modal.wide, .modal.xwide { width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(40px); }
  .palette { margin-top: 0; align-self: stretch; max-height: 100vh; border-radius: 0; }
  .modal-body { padding: var(--s4); }
  .form-actions { position: sticky; bottom: calc(-1 * var(--s4)); background: var(--card); padding: var(--s3) 0; margin-bottom: calc(-1 * var(--s4)); border-top: 1px solid var(--border); }
  .form-actions .btn { flex: 1; }
  #toasts { left: var(--s3); right: var(--s3); bottom: 76px; align-items: stretch; } .toast { min-width: 0; max-width: none; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-row { grid-template-columns: 60px minmax(0, 1fr); } .event-row > :last-child { grid-column: 2; justify-self: start; }
  .day { min-height: 54px; } .day .tag { display: none; } .day.hol::after, .day.adv::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); margin: auto auto 2px; }
  .day.adv::after { background: var(--warn); }
  .mobile-only { display: initial; }
  .desk-only { display: none !important; }
  /* tables become cards */
  .table-wrap.cards { border: 0; overflow: visible; }
  .table-wrap.cards .tbl thead { display: none; }
  .table-wrap.cards .tbl, .table-wrap.cards .tbl tbody, .table-wrap.cards .tbl tr, .table-wrap.cards .tbl td { display: block; width: 100%; }
  .table-wrap.cards .tbl tr { border: 1px solid var(--border); border-radius: var(--r); margin-bottom: var(--s2); background: var(--card); padding: var(--s2) var(--s3); box-shadow: var(--shadow-1); }
  .table-wrap.cards .tbl tr.pulse-row { border-left: 3px solid var(--bad); }
  .table-wrap.cards .tbl td { border: 0; padding: 5px 0; display: grid; grid-template-columns: minmax(90px, 40%) minmax(0, 1fr); column-gap: var(--s3); text-align: right; align-items: center; min-height: 28px; }
  .table-wrap.cards .tbl td > * { grid-column: 2; justify-self: end; }
  .table-wrap.cards .tbl td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 6; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-align: left; align-self: center; }
  .table-wrap.cards .tbl td[data-label='']::before { display: none; }
  .table-wrap.cards .tbl td:first-child { display: block; text-align: left; border-bottom: 1px solid var(--grid); padding-bottom: 8px; margin-bottom: 4px; }
  .table-wrap.cards .tbl td:first-child > * { justify-self: start; }
  .table-wrap.cards .tbl td:first-child:has(> input[type=checkbox]) { display: flex; justify-content: space-between; align-items: center; }
  .table-wrap.cards .tbl td:first-child:has(> input[type=checkbox])::before { display: block; content: 'Select'; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
  .table-wrap.cards .tbl td:first-child > input[type=checkbox] { width: 20px; height: 20px; }
  .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; } .seg button { white-space: nowrap; }
  .table-wrap.cards .tbl td:first-child::before { display: none; }
  .table-wrap.cards .tbl td > div { text-align: inherit; }
  .table-wrap.cards .tbl td.empty-cell { display: block; text-align: center; }
  .table-wrap.cards .tbl td.empty-cell::before { display: none; }
  .table-wrap.cards .tbl tfoot { display: block; } .table-wrap.cards .tbl tfoot tr { display: flex; flex-wrap: wrap; gap: var(--s2); background: var(--card2); }
  .table-wrap.cards .tbl tfoot td { width: auto; display: inline-flex; padding: 2px 4px; } .table-wrap.cards .tbl tfoot td:empty { display: none; }
  .table-wrap.cards .tbl tfoot td::before, .table-wrap.cards .tbl tfoot td:first-child { border: 0; margin: 0; }
  .search-mini { min-width: 0; flex: 1 1 100%; }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: 64px; padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--border); }
  .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font: 600 10.5px var(--font); background: none; border: 0; text-decoration: none !important; position: relative; }
  .bottom-nav .active { color: var(--brand); }
  .bottom-nav .ic { width: 21px; height: 21px; }
  .bottom-nav .dotcount { top: 6px; right: calc(50% - 20px); }
}
@media (max-width: 420px) {
  .clock:nth-child(2) small, .clock .flag { display: none; }
  .clocks .clock b::before { font-size: 9px; color: var(--muted); margin-right: 3px; font-weight: 800; }
  .clocks .clock:nth-child(1) b::before { content: 'IN'; } .clocks .clock:nth-child(2) b::before { content: 'CN'; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------------------ print */
@media print {
  body { background: #fff; font-size: 11px; color: #000; }
  .side, .topbar, .bottom-nav, .page-actions, .tabs, .table-tools, .pager, .btn, .icon-btn, #toasts, .seg, .no-print { display: none !important; }
  .app { display: block; } .content { padding: 0; max-width: none; }
  .card { border: 0; box-shadow: none; padding: 0; }
  .print-only { display: block; margin-bottom: 12px; }
  .table-wrap { border: 0; overflow: visible; } .tbl th { position: static; background: #f1f1f1; color: #000; } .tbl td { border-bottom: 1px solid #ddd; }
}
.input-row > .choices { flex: 1; min-width: 0; }

/* ------------------------------------------------------------------ v2.1 additions */
/* Branded hand cursor for everything clickable (falls back to the normal pointer) */
:root { --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M10 2.5c1.2 0 2 .9 2 2V12l1-.1c.9-.1 1.8.4 2 1.3l.1.3.7-.2c1-.2 1.9.4 2.1 1.3l.6-.1c1-.1 1.9.6 2 1.6l.2 4c.2 3.2-2.3 6-5.5 6.2h-3c-1.8 0-3.4-.9-4.4-2.4L4 18.3c-.6-.9-.4-2.1.5-2.7.8-.5 1.9-.4 2.5.4L8 17.3V4.5c0-1.1.9-2 2-2z' fill='white' stroke='%231d4ed8' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M12 12v4.5M15.1 13.4v3.4M17.9 14.8v2.5' stroke='%231d4ed8' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") 9 2, pointer; }
a, button:not(:disabled), [role=tab], .clickable, .tbl tr.clickable, .choice, select, summary, label.check, .seg button:not(:disabled), .kpi[href], .dropzone,
.searchbtn, .userchip, .pal-item, .notif, .fxtick, .tbl th.sortable, input[type=checkbox], input[type=radio], .bottom-nav a, .bottom-nav button { cursor: var(--cur-hand); }
@media (max-width: 767px) { .table-wrap.cards .tbl td.m-hide { display: none !important; } }

/* Branded loading screen (shown until the app starts) */
.boot-splash { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(1200px 600px at 20% 0%, #13305e 0%, #0b1626 60%); color: #fff; font-family: var(--font); text-align: center; padding: 24px; }
.boot-splash .bs-logo { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(140deg, #2563eb, #0e7490);
  box-shadow: 0 18px 50px rgba(37, 99, 235, .35), inset 0 1px 0 rgba(255, 255, 255, .2); animation: bspop .6s var(--ease) both; }
.boot-splash .bs-logo svg { width: 46px; height: 46px; }
.boot-splash .bs-logo img { width: 70px; height: 70px; object-fit: contain; }
.boot-splash b { font-size: 20px; letter-spacing: -.01em; }
.boot-splash small { color: rgba(255, 255, 255, .6); font-size: 13px; }
.bs-route { position: relative; width: 180px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.bs-ship { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, transparent, #4f7df0, #35c0d8); animation: bsrun 1.2s ease-in-out infinite; }
@keyframes bsrun { to { left: 100%; } }
@keyframes bspop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* "New version available" prompt */
.upd-bar { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: var(--s3);
  background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 10px 12px 10px 14px;
  width: max-content; max-width: calc(100vw - 24px); animation: pagein .3s var(--ease); }
.upd-bar > .ic { color: var(--brand); flex: none; }
.upd-bar span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .upd-bar small { color: var(--muted); font-size: var(--fs-xs); }
.upd-bar .btn { flex: none; }

/* online / offline indicator */
.net-pill { position: fixed; top: calc(68px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 85; display: flex; align-items: center; gap: 8px;
  background: #3b2604; color: #ffe2b0; border: 1px solid #7a4d0a; border-radius: var(--r-pill); padding: 7px 14px; font-size: var(--fs-sm); box-shadow: var(--shadow-2);
  width: max-content; max-width: calc(100vw - 24px); animation: pagein .25s var(--ease); }
.net-pill.ok { background: #063d2a; color: #b8f0d8; border-color: #0d6b4a; }
.net-pill .ic { flex: none; width: 16px; height: 16px; }

/* trade news ticker - fixed at the bottom on every device */
:root { --news-h: 34px; }
.news-bar { position: fixed; left: 252px; right: 0; bottom: 0; z-index: 44; height: var(--news-h); display: flex; align-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--border); font-size: 12.5px; }
.news-bar.hidden { display: none; }
.news-label { flex: none; display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px; background: var(--brand); color: #fff; font-weight: 700; white-space: nowrap; }
.news-label .ic { width: 15px; height: 15px; }
.news-label small { font-weight: 500; opacity: .8; font-size: 11px; }
.news-track { flex: 1; overflow: hidden; height: 100%; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.news-run { display: inline-flex; align-items: center; height: 100%; white-space: nowrap; animation: newsrun calc(var(--n, 10) * 9s) linear infinite; will-change: transform; }
.news-run a { color: var(--text2); text-decoration: none; padding: 0 22px; position: relative; }
.news-run a::after { content: '•'; position: absolute; right: -3px; color: var(--faint); }
.news-run a b { color: var(--brand); font-weight: 650; margin-right: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.news-run a:hover { color: var(--text); text-decoration: underline; }
.news-bar:hover .news-run, .news-bar:focus-within .news-run { animation-play-state: paused; }
@keyframes newsrun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body.has-news .content { padding-bottom: calc(var(--s6) + var(--news-h)); }
body.has-news .side { padding-bottom: var(--news-h); }
@media (min-width: 768px) and (max-width: 1199px) { .news-bar { left: 72px; } }
@media (max-width: 767px) {
  .news-bar { left: 0; bottom: calc(64px + env(safe-area-inset-bottom)); height: 30px; font-size: 12px; }
  :root { --news-h: 30px; }
  .news-label span { display: none; } .news-label { padding: 0 9px; }
  body.has-news .content { padding-bottom: calc(96px + var(--news-h)); }
  body.has-news #toasts { bottom: calc(76px + var(--news-h)); }
  body.has-news .side { padding-bottom: 0; }
  .upd-bar { bottom: calc(104px + env(safe-area-inset-bottom)); flex-wrap: wrap; justify-content: flex-end; }
  .upd-bar span { flex: 1 1 calc(100% - 40px); }
}
@media (prefers-reduced-motion: reduce) { .news-run { animation: none; } .news-track { overflow-x: auto; } }
@media print { .news-bar, .upd-bar, .net-pill { display: none !important; } }

.fxtick .fx-upd { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
@media (max-width: 1440px) { .fxtick .fx-upd { display: none; } }

/* two-factor login, recovery codes, health page, drafts */
.tfa-qr { display: grid; place-items: center; margin: 0 auto var(--s3); width: 200px; max-width: 70vw; background: #fff; border-radius: var(--r); padding: 8px; }
.tfa-qr svg { width: 100%; height: auto; display: block; }
code.sel { user-select: all; font-weight: 700; letter-spacing: .04em; }
.rc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: var(--s3) 0; }
.rc-grid code { text-align: center; padding: 8px; border: 1px dashed var(--border2); border-radius: var(--r-sm); background: var(--card2); font-size: 14px; letter-spacing: .06em; }
.steps { padding-left: 20px; display: grid; gap: 8px; }
.health-head { display: flex; align-items: center; gap: var(--s4); border-left: 4px solid var(--ok); }
.health-head.warn { border-left-color: var(--warn); } .health-head.bad { border-left-color: var(--bad); }
.health-head h3 { margin: 0 0 2px; }
.hh-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ok-soft, #e3f6ee); color: var(--ok); }
.health-head.warn .hh-ic { background: var(--warn-soft, #fff3dc); color: var(--warn); } .health-head.bad .hh-ic { background: var(--bad-soft, #fde7e7); color: var(--bad); }
.health-list { display: flex; flex-direction: column; }
.health-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 12px var(--s5); border-bottom: 1px solid var(--grid); }
.health-row:last-child { border-bottom: 0; }
.hr-l { min-width: 0; } .hr-l b { display: block; } .hr-l small { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.health-row .chip { flex: none; }
.pre-box { white-space: pre-wrap; background: var(--card2); padding: 12px; border-radius: 10px; max-height: 50vh; overflow: auto; font-size: 12px; }
.warn-text { color: var(--warn); }
.tbl.compact td, .tbl.compact th { padding: 6px 10px; }
.tbl.compact td { overflow-wrap: anywhere; }
.draft-bar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.draft-bar span { flex: 1 1 200px; }

/* touch screens: 44px touch targets, no zoom on input focus */
@media (pointer: coarse) {
  .btn, .icon-btn, .dd, .nav a, .seg button, .tab, .bottom-nav a, .bottom-nav button, .pager button, .link-btn { min-height: 44px; }
  .icon-btn { min-width: 44px; }
  .btn.sm { min-height: 40px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
}
@media (max-width: 767px) {
  input, select, textarea, .inp { font-size: 16px !important; }
  .modal, .modal.wide, .modal.xwide { max-height: calc(100dvh - 24px); }
  .modal-body { padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom)); }
  .dropdown { max-height: calc(100dvh - 140px); overflow-y: auto; }
}
/* phone in landscape: keep the top bar and bottom bar slim */
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  .topbar { height: 50px; }
  .bottom-nav { height: 52px !important; }
  .modal, .modal.wide, .modal.xwide { max-height: 100dvh; }
}
@media (max-width: 767px) and (max-height: 500px) and (orientation: landscape) { .news-bar { bottom: calc(52px + env(safe-area-inset-bottom)); } }
/* installed app (standalone): respect the notch / status bar */
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); height: calc(60px + env(safe-area-inset-top)); }
}
body { max-width: 100%; overflow-x: clip; }

/* very small phones: search lives in the bottom bar, clocks compact so nothing runs off the screen */
.clock b { white-space: nowrap; }
@media (max-width: 480px) {
  .topbar .searchbtn { display: none; }
  .top-right { gap: 2px; min-width: 0; }
  .clocks { min-width: 0; }
}
@media (max-width: 359px) {
  .clocks { flex-direction: column; gap: 0; padding: 1px 2px; }
  .clock { padding: 0 4px; } .clock b { font-size: 11px; line-height: 1.15; }
}
/* top bar never wider than the screen: the search box gives way first, then the user name */
.top-right > * { flex-shrink: 0; }
.fxtick, .clock b, .uname b { white-space: nowrap; }
@media (max-width: 1440px) { .searchbtn { min-width: 150px; } }
@media (max-width: 1365px) { .uname { display: none; } .userchip { padding: 2px; } .searchbtn kbd { display: none; } }
@media (min-width: 768px) and (max-width: 1199px) { .searchbtn { min-width: 44px; } }
@media (pointer: coarse) { .userchip { min-height: 44px; min-width: 44px; justify-content: center; } }

/* dashboard order pipeline: 6 tiles (Orders → Delivered) */
.grid.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* 4.7: seven stage tiles (Goods Ready added) */
.grid.g7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1600px) { .grid.g7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grid.g7 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); } }
/* 4.7 (owner request): blinking alerts - dispatch follow-up (amber) and goods ready (green) */
.alert-banner.ok { background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); } .alert-banner.ok > .ic:first-child { color: var(--ok); }
.blink-warn { animation: blinkWarn 1.4s ease-in-out infinite; }
.blink-ok, .kpi-blink { animation: blinkOk 1.4s ease-in-out infinite; }
@keyframes blinkWarn { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 45%, transparent); } }
@keyframes blinkOk { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .blink-warn, .blink-ok, .kpi-blink { animation: none; border-width: 2px; } }
@media (max-width: 1440px) { .grid.g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grid.g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); } }

/* ---------------------------------------------------------------- v2.4: phones with a notch / status bar, menu, back & forward */
/* content never sits under the iPhone notch / status bar (installed app uses a see-through status bar) */
.topbar { padding-top: env(safe-area-inset-top, 0px) !important; height: calc(60px + env(safe-area-inset-top, 0px)) !important;
  padding-left: max(var(--s3), env(safe-area-inset-left, 0px)); padding-right: max(var(--s3), env(safe-area-inset-right, 0px)); }
.side { padding-top: env(safe-area-inset-top, 0px); }
.drawer { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.modal-wrap { padding-top: max(var(--s4), env(safe-area-inset-top, 0px)); }
.palette { margin-top: max(10vh, env(safe-area-inset-top, 0px)); }
.upd-bar, #toasts { margin-bottom: env(safe-area-inset-bottom, 0px); }
/* back / forward arrows on every screen size */
.navarrows { display: flex; gap: 2px; flex: none; }
.drawer-head .back-btn { display: inline-grid; }
@media (max-width: 767px) {
  .topbar { height: calc(56px + env(safe-area-inset-top, 0px)) !important; gap: 2px; }
  .navarrows { gap: 0; }
  .modal-wrap { padding-top: env(safe-area-inset-top, 0px); }
  .modal, .modal.wide, .modal.xwide { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px); }
  .palette { margin-top: env(safe-area-inset-top, 0px); max-height: calc(100dvh - env(safe-area-inset-top, 0px)); }
  .drawer { width: 100%; }
}
@media (max-width: 400px) {
  .topbar .icon-btn { min-width: 38px; width: 38px; }
  .topbar .menu-btn { margin-right: -2px; }
}
/* menu (sidebar) open on phone / tablet: above the news ticker and bottom bar, scrolls on its own, page behind does not move */
@media (max-width: 1199px) {
  .side.open { z-index: 70; }
  .side.open + .side-scrim { z-index: 65; }
  .side { height: 100dvh; max-height: 100dvh; }
  .side .nav { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
  .side-scrim { touch-action: none; }
  .side-foot { padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); }
  html.menu-open, html.menu-open body { overflow: hidden; overscroll-behavior: none; }
  body.has-news .side.open { padding-bottom: 0; }
}
@media (max-width: 767px) { body.has-news .side { padding-bottom: 0; } }
@media (max-width: 480px) { #nAll span { display: none; } .drawer-head h3 { font-size: 15px; white-space: nowrap; } }
/* phones: back / forward arrows need room - the two clocks stack */
@media (max-width: 480px) {
  .clocks { flex-direction: column; gap: 0; padding: 1px 2px; }
  .clock { padding: 0 4px; } .clock b { font-size: 11px; line-height: 1.15; }
}

/* 4.1: refresh-all button spins while it works */
.icon-btn.busy svg { animation: spin .8s linear infinite; }

/* 4.1: phone number with country code */
.phone-input { display: flex; gap: 6px; flex: 1; min-width: 0; }
.phone-input .phone-cc { flex: 0 0 auto; width: auto; max-width: 46%; }
.phone-input input { flex: 1; min-width: 0; }

/* 4.1: exchange-rate difference between the two graphs */
.card-sub-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.fx-diff .stat b { font-variant-numeric: tabular-nums; }

/* 4.1: several new items at once */
.item-row { display: flex; gap: 10px; align-items: flex-end; }
.item-row .field { margin: 0; min-width: 0; } .item-row .field.grow { flex: 1; } .item-row .field:first-child { width: 140px; flex: 0 0 auto; }
.item-row .icon-btn { margin-bottom: 2px; }

/* 4.1: procurement comparison quotation rows */
.quote-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.quote-row .field { margin: 0; min-width: 110px; flex: 0 1 130px; } .quote-row .field.grow { flex: 1 1 180px; }
.quote-row .icon-btn { margin-bottom: 2px; }
.filters .field.grow { flex: 1 1 280px; }

/* edit lock (ADR 0024): "Being edited by <name>" at the top of a form */
.lock-bar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: 10px; padding: 10px 12px; margin-bottom: var(--s3, 12px); }
.lock-bar svg { width: 18px; height: 18px; flex: none; }
.lock-bar .lock-text { flex: 1 1 220px; min-width: 0; }
.lock-bar .lock-text b { display: block; }
.lock-bar .lock-text small { color: var(--text2); font-size: var(--fs-xs); }

/* 4.1: the refresh-all button needs room on the smallest phones (320 px): top-bar buttons a little narrower there */
@media (max-width: 359px) {
  .topbar .icon-btn { min-width: 34px; width: 34px; }
  .topbar .icon-btn svg { width: 18px; height: 18px; }
  /* 4.1.3: keep a safe margin whatever the browser's font rendering - "forward" is the least used button (Back stays) */
  .topbar #goFwd { display: none; }
}

/* 4.1: phone cards - an action cell with nothing in it (e.g. "Settle" on a settled payer) takes no space */
@media (max-width: 767px) { .table-wrap.cards .tbl td[data-label='']:empty { display: none; } }

/* ---------------------------------------------------------------- 4.2: security alerts, approval codes, ratings */
.alert-banner.sec-alarm { background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad); animation: secPulse 1.6s ease-in-out infinite; }
.alert-banner.sec-alarm .btn, .alert-banner.warn .btn { margin-left: auto; flex: none; }
@keyframes secPulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px var(--bad-soft); } }
@media (prefers-reduced-motion: reduce) { .alert-banner.sec-alarm { animation: none; } }
.sec-alert { margin-bottom: var(--s3); border-left: 4px solid var(--warn); }
.sec-alert.critical { border-left-color: var(--bad); }
.sec-alert.acked { opacity: .65; }
.sec-alert-head { display: flex; gap: var(--s3); align-items: flex-start; }
.sec-alert-head .grow { flex: 1; min-width: 0; }
.approval-code { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 800; letter-spacing: .18em; background: var(--warn-soft); color: var(--text); padding: 2px 8px; border-radius: var(--r-sm); }
.pw-view { display: block; font-family: var(--mono); font-size: var(--fs-lg); padding: var(--s3); background: var(--hover); border-radius: var(--r-sm); word-break: break-all; user-select: all; }
#approvalCode { font-family: var(--mono); font-size: var(--fs-lg); letter-spacing: .3em; text-align: center; }
.stars { display: inline-flex; gap: 1px; white-space: nowrap; }
.stars .star { background: none; border: 0; padding: 0 1px; font-size: 16px; line-height: 1; color: var(--border); cursor: default; }
.stars .star.on { color: #f5a524; }
.stars.can .star { cursor: pointer; }
.stars.can .star:hover, .stars.can .star:focus-visible { transform: scale(1.15); }

/* 4.7: a button that looks like a link (owner password reset on the sign-in page) */
.linklike { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linklike:hover { color: var(--brand-strong); }

/* 4.9 Item Prices: best supplier price per size, poorly rated supplier */
.tbl tr.row-best td:first-child { box-shadow: inset 4px 0 0 var(--ok); }
.tbl tr.row-best td { background: color-mix(in srgb, var(--ok) 5%, transparent); }
.tbl tr.row-poor td:first-child { box-shadow: inset 4px 0 0 var(--bad); }

/* 4.11: sale type drop-down (not for sale) on Supplier payments and Sale price */
.nfs { padding: var(--s3) var(--s4); }
.nfs-row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.nfs-row label { display: flex; gap: 6px; align-items: center; margin: 0; }
.nfs-row select { width: auto; min-width: 240px; height: 36px; }
.nfs.on { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); background: color-mix(in srgb, var(--ok) 5%, var(--card)); }

/* 4.11: wide tables - scroll bar and arrows above the table, frozen first columns */
.hscroll-bar { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.hscroll-bar .icon-btn { flex: none; }
.hscroll { flex: 1; overflow-x: auto; overflow-y: hidden; height: 14px; border-radius: 7px; background: var(--bg2); scrollbar-width: thin; }
.hscroll > div { height: 1px; }
.hscroll::-webkit-scrollbar { height: 10px; } .hscroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 55%, transparent); border-radius: 6px; }
.table-wrap.has-frz .frz { position: sticky; z-index: 2; background: var(--card); }
.table-wrap.has-frz thead .frz { z-index: 3; background: var(--card2); }
.table-wrap.has-frz tr.row-best td.frz { background: color-mix(in srgb, var(--ok) 6%, var(--card)); }
.table-wrap.has-frz.scrolled .frz-last { box-shadow: 6px 0 8px -6px rgba(15, 23, 42, .25); }
.table-wrap.has-frz tr.clickable:hover td.frz { background: var(--hover); }
@media (max-width: 760px) { .table-wrap.cards.has-frz .frz { position: static; } }

/* 4.11 Item Prices: item at a glance, prices by size, price chart */
.sup-list { display: flex; gap: 4px; flex-wrap: wrap; font-size: 12px; font-weight: 600; line-height: 1.6; }
.pct { font-weight: 700; white-space: nowrap; } .pct.up { color: var(--bad); } .pct.down { color: var(--ok); } .pct.flat { color: var(--muted); }
.low-price b { color: var(--ok); }
.size-link { color: var(--brand); }
.price-chart .legend-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.price-chart .legend-row i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }

/* 4.11: notification sounds */
.sound-grid { display: flex; flex-direction: column; gap: 10px; }
.sound-row { display: grid; grid-template-columns: 1fr 230px auto; gap: 10px; align-items: center; }
@media (max-width: 640px) { .sound-row { grid-template-columns: 1fr auto; } .sound-row > div { grid-column: 1 / -1; } }
.tbl td.nw { white-space: nowrap; }
/* 4.16: dashboard shipments - start (sailing) and arrival dates */
.ship-dates { display: flex; justify-content: space-between; gap: var(--s3); margin-top: 6px; font-size: var(--fs-sm); } .ship-dates span { display: flex; flex-direction: column; } .ship-dates span:last-child { text-align: right; } .ship-dates small { color: var(--muted); font-size: 11px; }
/* 4.16: shipments by location - location cards */
.loc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s3); }
.loc-card { text-align: left; border: 1px solid var(--border); background: var(--card); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; color: inherit; font: inherit; min-height: 44px; }
.loc-card .loc-name { display: flex; gap: 6px; align-items: center; font-weight: 650; }
.loc-card b { font-size: 1.1rem; }
.loc-card small { color: var(--muted); }
.loc-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }

/* 4.17 (owner request): a long value (e.g. a supplier name chip on Item prices) stays inside its card */
.kpi-body { min-width: 0; flex: 1 1 auto; }
.sup-list { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); letter-spacing: 0; }
.sup-list .chip { white-space: normal; height: auto; min-height: 22px; padding: 4px 9px; line-height: 1.3; max-width: 100%; overflow-wrap: anywhere; text-align: left; }

/* ---------------------------------------------------------------- 4.17: phones (iPhone 15-18, Android) - bars and safe areas
   1. The bottom bar is 64 px PLUS the home-indicator area: before, the safe area was taken out of the 64 px (border-box),
      so the bar's icons sat squeezed and the news ticker (placed 64 px + safe area up) floated 34 px above the bar with
      the page showing through the gap.
   2. Top and bottom bars are solid on phones: the see-through (blurred) bars let the page show through under the status
      bar and the notch, which looked "masked". Content, toasts and the update bar keep clear of both bars. */
@media (max-width: 767px) {
  .topbar { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bottom-nav { height: calc(64px + env(safe-area-inset-bottom, 0px)); background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none;
    padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .news-bar { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
  .content { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); padding-left: max(var(--s3), env(safe-area-inset-left, 0px)); padding-right: max(var(--s3), env(safe-area-inset-right, 0px)); }
  body.has-news .content { padding-bottom: calc(96px + var(--news-h) + env(safe-area-inset-bottom, 0px)); }
  #toasts { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); margin-bottom: 0; }
  body.has-news #toasts { bottom: calc(76px + var(--news-h) + env(safe-area-inset-bottom, 0px)); }
  .upd-bar { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); margin-bottom: 0; }
}
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  .bottom-nav { height: calc(52px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 767px) and (max-height: 500px) and (orientation: landscape) { .news-bar { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); } }
/* status bar area in the installed app: the page colour behind the see-through status bar */
html { background: var(--card); }
/* 4.17: the closed menu drawer sat just off-screen with its shadow still on - a grey shade over the left of the top
   bar and the page ("masked" look). Closed = no shadow and not shown; open = shadow. */
@media (max-width: 767px) {
  .side { box-shadow: none; visibility: hidden; transition: transform .26s var(--ease), visibility 0s linear .26s; }
  .side.open { box-shadow: var(--shadow-3); visibility: visible; transition: transform .26s var(--ease), visibility 0s; }
}
@media (max-width: 767px) { .filters .stat-strip { margin-left: 0 !important; width: 100%; } } /* 4.17: totals under the filter on phones */

/* 4.17 (owner request, mobile audit): the security alert banner follows the page margins (it was fixed at 24 px, so on
   phones it sat narrower than the page) and its button moves under the text on small phones instead of squeezing it */
.sec-banner { margin: 16px 24px 0; flex-wrap: wrap; }
.sec-banner > span { flex: 1 1 220px; min-width: 0; }
.sec-banner > .btn { flex: none; margin-left: auto; }
@media (max-width: 767px) { .sec-banner { margin: 12px max(var(--s3), env(safe-area-inset-left, 0px)) 0; } }
/* small phones: the news ticker keeps its icon only (the update time is in the label's tooltip) - more room for news */
@media (max-width: 479px) { .news-label small { display: none; } }
/* 4.17 (mobile audit): on phones the totals strip has 2 columns - an odd last box takes the full row instead of leaving
   an empty grey cell next to it */
@media (max-width: 767px) { .stat-strip > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* 4.17 (mobile audit): rating stars that can be tapped are a comfortable size on phones */
@media (max-width: 767px) { .stars.can .star { min-width: 30px; min-height: 34px; font-size: 20px; } }
/* 4.20 (owner request, design E): one small rotating slot in the top bar - India / China time with an office dot, then
   the RMB / USD rates, every 5 seconds; the same on computer and phone (replaces the 4.19.1 strip under the top bar) */
.wslot { position: relative; display: inline-grid; align-items: center; height: 32px; padding: 0 22px 0 10px; border-radius: 9px; background: var(--card2); border: 1px solid var(--border);
  font-size: 12px; white-space: nowrap; cursor: pointer; user-select: none; }
.wslot-p { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; color: var(--text); text-decoration: none !important; }
.wslot-p.on { opacity: 1; visibility: visible; }
.wslot b { font-variant-numeric: tabular-nums; font-weight: 650; }
.wslot .flag { color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 1px 4px; border-radius: 4px; line-height: 1.4; } .wslot .flag.in { background: #e07b14; } .wslot .flag.cn { background: #c8281e; }
.ws-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .ws-dot.on { background: #16a34a; } .ws-dot.soon { background: #f59e0b; } .ws-dot.off { background: #dc2626; }
.ws-sep { width: 1px; height: 14px; background: var(--border); margin: 0 2px; }
.ws-fx .ws-c { color: var(--muted); }
.ws-chg { font-weight: 700; font-size: 11px; } .ws-chg.up { color: var(--ok); } .ws-chg.down { color: var(--bad); } .ws-chg.flat { color: var(--muted); }
.ws-fx .live { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-left: 2px; animation: livedot 2s infinite; } .ws-fx .live.off { background: var(--faint); animation: none; }
.wslot-dots { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: grid; gap: 3px; }
.wslot-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); } .wslot-dots i.on { background: var(--brand); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wslot .ampm { font-size: 10px; font-weight: 600; color: var(--muted); }
@media (max-width: 1023px) { .wslot .ampm { display: none; } }
@media (max-width: 767px) {
  .wslot { height: 30px; padding: 0 16px 0 7px; font-size: 11px; }
  .wslot-p { gap: 4px; }
  .wslot .ampm { display: none; }
  .wslot-dots { right: 5px; }
}
/* 4.20 (owner request): security alerts - red shield next to the bell with a small list (A), corner card (C) */
.sec-shield-wrap { position: relative; }
.sec-shield { color: var(--bad) !important; background: var(--bad-soft) !important; }
.sec-shield.crit { animation: secPulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sec-shield.crit { animation: none; } }
.sec-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 360px; max-width: calc(100vw - 24px); z-index: 60; background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 27, 45, .18); overflow: hidden; font-size: 12.5px; }
.sec-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.sec-panel-head b { display: flex; align-items: center; gap: 7px; }
.sec-panel-row { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none !important; }
.sec-panel-row:hover { background: var(--card2); }
.sec-panel-row b, .sec-toast b { font-weight: 650; } .sec-panel-row small, .sec-toast small { display: block; color: var(--muted); font-size: 11.5px; }
.sec-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--warn); background: var(--warn-soft); }
.sec-ic.critical { color: var(--bad); background: var(--bad-soft); }
.sev { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; padding: 1px 6px; border-radius: 4px; background: var(--bad); color: #fff; margin-left: 6px; vertical-align: 1px; }
.sec-panel-more { padding: 6px 14px; }
.sec-panel-foot { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; background: var(--card2); }
.sec-panel-foot a { font-weight: 600; }
.sec-toast { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 380px; max-width: calc(100vw - 24px); display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 14px;
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--warn); border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 27, 45, .22); font-size: 12.5px; animation: secToastIn .35s ease-out; }
.sec-toast.critical { border-left-color: var(--bad); }
.sec-toast .grow { flex: 1; min-width: 0; }
.sec-toast-act { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.sec-toast-x { border: 0; background: none; color: var(--muted); width: 40px; height: 40px; margin: -8px -8px 0 0; display: grid; place-items: center; border-radius: 9px; cursor: pointer; flex: none; }
.sec-toast-x:hover { background: var(--card2); }
@keyframes secToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) { .sec-toast { left: 12px; right: 12px; width: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }
/* 4.20: room for the time / rate slot on phones - the forward arrow is left out there (back stays) */
@media (max-width: 600px) { #goFwd { display: none !important; } }
@media (max-width: 480px) { #refreshAllBtn { display: none !important; } .wslot .d34 { display: none; } }
.dd.phone-only { display: none; } @media (max-width: 480px) { .dd.phone-only { display: flex; } }
.wslot { min-width: 0; }
@media (max-width: 400px) { .topbar .icon-btn { min-width: 34px !important; width: 34px !important; } .topbar { padding-left: 6px !important; padding-right: max(8px, env(safe-area-inset-right, 0px)) !important; } .wslot { padding-right: 14px; } .wslot-p { gap: 4px; } .ws-sep { margin: 0 1px; } }
@media (max-width: 350px) { .wslot { padding-left: 5px; padding-right: 11px; } .wslot .flag, .ws-fx .live, .wslot .ws-sep { display: none; } .wslot-p { gap: 2px; } .wslot .ws-dot { margin-right: 4px; } .wslot-dots { right: 4px; } }
/* 4.21 (owner request): each security alert explains what it means and how to fix it */
.sec-fix { background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 6px 0 8px; font-size: 12.5px; }
.sec-fix p { margin: 0 0 6px; } .sec-fix ol { margin: 4px 0 0; padding-left: 20px; } .sec-fix li { margin: 2px 0; }
.sec-fix1 { display: block; margin-top: 3px; color: var(--text2) !important; font-size: 11.5px; line-height: 1.35; }

/* 4.21 (owner request): phone top bar clear and sharp - text never below 9 px, solid colours, dark icons, no blur */
@media (max-width: 767px) {
  .topbar { background: var(--card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .topbar .icon-btn { color: var(--text); }
  .wslot { font-size: 12px; background: var(--card); border-color: var(--border2, var(--border)); -webkit-font-smoothing: antialiased; }
  .wslot b { font-weight: 700; color: var(--text); }
  .wslot .flag { font-size: 9px; padding: 1px 3px; letter-spacing: 0; }
  .ws-dot { width: 8px; height: 8px; }
  .wslot-dots i { width: 5px; height: 5px; }
  .ws-sep { margin: 0 2px; }
}
@media (max-width: 340px) { .wslot .flag { display: none; } }

/* 4.21 (owner request): Tasks */
.tbadge { margin-left: auto; display: inline-flex; border-radius: var(--r-pill); overflow: hidden; font-size: 10.5px; font-weight: 700; line-height: 18px; }
.tbadge span { background: rgba(148, 163, 184, .28); color: inherit; padding: 0 6px; }
.tbadge b { background: var(--bad); color: #fff; padding: 0 6px; font-weight: 700; }
.task-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s3); }
.tk-k { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.tk-k span { display: block; color: var(--muted); font-size: var(--fs-xs, 11.5px); font-weight: 600; } .tk-k b { font-size: 20px; letter-spacing: -.01em; }
.task-filters { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: space-between; margin-bottom: var(--s3); }
.task-filters .seg small { color: var(--faint); font-weight: 700; }
.task-notes { white-space: pre-line; max-width: 420px; }
.tbl tr.trow-late td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.btn.amber { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.btn.success { background: var(--ok); border-color: var(--ok); color: #fff; }
@media (max-width: 767px) { .task-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .task-kpis .tk-k:last-child { grid-column: 1 / -1; } .task-filters .seg { width: 100%; } }
.task-pop-wrap { position: fixed; inset: 0; z-index: 90; background: rgba(8, 15, 28, .35); display: grid; place-items: center; padding: 16px; }
.task-pop { width: 440px; max-width: 100%; background: var(--card); border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 27, 45, .3); overflow: hidden; animation: secToastIn .25s ease-out; }
.task-pop-head { display: flex; gap: 10px; align-items: center; padding: 14px 14px 10px 16px; border-bottom: 1px solid var(--border); }
.task-pop-head b { display: block; font-size: 15px; } .task-pop-head small { color: var(--muted); }
.task-pop-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.task-pop-row { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.task-pop-row b { display: block; } .task-pop-row small { display: block; color: var(--muted); font-size: 11.5px; }
.task-pop-note { color: var(--text2) !important; margin-top: 3px; white-space: pre-line; }
.task-pop-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--card2); }
.task-pop-foot a { font-weight: 600; }
/* bottom bar: Tasks next to Home - the bar takes as many equal columns as it has buttons */
@media (max-width: 1199px) { .bottom-nav { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.alert-banner.info { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); color: var(--text); text-decoration: none !important; }
.alert-banner.info > .ic:first-child { color: var(--brand); }
.phone-txt { display: none; }
@media (max-width: 767px) { .sec-toast .desk-txt { display: none; } .sec-toast .phone-txt { display: inline; } .sec-toast { padding: 10px 8px 10px 12px; font-size: 12px; } .sec-toast-act { flex-wrap: nowrap; margin-top: 6px; } .sec-toast .sec-ic { width: 26px; height: 26px; } }

/* 4.22 (owner request): compact phone lists - like a chat list: one record = a title line and one detail line, the
   amount and the status on the right (Orders, Shipments, Customers, Suppliers, Payers, Payments, Tasks, every list) */
.mlist-wrap { margin: 0; }
.mlist-sort { display: flex; justify-content: flex-end; margin: 0 0 var(--s2); } .mlist-sort .msort { height: 34px; font-size: 12.5px; max-width: 70%; }
.mlist { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.mrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main end" "act act act"; column-gap: 10px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--grid); min-height: 58px; contain: layout paint; }
.mrow:last-child { border-bottom: 0; }
.mrow.clickable { cursor: pointer; } .mrow.clickable:active { background: var(--bg2); }
.mr-lead { grid-area: lead; display: flex; align-items: center; } .mr-lead:empty { display: none; }
.mr-main { grid-area: main; min-width: 0; }
.mr-t, .mr-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-t { font-weight: 650; font-size: 14px; color: var(--text); line-height: 1.3; }
.mr-t * { display: inline; } .mr-t .cell-title { font-weight: 650; } .mr-t .cell-sub { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
.mr-t .chip, .mr-s .chip { display: inline-flex; vertical-align: middle; }
.mr-s { font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.mr-s * { display: inline; } .mr-s .cell-sub { color: var(--muted); margin-left: 4px; } .mr-s .cell-sub::before { content: '· '; }
.mr-s .mr-dot { font-style: normal; color: var(--faint); }
.mr-end { grid-area: end; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 46vw; }
.mr-r { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mr-r .cell-sub, .mr-rs .cell-sub { font-weight: 400; font-size: 11px; color: var(--muted); }
.mr-rs { font-size: 11.5px; } .mr-rs .chip { font-size: 10.5px; }
.mr-act { grid-area: act; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.mr-act:empty { display: none; }
.mrow.pulse-row, .mrow.trow-late { box-shadow: inset 3px 0 0 var(--bad); }
.mlist-empty { padding: 22px 14px; text-align: center; color: var(--muted); }
.mlist-foot { margin-top: var(--s2); }
.mr-av { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.mr-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--info-soft); color: var(--info); }
.mr-ic.bad { background: var(--bad-soft); color: var(--bad); } .mr-ic.ok { background: var(--ok-soft); color: var(--ok); } .mr-ic.warn { background: var(--warn-soft); color: var(--warn); } .mr-ic.vio { background: var(--violet-soft); color: var(--violet); }
.mr-ic .ic { width: 18px; height: 18px; }
.mr-dotc { width: 9px; height: 9px; border-radius: 50%; background: var(--info); }
.mr-dotc.bad { background: var(--bad); } .mr-dotc.warn { background: var(--warn); } .mr-dotc.ok { background: var(--ok); }

/* 4.22 (owner request): smooth scrolling - no see-through blur over a scrolling page (it is re-drawn on every frame) */
.topbar, .news-bar, .bottom-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.topbar { background: var(--card); }
.news-bar, .bottom-nav { background: var(--card); }
.table-wrap { overscroll-behavior-x: contain; }
.hscroll { overscroll-behavior-x: contain; }

/* 4.22 (owner request): Tasks - delayed task blinks (menu, bottom bar, list), daily status, task window */
@keyframes tkBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.nav a.tblink .ic, .nav a.tblink > span:not(.tbadge), .bottom-nav a.tblink .ic, .blink { animation: tkBlink 1.1s ease-in-out infinite; }
.nav a.tblink .ic, .bottom-nav a.tblink .ic { color: var(--bad); }
.bottom-nav a.tblink { color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .nav a.tblink .ic, .nav a.tblink > span:not(.tbadge), .bottom-nav a.tblink .ic, .blink { animation: none; } }
.tk-late-dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
.tk-st { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tk-st .cell-sub { flex-basis: 100%; }
.dstat { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--card2); color: var(--text2);
  font: 600 11px var(--font); cursor: pointer; white-space: nowrap; }
.dstat .ic { width: 13px; height: 13px; }
.dstat.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.dstat.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.dstat.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.dstat-t { font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.dstat-t.ok { color: var(--ok); } .dstat-t.warn { color: var(--warn); } .dstat-t.bad { color: var(--bad); }
.task-modal .modal-body { overflow-x: hidden; }
.task-sheet { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.task-sheet > * { min-width: 0; }
.tk-sheet-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 4px; }
.tk-title { margin: 0 0 4px; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.tk-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--grid); font-size: 13px; }
.tk-kv span { color: var(--muted); flex: none; } .tk-kv b { font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; flex: 1; } .tk-kv small { color: var(--muted); font-weight: 400; }
.tk-notes { white-space: pre-line; background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 13px; overflow-wrap: anywhere; }
.tk-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.tk-daily { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-top: 6px; background: var(--card); }
.tk-daily-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tk-daily-head b { display: inline-flex; align-items: center; gap: 6px; } .tk-daily-head .ic { width: 16px; height: 16px; }
.tk-daily-add { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tk-daily-add textarea { width: 100%; min-height: 60px; resize: vertical; }
.tk-daily-add .btn { align-self: flex-end; }
.tk-daily-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow: auto; overscroll-behavior: contain; }
.tk-du { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.tk-du-d { flex: none; min-width: 74px; font-weight: 700; color: var(--text2); font-size: 12px; padding-top: 1px; }
.tk-du-n { white-space: pre-line; overflow-wrap: anywhere; } .tk-du small { color: var(--muted); font-size: 11px; }

/* 4.22 (owner request): the "New task for you" pop-up fits every screen - centred on computers and tablets, a sheet
   above the bottom bar on phones, the button under the text on narrow phones, never taller than the screen */
.task-pop { width: min(460px, 100%); max-height: min(560px, calc(100vh - 32px)); display: flex; flex-direction: column; }
.task-pop > .task-pop-row { flex: none; }
.task-pop-head { flex: none; } .task-pop-foot { flex: none; margin-top: auto; }
.task-pop-head .grow, .task-pop-row .grow { min-width: 0; }
.task-pop-head .sec-toast-x { margin: 0; }
.task-pop-row b { overflow-wrap: anywhere; }
.task-pop-row .btn { flex: none; white-space: nowrap; }
.task-pop-rows { overflow: auto; overscroll-behavior: contain; }
@media (max-width: 767px) {
  .task-pop-wrap { place-items: end center; padding: 12px 10px calc(76px + env(safe-area-inset-bottom, 0px)); }
  .task-pop { width: 100%; max-height: calc(100vh - 100px - env(safe-area-inset-bottom, 0px)); border-radius: 16px; }
}
@media (max-width: 480px) {
  .task-pop-row { flex-wrap: wrap; }
  .task-pop-row .btn { width: 100%; justify-content: center; }
}
/* 4.22: Users & Access - contact details access */
.contact-access { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.contact-access .check { display: flex; gap: 8px; align-items: flex-start; }