/* ═══════════════════════════════════════════════════════════════════════
   SGS CRM — "Harbour" theme (v2.9.0)
   Loaded AFTER app.css; overrides tokens + key components only.

   Idea: a calm port-side operations ledger.
     • Navy ink chrome that matches the Sardar logo
     • Cool paper surfaces, steel-blue actions
     • Sardar signal-red used ONLY as the brand mark (active page, unread dots)
     • IBM Plex Sans for the interface, Plex Mono for BL / container / invoice codes
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* surfaces */
  --bg:   #F3F5F8;
  --bg2:  #FFFFFF;
  --bg3:  #EEF1F5;
  --bg4:  #E2E7EE;
  --border:  #E1E6ED;
  --border2: #CDD5DF;

  /* text */
  --text:  #0F1B2C;
  --text2: #3B4859;
  --text3: #687588;
  --text4: #98A2B3;

  /* primary action — steel blue */
  --accent:       #1F4E79;
  --accent2:      #173C5E;
  --accent3:      #102C46;
  --accent-dim:   rgba(31,78,121,0.08);
  --accent-light: rgba(31,78,121,0.16);

  /* brand signal — Sardar red (use sparingly) */
  --signal:     #D0202E;
  --signal-dim: rgba(208,32,46,0.10);

  /* status */
  --green:      #1E7F4F;  --green-dim:  rgba(30,127,79,0.10);  --green2: #17663F;
  --blue:       #2B6CB0;  --blue-dim:   rgba(43,108,176,0.10);
  --amber:      #A86412;  --amber-dim:  rgba(201,129,30,0.13);
  --red:        #B42318;  --red-dim:    rgba(180,35,24,0.09);
  --orange:     #C2551A;  --orange-dim: rgba(194,85,26,0.10);
  --purple:     #5B4BB7;  --purple-dim: rgba(91,75,183,0.10);
  --teal:       #0F766E;  --teal-dim:   rgba(15,118,110,0.10);

  /* radius hierarchy: controls 8 · cards 12 · sheets 16 · chips full */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px;
  --radius: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl);

  /* elevation: one hairline + soft navy shadow */
  --shadow-xs: 0 1px 0 rgba(15,27,44,0.04);
  --shadow-sm: 0 1px 2px rgba(15,27,44,0.06);
  --shadow-md: 0 6px 16px -6px rgba(15,27,44,0.14);
  --shadow-lg: 0 24px 48px -12px rgba(15,27,44,0.28);
  --shadow: var(--shadow-sm);

  /* sidebar */
  --sidebar-bg:     #0F1B2C;
  --sidebar-border: rgba(255,255,255,0.06);
  --sidebar-text:   rgba(226,232,240,0.66);
  --sidebar-hover:  rgba(255,255,255,0.06);
  --sidebar-active: rgba(255,255,255,0.09);

  /* type */
  --font: 'IBM Plex Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'IBM Plex Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --focus: 0 0 0 3px rgba(31,78,121,0.28);
}

body.dark {
  --bg:   #0B1420;
  --bg2:  #111D2C;
  --bg3:  #172536;
  --bg4:  #203043;
  --border:  rgba(173,196,224,0.12);
  --border2: rgba(173,196,224,0.22);
  --text:  #E8EEF5;
  --text2: #C2CEDC;
  --text3: #8D9BAE;
  --text4: #66758A;
  --accent:       #6FA3D8;
  --accent2:      #8BB6E2;
  --accent3:      #A9C9EA;
  --accent-dim:   rgba(111,163,216,0.14);
  --accent-light: rgba(111,163,216,0.24);
  --signal:       #F0444F;
  --green: #4CC38A;  --green-dim: rgba(76,195,138,0.13);
  --blue:  #6FA8E8;  --blue-dim:  rgba(111,168,232,0.13);
  --amber: #E3A64A;  --amber-dim: rgba(227,166,74,0.14);
  --red:   #F07167;  --red-dim:   rgba(240,113,103,0.13);
  --teal:  #4FC4B8;  --teal-dim:  rgba(79,196,184,0.13);
  --sidebar-bg: #08111C;
  --focus: 0 0 0 3px rgba(111,163,216,0.35);
}

