/* DHT Cement LIMS – web dashboard = the desktop full-screen dashboard (app/ui/dashboard/dark.py, app/ui/theme.py).
   Six looks like View -> Appearance; the colours below are the desktop palettes (theme.py DARK / OLED / GLASS /
   BUSINESS / LIGHT) and dashboard colours (dark.py). Sizes: desktop pt x 1.333 = px. */

:root, [data-look="oled"] {
  --bg:#000000; --panel:#0a0e27; --card:#121212; --card2:#1c1c1c; --border:#2a2a2a; --border-hover:#3d3d3d;
  --text:#ffffff; --muted:#9aa4b2; --faint:#6b7280; --accent:#0080ff; --accent-dark:#0060cc;
  --green:#4ade80; --amber:#ffd700; --red:#ff4d4d;
  --fbm:#4ea1ff; --ppd:#f08a4b; --extra:#b48cff; --sls:#22d3ee; --hover:#ffffff; --ring:#000000;
  --window:#000000; --checked:var(--accent); --radius:18px; --pill:13px;
  --top-bg:rgba(255,255,255,.04); --top-line:rgba(255,255,255,.10); --nav-bg:rgba(255,255,255,.03);
  --nav-line:rgba(255,255,255,.08); --card-line:rgba(255,255,255,.10); --card-top:rgba(255,255,255,.22);
  --btn:rgba(255,255,255,.06); --btn-line:rgba(255,255,255,.14); --btn-hover:rgba(255,255,255,.12);
  --btn-hover-line:rgba(120,160,255,.7); --nav-on:linear-gradient(90deg,rgba(47,111,237,.55),rgba(123,92,245,.35));
  --nav-on-text:#ffffff; --tile-hover:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  --tile-hover-line:rgba(140,170,255,.75); --legend:rgba(21,34,58,.86); --alert-hover:rgba(255,255,255,.07);
  --dark:1; color-scheme:dark;
  --ref:#e6e6e6; --our-box:#07142b; --our-text:#ffffff;
}
[data-look="dark"] {
  --bg:#05070c; --panel:#0d131e; --card:#111a29; --card2:#172235; --border:#22314a; --border-hover:#36507a;
  --text:#e7edf6; --muted:#8b9bb4; --faint:#5b6b85; --accent:#3b82f6; --accent-dark:#1d4ed8;
  --green:#3fbf7f; --amber:#f2b84b; --red:#ef5350;
  --window:linear-gradient(135deg,#070b16 0%,#0a1124 55%,#140f2b 100%);
  --checked:linear-gradient(90deg,#2f6fed,#7b5cf5);
}
/* light looks: the same shapes on the look's own light colours (dark.py _LIGHT_TOUCH) */
[data-look="glass"], [data-look="glassmorphism"], [data-look="light"], [data-look="business"] {
  --fbm:#2f6fed; --ppd:#e36d2b; --extra:#7b5cf5; --sls:#0891b2; --ring:#ffffff;
  --top-bg:rgba(255,255,255,.60); --nav-bg:rgba(255,255,255,.45); --card-line:var(--border); --card-top:var(--border);
  --btn:rgba(255,255,255,.80); --btn-line:var(--border); --btn-hover:#ffffff; --btn-hover-line:var(--accent);
  --nav-on:rgba(47,111,237,.14); --nav-on-text:var(--accent-dark);
  --tile-hover:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.78)); --tile-hover-line:rgba(47,111,237,.60);
  --legend:rgba(255,255,255,.90); --alert-hover:rgba(0,0,0,.05); --dark:0; color-scheme:light;
  --ref:#475569; --our-box:color-mix(in srgb, var(--accent) 13%, #ffffff); --our-text:var(--text);
  --checked:linear-gradient(90deg,#2f6fed,#7b5cf5);
}
[data-look="glass"], [data-look="glassmorphism"] {
  --bg:#dce8fb; --panel:#ffffff; --card:#ffffff; --card2:#eef3fc; --border:#c7d6ee; --border-hover:#8fb0e6;
  --text:#14243a; --muted:#5a6b85; --faint:#8d9cb4; --accent:#2f6fed; --accent-dark:#1f4fbf;
  --green:#2e7d32; --amber:#ef6c00; --red:#c62828; --hover:#14243a; --top-line:#c7d6ee; --nav-line:#c7d6ee;
  --window:linear-gradient(135deg,#e3ecff 0%,#cfe0fb 35%,#cfe9f2 68%,#e6defa 100%);
}
[data-look="glassmorphism"] { --window:linear-gradient(135deg,#8eb0f4 0%,#8ed6cf 50%,#bfa6f2 100%); }
[data-look="light"] {
  --bg:#e7f0fa; --panel:#ffffff; --card:#ffffff; --card2:#eef4fb; --border:#c3d5ea; --border-hover:#93b7e3;
  --text:#17324d; --muted:#5f7189; --faint:#8fa1b8; --accent:#2f7de1; --accent-dark:#1f5fb8;
  --green:#2e7d32; --amber:#ef6c00; --red:#c62828; --hover:#17324d; --top-line:#c3d5ea; --nav-line:#c3d5ea;
  --window:linear-gradient(135deg,#f2f7fd 0%,#e2edf9 45%,#cfe0f3 100%);
}
[data-look="business"] {
  --bg:#ffffff; --panel:#ffffff; --card:#ffffff; --card2:#f3f2f1; --border:#d2d0ce; --border-hover:#8a8886;
  --text:#201f1e; --muted:#605e5c; --faint:#a19f9d; --accent:#008489; --accent-dark:#006a6e;
  --green:#107c10; --amber:#ca5010; --red:#a4262c; --hover:#201f1e; --top-line:#d2d0ce; --nav-line:#d2d0ce;
  --window:#faf9f8; --checked:var(--accent); --radius:4px; --pill:2px; --nav-on:rgba(0,132,137,.12);
}

* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { background:var(--window); background-attachment:fixed; color:var(--text);
       font-family:"Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size:13px; }
button, input, select { font:inherit; color:inherit; }
.muted { color:var(--muted); }
[hidden] { display:none !important; }

/* --- buttons (QPushButton) --- */
.btn { background:var(--btn); border:1px solid var(--btn-line); border-radius:var(--pill); padding:5px 16px;
       color:var(--text); cursor:pointer; white-space:nowrap; }
.btn:hover { background:var(--btn-hover); border-color:var(--btn-hover-line); }
.btn.on { background:var(--checked); border-color:rgba(255,255,255,.30); color:#fff; }
[data-look="business"] .btn.on, [data-look="glass"] .btn.on, [data-look="light"] .btn.on,
[data-look="glassmorphism"] .btn.on { border-color:var(--accent); }
.btn.small { padding:2px 12px; font-size:12px; color:var(--muted); border-radius:var(--pill); }
.btn.preset { border:1px solid transparent; background:transparent; color:var(--muted); padding:4px 12px; border-radius:12px; }
.btn.preset.on { color:#fff; background:var(--checked); }
input[type=date] { background:var(--btn); color:var(--text); border:1px solid var(--btn-line); border-radius:10px; padding:3px 8px; }
select.look { background:var(--btn); color:var(--text); border:1px solid var(--btn-line); border-radius:var(--pill); padding:4px 10px; }
select.look option { background:var(--card); color:var(--text); }
label.tick { display:inline-flex; align-items:center; gap:6px; font-size:12.7px; cursor:pointer; white-space:nowrap; }
label.tick input { width:14px; height:14px; margin:0; accent-color:var(--accent); }

/* --- top bar (QFrame#topBar, padding 20/12/20/10) --- */
.topbar { background:var(--top-bg); border-bottom:1px solid var(--top-line); padding:12px 20px 10px; position:sticky; top:0; z-index:20;
          backdrop-filter:blur(14px); }
.row1, .row2, .row3 { display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap; }
.row2 { margin-top:8px; } .row3 { margin-top:4px; gap:6px 14px; }
.brand-logo { height:34px; margin-right:14px; }
.app-title { font-size:22.7px; font-weight:600; line-height:1.15; }
.app-sub { color:var(--muted); }
.spacer { flex:1; }
.status { color:var(--muted); margin-left:16px; margin-right:4px; }
/* one fixed width: "Loading …" / "updated 20:53" / "shown from … · updating …" must not re-wrap the top bar */
.row1 .status { flex:none; width:190px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status.err { color:var(--red); }
.caption { color:var(--muted); margin:0 2px 0 6px; }
.period-bar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex:1; margin-left:24px; }
.period-label { color:var(--muted); margin-left:12px; }
.user { color:var(--muted); margin-left:6px; }
.menu { position:relative; }
.menu-list { position:absolute; right:0; top:110%; background:var(--card); border:1px solid var(--border); border-radius:12px;
             padding:6px; min-width:190px; z-index:40; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.menu-list button { display:block; width:100%; text-align:left; background:none; border:none; padding:8px 10px; border-radius:8px; cursor:pointer; }
.menu-list button:hover { background:var(--card2); }
.menu-list .who { padding:6px 10px 8px; color:var(--muted); font-size:12px; border-bottom:1px solid var(--border); margin-bottom:4px; }

/* --- left nav (QFrame#navBar 220 px) + page --- */
.layout { display:flex; min-height:calc(100vh - 110px); }
nav { width:220px; flex:none; background:var(--nav-bg); border-right:1px solid var(--nav-line); padding:16px 10px;
      display:flex; flex-direction:column; position:sticky; top:var(--head,110px); align-self:flex-start;
      height:calc(100vh - var(--head,110px)); overflow-y:auto; }
nav .nav { display:block; width:100%; text-align:left; padding:11px 16px; border:none; border-radius:var(--pill); background:transparent;
           color:var(--muted); font-size:14.7px; cursor:pointer; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
nav .nav:hover { background:var(--card); color:var(--text); }
nav .nav.on { background:var(--nav-on); color:var(--nav-on-text); }
[data-look="glass"] nav .nav.on, [data-look="light"] nav .nav.on, [data-look="business"] nav .nav.on,
[data-look="glassmorphism"] nav .nav.on { font-weight:600; }
nav .nav.later { opacity:.55; }
.hint { margin-top:auto; color:var(--muted); line-height:1.45; white-space:pre-line; padding:10px 6px 0; }
main { flex:1; min-width:0; padding:14px 18px; }
.page-title { font-size:20px; font-weight:600; }
.page-question { color:var(--muted); font-size:14px; margin:2px 0 12px; }
.content { display:flex; flex-direction:column; gap:12px; }
.mnav { display:none; }

/* --- cards and tiles (QFrame#card / #tile) --- */
.card, .tile { background:var(--card); border:1px solid var(--card-line); border-top-color:var(--card-top); border-radius:var(--radius); }
.card { padding:10px 14px 12px; min-width:0; }
.card-head { display:flex; align-items:center; gap:8px; }
.card-title { font-size:14.7px; font-weight:600; flex:1; min-width:0; }
.card-note { color:var(--muted); margin-top:2px; }
.toggles { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:4px; align-items:center; }
.chart-box { position:relative; margin-top:6px; }
.chart-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); pointer-events:none; }
.row { display:flex; gap:12px; align-items:stretch; }
.row > * { flex:1 1 0; min-width:0; }
.grid { display:grid; gap:12px; align-items:start; }
.group { color:var(--muted); font-size:11.3px; font-weight:600; letter-spacing:1px; margin-top:4px; }
.label { font-size:13px; }
.message { color:var(--muted); font-size:17.3px; text-align:center; padding:18vh 20px; }

.tile { display:flex; position:relative; overflow:hidden; }
.tile.click { cursor:pointer; }
.tile.click:hover { background:var(--tile-hover); border-color:var(--tile-hover-line); }
.tile .edge { width:5px; flex:none; background:var(--accent); }
.tile .inner { flex:1; min-width:0; padding:10px 14px; display:flex; flex-direction:column; gap:3px; }
.tile-head { display:flex; align-items:flex-start; gap:8px; }
.tile-name { font-size:16px; font-weight:700; flex:1; min-width:0; }
.badge { border-radius:10px; padding:2px 9px; font-size:11.3px; font-weight:700; white-space:nowrap; border:1px solid; }
.badge.tag { font-weight:600; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent);
             border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.figures { display:flex; gap:18px; }
.figures > div { flex:1; min-width:0; }
.tile-caption { color:var(--muted); font-size:12px; }
.tile-value { font-size:32px; font-weight:600; line-height:1.15; }
.tile-unit { color:var(--muted); font-size:14.7px; margin-left:6px; }
.tile-status, .tile-detail, .tile-note { font-size:13px; }
.tile-detail, .tile-note { color:var(--muted); }
canvas.spark { width:100%; height:34px; display:block; }
.sub { color:var(--muted); font-size:11.3px; }
.glance { display:flex; align-items:center; gap:12px; padding:6px 0; }
.glance + .glance { border-top:1px solid var(--border); }
.glance-name { width:46px; flex:none; font-size:12.7px; font-weight:700; }
.glance-text { flex:none; min-width:110px; }
.glance-big { font-size:29.3px; font-weight:700; line-height:1.1; }
.glance-when { font-size:12px; font-weight:600; }
.glance-avg { color:var(--muted); font-size:11.3px; }
svg.specbar { flex:1; min-width:60px; height:30px; display:block; }

.mix-cells { display:grid; gap:10px; }
.mix-cell { background:var(--card2); border:1px solid var(--border); border-radius:12px; padding:8px 12px; min-width:0; }
.mix-cap { color:var(--muted); font-size:11.3px; font-weight:600; letter-spacing:1px; }
.mix-val { font-size:26.7px; font-weight:700; line-height:1.15; }
.mix-unit { color:var(--muted); font-size:13.3px; margin-left:4px; }
.mix-note { color:var(--muted); font-size:11.3px; }
.mix-heading { font-size:12px; font-weight:600; margin:2px 0 6px; }
.feedbar { height:12px; border-radius:5px; border:1px solid var(--border); background:var(--card2); display:flex; overflow:hidden; }
.feedbar span + span { border-left:2px solid var(--card); }

.alerts { list-style:none; margin:6px 0 0; padding:0; font-size:14.7px; }
.alerts li { padding:6px; border-radius:10px; display:flex; gap:8px; align-items:flex-start; user-select:none; }
.alerts li.open { cursor:pointer; }
.alerts li:hover { background:var(--alert-hover); }
.alerts li.sel { background:rgba(47,111,237,.30); }
.dot { width:10px; height:10px; border-radius:50%; flex:none; margin-top:5px; display:inline-block; }
.rich { line-height:1.7; margin-top:6px; }
.switch { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

table.data { width:100%; border-collapse:collapse; background:var(--card); }
table.data th { background:var(--card2); color:var(--muted); font-weight:600; text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); position:sticky; top:0; }
table.data td { padding:5px 8px; border-bottom:1px solid color-mix(in srgb, var(--border) 50%, transparent); }
table.data tr.open { cursor:pointer; }
table.data tr:hover td { background:var(--card2); }
.table-box { max-height:520px; overflow:auto; margin-top:6px; }

/* --- tooltip (pyqtgraph hover text) --- */
.tip { position:fixed; z-index:90; pointer-events:none; background:var(--legend); color:var(--text); border:1px solid var(--border);
       border-radius:8px; padding:6px 9px; font-size:12px; white-space:pre; box-shadow:0 6px 20px rgba(0,0,0,.3); }

/* --- full-screen chart (FullChart) and windows --- */
.overlay { position:fixed; inset:0; z-index:60; background:var(--window); display:flex; flex-direction:column; padding:16px 24px 20px; }
.overlay .full-head { display:flex; align-items:center; gap:10px; }
.overlay .full-title { font-size:20px; font-weight:600; flex:1; }
.overlay .full-chart { flex:1; position:relative; min-height:200px; margin-top:6px; }
.overlay .period-bar { margin:8px 0 4px; flex:none; }
.dialog-back { position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.dialog { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); width:min(560px,100%); max-height:92vh;
          display:flex; flex-direction:column; padding:16px 18px; gap:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.dialog h3 { margin:0; font-size:17px; }
.dialog > .card-title, .dialog > .muted { flex:none; }

/* --- sample record (record_dialog.py RECORD_STYLE) --- */
.dialog.record { padding:18px 22px 16px; gap:10px; }
.record-head { display:flex; gap:16px; align-items:flex-start; }
.record-head > div:first-child { flex:1; min-width:0; }
.record-code { font-size:26.7px; font-weight:600; }
.record-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; max-width:60%; }
.pill { border:1px solid; border-radius:10px; padding:4px 12px; font-weight:600; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); }
.tab { background:transparent; border:none; border-bottom:2px solid transparent; color:var(--muted); padding:8px 18px; font-size:14px; cursor:pointer; }
.tab.on { color:var(--text); border-bottom-color:#f08a4b; }
.tab-body { flex:1; min-height:0; overflow:auto; background:var(--card); }
.record-tab { display:flex; gap:12px; align-items:flex-start; padding:12px 0; }
.record-details { flex:0 0 auto; width:clamp(330px, 32%, 420px); }
.record-form { display:grid; grid-template-columns:auto 1fr; gap:7px 14px; margin-top:8px; }
.selectable { user-select:text; word-break:break-word; }
.record-tab .table-box { flex:1; min-width:0; margin-top:0; }
.record-tab td:not(:first-child), .record-tab th { white-space:nowrap; }  /* ResizeToContents columns */

/* --- phone (web only: the desktop has no small screens) --- */
@media (max-width:900px) {
  .topbar { padding:10px 12px 8px; position:static; }
  .app-title { font-size:19px; } .brand-logo { height:28px; }
  .row1 .spacer { flex-basis:100%; height:0; }
  .period-bar { margin-left:0; flex-basis:100%; }
  nav { display:none; }
  .mnav { display:flex; gap:6px; overflow-x:auto; padding:8px 12px; border-bottom:1px solid var(--top-line); background:var(--nav-bg); }
  .mnav .nav { flex:none; padding:7px 12px; border-radius:var(--pill); border:1px solid var(--btn-line); background:var(--btn); color:var(--text); cursor:pointer; }
  .mnav .nav.on { background:var(--checked); color:#fff; }
  main { padding:12px; }
  .row { flex-direction:column; }
  .grid { grid-template-columns:1fr !important; }
  .mix-cells { grid-template-columns:repeat(2,1fr) !important; }
  .hint { display:none; }
  .status, .row1 .status { flex-basis:100%; width:auto; margin:4px 0 0; }
  .record-head { flex-direction:column; } .record-right { align-items:flex-start; text-align:left; max-width:none; }
  .record-tab { flex-direction:column; align-items:stretch; } .record-details { width:auto; }
}

/* --- 80 TPH Mill tile (mill_pages.MillTile) --- */
canvas.rangebar { width:100%; height:16px; display:block; margin-top:3px; }
.bar-text { color:var(--muted); font-size:10.7px; text-align:center; }
table.data th { white-space:pre-line; }
table.data td:first-child { white-space:nowrap; }  /* resizeColumnsToContents: the hour / date on one line */

/* --- Benchmarking (bm_pages.py) --- */
.group.big { color:var(--text); font-size:12.7px; letter-spacing:1.5px; }
.rank-row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; align-items:stretch; }
.rank-box { flex:1 1 140px; min-width:130px; border:1px solid; border-radius:10px; padding:6px 10px 8px; display:flex; flex-direction:column; gap:1px; }
.rank-pos { font-weight:700; }
.minibar { height:8px; min-width:40px; border-radius:3px; background:var(--card2); overflow:hidden; align-self:center; width:100%; }
.minibar span { display:block; height:100%; border-radius:3px; }
.minibar.dashed { background:transparent; border:1px dashed; }
.compare-head { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.compare-cap { color:var(--accent); font-weight:700; font-size:12px; }
.compare-grid { display:grid; grid-template-columns:auto auto minmax(40px,1fr) auto auto auto; gap:1px 6px; align-items:center; font-size:12.7px; }
.figure-row { display:flex; align-items:center; gap:8px; }
table.data.nowrap td, table.data.nowrap th { white-space:nowrap; }

/* --- owner's Users window (users.js) --- */
.users-tab { display:flex; flex-direction:column; gap:12px; padding:12px 0; }
.users-add .switch { margin-top:8px; }
.text-input { background:var(--btn); color:var(--text); border:1px solid var(--btn-line); border-radius:10px; padding:7px 10px; min-width:220px; }
.text-input:focus { outline:none; border-color:var(--accent); }
.err-text { color:var(--red); min-height:18px; }
.user-actions { display:flex; gap:4px; flex-wrap:wrap; }
.secret-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.secret-row .muted { min-width:140px; }
.secret { font-family:Consolas, "Courier New", monospace; font-size:17px; background:var(--card2); border:1px solid var(--border);
          border-radius:8px; padding:6px 10px; word-break:break-all; flex:1; }

/* --- the program's tabs (main_window.py QTabWidget) and the page of a non-dashboard tab --- */
.apptabs { display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--top-line); margin:-4px 0 10px; }
.apptabs .tab { font-size:14.7px; padding:7px 16px; }
.workspace { padding:18px 22px 40px; max-width:1500px; }
.work-page .message { padding:12vh 20px; }

/* --- data entry (entry_form.py) --- */
.entry-page { display:flex; gap:14px; align-items:flex-start; }
.entry-list { width:220px; flex:none; padding:8px; position:sticky; top:12px; }
.entry-item { display:block; width:100%; text-align:left; background:transparent; border:none; border-radius:var(--pill);
              padding:9px 12px; color:var(--muted); font-size:14px; cursor:pointer; }
.entry-item:hover { background:var(--card2); color:var(--text); }
.entry-item.on { background:var(--nav-on); color:var(--nav-on-text); font-weight:600; }
.entry-item.child { padding-left:28px; }
.entry-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.entry-sheet { display:flex; flex-direction:column; gap:10px; padding:14px 18px 16px; }
.entry-notice { color:var(--amber); font-weight:700; white-space:pre-line; }
.entry-box { border:1px solid var(--border); border-radius:12px; padding:8px 14px 12px; margin:0; }
.entry-box legend { color:var(--muted); font-weight:600; padding:0 6px; }
.entry-grid { display:grid; grid-template-columns:minmax(150px, 260px) 1fr; gap:7px 14px; align-items:center; }
.entry-inline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.entry-input, .entry-select, .entry-remarks { background:var(--btn); color:var(--text); border:2px solid var(--btn-line);
              border-radius:8px; padding:5px 9px; font:inherit; max-width:220px; width:100%; }
.entry-input.wide, .entry-select { max-width:360px; }
.entry-input.band { max-width:160px; }
.entry-input.calc { background:var(--card2); color:var(--muted); }
.entry-input:focus, .entry-select:focus, .entry-remarks:focus { outline:none; border-color:var(--accent); }
.entry-remarks { max-width:none; height:80px; resize:vertical; }
.band-grid { display:grid; grid-template-columns:auto 160px auto 1fr; gap:6px 10px; align-items:center; }
.band-hint { font-size:12px; }
.entry-warn { color:var(--amber); white-space:pre-line; }
.entry-buttons { display:flex; gap:8px; align-items:center; }
.entry-message { white-space:pre-line; min-height:20px; font-weight:600; }
.entry-legend { display:flex; gap:6px 10px; align-items:center; flex-wrap:wrap; font-size:12.5px; }
.entry-legend .swatch { width:22px; height:14px; border-radius:4px; display:inline-block; border:1px solid; }
.unusual-text { white-space:pre-line; line-height:1.5; }
.shift-banner { position:fixed; right:16px; bottom:16px; z-index:80; background:var(--card); color:var(--text);
                border:2px solid var(--amber); border-radius:12px; padding:12px 14px; max-width:420px; white-space:pre-line;
                box-shadow:0 10px 30px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:8px; }
/* the four colours of the result boxes (LIMIT_COLORS): light looks / dark looks */
.lim-ok { background:#dff3e3 !important; border-color:var(--green) !important; }
.lim-near { background:#fff1d6 !important; border-color:var(--amber) !important; }
.lim-out { background:#fde0e0 !important; border-color:var(--red) !important; }
.lim-invalid { background:#e9edf2 !important; border-color:var(--grey) !important; }
.lim-ok, .lim-near, .lim-out, .lim-invalid { color:#14243a !important; }
[data-look="dark"] .lim-ok, [data-look="oled"] .lim-ok { background:#0f2a1d !important; }
[data-look="dark"] .lim-near, [data-look="oled"] .lim-near { background:#2e230c !important; }
[data-look="dark"] .lim-out, [data-look="oled"] .lim-out { background:#331517 !important; }
[data-look="dark"] .lim-invalid, [data-look="oled"] .lim-invalid { background:#1c2433 !important; }
[data-look="dark"] .lim-ok, [data-look="dark"] .lim-near, [data-look="dark"] .lim-out, [data-look="dark"] .lim-invalid,
[data-look="oled"] .lim-ok, [data-look="oled"] .lim-near, [data-look="oled"] .lim-out, [data-look="oled"] .lim-invalid { color:var(--text) !important; }
:root, [data-look="oled"] { --grey:#8a94a3; } [data-look="dark"] { --grey:#7a8aa3; }
[data-look="glass"], [data-look="glassmorphism"], [data-look="light"] { --grey:#8a9bb0; } [data-look="business"] { --grey:#8a8886; }
@media (max-width:900px) {
  .entry-page { flex-direction:column; } .entry-list { width:auto; position:static; }
  .entry-grid { grid-template-columns:1fr; } .band-grid { grid-template-columns:auto 1fr auto; } .band-hint { grid-column:1 / -1; }
}

.entry-shift .card-head .tabs { border-bottom:none; }
tr.pending-near td { background:color-mix(in srgb, var(--amber) 14%, transparent); }
tr.pending-out td { background:color-mix(in srgb, var(--red) 14%, transparent); }
.later-grid { grid-template-columns:minmax(150px, 240px) 1fr; }

/* Finished Product: the OPC / PCC / BHC bar and a composite's individual samples */
.product-bar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.product-bar .btn.product { min-width:200px; height:42px; font-size:16px; }
.members-list { font-family:Consolas, 'Courier New', monospace; font-size:13px; min-height:120px; max-height:260px; overflow:auto;
                border:1px solid var(--border); border-radius:8px; padding:6px 8px; margin:6px 0; white-space:pre; }
.member-row { display:flex; gap:8px; align-items:center; padding:2px 0; cursor:pointer; }
@media (max-width:900px) { .product-bar .btn.product { min-width:0; flex:1; } }

/* --- Review (review_page.py) --- */
.review-banner { text-align:center; font-weight:700; padding:8px 12px; border-radius:12px; margin-bottom:12px;
                 background:var(--card); border:1px solid var(--border); color:var(--green); }
.review-banner.pending { color:var(--amber); border-color:var(--amber); }
.review-page { display:grid; grid-template-columns:minmax(0, 3fr) minmax(300px, 2fr); gap:14px; align-items:start; }
.review-filters { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-bottom:8px; }
.review-filters .entry-select, .review-filters .entry-input { width:auto; max-width:220px; }
.review-page tr.sel td { background:var(--nav-on); color:var(--nav-on-text); }
.review-fields { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:8px 0; }
.review-fields b { color:var(--muted); font-weight:600; }
.review-out { color:var(--red); }
.review-actions { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.review-actions > div { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.btn:disabled { opacity:.45; cursor:default; }
.reason-box { width:100%; min-height:110px; }
@media (max-width:900px) { .review-page { grid-template-columns:1fr; } }

/* --- Admin (admin_page.py, brands_page.py, parameters_page.py, database_page.py) --- */
.admin-tabs { margin-bottom:12px; }
.admin-intro { margin:4px 0 10px; line-height:1.45; }
.admin-card tr.sel td, .admin-body tr.sel td { background:var(--nav-on); color:var(--nav-on-text); }
.btn.danger { border-color:var(--red); color:var(--red); }
label.check { display:flex; gap:8px; align-items:center; }
.admin-two { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:14px; align-items:start; }
.brand-swatch { display:inline-block; width:44px; height:12px; border-radius:3px; vertical-align:middle; }
@media (max-width:900px) { .admin-two { grid-template-columns:1fr; } }
.admin-groups .btn.product { min-width:110px; height:38px; font-size:14px; }
.params-box { max-height:60vh; overflow:auto; }
.formula-cell { white-space:pre-line; min-width:260px; }
.band-edit { display:grid; grid-template-columns:auto repeat(3, minmax(70px, 1fr)); gap:6px 8px; align-items:center; }
.band-edit .entry-input { max-width:none; }
.db-list { width:260px; max-height:70vh; overflow:auto; }
.db-head { font-size:12px; font-weight:700; padding:10px 12px 4px; }
.db-box { max-height:62vh; overflow:auto; margin:8px 0; }
.db-grid td { white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis; }
/* dashboard: the previous page while a newly chosen section / page is being built (dash.js load) */
#content.stale { opacity:.35; pointer-events:none; transition:opacity .15s; }