/* FlexTMS look (approved 2026-10-20): 48TMS layout, new colors.
   Dark = "Control AI" reference palette (near-black teal, frosted panels, champagne gold, teal, violet).
   Light = warm pearl, white panels, deep-teal buttons with gold text. */

/* ---------- theme tokens ---------- */
.app[data-theme="dark"] {
  color-scheme: dark;
  --page-bg:
    radial-gradient(900px 640px at 14% 34%, rgba(26,74,68,0.50), rgba(6,11,12,0) 70%),
    radial-gradient(820px 560px at 92% 0%, rgba(40,86,78,0.30), rgba(6,11,12,0) 70%),
    radial-gradient(760px 520px at 62% 112%, rgba(22,56,53,0.45), rgba(6,11,12,0) 70%),
    #060B0C;
  --panel: linear-gradient(180deg, rgba(27,50,49,0.72) 0%, rgba(12,23,24,0.72) 100%);
  --panel-solid: #0F1C1D;
  --panel-border: rgba(206,228,221,0.09);
  --panel-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 22px 56px rgba(0,0,0,0.38);
  --header: rgba(6,11,12,0.42);
  --header-border: rgba(206,228,221,0.07);
  --text: #EEF2EF;
  --text2: #A9BAB6;
  --text3: #83968F;
  --gold: #E8D3A0;
  --gold-line: #E3CB94;
  --gold-border: rgba(227,203,148,0.45);
  --check: #E3CB94;
  --input: rgba(255,255,255,0.035);
  --input-border: rgba(206,228,221,0.13);
  --btn-bg: rgba(127,211,195,0.08);
  --btn-border: rgba(127,211,195,0.22);
  --btn-fg: #D7E5E1;
  --primary-bg: linear-gradient(180deg, #F0DDB0 0%, #D9BC7C 100%);
  --primary-fg: #17130A;
  --primary-shadow: 0 0 0 1px rgba(240,221,176,0.55), 0 10px 26px rgba(227,203,148,0.16);
  --row-line: rgba(206,228,221,0.07);
  --th-bg: rgba(255,255,255,0.02);
  --row-hover: rgba(255,255,255,0.025);
  --sel-row: rgba(227,203,148,0.07);
  --icon-circle: rgba(127,211,195,0.06);
  --icon-circle-border: rgba(127,211,195,0.14);
  --icon-fg: #A9BAB6;
  --active-icon-bg: linear-gradient(135deg, #F2DFAE 0%, #C9A35B 100%);
  --active-icon-fg: #17130A;
  --active-text: #F4F1E8;
  --active-item-bg: rgba(227,203,148,0.07);
  --active-glow: 0 0 16px rgba(227,203,148,0.35);
  --sub-panel: rgba(255,255,255,0.03);
  --logo-mark: linear-gradient(135deg, #F2DFAE 0%, #C9A35B 100%);
  --logo-glow: 0 0 20px rgba(227,203,148,0.30);
  --avatar: linear-gradient(135deg, #F2DFAE 0%, #B8914B 100%);
  --divider: rgba(206,228,221,0.14);
  --pill-bg: #E3CB94;
  --pill-fg: #17130A;
  --orb-glow: 0 0 14px rgba(183,156,242,0.60);
  --menu-bg: rgba(14,26,27,0.97);
  --green: #6FE3A8;
  --red: #F48B80;
  --b-neutral-bg: rgba(169,186,182,0.12); --b-neutral-fg: #CAD6D2; --b-neutral-bd: rgba(169,186,182,0.26);
  --b-amber-bg: rgba(242,179,61,0.12);    --b-amber-fg: #F5C76A;   --b-amber-bd: rgba(242,179,61,0.32);
  --b-teal-bg: rgba(127,211,195,0.11);    --b-teal-fg: #93E0D1;    --b-teal-bd: rgba(127,211,195,0.30);
  --b-violet-bg: rgba(183,156,242,0.13);  --b-violet-fg: #CDB9FA;  --b-violet-bd: rgba(183,156,242,0.34);
  --b-green-bg: rgba(111,227,168,0.11);   --b-green-fg: #7FE7B3;   --b-green-bd: rgba(111,227,168,0.30);
  --b-red-bg: rgba(244,139,128,0.12);     --b-red-fg: #F7A097;     --b-red-bd: rgba(244,139,128,0.32);
  --b-dim-bg: rgba(255,255,255,0.05);     --b-dim-fg: #A2B2AE;     --b-dim-bd: rgba(255,255,255,0.12);
  --map-sea: #071012;
  --map-land: rgba(127,211,195,0.07);
  --map-coast: rgba(127,211,195,0.28);
  --map-dot: rgba(127,211,195,0.32);
  --map-route: #8FDCCB;
  --map-route-glow: rgba(127,211,195,0.75);
  --map-pickup: #6FE3A8;
  --map-delivery: #E3CB94;
  --map-label: #C9D6D2;
  --panel-side: linear-gradient(180deg, rgba(20,38,38,0.92) 0%, rgba(9,17,18,0.94) 100%);
}

.app[data-theme="light"] {
  color-scheme: light;
  --page-bg:
    radial-gradient(900px 640px at 8% 0%, rgba(127,211,195,0.20), rgba(244,242,236,0) 70%),
    radial-gradient(820px 560px at 96% 6%, rgba(227,203,148,0.24), rgba(244,242,236,0) 70%),
    #F4F2EC;
  --panel: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.84) 100%);
  --panel-solid: #FFFFFF;
  --panel-border: rgba(19,46,43,0.09);
  --panel-shadow: 0 1px 2px rgba(16,34,32,0.04), 0 16px 44px rgba(16,34,32,0.07);
  --header: rgba(255,255,255,0.62);
  --header-border: rgba(19,46,43,0.08);
  --text: #13201F;
  --text2: #4C5E5A;
  --text3: #5F706C;
  --gold: #8A6720;
  --gold-line: #B08A3E;
  --gold-border: rgba(138,103,32,0.40);
  --check: #13302D;
  --input: #FFFFFF;
  --input-border: rgba(19,46,43,0.16);
  --btn-bg: #FFFFFF;
  --btn-border: rgba(19,46,43,0.16);
  --btn-fg: #1F2F2D;
  --primary-bg: linear-gradient(180deg, #1B3F3B 0%, #102926 100%);
  --primary-fg: #F0DDB0;
  --primary-shadow: 0 8px 22px rgba(19,48,45,0.24);
  --row-line: rgba(19,46,43,0.07);
  --th-bg: rgba(19,46,43,0.025);
  --row-hover: rgba(19,46,43,0.025);
  --sel-row: rgba(201,163,91,0.11);
  --icon-circle: rgba(30,115,102,0.06);
  --icon-circle-border: rgba(30,115,102,0.14);
  --icon-fg: #4C5E5A;
  --active-icon-bg: linear-gradient(135deg, #1B3F3B 0%, #102926 100%);
  --active-icon-fg: #F0DDB0;
  --active-text: #13201F;
  --active-item-bg: rgba(19,48,45,0.05);
  --active-glow: 0 4px 12px rgba(19,48,45,0.22);
  --sub-panel: rgba(19,46,43,0.035);
  --logo-mark: linear-gradient(135deg, #F2DFAE 0%, #C9A35B 100%);
  --logo-glow: 0 6px 16px rgba(201,163,91,0.35);
  --avatar: linear-gradient(135deg, #F2DFAE 0%, #B8914B 100%);
  --divider: rgba(19,46,43,0.14);
  --pill-bg: #13302D;
  --pill-fg: #F0DDB0;
  --orb-glow: 0 2px 10px rgba(109,79,203,0.40);
  --menu-bg: #FFFFFF;
  --green: #177A4A;
  --red: #B8382B;
  --b-neutral-bg: #ECEFED; --b-neutral-fg: #3F4E4B; --b-neutral-bd: #D9DFDC;
  --b-amber-bg: #FBF0D6;   --b-amber-fg: #7A5208;   --b-amber-bd: #EFDBA5;
  --b-teal-bg: #DCF1EC;    --b-teal-fg: #185F54;    --b-teal-bd: #B7E1D7;
  --b-violet-bg: #EEE8FC;  --b-violet-fg: #553AA8;  --b-violet-bd: #D8CCF6;
  --b-green-bg: #DDF3E6;   --b-green-fg: #16673F;   --b-green-bd: #B6E2C8;
  --b-red-bg: #FBE3E0;     --b-red-fg: #A1281C;     --b-red-bd: #F2C1BA;
  --b-dim-bg: #E7E9E8;     --b-dim-fg: #465350;     --b-dim-bd: #D2D7D5;
  --map-sea: #EAF0EE;
  --map-land: #FBFAF6;
  --map-coast: rgba(19,46,43,0.22);
  --map-dot: rgba(19,46,43,0.13);
  --map-route: #1E7366;
  --map-route-glow: rgba(30,115,102,0.35);
  --map-pickup: #177A4A;
  --map-delivery: #A07A2C;
  --map-label: #2C3B39;
  --panel-side: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(250,249,245,0.97) 100%);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #060B0C; }
.app {
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
:where(.app) a { color: inherit; }
.app button, .app input, .app select { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.muted { color: var(--text3); }
.gold { color: var(--gold); }
.green { color: var(--green); }
.nowrap { white-space: nowrap; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 2px; }
.boot { min-height: 100vh; }

/* ---------- shell ---------- */
/* App-style frame: sidebar and header stay fixed, only .scroll-area scrolls. */
.shell { display: flex; align-items: stretch; height: 100vh; height: 100dvh; overflow: hidden; }
.shell-main { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; flex-direction: column; }
/* Below the header: the scrolling page and, when open, the tracking slide-out beside it. */
.shell-body { flex: 1 1 auto; min-height: 0; display: flex; position: relative; }
.shell-body > .scroll-area { flex: 1 1 auto; min-width: 0; }
/* position: relative keeps absolutely placed bits (e.g. .sr-only labels) inside the scrolling box;
   otherwise they stick out below the frame and the whole app can scroll. */
.scroll-area { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; scrollbar-gutter: stable; overscroll-behavior: contain; }
.page { flex: 1 0 auto; padding: 12px 28px 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.footer { padding: 4px 32px 6px; text-align: center; color: var(--text3); font-size: 12px; }
.footer span { opacity: 0.85; }

/* sidebar */
.sidebar { flex: 0 0 236px; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 32px 16px; scrollbar-width: thin; }
.logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 44px; text-decoration: none; color: var(--text); }
.logo-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--logo-mark); box-shadow: var(--logo-glow); display: flex; align-items: center; justify-content: center; color: #17130A; }
.logo-text { font-family: Outfit, sans-serif; font-size: 21px; font-weight: 300; letter-spacing: 0.02em; }
.logo-text b { font-weight: 600; color: var(--gold); }
.nav-group-title { margin: 22px 0 10px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--text3); }
.nav-list, .nav-subpanel { list-style: none; margin: 0; padding: 0; }
.nav-list { padding-right: 12px; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 12px 7px 6px; border: 0; border-radius: 14px; background: transparent;
  color: var(--text2); font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.nav-item:hover { background: var(--row-hover); }
.nav-icon {
  width: 32px; height: 32px; flex: none; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--icon-circle); border: 1px solid var(--icon-circle-border); color: var(--icon-fg);
}
.nav-label { flex: 1; }
.nav-caret { display: flex; opacity: 0.6; transition: transform 0.2s ease; }
.nav-caret.open { transform: rotate(90deg); }
.nav-item.active { color: var(--active-text); font-size: 15px; font-weight: 600; background: var(--active-item-bg); }
.nav-item.active .nav-icon { background: var(--active-icon-bg); border-color: transparent; color: var(--active-icon-fg); box-shadow: var(--active-glow); }
.nav-subpanel { margin: 4px 0 6px; padding: 6px 0; border-radius: 12px; background: var(--sub-panel); }
.nav-sub { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 26px; color: var(--text2); text-decoration: none; }
.nav-sub:hover { color: var(--text); }
.nav-dot { width: 5px; height: 5px; border-radius: 3px; background: transparent; }
.nav-sub.active { color: var(--gold); font-weight: 600; }
.nav-sub.active .nav-dot { background: var(--gold); }

/* header */
.topbar {
  flex: none;
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px;
  min-height: 56px; padding: 6px 24px;
  background: var(--header); border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  position: relative; z-index: 5;
}
.search-box {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
  border-radius: 12px; background: var(--input); border: 1px solid var(--input-border); color: var(--text3);
}
.search-box input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); }
.search-box input::placeholder { color: var(--text3); }
.header-search { height: 38px; min-width: 255px; margin-right: 6px; }
.topbar .icon-btn { width: 40px; height: 40px; }
.account { position: relative; }
.account-btn { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px 0 4px; border: 0; border-radius: 22px; background: transparent; color: var(--text2); cursor: pointer; }
.avatar { width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--avatar); color: #17130A; font-weight: 700; }
.menu {
  position: absolute; right: 0; top: 50px; min-width: 240px; padding: 8px; border-radius: 14px;
  background: var(--menu-bg); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
  backdrop-filter: blur(18px); display: flex; flex-direction: column; gap: 2px; z-index: 20;
}
.menu form { margin: 0; }
.menu-head { padding: 8px 10px 10px; color: var(--text3); font-size: 12px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--row-line); margin-bottom: 4px; }
.menu-head strong { color: var(--text); font-size: 13px; font-weight: 500; }
.menu-item { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; }
.menu-item:hover { background: var(--row-hover); }
.menu-item.danger { color: var(--red); }
.divider { width: 1px; height: 24px; margin: 0 6px; background: var(--divider); }
.icon-btn {
  position: relative; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent;
  color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.icon-btn:hover { background: var(--row-hover); color: var(--text); }
.theme-btn { color: var(--gold); }
.inline-form { margin: 0; display: flex; }
.count-pill {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  background: #E5534B; color: #FFFFFF;
}
.icon-btn .count-pill { position: absolute; top: 6px; right: 5px; }
.count-pill.gold { background: var(--pill-bg); color: var(--pill-fg); }
.tab .count-pill { position: static; min-width: 20px; height: 20px; line-height: 20px; border-radius: 10px; font-size: 11px; padding: 0 6px; }
.orb {
  width: 22px; height: 22px; border-radius: 11px;
  background: radial-gradient(circle at 35% 30%, #F3EEFF 0%, #B79CF2 38%, #6D4FCB 72%, #2B1D5C 100%);
  box-shadow: var(--orb-glow);
}

/* ---------- common page parts ---------- */
.page-head h1, .load-head h1, .center-card h1 { margin: 0; font-family: Outfit, sans-serif; font-size: 26px; font-weight: 400; letter-spacing: -0.01em; }
/* Title, count and any subtitle on one line (founder 2026-10-21: the top of the page took too much room). */
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.page-head p { margin: 0; font-size: 13px; color: var(--text3); }
.head-count { font-family: Outfit, sans-serif; font-size: 17px; color: var(--gold); }
.head-count::before { content: "("; } .head-count::after { content: ")"; }
/* List pages: title and toolbar share the top row; the toolbar drops below the title only when the
   window is too narrow for both. */
.page-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.page-bar > .page-head { flex: none; }
.page-bar > .toolbar { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 10px; }
.page-bar .search-box, .page-bar .select-wrap select { height: 38px; }
.page-bar .select-caret { top: 12px; }
.page-bar .btn { height: 38px; border-radius: 10px; }
.page-bar .btn-icon { width: 38px; }
/* The page itself never scrolls: the list scrolls inside its panel under a fixed header row. On a
   very short window the page scrolls instead of squeezing the list to nothing. */
.page:has(> .list-panel) { flex: 1 1 0; min-height: 420px; }
.list-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.list-panel > .table-scroll { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.list-panel thead th { position: sticky; top: 0; z-index: 2; background: linear-gradient(var(--th-bg), var(--th-bg)), var(--panel-solid); }
.list-foot { flex: none; padding: 7px 22px; border-top: 1px solid var(--row-line); }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.grow-3 { flex: 3 1 260px; }
.grow-2 { flex: 2 1 180px; }
.grow-1 { flex: 1 1 150px; }
.select-wrap { position: relative; }
.select-wrap select {
  width: 100%; height: 42px; padding: 0 36px 0 14px; border-radius: 12px; appearance: none; -webkit-appearance: none;
  background: var(--input); border: 1px solid var(--input-border); color: var(--text); cursor: pointer;
}
.select-wrap select option { background: var(--panel-solid); color: var(--text); }
.select-caret { position: absolute; right: 14px; top: 14px; color: var(--text3); pointer-events: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px;
  border-radius: 12px; border: 1px solid transparent; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:disabled { cursor: not-allowed; opacity: 0.5; }
.btn-sm { height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13px; }
.btn-xs { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; }
.btn-icon { width: 40px; padding: 0; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary-bg); color: var(--primary-fg); font-weight: 600; box-shadow: var(--primary-shadow); border: 0; }
.btn-ghost { background: var(--btn-bg); border-color: var(--btn-border); color: var(--btn-fg); }
.btn-outline { background: transparent; border-color: var(--btn-border); color: var(--btn-fg); height: 40px; border-radius: 10px; }
.btn-teal { background: var(--b-teal-bg); border-color: var(--b-teal-bd); color: var(--b-teal-fg); font-weight: 600; height: 40px; border-radius: 10px; }
.btn-danger { background: var(--b-red-bg); border-color: var(--b-red-bd); color: var(--b-red-fg); font-weight: 600; height: 40px; border-radius: 10px; }
.btn-gold-outline { background: transparent; border-color: var(--gold-border); color: var(--gold); font-weight: 600; }
.load-actions .btn-primary { height: 40px; border-radius: 10px; }

.panel {
  border-radius: 22px; background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden;
}
.panel.padded { padding: 20px 22px; }
.panel.padded p { margin: 0 0 12px; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--row-line); }
.panel-head.small { padding: 14px 22px; }
.panel-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-family: Outfit, sans-serif; font-size: 19px; font-weight: 500; }
.panel-head.small h2 { font-size: 16px; }
.panel-head h2 svg { color: var(--gold); }
.accent { color: var(--gold); }
.hint { display: flex; align-items: center; gap: 6px; color: var(--text3); font-size: 13px; }
.panel-loading, .panel-error { padding: 28px 22px; color: var(--text3); }
.panel-error, .page-error, .form-error { color: var(--red); }
.empty { padding: 48px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text3); }
.empty p { margin: 0; }
.center-card { max-width: 520px; margin: 60px auto; padding: 32px; border-radius: 22px; background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.center-card p { margin: 0; color: var(--text2); }

/* tables */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.loads-table { min-width: 1120px; }
.data-table thead tr { text-align: left; font-size: 12px; color: var(--text3); background: var(--th-bg); }
.data-table th { padding: 0; font-weight: 600; white-space: nowrap; }
.th-btn { display: inline-flex; align-items: center; gap: 6px; width: 100%; padding: 9px 10px; border: 0; background: transparent; color: inherit; font-weight: 600; cursor: pointer; text-align: inherit; }
.th-btn.static { cursor: default; justify-content: center; }
.grip { opacity: 0.45; flex: none; }
.data-table th[draggable="true"] { cursor: grab; }
.data-table th.dragging { opacity: 0.45; }
.data-table th.drop-target { box-shadow: inset 2px 0 0 var(--gold-line); background: var(--active-item-bg); }
.sort-icon { display: inline-flex; opacity: 0.4; }
.sort-icon.active { opacity: 1; color: var(--gold); }
.data-table td { padding: 9px 10px; border-top: 1px solid var(--row-line); vertical-align: top; }
.data-table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr:hover { background: var(--row-hover); }
.data-table tbody tr.selected { background: var(--sel-row); }
.col-check { width: 44px; padding-left: 22px !important; }
.col-check input { width: 16px; height: 16px; accent-color: var(--check); cursor: pointer; margin: 2px 0 0; }
th.col-check { padding: 9px 8px 9px 22px !important; }
.col-track { width: 56px; text-align: center; }
.col-money { text-align: right; padding-right: 22px !important; }
.col-money .th-btn { justify-content: flex-end; }
.load-link { font-weight: 700; text-decoration: none; letter-spacing: 0.01em; }
.load-link:hover { color: var(--gold); }
.sub { margin-top: 2px; font-size: 12px; color: var(--text3); }
.dates { font-size: 12.5px; }
.dates div { display: flex; align-items: center; gap: 6px; }
.dates div + div { margin-top: 3px; }
.up { color: var(--green); display: flex; }
.down { color: var(--red); display: flex; }
.route { font-size: 13px; }
.track { display: inline-flex; color: var(--text3); opacity: 0.35; }
.track.on { color: var(--gold); opacity: 1; }
.revenue { font-weight: 600; color: var(--green); }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid;
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; white-space: nowrap;
}
.badge.small { padding: 3px 9px; letter-spacing: 0.04em; }
.badge.big { padding: 8px 16px; font-size: 15px; letter-spacing: 0.01em; }
.badge-neutral { background: var(--b-neutral-bg); color: var(--b-neutral-fg); border-color: var(--b-neutral-bd); }
.badge-amber { background: var(--b-amber-bg); color: var(--b-amber-fg); border-color: var(--b-amber-bd); }
.badge-teal { background: var(--b-teal-bg); color: var(--b-teal-fg); border-color: var(--b-teal-bd); }
.badge-violet { background: var(--b-violet-bg); color: var(--b-violet-fg); border-color: var(--b-violet-bd); }
.badge-green { background: var(--b-green-bg); color: var(--b-green-fg); border-color: var(--b-green-bd); }
.badge-red { background: var(--b-red-bg); color: var(--b-red-fg); border-color: var(--b-red-bd); }
.badge-dim { background: var(--b-dim-bg); color: var(--b-dim-fg); border-color: var(--b-dim-bd); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- menus, popovers, passkey prompt ---------- */
button.badge { font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; }
button.badge:disabled { cursor: default; }
.status-menu { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.popover-scrim { position: fixed; inset: 0; z-index: 30; }
.popover {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 31; min-width: 200px; max-height: 360px; overflow-y: auto;
  padding: 6px; border-radius: 14px; background: var(--menu-bg); border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain;
}
.popover.up { top: auto; bottom: calc(100% + 6px); }
.popover-title { padding: 6px 8px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--text3); text-transform: uppercase; }
.popover-item { display: flex; align-items: center; width: 100%; padding: 6px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.popover-item:hover { background: var(--row-hover); }
.popover-item.text { font-size: 13px; }
.popover-forced { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px 6px; }
.popover-force { padding: 3px 8px; border: 1px solid var(--row-line); border-radius: 8px; background: transparent; color: var(--text3); font-size: 11.5px; cursor: pointer; }
.popover-force:hover { color: var(--text); border-color: var(--btn-border); }
.popover-empty { padding: 6px 8px; color: var(--text3); font-size: 12.5px; }
.inline-error { color: var(--red); font-size: 12px; white-space: normal; max-width: 260px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,8,9,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal {
  width: 100%; max-width: 400px; padding: 22px; border-radius: 20px; background: var(--panel-solid);
  background-image: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
  display: flex; flex-direction: column; gap: 10px; color: var(--text);
}
.modal-head { display: flex; align-items: center; gap: 10px; }
.modal-head h2 { margin: 0; font-family: Outfit, sans-serif; font-size: 19px; font-weight: 500; }
.modal-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--active-item-bg); color: var(--gold); }
.modal p { margin: 0; font-size: 13px; }
.modal label { font-size: 12.5px; color: var(--text2); }
.modal input[type=password], .modal input[type=text] { height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input); color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.check { display: flex; align-items: center; gap: 8px; color: var(--text2); font-size: 13px; cursor: pointer; }
.check input { accent-color: var(--check); width: 16px; height: 16px; }
.choice-row { display: flex; gap: 18px; }

/* ---------- dashboard ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi {
  position: relative; overflow: hidden; padding: 12px 16px; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
}
.kpi::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; opacity: 0.16; filter: blur(8px); background: var(--kpi-tone, var(--gold)); }
.kpi.violet { --kpi-tone: var(--b-violet-fg); } .kpi.amber { --kpi-tone: var(--b-amber-fg); }
.kpi.teal { --kpi-tone: var(--b-teal-fg); } .kpi.gold { --kpi-tone: var(--gold); }
.kpi-top { display: flex; justify-content: space-between; align-items: center; }
.kpi-label { color: var(--text2); font-weight: 500; }
.kpi-icon { width: 30px; height: 30px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--kpi-tone); background: var(--th-bg); border: 1px solid var(--row-line); }
.kpi-value { margin-top: 2px; font-family: Outfit, sans-serif; font-size: 32px; font-weight: 400; letter-spacing: -0.02em; color: var(--text); }
.kpi-caption { margin-top: 2px; color: var(--text3); font-size: 12.5px; }
.dash-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.dash-h { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-family: Outfit, sans-serif; font-size: 16px; font-weight: 500; }
.dash-h svg { color: var(--gold); }
.small-link { font-size: 12.5px; }
.data-table.compact td { padding: 8px 10px; white-space: nowrap; }
.data-table.compact td.clip { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.data-table.compact td.clip.route { max-width: 200px; }
.data-table.compact th .th-btn { padding: 9px 10px; }
.meter { padding: 4px 0 8px; }
.meter + .meter { border-top: 1px solid var(--row-line); padding-top: 10px; }
.meter-row { display: flex; justify-content: space-between; align-items: baseline; color: var(--text2); }
.meter-row strong { font-family: Outfit, sans-serif; font-size: 20px; font-weight: 500; color: var(--text); }
.meter-track { margin-top: 8px; height: 6px; border-radius: 3px; background: var(--th-bg); border: 1px solid var(--row-line); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 3px; }
.meter-fill.green { background: linear-gradient(90deg, var(--b-green-bd), var(--green)); }
.meter-fill.gold { background: linear-gradient(90deg, var(--gold-border), var(--gold-line)); }
.meter-fill.teal { background: linear-gradient(90deg, var(--b-teal-bd), var(--b-teal-fg)); }
.meter-note { margin-top: 5px; font-size: 12px; color: var(--text3); }
.quick-actions-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px !important; }
.quick-actions-panel .dash-h { margin: 0; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-actions .btn { height: 36px; border-radius: 10px; font-size: 13px; }
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- load edit / create ---------- */
.edit-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field {
  width: 100%; min-width: 0; height: 30px; padding: 0 9px; border-radius: 8px;
  border: 1px solid var(--input-border); background: var(--input); color: var(--text); font: inherit; font-size: 13px;
}
.field:focus { outline: none; border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--active-item-bg); }
.field.narrow { max-width: 74px; }
.field-select { width: 100%; }
.field-select select { height: 30px; border-radius: 8px; font-size: 13px; padding: 0 30px 0 9px; }
.field-select select:disabled { opacity: 0.6; cursor: not-allowed; }
.field-select .select-caret { top: 9px; right: 10px; }
.kv-value.pair { flex-wrap: nowrap; }
.kv-value.checks { gap: 14px; }
.editing .kv { row-gap: 6px; }
.stop-edit { padding: 8px 12px 10px; border-top: 1px solid var(--row-line); }
.stop-edit-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.stop-edit-title.pickup { color: var(--green); }
.stop-edit-title.delivery { color: var(--b-teal-fg); }
.stop-edit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.stop-edit-grid .span-2 { grid-column: span 2; }
.edit-note { margin: 0; font-size: 12.5px; }

/* ---------- stop editor slide-out ---------- */
.stop-editor { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.se-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.se-toggle { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--th-bg); border: 1px solid var(--row-line); }
.se-toggle button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text2); font: inherit; font-weight: 600; cursor: pointer; }
.se-toggle button.on.pickup { background: var(--b-green-bg); color: var(--b-green-fg); }
.se-toggle button.on.delivery { background: var(--b-teal-bg); color: var(--b-teal-fg); }
.se-section { margin-top: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--text3); text-transform: uppercase; }
.se-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; }
.se-grid .span-2 { grid-column: span 2; }
.se-grid .span-4 { grid-column: span 4; }
.se-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.se-field > span { font-size: 11px; color: var(--text3); }
.se-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.stop-row.clickable { cursor: pointer; }
.stop-row.clickable:hover td { background: var(--row-hover); }
.order-cell { width: 24px; }
.order-btns { display: inline-flex; flex-direction: column; }
.order-btns button { width: 18px; height: 13px; padding: 0; border: 0; background: transparent; color: var(--text3); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.order-btns button:hover:not(:disabled) { color: var(--gold); }
.order-btns button:disabled { opacity: 0.25; cursor: default; }

/* ---------- load page ----------
   Tight on purpose: the founder wants a whole load visible without scrolling (1366×768 and up). */
.load-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.load-head-left { display: flex; align-items: center; gap: 14px; }
.load-head h1 { font-size: 26px; line-height: 1.1; }
.load-head .sub { font-size: 12px; margin-top: 1px; }
.load-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.load-actions .btn, .load-head .btn { height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.load-actions .btn-icon { width: 36px; padding: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--row-line); }
.tab {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text2); cursor: pointer; font-size: 13.5px;
}
.tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--gold-line); }
.tab.active svg { color: var(--gold); }
.load-card .panel-head.small { padding: 7px 20px; }
.load-card .panel-head.small h2 { font-size: 15px; }
.info-grid { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 12px 20px 14px; }
.load-card { container-type: inline-size; }
.info-col { flex: 1 1 290px; min-width: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.35; }
.kv { display: grid; grid-template-columns: 38% minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; }
.kv.narrow-label { grid-template-columns: 32% minmax(0, 1fr); row-gap: 5px; }
/* Driver & Equipment: two label/value pairs per line. */
.kv.kv-pairs { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 10px; }
.kv-label { color: var(--text3); display: flex; align-items: center; gap: 6px; }
.kv-value { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kv .badge { padding: 3px 9px; }
.lock { display: inline-flex; }
.link { color: var(--gold); text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }
.kv-section { padding-top: 9px; border-top: 1px solid var(--row-line); }
.kv-section-title { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--text2); }
.kv-section-title svg { color: var(--gold); }
.info-col + .info-col { flex: 1.45 1 330px; }
.rate { font-size: 14px; font-weight: 700; text-decoration: underline dotted; text-underline-offset: 4px; }
.rate-customer { color: var(--green); }
.rate-carrier { color: var(--red); }
.stops { border-radius: 12px; border: 1px solid var(--panel-border); overflow: hidden; }
.stops-head { display: flex; justify-content: space-between; align-items: center; padding: 5px 6px 5px 12px; background: var(--th-bg); border-bottom: 1px solid var(--row-line); }
.stops-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.stops-title svg { color: var(--gold); }
.stops-head .btn-xs { height: 28px; }
.stops-empty { margin: 0; padding: 10px 12px; }
/* One line per stop: fixed columns, long names end in "…" (full text on hover). */
.stops-table { width: 100%; min-width: 480px; table-layout: fixed; border-collapse: collapse; font-size: 12px; }
.stops-table .w-grip { width: 24px; } .stops-table .w-stop { width: 48px; } .stops-table .w-city { width: 19%; }
.stops-table .w-date { width: 40px; } .stops-table .w-time { width: 74px; } .stops-table .w-contact { width: 14%; } .stops-table .w-phone { width: 98px; }
.stops-table td.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stops-table th { padding: 5px 6px; text-align: left; font-size: 10.5px; letter-spacing: 0.08em; color: var(--text3); font-weight: 600; }
.stops-table th:first-child, .stops-table td:first-child { padding-left: 12px; width: 22px; }
.stops-table td { padding: 6px 6px; border-top: 1px solid var(--row-line); white-space: nowrap; }
.stop-label { font-weight: 700; white-space: nowrap; }
.stop-label.pickup { color: var(--green); }
.stop-label.delivery { color: var(--b-teal-fg); }
.route-strip {
  display: grid; grid-template-columns: minmax(170px, 1.1fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: 0;
  border-top: 1px solid var(--row-line); background: var(--th-bg);
}
.route-strip > * { padding: 8px 16px; min-width: 0; }
.route-strip > .route-stat { border-left: 1px solid var(--row-line); }
.route-title h3 { margin: 0; display: flex; align-items: center; gap: 7px; font-family: Outfit, sans-serif; font-size: 14px; font-weight: 500; }
.route-title h3 svg { color: var(--gold); }
.route-maps { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--gold); font-size: 12px; font-weight: 600; text-decoration: none; }
.route-maps:hover { text-decoration: underline; }
.route-empty { grid-column: 2 / -1; margin: 0; }
.stat-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--text3); }
.stat-value { margin-top: 3px; font-family: Outfit, sans-serif; font-size: 20px; font-weight: 400; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.stat-value small { font-size: 13px; color: var(--text2); }
.stat-value .badge { font-family: Inter, sans-serif; font-size: 13px; padding: 3px 10px; }
.stat-sub { font-family: Inter, sans-serif; color: var(--text3); font-size: 12px; font-weight: 400; }

/* ---------- tool rail (right edge) ----------
   Founder's choice: slide-out tools live in a slim rail on the right; one opens at a time beside it. */
.tool-rail {
  flex: none; width: 56px; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 0; border-left: 1px solid var(--header-border); background: var(--header);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 16;
}
.rail-btn {
  position: relative; width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent;
  color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.rail-btn:hover { background: var(--row-hover); color: var(--text); }
.rail-btn.active { color: var(--gold); background: var(--active-item-bg); }
.rail-btn.active::before { content: ""; position: absolute; left: -7px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--gold-line); box-shadow: 0 0 10px var(--gold-border); }
.rail-btn .count-pill { position: absolute; top: 3px; right: 1px; }

/* ---------- slide-outs ----------
   Fits without scrolling: header, map (takes the leftover height), five compact lines. */
.icon-btn.on { color: var(--gold); background: var(--active-item-bg); }
.icon-btn.sm { width: 34px; height: 34px; border-radius: 10px; }
.icon-btn.xs { width: 30px; height: 30px; border-radius: 9px; }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.slideout {
  position: relative; flex: none; height: 100%; display: flex; flex-direction: column; min-width: 0;
  background: var(--panel-side); border-left: 1px solid var(--panel-border);
  box-shadow: -18px 0 48px rgba(0,0,0,0.28);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  animation: slide-in 0.28s ease-out;
}
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .slideout { animation: none; } }
.slideout.dragging { user-select: none; cursor: col-resize; }
.slideout-resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; }
.slideout-resize:hover, .slideout.dragging .slideout-resize { background: var(--gold-border); }
.slideout-head { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--row-line); }
.slideout-icon { color: var(--gold); display: flex; }
.slideout-title { font-weight: 700; color: var(--gold); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--b-teal-bg); color: var(--b-teal-fg); border: 1px solid var(--b-teal-bd); }
.grow { flex: 1; }
.tracking-switch { display: flex; align-items: center; gap: 2px; font-size: 12px; color: var(--text2); white-space: nowrap; }
/* Body is a column: the map flexes, the card keeps its natural height. Scrolls only as a last
   resort on very short windows, and never moves the page. */
/* position: relative keeps absolutely placed bits (e.g. .sr-only labels) inside the scrolling body. */
.slideout-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.slideout-body > .tracking-empty { flex: 1; }
.tracking-empty { padding: 32px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--text3); }
.tracking-empty strong { color: var(--text2); }
.tracking-empty.small { padding: 16px; height: 100%; }
.tracking-empty.error { color: var(--red); }
.tracking-map { flex: 1 1 auto; min-height: 80px; max-height: 420px; border-bottom: 1px solid var(--row-line); background: var(--map-sea); }
.route-map { display: block; width: 100%; height: 100%; }
.map-sea { fill: var(--map-sea); }
.map-land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.map-land-dots { stroke: none; }
.map-dot { fill: var(--map-dot); }
.map-route { fill: none; stroke: var(--map-route); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map-route-glow { fill: none; stroke: var(--map-route-glow); stroke-width: 9; stroke-linecap: round; opacity: 0.55; vector-effect: non-scaling-stroke; }
.map-pin .dot { stroke: var(--map-sea); stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-pin .halo { opacity: 0.22; }
.map-pin.pickup .dot, .map-pin.pickup .halo { fill: var(--map-pickup); }
.map-pin.delivery .dot, .map-pin.delivery .halo { fill: var(--map-delivery); }
.map-label { fill: var(--map-label); font-family: Inter, sans-serif; font-weight: 600; paint-order: stroke; stroke: var(--map-sea); stroke-width: 3px; stroke-linejoin: round; }
.tracking-card { flex: none; padding: 6px 12px 8px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.trip-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.trip-row .btn-xs { height: 30px; padding: 0 12px; }
.trip-customer { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-stop { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.trip-stop strong { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.trip-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text3); font-size: 12px; }
.trip-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: 10px; overflow: hidden; border: 1px solid var(--row-line); background: var(--row-line); }
.trip-stats > div { padding: 5px 8px; background: var(--panel-solid); display: flex; flex-direction: column; min-width: 0; }
.trip-stats .stat-label { font-size: 9.5px; letter-spacing: 0.07em; }
.trip-stats strong { font-family: Outfit, sans-serif; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-stats strong.amber { color: var(--b-amber-fg); }
.trip-stats strong.teal { color: var(--b-teal-fg); }
.trip-driver { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; color: var(--text2); font-size: 12px; }
.trip-driver svg { color: var(--gold); }
.trip-driver strong { color: var(--text); font-weight: 600; }
.trip-carrier { margin-left: auto; color: var(--text3); }

@media (max-width: 1100px) {
  .slideout { position: absolute; top: 0; right: 56px; bottom: 0; z-index: 15; max-width: calc(100% - 80px); }
  /* Keep the header to one row. */
  .topbar { flex-wrap: nowrap; padding: 8px 14px; gap: 0; min-height: 56px; }
  .header-search { min-width: 0; flex: 0 1 220px; }
  .account-name, .account-btn > svg, .topbar .divider { display: none; }
  .icon-btn { width: 40px; height: 40px; }
}

/* ---------- login ---------- */
.login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px; }
.login-card {
  width: 100%; max-width: 440px; padding: 32px; border-radius: 24px;
  background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.login-logo { justify-content: flex-start; margin: 0 0 26px; }
.login-card h1 { margin: 0; font-family: Outfit, sans-serif; font-weight: 400; font-size: 28px; }
.login-card > p { margin: 6px 0 22px; }
.login-form { display: flex; flex-direction: column; gap: 8px; }
.login-form label { font-size: 13px; color: var(--text2); margin-top: 6px; }
.input-icon { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 12px; background: var(--input); border: 1px solid var(--input-border); color: var(--text3); }
.input-icon input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); }
.login-form .btn { margin-top: 14px; }
.form-error { margin: 6px 0 0; font-size: 13px; }
.login-footer { margin: 0; color: var(--text3); font-size: 13px; }

/* ---------- small screens ---------- */
/* Thin scrollbars that match the theme. */
.scroll-area, .sidebar, .table-scroll { scrollbar-color: var(--divider) transparent; }
.scroll-area::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 8px; }
.scroll-area::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 4px; }

@media (max-width: 600px) {
  /* Phones: one normal scrolling page, menu on top. */
  .shell { flex-wrap: wrap; height: auto; overflow: visible; }
  .shell-main { height: auto; }
  .scroll-area { overflow: visible; }
  .sidebar { flex: 1 0 100%; height: auto; overflow: visible; padding: 0 16px 8px; }
  .logo { margin: 14px 0 10px; }
  .page { padding: 20px 16px 40px; }
  .topbar { padding: 8px 16px; justify-content: flex-start; }
  .header-search { min-width: 0; flex: 1 1 100%; }
  .account-name { display: none; }
  .slideout { position: fixed; inset: 0 0 56px 0; width: 100% !important; max-width: none; height: auto; z-index: 40; border-left: 0; }
  .slideout-resize { display: none; }
  .tool-rail { position: fixed; left: 0; right: 0; bottom: 0; width: auto; height: 56px; flex-direction: row; justify-content: center; padding: 0 10px; border-left: 0; border-top: 1px solid var(--header-border); z-index: 41; }
  .rail-btn.active::before { left: 9px; right: 9px; top: auto; bottom: -7px; width: auto; height: 3px; }
  .scroll-area { padding-bottom: 56px; }
  .route-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-strip > .route-title { grid-column: 1 / -1; }
  .route-strip > .route-stat { border-left: 0; border-top: 1px solid var(--row-line); }
}

/* Narrow load card (a slide-out is open, or a small window): keep two columns, stack the route strip. */
@container (max-width: 760px) {
  .info-grid { gap: 8px 18px; padding: 10px 14px 12px; }
  .kv { grid-template-columns: 42% minmax(0, 1fr); column-gap: 8px; }
  .kv.narrow-label { grid-template-columns: 40% minmax(0, 1fr); }
  .route-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .route-strip > .route-title { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 6px 14px 0; }
  .route-strip > .route-stat:nth-child(2) { border-left: 0; }
  .route-strip > * { padding: 6px 12px; }
  .stat-value { font-size: 16px; }
  .stat-value .stat-sub { display: none; }
}

/* Company access: Users → Roles and Teams, the role, team and person slide-outs, and Approvals
   (crates/app/src/pages/access.rs, approvals.rs). Theme colors come from the variables only. */

/* The Users page's one slim bar: title, count, tabs, then the tab's actions. */
.ac-bar { flex-wrap: nowrap; }
.ac-bar > .toolbar { min-width: 0; }
.ac-tabs { flex: none; display: flex; align-items: stretch; gap: 2px; align-self: stretch; }
.ac-tab { display: inline-flex; align-items: center; padding: 0 12px; font-size: 13px; color: var(--text2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.ac-tab:hover { color: var(--text); }
.ac-tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--gold-line); }
.ac-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 1500px) { .ac-hint { display: none; } }

.ac-table td { padding: 9px 10px; vertical-align: middle; }
.ac-table td:first-child, .ac-table th:first-child { padding-left: 22px; }
.ac-table .right { text-align: right; padding-right: 22px; }
.ac-table td:first-child { white-space: nowrap; }
.ac-builtin { margin-left: 8px; }

/* Slide-out editors: the body scrolls, the save row stays at the bottom. */
.ac-editor { display: flex; flex-direction: column; min-height: 100%; }
.ac-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--row-line); }
.ac-note-line { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; color: var(--text2); line-height: 1.4; }
.ac-note-line svg { flex: none; margin-top: 2px; color: var(--gold); }
.ac-people { margin: 0; }
.ac-count { margin-left: 6px; white-space: nowrap; }
.ac-perms { display: flex; flex-direction: column; }
.ac-area { padding: 6px 0 8px; border-bottom: 1px solid var(--row-line); }
.ac-area-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 14px 4px; }
.ac-area-head strong { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.ac-perm { display: flex; align-items: center; gap: 10px; padding: 3px 14px; min-height: 34px; }
.ac-perm:hover { background: var(--row-hover); }
.ac-perm .switch { flex: none; }
.ac-perm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ac-perm-label { font-size: 13px; color: var(--text2); }
.ac-perm.on .ac-perm-label { color: var(--text); font-weight: 600; }
.ac-perm-desc { font-size: 11.5px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-perm-ctl { flex: none; display: flex; align-items: center; gap: 6px; }
.ac-select select { height: 30px; font-size: 12.5px; border-radius: 8px; padding: 0 28px 0 9px; }
.ac-select .select-caret { top: 9px; right: 9px; }
.ac-limit { width: 104px; text-align: right; }
.ac-foot { position: sticky; bottom: 0; margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-top: 1px solid var(--row-line); background: var(--panel-solid); }
.ac-foot .btn-sm { height: 32px; }
.ac-danger { color: var(--red); }
.ac-pad { margin: 0; padding: 2px 14px; }

/* The person's access slide-out */
.ac-person-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--row-line); font-family: Outfit, sans-serif; font-size: 16px; }
.ac-chips { padding: 2px 14px; }
.ac-grant { display: flex; align-items: center; gap: 8px; padding: 4px 14px; font-size: 12.5px; }
.ac-grant-label { color: var(--text); }
.ac-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 14px 2px; }
.ac-add .grow-3 { flex: 1 1 200px; }
.ac-add .btn-sm { height: 30px; }
.ac-can { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 12px; margin: 0; padding: 2px 14px; font-size: 12.5px; line-height: 1.4; }
.ac-can dt { color: var(--gold); font-weight: 600; white-space: nowrap; }
.ac-can dd { margin: 0; color: var(--text2); }

/* Approvals in the bell and the Approvals slide-out */
.ac-bell-group { padding: 6px 14px 2px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.ac-bell-item { border-left: 2px solid var(--gold-line); }
.ac-mini-tabs { display: flex; gap: 2px; margin-left: 8px; }
.ac-mini-tabs button { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--text2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ac-mini-tabs button.active { border-color: var(--gold-border); color: var(--text); font-weight: 600; }
.ac-n { min-width: 16px; padding: 0 5px; border-radius: 8px; background: var(--pill-bg); color: var(--pill-fg); font-size: 10.5px; text-align: center; }
.ac-approvals { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; }
.ac-card { padding: 10px 12px; border: 1px solid var(--row-line); border-radius: 12px; background: var(--sub-panel); }
.ac-card.focus { border-color: var(--gold-border); box-shadow: 0 0 0 1px var(--gold-border); }
.ac-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-amount { font-family: Outfit, sans-serif; font-size: 20px; font-weight: 500; color: var(--gold); }
.ac-summary { margin: 2px 0 6px; font-size: 13px; color: var(--text); }
.ac-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: 12px; }
.ac-facts dt { color: var(--text3); }
.ac-facts dd { margin: 0; color: var(--text2); min-width: 0; overflow-wrap: anywhere; }
.ac-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ac-card-actions .btn-sm { height: 30px; }
.ac-note { flex: 1 1 140px; max-width: 220px; }
.ac-bell-link { margin-right: 14px; }
.ac-waiting { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; padding: 7px 9px; border-radius: 9px; font-size: 12px; line-height: 1.4;
  background: var(--b-amber-bg); color: var(--b-amber-fg); border: 1px solid var(--b-amber-bd); }
.ac-waiting svg { flex: none; margin-top: 1px; }

/* ---------- Accounting: Command Center, Delivered Loads, invoice split views, load Accounting tab ----------
   Built on the base tokens in flextms.css; no theme colors are hard-coded here. Tight on purpose so
   each screen fits 1366×768 without scrolling the page. */

.acct-page { gap: 12px; }
.acct-page .page-head h1 { font-size: 28px; }
.acct-page .page-head p { margin-top: 2px; font-size: 13px; }
.acct-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }

/* summary tiles (Delivered Loads, invoice pages, Command Center) */
.acct-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.acct-tiles.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.acct-tile {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; min-width: 0;
  border-radius: 16px; background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
  text-align: left; color: var(--text); font: inherit;
}
button.acct-tile { cursor: pointer; }
button.acct-tile:hover { border-color: var(--btn-border); }
.acct-tile.on { border-color: var(--gold-border); box-shadow: var(--panel-shadow), 0 0 0 1px var(--gold-border); }
.acct-tile .t-label { font-size: 11.5px; color: var(--text3); display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.acct-tile .t-value { font-family: Outfit, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-tile .t-sub { font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-tile .t-value.green, .t-green { color: var(--green); }
.acct-tile .t-value.amber, .t-amber { color: var(--b-amber-fg); }
.acct-tile .t-value.teal, .t-teal { color: var(--b-teal-fg); }
.acct-tile .t-value.red, .t-red { color: var(--red); }
.acct-tile .t-value.gold, .t-gold { color: var(--gold); }
.acct-tile .t-filter { position: absolute; top: 8px; right: 10px; font-size: 10px; color: var(--gold); letter-spacing: 0.06em; }

/* sub-tabs inside a page */
.acct-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--row-line); }

/* the Delivered Loads grid */
.acct-table { min-width: 1080px; font-size: 13px; }
.acct-table td { padding: 7px 8px; vertical-align: middle; }
.acct-table .th-btn { padding: 9px 8px; }
.acct-table th.c, .acct-table td.c { text-align: center; }
.acct-table th.c .th-btn { justify-content: center; }
.acct-table td.money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.acct-table th.money .th-btn { justify-content: flex-end; }
.acct-table .clip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-table .badge { padding: 3px 8px; font-size: 10.5px; }
.acct-table .row-actions { display: inline-flex; gap: 4px; }
.acct-table .row-actions .btn { height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; }
.acct-table .row-actions .btn-icon { width: 28px; padding: 0; }
.acct-table tr.ready td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.cost { color: var(--red); }
.acct-scroll { overflow: auto; max-height: calc(100vh - 330px); min-height: 220px; }
.acct-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-solid); }

/* factoring badge (two letters in a circle) */
.factor-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent;
}
.factor-badge.factor { background: var(--b-teal-bg); color: var(--b-teal-fg); border-color: var(--b-teal-bd); }
.factor-badge.self { background: var(--b-green-bg); color: var(--b-green-fg); border-color: var(--b-green-bd); }
.factor-badge.unknown { background: var(--b-amber-bg); color: var(--b-amber-fg); border-color: var(--b-amber-bd); }

/* split view (Customer Invoices / Carrier Invoices): list left, builder right, drag the gutter */
.split { display: flex; gap: 0; min-height: 0; height: calc(100vh - 300px); min-height: 420px; }
.split > .panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.split-list { flex: none; }
.split-detail { flex: 1 1 auto; }
.split-gutter { flex: none; width: 12px; cursor: col-resize; display: flex; align-items: center; justify-content: center; }
.split-gutter::after { content: ""; width: 3px; height: 44px; border-radius: 2px; background: var(--divider); }
.split-gutter:hover::after, .split-gutter.dragging::after { background: var(--gold-line); }
.split .panel-head.small { padding: 8px 14px; gap: 8px; }
.split .panel-head.small h2 { font-size: 15px; }
.split-tools { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--row-line); }
.split-tools .search-box { height: 32px; flex: 1; font-size: 13px; border-radius: 9px; }
.split-tools .select-wrap select { height: 32px; font-size: 12.5px; border-radius: 9px; }
.split-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.split-body .data-table { font-size: 12.5px; }
.split-body .data-table td { padding: 6px 8px; vertical-align: middle; }
.split-body .data-table th .th-btn { padding: 8px; }
.split-body .data-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-solid); }
.split-body tr.active-row td { background: var(--sel-row); }
.split-body tr.active-row td:first-child { box-shadow: inset 3px 0 0 var(--gold-line); }
.detail-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--row-line); }
.detail-head h3 { margin: 0; font-family: Outfit, sans-serif; font-size: 18px; font-weight: 500; }
.detail-head .amount { font-family: Outfit, sans-serif; font-size: 20px; color: var(--green); text-align: right; line-height: 1.1; }
.detail-head .amount.cost { color: var(--red); }
.detail-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.detail-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--row-line); }
.detail-tabs .tab { height: 34px; font-size: 13px; }
.tab-dot { width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: var(--b-amber-bg); color: var(--b-amber-fg); border: 1px solid var(--b-amber-bd); }
.tab-dot.teal { background: var(--b-teal-bg); color: var(--b-teal-fg); border-color: var(--b-teal-bd); }
.empty-detail { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text3); padding: 30px; text-align: center; }

/* activity banner (always visible; gray → blue → green) */
.activity { border-radius: 12px; border: 1px solid var(--b-neutral-bd); background: var(--b-neutral-bg); font-size: 12.5px; }
.activity.info { border-color: var(--b-teal-bd); background: var(--b-teal-bg); }
.activity.success { border-color: var(--b-green-bd); background: var(--b-green-bg); }
.activity-top { display: flex; align-items: center; gap: 8px; padding: 7px 10px; }
.activity-top .a-icon { display: flex; color: var(--text2); }
.activity.info .a-icon { color: var(--b-teal-fg); }
.activity.success .a-icon { color: var(--b-green-fg); }
.activity-top .a-text { flex: 1; min-width: 0; }
.activity-top .a-text strong { font-weight: 600; }
.activity-top .a-chips { display: inline-flex; gap: 4px; margin-left: 6px; }
.activity-toggle { border: 0; background: transparent; color: var(--text2); font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.activity-list { list-style: none; margin: 0; padding: 4px 10px 8px 34px; display: flex; flex-direction: column; gap: 3px; max-height: 150px; overflow: auto; border-top: 1px solid var(--row-line); }
.activity-list li { display: flex; gap: 8px; color: var(--text2); }
.activity-list .when { color: var(--text3); white-space: nowrap; }
.activity-list .what { color: var(--text); font-weight: 500; }
.activity-done { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-top: 1px solid var(--row-line); }

/* forms inside accounting cards */
.acct-card { border: 1px solid var(--row-line); border-radius: 14px; background: var(--th-bg); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.acct-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acct-card-head h4 { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.acct-card-head h4 svg { color: var(--gold); }
.acct-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; }
.acct-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acct-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acct-grid .span-2 { grid-column: span 2; }
.acct-grid .span-3 { grid-column: span 3; }
.acct-grid .span-all { grid-column: 1 / -1; }
.af { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.af > span { font-size: 11px; color: var(--text3); }
.af textarea.field { height: auto; min-height: 44px; padding: 6px 9px; resize: vertical; line-height: 1.35; }
.af .select-wrap select { height: 30px; font-size: 13px; border-radius: 8px; padding: 0 30px 0 9px; }
.af .select-wrap .select-caret { top: 9px; right: 10px; }
.af-value { min-height: 30px; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acct-actions .grow { flex: 1; }
.acct-note { margin: 0; font-size: 12px; color: var(--text3); display: flex; align-items: center; gap: 6px; }
.acct-note.warn { color: var(--b-amber-fg); }
.acct-msg { font-size: 12.5px; }
.acct-msg.ok { color: var(--green); }
.acct-msg.err { color: var(--red); }

/* summary list (invoice summary, payments table) */
.acct-mini { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.acct-mini th { text-align: left; font-weight: 600; color: var(--text3); font-size: 11px; padding: 4px 6px; border-bottom: 1px solid var(--row-line); }
.acct-mini td { padding: 5px 6px; border-bottom: 1px solid var(--row-line); }
.acct-mini td.money, .acct-mini th.money { text-align: right; font-variant-numeric: tabular-nums; }
.acct-mini tr.voided td { opacity: 0.5; text-decoration: line-through; }
.sum-rows { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; font-size: 13px; }
.sum-rows .lbl { color: var(--text3); }
.sum-rows .val { text-align: right; font-variant-numeric: tabular-nums; }
.sum-rows .total { font-weight: 700; border-top: 1px solid var(--row-line); padding-top: 3px; }

/* progress bar for partial payments */
.pay-bar { height: 6px; border-radius: 3px; background: var(--b-neutral-bg); overflow: hidden; }
.pay-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--b-teal-fg), var(--green)); }

/* document checklist (carrier docs, invoice attachments) */
.doc-steps { display: flex; gap: 4px; flex-wrap: wrap; }
.doc-step { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-size: 12px; cursor: pointer; }
.doc-step:disabled { cursor: not-allowed; opacity: 0.5; }
.doc-step.on { background: var(--b-green-bg); border-color: var(--b-green-bd); color: var(--b-green-fg); font-weight: 600; }
.doc-step.on.warn { background: var(--b-amber-bg); border-color: var(--b-amber-bd); color: var(--b-amber-fg); }
.clock { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 8px; background: var(--b-teal-bg); color: var(--b-teal-fg); border: 1px solid var(--b-teal-bd); }
.clock.late { background: var(--b-red-bg); color: var(--b-red-fg); border-color: var(--b-red-bd); }
.clock.soon { background: var(--b-amber-bg); color: var(--b-amber-fg); border-color: var(--b-amber-bd); }
.attach-list { display: flex; flex-direction: column; gap: 4px; }
.attach-list .check { font-size: 12.5px; }

/* the load page's Accounting tab: conditions strip + two columns */
.acct-tab { display: flex; flex-direction: column; gap: 10px; }
.cond-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; align-items: stretch; }
.cond {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; min-width: 0;
  border: 1px solid var(--row-line); background: var(--th-bg); font-size: 12.5px;
}
.cond .c-icon { width: 22px; height: 22px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--b-neutral-bg); color: var(--text3); border: 1px solid var(--b-neutral-bd); }
.cond.done .c-icon { background: var(--b-green-bg); color: var(--b-green-fg); border-color: var(--b-green-bd); }
.cond.partial .c-icon { background: var(--b-amber-bg); color: var(--b-amber-fg); border-color: var(--b-amber-bd); }
.cond .c-text { flex: 1; min-width: 0; line-height: 1.2; }
.cond .c-text strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cond .c-text span { font-size: 11px; color: var(--text3); white-space: nowrap; }
.cond .c-undo { border: 0; background: transparent; color: var(--text3); cursor: pointer; display: flex; padding: 3px; border-radius: 6px; }
.cond .c-undo:hover { color: var(--b-amber-fg); background: var(--row-hover); }
.cond-total { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.acct-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.acct-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.side-title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--text3); text-transform: uppercase; }
.side-title .badge { letter-spacing: 0.04em; }

/* invoice preview (HTML only for now) */
.inv-preview { border-radius: 12px; background: #FFFFFF; color: #1A1F1E; padding: 22px 26px; font-size: 12px; line-height: 1.45; box-shadow: 0 6px 24px rgba(0,0,0,0.25); }
.inv-preview h1 { margin: 0; font-family: Outfit, sans-serif; font-size: 22px; font-weight: 600; color: #0E5B54; }
.inv-preview .inv-top { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.inv-preview .inv-meta { text-align: right; }
.inv-preview .inv-meta div { white-space: nowrap; }
.inv-preview .inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.inv-preview .inv-parties h5 { margin: 0 0 3px; font-size: 10px; letter-spacing: 0.1em; color: #6B7774; text-transform: uppercase; }
.inv-preview table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.inv-preview th { text-align: left; font-size: 10.5px; color: #6B7774; border-bottom: 1px solid #D5DBD9; padding: 5px 4px; }
.inv-preview td { border-bottom: 1px solid #ECEFEE; padding: 6px 4px; }
.inv-preview .r { text-align: right; }
.inv-preview .inv-total { display: flex; justify-content: flex-end; gap: 30px; font-size: 14px; font-weight: 700; margin-top: 6px; }
.inv-preview .inv-foot { margin-top: 14px; font-size: 10.5px; color: #6B7774; }
.preview-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text3); }

/* Command Center */
.cc-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.cc-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cc-card .panel-head.small { padding: 9px 16px; }
.cc-body { padding: 10px 16px 12px; }
.cc-aging { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cc-aging-cell { padding: 6px 8px; border-radius: 10px; background: var(--th-bg); border: 1px solid var(--row-line); min-width: 0; }
.cc-aging-cell .a-l { font-size: 10.5px; color: var(--text3); white-space: nowrap; }
.cc-aging-cell .a-v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.cc-aging-cell.late .a-v { color: var(--b-amber-fg); }
.cc-aging-cell.very-late .a-v { color: var(--red); }
.pl-rows { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px; font-size: 13px; align-items: baseline; }
.pl-rows .h { font-size: 11px; color: var(--text3); text-align: right; }
.pl-rows .h:first-child { text-align: left; }
.pl-rows .v { text-align: right; font-variant-numeric: tabular-nums; }
.pl-rows .t { font-weight: 700; border-top: 1px solid var(--row-line); padding-top: 4px; }
.bal-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-preview {
  border-radius: 12px; border: 1px dashed var(--gold-border); padding: 10px 12px; font-size: 12px;
  background: repeating-linear-gradient(135deg, transparent 0 10px, var(--th-bg) 10px 20px);
}
.check-preview .cp-row { display: flex; justify-content: space-between; gap: 10px; }
.check-preview .cp-pay { margin: 6px 0 2px; font-size: 13px; }
.check-preview .cp-amt { font-family: Outfit, sans-serif; font-size: 18px; color: var(--gold); }
.attn-table td { padding: 6px 8px !important; font-size: 12.5px; vertical-align: middle !important; }
.attn-table th .th-btn { padding: 8px !important; }

/* modal variants used by accounting */
.modal.wide { max-width: 520px; }
.modal textarea { min-height: 70px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input); color: var(--text); font: inherit; resize: vertical; }
.modal input[type=number], .modal input[type=date] { height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input); color: var(--text); font: inherit; }
.modal ul.cond-list { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.modal .kv-mini { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; }
.modal .kv-mini span:nth-child(odd) { color: var(--text3); }

@media (max-width: 1280px) {
  .cc-grid { grid-template-columns: minmax(0, 1fr); }
  .acct-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .acct-tiles, .acct-tiles.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cond-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { flex-direction: column; height: auto; }
  .split-list { width: auto !important; max-height: 340px; }
  .split-gutter { display: none; }
}

/* ---------- pieces used by the accounting components ---------- */
.r { text-align: right; }
.modal textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.th-btn.static.left { justify-content: flex-start; }
.th-btn.static.right { justify-content: flex-end; }
.acct-tiles.skeleton { height: 64px; border-radius: 16px; background: var(--th-bg); }
.status-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.status-cell .sub { margin: 0; font-size: 10.5px; }
.row-actions .btn.warn { color: var(--b-amber-fg); border-color: var(--b-amber-bd); }

/* toasts */
.toast-host { position: fixed; right: 78px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.acct-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 8px; max-width: 380px; padding: 10px 14px; border-radius: 12px;
  background: var(--panel-solid); background-image: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
  color: var(--text); font-size: 13px; animation: toast-in 0.18s ease-out;
}
.acct-toast.ok svg { color: var(--green); }
.acct-toast.err { border-color: var(--b-red-bd); }
.acct-toast.err svg { color: var(--red); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* modals */
.modal-icon.warn { background: var(--b-amber-bg); color: var(--b-amber-fg); }
.modal-warn { padding: 9px 11px; border-radius: 10px; background: var(--b-red-bg); border: 1px solid var(--b-red-bd); color: var(--text); font-size: 12.5px !important; }
.modal-ok { padding: 9px 11px; border-radius: 10px; background: var(--b-green-bg); border: 1px solid var(--b-green-bd); font-size: 12.5px; }
.modal-info { display: flex; gap: 6px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--b-teal-bg); border: 1px solid var(--b-teal-bd); font-size: 12px !important; color: var(--text2); }
.modal label { display: inline-flex; align-items: center; gap: 4px; }
.modal .hint { font-size: 11.5px; margin-top: -4px; }
.modal input[type=email] { height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input); color: var(--text); }
a.btn.disabled { opacity: 0.5; pointer-events: none; }
.preview-modal { width: min(880px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 14px; border-radius: 18px; background: var(--panel-solid); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow); display: flex; flex-direction: column; gap: 10px; }
.journal-modal { max-width: 720px; }
.journal-scroll { max-height: min(460px, calc(100vh - 220px)); overflow: auto; }
.acct-mini tr.je-head td { background: var(--th-bg); color: var(--text2); font-size: 12px; padding-top: 7px; }
.acct-mini tr.total td { border-top: 1px solid var(--divider); border-bottom: 0; }

/* alerts, notes and small controls inside the tools */
.acct-alert { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--b-neutral-bd); background: var(--b-neutral-bg); font-size: 13px; }
.acct-alert.success { border-color: var(--b-green-bd); background: var(--b-green-bg); }
.acct-alert.success > svg { color: var(--b-green-fg); }
.acct-alert .sub { margin: 0; }
.acct-note.pad { padding: 10px 16px; }
.expect-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.btn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.btn-grid .btn { width: 100%; justify-content: center; }
.btn-grid .reverse-btn { background: transparent; }
.acct-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; border-radius: 12px; border: 1px dashed var(--btn-border); color: var(--text2); font-size: 12.5px; text-align: center; }
.acct-drop.disabled { opacity: 0.75; cursor: not-allowed; }
.payto { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--th-bg); border: 1px solid var(--row-line); font-size: 13px; }
.payto .sub { margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.payto.slim { padding: 0; background: transparent; border: 0; justify-content: flex-start; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.amount-box { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border-radius: 12px; background: var(--active-item-bg); border: 1px solid var(--gold-border); }
.amount-box strong { font-family: Outfit, sans-serif; font-size: 24px; font-weight: 500; color: var(--gold); }
.ded-row { display: flex; gap: 6px; align-items: center; }
.ded-row .narrow-2 { max-width: 96px; }
.x-btn { margin-left: 6px; border: 0; background: transparent; color: var(--text3); cursor: pointer; font-size: 14px; line-height: 1; }
.x-btn:hover { color: var(--red); }
.chip-btn { height: 24px; padding: 0 9px; border-radius: 12px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-size: 11.5px; cursor: pointer; }
.chip-btn:hover { border-color: var(--gold-border); color: var(--gold); }
.checklist { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text2); display: flex; flex-direction: column; gap: 2px; }
.acct-cols.wide-left { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.activity-list li.rev { color: var(--red); }
.inv-preview .inv-total.small { font-size: 12px; font-weight: 500; margin-top: 2px; }

/* Invoice Builder: form on the left, document viewer on the right */
.builder { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 10px; align-items: start; }
.builder-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.builder-right { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--row-line); overflow: hidden; min-width: 0; }
.viewer-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; color: var(--text2); background: var(--th-bg); border-bottom: 1px solid var(--row-line); }
.viewer-bar .grow { flex: 1; }
.zoom-pct { min-width: 46px; height: 24px; border-radius: 6px; border: 1px solid var(--btn-border); background: transparent; color: var(--text2); font: inherit; font-size: 11.5px; cursor: pointer; }
.viewer { background: #525659; padding: 12px; overflow: auto; max-height: 470px; display: flex; flex-direction: column; align-items: safe center; }
.viewer-page { width: 816px; flex: none; }
.viewer-page .inv-preview { min-height: 1000px; border-radius: 2px; padding: 48px 56px; font-size: 13px; }

/* the load page's Accounting tab */
.acct-tab { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.acct-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.acct-summary strong { font-family: Outfit, sans-serif; font-size: 17px; font-weight: 500; }
.acct-summary .op { color: var(--text3); font-size: 16px; padding: 0 2px; }
.acct-summary .all-done { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.cond-strip.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cond { position: relative; cursor: pointer; overflow: hidden; transition: border-color 0.15s ease, background 0.15s ease; }
.cond::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--box-color, var(--divider)); transition: height 0.15s ease; }
.cond.active { border-color: var(--gold-border); background: var(--active-item-bg); }
.cond.active::before { height: 4px; }
.cond:hover { border-color: var(--btn-border); }
.cond:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 2px; }
.cond.box-amber { --box-color: var(--b-amber-fg); }
.cond.box-violet { --box-color: var(--b-violet-fg); }
.cond.box-green { --box-color: var(--b-green-fg); }
.cond.box-red { --box-color: var(--b-red-fg); }
.cond.box-neutral { --box-color: var(--b-neutral-fg); }
.cond.claim { border-color: var(--b-red-bd); }
.cond.claim .c-icon { background: var(--b-red-bg); color: var(--b-red-fg); border-color: var(--b-red-bd); }
.cond .c-text small { font-weight: 400; font-size: 11px; }
.cond .c-text > span { display: inline-flex; align-items: center; gap: 3px; }
.acct-workspace { display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.empty-detail.slim { padding: 22px; flex: 0 0 auto; border: 1px dashed var(--row-line); border-radius: 14px; }

/* invoice split views */
.split.dragging { user-select: none; cursor: col-resize; }
.split .panel-head.small { flex-wrap: nowrap; }
.split-tools .select-wrap { flex: none; }
.split-body .clip { max-width: 140px; }
.split-body .clip.narrow { max-width: 90px; }
.split-body .col-check { padding-left: 12px !important; width: 34px; }
.split-body th.col-check { padding: 8px 6px 8px 12px !important; }
.split-body .money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.split-body th.money .th-btn { justify-content: flex-end; }
.split-body .c { text-align: center; }
.split-body th.c .th-btn { justify-content: center; }
.split-body .badge { padding: 3px 8px; font-size: 10.5px; }
.detail-banner { padding: 8px 16px 0; }
.detail-head .sub { margin-top: 1px; }
.detail-head h3 { display: flex; align-items: center; gap: 6px; }
.split-detail .acct-cols { grid-template-columns: minmax(0, 1fr); }
.split-detail .builder { grid-template-columns: minmax(0, 1fr); }
.split-detail .viewer { max-height: 340px; }
@container (min-width: 760px) {
  .split-detail .builder { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .split-detail .acct-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.split-detail { container-type: inline-size; }

/* Command Center */
.cc-page { gap: 10px; }
.cc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cc-controls .select-wrap select { height: 32px; font-size: 13px; border-radius: 9px; }
.cc-controls .date-in { width: 140px; height: 32px; }
.cc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cc-tiles .acct-tile { padding: 8px 14px; }
.cc-tiles .t-value { font-size: 22px; }
.cc-tile-link { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; color: var(--gold); font: inherit; font-size: 10.5px; letter-spacing: 0.04em; cursor: pointer; text-transform: none; }
.cc-tile-link:disabled { opacity: 0.5; cursor: not-allowed; }
.cc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: 10px; align-items: stretch; }
.cc-row .panel-head.small h2 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.cc-row .panel-head.small strong { font-family: Outfit, sans-serif; font-size: 18px; font-weight: 500; }
.cc-body { padding: 8px 14px 10px; }
.cc-aging.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cc-aging-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; margin-top: 8px; background: var(--b-neutral-bg); }
.cc-aging-bar .seg { display: block; height: 100%; background: var(--green); }
.cc-aging-bar .seg.late { background: var(--b-amber-fg); }
.cc-aging-bar .seg.very-late { background: var(--red); }
.cc-grid .panel-head.small { padding: 9px 16px; }
.cc-grid .panel-head.small h2 { font-size: 15px; }
.attn { display: flex; flex-direction: column; gap: 6px; }
.attn-group { border-radius: 12px; border: 1px solid var(--row-line); overflow: hidden; }
.attn-group.teal { border-left: 3px solid var(--b-teal-fg); }
.attn-group.red { border-left: 3px solid var(--red); }
.attn-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: var(--th-bg); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.attn-sign { width: 16px; color: var(--gold); font-weight: 700; }
.attn-table .btn-xs { height: 26px; padding: 0 9px; font-size: 11.5px; }
.seg-btns { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--th-bg); border: 1px solid var(--row-line); }
.seg-btns button { height: 24px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text2); font: inherit; font-size: 12px; cursor: pointer; }
.seg-btns button.on { background: var(--active-item-bg); color: var(--gold); font-weight: 600; }
.reg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 5px; border: 1.5px solid var(--text3); }
.reg-dot.done { background: var(--green); border-color: var(--green); }
.reg-dot.mailed { background: var(--b-amber-fg); border-color: var(--b-amber-fg); }
.reg-dot.ach { background: var(--b-teal-fg); border-color: var(--b-teal-fg); }
.reg-dot.void { border-color: var(--red); }
.data-table tr.voided td { opacity: 0.55; text-decoration: line-through; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1280px) {
  .cc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cond-strip.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .builder { grid-template-columns: minmax(0, 1fr); }
}

/* Links styled as buttons keep their button colors (the base sheet sets `.app a { color: inherit }`). */
.app a.btn-primary { color: var(--primary-fg); }
.app a.btn-ghost, .app a.btn-outline { color: var(--btn-fg); }
.app a.btn-teal { color: var(--b-teal-fg); }
.app a.btn-gold-outline { color: var(--gold); }

/* Delivered Loads grid: fits 1366px wide without sideways scrolling. */
.acct-table { min-width: 0; font-size: 12.5px; }
.acct-table td { padding: 6px 6px; }
.acct-table .th-btn { padding: 8px 6px; gap: 4px; }
.acct-table td:first-child, .acct-table th:first-child .th-btn { padding-left: 16px; }
.acct-table td:first-child { white-space: nowrap; }
.acct-table .clip { max-width: 118px; }
.acct-table .badge { padding: 2px 7px; font-size: 10px; gap: 3px; }
.acct-table .row-actions .btn { padding: 0 8px; gap: 4px; }
.acct-table .row-actions .btn-icon { padding: 0; }
.acct-table td { padding: 6px 5px; }
.acct-table .th-btn { padding: 8px 5px; }
.acct-table td:first-child, .acct-table th:first-child .th-btn { padding-left: 14px; }
.acct-table .clip { max-width: 104px; }
.acct-table .badge svg { width: 10px; height: 10px; }
.acct-table .badge-amber svg { display: none; }
.acct-table .row-actions .btn { padding: 0 7px; font-size: 11.5px; }
.acct-table .clip { max-width: 92px; }
.split { height: calc(100vh - 326px); min-height: 400px; }
.split-body .clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-body td { white-space: nowrap; }
.modal .kv-mini > .badge { justify-self: start; }
.acct-scroll { max-height: calc(100vh - 352px); }
.split-tools .search-box { min-width: 0; flex: 1 1 120px; }
.split-tools .select-wrap select { max-width: 120px; }
/* In the narrow split view, "Process Payment" (the amount and buttons) comes before the settlement details. */
.split-detail .acct-cols.pay-first > .acct-col:last-child { order: -1; }
@container (min-width: 760px) { .split-detail .acct-cols.pay-first > .acct-col:last-child { order: 0; } }

/* Prompts open from inside these panels; a backdrop-filter would make the panel the containing
   block for the fixed-position backdrop, so these panels skip the blur (the page behind them is a
   smooth gradient, so they look the same). */
.acct-tab.panel, .split > .panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
.acct-note.t-red { color: var(--red); }
.acct-note.t-green { color: var(--green); }
.acct-tab { padding: 8px 14px 10px; gap: 8px; }
.acct-tab .viewer { max-height: calc(100vh - 372px); min-height: 260px; }
.acct-tab .builder-left .acct-card { padding: 8px 12px; gap: 6px; }
.builder-mid { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.viewer { padding: 8px; }
.acct-tab .builder { grid-template-columns: minmax(280px, 330px) minmax(210px, 250px) minmax(0, 1fr); }
.acct-tab .viewer { max-height: calc(100vh - 360px); min-height: 240px; }
@media (max-width: 1280px) {
  .acct-tab .builder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .acct-tab .builder-right { grid-column: 1 / -1; }
}
.viewer-bar { white-space: nowrap; }
.viewer-bar .preview-note { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.acct-tab .viewer { max-height: calc(100vh - 468px); min-height: 200px; }
.cc-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.cc-grid .attn-table td { white-space: nowrap; }
.cc-grid .attn-table .clip { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.cc-grid .attn-table td, .cc-grid .attn-table th .th-btn { padding-left: 6px !important; padding-right: 6px !important; }
.cc-grid .attn-table td.money { text-align: right; }
.cc-grid .attn-table .clip { max-width: 100px; }
.acct-scroll { max-height: calc(100vh - 386px); }
.btn-grid .modal .btn { width: auto; }

/* Accounting drop zones (SlotDrop): proof of payment, claim documents. */
.acct-drop { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.acct-drop.over, .acct-drop:hover:not(.disabled) { border-color: var(--gold-border); background: var(--b-amber-bg); }
.acct-proof { height: 200px; border: 1px solid var(--btn-border); border-radius: 10px; overflow: hidden; background: #FFFFFF; display: flex; align-items: flex-start; justify-content: center; }
.acct-proof img { width: 100%; height: auto; object-fit: contain; object-position: top; }
.acct-proof-none { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #6B7774; font-size: 12px; }
.acct-proof-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.acct-proof-foot .muted { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-files { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.acct-files li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.acct-files a { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-files a:hover { color: var(--gold); }

/* Attachment picker rows and the stacked documents under the invoice preview. */
.attach-list .check { display: flex; align-items: center; gap: 6px; }
.attach-list .check .icon-btn.xs { width: 24px; height: 24px; }
a.btn.disabled { opacity: 0.5; cursor: not-allowed; }
.stack-doc { position: relative; background: #FFFFFF; box-shadow: 0 2px 10px rgba(0,0,0,0.3); margin-top: 14px; display: flex; flex-direction: column; }
.stack-doc img { width: 100%; height: auto; display: block; }
.stack-doc img + img { border-top: 1px solid #ECEFEE; }
.stack-label { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.75); color: #FFFFFF; padding: 2px 8px; border-radius: 3px; font-size: 11px; z-index: 1; }
.stack-open { position: absolute; top: 4px; right: 4px; display: flex; padding: 4px 6px; border-radius: 3px; background: rgba(0,0,0,0.55); color: #FFFFFF; z-index: 1; }
.stack-none { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #6B7774; font-size: 13px; }

/* ---------- Ada slide-out (ada.rs) ----------
   ada- = Ada. The slide-out header is the only bar (chip, History, Memory, New conversation); the
   messages scroll inside the slide-out above the composer. */

.slideout-body:has(> .ada) { overflow: hidden; }
.ada { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ada .clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ada-head { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.ada-head .icon-btn.xs { width: 28px; height: 28px; }
.ada-head .icon-btn.on { background: var(--active-item-bg); color: var(--gold); }
.ada-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ada-dot { width: 7px; height: 7px; border-radius: 4px; background: var(--b-violet-fg); box-shadow: 0 0 6px var(--b-violet-fg); }

/* --- the conversation --- */
.ada-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 10px; }
.ada-log > * { flex: none; }
.ada-log > .tracking-empty { flex: 1 0 auto; }
.ada-orb-big { width: 44px; height: 44px; border-radius: 22px; flex: none; }
.ada-empty { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 20px 8px; color: var(--text2); }
.ada-empty strong { font-family: Outfit, sans-serif; font-weight: 500; font-size: 16px; color: var(--text); }
.ada-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.ada-suggest {
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--b-violet-bd); background: var(--b-violet-bg); color: var(--b-violet-fg);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.ada-suggest:hover { border-color: var(--gold-line); }
.ada-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 100%; }
.ada-msg.you { align-self: flex-end; align-items: flex-end; max-width: 88%; }
.ada-who { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--text3); }
.ada-who time { font-weight: 500; letter-spacing: 0; }
.ada-text { max-width: 100%; font-size: 13px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.ada-msg.you .ada-text { padding: 8px 11px; border-radius: 14px 14px 4px 14px; background: var(--active-item-bg); border: 1px solid var(--gold-border); }
.ada-msg.ada .ada-text { padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: var(--sub-panel); border: 1px solid var(--panel-border); }
.ada-text.plain { white-space: pre-wrap; }
.ada-text p { margin: 0; }
.ada-text > * + * { margin-top: 6px; }
.ada-text ul, .ada-text ol { margin-bottom: 0; padding-left: 18px; }
.ada-text li + li { margin-top: 2px; }
.ada-text strong { font-weight: 700; }
.ada-table { max-width: 100%; overflow-x: auto; }
.ada-table table { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.ada-table th { text-align: left; font-weight: 600; color: var(--text2); border-bottom: 1px solid var(--panel-border); }
.ada-table th, .ada-table td { padding: 4px 10px 4px 0; }
.ada-table tr + tr td { border-top: 1px solid var(--row-line); }
.ada-h { font-weight: 700; }
.ada-tools { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text3); }
.ada-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ada-links .btn { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.ada-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
.ada-error, .ada-notice {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 10px; border-radius: 10px; font-size: 12.5px;
}
.ada-error { border: 1px solid var(--b-red-bd); background: var(--b-red-bg); color: var(--b-red-fg); }
.ada-notice { border: 1px solid var(--b-amber-bd); background: var(--b-amber-bg); color: var(--b-amber-fg); }
.ada-notice > svg { flex: none; }
.ada-notice > span { flex: 1 1 180px; color: var(--text); }
.ada-error .btn, .ada-notice .btn { height: 26px; padding: 0 9px; font-size: 12px; }
.ada-note { align-self: center; max-width: 92%; padding: 4px 10px; border-radius: 999px; background: var(--b-dim-bg); color: var(--text3); font-size: 11.5px; text-align: center; }

/* --- confirmation cards --- */
.ada-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--gold-border); background: var(--active-item-bg); }
.ada-card.confirmed { border-color: var(--b-green-bd); background: var(--b-green-bg); }
.ada-card.declined { border-color: var(--divider); background: var(--sub-panel); }
.ada-card.failed { border-color: var(--b-red-bd); background: var(--b-red-bg); }
.ada-card-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.ada-card.declined .ada-card-title, .ada-card.declined .ada-card-line { color: var(--text3); }
.ada-card-line { font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.ada-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.ada-card-actions .btn { height: 30px; }
.ada-card-result { font-size: 12.5px; font-weight: 600; color: var(--text2); }
.ada-card.confirmed .ada-card-result { color: var(--b-green-fg); }
.ada-card.failed .ada-card-result { color: var(--b-red-fg); }
/* --- composer --- */
.ada-compose { flex: none; display: flex; flex-direction: column; gap: 5px; padding: 6px 10px 10px; border-top: 1px solid var(--row-line); }
.ada-compose.off { opacity: 0.6; }
.ada-on { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text3); }
.ada-cap { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--b-amber-bg); color: var(--b-amber-fg); font-weight: 600; }
.ada-input { display: flex; align-items: flex-end; gap: 6px; padding: 6px 6px 6px 10px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--input); }
.ada-input:focus-within { border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--active-item-bg); }
.ada-input textarea {
  flex: 1; min-width: 0; resize: none; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px;
  line-height: 1.4; outline: none; max-height: 120px;
}
.ada-input textarea::placeholder { color: var(--text3); }
.ada-input .ada-send { flex: none; height: 30px; padding: 0 10px; gap: 5px; border-radius: 8px; }

/* --- History and Memory --- */
.ada-list { gap: 0; }
.ada-list-title { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
.ada-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 8px; border-radius: 10px; }
.ada-row + .ada-row { border-top: 1px solid var(--row-line); border-radius: 0; }
.ada-row.current { background: var(--active-item-bg); }
.ada-row-open {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 2px 0; border: 0;
  background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.ada-row-open > span { max-width: 100%; }
.ada-row-open:hover > span:first-child { color: var(--gold); }
.ada-fact { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.ada-row .mx-muted { flex: none; }
.ada-list-foot { margin-top: 12px; }
.ada-seg { display: flex; padding: 2px; border-radius: 8px; border: 1px solid var(--row-line); background: var(--th-bg); text-transform: none; letter-spacing: 0; }
.ada-seg button { height: 22px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--text2); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.ada-seg button.on { background: var(--active-item-bg); color: var(--gold); }

/* Your agent's name (My AI) */
.ada-name-box { display: grid; gap: 6px; padding: 10px 12px 12px; border-bottom: 1px solid var(--row-line); }
.ada-name-row { display: flex; gap: 8px; align-items: center; }
.ada-name-row .field { flex: 1; min-width: 0; height: 32px; }

/* --- the agent (agent-platform.md §4): plan, approvals, Approve all, card tags --- */
.ada-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ada-card-tag {
  flex: none; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--b-amber-bd); background: var(--b-amber-bg); color: var(--b-amber-fg);
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-transform: none;
}
.ada-card.approval { border-color: var(--b-amber-bd); background: var(--b-amber-bg); }
.ada-card.approval .ada-card-result { color: var(--b-amber-fg); }
.ada-todo { display: flex; flex-direction: column; gap: 3px; padding: 8px 11px; border-radius: 12px; border: 1px solid var(--b-violet-bd); background: var(--b-violet-bg); }
.ada-todo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--b-violet-fg); }
.ada-todo-count { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text3); }
.ada-todo-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.35; color: var(--text); }
.ada-todo-item.done { color: var(--text3); }
.ada-todo-item.done > span:last-child { text-decoration: line-through; text-decoration-color: var(--text3); }
.ada-todo-box {
  flex: none; width: 15px; height: 15px; margin-top: 1px; border-radius: 4px; border: 1.5px solid var(--b-violet-fg);
  display: inline-flex; align-items: center; justify-content: center; color: var(--b-violet-fg);
}
.ada-todo-item.done .ada-todo-box { background: var(--b-violet-fg); color: var(--panel); }
.ada-approval {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--b-amber-bd); background: var(--b-amber-bg);
  color: var(--b-amber-fg); font-size: 12.5px;
}
.ada-approval > span { flex: 1 1 auto; min-width: 0; color: var(--text); }
.ada-approval .btn { height: 24px; padding: 0 8px; font-size: 12px; }
.ada-ask { border-color: var(--gold-border) !important; }
.ada-all {
  flex: none; display: flex; align-items: center; gap: 6px; margin: 0 10px; padding: 6px 8px 6px 11px; border-radius: 10px 10px 0 0;
  border: 1px solid var(--gold-border); border-bottom: 0; background: var(--active-item-bg); font-size: 12px; font-weight: 600; color: var(--gold);
}
.ada-all .btn { height: 26px; }
.ada-mine { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ada-mine-seg { align-self: flex-start; margin: 10px 12px 0; }
.ada-mine > :last-child { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* The rail's orb pulses while Ada works with her panel closed. */
.orb.working { animation: ada-working 1.6s ease-in-out infinite; }
@keyframes ada-working { 0%, 100% { box-shadow: var(--orb-glow); transform: scale(1); } 50% { box-shadow: 0 0 18px var(--b-violet-fg); transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .orb.working { animation: none; outline: 2px solid var(--b-violet-fg); outline-offset: 2px; } }

/* ---------- ag- = Ada's pieces on other screens (crate::agent::ui) ---------- */
.ag-job-form { display: flex; flex-direction: column; gap: 8px; }
.ag-job-form.compact { gap: 6px; }
.ag-instruction { width: 100%; min-height: 64px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.4; padding: 7px 9px; }
.ag-when { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-when .af-field { flex: 1 1 110px; }
.ag-when .af-field.ag-grow { flex: 2 1 200px; }
.ag-when .field { height: 32px; }
.ag-on { align-self: flex-start; }
.ag-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ag-danger { color: var(--b-red-fg); }
.ag-slide { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; overflow-y: auto; min-height: 0; }
.ag-last { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 10px; background: var(--sub-panel); border: 1px solid var(--panel-border); font-size: 12px; }
.ag-last-sum { flex: 1 1 100%; color: var(--text2); overflow-wrap: anywhere; }
.ag-hint { margin: 0; }
.ag-agent-row td { background: var(--sub-panel); font-size: 12.5px; }
.ag-agent-bar { display: flex; align-items: center; gap: 10px; }
.ag-agent-acts { margin-left: auto; display: flex; gap: 6px; white-space: nowrap; }
.ag-warn { color: var(--b-amber-fg); font-weight: 600; }
.ag-empty-row { font-size: 12.5px; }
.ag-off { margin-left: 6px; }
.ag-mine { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.ag-policy .ac-area-head span.muted { text-align: right; }
.ag-policy-row { display: flex; align-items: center; gap: 10px; padding: 4px 14px; }
.ag-policy-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; color: var(--text); }
.ag-policy-text .sub { font-size: 11px; color: var(--text3); }
.ag-policy-pick { flex: none; width: 150px; }
.ag-policy-pick select { width: 100%; height: 30px; font-size: 12.5px; }
.ag-policy-foot { display: flex; align-items: center; gap: 6px; padding: 6px 14px 2px; }
.ag-reset { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--gold-border); background: var(--active-item-bg); }
.ag-rounds { display: inline-flex; align-items: center; gap: 6px; }
.ag-rounds .field { width: 72px; height: 30px; }
.ada-roles-inline { display: flex; flex-direction: column; gap: 8px; }
.ada-roles-inline > .btn { align-self: flex-start; }
.ada-roles-title { font-weight: 600; font-size: 13px; }
/* A job's instruction line fills the Name cell without widening the table (an absolutely placed
   line adds nothing to the column's width). */
.ag-job-sub { position: relative; height: 1.4em; }
.ag-job-sub > .clip { position: absolute; left: 0; right: 0; top: 0; }

/* Admin and system screens: User Management, My Profile, System Settings, API Keys, System Status,
   Tickets and the Submit a Ticket slide-out. Built on the tokens in flextms.css; sized so each
   screen fits a 1366x768 window without page scrolling. */

/* ---------- shared bits ---------- */
.red { color: var(--red); }
.amber { color: var(--b-amber-fg); }
.teal { color: var(--b-teal-fg); }
.violet { color: var(--b-violet-fg); }
.small-note { font-size: 11.5px; }
.with-icon { display: inline-flex; align-items: center; gap: 5px; }
.dimmed { opacity: 0.55; }
.th-btn.static.left { justify-content: flex-start; }
.profile-title { margin: 0; font-family: Outfit, sans-serif; font-size: 26px; font-weight: 400; }
.head-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.head-note { font-family: Inter, sans-serif; font-size: 12px; font-weight: 400; }
.with-badge { display: flex; align-items: center; gap: 12px; }
.with-badge .badge { font-family: Inter, sans-serif; font-size: 10.5px; }
.ok-note { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 12.5px; font-weight: 600; margin: 0; }
.ok-note.small { font-size: 12px; margin-top: 6px; }
.warn-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--b-amber-bg); color: var(--b-amber-fg); border: 1px solid var(--b-amber-bd); font-size: 13px; }
.info-note { padding: 10px 12px; border-radius: 10px; background: var(--b-teal-bg); color: var(--b-teal-fg); border: 1px solid var(--b-teal-bd); font-size: 12.5px; }
.set-flag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; white-space: nowrap; line-height: 1.3; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: var(--b-neutral-bg); color: var(--b-neutral-fg); border: 1px solid var(--b-neutral-bd); }
.set-flag.on { background: var(--b-green-bg); color: var(--b-green-fg); border-color: var(--b-green-bd); }
.check.tiny { font-size: 11.5px; gap: 6px; }
.check.tiny input { width: 13px; height: 13px; }
.field.area { height: auto; min-height: 30px; padding: 6px 9px; line-height: 1.35; resize: vertical; font-family: inherit; }
.card-body { padding: 10px 18px 12px; font-size: 13px; }
.card-kv { padding: 10px 18px 12px; font-size: 13px; }
.card-error { padding: 8px 18px 0; }
.empty.small { padding: 22px 16px; gap: 6px; text-align: center; }
.modal.wide { max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; }
.modal .af-field input.field, .modal .af-field select { height: 34px; }

/* on/off switch */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text2); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 32px; height: 18px; border-radius: 9px; background: var(--b-neutral-bg); border: 1px solid var(--input-border); transition: background 0.15s; }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 6px; background: var(--text3); transition: transform 0.15s, background 0.15s; }
.switch input:checked + .switch-track { background: var(--b-green-bg); border-color: var(--b-green-bd); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(14px); background: var(--green); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--gold-line); outline-offset: 2px; }
.switch.disabled { cursor: default; }
.switch.disabled .switch-track { opacity: 0.75; }
.switch-label:empty { display: none; }

/* stacked label + input grids (settings, modals) */
.af-grid { display: grid; gap: 6px 10px; padding: 10px 16px 12px; }
.af-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
.af-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.af-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.af-grid.flush { padding: 0; }
.af-grid .span-2 { grid-column: span 2; }
.af-grid .span-3 { grid-column: span 3; }
.af-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.af-field > span, .af-label { font-size: 11px; color: var(--text3); display: flex; align-items: center; }
.af-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; min-width: 0; }
.af-sub { margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.af-note { margin: 0; align-self: center; font-size: 11.5px; color: var(--text3); line-height: 1.35; }

/* signature preview (48TMS used Dancing Script) */
.sig-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--input-border); background: var(--th-bg); min-width: 0; }
.sig-preview.paper { align-items: flex-start; padding: 2px 10px 4px; background: transparent; border: 0; border-bottom: 1px solid var(--input-border); border-radius: 0; }
.sig-script { font-family: "Dancing Script", "Snell Roundhand", "Segoe Script", cursive; font-size: 24px; line-height: 1.15; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sig-title { font-size: 11.5px; color: var(--text3); }

/* ---------- User Management ---------- */
.users-table td { padding: 10px 10px; vertical-align: middle; }
.users-table td:first-child, .users-table th:first-child { padding-left: 22px; }
.user-page { display: flex; flex-direction: column; gap: 12px; }
.user-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
.user-card .panel-head.small { padding: 8px 20px; }
.user-card .info-grid { padding: 6px 20px 12px; }
.user-card .info-col { gap: 0; }
.user-card .kv { row-gap: 3px; }
.user-card .kv-value { min-height: 26px; }
.user-card .field { height: 28px; }
.user-card .field-select select { height: 28px; }
.u-section.first { border-top: 0; padding-top: 4px; }
.u-section { padding-top: 7px; margin-top: 7px; }
.u-section-title { margin-bottom: 4px; font-size: 10.5px; letter-spacing: 0.08em; color: var(--text3); }
.lock-note { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--b-amber-fg); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11px; }
.roles { display: flex; flex-direction: column; gap: 5px; }
.role-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.sig-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 10px; align-items: center; }
.notes-text { margin: 0; font-size: 12.5px; white-space: pre-wrap; max-height: 54px; overflow: hidden; }
.side-card .panel-head.small { padding: 8px 18px; }
.help-body { padding: 8px 18px 14px; font-size: 12.5px; }
.help-body h3 { margin: 8px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--gold); }
.help-body p { margin: 0; color: var(--text2); line-height: 1.4; }
.quick-info { padding: 14px 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.avatar.big { width: 64px; height: 64px; border-radius: 32px; font-size: 26px; margin-bottom: 4px; box-shadow: var(--logo-glow); }
.qi-name { font-family: Outfit, sans-serif; font-size: 17px; font-weight: 500; }
.qi-email { font-size: 12.5px; color: var(--text3); text-decoration: none; word-break: break-all; }
.qi-list { width: 100%; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--row-line); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; font-size: 12.5px; text-align: left; }
.qi-list dt { color: var(--text3); }
.qi-list dd { margin: 0; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- My Profile ---------- */
.profile-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 0.95fr) minmax(0, 1.3fr); gap: 12px; align-items: start; }
.profile-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.profile-col .panel-head.small { padding: 8px 18px; }
.profile-col .panel-head.small h2 { font-size: 15px; }
.profile-col .kv { grid-template-columns: 34% minmax(0, 1fr); }
.can-do { margin: 8px 0 2px; font-weight: 600; font-size: 12.5px; }
.can-do-list { margin: 0; padding-left: 18px; color: var(--text2); font-size: 12.5px; }
.tmpl { display: flex; flex-direction: column; gap: 7px; }
.tmpl-item strong { font-size: 12px; }
.tmpl-item p { margin: 2px 0 0; font-size: 12.5px; color: var(--text2); }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pre { white-space: pre-line; }
.hint-line { margin: 2px 0 0; padding: 7px 10px; border-radius: 8px; background: var(--th-bg); font-size: 11.5px; color: var(--text3); }
.comm-head { background: linear-gradient(90deg, var(--b-green-bg), transparent); }
.comm-head h2 svg { color: var(--green); }
.wallet { padding: 12px 18px 8px; text-align: center; }
.wallet .muted { font-size: 12px; }
.wallet-amount { font-family: Outfit, sans-serif; font-size: 30px; font-weight: 500; color: var(--green); margin: 0 0 8px; }
.requested { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--text2); }
.comm-lines, .comm-setup { margin: 0 18px; padding: 8px 0; border-top: 1px solid var(--row-line); font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.comm-line { display: flex; justify-content: space-between; gap: 8px; }
.comm-setup-title { display: flex; align-items: center; gap: 5px; font-weight: 600; margin-bottom: 2px; }
.comm-setup-title svg { color: var(--gold); }
.mini-tabs { margin: 4px 18px 0; }
.mini-tabs .tab { height: 32px; padding: 0 10px; font-size: 12.5px; }
.mini-scroll { max-height: 182px; overflow-y: auto; margin: 0 2px 8px; }
.pf-table { font-size: 11.5px; }
.pf-table th { padding: 6px 5px; text-align: left; font-size: 11px; white-space: nowrap; position: sticky; top: 0; background: var(--panel-solid); z-index: 1; }
.pf-table td { padding: 5px 5px; vertical-align: middle; white-space: nowrap; }
.pf-table th:first-child, .pf-table td:first-child { padding-left: 12px; }
.pf-table .badge.small { padding: 2px 7px; font-size: 10px; letter-spacing: 0.02em; }
.pf-table .num { text-align: right; }
.comm-card .info-note { margin: 8px 18px 12px; }

/* ---------- System Settings ---------- */
.settings-page { display: flex; flex-direction: column; gap: 8px; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.08fr) minmax(0, 1.08fr); gap: 12px; align-items: start; }
.settings-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.settings-col .panel-head.small { padding: 6px 14px; }
.settings-col .panel-head.small h2 { font-size: 14.5px; }
.settings-col .af-grid { gap: 4px 8px; padding: 7px 14px 10px; }
.settings-col .af-field > span { font-size: 10.5px; min-height: 15px; white-space: nowrap; }
.settings-col .set-flag { padding: 0 5px; font-size: 9.5px; margin-left: 4px; }
.settings-col .field, .settings-col .field-select select { height: 26px; font-size: 12.5px; padding-left: 8px; }
.settings-col .field-select select { padding-right: 24px; }
.settings-col .field.area { height: auto; min-height: 40px; padding: 4px 8px; }
.settings-col .af-sub { margin-top: 2px; }
.settings-col .check.tiny { font-size: 10.5px; }
.logo-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px 0; }
.logo-box { flex: none; width: 96px; height: 44px; border-radius: 10px; border: 1px solid var(--input-border); background: #FFFFFF; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-box .muted { font-size: 11px; color: #6B7A77; }
.logo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.test-btn { justify-self: start; }

/* ---------- API Keys ---------- */
.key-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.key-card { display: flex; flex-direction: column; }
.key-card-head { display: flex; align-items: center; gap: 7px; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--row-line); }
.key-card-head h2 { margin: 0; flex: 1; min-width: 0; font-family: Outfit, sans-serif; font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key-icon { flex: none; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--active-item-bg); color: var(--gold); }
.key-list { list-style: none; margin: 0; padding: 6px 12px 8px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.key-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
.key-label { font-weight: 600; flex: none; }
.key-desc { flex: 1; min-width: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key-updated { padding: 0 12px 8px; font-size: 11px; }
.key-edit { height: 26px; padding: 0 10px; }
.test-left { margin-right: auto; }
.keys-scroll { max-height: calc(100vh - 490px); min-height: 130px; overflow-y: auto; }
.keys-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-solid); }
.keys-table td { padding: 8px 10px; vertical-align: middle; font-size: 12.5px; }
.keys-table td:first-child, .keys-table th:first-child { padding-left: 18px; }
.perm-cell { max-width: 260px; font-size: 11.5px; color: var(--text2); }
.col-actions { text-align: right; padding-right: 16px !important; }
.key-once { display: flex; gap: 8px; }
.key-once input { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--gold); }

/* ---------- System Status ---------- */
.tab-body { display: flex; flex-direction: column; gap: 12px; }
.health-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.health-card { padding: 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 12.5px; }
.health-card h2 { margin: 4px 0 2px; font-family: Outfit, sans-serif; font-size: 16px; font-weight: 500; }
.h-icon { width: 38px; height: 38px; border-radius: 19px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.h-icon.ok { background: var(--b-green-bg); color: var(--b-green-fg); }
.h-icon.bad { background: var(--b-red-bg); color: var(--b-red-fg); }
.h-icon.warn { background: var(--b-amber-bg); color: var(--b-amber-fg); }
.h-icon.unknown { background: var(--b-neutral-bg); color: var(--b-neutral-fg); }
.h-main { font-weight: 700; font-size: 14px; }
.h-main.green, .h-main.ok { color: var(--green); }
.h-main.red, .h-main.bad { color: var(--red); }
.h-main.warn { color: var(--b-amber-fg); }
/* sys- prefix: the dashboard's .meter is a different widget (stylesheets share one namespace). */
.sys-meter { width: 80%; height: 6px; border-radius: 3px; background: var(--b-neutral-bg); overflow: hidden; margin: 4px 0; }
.sys-meter-fill { display: block; height: 100%; border-radius: 3px; background: var(--green); }
.sys-meter-fill.warn { background: var(--b-amber-fg); }
.sys-meter-fill.bad { background: var(--red); }
.honest-head { display: flex; gap: 14px; align-items: flex-start; }
.honest-head h2 { margin: 2px 0 4px; font-family: Outfit, sans-serif; font-size: 17px; font-weight: 500; }
.honest-head p { margin: 0; }
.honest > p { margin: 12px 0 0 52px; font-size: 13px; color: var(--text2); }
.filters-bar { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.5fr auto; gap: 8px; padding: 10px 14px; align-items: center; }
.filters-bar .select-wrap select { height: 32px; border-radius: 9px; font-size: 13px; }
.filters-bar .field { height: 32px; }
.search-row { display: flex; gap: 6px; }
.activity-scroll { max-height: calc(100vh - 362px); min-height: 200px; overflow-y: auto; }
.log-table { font-size: 12.5px; }
.log-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-solid); }
.log-table td { padding: 7px 10px; vertical-align: middle; }
.log-table td:first-child, .log-table th:first-child { padding-left: 18px; }
.w-time { width: 92px; }
.w-user { width: 170px; }
.w-action { width: 170px; }
.time-cell .sub { font-size: 11px; }
.details-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.log-table td.details-cell { display: table-cell; }
.details-cell > * + * { margin-left: 6px; }
.entity { font-size: 11.5px; }
.agent-req { font-style: italic; }
.agent-badge { margin-left: 6px; }
.orb.mini { width: 10px; height: 10px; border-radius: 5px; display: inline-block; }
.empty-cell { padding: 26px !important; text-align: center; color: var(--text3); }
.empty-cell svg { vertical-align: -3px; margin-right: 6px; }
.load-more { display: flex; justify-content: center; padding: 8px; min-height: 16px; }
.stat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sys-stat { padding: 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sys-stat strong { font-family: Outfit, sans-serif; font-size: 28px; font-weight: 500; line-height: 1.1; }
.sys-stat strong.green { color: var(--green); }
.sys-stat strong.red { color: var(--red); }
.sys-stat strong.amber { color: var(--b-amber-fg); }
.errors-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.errors-grid .panel-head h2 .badge { margin-left: 4px; }
.errors-scroll { max-height: calc(100vh - 380px); min-height: 120px; overflow-y: auto; }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.report-card .card-body p { margin: 0 0 8px; }
.report-actions { display: flex; gap: 6px; }

/* ---------- Tickets ---------- */
.summary-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 9px 18px; font-size: 13px; }
.summary-bar > span { display: inline-flex; align-items: center; gap: 6px; }
.toolbar.compact .search-box { height: 38px; }
.toolbar.compact .select-wrap select { height: 38px; }
.tickets-split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 12px; align-items: stretch; }
.ticket-list, .ticket-detail { display: flex; flex-direction: column; height: calc(100vh - 322px); min-height: 320px; }
.ticket-list .panel-head.small, .ticket-detail .panel-head.small { padding: 8px 16px; flex: none; }
.ticket-rows { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.ticket-row { width: 100%; display: flex; flex-direction: column; gap: 5px; padding: 9px 16px; border: 0; border-bottom: 1px solid var(--row-line); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ticket-row:hover { background: var(--row-hover); }
.ticket-row.selected { background: var(--sel-row); box-shadow: inset 3px 0 0 var(--gold-line); }
.tr-top { display: flex; gap: 8px; align-items: baseline; min-width: 0; font-size: 13px; }
.tr-top strong { color: var(--gold); flex: none; }
.tr-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-bottom { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11.5px; }
.ticket-detail > .empty { flex: 1; justify-content: center; }
.ticket-head h2 { font-size: 15px !important; min-width: 0; }
.ticket-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.ticket-meta { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; font-size: 12.5px; }
.ticket-meta dt { color: var(--text3); }
.ticket-meta dd { margin: 0; }
.ticket-block { display: flex; flex-direction: column; gap: 4px; }
.block-label { font-size: 12px; }
.ticket-desc { margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--th-bg); border: 1px solid var(--row-line); white-space: pre-wrap; line-height: 1.45; }
.attach-frame { display: block; max-width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--row-line); background: #000; }
.attach-frame img { display: block; max-width: 100%; max-height: 240px; margin: 0 auto; }
.notes-head { display: flex; align-items: center; justify-content: space-between; }
.note-form { display: flex; flex-direction: column; gap: 6px; }
.note-actions { display: flex; justify-content: flex-end; gap: 6px; }
.tk-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tk-notes li { padding: 8px 10px; border-radius: 10px; background: var(--th-bg); border-left: 3px solid var(--gold-border); }
.note-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; }
.tk-notes p { margin: 3px 0 0; white-space: pre-wrap; }
.ticket-actions { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-top: 1px solid var(--row-line); }
.amber-btn { color: var(--b-amber-fg); border-color: var(--b-amber-bd); background: var(--b-amber-bg); }

/* Submit a Ticket slide-out */
.ticket-form { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; }
.tf-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.green-chip { background: var(--b-green-bg); color: var(--b-green-fg); border-color: var(--b-green-bd); }
.dropzone { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px; border-radius: 10px; border: 1.5px dashed var(--input-border); background: var(--th-bg); color: var(--text2); font: inherit; font-size: 12px; cursor: pointer; }
.dropzone:hover, .dropzone.dragging { border-color: var(--gold-line); background: var(--active-item-bg); color: var(--text); }
.dropzone svg { color: var(--gold); }
.attach-chosen { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input); }
.attach-chosen svg { color: var(--gold); flex: none; }
.attach-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-sent { flex: 1; }
.sent-actions { display: flex; gap: 8px; margin-top: 6px; }

/* ---------- narrower windows ---------- */
@media (max-width: 1280px) {
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-col:last-child { grid-column: span 2; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-col:last-child { grid-column: span 2; }
  .key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-grid, .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .user-layout, .tickets-split, .errors-grid, .report-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-grid, .profile-grid, .key-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-col:last-child, .profile-col:last-child { grid-column: auto; }
  .filters-bar { grid-template-columns: 1fr 1fr; }
  .ticket-list, .ticket-detail { height: auto; }
}

/* My Profile: phone takes the room, extension stays short. */
.card-kv .kv-value.pair { display: grid; grid-template-columns: minmax(0, 1fr) 60px; gap: 6px; }

/* Errors tab: two tables side by side, so give the message the room. */
.errors-grid .w-time { width: 74px; }
.errors-grid .w-action { width: 118px; }
.errors-grid .w-user { width: 96px; }
.errors-grid .log-table td { padding: 6px 8px; }
.errors-grid .log-table td:first-child, .errors-grid .log-table th:first-child { padding-left: 14px; }

/* AI connections (agent-platform.md §2): the AI Providers tab's connections and who-uses-what,
   the add-connection flows, the model search, the ChatGPT sign-in box and Ada's "My AI".
   Prefix: aic-. Theme colors come from the variables in flextms.css. */

/* Bar and tab */
.aic-add { gap: 4px; white-space: nowrap; }
/* One bar at 1366: the Add button keeps only its + (its name is its tooltip), the switch tightens. */
@media (max-width: 1700px) { .aic-add-text { display: none; } }
@media (max-width: 1500px) { .au-bar .au-seg-btn { padding: 0 9px; } }
/* On this tab the scheduler chip keeps its name only (the check time shows on the other tabs). */
.au-bar:has(.au-seg) .au-sched-at { display: none; }
/* With a slide-out open the bar is narrow: the slide-out is where adding happens, and the
   scheduler chip (shown on the other tabs) gives way on this one. */
.au-side-open .aic-add { display: none; }
.au-side-open:has(.au-seg) .au-sched { display: none; }
.au-side-open:has(.au-seg) .au-tabs .tab { padding: 0 7px; }
.au-side-open .au-seg-btn { padding: 0 7px; font-size: 12px; }
.aic-table td { vertical-align: middle; }
.aic-table .sub { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-acct { max-width: 240px; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--text2); }
.aic-c-test { white-space: nowrap; }
.aic-c-test .au-test { margin-left: 6px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.aic-none td { padding: 6px 12px; font-size: 12.5px; }
.aic-notset { font-style: italic; }
.aic-first { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.aic-backups { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text2); }
.aic-backups li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.aic-foot { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 8px 16px; border-top: 1px solid var(--row-line); font-size: 12.5px; }
.aic-allow { gap: 6px; font-weight: 600; color: var(--text); }
.aic-allow input { accent-color: var(--check); }
.aic-empty-tab { min-height: 260px; max-width: 520px; margin: 0 auto; }

/* Slide-out: choices and forms */
.aic-add-pane { gap: 10px; }
.aic-h { margin: 2px 0 0; font-family: Outfit, sans-serif; font-size: 17px; font-weight: 500; color: var(--text); }
.aic-p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text2); }
.aic-back { display: inline-flex; align-items: center; gap: 4px; color: var(--text2); }
.aic-back:hover { color: var(--gold); }
.aic-choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--row-line);
  background: var(--sub-panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.aic-choice:hover, .aic-choice:focus-visible { border-color: var(--gold-border); background: var(--active-item-bg); }
.aic-choice > span:nth-child(2) { flex: 1; min-width: 0; }
.aic-choice strong { display: block; font-size: 14px; }
.aic-choice .sub { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text2); }
.aic-choice-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px;
  background: var(--b-teal-bg); color: var(--b-teal-fg); border: 1px solid var(--b-teal-bd); }
.aic-found { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--b-teal-bg); border: 1px solid var(--b-teal-bd); color: var(--b-teal-fg); }
.aic-found > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aic-found strong { color: var(--text); font-size: 13px; }
.aic-found .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.aic-ports { display: flex; flex-direction: column; gap: 4px; }
.aic-port { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--row-line); font-size: 12.5px; }
.aic-port.ok { border-color: var(--b-teal-bd); }
.aic-detail { gap: 10px; }
.aic-sec-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.aic-sec-row .au-sec { margin-top: 0; }
.aic-danger { color: var(--red); }
.aic-strip-note { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* The ChatGPT sign-in box */
.aic-signin { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--gold-border); background: var(--active-item-bg); }
.aic-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--text2); }
.aic-steps li > span:first-child { display: block; margin-bottom: 5px; }
.aic-open { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-code-row { display: inline-flex; align-items: center; gap: 8px; }
.aic-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 24px; letter-spacing: 0.12em; padding: 4px 12px; border-radius: 10px;
  background: var(--panel-side); border: 1px solid var(--row-line); color: var(--gold); user-select: all; }
.aic-copied { font-size: 12px; }
.aic-wait { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--text2); }
.aic-done { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--b-green-bg); border: 1px solid var(--b-green-bd, var(--row-line)); color: var(--b-green-fg); }
.aic-done > div { display: flex; flex-direction: column; gap: 2px; }
.aic-done strong { color: var(--text); }

/* Who uses what: the list being edited */
.aic-purpose { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 14px 12px; gap: 6px; font-size: 13px; }
.aic-steps-edit { flex: none; display: flex; flex-direction: column; gap: 6px; }
.aic-step { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border-radius: 12px; border: 1px solid var(--row-line); background: var(--sub-panel); }
.aic-step:first-of-type { border-color: var(--gold-border); }
.aic-pos { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
.aic-step:first-of-type .aic-pos { color: var(--gold); }
.aic-step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.aic-step-main strong { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.aic-step-main .muted { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-effort { flex: none; width: 112px; }
.aic-effort select { width: 100%; height: 28px; font-size: 12px; padding: 0 24px 0 8px; }
.aic-effort .select-caret { top: 8px; right: 8px; }
.aic-step-btns { flex: none; display: inline-flex; gap: 2px; }
.aic-search-sec { margin-top: 4px; }

/* The model search */
.aic-search { flex: 1 1 auto; min-height: 220px; display: flex; flex-direction: column; gap: 6px; }
.aic-detail .aic-search { min-height: 260px; max-height: 420px; }
.aic-search-bar { display: flex; align-items: center; gap: 8px; }
.aic-search-box { flex: 1; min-width: 0; }
.aic-search-box input { width: 100%; }
.aic-conn-pick { flex: none; max-width: 46%; }
.aic-conn-pick select { height: 32px; font-size: 12.5px; padding: 0 26px 0 10px; border-radius: 9px; max-width: 100%; }
.aic-conn-pick .select-caret { top: 10px; right: 9px; }
.aic-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.aic-chip { height: 26px; padding: 0 10px; border-radius: 13px; border: 1px solid var(--row-line); background: transparent; color: var(--text2); font: inherit; font-size: 12px; cursor: pointer; }
.aic-chip.on { background: var(--active-item-bg); border-color: var(--gold-border); color: var(--gold); font-weight: 600; }
.aic-count { font-size: 11.5px; white-space: nowrap; }
.aic-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--row-line); }
.aic-model { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--row-line); }
.aic-model.taken { opacity: 0.6; }
.aic-model-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aic-model-main strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-model-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-model-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11.5px; color: var(--text2); }
.aic-model-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.aic-empty { padding: 12px 4px; margin: 0; font-size: 12.5px; }
.aic-flags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.aic-flag { padding: 0 7px; height: 18px; line-height: 18px; border-radius: 9px; font-size: 10.5px; font-weight: 600; background: var(--b-teal-bg); color: var(--b-teal-fg); border: 1px solid var(--b-teal-bd); }
.aic-flag.free { background: var(--b-violet-bg); color: var(--b-violet-fg); border-color: var(--b-violet-bd); }
.aic-warn { font-size: 11px; font-weight: 600; color: var(--b-amber-fg); }

/* Ada's My AI */
.ada-myai { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.aic-my { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px 16px; font-size: 13px; }
.aic-my .aic-signin { padding: 10px 12px; }
.aic-my .aic-code { font-size: 20px; }

/* A narrow page (a slide-out open): keep the table to what matters */
.au-narrow .aic-table .sub { max-width: 200px; }
@media (max-width: 1400px) {
  .aic-foot > .muted { display: none; }
}
.au-narrow .aic-foot > .muted { display: none; }

/* A rail tool (Ada, the Mixer) narrows the page without the page knowing: the tables answer to
   their own width. */
.table-scroll:has(> .aic-table) { container-type: inline-size; }
@container (max-width: 820px) {
  .aic-table .au-wide, .aic-table .sub { display: none; }
}

/* "Use for…" on a connection's own model list */
.aic-use-for { flex: none; width: 132px; }
.aic-use-for select { width: 100%; height: 28px; font-size: 12px; padding: 0 24px 0 8px; }

/* Automation → Agents, its slide-outs, and the Automation pieces on System Status and the load
   page. Prefix: au-. Theme colours come from flextms.css variables only. */

/* ---------- one slim bar: title, counts, tabs, filters, scheduler, refresh ---------- */
.au-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: nowrap; min-height: 40px; }
.au-bar h1 { margin: 0; font-family: Outfit, sans-serif; font-size: 24px; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap; }
.au-counts { font-size: 12.5px; white-space: nowrap; }
.au-tabs { border-bottom: 0; flex-wrap: nowrap; }
.au-tabs .tab { height: 34px; padding: 0 11px; white-space: nowrap; }
.au-sched { white-space: nowrap; }
.au-filter select { height: 32px; border-radius: 9px; font-size: 12.5px; padding: 0 28px 0 10px; min-width: 0; }
.au-filter .select-caret { top: 10px; right: 10px; }
.au-bar .btn-xs { height: 32px; }

/* ---------- the list ---------- */
.au-panel { overflow: hidden; }
.au-table { font-size: 13px; }
.au-table td { padding: 7px 8px; vertical-align: middle; }
.au-table .th-btn { padding: 9px 8px; }
.au-c-act .btn-xs { padding: 0 9px; }
.au-table .th-btn.static.left { justify-content: flex-start; }
.au-table .au-c-name { min-width: 170px; }
.au-purpose { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 205px; }
.au-narrow .au-wide, .au-narrow .au-purpose, .au-narrow .au-table td .sub { display: none; }
.au-group td { padding: 6px 10px 4px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); background: var(--th-bg); }
.au-table tbody tr.au-group:hover { background: var(--th-bg); }
.au-chip { white-space: nowrap; }
.au-last { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--text2); font: inherit; font-size: 12.5px; cursor: pointer; }
.au-last:hover { color: var(--gold); }
.au-res { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 9px; font-size: 12px; font-weight: 700; flex: none; }
.au-res.ok { background: var(--b-green-bg); color: var(--b-green-fg); }
.au-res.bad { background: var(--b-red-bg); color: var(--b-red-fg); }
.au-res.skip { background: var(--b-dim-bg); color: var(--b-dim-fg); }
.au-res.run { background: var(--b-violet-bg); }
.au-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--b-violet-fg); border-right-color: transparent; animation: au-spin 0.8s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .au-spin { animation: none; } }
.au-c-act { text-align: right; }
.au-run { white-space: nowrap; }
.au-switch { gap: 6px; }
.au-summary { max-width: 520px; color: var(--text2); }
.au-c-test { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.au-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text2); word-break: break-all; }
.au-note { margin: 4px 0 0; font-size: 12px; line-height: 1.4; }
.au-pad { padding: 10px 16px; margin: 0; }
.au-pad0 { margin: 0; font-size: 12.5px; }
.au-keys-note { margin: -4px 0 0; font-size: 12.5px; }
.au-test { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.au-test.ok { color: var(--green); }
.au-test.bad { color: var(--red); }
.au-test.bad { white-space: normal; }

/* Segmented control (AI Providers: Providers | Models by purpose) */
.au-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--th-bg); border: 1px solid var(--row-line); }
.au-seg-btn { height: 26px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.au-seg-btn.active { background: var(--active-item-bg); color: var(--gold); }

/* ---------- slide-outs ---------- */
.au-strip { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--row-line); }
.au-itabs { flex: none; display: flex; align-items: center; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--row-line); }
.au-itab { height: 32px; padding: 0 10px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text2); font: inherit; font-size: 13px; cursor: pointer; }
.au-itab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--gold-line); }
.au-itab-note { margin-left: auto; font-size: 12px; }
.au-ipane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.au-pane-scroll { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.au-pane-fill { flex: 1 1 auto; min-height: 0; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.au-sec { margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
.au-about { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 12.5px; line-height: 1.4; }
.au-about dt { color: var(--text3); }
.au-about dd { margin: 0; color: var(--text2); }
.au-honest { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--b-amber-bg); border: 1px solid var(--b-amber-bd); color: var(--b-amber-fg); }
.au-honest strong { display: block; margin-bottom: 2px; }
.au-honest p { margin: 0; color: var(--text2); font-size: 12.5px; line-height: 1.4; }
.au-linkbtn { padding: 0; border: 0; background: transparent; font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.au-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; }
.au-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; color: var(--text3); }
.au-field.wide { width: 100%; }
.au-input-unit { display: flex; align-items: center; gap: 6px; }
.au-input-unit em { font-style: normal; color: var(--text3); font-size: 12px; white-space: nowrap; }
.au-checks { display: flex; flex-direction: column; gap: 6px; }
.au-check { align-items: flex-start; line-height: 1.35; }
.au-check input { margin-top: 1px; flex: none; }
.au-check.off { opacity: 0.6; }
.au-th { display: flex; flex-direction: column; gap: 4px; }
.au-th-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text2); }
.au-th-head { font-size: 11px; color: var(--text3); font-weight: 600; }
.au-sched-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.au-sched-kind { width: 170px; }
.au-sched-day { width: 140px; }
.au-small { width: 84px; }
.au-time { width: 120px; }
.au-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; justify-content: flex-end; }
.au-actions.left { justify-content: flex-start; }
.au-upload { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--btn-border); background: var(--sub-panel); }
.au-upload strong { display: block; font-size: 13px; }
.au-upload p { margin: 2px 0 0; font-size: 12px; }
.au-upload > div { flex: 1; min-width: 0; }
.au-upload.off { opacity: 0.75; }
.au-key { display: flex; align-items: center; gap: 4px; }
.au-model { display: flex; align-items: center; gap: 6px; }
.au-model .field { flex: 1; }
.au-model-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text2); }

/* Ada: permissions, prompt, usage */
.au-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.au-perm { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--row-line); cursor: pointer; }
.au-perm input { margin-top: 3px; accent-color: var(--check); flex: none; }
.au-perm strong { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.au-perm .sub { display: block; }
.au-sens { padding: 1px 6px !important; font-size: 10px; }
.au-prompt { flex: 1 1 auto; min-height: 220px; height: auto; padding: 8px 10px; resize: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45; }
.au-usage td { vertical-align: top; font-size: 12.5px; }
.au-counts-cell { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.au-cap { white-space: nowrap; color: var(--text2); }
.au-cap.near { color: var(--b-amber-fg); font-weight: 600; }

/* Mixer: autonomy, threshold, stats */
.au-radios { display: flex; flex-direction: column; gap: 6px; }
.au-radio { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.au-radio input { margin-top: 3px; accent-color: var(--check); }
.au-radio strong { display: block; font-size: 13px; }
.au-radio.off { opacity: 0.6; }
.au-threshold { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px; align-items: center; gap: 10px; color: var(--text2); font-size: 12.5px; }
.au-threshold input { accent-color: var(--gold-line); }
.au-examples { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.5; }
.au-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.au-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border-radius: 12px; border: 1px solid var(--row-line); background: var(--sub-panel); }
.au-tile strong { font-family: Outfit, sans-serif; font-size: 24px; font-weight: 500; }
.au-tile strong.green { color: var(--green); }
.au-tile strong.amber { color: var(--b-amber-fg); }
.au-tile strong.red { color: var(--red); }
.au-tile span { font-size: 12px; }
.au-bars { display: flex; flex-direction: column; gap: 6px; }
.au-bar-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; text-transform: capitalize; }
.au-bar-track { height: 6px; border-radius: 3px; background: var(--th-bg); border: 1px solid var(--row-line); overflow: hidden; }
.au-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--b-teal-bd), var(--b-teal-fg)); }

/* Runs (in a slide-out) and the run slide-out */
.au-runs { list-style: none; margin: 0; padding: 4px 6px; }
.au-run-row { display: grid; grid-template-columns: 18px auto auto minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.au-run-row:hover { background: var(--row-hover); }
.au-run-row-sum { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-run-head { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--row-line); font-size: 13px; }
.au-run-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 0; font-size: 13px; }
.au-run-trigger { font-size: 12.5px; }
.au-run-counts { display: flex; gap: 14px; color: var(--text2); font-size: 12.5px; }
.au-run-counts strong { color: var(--text); }
.au-run-summary { margin: 0; color: var(--text); line-height: 1.4; }
.au-error { padding: 8px 10px; border-radius: 10px; background: var(--b-red-bg); border: 1px solid var(--b-red-bd); color: var(--b-red-fg); font-size: 12.5px; line-height: 1.4; }
.au-log { flex: 1 1 auto; min-height: 80px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--row-line); border-radius: 10px; background: var(--sub-panel); padding: 4px 0; margin-bottom: 8px; }
.au-log-empty { margin: 0; padding: 10px; font-size: 12.5px; }
.au-line { display: grid; grid-template-columns: 78px 16px minmax(0, 1fr); gap: 0 6px; align-items: start; padding: 3px 10px; font-size: 12px; line-height: 1.4; }
.au-line + .au-line { border-top: 1px solid var(--row-line); }
.au-line-time { color: var(--text3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.au-line-msg { color: var(--text2); word-break: break-word; }
.au-line.change .au-line-msg { color: var(--text); }
.au-line.error .au-line-msg { color: var(--red); }
.au-line-link { grid-column: 3; justify-self: start; white-space: nowrap; font-size: 11.5px; }
.au-lvl { display: inline-flex; margin-top: 2px; }
.au-lvl.info { color: var(--text3); }
.au-lvl.change { color: var(--green); }
.au-lvl.warn { color: var(--b-amber-fg); }
.au-lvl.error { color: var(--red); }
.au-run-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--row-line); }

/* ---------- System Status → Backups ---------- */
.au-sys { display: flex; flex-direction: column; min-height: 0; }
.au-sys-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid var(--row-line); font-size: 12.5px; }
.au-sys-bar h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-family: Outfit, sans-serif; font-size: 16px; font-weight: 500; }
.au-sys-bar h2 svg { color: var(--gold); }
.au-sys-scroll { max-height: calc(100vh - 330px); min-height: 120px; overflow-y: auto; }

/* ---------- load page: the Status Automation chip ---------- */
.au-bulb {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--gold-border); background: var(--active-item-bg); color: var(--gold); font: inherit; font-size: 11.5px; font-weight: 600;
  animation: au-pulse 2.2s ease-in-out infinite;
}
.au-bulb:hover { box-shadow: 0 0 0 3px var(--active-item-bg); }
.au-bulb:disabled { opacity: 0.6; cursor: wait; }
@keyframes au-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px var(--active-item-bg); } }
@media (prefers-reduced-motion: reduce) { .au-bulb { animation: none; } }

/* Narrow windows: keep one bar; the counts give way first, then the filters shrink. */
.au-bar .au-filter { flex: 0 1 150px; min-width: 96px; }
.au-side-open .au-counts, .au-side-open .au-sched-at, .au-side-open .au-tabs .tab svg, .au-side-open .au-refresh-text { display: none; }
.au-side-open { gap: 8px; }
.au-side-open .au-tabs .tab { padding: 0 9px; }
.au-c-test { white-space: nowrap; }
@media (max-width: 1500px) {
  .au-counts, .au-sched-at, .au-c-addr { display: none; }
  /* The group rows already say AI or background. */
  .au-table .au-c-type { display: none; }
}

/* ---------- BOL tab (bol.rs); layout, viewer and print come from ratecon.css ---------- */
.rc.bol { grid-template-columns: 390px minmax(0, 1fr); }

.bol-number {
  font-size: 12px; font-weight: 600; color: var(--gold); padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--gold-border); background: var(--active-item-bg); white-space: nowrap;
}
.bol-refs { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text3); }
.bol-refs strong { color: var(--text); font-weight: 500; }
.bol-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bol-party { min-width: 0; padding: 7px 9px; border-radius: 10px; background: var(--sub-panel); border: 1px solid var(--row-line); }
.bol-party-label { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.bol-party-label.up { color: var(--green); }
.bol-party-label.down { color: var(--red); }
.bol-party-name { margin-top: 3px; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bol-party-line, .bol-party-date { font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bol-party-date { color: var(--text2); margin-top: 1px; }

/* The cargo grid: one input per cell, quiet until you hover or type. */
.bol-grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.bol-grid th { text-align: left; font-size: 10.5px; font-weight: 600; color: var(--text3); letter-spacing: 0.04em; text-transform: uppercase; padding: 0 4px 4px; }
.bol-grid td { padding: 2px; border-top: 1px solid var(--row-line); }
.bol-grid .c-qty { width: 46px; }
.bol-grid .c-pack { width: 88px; }
.bol-grid .c-wt { width: 70px; }
.bol-grid .c-act { width: 54px; text-align: right; white-space: nowrap; }
.bol-cell {
  width: 100%; height: 27px; padding: 0 6px; border-radius: 6px; border: 1px solid transparent; background: transparent;
  color: var(--text); font: inherit; font-size: 12.5px; -moz-appearance: textfield;
}
.bol-cell::-webkit-outer-spin-button, .bol-cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bol-cell:hover:not(:disabled) { border-color: var(--input-border); background: var(--input); }
.bol-cell:focus { outline: none; border-color: var(--gold-line); background: var(--input); box-shadow: 0 0 0 3px var(--active-item-bg); }
.bol-cell:disabled { color: var(--text2); }
.bol-grid tr.saving .bol-cell { opacity: 0.7; }
.bol-grid tr.hazmat td:first-child { box-shadow: inset 2px 0 0 var(--red); }
.row-btn {
  width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--text3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
}
.row-btn:hover:not(:disabled) { background: var(--row-hover); color: var(--text); }
.row-btn.danger:hover:not(:disabled), .row-btn.confirm { color: var(--red); background: var(--b-red-bg); }
.row-btn:disabled { opacity: 0.25; cursor: default; }
.bol-cargo .form-error { margin: 2px 0 0; font-size: 12px; }

.bol-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bol-stats div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bol-stats span { font-size: 10.5px; color: var(--text3); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bol-stats strong { font-family: Outfit, sans-serif; font-size: 17px; font-weight: 500; color: var(--text); white-space: nowrap; }

/* Cargo line slide-out */
.cargo-summary { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--sub-panel); border: 1px solid var(--row-line); font-size: 12.5px; color: var(--text2); }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--gold-line); }
.field.area { height: auto; min-height: 64px; padding: 7px 9px; resize: vertical; line-height: 1.4; }

/* ---------- the BOL document (paper colours in both themes) ---------- */
.bld { padding: 30px 36px 28px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.3; color: #000; }
.bld h1 { margin: 0; color: #000; }
.bld label { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #333; margin-bottom: 1px; }
.bld label.gap { margin-top: 5px; }
.bld-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid #000; }
.bld-title { text-align: center; }
.bld-title h1 { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.bld-title div { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #333; margin-top: 2px; }
.bld-id { justify-self: end; text-align: right; border: 2px solid #000; padding: 4px 10px; }
.bld-id span { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.bld-id strong { font-size: 15px; }
.bld-form, .bld-cargo { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 8px; }
.bld-form td { border: 1px solid #000; padding: 3px 6px 4px; vertical-align: top; font-size: 11px; }
.bld-party td { padding-bottom: 6px; }
.bld-party strong { display: block; font-size: 11.5px; }
.bld-big { font-size: 15px; font-weight: 700; }
.bld-cargo th { border: 1px solid #000; background: #eee; padding: 3px 4px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; text-align: left; vertical-align: bottom; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bld-cargo td { border: 1px solid #000; padding: 3px 4px; font-size: 10.5px; vertical-align: top; height: 22px; }
.bld-cargo .n { width: 58px; text-align: center; }
.bld-cargo .hm { width: 30px; text-align: center; font-weight: 700; }
.bld-cargo .w { width: 98px; text-align: right; }
.bld-cargo .cl { width: 46px; text-align: center; }
.bld-cargo .nm { width: 62px; text-align: center; }
.bld-cargo .ch { width: 68px; text-align: right; }
.bld-cargo tr.bld-total td { font-weight: 700; border-top: 2px solid #000; }
.bld-hz { color: #c00; font-weight: 700; }
.bld-marks { font-size: 9.5px; color: #333; margin-top: 1px; }
.bld-money td { height: auto; }
.bld-blank { height: 26px; }
.bld-note { font-size: 9.5px !important; line-height: 1.35; }
.bld-sigline { display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; font-size: 9.5px; }
.bld-sigline span { flex: 1 1 auto; border-bottom: 1px solid #000; height: 14px; order: 2; }
.bld-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 12px; }
.bld-signame { font-size: 11.5px; font-weight: 700; min-height: 14px; }
.bld-terms { margin-top: 12px; font-size: 9px; line-height: 1.35; color: #222; }
.bld-terms p { margin: 0 0 4px; color: #222; }

/* A slide-out is open: keep Description readable (packaging is still on the document). */
@container (max-width: 900px) {
  .rc.bol { grid-template-columns: 312px minmax(0, 1fr); }
  .bol-grid .c-pack { display: none; }
  .bol-stats strong { font-size: 14.5px; }
  .bol-number { font-size: 11px; padding: 1px 7px; }
}
@media (max-width: 1100px) {
  .rc.bol { grid-template-columns: 330px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .rc.bol { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .bld { padding: 0; }
}

/* ---------- carriers (list, carrier page, carrier slide-outs) ----------
   Theme colours come only from the tokens in flextms.css. The carrier page is tight on purpose:
   a whole carrier, vetting included, fits a 1366×768 screen without scrolling. */

/* Slot beside the page that page-owned slide-outs mount into (see layout.rs). Its wrappers take
   no space, so the panel itself sits next to the scroll area like the tracking panel. */
.side-slot, .side-slot > div { display: contents; }
/* Opening a carrier slide-out narrows the page; don't let scroll anchoring shift it. */
.shell-body:has(#side-slot .slideout) > .scroll-area { overflow-anchor: none; }

/* shared small form controls */
.cx-input {
  width: 100%; min-width: 0; height: 26px; padding: 0 8px; border-radius: 7px;
  background: var(--input); border: 1px solid var(--input-border); color: var(--text);
  font: inherit; font-size: 12.5px; outline: none;
}
.cx-input:focus { border-color: var(--gold-border); box-shadow: 0 0 0 3px var(--active-item-bg); }
.cx-input:disabled { opacity: 0.55; cursor: not-allowed; }
.cx-input::placeholder { color: var(--text3); }
textarea.cx-input { height: auto; padding: 6px 9px; resize: vertical; line-height: 1.4; }
select.cx-input { padding-right: 6px; cursor: pointer; }
select.cx-input option { background: var(--panel-solid); color: var(--text); }
input[type="date"].cx-input { color-scheme: light dark; }
.app[data-theme="dark"] input[type="date"].cx-input { color-scheme: dark; }
.app[data-theme="light"] input[type="date"].cx-input { color-scheme: light; }
.cx-inline { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.cx-inline .grow { flex: 1 1 auto; }
.cx-input.w-state { flex: 0 0 44px; text-transform: uppercase; }
.cx-input.w-zip { flex: 0 0 70px; }
.cx-input.w-num { flex: 0 0 72px; }
.cx-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cx-field > span { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--text3); }
.cx-field.compact { flex-direction: row; align-items: center; gap: 6px; }
.cx-field.compact .cx-input { width: 140px; }
.cx-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text2); cursor: pointer; white-space: nowrap; }
.cx-check input { accent-color: var(--check); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.cx-check input:disabled { cursor: not-allowed; }

/* toggle switch */
.cx-switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12.5px; color: var(--text2); white-space: nowrap; position: relative; }
.cx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cx-switch-track { width: 30px; height: 17px; border-radius: 9px; background: var(--b-dim-bg); border: 1px solid var(--b-dim-bd); position: relative; flex: none; transition: background 0.18s ease; }
.cx-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 6px; background: var(--text3); transition: transform 0.18s ease, background 0.18s ease; }
.cx-switch input:checked + .cx-switch-track { background: var(--b-teal-bg); border-color: var(--b-teal-bd); }
.cx-switch input:checked + .cx-switch-track::after { transform: translateX(13px); background: var(--b-teal-fg); }
.cx-switch input:focus-visible + .cx-switch-track { outline: 2px solid var(--gold-line); outline-offset: 2px; }
.cx-switch input:disabled + .cx-switch-track { opacity: 0.5; }
.cx-switch-text { display: inline-flex; align-items: center; gap: 4px; }
.cx-switch.danger input:checked + .cx-switch-track { background: var(--b-red-bg); border-color: var(--b-red-bd); }
.cx-switch.danger input:checked + .cx-switch-track::after { background: var(--b-red-fg); }
.cx-switch.danger.on .cx-switch-text { color: var(--red); font-weight: 700; }

.btn-save { background: var(--b-green-bg); border-color: var(--b-green-bd); color: var(--b-green-fg); font-weight: 600; height: 36px; border-radius: 10px; }
.link-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.link-btn:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }
.small { font-size: 12px; }
.clip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn.danger { color: var(--red); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.badge-blocked { background: var(--b-red-fg); color: var(--panel-solid); border-color: transparent; font-weight: 700; }

/* ---------- carriers list ---------- */
.carriers-table { min-width: 900px; }
.carriers-table td { padding: 11px 10px; vertical-align: middle; }
.carriers-table th.col-name, .carriers-table td.col-name { padding-left: 22px; }
.carriers-table .col-center { text-align: center; }
.carriers-table .col-center .th-btn { justify-content: center; }
.carriers-table .col-last { padding-right: 22px; }
.th-btn.static.left { justify-content: flex-start; }
.carriers-table tr.inactive td { opacity: 0.5; }
.carrier-link { font-weight: 600; text-decoration: none; }
.carrier-link:hover { color: var(--gold); }
.star-pill { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 7px; vertical-align: -4px; border-radius: 10px; background: var(--b-amber-bg); color: var(--b-amber-fg); border: 1px solid var(--b-amber-bd); }
.phone { display: inline-flex; align-items: center; gap: 5px; color: var(--text2); font-size: 13px; }
.vet-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; }
.vet-cell .badge { font-size: 12px; }
.vet-exp { font-size: 11.5px; color: var(--text3); }
.vet-exp.red, .doc-exp.red { color: var(--red); font-weight: 600; }
.vet-exp.amber, .doc-exp.amber { color: var(--b-amber-fg); font-weight: 600; }
.vet-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--text3); }
.vet-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.vet-dot { width: 9px; height: 9px; border-radius: 5px; }
.vet-dot.green { background: var(--b-green-fg); box-shadow: 0 0 8px var(--b-green-bd); }
.vet-dot.yellow { background: var(--b-amber-fg); box-shadow: 0 0 8px var(--b-amber-bd); }
.vet-dot.red { background: var(--b-red-fg); box-shadow: 0 0 8px var(--b-red-bd); }

/* ---------- carrier page ---------- */
.carrier-head .carrier-title { min-width: 0; }
.carrier-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.carrier-sub .badge { padding: 2px 8px; font-size: 10.5px; }
.confirm-text { font-size: 13px; color: var(--red); font-weight: 600; margin-right: 2px; }
.load-actions .btn-save { height: 36px; padding: 0 14px; font-size: 13px; }
.cx-alert { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 12px; background: var(--b-red-bg); border: 1px solid var(--b-red-bd); color: var(--b-red-fg); font-size: 13px; font-weight: 500; }
.cx-alert span { flex: 1; }

/* vetting banner */
.vet-banner { position: relative; border-radius: 14px; border: 1px solid; padding: 4px 6px 4px 14px; font-size: 12.5px; z-index: 3; }
.vet-banner::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; }
.vet-banner.green { background: linear-gradient(90deg, var(--b-green-bg), transparent 85%); border-color: var(--b-green-bd); }
.vet-banner.green::before { background: var(--b-green-fg); }
.vet-banner.yellow { background: linear-gradient(90deg, var(--b-amber-bg), transparent 85%); border-color: var(--b-amber-bd); }
.vet-banner.yellow::before { background: var(--b-amber-fg); }
.vet-banner.red { background: linear-gradient(90deg, var(--b-red-bg), transparent 85%); border-color: var(--b-red-bd); }
.vet-banner.red::before { background: var(--b-red-fg); }
/* One line on laptop screens: the status note shortens with "…" (full text in its tooltip). */
.vet-banner-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 12px; min-width: 0; }
.vet-banner-row > * { flex: none; }
.vet-banner-row > .grow { flex: 1 1 0; }
.vet-banner-row > .vet-fact.meaning { flex: 0 1 auto; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .vet-banner-row { flex-wrap: wrap; } }
.vet-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; border: 1px solid var(--divider); background: var(--panel-solid); color: var(--text); }
.vet-banner.green .vet-chip.strong { color: var(--b-green-fg); border-color: var(--b-green-bd); }
.vet-banner.yellow .vet-chip.strong { color: var(--b-amber-fg); border-color: var(--b-amber-bd); }
.vet-banner.red .vet-chip.strong { color: var(--b-red-fg); border-color: var(--b-red-bd); }
.vet-chip.button { cursor: pointer; font-weight: 600; letter-spacing: 0; }
.vet-chip.button:hover { border-color: var(--gold-border); }
.vet-caret { display: inline-flex; transition: transform 0.18s ease; }
.vet-caret.open { transform: rotate(180deg); }
.vet-fact { display: inline-flex; align-items: center; gap: 5px; color: var(--text2); white-space: nowrap; }
.vet-fact svg { color: var(--text3); }
.vet-fact strong { color: var(--text); font-weight: 600; }
.vet-fact.meaning { font-size: 12px; color: var(--text3); }
.vet-history {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 14px; border-radius: 14px; background: var(--menu-bg); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.vet-history-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--text3); margin-bottom: 6px; }
.vet-history-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 4px 0 4px 10px; border-left: 2px solid transparent; font-size: 12.5px; }
.vet-history-row + .vet-history-row { border-top: 1px solid var(--row-line); }
.vet-history-row.latest { border-left-color: var(--gold-line); }
.vet-history-label { font-weight: 600; }
.vet-history-details { color: var(--text2); }

/* layout: left block (information, billing, contacts) + right vetting column */
.carrier-main { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; min-width: 0; }
.carrier-left { flex: 1.6 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.carrier-right { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.carrier-row2 { display: flex; flex-wrap: wrap; gap: 12px; flex: 1 1 auto; }
.carrier-row2 > .panel { flex: 1 1 270px; min-width: 0; }
.carrier-row2 > .contacts-panel { flex-grow: 1.15; }

.cpanel { border-radius: 18px; display: flex; flex-direction: column; }
.cpanel .panel-head.small { padding: 7px 14px; gap: 8px; flex-wrap: nowrap; }
.cpanel .panel-head.small h2 { font-size: 14.5px; white-space: nowrap; }
.cpanel .panel-head .hint { font-size: 12px; }
.cpanel .panel-head .btn-xs { height: 26px; padding: 0 9px; font-size: 12px; }
.cx-body { padding: 9px 14px 11px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cx-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 4px 22px; padding: 9px 14px 6px; }
.ckv { grid-template-columns: max-content minmax(0, 1fr); column-gap: 10px; row-gap: 2px; font-size: 12.5px; line-height: 1.3; }
.ckv .cx-input { height: 24px; }
.ckv .cx-inline { gap: 4px; }
.ckv .cx-input.w-state { flex-basis: 36px; padding: 0 5px; }
.ckv .cx-input.w-zip { flex-basis: 56px; padding: 0 6px; }
.ckv .cx-switch { gap: 5px; font-size: 12px; }
.ckv .cx-inline .cx-switch + .cx-switch { margin-left: 6px; }
.side-form .cx-input { height: 28px; }
.ckv .kv-label { white-space: nowrap; min-height: 22px; }
.ckv .kv-value { min-height: 22px; overflow: hidden; }
.ckv .kv-value > a, .ckv .kv-value > strong, .ckv .kv-value > span:only-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ckv .badge { padding: 2px 8px; font-size: 10.5px; }
.cx-notes { display: flex; align-items: flex-start; gap: 10px; padding: 6px 14px 8px; font-size: 12.5px; border-top: 1px solid var(--row-line); margin-top: 2px; }
.cx-notes textarea.cx-input { min-height: 26px; max-height: 80px; padding: 3px 8px; }
.cx-notes .kv-label { min-height: 22px; white-space: nowrap; }
.cx-notes-text { margin: 3px 0 0; white-space: pre-wrap; max-height: 36px; overflow-y: auto; }
.cx-notes textarea { flex: 1; }
.cx-empty { margin: 4px 0; font-size: 12.5px; }

/* billing */
.factoring-line { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 12.5px; min-width: 0; }
.factoring-line .push-right { margin-left: auto; flex: none; }
.factoring-line .badge { padding: 2px 8px; font-size: 10.5px; }

/* contacts */
.poc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 9px 14px 4px; }
.poc { min-width: 0; padding: 7px 9px; border-radius: 10px; background: var(--th-bg); border: 1px solid var(--row-line); font-size: 12.5px; }
.poc-title { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--text3); margin-bottom: 3px; }
.poc-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poc-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--text2); font-size: 11.5px; }
.poc-meta span, .poc-meta a { display: inline-flex; align-items: center; gap: 4px; }
.poc-empty { font-size: 12px; padding: 2px 0; }
.contact-list { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; max-height: 128px; overscroll-behavior: contain; }
.contact-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto 14px; align-items: center; gap: 6px; width: 100%;
  padding: 5px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.contact-row:hover, .contact-row.active { background: var(--row-hover); }
.contact-row.active { box-shadow: inset 2px 0 0 var(--gold-line); }
.contact-row.inactive { opacity: 0.55; }
.contact-name { display: block; min-width: 0; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.contact-name .primary-star { margin-left: 5px; vertical-align: -1px; }
.primary-star { display: inline-flex; color: var(--gold); flex: none; }
.contact-name .badge, .contact-role .badge { padding: 1px 6px; font-size: 9.5px; letter-spacing: 0.02em; }
.contact-phone { color: var(--text2); font-size: 11.5px; white-space: nowrap; }
.contact-edit { color: var(--text3); display: flex; }

/* vetting column */
.vetting-panel { flex: 1 1 auto; min-height: 0; }
.vetting-panel .panel-head .badge { padding: 2px 8px; font-size: 11px; }
.vet-body { padding: 5px 14px 9px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; }
.vet-section-title { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--text2); text-transform: uppercase; }
.vet-section-title svg { color: var(--gold); }
.vet-section-title .small { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px; }
.blackball-reason .cx-input { height: 24px; border-color: var(--b-red-bd); background: var(--b-red-bg); }
.doc-list { display: flex; flex-direction: column; border-radius: 10px; border: 1px solid var(--row-line); overflow: hidden; }
.doc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 22px 14px; align-items: center; gap: 8px;
  padding: 4px 8px 4px 10px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.doc-row + .doc-row { border-top: 1px solid var(--row-line); }
.doc-row:hover { background: var(--row-hover); }
.doc-row.active { background: var(--sel-row); box-shadow: inset 2px 0 0 var(--gold-line); }
.doc-label { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.doc-verified { display: inline-flex; color: var(--green); }
.doc-exp { font-size: 11.5px; color: var(--text2); white-space: nowrap; }
.doc-pill { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 10px; font-size: 10.5px; font-weight: 700; border: 1px solid; }
.doc-pill.ok { background: var(--b-green-bg); color: var(--b-green-fg); border-color: var(--b-green-bd); }
.doc-pill.on { background: var(--b-teal-bg); color: var(--b-teal-fg); border-color: var(--b-teal-bd); }
.doc-pill.off { background: var(--b-dim-bg); color: var(--b-dim-fg); border-color: var(--b-dim-bd); }
.doc-go { display: flex; color: var(--text3); }
.ins-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: end; gap: 6px; }
.ins-row .cx-check { font-size: 11.5px; gap: 4px; }
.ins-row .btn-xs { padding: 0 10px; }
.cx-field > span { white-space: nowrap; }
.ins-row .cx-check { height: 26px; }
.ins-row .btn-xs { height: 26px; }
.mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.mini-card { padding: 4px 9px 6px; border-radius: 10px; background: var(--th-bg); border: 1px solid var(--row-line); font-size: 12px; min-width: 0; }
.mini-card .vet-section-title { margin: 0 0 2px; }
.mini-kv { display: flex; justify-content: space-between; gap: 8px; line-height: 1.4; }
.stars { display: inline-flex; align-items: center; gap: 1px; color: var(--gold); }
.stars-num { margin-left: 4px; color: var(--text2); font-size: 11.5px; }
.note-add { display: flex; gap: 6px; }
.note-add .btn-xs { height: 26px; width: 32px; padding: 0; flex: none; }
.note-list { flex: 1 1 0; min-height: 44px; max-height: 120px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; }
.note { padding: 4px 8px; border-radius: 8px; background: var(--th-bg); border-left: 2px solid var(--gold-border); font-size: 12px; }
.note p { margin: 0; white-space: pre-wrap; }
.note span { font-size: 11px; }

/* new carrier: duplicate warning + SAFER panel */
.dup-warning { padding: 10px 12px; border-radius: 14px; background: var(--b-amber-bg); border: 1px solid var(--b-amber-bd); border-left: 4px solid var(--b-amber-fg); display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.dup-head { display: flex; align-items: center; justify-content: space-between; }
.dup-head strong { display: inline-flex; align-items: center; gap: 6px; color: var(--b-amber-fg); }
.dup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dup-row .badge { padding: 2px 8px; font-size: 10.5px; }
.dup-foot { padding-top: 6px; border-top: 1px solid var(--b-amber-bd); }
.safer-body p { margin: 0; }
.safer-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.safer-kind { display: flex; gap: 10px; }
.safer-row .btn-xs { height: 28px; }
.safer-note { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--th-bg); border: 1px dashed var(--divider); color: var(--text2); font-size: 12.5px; }
.safer-note svg { flex: none; color: var(--gold); margin-top: 1px; }
.safer-panel .cx-input:disabled, .safer-panel .cx-check { opacity: 0.6; }
.save-first .cx-body { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 12.5px; }
.save-first .cx-body svg { color: var(--gold); flex: none; margin-top: 2px; }
.save-first p { margin: 0; }

/* toast */
.cx-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; max-width: 420px;
  display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px;
  background: var(--menu-bg); border: 1px solid var(--b-green-bd); color: var(--text); box-shadow: var(--panel-shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-size: 13px; font-weight: 500;
  animation: cx-toast-in 0.22s ease-out;
}
.cx-toast svg { color: var(--green); flex: none; }
.cx-toast.error { border-color: var(--b-red-bd); }
.cx-toast.error svg { color: var(--red); }
@keyframes cx-toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cx-toast { animation: none; } }

/* ---------- carrier slide-outs ---------- */
#side-slot .slideout-title { min-width: 0; }
.side-form { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; flex: 1 1 auto; min-height: 0; }
.side-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side-checks { display: flex; gap: 18px; }
.side-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.side-actions.column { flex-direction: column; align-items: stretch; }
.side-actions .btn-save, .side-actions .btn-sm { height: 34px; }
.side-hint { margin: 0; }
.side-section { display: flex; flex-direction: column; gap: 5px; padding-bottom: 9px; border-bottom: 1px solid var(--row-line); }
.side-section:last-child { border-bottom: 0; }
.side-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--text3); }
.side-label-row { display: flex; align-items: center; justify-content: space-between; }
.side-card { padding: 10px 12px; border-radius: 12px; background: var(--th-bg); border: 1px solid var(--panel-border); display: flex; flex-direction: column; gap: 9px; }
.side-card h3 { margin: 0; font-family: Outfit, sans-serif; font-weight: 500; font-size: 14.5px; }
.side-info, .side-ok, .side-warn { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid; font-size: 12.5px; }
.side-info div, .side-ok div, .side-warn div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.side-info { background: var(--b-teal-bg); border-color: var(--b-teal-bd); color: var(--text); }
.side-info svg { color: var(--b-teal-fg); flex: none; }
.side-ok { background: var(--b-green-bg); border-color: var(--b-green-bd); color: var(--text); }
.side-ok svg { color: var(--green); flex: none; }
.side-warn { background: var(--b-amber-bg); border-color: var(--b-amber-bd); color: var(--b-amber-fg); font-weight: 600; flex-wrap: wrap; }
.side-warn svg { flex: none; }
.side-warn .small { font-weight: 400; }
.side-kv { font-size: 12.5px; }
.address-block { padding: 7px 10px; border-radius: 10px; background: var(--th-bg); border: 1px solid var(--row-line); line-height: 1.4; font-size: 12.5px; }
.side-carriers { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.pending-ap { display: flex; align-items: baseline; gap: 8px; }
.pending-amount { font-family: Outfit, sans-serif; font-size: 21px; font-weight: 500; color: var(--gold); }
.side-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 10px; color: var(--text3); text-align: center; }

.drop-zone {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 12px; border-radius: 12px;
  border: 2px dashed var(--divider); background: var(--th-bg); color: var(--text2); text-align: center; transition: border-color 0.15s ease, background 0.15s ease;
}
.drop-zone svg { color: var(--gold); }
.drop-zone.over { border-color: var(--gold-line); background: var(--active-item-bg); }
.drop-zone.disabled { opacity: 0.6; }
.drop-busy { font-weight: 600; color: var(--gold); padding: 10px 0; }
.doc-meta { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--panel-border); background: var(--th-bg); }
.doc-meta-name { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.doc-meta-name svg { color: var(--red); flex: none; margin-top: 2px; }
.doc-meta-name div { display: flex; flex-direction: column; min-width: 0; }
.doc-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.doc-meta-row .badge { padding: 2px 8px; font-size: 10.5px; }
.doc-viewer-bar { display: flex; align-items: center; gap: 4px; margin-bottom: -6px; }
.doc-viewer-bar .small { display: inline-flex; align-items: center; gap: 5px; }
.zoom-text { min-width: 42px; text-align: center; font-size: 12px; color: var(--text2); }
/* The preview takes whatever height is left, so a document shows without scrolling the panel. */
.doc-viewer { flex: 1 1 auto; min-height: 220px; border-radius: 12px; overflow: auto; padding: 6px; background: var(--map-sea); border: 1px solid var(--panel-border); text-align: center; }
.doc-viewer iframe { display: block; margin: 0 auto; border: 0; border-radius: 6px; background: #FFFFFF; min-width: 240px; min-height: 200px; }
.doc-viewer img { display: block; margin: 0 auto; border-radius: 6px; background: #FFFFFF; }
.doc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.doc-card { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--panel-border); background: var(--th-bg); overflow: hidden; }
.doc-thumb { height: 92px; display: flex; align-items: center; justify-content: center; background: var(--map-sea); color: var(--red); }
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-card-meta { display: flex; flex-direction: column; padding: 6px 8px 0; font-size: 12px; min-width: 0; }
.doc-card-actions { display: flex; justify-content: flex-end; align-items: center; gap: 2px; padding: 2px 4px 4px; }

@media (max-width: 600px) {
  .poc-grid, .side-grid2, .mini-cards { grid-template-columns: 1fr; }
  .ins-row { grid-template-columns: 1fr 1fr; }
  .vet-history { position: static; margin-top: 6px; }
}

/* --- carrier tabs (Details, Contacts, Vetting, as in 48TMS; founder 2026-10-21) ---
   Each tab reaches the bottom of the page; the column layouts adapt to the page width. */
/* .record-tab (customers.css, loaded later) is a column; the Details tab is a row of two columns. */
.record-tab.carrier-details { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.carrier-main-col { flex: 1.6 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.carrier-side-col { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.carrier-details .cx-grid2 { padding-top: 6px; padding-bottom: 3px; }
.carrier-details .cx-body { padding-top: 7px; padding-bottom: 8px; }
.carrier-main-col > .carrier-row2 { flex: 1 0 auto; align-items: stretch; }
.record-tab > .cpanel { flex: 1 0 auto; }
.record-tab .contact-list { max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-content: start; gap: 2px 14px; padding: 8px 12px 12px; }
.record-tab .vet-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; gap: 8px 28px; padding: 10px 18px 14px; }
.vet-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.record-tab .note-list { flex: none; max-height: 420px; }
.tab:disabled { opacity: 0.45; cursor: not-allowed; }

/* Communications: inbox, compose, email accounts, notifications, bell, SMS (crates/app/src/pages/comms*.rs).
   Theme variables only; mail bodies render on white "paper" in both themes. */

/* ---------- page frame: one slim bar, the body fills the window ---------- */
.page:has(> .cm-page) { flex: 1 1 0; min-height: 520px; }
.cm-page { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; container: cm / inline-size; }
.cm-bar { flex: none; display: flex; align-items: center; gap: 12px; min-height: 40px; flex-wrap: nowrap; }
.cm-title { margin: 0; font-family: Outfit, sans-serif; font-size: 21px; font-weight: 400; white-space: nowrap; }
.cm-tabs { display: flex; align-items: stretch; gap: 2px; align-self: stretch; margin-left: 4px; }
.cm-tab { display: inline-flex; align-items: center; padding: 0 12px; font-size: 13px; color: var(--text2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.cm-tab:hover { color: var(--text); }
.cm-tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--gold-line); }
.cm-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cm-searchbox { height: 34px; width: 200px; min-width: 120px; flex: 0 1 200px; border-radius: 10px; }
.cm-filter-chip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.cm-sync.spin svg { animation: cm-spin 0.9s linear infinite; }
@keyframes cm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cm-sync.spin svg { animation: none; } }
.cm-tiny { font-size: 10.5px; }
.cm-link-btn { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.cm-link-btn:hover { text-decoration: underline; }
.cm-link-btn:disabled { color: var(--text3); cursor: default; text-decoration: none; }
.cm-banner { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.4;
  background: var(--b-amber-bg); color: var(--b-amber-fg); border: 1px solid var(--b-amber-bd); }
.cm-banner svg { flex: none; margin-top: 2px; }
.cm-banner.small { font-size: 11.5px; padding: 6px 9px; }
.cm-result { font-size: 12px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-result.ok { color: var(--green); }
.cm-result.bad { color: var(--red); }
.cm-chip { gap: 5px; }
.cm-chip a { color: inherit; text-decoration: none; }
.cm-chip a:hover { text-decoration: underline; }
.cm-chip button, .cm-addr button, .cm-file button { display: inline-flex; padding: 0; border: 0; background: none; color: inherit; opacity: 0.7; cursor: pointer; }
.cm-chip button:hover, .cm-addr button:hover, .cm-file button:hover { opacity: 1; }
.cm-auto { font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; }
.cm-pop-wrap { position: relative; display: inline-flex; }
.cm-pop { width: 300px; max-height: 320px; overflow-y: auto; padding: 6px; z-index: 31; }
.cm-pop.right { left: auto; right: 0; }
.cm-pop .search-box { height: 34px; margin-bottom: 4px; }
.cm-target { flex-direction: column; align-items: flex-start; gap: 1px; }
.cm-target strong { font-weight: 600; font-size: 12.5px; }
.cm-target .muted { font-size: 11.5px; }
.cm-role { margin-left: 8px; font-size: 11.5px; }
.cm-quick { color: var(--text2); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- inbox: folders | list | reading pane ---------- */
.cm-inbox { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 176px minmax(290px, 340px) minmax(0, 1fr); gap: 10px; }
.cm-read { container: cmread / inline-size; }
.cm-inbox > .panel { min-height: 0; display: flex; flex-direction: column; border-radius: 16px; }
.cm-folders { padding: 8px 6px; overflow-y: auto; gap: 1px; scrollbar-width: thin; }
.cm-folder { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 28px; padding: 3px 9px; border: 0; border-radius: 9px; background: transparent; color: var(--text2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.cm-folder:hover { background: var(--row-hover); color: var(--text); }
.cm-folder.active { background: var(--active-item-bg); color: var(--text); font-weight: 600; }
.cm-folder svg { flex: none; color: var(--text3); }
.cm-folder.active svg { color: var(--gold); }
.cm-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-count { flex: none; min-width: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; color: var(--text3); }
.cm-count.red { background: var(--b-red-bg); color: var(--b-red-fg); border: 1px solid var(--b-red-bd); }
.cm-count.amber { background: var(--b-amber-bg); color: var(--b-amber-fg); border: 1px solid var(--b-amber-bd); }
.cm-divider { margin: 9px 9px 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
.cm-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.cm-dot.green { background: var(--green); box-shadow: 0 0 0 3px var(--b-green-bg); }
.cm-dot.amber { background: var(--b-amber-fg); box-shadow: 0 0 0 3px var(--b-amber-bg); }
.cm-dot.red { background: var(--red); box-shadow: 0 0 0 3px var(--b-red-bg); }
.cm-folder-note { margin: 6px 9px; font-size: 11.5px; color: var(--text3); line-height: 1.4; }
.cm-folder-note a { color: var(--gold); }

.cm-list-bar { flex: none; display: flex; align-items: center; gap: 4px; min-height: 38px; padding: 4px 10px 4px 14px; border-bottom: 1px solid var(--row-line); font-size: 12px; }
.cm-rows { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cm-row-list { list-style: none; margin: 0; padding: 0; }
.cm-row-item { position: relative; display: flex; gap: 9px; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--row-line); cursor: pointer; outline: none; }
.cm-row-item:hover { background: var(--row-hover); }
.cm-row-item:focus-visible { box-shadow: inset 0 0 0 2px var(--gold-border); }
.cm-row-item.unread { background: var(--sub-panel); }
.cm-row-item.unread::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 2px 2px 0; background: var(--gold-line); }
.cm-row-item.selected { background: var(--sel-row); }
.cm-type { flex: none; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--icon-circle); border: 1px solid var(--icon-circle-border); color: var(--icon-fg); }
.cm-type.email { color: var(--b-teal-fg); }
.cm-type.sms { color: var(--b-green-fg); }
.cm-type.notification { color: var(--b-amber-fg); }
.cm-type.chat { color: var(--b-violet-fg); }
.cm-type.agent { color: var(--b-violet-fg); }
.cm-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cm-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cm-sender { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); }
.cm-row-item.unread .cm-sender, .cm-row-item.unread .cm-subject { font-weight: 700; }
.cm-tag { flex: none; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; border-radius: 6px; font-size: 10.5px; line-height: 16px; background: var(--b-violet-bg); color: var(--b-violet-fg); border: 1px solid var(--b-violet-bd); }
.cm-clip { display: flex; color: var(--text3); }
.cm-time { flex: none; font-size: 11.5px; color: var(--text3); white-space: nowrap; }
.cm-star { display: inline-flex; padding: 0; border: 0; background: none; color: var(--text3); cursor: pointer; }
.cm-star:hover { color: var(--gold); }
.cm-star.on { color: var(--gold); }
.cm-star.on svg path { fill: var(--gold); }
.cm-subject { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-preview { font-size: 12px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-row-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; font-size: 10.5px; }
.cm-ent { padding: 0 6px; border-radius: 6px; line-height: 16px; background: var(--b-teal-bg); color: var(--b-teal-fg); border: 1px solid var(--b-teal-bd); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.cm-thread-n { padding: 0 6px; border-radius: 6px; line-height: 16px; background: var(--b-neutral-bg); color: var(--b-neutral-fg); border: 1px solid var(--b-neutral-bd); }
.cm-sms-st { font-size: 11px; line-height: 1; color: var(--text3); }
.cm-sms-st.delivered { color: var(--green); }
.cm-sms-st.failed { color: var(--red); font-weight: 700; }
.cm-empty { padding: 40px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text3); text-align: center; }
.cm-empty p { margin: 0; }
.cm-skeleton { padding: 6px 0; }
.cm-skel-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--row-line); }
.cm-skel-row span { display: block; height: 9px; border-radius: 5px; background: var(--sub-panel); animation: cm-pulse 1.3s ease-in-out infinite; }
.cm-skel-row span:nth-child(1) { width: 45%; }
.cm-skel-row span:nth-child(2) { width: 80%; }
.cm-skel-row span:nth-child(3) { width: 65%; }
@keyframes cm-pulse { 50% { opacity: 0.45; } }

.cm-read-bar { flex: none; display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 4px 8px 4px 10px; border-bottom: 1px solid var(--row-line); }
.cm-read-scroll { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cm-read-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text3); }
.cm-read-empty p { margin: 0; }
.cm-head { display: flex; flex-direction: column; gap: 2px; }
.cm-head-top { display: flex; align-items: center; gap: 6px; }
.cm-badge.email { background: var(--b-teal-bg); color: var(--b-teal-fg); border-color: var(--b-teal-bd); }
.cm-badge.sms { background: var(--b-green-bg); color: var(--b-green-fg); border-color: var(--b-green-bd); }
.cm-badge.notification { background: var(--b-amber-bg); color: var(--b-amber-fg); border-color: var(--b-amber-bd); }
.cm-badge.chat, .cm-badge.agent { background: var(--b-violet-bg); color: var(--b-violet-fg); border-color: var(--b-violet-bd); }
.cm-subject-h { margin: 2px 0 0; font-family: Outfit, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.25; }
.cm-from { font-size: 13px; }
.cm-to { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-related { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px; }
.cm-actions-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-actions-row .btn { height: 30px; }
.cm-thread { display: flex; flex-direction: column; border: 1px solid var(--row-line); border-radius: 10px; overflow: hidden; }
.cm-thread-line { display: flex; align-items: baseline; gap: 8px; padding: 5px 10px; border: 0; border-bottom: 1px solid var(--row-line); background: var(--sub-panel); color: var(--text2); font: inherit; font-size: 12px; text-align: left; cursor: pointer; min-width: 0; }
.cm-thread-line:last-child { border-bottom: 0; }
.cm-thread-line:hover { background: var(--row-hover); color: var(--text); }
.cm-thread-line strong { flex: none; color: var(--text); font-weight: 600; }
.cm-thread-line.out strong { color: var(--gold); }
.cm-thread-line .muted { flex: none; }
.cm-thread-prev { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-images-note { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 12px; background: var(--sub-panel); color: var(--text2); }
/* The mail itself: white paper in both themes, scrolling inside itself. */
.cm-paper { flex: 1 1 auto; min-height: 220px; width: 100%; border: 1px solid var(--row-line); border-radius: 10px; background: #fff; }
.cm-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.cm-files { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; border-top: 1px solid var(--row-line); }
.cm-file { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px; border-radius: 8px; font-size: 12px; background: var(--sub-panel); border: 1px solid var(--row-line); color: var(--text2); }
.cm-file.big { padding: 3px 4px 3px 9px; gap: 7px; }
.cm-file svg { flex: none; color: var(--gold); }
.cm-file-name { min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
a.cm-file-name:hover { text-decoration: underline; }
.cm-save { width: 290px; display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.cm-save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.cm-unknown { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cm-unknown p { margin: 0; }
.cm-sms-pane { flex: 1 1 auto; min-height: 260px; display: flex; flex-direction: column; border: 1px solid var(--row-line); border-radius: 12px; overflow: hidden; }

/* ---------- SMS conversation ---------- */
.cm-sms { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; flex-direction: column; background: var(--panel-solid); }
.cm-sms-head { flex: none; display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-bottom: 1px solid var(--row-line); font-size: 12.5px; }
.cm-sms-head svg { color: var(--gold); }
.cm-sms-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px; text-align: center; font-size: 12.5px; color: var(--text3); }
.cm-sms-state strong { color: var(--text2); }
.cm-sms-state.error { color: var(--red); }
.cm-sms-warn { flex: none; padding: 5px 12px; font-size: 11.5px; background: var(--b-amber-bg); color: var(--b-amber-fg); border-bottom: 1px solid var(--b-amber-bd); }
.cm-sms-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; }
.cm-sms-day { display: flex; justify-content: center; margin: 4px 0 2px; }
.cm-sms-day span { padding: 1px 9px; border-radius: 9px; font-size: 10.5px; background: var(--sub-panel); color: var(--text3); }
.cm-bubble-row { display: flex; }
.cm-bubble-row.out { justify-content: flex-end; }
.cm-bubble { max-width: 78%; padding: 6px 10px; border-radius: 14px 14px 14px 4px; font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; background: var(--sub-panel); color: var(--text); border: 1px solid var(--row-line); }
.cm-bubble.out { border-radius: 14px 14px 4px 14px; background: var(--b-teal-bg); border-color: var(--b-teal-bd); }
.cm-bubble.in { align-self: flex-start; }
.cm-bubble.failed { background: var(--b-red-bg); border-color: var(--b-red-bd); }
.cm-bubble-meta { display: flex; justify-content: flex-end; gap: 5px; margin-top: 2px; font-size: 10px; color: var(--text3); }
.cm-sms-quick { flex: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 5px 10px 0; border-top: 1px solid var(--row-line); }
.cm-quick-chip { padding: 2px 8px; border-radius: 10px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.cm-quick-chip:hover { border-color: var(--gold-border); }
.cm-sms-input { flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 5px 10px 2px; }
.cm-sms-input textarea { flex: 1; min-width: 0; resize: none; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--input-border); background: var(--input); color: var(--text); font: inherit; font-size: 12.5px; }
.cm-sms-input textarea:focus { outline: none; border-color: var(--gold-line); }
.cm-sms-count { flex: none; padding: 0 10px 5px; font-size: 10.5px; text-align: right; }
.cm-sms.compact .cm-sms-quick { padding-top: 4px; }
.tracking-map.cm-texting { max-height: none; flex: 1 1 auto; min-height: 260px; background: var(--panel-solid); display: flex; flex-direction: column; }

/* ---------- compose slide-out ---------- */
.cm-modes { display: inline-flex; padding: 2px; margin-left: 4px; border-radius: 9px; background: var(--sub-panel); border: 1px solid var(--row-line); }
.cm-mode { padding: 2px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text2); font: inherit; font-size: 12px; cursor: pointer; }
.cm-mode.active { background: var(--active-item-bg); color: var(--text); font-weight: 600; }
.cm-mode:disabled { cursor: default; }
.cm-context { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text3); }
.cm-compose { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; }
.cm-fields { flex: none; display: flex; flex-direction: column; gap: 6px; }
.cm-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cm-row-label { flex: none; width: 52px; font-size: 12px; color: var(--text3); }
.cm-grow { flex: 1; min-width: 0; }
.cm-row .field { height: 32px; }
.cm-chips-input { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 32px; padding: 3px 6px; border-radius: 9px; border: 1px solid var(--input-border); background: var(--input); }
.cm-chips-input:focus-within { border-color: var(--gold-line); }
.cm-chips-input input { flex: 1; min-width: 120px; height: 24px; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 13px; }
.cm-addr { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 8px; border-radius: 7px; font-size: 12px; background: var(--b-teal-bg); color: var(--b-teal-fg); border: 1px solid var(--b-teal-bd); white-space: nowrap; }
.cm-cc-line { display: flex; align-items: center; gap: 8px; }
.cm-cc-line > .cm-row { flex: 1; }
.cm-check { font-size: 12px; margin-left: 60px; }
.cm-body { flex: 1 1 auto; min-height: 160px; resize: none; padding: 9px 11px; border-radius: 10px; font: inherit; font-size: 13px; line-height: 1.5; }
.cm-attach { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cm-linked { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px; }
.cm-error { flex: none; margin: 0; font-size: 12.5px; }
.cm-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--row-line); }
.cm-note { font-size: 11.5px; }
.cm-search { height: 32px; border-radius: 9px; }

/* ---------- bell ---------- */
.cm-bell { position: relative; }
.cm-bell .icon-btn { position: relative; }
.cm-bell-pill { background: var(--red); color: var(--panel-solid); }
.cm-bell-menu { position: absolute; right: -8px; top: calc(100% + 8px); z-index: 31; width: 340px; display: flex; flex-direction: column;
  border-radius: 14px; background: var(--menu-bg); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow); overflow: hidden; }
.cm-bell-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--row-line); font-size: 13.5px; }
.cm-bell-items { max-height: 340px; overflow-y: auto; }
.cm-bell-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--row-line); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cm-bell-item:hover { background: var(--row-hover); }
.cm-tile { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; border: 1px solid; }
.cm-tile.teal { background: var(--b-teal-bg); color: var(--b-teal-fg); border-color: var(--b-teal-bd); }
.cm-tile.green { background: var(--b-green-bg); color: var(--b-green-fg); border-color: var(--b-green-bd); }
.cm-tile.violet { background: var(--b-violet-bg); color: var(--b-violet-fg); border-color: var(--b-violet-bd); }
.cm-tile.amber { background: var(--b-amber-bg); color: var(--b-amber-fg); border-color: var(--b-amber-bd); }
.cm-tile.grey { background: var(--b-neutral-bg); color: var(--b-neutral-fg); border-color: var(--b-neutral-bd); }
.cm-bell-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cm-bell-text strong { font-size: 12.5px; font-weight: 700; }
.cm-bell-text span { font-size: 12px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-bell-time { flex: none; font-size: 11px; color: var(--text3); }
.cm-bell-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 14px; color: var(--text3); font-size: 12.5px; }
.cm-bell-foot { display: flex; align-items: center; padding: 8px 14px; }
.cm-nav-badge { flex: none; min-width: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; background: var(--red); color: var(--panel-solid); }

/* ---------- notifications tab ---------- */
.cm-prefs { flex: none; max-width: 760px; border-radius: 16px; }
.cm-prefs .panel-head { gap: 4px 14px; }
.cm-th { padding: 8px 14px !important; text-align: left; font-weight: 600; }
.cm-prefs-table td { padding: 10px 14px; vertical-align: middle; }
.cm-prefs-table .center, .cm-th.center { text-align: center; }
.cm-prefs-table .switch { justify-content: center; }
.cm-prefs-note { margin: 0; padding: 10px 16px 4px; font-size: 12px; }
.cm-prefs .cm-banner { margin: 6px 16px 14px; }

/* ---------- email accounts ---------- */
.cm-accounts { border-radius: 16px; }
.cm-accounts .panel-head { gap: 4px 14px; }
.cm-acct-table td { vertical-align: middle; }
.cm-acct-table .right, .cm-th.right { text-align: right; }
.cm-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.cm-row-actions .btn { height: 28px; padding: 0 10px; }
.cm-sync-err { margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--red); cursor: help; }
.cm-danger { color: var(--red); }
.cm-acct-form { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; }
.cm-acct-form .cm-foot { padding: 8px 16px 0; }
.cm-acct-form .cm-error { padding: 0 16px; }
.cm-inline-switch { justify-content: flex-end; padding-bottom: 6px; }
.cm-test-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cm-switches { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 4px; }

/* ---------- System Settings additions ---------- */
.cm-mail-head { padding-top: 8px; padding-bottom: 8px; }
.cm-mini-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--sub-panel); border: 1px solid var(--row-line); }
.cm-mini-tab { padding: 3px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.cm-mini-tab.active { background: var(--active-item-bg); color: var(--text); font-weight: 600; }
.cm-url-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cm-url-row .field { flex: 1; min-width: 0; }
.cm-webhook { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 8px; border-radius: 8px; font-size: 11px; background: var(--sub-panel); color: var(--text2); border: 1px solid var(--row-line); }
.cm-sms-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-test-cell { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; min-width: 0; }
.cm-test-cell .cm-result { max-width: 100%; font-size: 11px; }
.cm-sub-note { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text3); }
.cm-sub-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-grid.cm-mail-grid { row-gap: 3px; padding-top: 7px; padding-bottom: 8px; }
.cm-mail-grid .check.tiny { line-height: 13px; min-height: 0; gap: 4px; }
.cm-mail-grid .check.tiny input { width: 11px; height: 11px; margin: 0; }

/* Narrow (a slide-out is open, or a small window): the folders step aside, labels become icons. */
@container cm (max-width: 990px) {
  .cm-searchbox { flex-basis: 170px; width: 170px; }
  .cm-actions .cm-lbl { display: none; }
  .cm-actions .btn-sm { padding: 0 10px; }
}
@container cm (max-width: 900px) {
  .cm-inbox { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
  .cm-inbox > .cm-folders { display: none; }
  .cm-title { display: none; }
  .cm-tabs { margin-left: 0; }
  .cm-tab { padding: 0 8px; }
}
@container cmread (max-width: 440px) {
  .cm-read-bar .cm-lbl { display: none; }
}
.slideout:has(.cm-modes) .slideout-title { flex: none; }

/* ---------- System Status → Reports (cm-rp-) ---------- */
/* The tab fills the window: the date bar and the two cards keep their height, the preview takes
   the rest and its email scrolls inside itself. */
.page:has(.cm-rp) { flex: 1 1 0; min-height: 600px; }
.tab-body:has(> .cm-rp) { flex: 1 1 0; min-height: 0; }
.cm-rp { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.cm-rp > .report-grid { flex: none; }

.cm-rp-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 14px; font-size: 13px; }
.cm-rp-label { color: var(--text3); font-size: 12.5px; }
.cm-rp-range { width: 160px; }
.cm-rp-date { width: 140px; }
.cm-rp-period { display: inline-flex; align-items: center; gap: 6px; color: var(--text2); }
.cm-rp-period svg { color: var(--gold); }
.cm-rp-period.bad { color: var(--red); }
.cm-rp-note {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; font-size: 12.5px;
  background: var(--b-amber-bg); border: 1px solid var(--b-amber-bd); color: var(--b-amber-fg);
}
.cm-rp-note svg { flex: none; }
/* The Weekly Reports agent (it sends the schedules): right end of the date bar. */
.cm-rp-agent {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px;
  color: var(--text2); border: 1px solid var(--row-line); text-decoration: none; white-space: nowrap;
}
.cm-rp-agent svg { color: var(--gold); flex: none; }
.cm-rp-agent:hover { color: var(--text); border-color: var(--gold-border); }
.cm-rp-agent.off { background: var(--b-amber-bg); border-color: var(--b-amber-bd); color: var(--b-amber-fg); }
.cm-rp-agent.off svg { color: currentColor; }
.cm-rp-note + .cm-rp-agent { margin-left: 0; }

.cm-rp-head { padding: 8px 16px; gap: 10px; justify-content: flex-start; flex-wrap: nowrap; }
.cm-rp-head h2 { font-size: 15px; white-space: nowrap; }
.cm-rp-aud { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-rp-body { padding: 8px 16px 10px; display: flex; flex-direction: column; gap: 8px; }
.cm-rp-fields { display: grid; grid-template-columns: 136px 112px minmax(0, 1fr); gap: 8px; }
.cm-rp-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cm-rp-field .kv-label { font-size: 11.5px; }
.cm-rp-actions { display: flex; align-items: center; gap: 6px; min-height: 32px; }
.cm-rp-summary { margin-left: auto; min-width: 0; font-size: 12px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-rp-summary.cm-rp-dirty { color: var(--b-amber-fg); }
.cm-rp-send .field { flex: 1; min-width: 0; height: 32px; }

.cm-rp-preview { flex: 1 1 0; min-height: 220px; display: flex; flex-direction: column; }
.cm-rp-phead { flex: none; padding: 8px 16px; gap: 10px; justify-content: flex-start; flex-wrap: nowrap; }
.cm-rp-phead h2 { font-size: 15px; white-space: nowrap; }
.cm-rp-psub { font-size: 12.5px; white-space: nowrap; }
.cm-rp-close { margin-left: auto; }
/* The email itself (always black on white, like a printed document) scrolls inside the frame. */
.cm-rp-paper { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.cm-rp-frame { flex: 1 1 0; min-height: 0; width: 100%; border: 0; display: block; color-scheme: light; }
.cm-rp-empty { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px; font-size: 13px; text-align: center; }
.cm-rp-empty svg { color: var(--gold); flex: none; }

@media (max-width: 900px) {
  .page:has(.cm-rp) { flex: 1 0 auto; }
  .cm-rp-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cm-rp-fields > .cm-rp-field:last-child { grid-column: span 2; }
  .cm-rp-preview { min-height: 420px; }
}

/* ---------- Customers, Locations, Factoring ----------
   Master-data screens. Record pages are packed to fit 1366×768 without scrolling, like the load
   page. Only theme variables from flextms.css are used, so dark and light both work. */

/* --- list pages --- */
.master-table { min-width: 980px; }
.master-table td { padding: 8px 10px; vertical-align: middle; }
.master-table .pad-left, .master-table th.pad-left .th-btn { padding-left: 22px; }
.master-table td.pad-left { padding-left: 22px; }
.col-center { text-align: center; }
.col-center .th-btn { justify-content: center; }
.th-btn.static-left { cursor: default; }
.data-table tbody tr.inactive-row { opacity: 0.5; }
.data-table tbody tr.inactive-row:hover { opacity: 0.75; }
.small-line { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; }
.overdue { color: var(--red); font-weight: 600; }
.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover { color: var(--gold); text-decoration: underline; }
.cell-sub { display: block; margin-top: 1px; font-size: 12px; color: var(--text3); }
.type-badge { text-transform: uppercase; }

/* --- record page frame ---
   The grids follow the page's own width (container queries), so they reflow when a slide-out
   opens beside the page and the page gets narrower. */
.master-main { flex: 1 0 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; container: record / inline-size; }
/* Forms inside the shared slide-out frame (rail.rs SlideOut). */
.slideout-body > .panel-form { padding: 14px 16px 16px; }

/* --- record page header: one line; a long name ends in "…" instead of wrapping the buttons --- */
.master-main > .load-head { flex-wrap: nowrap; }
.master-main .load-head-left { min-width: 0; }
.master-main .load-head-left > div { min-width: 0; }
.master-main .load-head .btn { flex: none; }
.master-main .load-actions { flex-wrap: nowrap; flex: none; }
.title-line { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
.title-line h1 { margin-right: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-line .badge { flex: none; }
.code-badge { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.06em; }
.notice { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 1px solid; font-size: 13px; }
.notice.tight { padding: 6px 10px; font-size: 12.5px; }
.notice-error { background: var(--b-red-bg); color: var(--b-red-fg); border-color: var(--b-red-bd); }
.notice-amber { background: var(--b-amber-bg); color: var(--b-amber-fg); border-color: var(--b-amber-bd); }
.notice-green { background: var(--b-green-bg); color: var(--b-green-fg); border-color: var(--b-green-bd); }
.notice-dim { background: var(--b-dim-bg); color: var(--b-dim-fg); border-color: var(--b-dim-bd); }

/* --- compact panels --- */
.mini-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: 18px; }
.mini-panel .panel-head.small { padding: 7px 14px 7px 18px; min-height: 40px; }
.mini-panel .panel-head.small h2 { font-size: 15px; }
.mini-body { padding: 9px 18px 11px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.35; min-height: 0; }
.mini-title { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
.mini-title.section-gap { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--row-line); }
.tiny { font-size: 12px; margin: 0; }
.kv.kv-tight { row-gap: 3px; column-gap: 14px; grid-template-columns: max-content minmax(0, 1fr); }
.kv-tight .kv-label { white-space: nowrap; }
.kv-tight .kv-value { overflow: hidden; }
.kv-tight .kv-value > a, .kv-tight .kv-value > span:not(.badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.acct-kv .kv-value { white-space: normal; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.role-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; font-size: 10.5px; font-weight: 600; color: var(--b-teal-fg); background: var(--b-teal-bg); border: 1px solid var(--b-teal-bd); }
.kv.kv-form { row-gap: 5px; }
.kv-form .kv-label { font-size: 12.5px; }
.stack-lines { display: flex; flex-direction: column; }
.notes-block { display: flex; flex-direction: column; gap: 3px; }
.acct-kv .kv-value { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notes-block p { margin: 0; font-size: 12.5px; color: var(--text2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notes-block p.muted { color: var(--text3); }
.req { color: var(--red); }
.red { color: var(--red); }
.disabled-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--text3); }

/* --- form inputs --- */
.input {
  width: 100%; min-width: 0; height: 30px; padding: 0 10px; border-radius: 9px;
  background: var(--input); border: 1px solid var(--input-border); color: var(--text); font: inherit; font-size: 13px;
}
textarea.input { height: auto; padding: 6px 10px; resize: vertical; line-height: 1.4; }
.input::placeholder { color: var(--text3); }
.input:focus { outline: none; border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--gold-border); }
.input:disabled, .input[readonly] { opacity: 0.75; }
.input.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; letter-spacing: 0.04em; height: 38px; color: var(--gold); }
.input-select { width: 100%; }
.input-select select { height: 30px; padding: 0 30px 0 10px; border-radius: 9px; font-size: 13px; }
.input-select .select-caret { top: 9px; right: 10px; }
.csz { display: grid; grid-template-columns: minmax(0, 1fr) 52px 76px; gap: 6px; }
.sz { display: grid; grid-template-columns: 52px 96px; gap: 6px; }
.money-input { display: flex; align-items: center; gap: 6px; }
.money-input .input { max-width: 160px; }
.panel-form .check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; }
.panel-form .check input { width: 15px; height: 15px; accent-color: var(--check); margin: 0; }
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 34px; height: 19px; border-radius: 10px; background: var(--b-dim-bg); border: 1px solid var(--b-dim-bd); transition: background 0.15s ease; }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 7px; background: var(--text3); transition: transform 0.15s ease, background 0.15s ease; }
.switch input:checked + .switch-track { background: var(--b-green-bg); border-color: var(--b-green-bd); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(15px); background: var(--green); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--gold-line); outline-offset: 2px; }

/* --- slide-out forms --- */
.panel-form { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.panel-form > label, .form-row label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text2); }
.panel-form p { margin: 0; }
.panel-form small { display: block; margin-top: 3px; font-size: 11.5px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.form-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.form-row.checks label { margin: 0; font-weight: 400; color: var(--text); font-size: 13px; }
.form-actions { display: flex; gap: 8px; margin-top: 4px; }
.panel-form .form-error { margin: 0; }

.col-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.poc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.poc-card { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--th-bg); border: 1px solid var(--row-line); min-width: 0; font-size: 12.5px; }
.poc-card .mini-title { margin-bottom: 2px; font-size: 10px; }
.poc-card strong { font-size: 13px; }
.poc-line { display: flex; align-items: center; gap: 5px; color: var(--text3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poc-line svg { flex: none; }
.empty-card { justify-content: center; }

.stat-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat-tile { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 12px; border-radius: 12px; background: var(--th-bg); border: 1px solid var(--row-line); min-width: 0; }
.stat-tile.alert { border-color: var(--b-red-bd); background: var(--b-red-bg); }
.stat-tile .stat-label, .ytd-strip .stat-label { letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-big { font-family: Outfit, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.15; white-space: nowrap; }
.stat-tile.alert .balance { color: var(--red); }
.aging { display: flex; flex-direction: column; gap: 5px; }
.aging-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--b-dim-bg); border: 1px solid var(--row-line); }
.aging-seg { display: block; height: 100%; min-width: 4px; }
.aging-none { font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--text3); }
.seg-green { background: var(--green); }
.seg-teal { background: var(--b-teal-fg); }
.seg-amber { background: var(--b-amber-fg); }
.seg-orange { background: color-mix(in srgb, var(--b-amber-fg) 50%, var(--b-red-fg)); }
.seg-red { background: var(--red); }
.aging-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.aging-cell { display: flex; flex-direction: column; min-width: 0; }
.aging-label { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text3); white-space: nowrap; }
.aging-dot { width: 7px; height: 7px; border-radius: 4px; flex: none; }
.aging-cell strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ytd-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 12px; border: 1px solid var(--row-line); overflow: hidden; }
.ytd-strip > div { display: flex; flex-direction: column; gap: 0; padding: 5px 10px; min-width: 0; }
.ytd-strip > div + div { border-left: 1px solid var(--row-line); }
.ytd-strip strong { font-family: Outfit, sans-serif; font-size: 16px; font-weight: 500; white-space: nowrap; }
.acct-kv .kv-value { font-size: 12.5px; }

.mini-table-wrap { max-height: 124px; overflow-y: auto; border-radius: 10px; border: 1px solid var(--row-line); scrollbar-width: thin; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mini-table th { position: sticky; top: 0; padding: 5px 8px; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--text3); background: var(--panel-solid); }
.mini-table td { padding: 4px 8px; border-top: 1px solid var(--row-line); white-space: nowrap; }
.mini-table .num { text-align: right; }
.mini-table .badge { padding: 1px 7px; font-size: 10.5px; }
.mini-table tbody tr:hover { background: var(--row-hover); }
.empty-line { display: flex; align-items: center; gap: 6px; }

.person-list { list-style: none; margin: 0; padding: 4px 6px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.mini-panel > .person-list { max-height: 268px; }
.mini-body .person-list { padding: 0; max-height: 150px; }
.person { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 6px 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.person:hover { background: var(--row-hover); border-color: var(--row-line); }
.person.inactive-row, .person-row.inactive-row { opacity: 0.55; }
.person-top { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.person-top strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-top .badge { padding: 1px 7px; font-size: 10px; }
.person-sub { font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; color: var(--text3); border: 1px dashed var(--row-line); opacity: 0.55; white-space: nowrap; }
.flag.on { color: var(--b-green-fg); background: var(--b-green-bg); border: 1px solid var(--b-green-bd); opacity: 1; }
.person-row { display: flex; align-items: center; gap: 4px; }
.person-row .person { flex: 1; }
.row-actions { display: flex; gap: 2px; }
.danger-hover:hover { color: var(--red); }
.mini-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 20px; color: var(--text3); font-size: 13px; }
.mini-empty.small { padding: 8px; }
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--row-line); }
.copy-row { display: flex; gap: 6px; }
.copy-row .input { font-size: 12px; color: var(--text2); }

/* --- location page --- */
.location-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr); }
.super-search { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px; border: 1px dashed var(--gold-border); background: var(--th-bg); color: var(--text3); font-size: 13px; }
.super-search .input { flex: 1; }
.map-card .mini-body { padding: 0; gap: 0; }
.location-map { height: 230px; background: var(--map-sea); border-bottom: 1px solid var(--row-line); }
.map-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; color: var(--text3); font-size: 12.5px; }
.map-meta { padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.button-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-note { display: inline-flex; margin-left: 6px; }
.long-text { white-space: pre-wrap; }

/* --- factoring page --- */
.factor-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 26px; padding: 8px 18px 10px; font-size: 13px; }
.factor-info > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.date-range { display: flex; align-items: center; gap: 6px; }
.payments .panel-head.small { flex-wrap: nowrap; gap: 8px; }
.payments .mini-table td:nth-child(3) { white-space: normal; min-width: 120px; }
.payments .mini-table th { white-space: nowrap; }

.payments .mini-table-wrap { max-height: 214px; }
.preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.preset-row .btn-xs { height: 28px; padding: 0 10px; }
.preset-row .btn-xs.on { border-color: var(--gold-border); color: var(--gold); background: var(--active-item-bg); }
.date-input { width: 122px; height: 28px; padding: 0 6px; font-size: 12px; }
.stat-quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat-quad .stat-tile { padding: 6px 10px; }
.stat-quad .stat-big { font-size: 18px; }
.tile-link { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 7px; border-radius: 7px; font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; color: var(--gold); border: 1px solid var(--gold-border); text-decoration: none; vertical-align: middle; }
.tile-link:hover { background: var(--active-item-bg); }
.total-row td { font-weight: 700; border-top: 1px solid var(--divider); }
.badge.pill-total { font-size: 12px; padding: 3px 10px; }

@container record (max-width: 940px) {
  .location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container record (max-width: 820px) {
  .factor-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container record (max-width: 620px) {
  .location-grid, .factor-info, .poc-grid, .stat-quad { grid-template-columns: minmax(0, 1fr); }
}
@container record (max-width: 760px) {
  .master-main > .load-head, .master-main .load-actions { flex-wrap: wrap; }
}

/* --- record tabs (customer, carrier, factoring company) ---
   48TMS showed these records in tabs; the founder asked for the tabs back (2026-10-21) instead of
   one page of cards. Each tab is one full-width panel that reaches the bottom of the page. */
.record-tab { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; }
.record-tab > .mini-panel { flex: 1 0 auto; }
.mini-body.split-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 36px; align-items: start; padding: 14px 22px 16px; }
.split-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.split-col > .sub-head:first-child { border-top: 0; padding-top: 0; }
.record-tab .mini-panel > .person-list, .record-tab .mini-body .person-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-content: start; gap: 4px 10px; max-height: none;
}
.record-tab .mini-panel > .person-list { padding: 8px 12px 12px; }
.record-tab .mini-table-wrap { max-height: 360px; }
@container record (max-width: 760px) {
  .mini-body.split-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Documents slide-out and viewer (doc_slideout.rs) ----------
   ds- = the load's slot list, dv- = the document viewer. The list fits the slide-out without
   scrolling on laptop screens; the viewer fills the (wider) slide-out. */

/* The loads list highlights the load an open slide-out is showing. */
.data-table tbody tr.focused { background: var(--active-item-bg); box-shadow: inset 3px 0 0 var(--gold-line); }

/* --- slot list --- */
.ds { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; min-height: 0; }
.ds-load { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text2); }
.ds-load > svg { color: var(--gold); flex: none; }
.ds-load-num { font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; }
.ds-load-num:hover { color: var(--gold); text-decoration: underline; }
.ds-load .badge { padding: 2px 8px; font-size: 10px; flex: none; }
.ds-cust { flex: 1 1 auto; min-width: 0; color: var(--text3); }
.ds-onfile { flex: none; font-size: 12px; color: var(--text3); white-space: nowrap; }
.ds-search { height: 34px; border-radius: 10px; padding: 0 10px; }
.ds-search input { font-size: 13px; }
.ds-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--row-line); border-radius: 12px; overflow: hidden; }
.ds-slot {
  display: grid; grid-template-columns: 18px 18px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 6px 10px 6px 8px; min-height: 42px; font-size: 12.5px; transition: background 0.12s ease;
}
.ds-slot + .ds-slot { border-top: 1px solid var(--row-line); }
.ds-slot:hover { background: var(--row-hover); }
.ds-slot.drop { background: var(--active-item-bg); box-shadow: inset 0 0 0 1px var(--gold-line); }
.ds-num { font-size: 11px; color: var(--text3); text-align: right; font-variant-numeric: tabular-nums; }
.ds-state { width: 16px; height: 16px; border-radius: 8px; border: 1.5px solid var(--divider); display: flex; align-items: center; justify-content: center; color: transparent; }
.ds-state.on { border-color: var(--b-green-bd); background: var(--b-green-bg); color: var(--green); }
.ds-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ds-label { font-weight: 600; color: var(--text); }
.ds-slot:not(.filled) .ds-label { color: var(--text2); font-weight: 500; }
.ds-hint { font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-file {
  display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; padding: 0; border: 0; background: none;
  color: var(--text2); font: inherit; font-size: 11.5px; text-align: left; cursor: pointer;
}
.ds-file svg { flex: none; color: var(--gold); }
.ds-file:hover .clip { color: var(--gold); text-decoration: underline; }
.ds-meta { flex: none; margin-left: auto; padding-left: 6px; color: var(--text3); white-space: nowrap; }
.ds-act .btn-xs { height: 26px; padding: 0 10px; font-size: 12px; }

/* --- viewer: one bar, the markup tools, then the pages --- */
.slideout-body:has(> .dv) { overflow: hidden; }
.dv { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dv-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-bottom: 1px solid var(--row-line); min-width: 0; }
.dv-name { flex: 0 1 auto; display: flex; align-items: baseline; gap: 8px; min-width: 60px; line-height: 1.2; }
.dv-name strong { font-size: 13px; min-width: 40px; }
.dv-sub { flex: none; font-size: 11.5px; color: var(--text3); white-space: nowrap; }
.dv-group { display: flex; align-items: center; gap: 1px; padding: 2px; border-radius: 9px; border: 1px solid var(--row-line); background: var(--th-bg); flex: none; }
.dv-group .icon-btn.xs, .dv-bar > .icon-btn.xs { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.dv-group .icon-btn.xs:disabled { opacity: 0.35; cursor: default; }
.dv-mode { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--text3); cursor: pointer; }
.dv-mode:hover { color: var(--text); }
.dv-mode.on { background: var(--active-item-bg); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-border); }
.dv-fit { min-width: 42px; height: 26px; padding: 0 6px; border: 0; border-radius: 7px; background: transparent; color: var(--text2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.dv-fit.on { color: var(--gold); background: var(--active-item-bg); }
.dv-count { min-width: 44px; text-align: center; font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.dv-versions { position: relative; flex: none; }
.dv-vbtn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--row-line); background: var(--th-bg); color: var(--text2); font: inherit; font-size: 12px; cursor: pointer; }
.dv-vbtn svg { color: var(--gold); }
.dv-vbtn.old { border-color: var(--b-amber-bd); background: var(--b-amber-bg); color: var(--b-amber-fg); }
.dv-vbtn .count-pill { position: static; background: var(--b-neutral-bg); color: var(--text2); }
.dv-vmenu { min-width: 250px; }
.dv-vitem { flex-direction: column; align-items: flex-start; gap: 1px; }
.dv-vitem span { font-size: 11.5px; color: var(--text3); }
.dv-vitem.on { background: var(--active-item-bg); }
.dv-vitem.on strong { color: var(--gold); }

.mk-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--row-line); min-height: 36px; min-width: 0; }
.mk-tools { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; min-width: 0; }
.mk-tool { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--text2); cursor: pointer; flex: none; }
.mk-tool:hover { background: var(--row-hover); color: var(--text); }
.mk-tool.on { background: var(--active-item-bg); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-border); }
.mk-tool:disabled { opacity: 0.3; cursor: default; background: transparent; }
.mk-sep { width: 1px; height: 18px; margin: 0 5px; background: var(--divider); flex: none; }
.mk-swatch { width: 18px; height: 18px; margin: 0 2px; border-radius: 9px; border: 2px solid transparent; background: var(--sw); cursor: pointer; flex: none; box-shadow: 0 0 0 1px var(--row-line); }
.mk-swatch.on { border-color: var(--panel-solid); box-shadow: 0 0 0 2px var(--gold-line); }
.mk-select { height: 26px; padding: 0 6px; border-radius: 7px; border: 1px solid var(--input-border); background: var(--input); color: var(--text); font: inherit; font-size: 12px; }
.mk-select option { background: var(--panel-solid); }
.mk-link { border: 0; background: none; color: var(--gold); font: inherit; font-size: 12px; cursor: pointer; padding: 0 4px; white-space: nowrap; }
.mk-link:hover { text-decoration: underline; }
.mk-reason { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text3); }
.mk-bar .btn-xs { height: 26px; padding: 0 10px; font-size: 12px; flex: none; }

.dv-body { flex: 1 1 auto; min-height: 0; display: flex; }
.dv-thumbs { flex: none; width: 112px; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--row-line); scrollbar-width: thin; }
.dv-thumb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--text3); font: inherit; font-size: 11px; cursor: pointer; }
.dv-thumb img { display: block; width: 88px; background: #FFFFFF; border-radius: 3px; border: 2px solid transparent; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.dv-thumb.on img { border-color: var(--gold-line); }
.dv-thumb.on span { color: var(--gold); font-weight: 600; }
/* Unsaved markup on this page. */
.dv-thumb.marked::after { content: ""; position: absolute; top: 4px; right: 6px; width: 9px; height: 9px; border-radius: 5px; background: var(--red); box-shadow: 0 0 0 2px var(--panel-solid); }
.dv-main { flex: 1 1 auto; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; background: var(--map-sea); scrollbar-width: thin; }
.dv-sheet { position: relative; margin: 0 auto; background: #FFFFFF; border-radius: 2px; box-shadow: 0 4px 22px rgba(0,0,0,0.35); }
.dv-page { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 2px; }
/* Night pages: inverted, with hues turned back so colors (stamps, logos) stay recognisable. The
   markup layer isn't inverted, so ink keeps its color. */
.dv-night .dv-page, .dv-night .dv-thumb img { filter: invert(0.92) hue-rotate(180deg); }
.dv-night .dv-sheet { background: #141414; }

/* --- markup layer --- */
.mk-layer { position: absolute; inset: 0; touch-action: none; user-select: none; }
/* Cursor per tool (mk-c-*: these names must not match other classes in this sheet). */
.mk-layer.mk-c-draw { cursor: crosshair; }
.mk-layer.mk-c-text { cursor: text; }
.mk-layer.mk-c-select { cursor: default; }
.mk-layer.mk-c-erase { cursor: cell; }
.mk-layer.mk-c-off { pointer-events: none; }
.mk-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk-hl { opacity: 0.38; mix-blend-mode: multiply; }
.mk-note { fill: #FFF3A0; stroke: #D9B033; stroke-width: 0.8; }
.mk-sel { fill: none; stroke: var(--gold-line); stroke-width: 1; stroke-dasharray: 4 3; }
.mk-input {
  position: absolute; z-index: 2; min-width: 140px; max-width: 70%; padding: 2px 4px; margin: -3px 0 0 -5px;
  font-family: Helvetica, Arial, sans-serif; font-size: calc(var(--mk-size) * 1px * var(--mk-scale, 1)); line-height: 1.25;
  background: rgba(255,255,255,0.92); border: 1px dashed var(--gold-line); border-radius: 4px; outline: none; resize: both;
}
.mk-input.note { background: #FFF3A0; border: 1px solid #D9B033; }
.mk-hint { font-size: 12px; color: var(--text3); white-space: nowrap; }
.mk-width { width: 30px; }
.mk-dot { width: var(--d); height: var(--d); border-radius: 50%; background: currentColor; display: block; }

/* --- signature and stamp dialogs (full screen, like a sheet over the app) --- */
.mk-pad-backdrop { z-index: 90; background: rgba(4, 8, 9, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mk-pad { max-width: 560px; padding: 0; gap: 0; }
.mk-pad-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px 22px; border-bottom: 1px solid var(--row-line); }
.mk-pad-head h2 { margin: 0; flex: 1; font-family: Outfit, sans-serif; font-size: 19px; font-weight: 500; }
.mk-pad-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 22px 14px; }
.mk-pad-label { margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
.mk-check-label { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--text3); }
.mk-pad-foot { display: flex; align-items: center; gap: 10px; padding: 12px 22px 14px; border-top: 1px solid var(--row-line); }
.mk-pad-foot.center { justify-content: center; font-size: 13px; }
.mk-reuse { font-size: 13px; }
/* Checkerboard = transparent. */
.mk-checker {
  background-color: #FFFFFF;
  background-image: linear-gradient(45deg, #E6E6E6 25%, transparent 25%), linear-gradient(-45deg, #E6E6E6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #E6E6E6 75%), linear-gradient(-45deg, transparent 75%, #E6E6E6 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.mk-saved { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-saved-item { position: relative; }
.mk-saved-pick {
  display: flex; align-items: center; justify-content: center; width: 132px; height: 52px; padding: 4px 8px; border-radius: 10px;
  border: 2px solid transparent; cursor: pointer;
  background-color: #FFFFFF;
  background-image: linear-gradient(45deg, #EDEDED 25%, transparent 25%), linear-gradient(-45deg, #EDEDED 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #EDEDED 75%), linear-gradient(-45deg, transparent 75%, #EDEDED 75%);
  background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.mk-saved-pick:hover { border-color: var(--gold-line); }
.mk-saved-pick img { max-width: 100%; max-height: 100%; }
.mk-saved-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 10px; border: 1px solid var(--panel-border); background: var(--panel-solid); color: var(--text2); display: none; align-items: center; justify-content: center; cursor: pointer; }
.mk-saved-item:hover .mk-saved-x { display: flex; }
.mk-saved-x:hover { color: var(--red); }
.mk-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--th-bg); border: 1px solid var(--row-line); }
.mk-seg-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--text2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mk-seg-btn.on { background: var(--active-item-bg); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-border); }
.mk-typed { height: 38px; }
.mk-pad-area {
  position: relative; height: 190px; border-radius: 12px; overflow: hidden; border: 1px solid var(--input-border);
  background-color: #FFFFFF;
  background-image: linear-gradient(45deg, #E6E6E6 25%, transparent 25%), linear-gradient(-45deg, #E6E6E6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #E6E6E6 75%), linear-gradient(-45deg, transparent 75%, #E6E6E6 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.mk-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.mk-canvas.typing { cursor: default; }
.mk-pad-hint { position: relative; margin: 0; text-align: center; font-size: 12.5px; color: var(--text3); }
/* Makes the browser load the handwriting font before the canvas needs it. */
.mk-font-probe { position: absolute; left: 0; top: 0; font-family: "Dancing Script", cursive; font-weight: 500; visibility: hidden; pointer-events: none; }
.mk-stamp-pad { max-width: 600px; }
.mk-stamp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mk-stamp-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 14px 10px; border-radius: 14px; cursor: pointer;
  border: 2px solid transparent; color: #666666; font: inherit; font-size: 13px;
  background-color: #FFFFFF;
  background-image: linear-gradient(45deg, #EDEDED 25%, transparent 25%), linear-gradient(-45deg, #EDEDED 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #EDEDED 75%), linear-gradient(-45deg, transparent 75%, #EDEDED 75%);
  background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.mk-stamp-card:hover { border-color: var(--gold-line); }
.mk-stamp-svg { width: 100%; height: 66px; }
.mk-stamp-preview {
  display: flex; align-items: center; justify-content: center; height: 130px; padding: 16px; border-radius: 14px;
  background-color: #FFFFFF;
  background-image: linear-gradient(45deg, #EDEDED 25%, transparent 25%), linear-gradient(-45deg, #EDEDED 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #EDEDED 75%), linear-gradient(-45deg, transparent 75%, #EDEDED 75%);
  background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.mk-stamp-preview .mk-stamp-svg { height: 100%; }
.mk-stamp-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-swatch.big { width: 30px; height: 30px; border-radius: 15px; margin: 0; }
.mk-swatch.custom { position: relative; overflow: hidden; background: conic-gradient(#F44336, #FFEB3B, #4CAF50, #00BCD4, #3F51B5, #E91E63, #F44336); cursor: pointer; }
.mk-swatch.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* Scrolled into view below the sticky column header, not under it. */
.list-panel tbody tr { scroll-margin-top: 46px; scroll-margin-bottom: 6px; }

/* ---------- Documents tab (documents.rs); viewer frame from ratecon.css ---------- */
.page:has(> .dt) { flex: 1 1 0; min-height: 0; container-type: inline-size; }
.dt { flex: 1 1 0; min-height: 440px; display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 14px; }

.dt-types { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.dt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.dt-item {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 0; border-radius: 9px;
  background: transparent; color: var(--text2); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.dt-item:hover { background: var(--row-hover); color: var(--text); }
.dt-item.active { background: var(--active-item-bg); color: var(--active-text); box-shadow: inset 2px 0 0 var(--gold-line); }
.dt-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--divider); }
.dt-dot.on { background: var(--green); box-shadow: 0 0 8px rgba(111, 227, 168, 0.45); }
.dt-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-missing { color: var(--text3); font-size: 12px; }
.dt-item .count-pill { min-width: 20px; height: 18px; line-height: 18px; border-radius: 9px; font-size: 10.5px; padding: 0 6px; background: var(--b-green-bg); color: var(--b-green-fg); }

.dt-view.drag { outline: 2px dashed var(--gold-line); outline-offset: -6px; }
.dt-title { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.dt-vis { display: flex; align-items: center; gap: 5px; margin-left: 12px; min-width: 0; }
.dt-vis-label { font-size: 11px; color: var(--text3); white-space: nowrap; }
.vis-chip {
  height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--input-border); background: transparent;
  color: var(--text3); font: inherit; font-size: 11.5px; white-space: nowrap; cursor: pointer;
}
.vis-chip.on { border-color: var(--b-teal-bd); background: var(--b-teal-bg); color: var(--b-teal-fg); }
.vis-chip:hover:not(:disabled) { border-color: var(--gold-line); }
.vis-chip:disabled { cursor: default; }
.rc-viewer-bar a.btn { text-decoration: none; }
.danger-text { color: var(--red) !important; }
.danger-text.confirm { background: var(--b-red-bg); border-color: var(--b-red-bd); }

.dt-error { margin: 8px 14px 0; font-size: 12.5px; }
.dt-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.dt-drop {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed var(--divider); border-radius: 14px; background: var(--sub-panel); color: var(--text2);
  font: inherit; font-size: 13px; cursor: pointer;
}
.dt-drop:hover:not(:disabled) { border-color: var(--gold-line); color: var(--text); }
.dt-drop:disabled { cursor: default; }
.dt-drop svg { color: var(--gold); }
.dt-drop strong { font-size: 15px; font-weight: 600; color: var(--text); }
.dt-drop small { font-size: 11.5px; color: var(--text3); }
.dt-strip { flex: none; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.dt-thumb {
  flex: none; width: 62px; height: 62px; padding: 0; border-radius: 10px; border: 1px solid var(--panel-border);
  background: var(--sub-panel); color: var(--text3); display: grid; place-items: center; overflow: hidden; cursor: pointer;
}
.dt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dt-thumb.active { border-color: var(--gold-line); box-shadow: 0 0 0 2px var(--active-item-bg); }
.dt-thumb.add { border-style: dashed; color: var(--gold); }
.dt-meta { flex: none; font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-preview {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--panel-border); background: #fff;
}
.dt-preview iframe { width: 100%; height: 100%; border: 0; }
.dt-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dt-preview .tracking-empty { color: #555; }
.dt-preview .tracking-empty strong { color: #222; }

/* A slide-out is open: slimmer type list, shorter bar. */
@container (max-width: 900px) {
  .dt { grid-template-columns: 210px minmax(0, 1fr); gap: 10px; }
  .dt-title, .dt-vis, .dt-btn-label { display: none; }
}
@media (max-width: 860px) {
  .page:has(> .dt) { flex: 1 0 auto; }
  .dt { grid-template-columns: minmax(0, 1fr); }
  .dt-view { min-height: 520px; }
}

/* Outside services (crates/app/src/ig_*.rs, pages/ig_*.rs, crates/integrations/src/public.rs).
   Prefix: ig-. Colors come from the theme tokens in flextms.css. */

/* ---------- Super Search (Google Places) ---------- */
.ig-ss { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ig-ss-icon { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--gold); background: var(--active-item-bg); }
.ig-ss-off .ig-ss-icon { color: var(--text3); background: var(--th-bg); }
.ig-ss-input { flex: 1 1 0; min-width: 0; }
.ig-ss-input:disabled { opacity: 0.7; cursor: not-allowed; }
.ig-ss-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 45; margin: 0; padding: 4px; list-style: none;
  border-radius: 12px; background: var(--menu-bg); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
}
.ig-ss-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; border-radius: 9px; cursor: pointer; color: var(--text); }
.ig-ss-item svg { flex: none; margin-top: 2px; color: var(--gold); }
.ig-ss-item:hover, .ig-ss-item.on { background: var(--row-hover); }
.ig-ss-item.on { box-shadow: inset 2px 0 0 var(--gold-line); }
.ig-ss-text { display: flex; flex-direction: column; min-width: 0; }
.ig-ss-text strong { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-ss-text .sub { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-ss-foot { padding: 4px 8px 2px; text-align: right; font-size: 10.5px; color: var(--text3); letter-spacing: 0.02em; }
.ig-ss-empty { padding: 10px 12px; font-size: 12.5px; color: var(--text3); }
.ig-ss-error { position: absolute; top: calc(100% + 3px); left: 32px; right: 0; z-index: 44; font-size: 12px; color: var(--red); background: var(--panel-solid); padding: 4px 8px; border-radius: 8px; border: 1px solid var(--b-red-bd); }
.ig-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gold-border); border-top-color: var(--gold); animation: ig-spin 0.8s linear infinite; }
@keyframes ig-spin { to { transform: rotate(360deg); } }
.stop-editor > .ig-ss { margin: -2px 0 2px; }
.ig-loc-super { padding: 3px 8px; }
.ig-loc-super .ig-ss { flex: 1 1 auto; }
.wi-place-edit > .ig-ss { margin-bottom: 4px; }
.ig-bolt-btn { cursor: pointer; background: transparent; font: inherit; }
.ig-bolt-btn:hover, .ig-bolt-btn.on { opacity: 1; color: var(--gold); border-color: var(--gold-border); border-style: solid; }
.ig-ss.wi-super .ig-ss-input { height: 32px; }

/* ---------- Google map ---------- */
.ig-gmap-wrap { position: relative; width: 100%; height: 100%; min-height: 120px; }
.ig-gmap { position: absolute; inset: 0; }
.ig-gmap-note { position: absolute; left: 8px; bottom: 8px; right: 8px; padding: 5px 8px; border-radius: 8px; font-size: 11.5px; background: var(--panel-solid); color: var(--text2); border: 1px solid var(--panel-border); }
.map-pin.truck .dot { fill: var(--gold); stroke: var(--map-sea); }
.map-pin.truck .halo { fill: var(--gold); animation: ig-pulse 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ig-pulse { 0% { opacity: 0.45; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.6); } }

/* ---------- Route figures ---------- */
.ig-route-note { max-width: 180px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ig-route-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text2); }
.ig-route-line svg { color: var(--gold); }
.ig-route-line strong { font-weight: 600; color: var(--text); margin-right: 6px; }

/* ---------- Live tracking ---------- */
.ig-live { position: relative; display: inline-flex; }
.ig-live .icon-btn.active { color: var(--gold); background: var(--active-item-bg); }
.ig-live-badge { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--panel-solid); }
.ig-live-pop { left: auto; right: -40px; width: 300px; max-width: calc(100vw - 40px); padding: 8px 10px 10px; gap: 6px; }
.ig-live-pop .popover-title { padding: 2px 0; }
.ig-live-status { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.4; }
.ig-live-note { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--b-amber-fg); }
.ig-live-note svg { flex: none; margin-top: 2px; }
.ig-live-req { align-self: flex-start; }
.ig-live-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.ig-live-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; }
.ig-live-time { color: var(--text3); font-variant-numeric: tabular-nums; }
.ig-live-place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-live-line { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; font-size: 12px; }
.ig-live-line strong { font-weight: 600; flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.ig-live-line .muted { flex: none; }
.ig-live-line.stale { opacity: 0.75; }
.ig-live-progress { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text2); }
.ig-live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text3); }
.ig-live-dot.on { background: var(--green); box-shadow: 0 0 0 0 var(--b-green-bd); animation: ig-ring 1.8s ease-out infinite; }
@keyframes ig-ring { 0% { box-shadow: 0 0 0 0 var(--b-green-bd); } 100% { box-shadow: 0 0 0 7px transparent; } }

/* ---------- FMCSA ---------- */
.ig-fm-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--b-green-bd); background: var(--b-green-bg); font-size: 12.5px; }
.ig-fm-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ig-fm-head > svg { color: var(--green); flex: none; }
.ig-fm-name { font-family: Outfit, sans-serif; font-size: 15px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.ig-fm-sub { display: flex; align-items: center; gap: 5px; color: var(--text2); font-size: 12px; }
.ig-fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px 12px; }
.ig-fm-cell { display: flex; flex-direction: column; min-width: 0; }
.ig-fm-k { color: var(--text3); font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.ig-fm-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ig-fm-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ig-fm-folded { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--b-green-bd); background: var(--b-green-bg); font-size: 12.5px; }
.ig-fm-folded > svg { color: var(--green); flex: none; }
.ig-fm-folded > span { flex: 1 1 160px; min-width: 0; }
.ig-fm-error { display: flex; gap: 6px; align-items: center; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; color: var(--b-red-fg); background: var(--b-red-bg); border: 1px solid var(--b-red-bd); }
.ig-fm-refresh.active { border-color: var(--gold-border); color: var(--gold); }
.ig-fm-slide { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.ig-fm-diffs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ig-fm-diffs li { padding: 7px 9px; border-radius: 10px; border: 1px solid var(--row-line); background: var(--th-bg); display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.ig-fm-was { color: var(--text2); text-decoration: line-through; text-decoration-color: var(--text3); overflow-wrap: anywhere; }
.ig-fm-now { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.ig-fm-same { display: flex; align-items: center; gap: 6px; margin: 0; }
.ig-fm-same svg { color: var(--green); }
.ig-key-test { margin: 0; }

/* ---------- Load board on the working load ---------- */
.ig-board-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ig-board-ctl .wi-check { font-size: 12.5px; }
.ig-small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.ig-req-btn { height: 26px; padding: 0 9px; gap: 6px; }
.ig-req-modal { max-width: 640px; max-height: calc(100vh - 40px); }
.ig-req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 56vh; }
.ig-req { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--row-line); background: var(--th-bg); display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.ig-req-head, .ig-req-contact, .ig-req-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ig-req-head strong { font-size: 14px; }
.ig-req-contact svg { color: var(--gold); }
.ig-req-msg { margin: 0; padding: 6px 9px; border-left: 2px solid var(--gold-border); color: var(--text2); white-space: pre-wrap; }
.ig-clip { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ---------- Public pages (/track, /loadboard) ---------- */
.app.ig-pub { min-height: 100vh; }
.ig-pub [hidden] { display: none !important; }
.ig-pub-logo { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--logo-mark); box-shadow: var(--logo-glow); display: flex; align-items: center; justify-content: center; color: #17130A; font-family: Outfit, sans-serif; font-weight: 600; font-size: 18px; }
.ig-pub-theme { flex: none; color: var(--gold); }
.app[data-theme="dark"] .ig-pub-theme .ig-moon, .app[data-theme="light"] .ig-pub-theme .ig-sun { display: none; }
.ig-pub-theme span { display: flex; }
.ig-pub-center { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; }
.ig-pub-card { width: 100%; max-width: 520px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ig-pub-card h1 { margin: 0; font-family: Outfit, sans-serif; font-size: 22px; font-weight: 500; }
.ig-pub-card p { margin: 0; color: var(--text2); line-height: 1.5; }
.ig-pub-errors { width: 100%; padding: 8px 12px; border-radius: 10px; background: var(--b-red-bg); border: 1px solid var(--b-red-bd); color: var(--b-red-fg); font-size: 13px; }
.ig-pub-errors ul { margin: 4px 0 0; padding-left: 18px; }
.ig-grow { flex: 1 1 auto; }

/* The driver's page: phone first. */
.ig-track { max-width: 480px; margin: 0 auto; padding: 18px 16px 24px; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.ig-track-head { display: flex; align-items: center; gap: 10px; }
.ig-track-who { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.ig-track-who strong { font-family: Outfit, sans-serif; font-size: 17px; font-weight: 500; }
.ig-track-who span { color: var(--text3); font-size: 13px; }
.ig-track .ig-pub-card { max-width: none; align-items: stretch; }
.ig-track-card .btn-block { height: 54px; font-size: 16px; border-radius: 14px; }
.ig-track-status { min-height: 1.4em; font-size: 14px; font-weight: 600; color: var(--text2); }
.ig-track-status.on { color: var(--green); }
.ig-track-status.warn { color: var(--b-amber-fg); }
.ig-track-status.stopped { color: var(--text); }
.ig-track-last { font-size: 12.5px; color: var(--text3); }
.ig-track-foot { margin: 0; text-align: center; font-size: 12px; color: var(--text3); }

/* The load board: one screen, the list scrolls inside its panel. */
.ig-board { height: 100vh; box-sizing: border-box; max-width: 1480px; margin: 0 auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.ig-board-bar { flex: none; display: flex; align-items: center; gap: 10px; }
.ig-board-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 0; }
.ig-board-brand strong { display: block; font-family: Outfit, sans-serif; font-size: 20px; font-weight: 500; white-space: nowrap; }
.ig-board-tag { display: block; color: var(--text3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-board-filters { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 10px 16px; border-radius: 18px; overflow: visible; }
.ig-f { display: flex; flex-direction: column; gap: 3px; flex: 1 1 120px; min-width: 0; }
.ig-f.wide { flex: 2 1 160px; }
.ig-f > span:first-child { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--text3); }
.ig-f .select-wrap select { height: 30px; border-radius: 8px; font-size: 13px; padding: 0 30px 0 9px; }
.ig-f textarea.field { height: auto; padding: 6px 9px; resize: vertical; line-height: 1.4; }
.ig-f-actions { display: flex; gap: 8px; flex: none; }
.ig-board-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 18px; }
.ig-board-list .panel-head h2 .count-pill { position: static; }
.ig-board-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ig-board-table { min-width: 860px; }
.ig-board-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-solid); }
.ig-board-table td { vertical-align: middle; }
.ig-board-pages { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--row-line); font-size: 12.5px; }
.ig-off { opacity: 0.45; pointer-events: none; }
.ig-ref { font-weight: 700; color: var(--gold); letter-spacing: 0.02em; }
.ig-lane { white-space: nowrap; font-size: 13px; }
.ig-lane + .ig-lane { margin-top: 2px; color: var(--text2); }
.ig-lane .up, .ig-lane .down { display: inline; font-size: 10px; }
.ig-rate { color: var(--green); font-weight: 600; }
.ig-board-two { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; }
.ig-board-load, .ig-board-form, .ig-signup-note { border-radius: 18px; }
.ig-board-form { max-height: 100%; overflow: auto; }
.ig-signup-note { max-width: none; }
.ig-load-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.ig-load-lane { display: flex; align-items: center; gap: 16px; font-size: 15px; }
.ig-load-lane .up, .ig-load-lane .down { display: inline; font-size: 11px; }
.ig-load-arrow { color: var(--gold); font-size: 20px; }
.ig-form { padding: 12px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.ig-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.ig-form-grid .span-2 { grid-column: span 2; }
.ig-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ig-form-actions { display: flex; justify-content: flex-end; }

@media (max-width: 760px) {
  .ig-board { height: auto; min-height: 100vh; padding: 12px; }
  .ig-board-tag { display: none; }
  .ig-board-two { grid-template-columns: minmax(0, 1fr); }
  .ig-board-list { min-height: 60vh; }
  .ig-form-grid { grid-template-columns: minmax(0, 1fr); }
  .ig-form-grid .span-2 { grid-column: auto; }
}

/* The free OpenStreetMap map (osm_map.rs): the app's colours around Leaflet, darker tiles in dark mode */
.flex-osm { background: var(--map-sea, #0d1a1b); border-radius: inherit; }
.flex-osm.dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.82) contrast(0.92) saturate(0.55); }
.flex-osm .leaflet-control-attribution { font-size: 9.5px; background: color-mix(in srgb, var(--panel-solid) 82%, transparent); color: var(--text3); }
.flex-osm .leaflet-control-attribution a { color: var(--text2); }
.flex-osm .leaflet-bar a { background: var(--panel-solid); color: var(--text); border-color: var(--panel-border); }
.flex-osm .leaflet-tooltip { background: var(--panel-solid); color: var(--text); border-color: var(--panel-border); font-size: 11.5px; }

/* Super Search's result, on the page it was searched from: what Google knows, the choice to add it, and a map where the page has none */
.ig-ss { flex-wrap: wrap; }
.ig-place { flex: 1 1 100%; min-width: 0; margin: 4px 0 2px; outline: none; }
.ig-place .panel-head h2 { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-place-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ig-place-map { position: relative; min-height: 260px; background: var(--map-sea); }
.ig-place-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-items: start; gap: 12px 18px; min-width: 0; padding: 12px 14px; }
.ig-place-facts, .ig-place-week { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ig-place-hours { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; font-size: 13px; }
.ig-place-hours .day { color: var(--text3); }
.ig-place-credit { margin: 0; font-size: 11px; color: var(--text3); }
.ig-place-ask { display: flex; flex-direction: column; gap: 10px; }
.ig-place-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.page-bar > .ig-list-super { flex: 1 1 100%; }
.ig-place-side .kv-value { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* Scheduled jobs and log files (docs/specs/agent-platform.md §3): System → Scheduled Jobs, and
   Automation → Agents → Run History as links to plain-text log files. Prefix: jl-. */

/* Log-file links: "Today ⤓ · Yesterday ⤓ · 7 days ⤓" */
.jl-file { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.jl-log { font-size: 12.5px; }
.jl-dl { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; color: var(--text3); }
.jl-dl:hover { color: var(--gold); background: var(--row-hover); }
.jl-sep { color: var(--text3); margin: 0 6px; }

/* Run History tab */

.jl-table { font-size: 13px; table-layout: fixed; }
.jl-table + .jl-table { margin-top: 6px; }
.jl-c-name { width: 24%; min-width: 150px; }
.jl-c-last { width: 34%; }
.jl-c-fail { width: 12%; white-space: nowrap; }
.jl-c-files { width: 30%; }
.jl-last { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.jl-last .jl-log { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text2); font-weight: 400; }
.jl-last .jl-log:hover { color: var(--gold); }
.jl-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; min-width: 0; }
.jl-note { margin: 4px 12px 8px; font-size: 12px; }
.jl-soon { font-size: 12.5px; padding: 8px 12px !important; }

/* A failure pinned at the top, and the run opened from a notification. */
.jl-pin, .jl-focus {
  display: flex; align-items: center; gap: 8px; margin: 8px 10px 0; padding: 7px 10px; border-radius: 10px;
  font-size: 13px; border: 1px solid var(--b-red-bd); background: var(--b-red-bg); color: var(--text); min-width: 0;
}
.jl-pin strong { color: var(--b-red-fg); white-space: nowrap; font-weight: 600; }
.jl-dash { color: var(--text3); }
.jl-pin-more { display: inline-flex; gap: 8px; min-width: 0; font-size: 12px; margin-left: 4px; overflow: hidden; }
.jl-pin-err { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.jl-focus { border-color: var(--b-teal-bd); background: var(--b-teal-bg); }
.jl-focus.bad { border-color: var(--b-red-bd); background: var(--b-red-bg); }
.jl-focus > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jl-scroll > .jl-table:first-of-type { margin-top: 6px; }
.jl-scroll > .jl-pin:last-of-type, .jl-scroll > .jl-focus:last-of-type { margin-bottom: 6px; }

/* A job's runs in its slide-out: each row opens that run's log; Run again beside it. */
.jl-runs-files { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 8px 14px 2px; font-size: 12.5px; }
.jl-runs-files > .muted { margin-right: 6px; }
.jl-run { display: flex; align-items: center; gap: 6px; }
.jl-run .au-run-row { flex: 1 1 auto; min-width: 0; text-decoration: none; }
.jl-again { flex: none; height: 26px; }

/* Lines in the jobs and Agents tables link to the run's log. */
a.au-last { text-decoration: none; }

@media (max-width: 1500px) {
  .au-narrow .jl-sum, .au-narrow .jl-pin-more { display: none; }
  /* Scheduled Jobs has room in its bar for the counts. */
  .jl-jobs-bar:not(.au-side-open) .au-counts { display: inline; }
}

/* ---------- Master Documents and Templates (master_documents.rs, templates.rs, template_editor.rs,
   template_page.rs; Documents slide-out additions in doc_slideout.rs) ----------
   md- = this area. One slim bar per page (title, tabs, filters, actions); lists and panels scroll
   inside themselves; the page never scrolls. Printed documents are always black on white. */

/* --- page frame --- */
.page:has(> .md-page) { flex: 1 1 0; min-height: 0; padding-bottom: 12px; }
.md-page { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.md-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; row-gap: 8px; min-height: 40px; min-width: 0; }
/* Filters and actions share the title's row; when the page is narrow (a slide-out is open) they
   drop below it together, like the other list pages' toolbars. */
.md-filters { flex: 1 1 380px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.md-title { margin: 0 6px 0 0; font-family: Outfit, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap; }
.md-tabs { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: var(--th-bg); border: 1px solid var(--row-line); flex: none; }
.md-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.md-tab:hover:not(:disabled) { color: var(--text); background: var(--row-hover); }
.md-tab.on { background: var(--active-item-bg); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-border); }
.md-tab:disabled { opacity: 0.45; cursor: default; }
.md-tab svg { flex: none; }
.md-bar .search-box { height: 36px; border-radius: 10px; padding: 0 11px; }
.md-bar .select-wrap select { height: 36px; border-radius: 10px; font-size: 13px; padding: 0 30px 0 11px; }
.md-bar .select-caret { top: 11px; right: 10px; }
.md-bar .btn-icon { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.md-search { flex: 0 1 250px; min-width: 120px; }
.md-search.wide { flex-basis: 300px; margin: 0; }
.md-search input { font-size: 13px; }
.md-select { flex: 0 1 170px; min-width: 110px; }
.md-select.narrow { flex-basis: 140px; }
.md-note { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.md-bar .btn-sm { flex: none; }

/* --- lists --- */
.md-panel { flex: 1 1 0; min-height: 0; }
.md-table { font-size: 13px; }
.md-table td { padding: 7px 10px; vertical-align: middle; }
.md-table th:first-child, .md-table td:first-child { padding-left: 18px; }
.md-table .col-num { text-align: center; width: 64px; }
.md-table .col-num .th-btn { justify-content: center; }
.md-table .col-money { white-space: nowrap; }
.md-table .col-act { width: 1%; white-space: nowrap; text-align: right; padding-right: 16px; }
.md-table .nowrap { white-space: nowrap; }
.md-clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-files {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; padding: 0 7px; border-radius: 10px;
  background: var(--b-teal-bg); color: var(--b-teal-fg); border: 1px solid var(--b-teal-bd); font-size: 11.5px; font-weight: 700;
}
.md-files.none { background: var(--b-dim-bg); color: var(--b-dim-fg); border-color: var(--b-dim-bd); }
.md-arch { margin-left: 6px; }
.md-file { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.md-file svg { flex: none; color: var(--gold); }
.md-exp { margin-left: 6px; padding: 1px 7px; font-size: 10px; }
.md-snippet { font-size: 12.5px; color: var(--text2); max-width: 520px; }
.md-foot { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text2); }
.md-foot .btn-xs { height: 28px; }
.md-tip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.md-summary {
  flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 18px; font-size: 12.5px; color: var(--text2);
  border-bottom: 1px solid var(--row-line); background: var(--th-bg);
}
.md-summary svg { color: var(--gold); }

/* --- Documents slide-out: view switch, combined download, packages --- */
.md-views { display: flex; align-items: center; gap: 8px; }
.md-switch { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: 10px; background: var(--th-bg); border: 1px solid var(--row-line); }
.md-view {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 26px; border: 0; border-radius: 7px; background: transparent;
  color: var(--text2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.md-view:hover { color: var(--text); }
.md-view.on { background: var(--active-item-bg); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-border); }
.md-view-n { min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--b-neutral-bg); color: var(--text2); font-size: 10.5px; line-height: 16px; text-align: center; }
.md-view.on .md-view-n { background: var(--pill-bg); color: var(--pill-fg); }
.md-combine { flex: none; height: 32px !important; gap: 5px; }
.md-pk-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.md-pk-head .btn-xs { height: 26px; padding: 0 10px; font-size: 12px; }
.ds-slot.md-pk-row { grid-template-columns: 70px minmax(0, 1fr) auto; }
.md-pk-badge { justify-self: start; padding: 2px 7px; font-size: 10px; }
.md-pk-act { display: flex; align-items: center; gap: 4px; }
.md-pk-act .icon-btn.xs { width: 26px; height: 26px; border-radius: 7px; }

/* --- Template Library --- */
.md-tpl-table td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.md-tpl-doc { display: flex; align-items: center; gap: 8px; }
.md-tpl-doc svg { color: var(--gold); flex: none; }
.md-tpl-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.md-tpl-cell .btn-xs { height: 28px; padding: 0 10px; font-size: 12px; gap: 5px; }
.md-tpl-name { max-width: 180px; font-weight: 600; }
.md-tpl-radios { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.md-tpl-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.md-tpl-radio input { width: 15px; height: 15px; accent-color: var(--check); margin: 0; cursor: pointer; }
.md-tpl-radio.off { color: var(--text3); cursor: default; }
.md-tpl-radio.off input { cursor: default; }
.md-tpl-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.md-tpl-notes li { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--b-amber-fg); line-height: 1.35; }
.md-tpl-notes li svg { flex: none; margin-top: 2px; }

/* --- preview slide-out --- */
.slideout-body:has(> .md-tpl-prev) { overflow: hidden; }
.md-tpl-prev { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.md-tpl-prev-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--row-line); min-width: 0; }
.md-tpl-prev-load { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text3); }
.md-tpl-prev-load .select-wrap { flex: 1 1 auto; min-width: 0; }
.md-tpl-prev-load select { height: 32px; border-radius: 9px; font-size: 13px; padding: 0 28px 0 10px; }
.md-tpl-prev-load .select-caret { top: 9px; right: 9px; }
.md-tpl-prev-search { flex: 0 1 130px; height: 32px; border-radius: 9px; padding: 0 9px; }
.md-tpl-prev-search input { font-size: 12.5px; }
.md-tpl-prev-bar .btn-xs { height: 32px; flex: none; gap: 5px; }
.md-tpl-prev-note { margin: 0; padding: 6px 12px; font-size: 12px; color: var(--text3); }
.md-tpl-prev > .md-tpl-notes { flex: none; padding: 6px 12px; border-bottom: 1px solid var(--row-line); max-height: 96px; overflow-y: auto; }
.md-tpl-prev-viewer { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.md-tpl-prev-viewer > .dv { min-width: 0; }

/* --- a template's pages on screen (always white paper) --- */
.md-tp-pages { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.md-tp-page { display: block; background: #FFFFFF; flex: none; }
.rc-paper:has(> .md-tp-pages) { background: transparent; min-height: 0; box-shadow: none; }
.rc-paper .md-tp-page { box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 18px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.06); }
.app[data-theme="light"] .rc-paper .md-tp-page { box-shadow: 0 2px 6px rgba(16,34,32,0.08), 0 18px 44px rgba(16,34,32,0.14), 0 0 0 1px rgba(16,34,32,0.08); }
.viewer-page .md-tp-pages { align-items: stretch; gap: 0; }
@media print {
  .md-tp-pages { gap: 0; }
  .md-tp-page { box-shadow: none !important; break-after: page; }
  .md-tp-page:last-child { break-after: auto; }
}

/* --- the designer --- */
.md-te { display: flex; flex-direction: column; }
.md-te-strip { flex: none; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--row-line); min-width: 0; }
.md-te-name { flex: 0 1 200px; height: 30px; font-weight: 600; }
.md-te-size { flex: 0 1 150px; min-width: 90px; }
.md-te-size select, .md-te-load select, .md-te-sel select { height: 30px; border-radius: 8px; font-size: 12.5px; padding: 0 26px 0 9px; }
.md-te-size .select-caret, .md-te-load .select-caret, .md-te-sel .select-caret { top: 9px; right: 8px; }
.md-te-load { flex: 0 1 140px; min-width: 100px; }
.md-te-group { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 9px; border: 1px solid var(--row-line); background: var(--th-bg); flex: none; }
.md-te-group .icon-btn.xs { width: 26px; height: 26px; border-radius: 7px; font-size: 15px; }
.md-te-show { padding-left: 8px; font-size: 12px; }
.md-te-zoom { min-width: 40px; text-align: center; font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.md-te-chip {
  height: 26px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--text2);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex: none;
}
.md-te-chip:hover { color: var(--text); background: var(--row-hover); }
.md-te-chip.on { background: var(--active-item-bg); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-border); }
.md-te-strip > .md-te-chip { border: 1px solid var(--row-line); height: 30px; }
.md-te-strip .btn-xs { height: 30px; padding: 0 11px; gap: 5px; flex: none; }
.md-te-cols { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 196px minmax(0, 1fr) 236px; }
.md-te-tools, .md-te-props { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px 10px 14px; }
.md-te-tools { border-right: 1px solid var(--row-line); }
.md-te-props { border-left: 1px solid var(--row-line); }
.md-te-head {
  display: flex; align-items: center; gap: 6px; margin: 8px 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text3);
}
.md-te-head .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.md-te-adds { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.md-te-add {
  display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 5px; border-radius: 8px; border: 1px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-size: 11.5px; cursor: pointer; min-width: 0; white-space: nowrap; overflow: hidden;
}
.md-te-add:hover, .md-te-block:hover { border-color: var(--gold-border); color: var(--gold); }
.md-te-add svg { flex: none; color: var(--gold); width: 13px; height: 13px; }
.md-te-blocks { display: flex; flex-direction: column; gap: 4px; }
.md-te-block {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 8px; border-radius: 8px; border: 1px dashed var(--btn-border);
  background: transparent; color: var(--text); font: inherit; cursor: pointer; text-align: left;
}
.md-te-block strong { font-size: 12.5px; font-weight: 600; }
.md-te-block span { font-size: 11px; color: var(--text3); }
.md-te-vars { display: flex; flex-direction: column; gap: 2px; }
.md-te-group-list summary { cursor: pointer; padding: 4px 2px; font-size: 12.5px; font-weight: 600; color: var(--text2); }
.md-te-group-list[open] summary { color: var(--text); }
.md-te-tag {
  display: block; width: 100%; padding: 3px 8px 3px 14px; border: 0; border-radius: 6px; background: transparent; color: var(--text2);
  font: inherit; font-size: 12px; text-align: left; cursor: grab;
}
.md-te-tag:hover { background: var(--row-hover); color: var(--gold); }
.md-te-canvas { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 20px 24px; background: var(--map-sea); scrollbar-width: thin; }
.md-te-sheet { position: relative; margin: 0 auto; background: #FFFFFF; box-shadow: 0 6px 26px rgba(0,0,0,0.35); }
.md-te-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.md-te-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: linear-gradient(to right, rgba(30,91,216,0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(30,91,216,0.08) 1px, transparent 1px);
}
.md-te-overlay { position: absolute; inset: 0; }
.md-te-box { position: absolute; cursor: move; outline: 1px solid transparent; outline-offset: 0; touch-action: none; min-width: 6px; min-height: 6px; }
.md-te-box:hover { outline-color: rgba(30,91,216,0.45); }
.md-te-box.var { outline: 1px dashed rgba(30,91,216,0.55); background: rgba(30,91,216,0.04); }
.md-te-box.sel { outline: 2px solid #C9A35B; z-index: 2; }
.md-te-h { position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px; border-radius: 2px; background: #FFFFFF; border: 1.5px solid #C9A35B; display: none; }
.md-te-box.sel .md-te-h { display: block; }
.md-te-h.nw { left: 0; top: 0; cursor: nwse-resize; }
.md-te-h.n { left: 50%; top: 0; cursor: ns-resize; }
.md-te-h.ne { left: 100%; top: 0; cursor: nesw-resize; }
.md-te-h.e { left: 100%; top: 50%; cursor: ew-resize; }
.md-te-h.se { left: 100%; top: 100%; cursor: nwse-resize; }
.md-te-h.s { left: 50%; top: 100%; cursor: ns-resize; }
.md-te-h.sw { left: 0; top: 100%; cursor: nesw-resize; }
.md-te-h.w { left: 0; top: 50%; cursor: ew-resize; }
.md-te-notes { max-width: 640px; margin: 12px auto 0; }
.md-te-props-head { justify-content: space-between; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); }
.md-te-del { height: 26px !important; padding: 0 9px !important; font-size: 11.5px !important; color: var(--red) !important; }
.md-te-form { display: flex; flex-direction: column; gap: 8px; }
.md-te-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: end; }
.md-te-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; color: var(--text3); }
.md-te-f .field { height: 30px; }
.md-te-text { height: auto !important; min-height: 92px; padding: 7px 9px; resize: vertical; line-height: 1.4; font-family: inherit; }
.md-te-check { display: flex; align-items: center; gap: 6px; height: 30px; font-size: 12.5px; color: var(--text2); cursor: pointer; }
.md-te-check input { width: 15px; height: 15px; accent-color: var(--check); margin: 0; }
.md-te-seg { display: flex; gap: 2px; padding: 2px; border-radius: 9px; border: 1px solid var(--row-line); background: var(--th-bg); }
.md-te-seg .md-te-chip { flex: 1 1 0; }
.md-te-color { width: 100%; height: 30px; padding: 2px; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input); cursor: pointer; }
.md-te-note { margin: 0; font-size: 11.5px; color: var(--text3); line-height: 1.4; }
.md-te-help { font-size: 12.5px; color: var(--text2); line-height: 1.45; }
.md-te-help p { margin: 0 0 8px; }
.md-te-help kbd { padding: 1px 5px; border-radius: 5px; border: 1px solid var(--row-line); background: var(--th-bg); font: inherit; font-size: 11px; }
.md-te-cells { display: flex; flex-direction: column; gap: 6px; }
.md-te-form .btn-xs { height: 30px; gap: 5px; }

@media (max-width: 1440px) {
  .md-te-cols { grid-template-columns: 192px minmax(0, 1fr) 214px; }
  .md-note { display: none; }
}
@media (max-width: 1380px) {
  .md-bar { gap: 6px; }
  .md-title { font-size: 21px; margin-right: 2px; }
  .md-tab { padding: 0 9px; }
  .md-search { flex-basis: 200px; }
  .md-select { flex-basis: 140px; }
  .md-select.narrow { flex-basis: 118px; }
  .md-te-show > .muted { display: none; }
}

/* ---------- Email Mixer slide-out (mixer.rs) and the customer Documents tab (customer_docs.rs) ----------
   mx- = the Mixer workbench, cd- = customer documents. The slide-out header is the only title bar;
   inside it one strip holds the tabs and the tab's actions, and only the page grid or the log
   scrolls. */

.slideout-body:has(> .mx) { overflow: hidden; }
.mx { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; outline: none; }
.mx-muted { font-size: 11.5px; color: var(--text3); }

/* --- header target chip and picker --- */
.mx-target { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; margin-left: 6px; }
.mx-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 260px; height: 26px; padding: 0 9px 0 8px;
  border-radius: 999px; border: 1px solid var(--b-teal-bd); background: var(--b-teal-bg); color: var(--b-teal-fg);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; min-width: 0;
}
.mx-chip:hover { border-color: var(--gold-line); }
.mx-chip.none { border-style: dashed; border-color: var(--divider); background: transparent; color: var(--text3); }
.mx-chip svg { flex: none; }
.mx-picker { top: calc(100% + 6px); left: 0; width: 320px; max-height: 380px; }
.mx-picker-search { height: 34px; border-radius: 10px; padding: 0 10px; margin: 0 2px 4px; }
.mx-picker-search input { font-size: 13px; }
.mx-opt { flex-direction: column; align-items: flex-start; gap: 0; }
.mx-opt strong { font-size: 13px; max-width: 100%; }
.mx-opt span { font-size: 11.5px; color: var(--text3); max-width: 100%; }
.popover-empty.error { color: var(--red); }

/* --- no batch: drop zone and recent batches --- */
.mx-start { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow-y: auto; }
.mx-drop {
  flex: 1 1 auto; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 20px; border: 1.5px dashed var(--divider); border-radius: 16px; background: var(--sub-panel); text-align: center;
  color: var(--text2); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.mx-drop:hover, .mx-drop.over { border-color: var(--gold-line); background: var(--active-item-bg); }
.mx-drop strong { font-size: 15px; color: var(--text); }
.mx-drop-icon { color: var(--gold); display: flex; }
.mx-drop .btn { pointer-events: none; }
.mx-recent { flex: none; display: flex; flex-direction: column; border: 1px solid var(--row-line); border-radius: 12px; overflow: hidden; }
.mx-recent-title { padding: 7px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); border-bottom: 1px solid var(--row-line); }
.mx-recent-row { display: flex; align-items: center; gap: 4px; padding-right: 6px; }
.mx-recent-row + .mx-recent-row { border-top: 1px solid var(--row-line); }
.mx-recent-open {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.mx-recent-open:hover { background: var(--row-hover); }
.mx-recent-open svg { flex: none; color: var(--gold); }
.mx-recent-name { flex: 1 1 auto; font-weight: 600; }
.mx-recent-open .mx-muted { flex: none; white-space: nowrap; }

/* --- the strip: tabs left, actions right --- */
.mx-strip { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 3px; padding: 0 6px 0 2px; border-bottom: 1px solid var(--row-line); min-width: 0; }
.mx-tabs { flex: none; border-bottom: 0; flex-wrap: nowrap; }
.mx-tabs .tab { height: 38px; padding: 0 7px; font-size: 13px; gap: 5px; }
.mx-tabs .tab .count-pill { position: static; min-width: 20px; height: 18px; line-height: 18px; border-radius: 9px; font-size: 10.5px; padding: 0 6px; }
.mx-group { flex: none; display: flex; align-items: center; gap: 1px; padding: 2px; border-radius: 9px; border: 1px solid var(--row-line); background: var(--th-bg); }
.mx-group .icon-btn.xs { width: 24px; height: 24px; border-radius: 7px; }
.mx-zoom { min-width: 38px; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--text2); font-variant-numeric: tabular-nums; }
.mx-strip > .icon-btn.xs { width: 28px; height: 28px; flex: none; }
.mx-txt {
  flex: none; height: 26px; padding: 0 7px; border: 0; border-radius: 7px; background: transparent; color: var(--text2);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.mx-txt:hover:not(:disabled) { background: var(--row-hover); color: var(--text); }
.mx-txt:disabled { opacity: 0.4; cursor: default; }
.mx-route { flex: none; height: 28px; padding: 0 9px 0 11px; gap: 4px; }
.mx-route-n { min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10.5px; text-align: center; background: var(--primary-fg); color: var(--pill-bg); }

/* --- bars under the strip --- */
.mx-conflict {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 10px 0; padding: 7px 10px;
  border-radius: 11px; border: 1px solid var(--b-amber-bd); background: var(--b-amber-bg); color: var(--b-amber-fg); font-size: 12.5px;
}
.mx-conflict-text { flex: 1 1 200px; min-width: 0; color: var(--text); }
.mx-conflict strong { font-weight: 700; }
.mx-file { font-weight: 600; word-break: break-all; }
.mx-conflict .btn-xs { height: 28px; padding: 0 10px; }
.mx-progress { flex: none; display: flex; align-items: center; gap: 8px; margin: 8px 10px 0; font-size: 12.5px; color: var(--text2); }
.mx-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--divider); border-top-color: var(--gold-line); animation: mx-spin 0.8s linear infinite; }
@keyframes mx-spin { to { transform: rotate(360deg); } }
.mx-notices {
  flex: none; display: flex; align-items: flex-start; gap: 8px; margin: 8px 10px 0; padding: 7px 6px 7px 10px; border-radius: 11px;
  border: 1px solid var(--b-red-bd); background: var(--b-red-bg); color: var(--b-red-fg); font-size: 12px;
}
.mx-start > .mx-notices { margin: 0; }
.mx-notices > svg { flex: none; margin-top: 2px; }
.mx-notices ul { flex: 1 1 auto; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; max-height: 96px; overflow-y: auto; }
.mx-notices .icon-btn.xs { width: 22px; height: 22px; color: inherit; }

/* --- the page grid --- */
.mx-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 70px;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px; outline: none;
}
.mx-grid.files-over { box-shadow: inset 0 0 0 2px var(--gold-line); background: var(--active-item-bg); }
.mx-card {
  position: relative; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 11px;
  border: 1px solid var(--panel-border); background: var(--sub-panel); cursor: pointer; user-select: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.mx-card:hover { border-color: var(--btn-border); }
.mx-card.sel { border-color: var(--gold-line); box-shadow: 0 0 0 2px var(--gold-border); background: var(--active-item-bg); }
.mx-card.before::before { content: ""; position: absolute; left: -8px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--gold-line); box-shadow: 0 0 8px var(--gold-border); }
.mx-grid.end-drop::after { content: ""; flex: none; width: 3px; align-self: stretch; min-height: 80px; border-radius: 2px; background: var(--gold-line); }
/* Pages are always shown as printed (black on white). */
.mx-thumb { position: relative; width: 100%; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.mx-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mx-card.saved:not(.sel) .mx-thumb img { opacity: 0.55; }
.mx-tick {
  position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 10px; display: none; align-items: center; justify-content: center;
  background: var(--primary-bg); color: var(--primary-fg); box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.mx-card.sel .mx-tick { display: flex; }
.mx-cap { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 0 2px; font-size: 11.5px; }
.mx-num { flex: none; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mx-src { flex: 1 1 auto; min-width: 0; color: var(--text3); }
.mx-badge {
  display: flex; align-items: center; gap: 3px; max-width: 100%; padding: 2px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 600;
  background: var(--b-green-bg); color: var(--b-green-fg); border: 1px solid var(--b-green-bd);
}
.mx-badge svg { flex: none; }

/* --- slot dock while dragging pages --- */
.mx-dock {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px;
  border-radius: 14px; background: var(--menu-bg); border: 1px solid var(--gold-border); box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.mx-dock-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); }
.mx-dock-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-dock-slot {
  padding: 6px 10px; border-radius: 9px; border: 1px dashed var(--btn-border); background: var(--btn-bg); color: var(--btn-fg);
  font-size: 12.5px; font-weight: 600; cursor: copy;
}
.mx-dock-slot.over { border-style: solid; border-color: var(--gold-line); background: var(--active-item-bg); color: var(--gold); }
.mx-dock-slot.off { opacity: 0.45; cursor: not-allowed; }

/* --- route menu --- */
.mx-menu { position: absolute; width: 260px; max-height: 380px; }
.mx-menu-warn { margin: 0 4px 4px; padding: 5px 8px; border-radius: 8px; font-size: 11.5px; background: var(--b-amber-bg); color: var(--b-amber-fg); }
.mx-slot { justify-content: space-between; gap: 8px; font-size: 13px; }
.mx-slot:disabled { opacity: 0.5; cursor: default; }
.mx-slot-label { flex: none; }
.mx-slot-has { flex: 0 1 auto; min-width: 0; font-size: 11px; color: var(--b-amber-fg); }
.mx-menu-sep { height: 1px; margin: 4px 6px; background: var(--row-line); }
.mx-menu .popover-item.text { gap: 8px; text-decoration: none; }
.mx-menu .popover-item svg { color: var(--text3); flex: none; }

/* --- log --- */
.mx-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px 14px; }
.mx-log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--row-line); border-radius: 12px; overflow: hidden; }
.mx-log-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; }
.mx-log-row + .mx-log-row { border-top: 1px solid var(--row-line); }
.mx-log-row.undone { opacity: 0.6; }
.mx-log-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mx-log-what { font-size: 13px; color: var(--text); }
.mx-log-what a { color: var(--gold); font-weight: 600; text-decoration: none; }
.mx-log-what a:hover { text-decoration: underline; }
.mx-log-row .btn-xs { flex: none; height: 28px; padding: 0 10px; gap: 5px; }

/* --- slots elsewhere that take dragged Mixer pages (documents.rs, carrier.rs, customer_docs.rs) --- */
.mx-can-drop { outline: 1px dashed var(--gold-border); outline-offset: -2px; }
.mx-drop-here { outline: 2px solid var(--gold-line) !important; outline-offset: -2px; background: var(--active-item-bg) !important; }

/* --- customer Documents tab --- */
.cd { flex: 1 1 0; min-height: 380px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; }
.cd > .dt-types { display: flex; flex-direction: column; }
.cd-hint { margin: auto 4px 0; padding-top: 10px; font-size: 11.5px; color: var(--text3); }
.cd .dt-view { min-height: 0; display: flex; flex-direction: column; }
.cd-files { flex: none; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 132px; overflow-y: auto; border: 1px solid var(--row-line); border-radius: 10px; }
.cd-files li + li { border-top: 1px solid var(--row-line); }
.cd-file {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; background: transparent; color: var(--text2);
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; min-width: 0;
}
.cd-file svg { flex: none; color: var(--gold); }
.cd-file:hover { background: var(--row-hover); color: var(--text); }
.cd-file.active { background: var(--active-item-bg); color: var(--text); box-shadow: inset 2px 0 0 var(--gold-line); }
.cd-meta { flex: none; margin-left: auto; padding-left: 8px; font-size: 11.5px; color: var(--text3); white-space: nowrap; }
@media (max-width: 1100px) {
  .cd { grid-template-columns: 200px minmax(0, 1fr); gap: 10px; }
  .cd-meta { display: none; }
}

/* --- AI (mixer_ai.rs): header chip, the AI tab and Build load --- */
.mx-tabs .tab .count-pill:empty { display: none; }
.mx-ai-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }
.mx-ai-dot { width: 7px; height: 7px; border-radius: 4px; background: var(--b-violet-fg); box-shadow: 0 0 6px var(--b-violet-fg); }
.mx-readas { flex: none; }
.mx-readas select { height: 28px; border-radius: 8px; font-size: 12.5px; padding: 0 28px 0 9px; }
.mx-readas .select-caret { top: 8px; right: 9px; }
.mx-strip > .btn-xs { flex: none; height: 28px; padding: 0 10px; }
.mx-ai-mode { display: flex; align-items: center; gap: 6px; }
.mx-ai, .mx-build { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.mx-ai > *, .mx-build > * { flex: none; }
.mx-ai > .tracking-empty, .mx-build > .tracking-empty { flex: 1 0 auto; }
.mx-ai > .mx-progress, .mx-build > .mx-progress { margin: 0 0 4px; }
.mx-ai-sec { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
.mx-ai-sec .count-pill { position: static; }
.mx-log > .mx-ai-sec { margin: 12px 0 6px; }
.mx-ai-row { flex: none; border: 1px solid var(--row-line); border-radius: 12px; background: var(--sub-panel); }
.mx-ai-row.open { border-color: var(--gold-border); }
.mx-ai-head {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 12px; background: transparent;
  color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; min-width: 0;
}
.mx-ai-head:hover { background: var(--row-hover); }
.mx-ai-caret { flex: none; color: var(--text3); transition: transform 0.12s ease; }
.mx-ai-row.open .mx-ai-caret { transform: rotate(90deg); }
.mx-ai-sum { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-ai-head .badge { flex: none; }
.mx-ai-saved { display: flex; align-items: center; gap: 6px; padding: 0 10px 7px 30px; font-size: 12px; color: var(--b-green-fg); }
.mx-ai-saved .btn { height: 24px; padding: 0 8px; font-size: 11.5px; margin-left: auto; gap: 4px; }
.mx-ai-warn { padding: 6px 10px; border-radius: 10px; background: var(--b-amber-bg); border: 1px solid var(--b-amber-bd); color: var(--b-amber-fg); font-size: 12px; }
.mx-review { display: flex; flex-direction: column; gap: 8px; padding: 2px 10px 10px; border-top: 1px solid var(--row-line); }
.mx-review-thumbs { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; }
/* Pages are always shown as printed (black on white). */
.mx-review-thumbs img { flex: none; height: 84px; width: auto; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.mx-review-grid, .mx-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mx-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11px; color: var(--text3); }
.mx-f > span:first-child { font-weight: 600; letter-spacing: 0.02em; }
.mx-f input, .mx-f select, .mx-f textarea {
  width: 100%; min-width: 0; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--input-border);
  background: var(--input); color: var(--text); font: inherit; font-size: 12.5px;
}
.mx-f textarea { height: auto; padding: 6px 8px; resize: vertical; line-height: 1.35; }
.mx-f select option { background: var(--panel-solid); color: var(--text); }
.mx-f input:focus, .mx-f select:focus, .mx-f textarea:focus { outline: none; border-color: var(--gold-line); }
.mx-f input:disabled, .mx-f select:disabled { opacity: 0.7; }
.mx-f.wide { grid-column: 1 / -1; }
.mx-ro { font-size: 12.5px; color: var(--text); }
.mx-review-target { display: flex; flex-direction: column; justify-content: center; min-height: 30px; min-width: 0; }
.mx-review-target strong, .mx-review-target .mx-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-review-target strong { font-size: 12.5px; color: var(--text); }
.mx-review-target .mx-txt { align-self: flex-start; height: 20px; padding: 0 4px; color: var(--gold); }
.mx-review-conflict {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 10px; border-radius: 10px;
  border: 1px solid var(--b-amber-bd); background: var(--b-amber-bg); color: var(--text); font-size: 12px;
}
.mx-review-conflict label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.mx-sigs, .mx-flags { display: flex; flex-wrap: wrap; gap: 5px; }
.mx-flag { padding: 2px 8px; border-radius: 7px; font-size: 11.5px; background: var(--b-amber-bg); color: var(--b-amber-fg); border: 1px solid var(--b-amber-bd); }
.mx-flag.critical { background: var(--b-red-bg); color: var(--b-red-fg); border-color: var(--b-red-bd); font-weight: 600; }
div.mx-flag.critical { align-self: flex-start; }
.mx-review-foot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mx-review-foot .mx-muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-review-foot .btn { flex: none; height: 30px; }
.mx-build-form { display: flex; flex-direction: column; gap: 10px; }
.mx-build-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border-radius: 12px; border: 1px solid var(--row-line); background: var(--sub-panel); }
.mx-build-cols > .mx-build-sec { padding: 8px; }
.mx-build-h { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.mx-build-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mx-build-cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mx-build-row3 { display: grid; grid-template-columns: 1.6fr 0.6fr 1fr; gap: 6px; }
.mx-build-row3.when { grid-template-columns: 1.5fr 1fr 1fr; }
.mx-build-done { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.mx-build-done .btn { height: 30px; }
.mx-build .mx-txt { align-self: flex-start; color: var(--gold); }
.mx-build .form-error { font-size: 12.5px; }
@media (max-width: 1500px) {
  .mx-review-grid, .mx-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Rate Con tab (rate_con.rs) ---------- */
/* The tab fills the space under the tabs; the document scrolls inside its viewer, never the page. */
.page:has(> .rc) { flex: 1 1 0; min-height: 0; }
.rc { flex: 1 1 0; min-height: 440px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; }

.rc-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding-right: 2px; scrollbar-width: thin; }
.rc-card {
  border-radius: 14px; background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
  padding: 8px 12px 9px; display: flex; flex-direction: column; gap: 6px;
}
.rc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.rc-card-head h3, .rc-terms summary {
  margin: 0; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text);
}
.rc-card-head h3 svg, .rc-terms summary svg { color: var(--gold); }
.rc-sub { font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
.rc-grid .span-2 { grid-column: span 2; }
/* Label inside the box, so each row of fields is one line tall. */
.rc-field {
  display: flex; align-items: center; min-width: 0; height: 30px; padding-left: 9px; border-radius: 8px;
  border: 1px solid var(--input-border); background: var(--input); cursor: text;
}
.rc-field:focus-within { border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--active-item-bg); }
.rc-field > span { flex: 0 0 auto; margin-right: 7px; font-size: 11px; color: var(--text3); white-space: nowrap; }
.rc-field .field { flex: 1 1 auto; height: 28px; padding: 0 8px 0 0; border: 0; background: transparent; font-size: 12.5px; }
.rc-field .field:focus { box-shadow: none; }
.rc-empty { margin: 0; font-size: 12.5px; color: var(--text2); }
.rc-card .form-error { margin: 0; font-size: 12px; }

.rc-pay { gap: 4px; }
.rc-pay-line { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text2); }
.rc-pay-line span:last-child { font-variant-numeric: tabular-nums; color: var(--text); }
.rc-pay-net {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 3px; padding-top: 6px;
  border-top: 1px solid var(--row-line); font-size: 12.5px; color: var(--text2);
}
.rc-pay-net strong { font-family: Outfit, sans-serif; font-size: 22px; font-weight: 500; color: var(--gold); font-variant-numeric: tabular-nums; }

.rc-terms { padding: 0; gap: 0; }
.rc-terms summary { list-style: none; cursor: pointer; padding: 10px 12px; }
.rc-terms summary::-webkit-details-marker { display: none; }
.rc-terms summary::after { content: "▸"; margin-left: auto; color: var(--text3); font-size: 11px; transition: transform .15s; }
.rc-terms[open] summary::after { transform: rotate(90deg); }
.rc-terms-text { padding: 0 12px 10px; font-size: 11.5px; line-height: 1.45; color: var(--text2); white-space: pre-line; max-height: 180px; overflow-y: auto; }


.rc-viewer {
  min-height: 0; min-width: 0; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
}
.rc-viewer-bar { display: flex; align-items: center; gap: 4px; padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--row-line); }
.rc-template { flex: 0 1 auto; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--text2); white-space: nowrap; }
.rc-template span { overflow: hidden; text-overflow: ellipsis; }
.rc-template svg { flex: 0 0 auto; }
.rc-template svg { color: var(--gold); }
.rc-viewer-bar .icon-btn.small { width: 30px; height: 30px; border-radius: 8px; font-size: 17px; line-height: 1; }
.rc-zoom { min-width: 44px; text-align: center; font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.rc-viewer-bar .btn-xs { height: 28px; padding: 0 10px; }
.rc-viewer-bar .btn-xs.active { border-color: var(--gold-border); color: var(--gold); }
.rc-viewer-bar .btn-primary.btn-xs { padding: 0 12px; }
.rc-bar-divider { width: 1px; height: 20px; margin: 0 4px; background: var(--divider); }
.rc-viewer-scroll {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 20px 24px; overscroll-behavior: contain;
  scrollbar-gutter: stable; /* the fit width doesn't jump when the scrollbar appears */
  background: radial-gradient(120% 80% at 50% 0%, rgba(127,211,195,0.06), transparent 60%);
}
.rc-paper {
  width: 816px; min-height: 1056px; margin: 0 auto; background: #fff; color: #000; border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 18px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.06);
}
.app[data-theme="light"] .rc-paper { box-shadow: 0 2px 6px rgba(16,34,32,0.08), 0 18px 44px rgba(16,34,32,0.14), 0 0 0 1px rgba(16,34,32,0.08); }

/* ---------- the document itself: paper colours in both themes ---------- */
.rcd { padding: 34px 40px 30px; font-family: Arial, Helvetica, sans-serif; font-size: 11.5px; line-height: 1.35; color: #000; }
.rcd h1, .rcd h3, .rcd p { margin: 0; color: #000; }
.rcd-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; padding-bottom: 8px; border-top: 1px solid #000; padding-top: 10px; }
.rcd-brand { display: flex; align-items: center; gap: 10px; }
.rcd-mark {
  width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-family: Outfit, Arial, sans-serif;
  font-size: 26px; font-weight: 600; color: #17130A; background: linear-gradient(135deg, #F2DFAE 0%, #C9A35B 100%);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rcd-brand-name { font-family: Outfit, Arial, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.rcd-brand-sub { font-size: 9.5px; color: #444; letter-spacing: 0.04em; }
.rcd-title { text-align: center; font-size: 12.5px; }
.rcd-title h1 { font-size: 19px; font-weight: 700; margin-bottom: 3px; }
.rcd-pro { justify-self: end; font-size: 13px; }
.rcd-bar { display: flex; justify-content: space-between; gap: 10px; padding: 5px 4px; border-bottom: 1px solid #ccc; font-size: 12px; }
.rcd-to { display: grid; grid-template-columns: 1.15fr 0.7fr 1.15fr; gap: 12px; padding: 10px 0 6px; font-size: 12.5px; }
.rcd-carrier { display: flex; gap: 14px; }
.rcd-to-label { min-width: 22px; }
.rcd-carrier-name { font-weight: 400; text-transform: uppercase; margin-bottom: 2px; }
.rcd-pay table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.rcd-pay td { padding: 0 0 1px 26px; }
.rcd-pay td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rcd-pay tr.rcd-net td { border-top: 1px solid #000; padding-top: 2px; font-weight: 400; }
.rcd-pay tr.rcd-net td.num { font-weight: 700; font-size: 13.5px; }
.rcd-special { padding: 8px 0 4px; font-size: 12.5px; }
.rcd-special h3 { font-size: 13px; font-weight: 700; }
.rcd-stops { padding-top: 6px; }
.rcd-stop { padding: 8px 0 6px; }
.rcd-stop-kind { color: #c00; font-size: 11.5px; white-space: pre; margin-bottom: 2px; }
.rcd-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rcd-grid th { text-align: left; font-weight: 700; font-size: 11.5px; padding: 1px 4px 1px 0; }
.rcd-grid td { padding: 2px 4px 2px 0; font-size: 11px; vertical-align: top; }
.rcd-grid .w-fac { width: 30%; }
.rcd-stop-foot { display: grid; grid-template-columns: 30% 1fr; gap: 0; margin-top: 6px; font-size: 11px; }
.rcd-bol { margin-top: 6px; font-size: 11px; }
.rcd-terms { margin-top: 12px; font-size: 12.5px; line-height: 1.4; text-transform: none; }
.rcd-terms p + p { margin-top: 12px; }
.rcd-box { width: 100%; margin-top: 18px; border-collapse: collapse; border: 1px solid #000; font-size: 12px; table-layout: fixed; }
.rcd-box td { padding: 1px 3px; vertical-align: top; }
.rcd-box td + td { border-left: 1px solid #000; }
.rcd-sign { margin-top: 22px; padding: 0 70px; font-size: 12.5px; }
.rcd-sign-row { display: grid; grid-template-columns: 74px 1fr 74px 1fr; align-items: end; gap: 0 4px; margin-bottom: 12px; }
.rcd-sign-row > span:nth-child(odd) { text-align: right; }
.rcd-line { border-bottom: 1px solid #000; height: 16px; margin-right: 40px; }
.rcd-date { text-align: center; font-size: 11px; letter-spacing: 0.4em; }
.rcd-sign-note { margin: -10px 0 0 78px; font-size: 9.5px; }
.rcd-foot { display: grid; grid-template-columns: 1fr 1fr; align-items: end; margin-top: 18px; font-size: 12.5px; }
.rcd-broker { padding-left: 10px; }
.rcd-script {
  display: inline-block; min-width: 170px; border-bottom: 1px solid #000; padding: 0 4px;
  font-family: "Dancing Script", "Snell Roundhand", "Segoe Script", cursive; font-size: 19px; line-height: 1.05;
}
.rcd-broker-title { margin-left: 74px; font-size: 9.5px; color: #555; }

/* Narrow page (a slide-out is open): slimmer details column so the document keeps some room. */
.page:has(> .rc) { container-type: inline-size; }
@container (max-width: 900px) {
  .rc { grid-template-columns: 262px minmax(0, 1fr); gap: 10px; }
  .rc-template { display: none; }
  .rc-viewer-bar .btn-xs:not(.btn-primary) { padding: 0 8px; }
  .rc-viewer-bar .opt, .rc-bar-divider { display: none; }
}
@media (max-width: 1100px) {
  .rc { grid-template-columns: 300px minmax(0, 1fr); }
  .rc-template { display: none; }
}
@media (max-width: 1360px) {
  .rc-template span { display: none; }
}
/* Short screens (projectors, small laptops): the terms are already in the document. */
@media (max-height: 760px) {
  .rc-terms { display: none; }
  .rc-side { gap: 6px; }
  .rc-card { padding: 7px 11px 8px; gap: 5px; }
  .rc-pay-net { padding-top: 4px; }
  .rc-pay-net strong { font-size: 19px; }
}
@media (max-width: 860px) {
  .page:has(> .rc) { flex: 1 0 auto; }
  .rc { grid-template-columns: minmax(0, 1fr); }
  .rc-viewer { min-height: 560px; }
}

/* Print exactly the document, full size, on letter paper. */
@media print {
  @page { size: letter; margin: 0.35in; }
  html:has(.rc-paper) .sidebar, html:has(.rc-paper) .topbar, html:has(.rc-paper) .tool-rail, html:has(.rc-paper) .slideout,
  html:has(.rc-paper) .footer, html:has(.rc-paper) .load-head, html:has(.rc-paper) .tabs, html:has(.rc-paper) .rc-side,
  html:has(.rc-paper) .rc-viewer-bar { display: none !important; }
  html:has(.rc-paper), html:has(.rc-paper) body, html:has(.rc-paper) .shell, html:has(.rc-paper) .shell-main,
  html:has(.rc-paper) .shell-body, html:has(.rc-paper) .scroll-area, html:has(.rc-paper) .page, .rc, .rc-viewer, .rc-viewer-scroll {
    display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
    padding: 0 !important; margin: 0 !important; background: #fff !important; border: 0 !important; box-shadow: none !important;
    backdrop-filter: none !important; position: static !important;
  }
  .rc-paper { zoom: 1 !important; width: auto !important; min-height: 0 !important; box-shadow: none !important; border-radius: 0; }
  .rcd { padding: 0; }
}

/* ---------- Customer / Carrier Rate slide-outs (rates.rs) ---------- */
.rate-btn { border: 0; background: transparent; padding: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rate-btn:hover { text-decoration-style: solid; filter: brightness(1.15); }

.rate-form { gap: 6px; }
.rate-form .cargo-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rf-locked { display: inline-flex; align-items: center; gap: 3px; color: var(--b-amber-fg); font-weight: 600; }

.rf-types { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--sub-panel); border: 1px solid var(--row-line); }
.rf-types button {
  flex: 1 1 0; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--text2);
  font: inherit; font-size: 11.5px; white-space: nowrap; cursor: pointer;
}
.rf-types button.on { background: var(--active-item-bg); color: var(--active-text); box-shadow: inset 0 0 0 1px var(--gold-border); font-weight: 600; }
.rf-types button:disabled { cursor: default; }

.rate-money { position: relative; }
.rate-money > span { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--text3); pointer-events: none; }
.rate-money .field { padding-left: 20px; font-variant-numeric: tabular-nums; }
.rf-calc { grid-column: span 1; align-self: end; height: 30px; display: flex; align-items: center; justify-content: flex-end; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }

.rf-lines-head { display: flex; align-items: center; justify-content: space-between; }
.rf-lines-head .btn-xs { height: 24px; padding: 0 8px; font-size: 11.5px; text-transform: none; letter-spacing: 0; }
.rf-lines { display: flex; flex-direction: column; gap: 4px; max-height: 128px; overflow-y: auto; }
.rf-line { display: grid; grid-template-columns: minmax(0, 1fr) 76px 46px 24px; gap: 4px; align-items: center; }
.rf-line .field { height: 28px; font-size: 12.5px; }
.rf-line .field.num { text-align: right; font-variant-numeric: tabular-nums; }
.rf-none { margin: 0; font-size: 12px; color: var(--text3); }

.rf-total {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding: 10px 12px;
  border-radius: 12px; background: var(--sub-panel); border: 1px solid var(--row-line);
}
.rf-total > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rf-total > div > span:first-child { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text3); }
.rf-total strong { font-family: Outfit, sans-serif; font-size: 24px; font-weight: 500; color: var(--green); font-variant-numeric: tabular-nums; }
.rf-total strong.carrier { color: var(--red); }
.rf-margin { font-size: 12px; color: var(--text3); }
.rf-margin.ok { color: var(--b-green-fg); }
.rf-margin.bad { color: var(--red); font-weight: 600; }

/* ---------- Reports, Analytics, Invoices, Load Templates (docs/specs/reports.md) ----------
   Class prefix: an-. Chart colours are a validated categorical set (teal, gold, violet, rose)
   with separate steps per theme; one teal hue for magnitude; gray for "All others". */

.app[data-theme="dark"] {
  --an-c1: #1FA693; --an-c2: #BE8A1F; --an-c3: #9079EC; --an-c4: #E0608F;
  --an-others: #6F817C; --an-seq: #1FA693; --an-seq-soft: rgba(31,166,147,0.35);
  --an-grid: rgba(206,228,221,0.08); --an-axis: #83968F; --an-tip-bg: rgba(10,20,21,0.96);
}
.app[data-theme="light"] {
  --an-c1: #0B8C7B; --an-c2: #B07508; --an-c3: #6A4FD0; --an-c4: #D2457D;
  --an-others: #8A9895; --an-seq: #0B8C7B; --an-seq-soft: rgba(11,140,123,0.30);
  --an-grid: rgba(19,46,43,0.08); --an-axis: #5F706C; --an-tip-bg: #FFFFFF;
}

/* ---------- page frame: never scrolls; tables scroll inside their panels ---------- */
.page:has(> .an-page) { flex: 1 1 0; min-height: 520px; }
.an-page { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.an-bar .toolbar { gap: 8px; }
.an-bar .btn { height: 36px; padding: 0 12px; font-size: 13px; }
.an-bar .select-wrap select { height: 36px; }
.an-bar .select-caret { top: 11px; }
.an-period select { min-width: 150px; }
.an-date { width: 138px; height: 36px; }
.an-tabs { flex: none; }
.an-tabs .tab { height: 34px; padding: 0 12px; font-size: 13px; }
.an-loading { padding: 24px 4px; color: var(--text3); }
.btn.an-on { border-color: var(--gold-border); color: var(--gold); }
.btn .count-pill { position: static; min-width: 18px; height: 18px; line-height: 18px; font-size: 10.5px; padding: 0 5px; border-radius: 9px; }

/* Segmented control (Pickup | Delivery, table views). */
.an-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--th-bg); border: 1px solid var(--row-line); }
.an-seg button { height: 28px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--text2); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.an-seg button:hover { color: var(--text); }
.an-seg button.on { background: var(--active-item-bg); color: var(--gold); font-weight: 600; box-shadow: inset 0 0 0 1px var(--gold-border); }
.an-seg.small button { height: 24px; padding: 0 9px; font-size: 12px; }

/* Filters popover. */
.an-filters { position: relative; }
.an-pop { right: 0; left: auto; width: 300px; padding: 12px; display: flex; flex-direction: column; gap: 9px; z-index: 40; }
.an-pop-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text2); }
.an-pop-field .select-wrap select { height: 32px; width: 100%; font-size: 13px; }
.an-pop-field .select-caret { top: 10px; }
.an-pop-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }

/* KPI strip. */
.an-kpis { flex: none; display: grid; grid-template-columns: repeat(var(--an-kpi-count, 5), minmax(0, 1fr)); gap: 10px; }
.an-kpi {
  min-width: 0; height: 70px; padding: 6px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow); display: flex; flex-direction: column; justify-content: center; gap: 1px;
}
.an-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-kpi-value { font-family: Outfit, sans-serif; font-size: 21px; font-weight: 500; line-height: 1.2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-kpi-sub { display: flex; gap: 6px; align-items: baseline; font-size: 11.5px; color: var(--text3); min-width: 0; }
.an-kpi-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-delta { font-weight: 600; white-space: nowrap; }
.an-delta.good { color: var(--green); }
.an-delta.bad { color: var(--red); }

/* Chart row. */
.an-charts { flex: none; display: grid; grid-template-columns: repeat(var(--an-chart-count, 3), minmax(0, 1fr)); gap: 10px; height: 196px; }
.an-chart {
  margin: 0; min-width: 0; height: 196px; padding: 8px 12px 4px; border-radius: 16px; background: var(--panel); border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow); display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.an-chart-head { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; height: 22px; }
.an-chart-title { font-weight: 600; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-legend { display: flex; gap: 10px; min-width: 0; overflow: hidden; font-size: 11.5px; color: var(--text2); flex: 1; }
.an-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; min-width: 0; }
.an-legend-name { overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.an-swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; display: inline-block; }
.an-chart-toggle { margin-left: auto; flex: none; height: 22px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--row-line); background: transparent; color: var(--text3); font: inherit; font-size: 11px; cursor: pointer; }
.an-chart-toggle:hover { color: var(--text); border-color: var(--btn-border); }
.an-chart-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.an-svg { display: block; overflow: visible; }
.an-chart-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 12.5px; }
.an-chart-table { height: 100%; overflow: auto; font-size: 11.5px; }
.an-chart-table table { width: 100%; border-collapse: collapse; }
.an-chart-table th, .an-chart-table td { padding: 3px 6px; border-bottom: 1px solid var(--row-line); text-align: left; white-space: nowrap; color: var(--text2); font-weight: 400; }
.an-chart-table th[scope=row] { color: var(--text); }
.an-chart-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Marks: colour by fixed slot; text in text tokens. */
.an-s1 { fill: var(--an-c1); stroke: var(--an-c1); background: var(--an-c1); }
.an-s2 { fill: var(--an-c2); stroke: var(--an-c2); background: var(--an-c2); }
.an-s3 { fill: var(--an-c3); stroke: var(--an-c3); background: var(--an-c3); }
.an-s4 { fill: var(--an-c4); stroke: var(--an-c4); background: var(--an-c4); }
.an-others { fill: var(--an-others); stroke: var(--an-others); background: var(--an-others); }
.an-seq { fill: var(--an-seq); }
path.an-s1, path.an-s2, path.an-s3, path.an-s4, path.an-others, path.an-seq { stroke: none; }
.an-line { fill: none !important; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
path.an-line.an-s1 { stroke: var(--an-c1); } path.an-line.an-s2 { stroke: var(--an-c2); }
path.an-line.an-s3 { stroke: var(--an-c3); } path.an-line.an-s4 { stroke: var(--an-c4); } path.an-line.an-others { stroke: var(--an-others); }
.an-dot { stroke: var(--panel-solid); stroke-width: 2px; }
.an-grid { stroke: var(--an-grid); stroke-width: 1; }
.an-baseline { stroke: var(--divider); stroke-width: 1; }
.an-ref { stroke: var(--text3); stroke-width: 1; stroke-dasharray: 4 4; }
.an-cross { stroke: var(--text3); stroke-width: 1; stroke-dasharray: 2 3; }
.an-axis { fill: var(--an-axis); font-size: 10.5px; font-family: Inter, sans-serif; }
.an-value { fill: var(--text2); font-size: 10.5px; font-weight: 600; font-family: Inter, sans-serif; }
.an-hit { fill: transparent; }
.an-mark:hover .an-hit { fill: var(--row-hover); }
.an-clickable { cursor: pointer; }
.an-clickable:hover .an-hlabel { fill: var(--gold); }
.an-tip {
  position: absolute; z-index: 5; transform: translate(-50%, -100%); pointer-events: none; min-width: 110px; max-width: 240px;
  padding: 6px 9px; border-radius: 9px; background: var(--an-tip-bg); border: 1px solid var(--panel-border); box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  font-size: 11.5px; color: var(--text2); white-space: nowrap;
}
.an-tip-title { font-weight: 600; color: var(--text); margin-bottom: 2px; white-space: normal; }
.an-tip-line { display: flex; align-items: center; gap: 6px; }

/* Lane map. */
.an-map-wrap { position: relative; height: 100%; border-radius: 10px; overflow: hidden; background: var(--map-sea); }
.an-map { display: block; width: 100%; height: 100%; }
.an-lane-line { fill: none; stroke: var(--an-seq); stroke-linecap: round; opacity: 0.8; }
.an-lane-hit { fill: none; stroke: transparent; stroke-width: 14px; }
.an-lane:hover .an-lane-line { opacity: 1; stroke: var(--gold-line); }
.an-lane-end { stroke: var(--map-sea); stroke-width: 1.5; }
.an-lane-end.origin { fill: var(--map-pickup); } .an-lane-end.dest { fill: var(--map-delivery); }
.an-map-note { position: absolute; left: 8px; bottom: 6px; font-size: 11px; color: var(--text3); background: var(--an-tip-bg); padding: 1px 7px; border-radius: 6px; }
.an-map-note.center { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }

/* Small multiples. */
.an-sparks { height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.an-spark-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); }
.an-spark-name { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.an-spark { flex: none; display: block; }
.an-spark-total { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Table panel. */
.an-table-panel { flex: 1 1 0; min-height: 160px; border-radius: 18px; }
.an-panel-bar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 40px; padding: 5px 14px; border-bottom: 1px solid var(--row-line); }
.an-panel-title { font-family: Outfit, sans-serif; font-size: 15px; font-weight: 500; color: var(--text); }
.an-basis { font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.an-panel-link { font-size: 12.5px; color: var(--gold); text-decoration: none; font-weight: 500; white-space: nowrap; }
.an-panel-link:hover { text-decoration: underline; }
.an-inline { font-size: 12px; color: var(--text2); }
.an-num { width: 56px; height: 28px; }
.an-focus { gap: 6px; }
.an-chip-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.an-grace { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text3); }
.an-grace svg { color: var(--gold); }
.an-grace label { color: var(--text2); }
.an-link-btn { border: 0; background: transparent; color: var(--gold); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }

.an-table-scroll { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.an-table { font-size: 12.5px; }
.an-table th { padding: 0; }
.an-table thead th { position: sticky; top: 0; z-index: 2; background: linear-gradient(var(--th-bg), var(--th-bg)), var(--panel-solid); }
.an-th { display: inline-flex; align-items: center; gap: 4px; width: 100%; padding: 7px 10px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-align: inherit; white-space: nowrap; }
.an-th.static { cursor: default; }
th.num .an-th { justify-content: flex-end; }
.an-sort { font-size: 9px; color: var(--gold); min-width: 8px; }
.an-table td { padding: 5px 10px; white-space: nowrap; vertical-align: middle; }
.an-table .badge.small { padding: 2px 8px; }
.an-table td:first-child, .an-table th:first-child .an-th { padding-left: 16px; }
.an-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.an-table tfoot td { position: sticky; bottom: 0; z-index: 2; font-weight: 700; color: var(--text); border-top: 1px solid var(--divider);
  background: linear-gradient(var(--th-bg), var(--th-bg)), var(--panel-solid); }
.an-table tr.an-strong td { font-weight: 700; background: var(--sub-panel); }
.an-table tbody tr:focus-visible { outline: 2px solid var(--gold-border); outline-offset: -2px; }
.an-link { color: var(--text); font-weight: 600; text-decoration: none; }
.an-link:hover { color: var(--gold); text-decoration: underline; }
.an-neg { color: var(--red); }
.an-foot { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text3); padding: 6px 16px; }
.an-preview-note { color: var(--b-amber-fg); }
.an-empty { padding: 32px 22px; }

/* Loads slide-out (drill-down). */
.an-group-sum { display: flex; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--row-line); font-size: 12.5px; color: var(--text3); }
.an-group-sum strong { color: var(--text); font-family: Outfit, sans-serif; font-size: 15px; font-weight: 500; margin-right: 3px; }
.an-group-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.an-group-list li { display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 10px; row-gap: 1px; align-items: center; padding: 7px 14px; border-bottom: 1px solid var(--row-line); font-size: 12.5px; }
.an-group-list li:hover { background: var(--row-hover); }
.an-group-money { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.an-group-sub { grid-column: span 2; font-size: 11.5px; color: var(--text3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-group-margin { font-size: 11.5px; color: var(--text3); text-align: right; white-space: nowrap; }
.an-group-list .clip { display: block; }
.an-group-legend { margin: 0; padding: 8px 14px; font-size: 11px; }
.an-ot-pair { display: inline-flex; gap: 3px; }
.an-ot { width: 17px; height: 17px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; border: 1px solid; }
.an-ot.good { color: var(--b-green-fg); background: var(--b-green-bg); border-color: var(--b-green-bd); }
.an-ot.bad { color: var(--b-red-fg); background: var(--b-red-bg); border-color: var(--b-red-bd); }
.an-ot.none { color: var(--b-amber-fg); background: var(--b-amber-bg); border-color: var(--b-amber-bd); }
.an-ot.dim { color: var(--b-dim-fg); background: var(--b-dim-bg); border-color: var(--b-dim-bd); }

/* Aging strip (Invoices). */
.an-aging { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.an-aging-bar { display: flex; height: 12px; gap: 2px; border-radius: 6px; overflow: hidden; background: var(--th-bg); }
.an-aging-seg { border: 0; padding: 0; min-width: 6px; cursor: pointer; opacity: 0.85; }
.an-aging-seg:hover, .an-aging-seg.on { opacity: 1; box-shadow: inset 0 0 0 2px var(--text); }
.an-aging-empty { margin: auto; font-size: 10px; color: var(--text3); }
.an-aging-seg.b-current, .an-aging-dot.b-current { background: var(--green); }
.an-aging-seg.b-15, .an-aging-dot.b-15 { background: var(--b-teal-fg); }
.an-aging-seg.b-45, .an-aging-dot.b-45 { background: var(--b-amber-fg); }
.an-aging-seg.b-late, .an-aging-dot.b-late { background: var(--red); }
.an-aging-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; }
.an-aging-label { display: inline-flex; align-items: center; gap: 4px; padding: 0 3px; white-space: nowrap; min-width: 0; overflow: hidden; border: 0; border-radius: 6px; background: transparent; color: var(--text2); font: inherit; font-size: 11px; cursor: pointer; }
.an-aging-label strong { color: var(--text); font-weight: 600; }
.an-aging-label.zero { opacity: 0.5; }
.an-aging-label.on { background: var(--active-item-bg); box-shadow: inset 0 0 0 1px var(--gold-border); }
.an-aging-dot { width: 8px; height: 8px; border-radius: 2px; }

/* ---------- Invoices ---------- */
.an-search { height: 36px; min-width: 200px; flex: 1 1 200px; }
.an-party select { max-width: 190px; }
.an-void { white-space: nowrap; font-size: 12.5px; }
.an-inv-strip { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 380px); gap: 10px; height: 74px; }
/* A slide-out beside the page leaves less room: keep the three filter tiles, then the aging. */
@container (max-width: 900px) {
  .an-inv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-inv-tiles .an-tile:nth-child(n+4) { display: none; }
  .an-aging-labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-inv-aging-head { display: none; }
  .an-aging-label { font-size: 11px; line-height: 14px; }
}
.an-inv-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.an-tile { padding: 7px 11px; min-height: 0; height: 74px; position: relative; min-width: 0; }
.an-tile .t-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-tile .t-value { font-size: 19px; }
.an-inv-aging { padding: 6px 12px; height: 74px; box-sizing: border-box; border-radius: 16px; background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow); display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.an-inv-aging-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); }
.an-inv-aging-head .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.an-inv-table { font-size: 12px; }
.an-inv-table td { padding: 5px 6px; }
.an-inv-table .an-th { padding: 7px 6px; }
.an-inv-table td.col-check, .an-inv-table th.col-check { width: 30px; padding-left: 12px !important; padding-right: 2px !important; }
.an-inv-table .an-clip { max-width: 104px; }
.an-inv-table .an-po { max-width: 70px; }
.an-subtag.an-docs-badge-amber { color: var(--b-amber-fg); }
.an-subtag.an-docs-badge-teal { color: var(--b-teal-fg); }
.an-inv-table .an-payto { max-width: 96px; }
.an-inv-table .an-payto .badge { max-width: 90px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.an-inv-table td:nth-child(2) { padding-left: 8px; }
.an-clip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.an-icon-col { width: 26px; text-align: center; }
.an-arch { margin-left: 4px; display: inline-flex; vertical-align: middle; }
.an-subtag { margin-left: 5px; font-size: 10.5px; color: var(--text3); }
.an-late { color: var(--red); font-weight: 600; }
.an-table tr.an-overdue-row td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.an-star { color: var(--gold); margin-right: 4px; }
.an-bulk { flex: 1 1 auto; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; }
.an-bulk-count { font-weight: 600; color: var(--gold); white-space: nowrap; margin-right: auto; padding-left: 8px; }
.an-inv-side { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; overflow-y: auto; }
.an-kv { font-size: 12.5px; row-gap: 5px; }
.an-side-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.an-side-actions .btn-xs { height: 30px; }
.an-side-section { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); border-top: 1px solid var(--row-line); padding-top: 8px; }
.an-side-empty { margin: 0; font-size: 12.5px; padding: 0 14px 6px; }
.an-inv-side .an-side-empty { padding: 0; }
.an-mini { width: 100%; border-collapse: collapse; font-size: 12px; }
.an-mini th { text-align: left; color: var(--text3); font-weight: 600; padding: 3px 4px; border-bottom: 1px solid var(--row-line); }
.an-mini td { padding: 4px; border-bottom: 1px solid var(--row-line); }
.an-mini .num { text-align: right; font-variant-numeric: tabular-nums; }
.an-voided td { text-decoration: line-through; color: var(--text3); }
.an-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.an-activity li { padding-left: 10px; border-left: 2px solid var(--row-line); }

/* ---------- Reports hub ---------- */
.an-rep-body { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 10px; }
.an-rep-list { min-height: 0; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; border-radius: 18px; }
.an-rep-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 0; border-radius: 11px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; text-decoration: none; }
.an-rep-item:hover { background: var(--row-hover); }
.an-rep-item.on { background: var(--active-item-bg); box-shadow: inset 2px 0 0 var(--gold-line); }
.an-rep-name { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.an-rep-item.on .an-rep-name { color: var(--gold); }
.an-rep-name svg { color: var(--text3); }
.an-rep-desc { font-size: 11.5px; color: var(--text3); line-height: 1.35; }
.an-rep-panel { min-width: 0; }
.an-count { position: static; }
.an-params { max-width: 640px; }
.an-rep-financial { margin: auto; max-width: 420px; padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--text3); }
.an-rep-financial svg { color: var(--gold); }
.an-rep-financial strong { color: var(--text); font-size: 15px; }
.an-inline-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text2); white-space: nowrap; }
.an-inline-field .an-num { width: 64px; height: 34px; }
.an-inline-field .an-date { height: 34px; }
.an-status-pop { width: 230px; max-height: 420px; overflow-y: auto; gap: 4px; }

/* ---------- Load Templates ---------- */
.an-tpl-table td { vertical-align: middle; padding: 6px 7px; }
.an-tpl-table .an-th { padding: 7px 7px; }
.an-tpl-table td:first-child, .an-tpl-table th:first-child .an-th { padding-left: 14px; }
.an-tpl-table .an-clip { max-width: 120px; }
.an-tpl-cell { max-width: 190px; }
.an-tpl-table .an-route .an-clip-line { max-width: 175px; }
.an-tpl-table .an-actions-col .btn-xs { height: 26px; padding: 0 8px; margin-left: 2px; }
.an-tpl-table .an-actions-col .btn-icon.btn-xs { width: 26px; padding: 0; }
.an-tpl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-clip-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.an-tpl-name { font-weight: 600; color: var(--text); }
.an-actions-col { white-space: nowrap; text-align: right; }
.an-actions-col .btn-xs { height: 28px; padding: 0 9px; margin-left: 3px; }
.an-actions-col .btn-icon.btn-xs { width: 28px; padding: 0; }
.an-tpl-form { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; font-size: 12.5px; }
.an-tf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; }
.an-tf { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; color: var(--text2); }
.an-tf-wide { grid-column: span 2; }
.an-tf-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.an-grow { flex: 1 1 150px; min-width: 0; }
.an-city { flex: 1 1 90px; min-width: 0; }
.an-st { width: 46px; flex: none; }
.an-notes { height: auto; padding: 6px 9px; resize: vertical; }
.an-margin-line { font-size: 12px; }
.an-tpl-actions { display: flex; align-items: center; gap: 6px; }
.an-stops-head { display: flex; align-items: center; justify-content: space-between; margin: 0 14px; }
.an-stops { list-style: none; margin: 0; padding: 0 14px; display: flex; flex-direction: column; }
.an-stops li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--row-line); font-size: 12.5px; }
.an-stop-place { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.an-stop-place strong, .an-stop-place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-stop-btns { display: flex; gap: 2px; }
.an-stop-form { margin: 8px 14px 14px; padding: 10px; border-radius: 12px; border: 1px solid var(--gold-border); background: var(--sub-panel); display: flex; flex-direction: column; gap: 8px; }
.an-from-load { min-width: 380px; }
.an-pick-list { list-style: none; margin: 0; padding: 0; max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.an-pick { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; padding: 6px 9px; border: 1px solid var(--row-line); border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.an-pick span.muted { grid-column: 2; }
.an-pick:hover { background: var(--row-hover); }
.an-pick.on { border-color: var(--gold-border); background: var(--active-item-bg); }
.an-split { position: relative; display: inline-flex; }
.an-split-menu { top: calc(100% + 6px); left: 0; right: auto; width: 210px; z-index: 40; }

/* Tracking slide-out: actual stop times. */
.an-stop-times { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 2px 21px; }
.an-stop-time { font-size: 11.5px; color: var(--b-teal-fg); }
.an-now { height: 24px !important; padding: 0 8px !important; font-size: 11.5px !important; }
.an-dash-link { margin-left: auto; font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 500; color: var(--gold); text-decoration: none; }

/* A slide-out beside the page (or a narrow window): tabs stay on one line, the charts step
   aside so the table keeps its room, and the KPI numbers get a little smaller. */
@container (max-width: 760px) {
  .an-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .an-tabs .tab { flex: none; padding: 0 9px; }
  .an-charts { display: none; }
  .an-kpi-value { font-size: 17px; }
  .an-kpi { padding: 7px 9px; }
  .an-basis { display: none; }
  .an-rep-body { grid-template-columns: 180px minmax(0, 1fr); }
  .an-rep-desc { display: none; }
}

/* Print header: hidden on screen. */
.an-print-head { display: none; }

/* ---------- narrow windows ---------- */
@media (max-width: 1280px) {
  .an-basis { display: none; }
  .an-kpi-value { font-size: 19px; }
}
@media (max-width: 1100px) {
  .page:has(> .an-page) { flex: 1 0 auto; }
  .an-charts { grid-template-columns: minmax(0, 1fr); height: auto; }
  .an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- print: the page's tables and charts on white paper ---------- */
@media print {
  /* A named page, so other printouts (Rate Con, BOL) keep their own page setup. */
  @page an-report { size: letter landscape; margin: 0.4in; }
  .an-page { page: an-report; }
  html:has(.an-page) .sidebar, html:has(.an-page) .topbar, html:has(.an-page) .tool-rail, html:has(.an-page) .slideout,
  html:has(.an-page) .side-slot, html:has(.an-page) .footer, html:has(.an-page) .an-bar, html:has(.an-page) .an-tabs,
  html:has(.an-page) .an-chart-toggle, html:has(.an-page) .an-no-print, html:has(.an-page) .toasts { display: none !important; }
  html:has(.an-page), html:has(.an-page) body, html:has(.an-page) .app, html:has(.an-page) .shell, html:has(.an-page) .shell-main,
  html:has(.an-page) .shell-body, html:has(.an-page) .scroll-area, html:has(.an-page) .page, .an-page, .an-table-panel, .an-table-scroll {
    display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important;
    background: #fff !important; box-shadow: none !important; backdrop-filter: none !important; position: static !important;
  }
  html:has(.an-page) .page { padding: 0 !important; }
  html:has(.an-page) .app {
    --text: #111; --text2: #333; --text3: #555; --gold: #6b4f12; --panel: #fff; --panel-solid: #fff; --panel-border: #ccc;
    --row-line: #ddd; --th-bg: #f2f2f2; --divider: #999; --sub-panel: #f6f6f6; --green: #17663f; --red: #a1281c;
    --an-c1: #0B8C7B; --an-c2: #B07508; --an-c3: #6A4FD0; --an-c4: #D2457D; --an-others: #8A9895; --an-seq: #0B8C7B;
    --an-grid: #e3e3e3; --an-axis: #444; --map-sea: #fff; --map-land: #f7f7f4; --map-coast: #999;
    color: #111 !important;
  }
  .an-print-head { display: block; margin-bottom: 10px; font-size: 11px; color: #333; }
  .an-print-company { font-size: 14px; font-weight: 700; color: #111; }
  .an-print-title { font-size: 18px; font-family: Outfit, sans-serif; color: #111; }
  .an-kpis { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; margin-bottom: 8px; }
  .an-kpi, .an-chart { border: 1px solid #ccc !important; box-shadow: none !important; background: #fff !important; }
  .an-charts { display: grid !important; height: auto !important; margin-bottom: 8px; break-inside: avoid; }
  .an-table thead { display: table-header-group; }
  .an-table tfoot { display: table-footer-group; }
  .an-table thead th, .an-table tfoot td { position: static !important; background: #f2f2f2 !important; }
  .an-table tr { break-inside: avoid; }
  .an-print-selected .an-unchecked { display: none !important; }
  html:has(.an-page) .an-rep-list, html:has(.an-page) .an-inv-strip .an-inv-aging button { display: none !important; }
  .an-rep-body { display: block !important; }
  .an-table .col-check, .an-table .an-actions-col { display: none !important; }
  .an-table td, .an-table th { color: #111 !important; }
  .badge { border: 1px solid #999 !important; background: #fff !important; color: #111 !important; }
}

/* TDBooks Receivables and Payables (pages/tdbooks/receivables, payables). Classes use tdr-.
   Theme colours come only from the tokens in flextms.css. Every screen fits the window: the lists
   and panels scroll inside themselves, the page never does. */

.page:has(> .tdr-page) { flex: 1 1 0; min-height: 0; }
.tdr-page { flex: 1 1 0; min-height: 360px; display: flex; flex-direction: column; gap: 10px; }
.tdr-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.tdr-head { flex: none; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--row-line); min-height: 46px; }
.tdr-h3 { margin: 0; font-family: Outfit, sans-serif; font-size: 15px; font-weight: 500; white-space: nowrap; }
.tdr-scroll { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tdr-scroll thead th { position: sticky; top: 0; z-index: 1; background: linear-gradient(var(--th-bg), var(--th-bg)), var(--panel-solid); }

/* tables */
.tdr-table { font-size: 13px; }
.tdr-table td { padding: 6px 8px; vertical-align: middle; white-space: nowrap; }
.tdr-table .th-btn { padding: 8px; font-size: 11.5px; letter-spacing: 0.04em; }
.tdr-table th.money .th-btn { justify-content: flex-end; }
.tdr-table th.c .th-btn { justify-content: center; }
.tdr-table td.money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tdr-table td.c { text-align: center; }
.tdr-table .pad-left { padding-left: 16px; }
.tdr-table th.pad-left .th-btn { padding-left: 16px; }
.tdr-table tr.selected td { background: var(--sel-row); }
.tdr-table tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--gold-line); }
.tdr-table .sub { margin-top: 1px; font-size: 11.5px; }
.tdr-table .col-check { padding-left: 14px !important; width: 38px; }
.tdr-table td.tdr-wrap { white-space: normal; min-width: 160px; }
.tdr-clip { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdr-clip-200 { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.tdr-accent { color: var(--gold); }
.tdr-link { text-decoration: none; font-weight: 600; }
.tdr-link:hover { color: var(--gold); }
.tdr-late { color: var(--red); font-weight: 700; }
.tdr-bold { font-weight: 700; }
.tdr-table tr.tdr-blocked td { background: var(--b-red-bg); }
.tdr-table tr.tdr-muted-row td { opacity: 0.75; }
.tdr-vendor { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tdr-vendor .factor-badge { flex: none; }
.tdr-sub-line { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.tdr-linkbtn { border: 0; background: none; padding: 0; color: var(--gold); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.tdr-linkbtn:hover { text-decoration: underline; text-underline-offset: 2px; }
.tdr-linkbtn:disabled { opacity: 0.5; cursor: not-allowed; }
.tdr-linkbtn.danger { color: var(--red); }
.tdr-linkbtn.muted { color: var(--text3); font-weight: 400; }

/* stat chips (48TMS summary cards) */
.tdr-chips { display: flex; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.tdr-chip { display: flex; flex-direction: column; gap: 0; padding: 2px 10px; border-radius: 10px; border: 1px solid var(--row-line); background: var(--th-bg); min-width: 0; }
.tdr-chip-l { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--text3); white-space: nowrap; }
.tdr-chip-v { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.tdr-chip-v strong { font-family: Outfit, sans-serif; font-size: 14px; font-weight: 500; }
.tdr-chip-s { font-size: 11px; color: var(--text3); }
@media (max-width: 1540px) { .tdr-chip-s { display: none; } }
.shell-body:has(#side-slot .slideout) .tdr-chip-s { display: none; }
.shell-body:has(#side-slot .slideout) .tdr-page .tdr-chips { display: none; }

/* tabs and filters in a panel head */
.tdr-tabs { display: flex; gap: 2px; align-self: stretch; margin: -6px 0; }
.tdr-tab { display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text2); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.tdr-tab:hover { color: var(--text); }
.tdr-tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--gold-line); }
.tdr-pill { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; background: var(--b-neutral-bg); color: var(--b-neutral-fg); }
.tdr-tab.active .tdr-pill { background: var(--pill-bg); color: var(--pill-fg); }
.tdr-search { height: 32px; flex: 0 1 190px; min-width: 140px; font-size: 13px; border-radius: 9px; }
@media (min-width: 1500px) { .tdr-search { flex-basis: 250px; } }
.tdr-count { font-size: 12px; color: var(--text3); white-space: nowrap; }
.tdr-totals { font-size: 13px; color: var(--text2); white-space: nowrap; }
.tdr-filter select { height: 32px; font-size: 12.5px; border-radius: 9px; padding: 0 30px 0 10px; }
.tdr-filter .select-caret { top: 10px; right: 10px; }
.td-actions .btn-xs, .tdr-head .btn-xs { white-space: nowrap; }

/* row menus (they float in .app, outside the scrolling list) */
.tdr-menu-wrap { position: relative; display: inline-flex; }
.tdr-action-btn { height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.tdr-scrim { z-index: 80; }
.popover.tdr-menu { position: fixed; top: auto; left: auto; min-width: 180px; z-index: 81; }
.tdr-menu .popover-item { text-decoration: none; font-size: 13px; color: var(--text); }
.tdr-menu .popover-item:disabled { opacity: 0.45; cursor: not-allowed; }
.tdr-menu-div { height: 1px; margin: 3px 4px; background: var(--row-line); flex: none; }
.popover.tdr-pop-right { left: auto; right: 0; min-width: 170px; }
.tdr-pop-right .popover-item { text-decoration: none; }

/* loading and empty states */
.tdr-loading { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.tdr-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--row-line); border-top-color: var(--gold-line); animation: tdr-spin 0.8s linear infinite; }
@keyframes tdr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tdr-spin { animation-duration: 2.4s; } }
.tdr-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 36px 20px; text-align: center; color: var(--text3); }
.tdr-empty strong { color: var(--text2); font-size: 14px; }
.tdr-empty span { max-width: 420px; font-size: 13px; }
.tdr-empty.small { padding: 14px; flex: none; }
.tdr-empty-actions { display: flex; gap: 8px; margin-top: 6px; }

/* Customer / Vendor Detail split */
.tdr-split { flex: 1 1 0; min-height: 0; display: flex; }
.tdr-split.dragging { user-select: none; cursor: col-resize; }
.tdr-side { flex: none; display: flex; flex-direction: column; min-height: 0; }
.tdr-side-search { flex: none; padding: 8px; border-bottom: 1px solid var(--row-line); }
.tdr-side-search .tdr-search { width: 100%; flex: none; }
.tdr-side-list { flex: 1 1 0; min-height: 0; overflow: auto; padding: 4px; scrollbar-width: thin; }
.tdr-side-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; text-decoration: none; font-size: 13px; color: var(--text2); }
.tdr-side-row:hover { background: var(--row-hover); color: var(--text); }
.tdr-side-row.on { background: var(--sel-row); color: var(--text); box-shadow: inset 3px 0 0 var(--gold-line); font-weight: 600; }
.tdr-side-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdr-side-amt { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.tdr-gutter { flex: none; width: 10px; cursor: col-resize; display: flex; align-items: center; justify-content: center; }
.tdr-gutter::after { content: ""; width: 3px; height: 44px; border-radius: 2px; background: var(--divider); }
.tdr-gutter:hover::after, .tdr-split.dragging .tdr-gutter::after { background: var(--gold-line); }
.tdr-detail { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.tdr-dhead { flex: none; display: flex; align-items: center; gap: 8px 10px; padding: 8px 14px; border-bottom: 1px solid var(--row-line); flex-wrap: wrap; }
.tdr-dhead-main { flex: 1 1 200px; min-width: 0; }
.tdr-dhead-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tdr-dhead-top h1 { min-width: 0; }
.tdr-dhead h1 { margin: 0; font-family: Outfit, sans-serif; font-size: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.tdr-back { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text3); text-decoration: none; }
.tdr-back:hover { color: var(--gold); }
.tdr-dsub { display: flex; flex-wrap: nowrap; gap: 2px 14px; font-size: 12px; color: var(--text3); overflow: hidden; }
.tdr-dsub span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; flex: none; }
.tdr-dsub span:last-child { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; display: block; }
.tdr-dsub svg { color: var(--gold); flex: none; }
.tdr-blocked-line { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--red); margin-top: 2px; }
.tdr-summary-chip { display: flex; flex-direction: column; gap: 1px; padding: 4px 12px; border-radius: 10px; border: 1px solid var(--row-line); background: var(--th-bg); font-size: 12.5px; color: var(--text2); white-space: nowrap; }
.tdr-dtabs { flex: none; display: flex; align-items: center; gap: 4px; padding: 0 10px; border-bottom: 1px solid var(--row-line); min-height: 40px; }
.tdr-dtabs .tab { height: 38px; font-size: 13px; }
.tdr-dbody { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.tdr-details { flex: 1 1 0; min-height: 0; overflow: auto; padding: 12px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px 18px; align-content: start; }
.tdr-details p { margin: 0; }
.tdr-address { display: flex; flex-direction: column; }
.tdr-activity, .tdr-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tdr-activity { padding: 6px 14px 12px; }
.tdr-activity li, .tdr-timeline li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--row-line); font-size: 12.5px; color: var(--text2); }
.tdr-activity li:last-child, .tdr-timeline li:last-child { border-bottom: 0; }
.tdr-activity .when, .tdr-timeline .when { color: var(--text3); white-space: nowrap; min-width: 150px; }
.tdr-activity strong, .tdr-timeline strong { color: var(--text); font-weight: 600; }
.tdr-activity em { color: var(--text3); }
.tdr-activity li.rev strong, .tdr-timeline li.rev strong { color: var(--red); }
.tdr-filter { margin-right: 2px; }

/* statements */
.tdr-statement { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 0; }
.tdr-statement > .tdr-scroll { margin: 0 -14px; border-top: 1px solid var(--row-line); }
.tdr-statement-bar { flex: none; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.tdr-statement-bar .af { width: 150px; }
.tdr-statement-sum { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tdr-statement-sum > div { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--row-line); background: var(--th-bg); }
.tdr-statement-sum span { font-size: 11px; color: var(--text3); }
.tdr-statement-sum strong { font-family: Outfit, sans-serif; font-size: 17px; font-weight: 500; }

/* slide-outs */
.tdr-slide { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 16px; font-size: 13px; }
.tdr-banner { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--row-line); background: var(--th-bg); }
.tdr-banner-l { display: flex; gap: 6px; flex-wrap: wrap; }
.tdr-banner-r { display: flex; flex-direction: column; align-items: flex-end; }
.tdr-big { font-family: Outfit, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.15; }
.tdr-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tdr-actions .btn { height: 30px; }
.tdr-actions .btn.on { border-color: var(--gold-border); color: var(--gold); }
.tdr-sec { display: flex; flex-direction: column; gap: 6px; }
.tdr-sec h4 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--text3); text-transform: uppercase; }
.tdr-kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; }
.tdr-kv > span { display: block; font-size: 11px; color: var(--text3); }
.tdr-kv > div { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.tdr-notes { margin: 0; white-space: pre-wrap; }
.tdr-form-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--row-line); background: var(--th-bg); }
.tdr-form-card .af-value { min-height: 30px; }
.tdr-grid { display: grid; gap: 8px 10px; }
.tdr-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tdr-grid.three { grid-template-columns: 2fr 1fr 1fr; }
.tdr-form-actions { display: flex; justify-content: flex-end; gap: 6px; }
.tdr-amount-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tdr-embed { display: flex; flex-direction: column; gap: 10px; }
.tdr-embed .acct-cols { grid-template-columns: minmax(0, 1fr); }
.tdr-due { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--b-amber-bd); background: var(--b-amber-bg); }
.tdr-due .tdr-big { color: var(--b-amber-fg); font-size: 24px; }
.tdr-due.paid { border-color: var(--b-green-bd); background: var(--b-green-bg); }
.tdr-due.paid .tdr-big { color: var(--b-green-fg); }
.tdr-vendor-block { display: flex; flex-direction: column; font-size: 12.5px; color: var(--text2); }
.tdr-seg { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: 10px; background: var(--th-bg); border: 1px solid var(--row-line); }
.tdr-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text2); font: inherit; font-size: 12.5px; cursor: pointer; }
.tdr-seg button.on { background: var(--active-item-bg); color: var(--gold); font-weight: 600; }
.tdr-wc-head { display: flex; flex-direction: column; gap: 2px; }
#side-slot .tdr-slide .acct-mini td, #side-slot .tdr-slide .acct-mini th { padding: 4px 5px; }

/* Receive Payment and Pay Bills: the work on the left, the summary on the right */
.tdr-rp { flex: 1 1 0; min-height: 0; display: flex; gap: 10px; }
.tdr-rp-main { flex: 1 1 auto; min-width: 0; }
.tdr-rp-sum { flex: 0 0 280px; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; overflow: auto; }
.tdr-rp-form { flex: none; display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 12px; border-bottom: 1px solid var(--row-line); }
.tdr-rp-form .af .btn { height: 30px; }
.tdr-rp-bal { font-size: 12px; font-weight: 600; }
.tdr-rp-memo { flex: none; padding: 8px 12px 10px; border-top: 1px solid var(--row-line); }
.tdr-rp-memo textarea.field { min-height: 36px; height: 36px; }
.tdr-pay-input { width: 110px; text-align: right; }
.tdr-sum-rows { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13px; }
.tdr-sum-rows > span { color: var(--text3); }
.tdr-sum-rows > strong { text-align: right; font-variant-numeric: tabular-nums; }
.tdr-sum-rows .tdr-sum-total { border-top: 1px solid var(--row-line); padding-top: 4px; font-weight: 700; color: var(--text); }
.tdr-sel-badge { align-self: flex-start; }
.tdr-received { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.tdr-received .tdr-big { font-size: 18px; }
.tdr-pay-btn { height: 42px; font-size: 14px; font-weight: 700; background: var(--b-green-bg); border: 1px solid var(--b-green-bd); color: var(--b-green-fg); border-radius: 10px; }
.tdr-pay-btn:not(:disabled):hover { box-shadow: 0 0 0 1px var(--b-green-bd); }
.tdr-by-vendor { display: flex; flex-direction: column; gap: 3px; }
.tdr-by-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.tdr-by-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
.tdr-combine { white-space: nowrap; font-size: 12.5px; }
.tdr-head .chip .x-btn { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 4px; font-size: 14px; line-height: 1; }

@media (max-width: 1400px) {
  .tdr-rp-sum { flex-basis: 250px; }
}

/* With a slide-out open the page is narrow: keep each bar on one line. */
.shell-body:has(#side-slot .slideout) .tdr-totals,
.shell-body:has(#side-slot .slideout) .tdr-count { display: none; }
.shell-body:has(#side-slot .slideout) .tdr-search { min-width: 120px; flex-basis: 130px; }
.shell-body:has(#side-slot .slideout) .tdr-page .td-actions .btn-outline { display: none; }
.shell-body:has(#side-slot .slideout) .tdr-page .td-bar { gap: 8px; }
.shell-body:has(#side-slot .slideout) .tdr-tab { padding: 0 6px; }

/* the register's totals row stays in view at the bottom of the list */
.tdr-scroll tfoot td { position: sticky; bottom: 0; z-index: 1; background: linear-gradient(var(--th-bg), var(--th-bg)), var(--panel-solid); border-top: 1px solid var(--divider); font-size: 12.5px; }
.tdr-foot-label { text-align: right; color: var(--text3); }

/* Detail pages: with a slide-out open, the side list steps aside for the record. */
.shell-body:has(#side-slot .slideout) .tdr-split > .tdr-side,
.shell-body:has(#side-slot .slideout) .tdr-split > .tdr-gutter { display: none; }
.tdr-dbody .tdr-table td { padding: 5px 7px; }
.tdr-dbody .tdr-table .th-btn { padding: 8px; }
.tdr-rp-main .tdr-clip { max-width: 210px; }
.shell-body:has(#side-slot .slideout) .tdr-head .btn-outline,
.shell-body:has(#side-slot .slideout) .tdr-tab .tdr-pill { display: none; }
.shell-body:has(#side-slot .slideout) .tdr-head { gap: 6px 8px; padding: 6px 10px; }
.shell-body:has(#side-slot .slideout) .tdr-rp-sum { display: none; }

/* TDBooks Dashboard, Banking and Dispatch Pay (pages/tdbooks/{dashboard,banking/*,payroll}.rs).
   Classes use tdb-. Theme variables only; the checks and statements themselves are pictures of
   the printed (black on white) PDF. Each screen fits 1366x768: the TDBooks bar, at most one tile
   strip, then one panel whose rows scroll inside it. */

.td-page .clip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-page .small { font-size: 12px; }
.td-page .grow { flex: 1; }
.td-page .empty.slim { padding: 26px 22px; gap: 6px; text-align: center; }
.td-page .empty.slim strong { color: var(--text2); font-weight: 600; }
.td-page .empty.slim p { max-width: 420px; font-size: 13px; }
.tdb-opt { display: inline; }
@media (max-width: 1500px) { .tdb-opt { display: none; } }

/* tiles */
.tdb-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; flex: none; }
.tdb-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tdb-tiles.skeleton { height: 58px; }
.tdb-tile {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 14px; min-width: 0; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
}
.tdb-tile .t-label { font-size: 10.5px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; white-space: nowrap; }
.tdb-tile .t-value { font-family: Outfit, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.tdb-tile .t-sub { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-tile .t-value.green, .td-page .t-green { color: var(--green); }
.tdb-tile .t-value.red, .td-page .t-red { color: var(--red); }
.tdb-tile .t-value.amber, .td-page .t-amber { color: var(--b-amber-fg); }
.tdb-tile .t-value.teal { color: var(--b-teal-fg); }
.tdb-tile-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.tdb-tile-btn svg { color: var(--gold); }
.tdb-tile-input { height: 28px; font-family: Outfit, sans-serif; font-size: 16px; }

/* the list panel and its one head row */
.tdb-panel { flex: 1 1 0; min-height: 0; }
.tdb-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--row-line); flex-wrap: nowrap; min-width: 0; }
.tdb-head > * { flex: none; }
.tdb-head .grow { flex: 1 1 0; min-width: 0; }
.tdb-h2 { margin: 0; font-family: Outfit, sans-serif; font-size: 15.5px; font-weight: 500; white-space: nowrap; }
.tdb-search { height: 32px; padding: 0 10px; border-radius: 9px; flex: 1 1 160px !important; min-width: 120px; max-width: 260px; font-size: 13px; }
.tdb-select select { height: 32px; font-size: 12.5px; border-radius: 9px; padding: 0 28px 0 10px; }
.tdb-select .select-caret { top: 10px; right: 10px; }
.tdb-date { width: 138px; height: 32px; border-radius: 9px; }
.tdb-num { width: 84px; height: 30px; }
.tdb-period { width: 110px; height: 30px; }
.tdb-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text3); white-space: nowrap; }
.tdb-inline .field-select { width: auto; min-width: 150px; }
.tdb-inline-error { margin: 0; padding: 4px 14px 8px; color: var(--red); font-size: 12.5px; }
.tdb-foot { flex: none; padding: 5px 14px; border-top: 1px solid var(--row-line); font-size: 12px; }
.tdb-seg { min-width: 0; }
.tdb-seg button { flex: 1 1 auto; min-width: 0; height: 26px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-bar-text { font-size: 12.5px; color: var(--text2); white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.tdb-subtitle { align-self: center; font-size: 12.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.tdb-sumline { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 4px; font-size: 13px; color: var(--text2); }
.tdb-sumline strong { color: var(--text); }

/* tables */
.tdb-table { font-size: 12.5px; }
.tdb-table td { padding: 6px 8px; vertical-align: middle; }
.tdb-table th .th-btn { padding: 8px; }
.tdb-table th.money .th-btn { justify-content: flex-end; }
.tdb-table td.money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tdb-table td.c { text-align: center; }
.tdb-table td.clip-cell { max-width: 220px; }
.tdb-table td.clip-cell .clip { display: block; }
.tdb-table .badge { padding: 2px 8px; font-size: 10.5px; }
.tdb-table .row-actions { display: inline-flex; gap: 2px; align-items: center; }
.tdb-table .row-actions .btn { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; }
.tdb-table .col-check { width: 36px; padding-left: 14px !important; }
.tdb-table th.col-check { padding: 8px 6px 8px 14px !important; }
.tdb-table tr.tdb-void td { opacity: 0.55; }
.tdb-table tr.tdb-void td .clip, .tdb-table tr.tdb-void td.money { text-decoration: line-through; }
.tdb-table tr.tdb-cleared td { background: var(--b-green-bg); }
.tdb-ref { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.tdb-ref svg { color: var(--text3); }
.tdb-ref.ach, .tdb-ref.ach svg { color: var(--b-teal-fg); }
.icon-btn.tdb-danger:hover { color: var(--red); }
.tdb-danger-outline { color: var(--red) !important; border-color: var(--b-red-bd) !important; }
.tdb-link-icon { display: inline-flex; margin-left: 4px; color: var(--gold); vertical-align: middle; }
.tdb-bang { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 8px; background: var(--b-red-bg); color: var(--b-red-fg); border: 1px solid var(--b-red-bd); font-size: 11px; font-weight: 800; cursor: help; }
.tdb-pill { margin-left: 6px; background: var(--b-neutral-bg); color: var(--b-neutral-fg); }
.tdb-pill.green { background: var(--b-green-bg); color: var(--b-green-fg); }
.td-tab .count-pill { position: static; }
button.td-tab { border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13px; cursor: pointer; }
button.td-tab.active { border-bottom-color: var(--gold-line); }

/* notes and info boxes */
.tdb-note { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--text3); }
.tdb-note svg { flex: none; margin-top: 2px; }
.tdb-note.warn { color: var(--b-amber-fg); }
.tdb-info { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--b-teal-bd); background: var(--b-teal-bg); color: var(--text); font-size: 12.5px; }
.tdb-info p { margin: 0 0 6px; }
.tdb-info p:last-child { margin-bottom: 0; }
.tdb-info > svg { flex: none; color: var(--b-teal-fg); margin-top: 1px; }
.tdb-info.ok { border-color: var(--b-green-bd); background: var(--b-green-bg); }
.tdb-info.ok > svg { color: var(--b-green-fg); }
.tdb-info.warn { border-color: var(--b-amber-bd); background: var(--b-amber-bg); }
.tdb-info.slim { flex: none; margin: 0; padding: 6px 12px; align-items: center; }
.tdb-error p { margin: 0 0 8px; }
.tdb-gap { display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; max-width: 420px; overflow: hidden; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--b-amber-bd); background: var(--b-amber-bg); color: var(--b-amber-fg); font: inherit; font-size: 11.5px; cursor: pointer; text-align: left; }

.tdb-gap > svg { flex: none; }
.tdb-gap > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the Check slide-out */
.tdb-check { flex: 1 1 auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.tdb-thumb { display: block; padding: 0; border: 1px solid var(--row-line); border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; }
.tdb-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 612 / 792; object-fit: cover; object-position: top; max-height: 230px; }
.tdb-kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 3px 10px; }
.tdb-kv.tight { grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; }
.tdb-kv .k { color: var(--text3); font-size: 12px; }
.tdb-kv .v { min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.tdb-h4 { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.06em; }
.tdb-edit { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; background: var(--th-bg); border: 1px solid var(--row-line); }
.tdb-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.tdb-timeline li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; padding-left: 10px; border-left: 2px solid var(--divider); }
.tdb-timeline li > span:first-child { color: var(--text3); }
.tdb-timeline li.green { border-left-color: var(--green); }
.tdb-timeline li.red { border-left-color: var(--red); }
.tdb-journal { display: flex; flex-direction: column; gap: 6px; }
.tdb-je { border: 1px solid var(--row-line); border-radius: 9px; padding: 5px 8px; }
.tdb-je.rev { border-style: dashed; }
.tdb-je-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text2); margin-bottom: 2px; }
.tdb-je-line { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; gap: 6px; font-size: 12px; }
.tdb-je-line .money { text-align: right; font-variant-numeric: tabular-nums; }
.tdb-side-actions { flex: none; position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--row-line); background: var(--panel-side); }

/* the PDF viewer slide-out */
.tdb-pdf { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tdb-pdf-tools { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.tdb-pdf-tools .dv-group .icon-btn.xs { width: 26px; height: 26px; border-radius: 7px; }
.tdb-pdf-main { flex: 1 1 0; min-height: 0; overflow: auto; padding: 14px; display: flex; justify-content: center; align-items: flex-start; background: var(--th-bg); }
.tdb-pdf-sheet { flex: none; background: #fff; box-shadow: 0 6px 22px rgba(0,0,0,0.22); }
.tdb-pdf-sheet img { display: block; width: 100%; height: auto; }
.tdb-pdf-foot { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--row-line); }
.tdb-pdf-foot .acct-actions { justify-content: flex-end; }
.tdb-pdf-sum { font-size: 13px; color: var(--text2); }
.tdb-pdf > .tdb-note { padding: 6px 12px 0; }

/* forms inside slide-outs */
.tdb-form { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.tdb-form .acct-actions { justify-content: flex-end; }
.tdb-prior { max-width: 470px; }
.tdb-prior-dates { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13px; }
.tdb-prior-dates span { color: var(--text3); }

/* Write Check */
.tdb-write { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: min(380px, max(350px, 56%)) minmax(0, 1fr); gap: 12px; }
.tdb-write-form { display: flex; flex-direction: column; min-height: 0; }
.tdb-write-scroll { flex: 1 1 0; min-height: 0; overflow: auto; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; }
.tdb-write-banner { display: flex; align-items: baseline; gap: 8px; font-family: Outfit, sans-serif; font-size: 16px; }
.tdb-write-banner strong { font-weight: 500; }
.tdb-payinfo { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--th-bg); border: 1px solid var(--row-line); font-size: 12.5px; }
.tdb-factor { display: flex; flex-direction: column; gap: 2px; padding: 6px 9px; border-radius: 9px; background: var(--b-amber-bg); border: 1px solid var(--b-amber-bd); }
.tdb-factor > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tdb-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.tdb-money { display: flex; align-items: center; gap: 6px; }
.tdb-money > span { color: var(--text3); }
.tdb-words { font-size: 11.5px; color: var(--text3); }
.tdb-deds { display: flex; flex-direction: column; gap: 4px; }
.tdb-ded { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; }
.tdb-write-actions .btn { height: 34px; }
.tdb-write-preview { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tdb-viewer-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--row-line); min-width: 0; }
.tdb-viewer-bar > .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdb-viewer-bar > .icon-btn, .tdb-viewer-bar > .dv-fit { flex: none; }
.tdb-write-paper { flex: 1 1 0; min-height: 0; overflow: auto; padding: 14px; display: flex; justify-content: center; align-items: flex-start; background: var(--th-bg); }
.tdb-paper { flex: none; height: auto; background: #fff; box-shadow: 0 6px 22px rgba(0,0,0,0.22); }

/* Print Checks */
.tdb-combine { white-space: nowrap; font-size: 12.5px; }
.tdb-printfoot { flex: none; display: flex; align-items: center; gap: 12px; padding: 7px 14px; border-top: 1px solid var(--row-line); flex-wrap: nowrap; min-width: 0; font-size: 12.5px; }
.tdb-printfoot > * { flex: none; }
.tdb-printfoot .grow { flex: 1 1 0; }
.tdb-sel { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tdb-balance { color: var(--text3); white-space: nowrap; }
.tdb-printfoot .tdb-inline .field-select { min-width: 132px; }
.tdb-printfoot .tdb-inline .field-select select { height: 30px; }
.tdb-printfoot .tdb-date { width: 132px; height: 30px; }
@media (max-width: 1500px) { .tdb-balance { display: none; } }

/* Check Setup */
.tdb-setup { padding: 10px 14px; display: flex; flex-direction: column; gap: 14px; font-size: 12.5px; }
.tdb-setup section { display: flex; flex-direction: column; gap: 7px; }
.tdb-radio { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.tdb-radio input { margin-top: 3px; accent-color: var(--check); }
.tdb-radio > span { display: flex; flex-direction: column; gap: 1px; }
.tdb-bank { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--row-line); background: var(--th-bg); }
.tdb-bank-head { display: flex; align-items: center; gap: 6px; }
.tdb-bank-form { display: flex; flex-direction: column; gap: 6px; }
.tdb-font { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Bank Transactions */
.tdb-bal { font-size: 12.5px; color: var(--text2); white-space: nowrap; }
.tdb-suggest { display: flex; flex-wrap: wrap; gap: 4px; }
.tdb-suggest .chip-btn { display: inline-flex; align-items: center; gap: 4px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdb-book .field-select { min-width: 170px; }
.tdb-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.tdb-map > .af:nth-child(3), .tdb-map > label.check { grid-column: 1 / -1; }
.tdb-sample { overflow: auto; max-height: 170px; border: 1px solid var(--row-line); border-radius: 9px; }
.tdb-sample td, .tdb-sample th { white-space: nowrap; }

/* Dispatch Pay */
.tdb-commissions { max-height: 250px; overflow: auto; border: 1px solid var(--row-line); border-radius: 9px; }
.tdb-commissions tr.total td { border-top: 1px solid var(--divider); }

/* Dashboard */
.tdb-new { position: relative; }
.tdb-new-menu { right: 0; left: auto; min-width: 210px; }
.tdb-new-menu .popover-item { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.tdb-kpis { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tdb-kpi { display: flex; flex-direction: column; gap: 1px; padding: 9px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow); min-width: 0; }
.tdb-kpi .t-label { font-size: 10.5px; letter-spacing: 0.08em; font-weight: 700; color: var(--text3); }
.tdb-kpi .t-value { font-family: Outfit, sans-serif; font-size: 25px; font-weight: 500; line-height: 1.15; white-space: nowrap; }
.tdb-kpi .t-value.green { color: var(--green); }
.tdb-kpi .t-value.red { color: var(--red); }
.tdb-kpi .t-sub { font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-dash { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 12px; }
.tdb-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.tdb-card { display: flex; flex-direction: column; min-height: 0; padding: 0 0 8px; }
.tdb-card.grow { flex: 1 1 0; }
.tdb-card-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--row-line); }
.tdb-card-head h2 { margin: 0; font-family: Outfit, sans-serif; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-card-foot { display: block; padding: 6px 14px 0; }
.tdb-pl { padding: 8px 14px 4px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.tdb-pl-row { display: flex; justify-content: space-between; gap: 8px; }
.tdb-pl-row.total { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--divider); font-weight: 600; }
.tdb-bar { height: 7px; border-radius: 4px; background: var(--th-bg); overflow: hidden; }
.tdb-bar span { display: block; height: 100%; border-radius: 4px; }
.tdb-bar span.green { background: var(--green); }
.tdb-bar span.red { background: var(--red); }
.tdb-recent { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.tdb-recent td:nth-child(1) { width: 60px; }
.tdb-recent td:nth-child(2) { width: 40%; overflow: hidden; text-overflow: ellipsis; }
.tdb-recent td:nth-child(4) { width: 88px; }
.tdb-recent td { padding: 6px 10px; border-bottom: 1px solid var(--row-line); }
.tdb-recent td:first-child { padding-left: 14px; }
.tdb-recent td:last-child { padding-right: 14px; }
.tdb-recent td.money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tdb-recent td.clip-cell .clip { display: block; }
.tdb-recent a { color: var(--text); text-decoration: none; }
.tdb-recent a:hover { color: var(--gold); }
.tdb-attn { list-style: none; margin: 0; padding: 6px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.tdb-attn li { display: flex; align-items: center; gap: 8px; }
.tdb-attn li > span:nth-child(2) { flex: 1; }
.tdb-dot { width: 8px; height: 8px; border-radius: 4px; flex: none; }
.tdb-dot.red { background: var(--red); }
.tdb-dot.amber { background: var(--b-amber-fg); }
.tdb-dot.blue { background: var(--b-teal-fg); }
.tdb-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px 14px 2px; }
.tdb-quick .btn { width: 100%; justify-content: center; }
.tdb-aging { padding: 8px 14px 4px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.tdb-aging-head { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.tdb-aging-head.net { margin: 6px 14px 0; padding-top: 8px; border-top: 1px solid var(--divider); font-size: 13px; }
.tdb-aging-row { display: flex; justify-content: space-between; color: var(--text2); padding-left: 10px; }
.tdb-aging-row.late { color: var(--red); font-weight: 700; }

@media (max-height: 800px) {
  .tdb-kpi { padding: 7px 14px; }
  .tdb-kpi .t-value { font-size: 22px; }
  .tdb-tile { padding: 5px 12px; }
  .tdb-tile .t-value { font-size: 18px; }
}

/* Narrow pages (a slide-out is open): rows wrap instead of pushing the page sideways. */
.tdb-head, .tdb-printfoot, .tdb-sumline { flex-wrap: wrap; row-gap: 6px; }
.tdb-acct .field-select, .td-bar .field-select { min-width: 0; max-width: 190px; }
.tdb-nowrap { white-space: nowrap; }
.tdb-sumline { padding: 0 2px; }

/* Check slide-out: the Other-vendor bills a check pays */
.tdb-vbills td.nowrap { white-space: nowrap; }
.tdb-vbills .tdb-vb-acct { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Print Checks: the bank account select keeps the bar on one line at 1366 wide. */
.tdb-head .tdb-pc-bank .field-select { max-width: 210px; }
.tdb-head .tdb-pc-bank .field-select select { text-overflow: ellipsis; }
@media (max-width: 1500px) {
  /* The select has its own label for screen readers; the visible one gives the room back. */
  .tdb-head .tdb-pc-bank > span:first-child { display: none; }
}

/* TDBooks Reports and Settings (pages/tdbooks/reports*, settings*). Classes use tds-.
   The page never scrolls: each report is one panel whose table scrolls inside it. */
.page:has(> .tds-page) { flex: 1 1 0; min-height: 0; }
.tds-page { min-height: 0; flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; }
.tds-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; border-radius: 18px; container-type: inline-size; }
.tds-panel > .panel-loading, .tds-panel > .panel-error { flex: 1; }

/* The panel's one slim bar: filters on the left, badges and actions on the right. */
.tds-bar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--row-line); min-height: 50px; }
.tds-bar .btn-xs { height: 32px; }
.tds-grow { flex: 1 1 auto; }
.tds-dash { color: var(--text3); font-size: 13px; }
.tds-date input.field { width: 138px; height: 32px; }
.tds-select select { height: 32px; border-radius: 9px; font-size: 13px; padding: 0 30px 0 10px; }
.tds-select .select-caret { top: 10px; right: 10px; }
.tds-search { height: 32px; border-radius: 9px; padding: 0 8px 0 10px; min-width: 200px; flex: 0 1 260px; }
.tds-search input { font-size: 13px; }
.tds-bar .check { font-size: 12.5px; white-space: nowrap; }
.tds-on { border-color: var(--gold-border) !important; color: var(--gold) !important; }
.tds-linkbtn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: none; }
.tds-linkbtn:hover { text-decoration: underline; }

/* Segmented switch. */
.tds-pills { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--th-bg); border: 1px solid var(--row-line); }
.tds-pills button { height: 26px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--text2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tds-pills button.on { background: var(--active-item-bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--gold-border); }

/* One-line stat strip (48TMS's summary cards). */
.tds-strip { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; padding: 7px 16px; border-bottom: 1px solid var(--row-line); }
.tds-stat { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.tds-stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); white-space: nowrap; }
.tds-stat-value { font-family: Outfit, sans-serif; font-size: 16px; font-weight: 500; color: var(--text); white-space: nowrap; }
.tds-stat-value.pos, .tds-pos { color: var(--green); }
.tds-stat-value.neg, .tds-neg { color: var(--red); }
.tds-stat-sub { font-size: 11.5px; color: var(--text3); white-space: nowrap; }
/* The TDBooks bar's eight report tabs fit at 1366 wide. */
.tds-page .td-tab { padding: 0 10px; }

/* Report tables: the header row and the totals row stay put while the rows scroll. */
.tds-scroll { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--divider) transparent; }
.tds-table { font-size: 13px; }
.tds-table th { padding: 8px 12px; text-align: left; }
.tds-table thead th { position: sticky; top: 0; z-index: 2; background: linear-gradient(var(--th-bg), var(--th-bg)), var(--panel-solid); }
.tds-table td { padding: 6px 12px; vertical-align: middle; }
.tds-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tds-table input.num { text-align: right; }
.tds-table tfoot td { position: sticky; bottom: 0; z-index: 2; background: linear-gradient(var(--active-item-bg), var(--active-item-bg)), var(--panel-solid); border-top: 1px solid var(--divider); font-weight: 700; }
.tds-click { cursor: pointer; }
.tds-sec td { padding-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--text3); border-top: 0; }
.tds-indent { padding-left: 24px !important; }
.tds-total td { font-weight: 600; border-top: 1px solid var(--divider); }
.tds-total.income td { background: var(--b-green-bg); }
.tds-gross td { font-weight: 700; color: var(--gold); background: var(--active-item-bg); }
.tds-net td { font-size: 14px; }
.tds-net.pos td:last-child { color: var(--green); }
.tds-net.neg td:last-child { color: var(--red); }
.tds-none td { color: var(--text3); font-style: italic; padding: 10px 24px; }
.tds-note { color: var(--text3); font-size: 12px; font-weight: 400; margin-left: 6px; }
.tds-acct { display: inline-flex; gap: 10px; }
.tds-acct-no { color: var(--text3); min-width: 36px; font-variant-numeric: tabular-nums; }
.tds-dim { opacity: 0.55; }
.tds-hide { display: none; }
.tds-desc { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tds-entry-no { color: var(--gold); font-weight: 700; }
.tds-struck { text-decoration: line-through; color: var(--text3); }
.tds-void { margin-left: 6px; }
.tds-alert { flex: none; padding: 7px 16px; color: var(--b-red-fg); background: var(--b-red-bg); border-bottom: 1px solid var(--b-red-bd); font-size: 13px; }
.tds-foot { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 8px 16px; border-top: 1px solid var(--row-line); font-size: 13px; color: var(--text2); }
.tds-foot b { color: var(--text); }
.tds-foot.tds-bad { background: var(--b-red-bg); }
.tds-listfoot { font-size: 12.5px; color: var(--text3); }
.tds-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 48px 22px; color: var(--text3); text-align: center; }
.tds-empty strong { color: var(--text); font-family: Outfit, sans-serif; font-size: 17px; font-weight: 500; }
.tds-pad { padding: 14px 16px; }

/* Balance Sheet: two columns, each scrolls on its own. */
.tds-bs { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tds-bs-col + .tds-bs-col { border-left: 1px solid var(--row-line); }

/* General Ledger split view. */
.tds-gl { flex: 1 1 0; min-height: 0; display: flex; }
.tds-gl-list { flex: 0 0 clamp(190px, 27%, 280px); min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--row-line); }
.tds-gl-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--text2); border-bottom: 1px solid var(--row-line); }
.tds-gl-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 4px 6px 10px; scrollbar-width: thin; }
.tds-gl-group { padding: 10px 8px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--text3); }
.tds-gl-acct { display: block; width: 100%; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text2); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tds-gl-acct:hover { background: var(--row-hover); color: var(--text); }
.tds-gl-acct.on { background: var(--active-item-bg); color: var(--text); box-shadow: inset 2px 0 0 var(--gold-line); }
.tds-gl-main { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; container: tds-glmain / inline-size; }
.tds-gl-main .tds-desc { max-width: 240px; }
@container tds-glmain (max-width: 680px) {
  .tds-gl-src { display: none; }
  .tds-gl-main .tds-desc { max-width: 150px; }
}
@container tds-glmain (max-width: 520px) {
  .tds-gl-desc { display: none; }
  .tds-gl-main .tds-table { font-size: 12px; }
  .tds-gl-main .tds-table td, .tds-gl-main .tds-table th { padding-left: 4px; padding-right: 4px; }
  .tds-gl-main .tds-entry-pill { padding: 1px 5px; font-size: 11px; }
}
.tds-gl-title { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--row-line); }
.tds-gl-title strong { font-family: Outfit, sans-serif; font-size: 16px; font-weight: 500; }
.tds-gl-bal { display: flex; align-items: baseline; gap: 8px; }
.tds-gl-bal b { font-family: Outfit, sans-serif; font-size: 18px; font-weight: 500; }
.tds-entry-pill { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--gold-border); background: var(--active-item-bg); color: var(--gold); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tds-entry-pill:hover { border-color: var(--gold-line); }
.tds-begin td { color: var(--text2); font-style: italic; }

/* Journal Entries sub-tabs. */
.tds-subtabs { display: inline-flex; gap: 2px; }
.tds-subtab { height: 28px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text2); font: inherit; font-size: 12.5px; cursor: pointer; }
.tds-subtab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--gold-line); }

/* Aging. */
.tds-aging-strip { flex: none; padding: 8px 16px 10px; border-bottom: 1px solid var(--row-line); display: flex; flex-direction: column; gap: 8px; }
.tds-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tds-chip { flex: 1 1 110px; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--row-line); background: var(--th-bg); }
.tds-chip .tds-stat-value { font-size: 15px; }
.tds-chip.ok { border-color: var(--b-green-bd); }
.tds-chip.info { border-color: var(--b-teal-bd); }
.tds-chip.warn { border-color: var(--b-amber-bd); }
.tds-chip.late { border-color: var(--b-red-bd); }
.tds-chip.ok .tds-stat-value { color: var(--b-green-fg); }
.tds-chip.info .tds-stat-value { color: var(--b-teal-fg); }
.tds-chip.warn .tds-stat-value { color: var(--b-amber-fg); }
.tds-chip.late .tds-stat-value { color: var(--b-red-fg); }
.tds-chip.total { border-color: var(--gold-border); background: var(--active-item-bg); }
.tds-chip.ledger.differs { border-color: var(--b-amber-bd); background: var(--b-amber-bg); }
.tds-chip.ledger.differs .tds-stat-value { color: var(--b-amber-fg); }
.tds-dist { display: flex; height: 16px; border-radius: 6px; overflow: hidden; background: var(--th-bg); }
.tds-dist.empty { height: auto; padding: 2px 8px; color: var(--text3); font-size: 12px; background: none; }
.tds-seg { display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: var(--primary-fg); min-width: 2px; }
.tds-seg.ok { background: var(--green); }
.tds-seg.info { background: var(--b-teal-fg); }
.tds-seg.warn { background: var(--b-amber-fg); }
.tds-seg.late { background: var(--red); }
.tds-chev { width: 28px; padding-right: 0 !important; color: var(--text3); }
.tds-chev span { display: inline-flex; transition: transform 0.15s; }
.tds-chev span.open { transform: rotate(90deg); }
.tds-group td { font-weight: 500; }
.tds-line td { font-size: 12px; color: var(--text2); }
.tds-line td:nth-child(2) { padding-left: 24px; }
.tds-priority { background: var(--b-green-bg); }
.tds-star { color: var(--green); }
.tds-link { color: var(--gold); text-decoration: none; }
.tds-link:hover { text-decoration: underline; }

/* Margins bar (0–50%). */
.tds-mbar { display: inline-block; width: 90px; height: 6px; border-radius: 3px; background: var(--th-bg); overflow: hidden; vertical-align: middle; }
.tds-mbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--b-teal-fg), var(--green)); }

/* Chart of Accounts. */
.tds-type-strip { gap: 6px; }
.tds-type-strip .tds-chip { flex: 1 1 150px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.tds-lock { width: 26px; color: var(--text3); }
.tds-actions { display: flex; gap: 2px; justify-content: flex-end; }

/* Slide-outs: journal entry and account. */
.tds-je, .tds-acct-form { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.tds-je-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tds-je-head strong { font-family: Outfit, sans-serif; font-size: 17px; font-weight: 500; }
.tds-je-meta { display: flex; gap: 10px; align-items: flex-end; }
.tds-je-meta .se-field:first-child { flex: 0 0 150px; }
.tds-je-meta.view b { font-weight: 500; }
.tds-je-lines { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tds-je-lines th { padding: 5px 4px; font-size: 11px; font-weight: 600; color: var(--text3); text-align: left; border-bottom: 1px solid var(--row-line); }
.tds-je-lines td { padding: 3px 4px; vertical-align: middle; }
.tds-je-lines.view td { padding: 6px 4px; border-bottom: 1px solid var(--row-line); }
.tds-je-lines .num { text-align: right; white-space: nowrap; }
.tds-je-lines th.num, .tds-je-lines td.num { width: 92px; }
.tds-je-line tr:last-child td { padding-bottom: 8px; border-bottom: 1px solid var(--row-line); }
.tds-je-line td[rowspan] { vertical-align: top; padding-top: 9px; }
.tds-je-desc { margin: 2px 0 0; }
.tds-je-lines tfoot td { padding-top: 7px; border-top: 1px solid var(--divider); }
.tds-je-n { width: 22px; color: var(--text3); text-align: center; }
.tds-je-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.tds-balance { margin: 0; font-size: 12.5px; font-weight: 600; }
.tds-balance.ok { color: var(--green); }
.tds-balance.bad { color: var(--b-amber-fg); }
.tds-warn { margin: 0; font-size: 12.5px; color: var(--b-amber-fg); }
.tds-info { margin: 0; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; color: var(--b-teal-fg); background: var(--b-teal-bg); border: 1px solid var(--b-teal-bd); }
.tds-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; background: var(--th-bg); border: 1px solid var(--row-line); }
.tds-banner.bad { background: var(--b-red-bg); border-color: var(--b-red-bd); color: var(--b-red-fg); }
.tds-textarea { height: auto; padding: 7px 9px; resize: vertical; line-height: 1.4; }
.tds-modal { max-width: 440px; }
.tds-modal textarea, .tds-modal input[type=password] { width: 100%; }

/* Default Accounts and Preferences. */
.tds-defaults { display: flex; flex-direction: column; gap: 4px; max-width: 900px; }
.tds-default-row { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: center; gap: 16px; padding: 10px 4px; border-bottom: 1px solid var(--row-line); }
.tds-default-label { display: flex; flex-direction: column; gap: 2px; }
.tds-default-label .tds-note { margin-left: 0; }
.tds-default-pick select { height: 34px; }
.tds-prefs { flex: 1 1 0; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; padding: 10px 16px 14px; align-content: start; }
.tds-prefs-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tds-pref { margin: 0; padding: 10px 14px 12px; border-radius: 14px; border: 1px solid var(--row-line); background: var(--th-bg); display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tds-pref legend { padding: 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.tds-pref .tds-note { margin: 0; }
.tds-pref .field-select select { height: 32px; }
.tds-radio { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text2); cursor: pointer; line-height: 1.4; }
.tds-radio input { accent-color: var(--check); margin-top: 3px; }
.tds-radio b { color: var(--text); margin-right: 4px; }

/* Print: only the active report, full length, with its header; never the shell or the buttons. */
.tds-print-head { display: none; }
@media print {
  html:has(.tds-page) .sidebar, html:has(.tds-page) .topbar, html:has(.tds-page) .tool-rail, html:has(.tds-page) .footer,
  html:has(.tds-page) .td-bar, html:has(.tds-page) .tds-bar, html:has(.tds-page) .tds-noprint, html:has(.tds-page) .toast-host,
  html:has(.tds-page) .tds-gl-list, html:has(.tds-page) .slideout { display: none !important; }
  html:has(.tds-page), html:has(.tds-page) body, html:has(.tds-page) .app, html:has(.tds-page) .shell, html:has(.tds-page) .shell-main,
  html:has(.tds-page) .shell-body, html:has(.tds-page) .scroll-area, html:has(.tds-page) .page, .tds-page, .tds-panel, .tds-scroll,
  .tds-bs, .tds-gl, .tds-gl-main, .tds-prefs {
    display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important;
    position: static !important; background: #fff !important; color: #000 !important; box-shadow: none !important; border: 0 !important;
    backdrop-filter: none !important; padding: 0 !important; margin: 0 !important;
  }
  .tds-print-head { display: block; margin: 0 0 10px; color: #000; }
  .tds-print-company { font-size: 13px; }
  .tds-print-title { font-size: 20px; font-weight: 700; }
  .tds-print-detail { font-size: 12px; color: #333; }
  .tds-panel *, .tds-je * { color: #000 !important; background: transparent !important; border-color: #bbb !important; box-shadow: none !important; }
  .tds-table thead th, .tds-table tfoot td { position: static; }
  .tds-table td, .tds-table th { padding: 3px 6px; }
  .tds-bs-col { margin-bottom: 14px; }
  .tds-hide { display: none !important; }
  /* Printing one journal entry from its slide-out. */
  html:has(.tds-print-entry) .scroll-area { display: none !important; }
  html:has(.tds-print-entry) .slideout { display: block !important; position: static !important; width: auto !important; max-width: none !important; border: 0 !important; box-shadow: none !important; background: #fff !important; }
  html:has(.tds-print-entry) .slideout-head, html:has(.tds-print-entry) .slideout-resize { display: none !important; }
  html:has(.tds-print-entry) .slideout-body { overflow: visible !important; }
  .tds-print-entry .tds-print-head { display: block; }
}

/* Command Center: the AR and AP aging card titles open the aging reports. */
.tds-cardlink { color: inherit; text-decoration: none; }
.tds-cardlink:hover { color: var(--gold); }

/* A slide-out narrows the page: tighter text columns so the money columns stay in view. */
@container (max-width: 820px) {
  .tds-desc { max-width: 170px; }
  .tds-table td, .tds-table th { padding-left: 8px; padding-right: 8px; }
  .tds-search { min-width: 140px; }
  .tds-gl-list { flex-basis: 160px; }
  .tds-gl-acct { font-size: 11.5px; padding: 4px 6px; }
  .tds-gl-title { flex-direction: column; align-items: flex-start; gap: 2px; }
  .tds-gl-title strong { font-size: 14.5px; }
  .tds-gl-bal b { font-size: 16px; }
}

/* Preferences ▸ Check Printing (the summary beside the Check Setup button) */
.tds-check-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.tds-check-sum li { display: flex; gap: 8px; min-width: 0; }
.tds-check-sum li span { flex: 0 0 92px; color: var(--text3); }
.tds-check-sum li b { font-weight: 600; color: var(--text2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tds-pref .tds-note.warn { color: var(--b-amber-fg); }
/* With a slide-out open beside Preferences, the bar's note shortens instead of wrapping the bar. */
.tds-bar .tds-pref-note { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* TDBooks: the slim TDBooks bar on every TDBooks screen (pages/tdbooks/mod.rs). Classes use td-. */
.td-page { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1 1 0; }
.td-bar { display: flex; align-items: center; gap: 14px; min-height: 40px; flex-wrap: nowrap; }
.td-mark { font-family: Outfit, sans-serif; font-size: 20px; font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap; }
.td-mark b { font-weight: 600; color: var(--green); }
.td-section { position: relative; flex: none; }
.td-section-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.td-section-btn:hover { border-color: var(--gold-border); }
.td-menu { min-width: 240px; max-height: 70vh; }
.td-menu-section { display: block; padding: 6px 8px 2px; font-size: 12.5px; font-weight: 700; color: var(--text); text-decoration: none; border-radius: 8px; }
.td-menu-section:hover { background: var(--row-hover); }
.td-menu-pages { display: flex; flex-direction: column; padding: 0 0 4px 12px; }
.td-menu-page { padding: 3px 8px; font-size: 12.5px; color: var(--text2); text-decoration: none; border-radius: 7px; }
.td-menu-page:hover { background: var(--row-hover); color: var(--text); }
.td-tabs { display: flex; align-items: stretch; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; align-self: stretch; }
.td-tab { display: inline-flex; align-items: center; padding: 0 12px; font-size: 13px; color: var(--text2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.td-tab:hover { color: var(--text); }
.td-tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--gold-line); }
.td-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
/* A TDBooks screen fills the page and never scrolls it; its one panel scrolls inside. */
.page:has(> .td-page) { flex: 1 1 0; min-height: 420px; }
@media (max-width: 1500px) {
  .td-bar { gap: 10px; }
  .td-tab { padding: 0 9px; }
  .td-mark { font-size: 18px; }
}
/* Nothing on a TDBooks screen may widen the page past the window (the scroll area would then
   scroll sideways when a slide-out narrows it); rows wrap instead. */
.td-page { min-width: 0; overflow-x: clip; }

/* ---------- toasts (crate::toast) ---------- */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 11px 16px; border-radius: 14px;
  background: var(--menu-bg); color: var(--text); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-size: 13.5px; font-weight: 500;
  animation: toast-in 0.22s ease-out;
}
.toast-dot { width: 8px; height: 8px; border-radius: 4px; flex: none; background: var(--b-teal-fg); box-shadow: 0 0 10px var(--b-teal-fg); }
.toast.success .toast-dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
.toast.error { border-color: var(--b-red-bd); }
.toast.error .toast-dot { background: var(--red); box-shadow: 0 0 10px var(--red); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ---------- Loads Working (pages/working.rs, work_item.rs, working_panel.rs) ----------
   Same tokens as the load page; tight so a working load fits on 1366×768 without scrolling. */

/* inputs */
.wi-input, .wi-select {
  height: 28px; padding: 0 9px; border-radius: 8px; min-width: 0;
  background: var(--input); border: 1px solid var(--input-border); color: var(--text); font-size: 13px; outline: none;
}
.wi-input:focus, .wi-select:focus { border-color: var(--gold-border); box-shadow: 0 0 0 3px rgba(227,203,148,0.12); }
.wi-input::placeholder { color: var(--text3); }
.wi-input:disabled, .wi-select:disabled { opacity: 0.6; cursor: not-allowed; }
.wi-input[type="date"] { padding-right: 4px; color-scheme: inherit; }
.wi-select { width: 100%; padding-right: 28px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.wi-select option { background: var(--panel-solid); color: var(--text); }
.select-wrap .wi-select + .select-caret, .wi-form .select-caret, .wi-places .select-caret, .wi-modal .select-caret { top: 8px; right: 10px; }
.wi-input.big, .wi-select.big { height: 38px; font-size: 14px; border-radius: 10px; width: 100%; }
.wi-modal .wi-select.big + .select-caret { top: 12px; }
.wi-textarea { height: auto; min-height: 28px; padding: 6px 9px; resize: vertical; line-height: 1.35; font-family: inherit; }
.select-wrap.grow { flex: 1 1 auto; min-width: 0; }
.w-st { width: 52px; flex: none; text-transform: uppercase; }
.w-num { width: 110px; flex: none; }
.w-date { width: 138px; flex: none; }
.w-status { width: 130px; }
.wi-row { display: flex; gap: 6px; align-items: center; width: 100%; }
.wi-money { display: flex; align-items: center; gap: 0; }
.wi-money > span { height: 28px; display: flex; align-items: center; padding: 0 8px; border: 1px solid var(--input-border); border-right: 0; border-radius: 8px 0 0 8px; background: var(--th-bg); color: var(--text3); font-size: 12.5px; }
.wi-money .wi-input { width: 120px; border-radius: 0 8px 8px 0; }
.wi-money.small .wi-input { width: 78px; }
.wi-money.small > span { height: 28px; }
.wi-money.small .wi-input { height: 28px; }
.wi-check { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; cursor: pointer; }
.wi-check input { width: 15px; height: 15px; accent-color: var(--check); }
.wi-label { display: block; margin: 12px 0 6px; font-size: 13px; color: var(--text2); }
.wi-form { row-gap: 4px; }
.wi-inline-margin { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 10px; font-size: 12.5px; white-space: nowrap; }
.wi-form .kv-value { flex-wrap: nowrap; }
.wi-bolt { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px dashed var(--input-border); color: var(--text3); font-size: 13px; cursor: help; opacity: 0.75; }
.wi-place-edit { display: flex; flex-direction: column; gap: 4px; width: 100%; }

/* list page */
.wi-alert {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px 9px 16px; border-radius: 14px;
  background: var(--b-amber-bg); border: 1px solid var(--b-amber-bd); color: var(--b-amber-fg);
}
.wi-alert > span { display: inline-flex; align-items: center; gap: 8px; }
.wi-alert .btn-gold-outline { color: var(--b-amber-fg); border-color: var(--b-amber-bd); height: 30px; }
.wi-toolbar-gap { flex: 0 1 12px; }
/* One line at 1366 wide: smaller minimums than the loads toolbar. */
.wi-toolbar { gap: 8px; flex-wrap: nowrap; }
.wi-toolbar > * { flex-shrink: 1; min-width: 0; }
.wi-toolbar .grow-3 { flex: 2 1 170px; }
.wi-toolbar .grow-2 { flex: 1 1 140px; }
.wi-toolbar .grow-1 { flex: 1 1 112px; }
.wi-toolbar .btn { padding: 0 13px; }
.wi-toolbar > .btn, .wi-toolbar > .wi-dropdown { flex: 0 0 auto; }
.wi-toolbar .wi-toolbar-gap { flex: 0 0 0; }
/* With a slide-out open (or on a narrow window) the toolbar wraps instead of squeezing. */
.wi-toolbar.wi-wrap { flex-wrap: wrap; }
.wi-toolbar.wi-wrap > * { flex-shrink: 0; }
.wi-toolbar.wi-wrap .grow-3 { flex: 1 1 100%; }
@media (max-width: 1100px) { .wi-toolbar { flex-wrap: wrap; } .wi-toolbar > * { flex-shrink: 0; } }
.toolbar .btn.on { border-color: var(--gold-border); color: var(--gold); }
.toolbar .btn .count-pill { margin-left: 2px; }
.wi-dropdown { position: relative; }
.wi-click-away { position: fixed; inset: 0; z-index: 30; }
.wi-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 31; min-width: 170px; padding: 6px; border-radius: 12px;
  background: var(--menu-bg); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: flex; flex-direction: column; gap: 2px;
  max-height: 320px; overflow-y: auto;
}
.wi-menu.wide { min-width: 270px; }
.wi-menu.right { left: auto; right: 0; }
.wi-menu-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--text3); border-bottom: 1px solid var(--row-line); margin-bottom: 2px; }
.wi-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font-size: 13px; }
.wi-menu-item:hover { background: var(--row-hover); }
.wi-menu-item.stacked { flex-direction: column; align-items: flex-start; gap: 1px; }
.wi-menu-empty { padding: 10px 8px; color: var(--text3); font-size: 13px; }
.wi-places { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.wi-place-filter { padding: 12px 18px; display: flex; flex-direction: column; gap: 6px; }
.wi-place-filter + .wi-place-filter { border-left: 1px solid var(--row-line); }
.wi-place-title { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.wi-super { display: flex; align-items: center; gap: 8px; }
.wi-super .wi-input { flex: 1; }
.wi-or { text-align: center; font-size: 11px; color: var(--text3); letter-spacing: 0.08em; }
.wi-clear { grid-column: 1 / -1; justify-self: center; margin: 0 0 10px; }
.wi-table { min-width: 940px; font-size: 13px; }
.wi-table td { padding: 9px 6px; vertical-align: middle; }
.wi-table .th-btn { padding: 11px 6px; }
.wi-table th:first-child, .wi-table td:first-child { padding-left: 14px; }
.wi-table .col-check { width: 34px; padding-left: 14px !important; }
.wi-table th.col-check { padding: 11px 4px 11px 14px !important; }
.th-btn.static-left { cursor: default; }
.wi-table .col-money { padding-right: 12px !important; }
.wi-table .col-act { width: 50px; text-align: center; padding-right: 10px !important; }
.wi-number { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; font-weight: 600; color: var(--gold); text-decoration: none; letter-spacing: 0.01em; }
a.wi-number:hover { text-decoration: underline; }
.wi-customer { min-width: 104px; max-width: 150px; line-height: 1.3; }
.wi-facility { max-width: 116px; font-size: 12.5px; }
.wi-facility .clip, .wi-equip .clip, .clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-facility .clip + .clip { margin-top: 3px; }
.wi-equip { max-width: 100px; }
.up.inline, .down.inline { display: inline-flex; margin-right: 4px; vertical-align: -1px; }
.data-table tbody tr.request { background: var(--b-amber-bg); }
.data-table tbody tr.request:hover { background: var(--b-amber-bg); box-shadow: inset 3px 0 0 var(--b-amber-bd); }
.page-bar > .wi-alert { flex: 1 1 auto; justify-content: flex-end; padding-top: 5px; padding-bottom: 5px; }
.page-bar > .wi-alert > span { margin-right: auto; }
.wi-menu.up { top: auto; bottom: calc(100% + 6px); }
.wi-status { position: relative; display: inline-flex; }
.badge-btn { cursor: pointer; font-family: inherit; }
.badge-btn:hover { filter: brightness(1.12); }
.wi-status .wi-menu { min-width: 150px; right: 0; left: auto; }
.wi-icon-btn { width: 32px; padding: 0; height: 30px; border-radius: 8px; }
.wi-act-pair { display: inline-flex; gap: 6px; }
.empty strong { color: var(--text2); font-size: 15px; }

/* modal */
.wi-modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3,8,9,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: wi-fade 0.16s ease-out; }
.app[data-theme="light"] .wi-modal-backdrop { background: rgba(19,32,31,0.28); }
.wi-modal { width: 100%; max-width: 480px; border-radius: 20px; background: var(--panel-solid); border: 1px solid var(--panel-border); box-shadow: 0 30px 80px rgba(0,0,0,0.45); overflow: hidden; animation: wi-pop 0.18s ease-out; }
.wi-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--row-line); }
.wi-modal-head h2 { margin: 0; font-family: Outfit, sans-serif; font-weight: 500; font-size: 18px; }
.wi-modal-head.danger h2 { color: var(--red); }
.wi-modal-body { padding: 16px 20px; display: block; }
.wi-modal-body > p { margin: 0 0 12px; color: var(--text2); }
.wi-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--row-line); }
.wi-modal-foot.flush { padding: 14px 0 0; border-top: 0; }
.wi-summary { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--th-bg); border: 1px solid var(--row-line); display: flex; flex-direction: column; gap: 3px; }
.wi-summary-rates { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 13px; color: var(--text2); }
.wi-warn { display: flex; align-items: center; gap: 6px; margin: 12px 0 0 !important; color: var(--red) !important; font-size: 13px; }
@keyframes wi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wi-pop { from { transform: translateY(6px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wi-modal-backdrop, .wi-modal { animation: none; } }

/* working-load page */
.wi-number-title { font-family: ui-monospace, "SF Mono", Menlo, monospace !important; font-size: 23px !important; color: var(--gold); letter-spacing: 0 !important; }
.wi-head-sub { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; max-width: 330px; }
.wi-head-sub > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.load-head-left { min-width: 0; }
.wi-head-sub .badge { padding: 1px 8px; font-size: 10px; }
.wi-outreach-btn .count-pill { position: static; }
.wi-card .info-grid { padding: 10px 20px 14px; }
.wi-card .info-col { gap: 9px; }
.wi-card .kv { row-gap: 3px; }
.wi-card .kv.wi-form { row-gap: 4px; }
.wi-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.wi-actions .btn-xs { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; gap: 5px; }
.wi-clip2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rate-plain { font-weight: 700; }
.wi-outreach-chips { gap: 4px; align-items: center; }
.wi-outreach-chips .badge { max-width: 170px; gap: 3px; }
.wi-chip-name { max-width: 110px; display: inline-block; }
.wi-open { height: 24px !important; padding: 0 8px !important; font-size: 11.5px !important; gap: 4px !important; }
.wi-place-name { max-width: 180px; font-size: 12px; }
.wi-date { display: inline-flex; align-items: center; gap: 4px; color: var(--text2); font-size: 12px; }
.wi-activity { display: flex; flex-direction: column; }
.wi-note-form { display: flex; gap: 6px; padding: 7px 8px 6px 10px; border-bottom: 1px solid var(--row-line); }
.wi-note-form .btn-xs { height: 30px; }
.wi-activity-list { list-style: none; margin: 0; padding: 4px 0; max-height: 150px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--divider) transparent; }
.wi-activity-list li { display: flex; gap: 9px; padding: 5px 12px; font-size: 12.5px; line-height: 1.3; }
.wi-activity-list li + li { border-top: 1px solid var(--row-line); }
.wi-activity-list .sub { font-size: 11px; margin-top: 1px; }
.wi-act-icon { width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--icon-circle); border: 1px solid var(--icon-circle-border); color: var(--icon-fg); }
.wi-activity-list li.note .wi-act-icon { color: var(--gold); border-color: var(--gold-border); }
.wi-activity-list li.promoted .wi-act-icon { color: var(--green); border-color: var(--b-green-bd); }
.wi-activity-list li.outreach .wi-act-icon { color: var(--b-teal-fg); border-color: var(--b-teal-bd); }
.wi-act-text { overflow-wrap: anywhere; }
.wi-hint { font-weight: 400; font-size: 11px; margin-left: 4px; }
.wi-stops-table { min-width: 500px; }
.wi-stops-table .w-city { width: 18%; }
.wi-stops-table .w-date { width: 38px; }
.wi-stops-table .w-time { width: 72px; }
.wi-stops-table .w-contact { width: 12%; }
.wi-stops-table .w-phone { width: 90px; }
.wi-stops-table .w-edit { width: 32px; }
.stop-editor .sub { margin-top: -4px; }
.wi-stops-table td:last-child { padding: 2px 4px; }
.wi-card .info-col { flex: 1 1 330px; }
.wi-card .info-col + .info-col { flex: 1.8 1 480px; }
.wi-origin { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text2); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--row-line); }
.wi-stops-table tbody tr { transition: background 0.12s; }
.wi-stops-table tbody tr[draggable="true"] .wi-grip { cursor: grab; }
.wi-stops-table tbody tr.dragging { opacity: 0.45; }
.wi-stops-table tbody tr.drop-target td { box-shadow: inset 0 2px 0 var(--gold-line); }
.wi-edit-btn { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--text3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wi-edit-btn:hover:not(:disabled) { background: var(--row-hover); color: var(--gold); }
.wi-edit-btn:disabled { opacity: 0.35; cursor: default; }
/* slide-out (inside the shared .slideout frame) */
.wi-panel-body { display: flex; flex-direction: column; }
.wi-panel-body .tracking-map { flex: none; height: 200px; max-height: none; }
.wi-panel-body .tracking-card { gap: 10px; padding: 12px 14px 16px; font-size: 13px; }
.wi-panel-body .trip-stops { display: flex; flex-direction: column; gap: 8px; }
.wi-panel-body .trip-stop { align-items: flex-start; gap: 10px; white-space: normal; }
.wi-panel-body .trip-stop > span { margin-top: 2px; }
.wi-panel-body .trip-stop > div { display: flex; flex-direction: column; min-width: 0; }
.wi-panel-body .trip-stop strong { max-width: none; }
.wi-panel-body .trip-stop div span { color: var(--text3); font-size: 12px; }
.wi-panel-body .trip-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wi-panel-body .trip-stats > div { padding: 7px 10px; gap: 2px; }
.wi-panel-body .trip-stats .stat-label { font-size: 10px; }
.wi-panel-body .trip-section-title { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid var(--row-line); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--text2); }
.wi-panel-body .trip-section-title svg { color: var(--gold); }
.wi-panel-body .trip-note { margin: 0; font-size: 12px; }
.wi-panel-body .trip-actions { display: flex; gap: 8px; }
.wi-panel-body .trip-actions .btn { flex: 1; }
.wi-stat-text { font-family: Inter, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-outreach { display: flex; flex-direction: column; gap: 10px; }
.wi-outreach .trip-section-title .count-pill { margin-left: 2px; }
.wi-carriers { display: flex; flex-direction: column; gap: 6px; }
.wi-carrier { padding: 8px 9px; border-radius: 12px; border: 1px solid var(--row-line); background: var(--th-bg); display: flex; flex-direction: column; gap: 4px; }
.wi-carrier.selected { border-color: var(--b-green-bd); background: var(--b-green-bg); }
.wi-carrier-top { display: flex; align-items: center; gap: 6px; }
.wi-carrier-name { border: 0; background: transparent; padding: 0; color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; text-align: left; }
.wi-carrier-name:hover:not(:disabled) { color: var(--gold); }
.wi-carrier-name:disabled { cursor: default; }
.wi-carrier-edit { display: flex; gap: 5px; align-items: center; }
.wi-carrier-edit .wi-input { height: 28px; font-size: 12.5px; }
.wi-status-pick select { height: 28px; padding: 0 24px 0 9px; border-radius: 999px; border: 1px solid; font-size: 11.5px; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; }
.wi-status-pick select option { background: var(--panel-solid); color: var(--text); }
.wi-status-pick .select-caret { top: 8px; right: 8px; }
.wi-status-pick.badge-neutral select { background: var(--b-neutral-bg); color: var(--b-neutral-fg); border-color: var(--b-neutral-bd); }
.wi-status-pick.badge-dim select { background: var(--b-dim-bg); color: var(--b-dim-fg); border-color: var(--b-dim-bd); }
.wi-status-pick.badge-teal select { background: var(--b-teal-bg); color: var(--b-teal-fg); border-color: var(--b-teal-bd); }
.wi-status-pick.badge-amber select { background: var(--b-amber-bg); color: var(--b-amber-fg); border-color: var(--b-amber-bd); }
.wi-status-pick.badge-red select { background: var(--b-red-bg); color: var(--b-red-fg); border-color: var(--b-red-bd); }
.wi-status-pick.badge-green select { background: var(--b-green-bg); color: var(--b-green-fg); border-color: var(--b-green-bd); }
.wi-status-pick { flex: none; }
.wi-timeline { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: var(--map-sea); border: 1px solid var(--row-line); max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--divider) transparent; }
.wi-timeline.empty { align-items: center; padding: 18px; color: var(--text3); font-size: 12.5px; }
.wi-day { display: flex; align-items: center; gap: 8px; color: var(--text3); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.wi-day::before, .wi-day::after { content: ""; flex: 1; height: 1px; background: var(--row-line); }
.wi-event { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; color: var(--text2); padding: 0 2px; }
.wi-event svg { flex: none; margin-top: 2px; color: var(--b-teal-fg); }
.wi-event .sub { margin: 0 0 0 auto; flex: none; font-size: 10.5px; }
.wi-msg { display: flex; flex-direction: column; max-width: 86%; }
.wi-msg.out { align-self: flex-end; align-items: flex-end; }
.wi-msg.in { align-self: flex-start; }
.wi-msg-tag { font-size: 10.5px; font-weight: 600; color: var(--gold); margin: 0 4px 2px; }
.wi-msg.in .wi-msg-tag { color: var(--b-teal-fg); }
.wi-bubble { padding: 6px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; background: var(--panel-solid); border: 1px solid var(--row-line); }
.wi-msg.out .wi-bubble { background: var(--b-amber-bg); border-color: var(--b-amber-bd); border-bottom-right-radius: 4px; }
.wi-msg.in .wi-bubble { border-bottom-left-radius: 4px; }
.wi-bubble.failed { border-color: var(--b-red-bd); }
.wi-msg-meta { margin-top: 2px; font-size: 10px; color: var(--text3); text-align: right; }
.wi-compose { display: flex; flex-direction: column; gap: 6px; }
.wi-quick { display: flex; flex-wrap: wrap; gap: 4px; }
.wi-quick-btn { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font-size: 11.5px; cursor: pointer; }
.wi-quick-btn:hover:not(:disabled) { border-color: var(--gold-border); color: var(--gold); }
.wi-quick-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wi-picker { display: flex; flex-direction: column; gap: 4px; }
.wi-carrier-search { height: 32px; padding: 0 10px; border-radius: 9px; font-size: 13px; }
.wi-picked { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 10px; border-radius: 9px; border: 1px solid var(--gold-border); color: var(--gold); font-weight: 600; font-size: 13px; }
.wi-picked .clip { flex: 1; }
.wi-results { display: flex; flex-direction: column; border: 1px solid var(--row-line); border-radius: 10px; padding: 4px; background: var(--panel-solid); max-height: 180px; overflow-y: auto; }
.wi-compose-actions { display: flex; gap: 6px; }
.wi-compose-actions .btn { flex: 1; height: 30px; }
.wi-compose .wi-textarea { width: 100%; }

@media (max-width: 1100px) {
  .wi-places { grid-template-columns: 1fr; }
  .wi-place-filter + .wi-place-filter { border-left: 0; border-top: 1px solid var(--row-line); }
}