/* ── base ─────────────────────────────────────────────────────────────── */
body { font-size: 14px; line-height: 1.5; letter-spacing: 0; font-feature-settings: "tnum" 0; }
td, .stat-value, .num, [class*="amount"], [class*="money"] { font-variant-numeric: tabular-nums; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text4); background-clip: content-box; }
::selection { background: rgba(31,78,121,0.18); }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

/* codes read better in mono: BL / container / invoice numbers */
.mono, code, [style*="monospace"], [style*="font-family:monospace"] { font-family: var(--font-mono) !important; letter-spacing: 0; }

/* icons (assets/icons.js) */
.ico { width: 1.08em; height: 1.08em; flex-shrink: 0; vertical-align: -0.17em; }
.ico-wrap { display: inline-flex; align-items: center; line-height: 0; }
.ico-wrap.ico-only .ico { width: 1.15em; height: 1.15em; }
button .ico-wrap, .btn .ico-wrap, .cmd-btn .ico-wrap, .cmd-primary .ico-wrap { margin-right: 1px; opacity: .92; }

/* ── sentence case everywhere (all-caps labels are hard to scan) ───────── */
.stat-label, .nav-section, .form-label, th, .section-title-sm, .card-sub, .cmd-count,
[style*="text-transform:uppercase"], [style*="text-transform: uppercase"] {
  text-transform: none !important;
  letter-spacing: 0.005em !important;
}

/* ── sidebar ──────────────────────────────────────────────────────────── */
.sidebar { width: 232px; min-width: 232px; border-right: none; }
.sidebar-logo { padding-bottom: 14px !important; border-bottom: 1px solid var(--sidebar-border); }
.nav { padding: 10px 10px 14px !important; }
.nav-section {
  font-size: 11.5px; font-weight: 500; color: rgba(226,232,240,0.38);
  padding: 18px 10px 6px;
}
.nav-item {
  gap: 11px; padding: 8px 10px; margin: 1px 0;
  font-size: 13.5px; font-weight: 450; color: var(--sidebar-text);
  border-radius: 8px;
}
.nav-item .nav-icon { opacity: .8; display: inline-flex; width: 18px; justify-content: center; font-size: 14px; }
.nav-item:hover { background: var(--sidebar-hover); color: #F1F5F9; }
.nav-item.active {
  background: var(--sidebar-active) !important; color: #FFFFFF; font-weight: 500;
}
.nav-item.active::before {
  content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--signal);
}
.nav-item.active .nav-icon { opacity: 1; }
.nav-sub { padding-left: 22px; font-size: 13px; }
.nav-badge {
  background: rgba(255,255,255,0.12) !important; color: #E2E8F0 !important;
  font-weight: 600; font-size: 11px; border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center;
}
#nb-alerts { background: var(--signal) !important; color: #fff !important; }
.sidebar-footer { border-top: 1px solid var(--sidebar-border); }

/* ── top bar ──────────────────────────────────────────────────────────── */
.topbar { height: 58px; padding: 0 24px; border-bottom: 1px solid var(--border); box-shadow: none; }
.topbar-title { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; color: var(--text); }

/* ── page canvas ──────────────────────────────────────────────────────── */
.content { padding: 26px 30px 40px; }
@media (max-width: 768px) { .content { padding: 16px 16px 90px; } }

