/* ============================================================
   QUBE Technical theme
   Hairlines, mono data, one lime accent. Presentation only:
   IDs, handlers and data flow in Index.html stay unchanged.

   Tokens live on body.tx-on. showScreen() adds that class for
   screens already ported to this theme, so screens still on the
   older ink/teal layer keep their own tokens until they move over.
   ============================================================ */
body.tx-on {
  --bg:#f4f6f5; --surface:#ffffff; --raised:#fbfcfb; --inset:#eef1ef;
  --border:#dfe5e1; --border-strong:#c9d2cc; --hair:#e9edea;
  --text:#0e1512; --muted:#5c6a62; --faint:#7d8a82;
  --accent:#65a30d; --accent-strong:#4d7c0f; --accent-soft:#ecf5d8; --accent-dim:#d9ecc0;
  --on-accent:#0e1512;
  --ok:#15803d; --ok-soft:#e6f4ea;
  --warn:#b45309; --warn-soft:#fdf0d5;
  --danger:#dc2626; --danger-soft:#fde8e8;
  --info:#0e7490; --info-soft:#e0f2f7;
  --topbar:#0f1a14;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(14,21,18,.05),0 8px 24px -12px rgba(14,21,18,.12);
  --shadow-pop:0 12px 40px -12px rgba(14,21,18,.28);
  --grid-line:rgba(14,21,18,.055);
  /* Older layers read these names. */
  --ink:var(--text); --text-secondary:var(--muted); --accent-hover:var(--accent-strong);
  --font-display:"Inter Tight",Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
html[data-theme="dark"] body.tx-on {
  --bg:#0d1310; --surface:#141c17; --raised:#19231d; --inset:#0f1712;
  --border:#26332a; --border-strong:#35473b; --hair:#1f2b23;
  --text:#f2f5f2; --muted:#9db0a4; --faint:#7f9586;
  --accent:#a3e635; --accent-strong:#bef264; --accent-soft:#22351a; --accent-dim:#30491f;
  --ok:#4ade80; --ok-soft:#14301f;
  --warn:#fbbf24; --warn-soft:#332410;
  --danger:#f87171; --danger-soft:#3a1a1a;
  --info:#22d3ee; --info-soft:#12333c;
  --topbar:#090f0b;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-pop:0 16px 48px -12px rgba(0,0,0,.65);
  --grid-line:rgba(255,255,255,.045);
  color-scheme:dark;
}
html body.tx-on, html body.tx-on.bg-gray-50, html body.tx-on.wide-mode {
  background-color:var(--bg); color:var(--text);
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px; background-position:center top;
  font-size:14px; line-height:1.55; letter-spacing:-.006em; -webkit-font-smoothing:antialiased;
}
body.tx-on ::selection { background:var(--accent); color:#0e1512; }
html body.tx-on :is(button,a,input,select,textarea,[role="button"]):focus-visible {
  outline:2px solid var(--accent)!important; outline-offset:2px;
}
.tx-mono, body.tx-on .mono { font-family:var(--font-mono); font-feature-settings:"tnum"; letter-spacing:0; }
.tx-display { font-family:var(--font-display); letter-spacing:-.03em; }

/* Loading overlay and startup spinner follow the active surface. */
html body.tx-on #loadingOverlay { background:color-mix(in srgb,var(--bg) 82%,transparent); }
html body.tx-on #loadingOverlay p { color:var(--muted); }
html body.tx-on .spinner { border-color:var(--accent-dim); border-top-color:var(--accent-strong); }

/* ---------- Admin top bar (shared by every admin screen) ---------- */
#adminTopbar { display:none; }
body.wide-mode #adminTopbar { display:block; }
body:not(.tx-on) #adminTopbar { --topbar:#0f1a14; --accent:#a3e635; }
#adminTopbar {
  position:sticky; top:0; z-index:40; background:var(--topbar); color:#eef3ee;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tx-topbar-in { max-width:1240px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:16px; min-height:56px; }
html body #adminTopbar button { min-width:0; min-height:0; }
html body #adminTopbar .tx-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; padding:4px 0; text-align:left; color:#eef3ee; background:none; border:0; }
.tx-logo-mark { width:32px; height:32px; border-radius:8px; background:#a3e635; color:#0e1512; display:grid; place-items:center; font-family:var(--font-mono,"JetBrains Mono",monospace); font-weight:700; font-size:15px; }
.tx-logo b { display:block; font-family:"Inter Tight",Inter,sans-serif; font-size:15px; letter-spacing:-.02em; line-height:1; }
.tx-logo small { display:block; font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.14em; color:#8fa396; text-transform:uppercase; margin-top:4px; }
.tx-topnav { display:flex; gap:2px; margin-left:8px; }
html body #adminTopbar .tx-topnav button {
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; min-height:36px; border-radius:8px;
  font-size:13px; font-weight:500; color:#aebbb2; white-space:nowrap; background:transparent; border:0; transition:background .15s,color .15s;
}
html body #adminTopbar .tx-topnav button:hover { color:#fff; background:rgba(255,255,255,.07); }
html body #adminTopbar .tx-topnav button.is-active { color:#0e1512; background:#a3e635; font-weight:600; }
.tx-top-actions { margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tx-chip-dark { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-family:"JetBrains Mono",monospace; color:#aebbb2; border:1px solid rgba(255,255,255,.14); padding:5px 9px; border-radius:999px; white-space:nowrap; letter-spacing:.06em; }
.tx-chip-dark i { width:6px; height:6px; border-radius:50%; background:#a3e635; display:block; }
html body #adminTopbar .tx-icon-btn {
  width:36px; height:36px; min-width:36px; min-height:36px; border-radius:8px; display:grid; place-items:center;
  color:#c6d2c9; background:transparent; border:1px solid rgba(255,255,255,.12); transition:background .15s,color .15s;
}
html body #adminTopbar .tx-icon-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
html body:not(.tx-on) #adminTopbar #themeToggle { display:none; }
.tx-icon-sun { display:none; }
html[data-theme="dark"] .tx-icon-sun { display:block; }
html[data-theme="dark"] .tx-icon-moon { display:none; }
.tx-count {
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:700; line-height:1;
  background:#0e1512; color:#a3e635;
}
.tx-count.hidden { display:none!important; }
html body #adminTopbar .tx-topnav button:not(.is-active) .tx-count { background:#a3e635; color:#0e1512; }

/* ---------- Page scaffolding ---------- */
html body #screenDashboard.tx-screen { max-width:1240px; margin:0 auto; padding:28px 0 72px; }
body.tx-on.wide-mode #appContainer { max-width:1280px; }
.tx-eyebrow {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-strong); display:flex; align-items:center; gap:8px; font-weight:600;
}
html[data-theme="dark"] .tx-eyebrow { color:var(--accent); }
.tx-eyebrow::before { content:""; width:22px; height:1px; background:var(--accent); }
html body.tx-on h1.tx-h1 { font-family:var(--font-display); font-size:clamp(28px,4vw,40px); line-height:1.08; font-weight:700; letter-spacing:-.03em; margin:10px 0 8px; color:var(--text); }
.tx-lede { color:var(--muted); max-width:62ch; font-size:15px; }
.tx-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:24px; }
.tx-head-actions { display:flex; gap:8px; flex-wrap:wrap; }
.tx-grid { display:grid; gap:16px; }
.tx-stack { display:flex; flex-direction:column; gap:16px; }
.tx-g-kpi { grid-template-columns:repeat(5,minmax(0,1fr)); }
.tx-g-charts { grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.tx-g-2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.tx-g-main { grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.tx-grid>* { min-width:0; }

/* ---------- Buttons & inputs ---------- */
html body.tx-on .tx-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 16px;
  min-height:40px; min-width:0; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  transition:border-color .18s ease-out,background .18s ease-out,transform .18s ease-out; white-space:nowrap; cursor:pointer;
}
html body.tx-on .tx-btn:hover { border-color:var(--text); transform:translateY(-1px); }
html body.tx-on .tx-btn:active { transform:none; }
html body.tx-on .tx-btn.primary { background:var(--accent); border-color:var(--accent); color:#0e1512; }
html body.tx-on .tx-btn.primary:hover { background:var(--accent-strong); border-color:var(--accent-strong); color:#fff; }
html[data-theme="dark"] body.tx-on .tx-btn.primary:hover { color:#0e1512; }
html body.tx-on .tx-btn.dark { background:var(--text); color:var(--bg); border-color:var(--text); }
html body.tx-on .tx-btn.sm { min-height:32px; padding:0 11px; font-size:12.5px; border-radius:7px; }
html body.tx-on .tx-btn.danger { color:var(--danger); border-color:var(--danger-soft); }
html body.tx-on .tx-btn.danger:hover { border-color:var(--danger); background:var(--danger-soft); }
html body.tx-on .tx-btn.info { color:var(--info); }
html body.tx-on .tx-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
html body.tx-on .tx-btn svg { flex-shrink:0; }
html body.tx-on .tx-mini {
  display:inline-flex; align-items:center; gap:4px; padding:5px 9px; min-height:30px; min-width:0;
  font-size:11.5px; font-weight:600; border:1px solid var(--border); border-radius:6px;
  background:var(--surface); color:var(--text); transition:border-color .15s; white-space:nowrap; cursor:pointer;
}
html body.tx-on .tx-mini:hover { border-color:var(--text); }
html body.tx-on .tx-mini.danger { color:var(--danger); }
html body.tx-on .tx-mini.danger:hover { border-color:var(--danger); background:var(--danger-soft); }
html body.tx-on .tx-mini.is-warn { color:var(--warn); background:var(--warn-soft); border-color:transparent; }
html body.tx-on .tx-mini.is-danger { color:var(--danger); background:var(--danger-soft); border-color:transparent; }
html body.tx-on .tx-input {
  width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); font-size:14px; font-family:inherit; transition:border-color .15s,box-shadow .15s;
}
html body.tx-on .tx-input:focus { outline:none; border-color:var(--accent-strong); box-shadow:0 0 0 3px var(--accent-soft); }
html body.tx-on .tx-input::placeholder { color:var(--faint); opacity:1; }
html body.tx-on select.tx-input {
  appearance:none; padding-right:36px!important; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a968e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
html body.tx-on select.tx-input.sm { min-height:34px; width:auto; max-width:170px; font-size:12.5px!important; padding-top:5px; padding-bottom:5px; }
.tx-searchbox { position:relative; flex:1; min-width:220px; max-width:440px; display:flex; }
.tx-searchbox svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none; }
html body.tx-on .tx-searchbox .tx-input { padding-left:36px; padding-right:84px; border-radius:999px; min-height:40px; }
html body.tx-on .tx-searchbox .tx-btn { position:absolute; right:4px; top:4px; min-height:32px; border-radius:999px; }
html body.tx-on .tx-search-inline { flex:0 1 260px; min-width:180px; min-height:34px; border-radius:999px; font-size:12.5px!important; padding:6px 12px; }

/* ---------- Badges ---------- */
.tx-badge {
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600;
  letter-spacing:.01em; white-space:nowrap; border:1px solid transparent; line-height:1.6;
}
.tx-badge::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.tx-badge.plain::before { display:none; }
.b-ok { background:var(--ok-soft); color:var(--ok); }
.b-warn { background:var(--warn-soft); color:var(--warn); }
.b-danger { background:var(--danger-soft); color:var(--danger); }
.b-info { background:var(--info-soft); color:var(--info); }
.b-neutral { background:var(--inset); color:var(--muted); border-color:var(--border); }
.b-accent { background:var(--accent-soft); color:var(--accent-strong); }
html[data-theme="dark"] .b-accent { color:var(--accent); }
.b-ink { background:var(--text); color:var(--bg); }
.tx-branch {
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 7px; border-radius:5px; background:var(--inset); border:1px solid var(--border); color:var(--muted); white-space:nowrap;
}

/* ---------- Panels ---------- */
/* Panels are flex columns so panels sharing a row end on the same line:
   the table or body grows, the footer stays pinned to the bottom edge. */
.tx-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; min-width:0; display:flex; flex-direction:column; }
.tx-panel[hidden] { display:none; }
.tx-panel>.tx-tbl-wrap { flex:1 1 auto; }
.tx-panel>.tx-panel-body:last-child { flex:1 1 auto; }
.tx-panel>.tx-panel-foot { margin-top:auto; }
.tx-panel>.tx-tbl-wrap+.tx-panel-foot { margin-top:0; }
.tx-section-gap { margin:10px 0 4px; }
.tx-panel-head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--hair); flex-wrap:wrap; }
html body.tx-on .tx-panel-head h2, html body.tx-on .tx-panel-head h3 { font-family:var(--font-display); font-size:14.5px; letter-spacing:-.015em; font-weight:600; color:var(--text); margin:0; }
.tx-panel-head .sub { font-size:12px; color:var(--faint); }
.tx-panel-head .right { margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.tx-panel-body { padding:18px; }
.tx-panel-foot { border-top:1px solid var(--hair); padding:12px 18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; align-items:center; }
.tx-foot-meta { font-family:var(--font-mono); font-size:11px; color:var(--faint); letter-spacing:.04em; text-transform:uppercase; }
.tx-hint { font-size:12px; color:var(--muted); }
.tx-section-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-strong); font-weight:600; display:flex; align-items:center; gap:8px; }
html[data-theme="dark"] .tx-section-label { color:var(--accent); }
.tx-section-label::before { content:""; width:22px; height:1px; background:var(--accent); }

/* KPI tiles */
html body.tx-on .tx-kpi {
  display:block; width:100%; min-width:0; min-height:0; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
  color:var(--text); transition:transform .18s ease-out,border-color .18s,box-shadow .18s;
}
html body.tx-on .tx-kpi:hover { transform:translateY(-3px); border-color:var(--border-strong); box-shadow:var(--shadow-pop); }
.tx-kpi-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.tx-kpi-ico { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--inset); border:1px solid var(--border); color:var(--muted); flex-shrink:0; }
.tx-kpi.warn .tx-kpi-ico { background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.tx-kpi.alert .tx-kpi-ico { background:var(--danger-soft); color:var(--danger); border-color:transparent; }
.tx-kpi.accent .tx-kpi-ico { background:var(--accent-soft); color:var(--accent-strong); border-color:transparent; }
html[data-theme="dark"] .tx-kpi.accent .tx-kpi-ico { color:var(--accent); }
.tx-kpi-go { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.tx-kpi-num { display:block; font-family:var(--font-mono); font-size:27px; font-weight:600; letter-spacing:-.02em; line-height:1; font-feature-settings:"tnum"; color:var(--text); }
.tx-kpi.warn .tx-kpi-num { color:var(--warn); }
.tx-kpi.alert .tx-kpi-num { color:var(--danger); }
.tx-kpi-label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-top:6px; }
.tx-kpi-sub { display:block; font-family:var(--font-mono); font-size:11px; margin-top:5px; color:var(--faint); overflow-wrap:anywhere; }

/* Filter bar */
.tx-filter-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.tx-filter-seg { display:inline-flex; border:1px solid var(--border-strong); border-radius:999px; overflow:hidden; background:var(--surface); flex-shrink:0; }
html body.tx-on .tx-filter-seg .dash-btn-filter {
  padding:8px 16px; min-height:36px; min-width:0; font-size:12.5px; font-weight:600; color:var(--muted);
  background:transparent; border:0; border-right:1px solid var(--hair); border-radius:0; transition:background .15s,color .15s;
}
html body.tx-on .tx-filter-seg .dash-btn-filter:last-child { border-right:0; }
html body.tx-on .tx-filter-seg .dash-btn-filter:hover:not(.active) { color:var(--text); background:var(--raised); }
html body.tx-on .tx-filter-seg .dash-btn-filter.active { background:var(--text); color:var(--bg); }
.tx-filter-note { font-family:var(--font-mono); font-size:11px; color:var(--faint); letter-spacing:.04em; text-transform:uppercase; }
.tx-filter-bar .tx-push { margin-left:auto; }

/* Dropdown menu */
.tx-menu-anchor { position:relative; }
.tx-menu {
  position:absolute; right:0; top:calc(100% + 6px); z-index:50; width:220px; padding:4px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-pop);
}
.tx-menu.hidden { display:none; }
html body.tx-on .tx-menu button {
  display:flex; align-items:center; gap:8px; width:100%; min-height:40px; padding:8px 12px; text-align:left;
  border-radius:7px; font-size:13px; font-weight:500; color:var(--text); background:transparent; border:0;
}
html body.tx-on .tx-menu button:hover { background:var(--inset); }
.tx-menu small { margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--faint); }