/* ── cards ────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow-xs);
}
.card:hover { transform: none; }
.card-header { margin-bottom: 16px; }
.card-title { font-size: 15px; font-weight: 600; letter-spacing: -0.003em; color: var(--text); }
.card-sub { font-size: 12.5px; color: var(--text3); }

/* KPI tiles: no rainbow edges — the number is the hero */
.stat-card {
  border: 1px solid var(--border) !important; border-radius: var(--r-lg);
  padding: 18px 20px 16px; box-shadow: var(--shadow-xs);
}
.stat-card:hover { transform: none; box-shadow: var(--shadow-md); }
.stat-card::before, .stat-card::after { display: none !important; }
.stat-label { font-size: 13px; font-weight: 500; color: var(--text3); margin-bottom: 8px; }
.stat-value { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; }
.stat-sub { font-size: 12.5px; color: var(--text3); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn, .cmd-btn, .cmd-primary, .pg-btn {
  border-radius: var(--r-md); font-weight: 500; gap: 7px;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.btn { padding: 8px 14px; font-size: 13.5px; border: 1px solid var(--border2); color: var(--text2); background: var(--bg2); }
.btn:hover { background: var(--bg3); border-color: var(--border2); color: var(--text); }
.btn:active { transform: translateY(0.5px); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-xs { padding: 3px 8px; font-size: 12px; }
.btn-primary, .cmd-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover, .cmd-primary:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }
body.dark .btn-primary, body.dark .cmd-primary { color: #0B1420; }
.btn-success { background: var(--green); border-color: var(--green); color: #fff; }
.btn-danger  { background: var(--bg2); border-color: rgba(180,35,24,0.35); color: var(--red); }
.btn-danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.cmd-primary { padding: 8px 15px; font-size: 13.5px; font-weight: 600; }
.cmd-btn { padding: 7px 11px; font-size: 13px; color: var(--text2); }
.cmd-btn:hover { background: var(--bg3); color: var(--text); }
.close-btn { border-radius: var(--r-md); }

/* chips & segmented filters */
.cmd-chip { border-radius: 999px; padding: 5px 12px; font-size: 12.5px; border: 1px solid var(--border2); color: var(--text2); }
.cmd-chip:hover { border-color: var(--text4); color: var(--text); }
.cmd-chip.active, .cmd-chip[class*="active"] { background: var(--text); border-color: var(--text); color: var(--bg2); }

/* command bar on list pages */
.cmd-bar { padding: 12px 14px; gap: 8px; border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 20px; }

/* page tabs (Shipments / Ops / Templates …) — calm underline tabs */
.page-tabs { gap: 4px !important; border-bottom: 1px solid var(--border); margin-bottom: 22px !important; padding-bottom: 0 !important; }
.page-tab {
  border: none !important; border-radius: 0 !important; background: transparent !important;
  padding: 10px 14px 12px !important; margin-bottom: -1px; color: var(--text3) !important;
  font-weight: 500 !important; font-size: 14px !important; box-shadow: none !important;
  border-bottom: 2px solid transparent !important;
}
.page-tab:hover { color: var(--text) !important; }
.page-tab.active { color: var(--text) !important; border-bottom-color: var(--accent) !important; font-weight: 600 !important; }
.page-tab-badge { background: var(--bg3) !important; color: var(--text2) !important; }

/* ── forms ────────────────────────────────────────────────────────────── */
.form-label { font-size: 12.5px; font-weight: 500; color: var(--text2); margin-bottom: 6px; }
.form-control, .cmd-select {
  border: 1px solid var(--border2); border-radius: var(--r-md);
  padding: 8px 11px; font-size: 13.5px; background: var(--bg2);
}
.cmd-search input, .search-wrap input { border-color: var(--border2); border-radius: var(--r-md); font-size: 13.5px; }
.input-icon-wrap .form-control, .search-wrap .form-control { padding-left: 34px; }
.form-control:hover { border-color: var(--text4); }
.form-control:focus, .cmd-select:focus { border-color: var(--accent); box-shadow: var(--focus); }
.form-group { margin-bottom: 14px; }

/* ── tables ───────────────────────────────────────────────────────────── */
.table-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg2); }
table { font-size: 13.5px; }
th {
  background: var(--bg3) !important; color: var(--text3) !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  padding: 10px 14px !important; border-bottom: 1px solid var(--border) !important;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text2); }
tbody tr { transition: background .1s ease; }
tbody tr:nth-child(even) td, body.dark tbody tr:nth-child(even) td { background: transparent; }  /* no zebra */
tbody tr:hover td { background: rgba(31,78,121,0.04) !important; }
body.dark tbody tr:hover td { background: rgba(111,163,216,0.07) !important; }

tbody tr:last-child td { border-bottom: none; }

/* ── badges ───────────────────────────────────────────────────────────── */
.badge { border-radius: 999px; font-weight: 600; font-size: 11.5px; padding: 3px 9px; letter-spacing: 0; }

/* ── modals ───────────────────────────────────────────────────────────── */
.modal-overlay { background: rgba(10,20,34,0.48) !important; backdrop-filter: blur(3px); }
.modal { border-radius: var(--r-xl); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.modal-header { padding: 18px 24px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.modal-body { padding: 22px 24px; }
.modal-footer { padding: 14px 24px; border-top: 1px solid var(--border); background: var(--bg3); gap: 10px; }

/* ── empty states ─────────────────────────────────────────────────────── */
.empty { padding: 44px 20px; }
.empty-icon { font-size: 26px; color: var(--text4); }
.empty-title { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 6px; }
.empty-sub { color: var(--text3); }

/* ── toasts ───────────────────────────────────────────────────────────── */
#toast-container > *, .toast { border-radius: 10px !important; font-family: var(--font) !important; box-shadow: var(--shadow-lg) !important; }

/* ── motion: respect the OS setting ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── floating AI button: navy, brand-quiet ────────────────────────────── */
#ai-fab { background: var(--accent) !important; border-color: transparent !important;
  box-shadow: 0 10px 24px -8px rgba(15,27,44,0.45) !important; width: 48px !important; height: 48px !important; }
#ai-fab:hover { background: var(--accent2) !important; }

/* ── company cards: calm, one hover cue ───────────────────────────────── */
.co-card { border: 1px solid var(--border) !important; border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.co-card:hover { transform: none !important; border-color: var(--border2) !important; box-shadow: var(--shadow-md) !important; }

/* ── row status edge ──────────────────────────────────────────────────────
   app.css drew this with tr::before, which Chrome lays out as an extra table
   cell — that shifted every body column one step right of its header.
   Same signal, drawn as an inset edge on the first cell instead. */
tbody tr::before { content: none !important; display: none !important; }
tbody tr.status-transit   > td:first-child { box-shadow: inset 3px 0 0 var(--teal); }
tbody tr.status-arrived   > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
tbody tr.status-delivered > td:first-child { box-shadow: inset 3px 0 0 var(--green); }
tbody tr.status-booked    > td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
tbody tr.status-overdue   > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
tbody tr.status-cancelled > td:first-child { box-shadow: inset 3px 0 0 var(--text4); }
tbody tr.status-accepted  > td:first-child { box-shadow: inset 3px 0 0 var(--green); }
tbody tr.status-pending   > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
tbody tr.status-rejected  > td:first-child { box-shadow: inset 3px 0 0 var(--red); }

/* in-app labels that pages styled in caps → sentence case (print templates untouched) */
.att-hdr, .co-type-badge, .csb-sec, .dl, .kanban-col-header, .kpi-lbl, .lbl, .mst-stat-label,
.mst-table th, .section-title, .sgs-card-kicker, .sgs-hero-kicker, .sgs-ticker-label, .sh-table th, .sum-lbl {
  text-transform: none !important; letter-spacing: 0.005em !important;
}
.kanban-col-header { font-size: 13.5px !important; font-weight: 600 !important; color: var(--text2) !important; }
.section-title { font-weight: 600; }

/* command bars: drop the decorative left accent */
.cmd-bar::before { display: none !important; }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar { height: 54px; padding: 0 12px; }
  #fx-ticker, #branch-indicator, #dark-toggle { display: none !important; }

  /* page tabs scroll sideways instead of wrapping */
  .page-tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .page-tabs::-webkit-scrollbar { display: none; }
  .page-tab { flex-shrink: 0; }

  /* command bar: one tidy scrolling row (chips no longer stack into a tall box) */
  .cmd-bar { padding: 8px 10px !important; align-items: center; }
  .cmd-bar > * { flex-shrink: 0; }
  .cmd-chips { flex-wrap: nowrap !important; display: flex; gap: 6px; }
  .cmd-end { flex-wrap: nowrap !important; }
  .cmd-search { min-width: 190px; }

  /* dashboard heading: actions drop under the greeting */
  .dash-head, .page-head { flex-direction: column; align-items: flex-start !important; gap: 12px; }
}

/* mobile shipment cards (were unstyled) */
.mobile-ship-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 14px 12px 16px; margin-bottom: 10px; position: relative; box-shadow: var(--shadow-xs);
}
.mobile-ship-card::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--card-accent, var(--accent));
}
.mob-card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mob-card-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; }
.mob-card-sub { font-size: 13px; color: var(--text3); margin-top: 2px; }
.mob-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; }
.mob-card-meta span { font-size: 12px !important; }
.mob-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.mob-card-actions .btn { flex: 1; justify-content: center; padding: 8px 10px; font-size: 13px !important; }
.mob-card-actions .btn:last-child:not(:first-child):not(:nth-child(2)) { flex: 0 0 44px; }
.mob-dd-badge { background: var(--red-dim); color: var(--red); border-radius: 999px; padding: 2px 8px; font-weight: 600; font-size: 11.5px; }

/* ── shipment workflow card (v2.10) ───────────────────────────────────── */
.wf-card { margin-top: 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 16px 12px; }
.wf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wf-title { font-size: 15px; font-weight: 600; color: var(--text); }
.wf-sub { font-size: 13px; color: var(--text3); margin-top: 2px; }
.wf-sub strong { color: var(--text2); font-weight: 600; }
.wf-pct { font-size: 20px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.wf-bar { height: 4px; background: var(--bg3); border-radius: 99px; margin: 12px 0 10px; overflow: hidden; }
.wf-bar span { display: block; height: 100%; background: var(--green); border-radius: 99px; transition: width .3s ease; }
.wf-list { display: flex; flex-direction: column; gap: 2px; }
.wf-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 8px; border: none; background: transparent;
  border-radius: 8px; cursor: pointer; font: inherit; color: var(--text3); }
.wf-row:hover { background: var(--bg3); }
.wf-row.done { color: var(--text); }
.wf-row.next { background: var(--accent-dim); color: var(--text); }
.wf-num { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border2); display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; flex-shrink: 0; color: var(--text3); background: var(--bg2); }
.wf-row.done .wf-num { background: var(--green); border-color: var(--green); color: #fff; }
.wf-row.next .wf-num { border-color: var(--accent); color: var(--accent); }
.wf-text { flex: 1; font-size: 13.5px; }
.wf-int { font-size: 11px; color: var(--text4); margin-left: 6px; }
.wf-st { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-dim); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.wf-when { font-size: 12px; color: var(--green); min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.wf-foot { font-size: 12px; color: var(--text4); margin-top: 10px; padding: 0 2px; }
/* v2.10.1: rows hold a toggle button + date picker */
.wf-row { cursor: default; padding: 4px 6px 4px 4px; }
.wf-tick { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: none; border: none; padding: 3px 4px;
  font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
.wf-date-in { width: 132px; flex-shrink: 0; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 3px 6px;
  font: inherit; font-size: 12.5px; color: var(--green); font-variant-numeric: tabular-nums; cursor: pointer; }
.wf-row:not(.done) .wf-date-in { color: var(--text4); }
.wf-row:not(.done) .wf-date-in::-webkit-datetime-edit { opacity: .45; }
.wf-row:hover .wf-date-in, .wf-date-in:focus { border-color: var(--border2); background: var(--bg2); }
.wf-date-in:focus { outline: none; box-shadow: var(--focus); }
/* v2.10.2: milestone shown as done because the status already passed it */
.wf-row.implied .wf-num { background: var(--bg2); border-color: var(--green); color: var(--green); }
.wf-row.implied .wf-text::after { content: '  · by status'; font-size: 11px; color: var(--text4); }

/* ── per-container status card (v2.12) ───────────────────────────────── */
.ctr-card { margin-top: 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 16px 12px; }
.ctr-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.ctr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; }
.ctr-row:hover { background: var(--bg3); }
.ctr-row.own { background: var(--amber-dim); }
.ctr-no { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; color: var(--text); min-width: 118px; }
.ctr-type { font-size: 12px; color: var(--text3); min-width: 44px; }
.ctr-sel, .ctr-date, .ctr-in { border: 1px solid var(--border2); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 13px; background: var(--bg2); color: var(--text); }
.ctr-sel { min-width: 190px; }
.ctr-date { width: 140px; }
.ctr-date:disabled { opacity: .45; }
.ctr-roll { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ctr-in { width: 130px; }