/* ---------- Tables ---------- */
.tx-tbl-wrap { overflow:auto; -webkit-overflow-scrolling:touch; }
.tx-tbl-wrap.h-sm { max-height:300px; }
.tx-tbl-wrap.h-md { max-height:380px; }
.tx-tbl { width:100%; border-collapse:collapse; min-width:560px; }
.tx-tbl.min-sm { min-width:340px; }
.tx-tbl.min-md { min-width:440px; }
html body.tx-on .tx-tbl th {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--faint);
  font-weight:500; text-align:left; padding:10px 14px; background:var(--raised); border-bottom:1px solid var(--border);
  white-space:nowrap; position:sticky; top:0; z-index:1;
}
html body.tx-on .tx-tbl td { padding:11px 14px; font-size:13px; color:var(--text); border-bottom:1px solid var(--hair); vertical-align:middle; line-height:1.45; }
.tx-tbl tbody tr { transition:background .12s; }
html body.tx-on .tx-tbl tbody tr:hover td { background:var(--raised); }
.tx-tbl tbody tr:last-child td { border-bottom:0; }
.tx-tbl .c { text-align:center; }
.tx-tbl .r { text-align:right; }
.tx-tbl .nowrap { white-space:nowrap; }
.tx-tbl td.mono, .tx-tbl td .mono { font-family:var(--font-mono); font-size:12px; font-feature-settings:"tnum"; white-space:nowrap; }
.tx-tbl .strong { font-weight:600; }
.tx-tbl .dim { color:var(--faint); }
.tx-tbl .sub { display:block; font-size:11.5px; color:var(--faint); margin-top:2px; }
.tx-tbl .sub.mono { font-size:10.5px; letter-spacing:.02em; }
.tx-tbl .sub.note { color:var(--warn); }
.tx-tbl tr.is-voided td { opacity:.5; }
.tx-tbl .neg { color:var(--danger); font-weight:600; }
.tx-row-actions { display:flex; gap:4px; justify-content:flex-end; flex-wrap:nowrap; }
.tx-aging { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.tx-aging-bar { width:56px; height:5px; border-radius:99px; background:var(--inset); overflow:hidden; display:inline-block; }
.tx-aging-bar i { display:block; height:100%; border-radius:99px; background:currentColor; }
.tx-aging b { font-family:var(--font-mono); font-size:12px; }
.lvl-ok { color:var(--ok); } .lvl-warn { color:var(--warn); } .lvl-danger { color:var(--danger); }
.tx-empty { padding:36px 20px; text-align:center; color:var(--faint); font-size:13px; }
.tx-empty .big { display:block; font-family:var(--font-display); color:var(--muted); font-size:15px; font-weight:600; margin-bottom:4px; }
html body.tx-on .tx-tbl td.tx-empty-cell { padding:0; }

/* ---------- Bars & charts ---------- */
.tx-bars { display:grid; }
.tx-bar-row { display:grid; grid-template-columns:minmax(64px,104px) minmax(0,1fr) auto; gap:10px; align-items:center; padding:7px 0; border-bottom:1px dashed var(--hair); }
.tx-bar-row:last-child { border-bottom:0; }
.tx-bar-row .nm { font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tx-bar-track { height:8px; background:var(--inset); border-radius:99px; overflow:hidden; }
.tx-bar-fill { display:block; height:100%; border-radius:99px; background:var(--text); transition:width .7s ease-out; }
.tx-bar-fill.accent { background:var(--accent); }
.tx-bar-fill.ok { background:var(--ok); } .tx-bar-fill.warn { background:var(--warn); } .tx-bar-fill.danger { background:var(--danger); }
.tx-bar-val { font-family:var(--font-mono); font-size:11.5px; color:var(--muted); text-align:right; white-space:nowrap; }
.tx-bar-meta { font-family:var(--font-mono); font-size:10.5px; color:var(--faint); letter-spacing:.03em; text-transform:uppercase; margin:-3px 0 5px; padding-bottom:6px; border-bottom:1px dashed var(--hair); }
.tx-perf-item:last-child .tx-bar-meta { border-bottom:0; }
.tx-bar-meta .bad { color:var(--danger); } .tx-bar-meta .warnc { color:var(--warn); } .tx-bar-meta .good { color:var(--ok); }
.tx-perf .tx-bar-row { border-bottom:0; padding-bottom:4px; }
/* Spread rows across the panel so it ends level with its neighbour. */
.tx-panel-body.tx-fill { display:flex; flex-direction:column; }
.tx-fill>.tx-bars:not(:empty) { flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-around; }
.tx-tbl .sub.mono { white-space:nowrap; }
.tx-chart-box { position:relative; height:200px; }
.tx-chart-box.tall { height:220px; }
.tx-panel-body.flush-top { padding-top:8px; }
.tx-split { border-top:1px solid var(--hair); }

/* Panel jump highlight (KPI shortcuts) */
html body.tx-on .panel-flash { animation:txFlash 1.4s ease-out 1; }
@keyframes txFlash { 0% { box-shadow:0 0 0 3px var(--accent); } 100% { box-shadow:var(--shadow); } }
html body.tx-on #screenDashboard [id^="panel"] { scroll-margin-top:76px; }

/* Screen entrance */
body.tx-on .tx-screen:not(.hidden) { animation:txRise .35s ease-out both; }
@keyframes txRise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ============================================================
   Shared form controls (staff + admin forms)
   ============================================================ */
body.tx-on .hidden { display:none!important; }
.tx-dim { color:var(--faint); font-weight:400; }
.tx-form { display:grid; gap:16px; }
.tx-form-2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.tx-field { display:block; min-width:0; }
html body.tx-on .tx-field>label, html body.tx-on .tx-field>span, html body.tx-on label.tx-field>span {
  display:block; font-size:12px!important; font-weight:600; letter-spacing:.02em!important; text-transform:none!important;
  margin-bottom:6px; color:var(--text);
}
html body.tx-on .tx-field label i { font-style:normal; color:var(--danger); }
.tx-field small, small.tx-help, p.tx-help, .tx-help { display:block; color:var(--faint); font-size:11.5px; line-height:1.5; }
.tx-field small { margin-top:6px; }
.tx-help.c { text-align:center; }
.tx-pad { padding:12px 18px 0; }
.tx-note { margin-top:8px; font-size:12px; color:var(--info); }
.tx-note-warn { display:block; font-size:12px; color:var(--warn); }
.tx-error-text { margin-top:6px; font-size:12px; font-weight:500; color:var(--danger); }
.tx-error-text.c { text-align:center; }
html body.tx-on .tx-input:disabled { opacity:.55; cursor:not-allowed; }
html body.tx-on .tx-btn.tx-block { width:100%; }
html body.tx-on .tx-btn.tx-lg { min-height:48px; font-size:14.5px; }
html body.tx-on .tx-link { min-height:36px; min-width:0; padding:0; background:none; border:0; color:var(--info); font-size:12.5px; font-weight:600; cursor:pointer; }
html body.tx-on .tx-link:hover { text-decoration:underline; }
.tx-toggle-row { display:flex; gap:6px; }
html body.tx-on .tx-toggle-row .toggle-btn {
  flex:1; min-height:44px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  font-weight:600; font-size:13.5px; color:var(--muted); background:var(--surface); transition:background .15s,color .15s,border-color .15s;
}
html body.tx-on .tx-toggle-row .toggle-btn:hover:not(.active):not(:disabled) { color:var(--text); border-color:var(--text); }
html body.tx-on .toggle-btn.active, html body.tx-on .tx-toggle-row .toggle-btn.active { background:var(--text); color:var(--bg); border-color:var(--text); }
html body.tx-on .toggle-btn.case-locked-out { opacity:.4; background:var(--inset); }
html body.tx-on .tx-switch {
  width:100%; min-height:44px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface);
  color:var(--muted); font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:.04em; cursor:pointer;
}
html body.tx-on #takeSerialToggle.serial-on { background:var(--text); color:var(--bg); border-color:var(--text); }
html body.tx-on .tx-stock-hint {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:9px 12px; border-radius:7px; background:var(--inset); border:1px dashed var(--border-strong); color:var(--muted);
}
html body.tx-on .tx-stock-hint b { color:var(--text); font-weight:600; text-transform:none; }
html body.tx-on .tx-stock-hint.stock-ok b { color:var(--ok); }
html body.tx-on .tx-stock-hint.stock-low { border-color:var(--warn); background:var(--warn-soft); }
html body.tx-on .tx-stock-hint.stock-low b { color:var(--warn); }
html body.tx-on .tx-stock-hint.stock-zero { border-color:var(--danger); background:var(--danger-soft); }
html body.tx-on .tx-stock-hint.stock-zero b { color:var(--danger); }
.tx-serial-list { display:grid; gap:8px; }
.tx-serial-item { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:8px; align-items:center; }
.tx-serial-n { font-family:var(--font-mono); font-size:11px; color:var(--faint); }
.tx-badge-row { display:flex; gap:6px; flex-wrap:wrap; }
.tx-check-label { display:inline-flex; align-items:center; gap:8px; min-height:36px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; }
body.tx-on input[type="checkbox"] { width:18px; height:18px; min-height:0; accent-color:var(--accent-strong); cursor:pointer; }
html[data-theme="dark"] body.tx-on input[type="checkbox"] { accent-color:var(--accent); }

/* Lists inside panels (tasks, forms, cart, settle lines) */
.tx-list { display:block; }
.tx-list-row { display:flex; align-items:flex-start; gap:12px; padding:14px 18px; border-bottom:1px solid var(--hair); }
.tx-list-row:last-child { border-bottom:0; }
.tx-list-main { flex:1; min-width:0; }
.tx-list-title { font-size:13.5px; font-weight:600; color:var(--text); display:flex; flex-wrap:wrap; align-items:center; gap:6px; overflow-wrap:anywhere; }
.tx-list-title.mono, .tx-list-title .mono { font-family:var(--font-mono); font-size:13px; }
.tx-list-meta { margin-top:3px; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.tx-list-meta.mono { font-family:var(--font-mono); font-size:11px; color:var(--faint); letter-spacing:.02em; }
.tx-list-note { margin-top:6px; font-size:12.5px; color:var(--muted); white-space:pre-line; overflow-wrap:anywhere; }
.tx-list-note a { color:var(--info); text-decoration:underline; text-underline-offset:3px; }
.tx-list-row>.tx-btn, .tx-list-row>.tx-mini { flex-shrink:0; }
.tx-panel-warn { border-color:color-mix(in srgb,var(--warn) 45%,var(--border)); }
.tx-panel-warn>.tx-panel-head { background:var(--warn-soft); }
.tx-panel-warn>.tx-panel-head h3 { color:var(--warn)!important; }
.tx-foot-stack { flex-direction:column; align-items:stretch; gap:8px; padding:16px 18px; }

/* Settlement lines */
.tx-settle { display:flex; gap:10px; padding:14px 18px 14px 8px; border-bottom:1px solid var(--hair); transition:background .15s; }
.tx-settle:last-child { border-bottom:0; }
.tx-settle:has(input[type="checkbox"]:checked) { background:var(--accent-soft); }
.tx-check-target { display:inline-flex; align-items:flex-start; justify-content:center; min-width:40px; min-height:40px; padding-top:2px; cursor:pointer; flex-shrink:0; }
.tx-settle-body { flex:1; min-width:0; }
.tx-status-sel { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
html body.tx-on .tx-status-sel .toggle-btn {
  min-height:36px; min-width:0; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:600;
  border:1px solid var(--border-strong); color:var(--muted); background:var(--surface);
}
html body.tx-on .tx-status-sel .toggle-btn[data-s="RETURN"].active { background:var(--info-soft); color:var(--info); border-color:var(--info); }
html body.tx-on .tx-status-sel .toggle-btn[data-s="USED"].active { background:var(--ok-soft); color:var(--ok); border-color:var(--ok); }
html body.tx-on .tx-status-sel .toggle-btn[data-s="LATER"].active { background:var(--warn-soft); color:var(--warn); border-color:var(--warn); }
html body.tx-on .tx-settle-input { margin-top:10px; min-height:40px; }
html body.tx-on .tx-settle-input.is-warn { border-color:var(--warn); }
.tx-settle-qty { margin-top:10px; }
.tx-later-tag { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12px; color:var(--muted); }
.tx-sub-label { margin-top:12px; font-size:12px; font-weight:600; color:var(--text); }
html body.tx-on #settleLines .ops-jobsheet-split { grid-template-columns:72px auto minmax(0,1fr) auto; gap:8px; margin-top:8px; }
html body.tx-on #settleLines .ops-jobsheet-split .tx-input { min-height:40px; }
.tx-split-arrow { font-size:11.5px; color:var(--faint); white-space:nowrap; }
.tx-batch { margin:0 18px 18px; padding:12px; border-radius:10px; background:var(--raised); border:1px solid var(--hair); display:grid; gap:10px; }
.tx-batch p { font-size:12px; font-weight:600; color:var(--text); }
.tx-batch-row { display:flex; gap:6px; flex-wrap:wrap; }
.tx-batch-row .tx-btn { flex:1; }
html body.tx-on .tx-photo-drop {
  width:100%; min-height:88px; padding:18px; border:1.5px dashed var(--border-strong); border-radius:var(--radius);
  background:var(--raised); color:var(--text); font-size:13px; font-weight:600; text-align:center; cursor:pointer; transition:border-color .15s;
}
html body.tx-on .tx-photo-drop::before { content:"▣"; display:block; font-size:20px; color:var(--muted); margin-bottom:4px; }
html body.tx-on .tx-photo-drop:hover { border-color:var(--accent-strong); }
.tx-proof { display:flex; gap:12px; align-items:flex-start; }
.tx-proof img { width:88px; height:88px; object-fit:cover; border-radius:8px; border:1px solid var(--border); flex-shrink:0; }
.tx-proof .tx-mini { margin-top:8px; }

/* ============================================================
   Staff screens
   ============================================================ */
#staffTopbar { display:none; }
body.staff-mode #staffTopbar { display:block; }
#staffTopbar { position:sticky; top:0; z-index:40; background:var(--topbar); color:#eef3ee; border-bottom:1px solid rgba(255,255,255,.08); }
#staffTopbar .tx-topbar-in { max-width:640px; }
html body #staffTopbar button { min-width:0; min-height:0; }
html body #staffTopbar .tx-logo { display:flex; align-items:center; gap:10px; padding:4px 0; text-align:left; color:#eef3ee; background:none; border:0; }
html body #staffTopbar .tx-icon-btn {
  width:36px; height:36px; border-radius:8px; display:grid; place-items:center; color:#c6d2c9; background:transparent;
  border:1px solid rgba(255,255,255,.12); transition:background .15s,color .15s;
}
html body #staffTopbar .tx-icon-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
html body :is(#screenMenu,#screenTake,#screenReturn).tx-staff { max-width:600px; margin:0 auto; padding:24px 0 64px; }
.tx-staff-id { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.tx-avatar {
  width:44px; height:44px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(135deg,#a3e635,#65a30d); color:#0e1512; font-family:var(--font-mono); font-weight:700; font-size:14px;
}
.tx-staff-who { flex:1; min-width:0; }
html body #screenMenu #menuUserName { font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-.025em; line-height:1.2; color:var(--text); overflow-wrap:anywhere; }
html body #screenMenu #menuBranch { margin-top:4px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
html body #screenMenu #menuBranch:not(:empty)::after { content:" · Staff"; }
.tx-care { border:1px solid var(--warn); background:var(--warn-soft); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; }
.tx-care-head { display:flex; align-items:center; gap:12px; padding:14px 16px; flex-wrap:wrap; }
.tx-care-ico { width:36px; height:36px; border-radius:9px; display:grid; place-items:center; background:var(--surface); color:var(--warn); flex-shrink:0; }
.tx-care-text { flex:1; min-width:180px; }
html body .tx-care-text h3 { font-size:13.5px; font-weight:700; color:var(--text); }
html body .tx-care-text h3 .mono { font-family:var(--font-mono); font-size:13.5px; color:var(--warn); }
.tx-care-text p { font-size:12px; color:var(--muted); margin-top:2px; }
.tx-care-list { background:var(--surface); border-top:1px solid color-mix(in srgb,var(--warn) 35%,var(--border)); max-height:280px; overflow-y:auto; }
.tx-care-row { display:grid; grid-template-columns:92px minmax(0,1fr); gap:12px; align-items:start; padding:12px 16px; border-bottom:1px solid var(--hair); }
.tx-care-row:last-child { border-bottom:0; }
.tx-care-row .tx-aging { padding-top:2px; }
.tx-care-row .tx-aging-bar { width:44px; }
.tx-care-item b { display:block; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.tx-care-item .mono { display:block; font-family:var(--font-mono); font-size:11px; color:var(--faint); margin-top:2px; overflow-wrap:anywhere; }
.tx-gap { margin-bottom:16px; }
.tx-action-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-bottom:16px; }
html body.tx-on .tx-action {
  display:flex; align-items:center; gap:14px; width:100%; min-height:96px; padding:18px; text-align:left; cursor:pointer;
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  transition:transform .18s ease-out,border-color .18s,box-shadow .18s;
}
html body.tx-on .tx-action:hover { transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow-pop); }
html body.tx-on .tx-action.primary { background:var(--accent); border-color:var(--accent); color:#0e1512; }
.tx-action-ico { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; background:var(--text); color:var(--bg); }
.tx-action.primary .tx-action-ico { background:#0e1512; color:#a3e635; }
.tx-action-text { flex:1; min-width:0; }
.tx-action-text b { display:block; font-family:var(--font-display); font-size:15.5px; font-weight:700; letter-spacing:-.015em; }
.tx-action-text span { display:block; margin-top:2px; font-size:12.5px; color:var(--muted); }
.tx-action.primary .tx-action-text span { color:#2b3a12; }
.tx-action-go { font-family:var(--font-mono); font-size:16px; opacity:.6; }
.tx-staff-foot { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding-top:16px; border-top:1px solid var(--hair); }
html body.tx-on .tx-staff-foot .tx-btn { min-width:0; padding:8px 14px; white-space:normal; text-align:center; line-height:1.3; }
.tx-staff-nav { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
html body.tx-on .tx-back {
  display:inline-flex; align-items:center; gap:4px; min-height:44px; min-width:0; padding:0 12px 0 8px; border-radius:10px;
  background:var(--surface); border:1px solid var(--border); color:var(--text); font-size:13px; font-weight:600; flex-shrink:0;
}
html body.tx-on .tx-back:hover { border-color:var(--text); }
.tx-tabs { flex:1; display:flex; gap:4px; background:var(--inset); border:1px solid var(--border); padding:4px; border-radius:12px; min-width:0; }
html body.tx-on .tx-tabs button {
  flex:1; min-width:0; min-height:40px; padding:8px; border-radius:8px; font-weight:600; font-size:13px; color:var(--muted);
  background:transparent; border:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .18s,color .18s;
}
html body.tx-on .tx-tabs button:hover:not(.is-active) { color:var(--text); }
html body.tx-on .tx-tabs button.is-active { background:var(--surface); color:var(--text); box-shadow:var(--shadow); cursor:default; }
html body :is(#screenTake,#screenReturn) .tx-panel-head h2 { font-family:var(--font-display); font-size:14.5px; font-weight:600; letter-spacing:-.015em; color:var(--text); }
.tx-assigned { display:grid; gap:8px; margin-bottom:10px; }
.tx-assigned-detail { padding:10px 12px; border-radius:8px; background:var(--raised); border:1px solid var(--hair); }

/* ============================================================
   Modals (generic). Shown by removing .hidden, as before.
   ============================================================ */
.tx-modal-bk {
  position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(10,15,12,.52); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.tx-modal-bk.is-dark { background:rgba(5,8,6,.78); }
.tx-modal-bk:not(.hidden) { animation:txFade .18s ease-out; }
@keyframes txFade { from { opacity:0; } }
.tx-modal {
  width:100%; max-width:520px; max-height:88vh; overflow:auto; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:16px 16px 0 0; box-shadow:var(--shadow-pop); animation:txUp .22s ease-out;
}
@keyframes txUp { from { transform:translateY(16px); opacity:.6; } }
@media (min-width:640px) { .tx-modal-bk { align-items:center; padding:20px; } .tx-modal { border-radius:16px; } }
.tx-modal-head { display:flex; align-items:flex-start; gap:12px; padding:18px 20px 0; }
html body .tx-modal-head h2, html body .tx-modal-head h3 { font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--text); }
.tx-modal-head p { margin-top:3px; font-size:13px; color:var(--muted); }
html body .tx-modal .tx-x {
  margin-left:auto; width:32px; height:32px; min-width:32px; min-height:32px; border-radius:8px; display:grid; place-items:center;
  color:var(--muted); background:transparent; border:1px solid var(--border); flex-shrink:0;
}
html body .tx-modal .tx-x:hover { color:var(--text); border-color:var(--text); }
.tx-modal-body { padding:16px 20px 20px; display:grid; gap:14px; }
.tx-modal-foot { padding:0 20px 20px; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
html body .tx-modal-foot .tx-btn { min-width:120px; }
.tx-summary { background:var(--raised); border:1px solid var(--hair); border-radius:10px; padding:10px 14px; display:grid; gap:6px; }
.tx-kv { display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.tx-kv span { color:var(--muted); }
.tx-kv b { font-weight:600; }
.tx-kv b.mono { font-family:var(--font-mono); }
.tx-confirm-list { max-height:240px; overflow-y:auto; border-top:1px solid var(--hair); }
.tx-confirm-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--hair); }
.tx-confirm-row b { display:block; font-size:13px; font-weight:600; }
.tx-confirm-row .mono { display:block; font-family:var(--font-mono); font-size:11px; color:var(--faint); margin-top:2px; }
.tx-confirm-row .tx-qty { font-size:13px; font-weight:700; color:var(--text); flex-shrink:0; }
.tx-scan-box { min-height:250px; border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--inset); color:var(--faint); font-size:13px; }
/* ============================================================
   Admin work screens: Stock adjustment, Manage, Assign
   ============================================================ */
html body .tx-screen.tx-admin { max-width:1240px; margin:0 auto; padding:28px 0 72px; }
html body .tx-screen.tx-admin.tx-narrow { max-width:640px; }
html body #screenAssign.tx-screen { max-width:1240px; }
.tx-mt { margin-top:8px; }
.tx-flex { flex:1; }
.tx-code-desc { grid-template-columns:120px minmax(0,1fr); }
.tx-qty-remarks { grid-template-columns:140px minmax(0,1fr); }
.tx-staff-count { grid-template-columns:minmax(0,1fr) 96px; }
.tx-panel-head .tx-head-note { flex-basis:100%; }
html body.tx-on .tx-field.is-warn>label { color:var(--warn); }
html body.tx-on .tx-field.is-warn .tx-input { border-color:var(--warn); background:var(--warn-soft); }

/* Assignment workspace */
html body.tx-on #screenAssign .assignment-workspace { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px; align-items:start; }
html body.tx-on #screenAssign .assignment-ledger { border-radius:var(--radius); }
html body.tx-on #screenAssign .assignment-controls {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 88px; gap:12px; padding:12px 18px;
  background:var(--raised); border-bottom:1px solid var(--hair);
}
html body.tx-on #screenAssign .assignment-controls label { display:block; min-width:0; }
html body.tx-on #screenAssign .assignment-controls label>span {
  display:block; margin-bottom:4px; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:500;
}
html body.tx-on #screenAssign .assignment-controls .tx-input { min-height:40px; margin:0; padding-top:8px; padding-bottom:8px; font-size:13px!important; }
html body.tx-on #screenAssign .assignment-list { list-style:none; margin:0; padding:0; max-height:min(64vh,680px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
html body.tx-on #screenAssign .assignment-status-group { padding:8px 18px; background:var(--inset); border-bottom:1px solid var(--hair); }
html body.tx-on #screenAssign .assignment-status-group h4 { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
html body.tx-on #screenAssign .assignment-entry { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:14px 18px; border-bottom:1px solid var(--hair); transition:background .12s; }
html body.tx-on #screenAssign .assignment-entry:hover { background:var(--raised); }
html body.tx-on #screenAssign .assignment-entry:last-child { border-bottom:0; }
html body.tx-on #screenAssign .assignment-ticket { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:14px; font-weight:600; color:var(--text); }
html body.tx-on #screenAssign .assignment-ticket .mono { font-family:var(--font-mono); font-size:13.5px; font-weight:700; }
html body.tx-on #screenAssign .assignment-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:6px; font-size:12.5px; color:var(--muted); }
html body.tx-on #screenAssign .assignment-owner strong { color:var(--text); font-weight:600; }
html body.tx-on #screenAssign .assignment-note { margin-top:6px; font-size:12.5px; line-height:1.55; color:var(--muted); white-space:pre-line; overflow-wrap:anywhere; }
html body.tx-on #screenAssign .assignment-trail { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:8px; }
html body.tx-on #screenAssign .assignment-empty { padding:36px 20px; text-align:center; }
html body.tx-on #screenAssign .assignment-pagination { padding:12px 18px; border-top:1px solid var(--hair); background:var(--raised); }
html body.tx-on #screenAssign .assignment-pagination>p { margin:0 0 8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); }
html body.tx-on #screenAssign .assignment-page-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }
html body.tx-on #screenAssign .assignment-page-label { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
html body.tx-on #screenAssign .assignment-page-label .tx-input { min-width:96px; }
html body.tx-on #screenAssign .assignment-composer { position:sticky; top:72px; max-height:calc(100vh - 88px); overflow:hidden; display:flex; flex-direction:column; scroll-margin-top:72px; }
html body.tx-on #screenAssign .assignment-composer>.tx-panel-body { overflow-y:auto; flex:1 1 auto; }
html body.tx-on #screenAssign .assignment-new-link { text-decoration:none; }
.tx-assign-rows { display:grid; gap:12px; }
.tx-ticket-row { display:grid; gap:12px; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--raised); }
.tx-ticket-row.is-collect { border-color:var(--warn); background:var(--warn-soft); }
.tx-ticket-title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tx-ticket-title .mono { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--accent-strong); font-weight:600; }
html[data-theme="dark"] .tx-ticket-title .mono { color:var(--accent); }
.tx-ticket-fields { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.tx-ticket-flags { display:flex; gap:6px; }
html body.tx-on .tx-flag {
  flex:1; min-height:36px; min-width:0; padding:6px 10px; border-radius:999px; font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  letter-spacing:.03em; border:1px solid var(--border-strong); color:var(--muted); background:var(--surface);
}
html body.tx-on .tx-flag.active { background:var(--warn-soft); color:var(--warn); border-color:var(--warn); }
html body.tx-on .tx-flag.is-urgent.active { background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }
.tx-collect-ref>label { color:var(--warn)!important; }

/* Freshdesk draft cards */
.tx-fd-list { display:grid; gap:12px; padding:16px 18px; }
.tx-fd-card { display:grid; gap:10px; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.tx-fd-top { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tx-fd-ticket { font-family:var(--font-mono); font-size:14px; font-weight:700; }
.tx-fd-subject { font-size:13.5px; font-weight:600; color:var(--text); }
.tx-fd-place { font-size:12.5px; color:var(--muted); }
.tx-fd-meta { font-family:var(--font-mono); font-size:11px; color:var(--faint); }
.tx-fd-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tx-fd-actions .tx-flag { flex:0 0 auto; padding:6px 14px; }
/* ============================================================
   Sign-in and Admin login
   ============================================================ */
html body .tx-screen.tx-login { max-width:none; min-height:calc(100vh - 32px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 0; }
html body .tx-screen.tx-login.hidden { display:none; }
.tx-login-card { width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-pop); padding:28px; }
.tx-login-mark {
  width:44px; height:44px; border-radius:11px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--accent); color:#0e1512; font-family:var(--font-mono); font-weight:700; font-size:19px;
}
.tx-login-mark.is-dark { background:var(--text); color:var(--bg); }
html body.tx-on h1.tx-login-title { font-size:26px; margin:8px 0 6px; }
.tx-login-lede { color:var(--muted); font-size:13.5px; margin-bottom:20px; }
.tx-login-foot { margin-top:16px; text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
html body.tx-on .tx-login-back { margin-bottom:16px; min-height:36px; }
.tx-divider { display:flex; align-items:center; gap:12px; color:var(--faint); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }
.tx-divider::before, .tx-divider::after { content:""; flex:1; height:1px; background:var(--hair); }
.tx-locked { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--inset); border:1px dashed var(--border-strong); color:var(--muted); }
.tx-locked .mono { font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--text); letter-spacing:.04em; text-transform:uppercase; }
.tx-alert { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; padding:10px 12px; border-radius:8px; background:var(--danger-soft); border:1px solid color-mix(in srgb,var(--danger) 35%,transparent); }
.tx-alert p { font-size:12px; color:var(--danger); }
html body.tx-on .password-wrap { position:relative; }
html body.tx-on .password-wrap>.tx-input { padding-right:68px!important; }
html body.tx-on .password-toggle {
  position:absolute; right:6px; top:50%; transform:translateY(-50%); width:auto; height:32px; min-height:32px; min-width:0; padding:0 10px;
  border-radius:6px; font-size:11.5px; font-weight:600; color:var(--muted); background:transparent; border:0;
}
html body.tx-on .password-toggle:hover { background:var(--inset); color:var(--text); }

/* Modal extras */
.tx-modal-bk.tx-modal-top { z-index:90; }
html body.tx-on #toastContainer { z-index:100; }
.tx-modal-danger .tx-modal-head h2 { color:var(--danger)!important; }
.tx-modal-context { font-family:var(--font-mono); font-size:11.5px!important; color:var(--muted); overflow-wrap:anywhere; }
html body.tx-on .tx-btn.solid-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
html body.tx-on .tx-btn.solid-danger:hover { background:color-mix(in srgb,var(--danger) 85%,#000); border-color:var(--danger); }
html[data-theme="dark"] body.tx-on .tx-btn.solid-danger { color:#0e1512; }
html body.tx-on textarea.tx-input { min-height:84px; resize:vertical; }
.tx-remark-list { display:grid; gap:6px; margin-top:8px; }
.tx-remark-item { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:8px; background:var(--raised); border:1px solid var(--hair); }
.tx-remark-item .tx-list-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tx-remark-item .tx-list-meta .mono { font-family:var(--font-mono); font-size:11px; color:var(--faint); }
/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  .tx-g-main, .tx-g-2 { grid-template-columns:minmax(0,1fr); }
  html body.tx-on #screenAssign .assignment-workspace { grid-template-columns:minmax(0,1fr); }
  html body.tx-on #screenAssign .assignment-composer { position:static; max-height:none; overflow:visible; }
}
@media (max-width:1020px) {
  .tx-g-kpi { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tx-topnav .tx-long { display:none; }
}
@media (max-width:760px) {
  .tx-topbar-in { flex-wrap:wrap; padding:8px 16px 0; gap:10px; min-height:0; }
  .tx-topnav { order:3; width:100%; margin:0 -16px; padding:0 16px 8px; overflow-x:auto; scrollbar-width:none; }
  .tx-topnav::-webkit-scrollbar { display:none; }
  html body #adminTopbar .tx-topnav button { flex:1 0 auto; justify-content:center; }
  .tx-chip-dark { display:none; }
  html body.tx-on #screenDashboard [id^="panel"] { scroll-margin-top:112px; }
}
@media (max-width:680px) {
  .tx-g-kpi { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tx-g-kpi>:last-child { grid-column:1/-1; }
  .tx-g-charts, .tx-g-2 { grid-template-columns:minmax(0,1fr); }
  html body #screenDashboard.tx-screen { padding:20px 0 56px; }
  .tx-page-head { margin-bottom:16px; }
  .tx-head-actions { width:100%; }
  .tx-head-actions>* { flex:1 1 auto; }
  html body.tx-on .tx-head-actions .tx-btn { width:100%; }
  .tx-searchbox { max-width:none; min-width:100%; order:5; }
  .tx-filter-seg { flex:1 1 auto; }
  html body.tx-on .tx-filter-seg .dash-btn-filter { flex:1; padding:8px 10px; }
  /* Tables become labeled record cards (labels set by operations-layout.js). */
  .tx-tbl-wrap, .tx-tbl-wrap.h-sm, .tx-tbl-wrap.h-md { max-height:none; overflow:visible; }
  .tx-tbl, .tx-tbl.min-sm, .tx-tbl.min-md { min-width:0; }
  .tx-tbl, .tx-tbl tbody { display:block; width:100%; }
  .tx-tbl thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .tx-tbl tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 14px; padding:14px; border-bottom:1px solid var(--hair); }
  .tx-tbl tbody tr:last-child { border-bottom:0; }
  html body.tx-on .tx-tbl td { display:block; padding:0; border:0; min-width:0; overflow-wrap:anywhere; text-align:left; }
  html body.tx-on .tx-tbl tbody tr:hover td { background:transparent; }
  .tx-tbl td[data-label]:not([data-label=""])::before {
    content:attr(data-label); display:block; margin-bottom:3px;
    font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:500;
  }
  .tx-tbl td.tx-wide, .tx-tbl td.tx-act, .tx-tbl td.tx-empty-cell { grid-column:1/-1; }
  .tx-tbl td.tx-act::before { display:none!important; }
  .tx-tbl td.tx-act .tx-row-actions { justify-content:flex-start; flex-wrap:wrap; }
  html body.tx-on .tx-tbl td.tx-act .tx-mini { min-height:36px; padding:6px 12px; }
  .tx-tbl .nowrap { white-space:normal; }
  .tx-tbl td.mono, .tx-tbl td .mono { overflow-wrap:normal; word-break:keep-all; }
  .tx-panel-head { padding:12px 14px; }
  .tx-panel-body { padding:14px; }
  .tx-kpi-num { font-size:24px; }
  html body.tx-on .tx-kpi { padding:14px; }
  .tx-menu { right:auto; left:0; }
  .tx-action-grid { grid-template-columns:minmax(0,1fr); }
  .tx-form-2:not(.tx-settle-qty):not(.tx-keep-2):not(.tx-staff-count):not(.tx-qty-remarks) { grid-template-columns:minmax(0,1fr); }
  .tx-qty-remarks { grid-template-columns:96px minmax(0,1fr); }
  html body .tx-screen.tx-admin { padding:20px 0 56px; }
  html body.tx-on #screenAssign .assignment-controls { grid-template-columns:minmax(0,1fr) 80px; padding:12px 14px; }
  html body.tx-on #screenAssign .assignment-status-field { grid-column:1/-1; }
  html body.tx-on #screenAssign .assignment-entry { grid-template-columns:minmax(0,1fr); gap:10px; padding:14px; }
  html body.tx-on #screenAssign .assignment-trail { flex-direction:row; align-items:center; }
  html body.tx-on #screenAssign .assignment-pagination { padding:12px 14px; }
  .tx-fd-list { padding:14px; }
  html body.tx-on #screenAssign .assignment-new-link { width:100%; }
  html body.tx-on .tx-action { min-height:80px; padding:16px; }
  .tx-staff-nav { flex-wrap:wrap; }
  .tx-staff-nav .tx-tabs { flex-basis:100%; order:2; }
  html body :is(#screenMenu,#screenTake,#screenReturn).tx-staff { padding:16px 0 48px; }
  .tx-list-row { padding:12px 14px; }
  .tx-settle { padding:12px 14px 12px 4px; }
  .tx-batch { margin:0 14px 14px; }
  .tx-pad { padding:12px 14px 0; }
  .tx-foot-stack { padding:14px; }
  html body.tx-on #settleLines .ops-jobsheet-split { grid-template-columns:64px minmax(0,1fr) auto; }
  .tx-split-arrow { display:none; }
  .tx-modal-foot .tx-btn { flex:1; }
}
@media (max-width:400px) {
  .tx-logo small { display:none; }
  .tx-lede { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
  body.tx-on *, body.tx-on *::before, body.tx-on *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

.tx-tbl .wrap { white-space:normal!important; }

/* Link chips from linkify(): shared by every screen, with fallbacks for
   screens still on the older layer. */
a.tx-link-chip {
  display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:6px; font-weight:600; text-decoration:none;
  color:var(--info,#155e75); background:var(--info-soft,#eaf3f6); border:1px solid color-mix(in srgb,var(--info,#155e75) 30%,transparent);
}
a.tx-link-chip:hover { text-decoration:underline; }
.tx-care-item b .mono { display:inline; margin:0 0 0 4px; font-size:12px; color:var(--faint); }
html[data-theme="dark"] body.tx-on .tx-tabs button.is-active { box-shadow:inset 0 0 0 1px var(--border-strong); }

/* Toasts (showToast): bottom pill as in the prototype, colour dot by type. */
html body.tx-on #toastContainer { top:auto; bottom:20px; }
html body.tx-on #toastContainer .toast {
  background:var(--text)!important; color:var(--bg)!important; border:1px solid var(--text)!important;
  border-radius:10px; box-shadow:var(--shadow-pop); align-items:center; font-size:13px; animation:txUp .25s ease-out;
}
html body.tx-on #toastContainer .toast>span:first-child { font-size:0; width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }
html body.tx-on #toastContainer .toast.bg-green-700>span:first-child { background:var(--ok); }
html body.tx-on #toastContainer .toast.bg-red-700>span:first-child { background:var(--danger); }
html body.tx-on #toastContainer .toast.bg-amber-700>span:first-child { background:var(--warn); }
html body.tx-on #toastContainer .toast.bg-red-700 { box-shadow:inset 3px 0 0 var(--danger),var(--shadow-pop); }
html body.tx-on #toastContainer .toast button { min-width:28px; min-height:28px; color:inherit; opacity:.7; }
html[data-theme="dark"] body.tx-on #toastContainer .toast.bg-green-700>span:first-child { background:#15803d; }
html[data-theme="dark"] body.tx-on #toastContainer .toast.bg-red-700>span:first-child { background:#dc2626; }
html[data-theme="dark"] body.tx-on #toastContainer .toast.bg-amber-700>span:first-child { background:#b45309; }

html body.tx-on .tx-fd-actions .tx-flag { flex:0 0 auto; white-space:nowrap; padding:6px 14px; }

html body :is(#screenLogin,#screenAdminLogin).tx-login { max-width:none; margin-inline:0; padding-top:32px; }
html body.tx-on :is(#screenLogin,#screenAdminLogin) .tx-field>label { color:var(--text); }
/* Startup shell follows the saved theme so dark mode does not flash white. */
html[data-theme="dark"].app-starting body, html[data-theme="dark"] #startupShell { background:#0d1310!important; color:#f2f5f2!important; }
html body #startupShell .startup-shell-mark { background:#a3e635; color:#0e1512; }
html body #startupShell .startup-shell-spinner { border-color:#d9ecc0; border-top-color:#4d7c0f; }

/* Empty charts: the empty-state message replaces the reserved canvas box. */
.tx-chart-box:has(> canvas[style*="display: none"]) { display:none; }

.tx-panel-foot[hidden] { display:none; }

/* Numbered pager (txSetPager): "1-5 of 23  ‹ 1 2 3 › ". Sits on the right
   of a panel foot; drops to its own full-width line on phones. */
.tx-pages { display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.tx-pages[hidden], .tx-hint[hidden] { display:none; }
.tx-page-info { font-family:var(--font-mono); font-size:11px; color:var(--faint); letter-spacing:.04em; white-space:nowrap; }
.tx-page-nums { display:flex; align-items:center; gap:4px; }
html body.tx-on .tx-page {
  min-width:30px; min-height:30px; padding:0 6px; display:inline-grid; place-items:center;
  font-family:var(--font-mono); font-size:12px; font-weight:600; line-height:1; color:var(--muted);
  background:var(--surface); border:1px solid var(--border); border-radius:6px; cursor:pointer; transition:border-color .15s,background .15s,color .15s;
}
html body.tx-on .tx-page:hover:not(:disabled):not(.is-current) { border-color:var(--text); color:var(--text); }
html body.tx-on .tx-page.is-current { background:var(--text); border-color:var(--text); color:var(--bg); cursor:default; }
html body.tx-on .tx-page:disabled { opacity:.4; cursor:not-allowed; }
.tx-page-gap { min-width:16px; text-align:center; color:var(--faint); font-family:var(--font-mono); font-size:12px; }

/* Staff "In your care" list pages instead of scrolling. */
.tx-care-list { max-height:none; overflow:visible; }
.tx-care-foot { display:flex; padding:10px 16px; background:var(--surface); border-top:1px solid var(--hair); }
.tx-care-foot[hidden] { display:none; }

/* Filter row under a panel head: status tabs, staff, search. */
.tx-panel-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--hair); }
html body.tx-on .tx-panel-tools select.tx-input.sm { flex:0 1 180px; max-width:none; }
html body.tx-on .tx-panel-tools .tx-search-inline { flex:1 1 160px; min-width:140px; }
.tx-seg { display:inline-flex; border:1px solid var(--border-strong); border-radius:999px; overflow:hidden; background:var(--surface); flex:0 0 auto; max-width:100%; }
html body.tx-on .tx-seg button {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; min-height:34px; min-width:0;
  font-size:12px; font-weight:600; color:var(--muted); background:transparent; border:0; border-right:1px solid var(--hair); border-radius:0; white-space:nowrap; cursor:pointer;
}
html body.tx-on .tx-seg button:last-child { border-right:0; }
html body.tx-on .tx-seg button:hover:not(.is-active) { color:var(--text); background:var(--raised); }
html body.tx-on .tx-seg button.is-active { background:var(--text); color:var(--bg); }
.tx-seg button b { font-family:var(--font-mono); font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:999px; background:var(--inset); color:var(--muted); }
.tx-seg button.is-active b { background:color-mix(in srgb,var(--bg) 22%,transparent); color:var(--bg); }

@media (max-width:680px) {
  .tx-pages { width:100%; justify-content:space-between; margin-left:0; }
  html body.tx-on .tx-page { min-width:36px; min-height:36px; }
  .tx-panel-tools { padding:12px 14px; }
  .tx-seg { width:100%; }
  html body.tx-on .tx-seg button { flex:1 1 0; justify-content:center; padding:6px 6px; gap:4px; }
  html body.tx-on .tx-panel-tools select.tx-input.sm, html body.tx-on .tx-panel-tools .tx-search-inline { flex:1 1 100%; }
  .tx-care-foot { padding:10px 14px; }
}
@media (max-width:420px) {
  .tx-seg { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:10px; }
  html body.tx-on .tx-seg button { border-bottom:1px solid var(--hair); }
  html body.tx-on .tx-seg button:nth-child(2n) { border-right:0; }
  html body.tx-on .tx-seg button:nth-last-child(-n+2) { border-bottom:0; }
}