/* Dark theme + overrides for Materialize (which ships light-only). This is the single
   stylesheet on top of materialize.min.css; there are no per-page CSS files. */

:root {
  --mz-bg: #0a0d12;
  --mz-surface: #11161d;
  --mz-surface-2: #161c25;
  --mz-line: #232c38;
  --mz-ink: #e6edf3;
  --mz-muted: #8b98a5;
  --mz-mono: #c6d2dd;
  --mz-accent: #00C2CB;
  --mz-accent-2: #0096A6;
  --mz-danger: #ff6b6b;
  color-scheme: dark;
}

/* Light theme: same rules, light variable values (Materialize's native look). Toggled by
   adding `light` to <html>; persisted in localStorage by nav.js. */
html.light {
  --mz-bg: #eef1f5;
  --mz-surface: #ffffff;
  --mz-surface-2: #f3f5f8;
  --mz-line: #d7dce2;
  --mz-ink: #141a22;
  --mz-muted: #5b6673;
  --mz-mono: #3d4854;
  --mz-accent: #008fa0;
  --mz-accent-2: #00707d;
  --mz-danger: #d64545;
  color-scheme: light;
}
html.light .sidenav li > a.active,
html.light .seg-btn.active { background: #e0f4f6; color: #087f8a; }
html.light nav .tabs.tabs-transparent .tab a.active { color: #087f8a; }
html.light table.highlight > tbody > tr:hover { background: #eef2f7; }
html.light body.login { background: radial-gradient(circle at 50% 20%, #dfe8f5 0, #eef1f5 60%); }
html.light .report-view strong { color: #111; }

/* Brand lockup (blazeteleradio). Palette lives in /brand/brand-tokens.css (--blaze-*). */
nav .brand-logo { display: inline-flex; align-items: center; gap: 9px; height: 100%; font-size: 18px; font-weight: 700; white-space: nowrap; }
nav .brand-logo:hover { opacity: .92; }
.brand-mark { height: 30px; width: 30px; display: block; border-radius: 8px; }
.brand-word { font-weight: 700; letter-spacing: -.01em; }
.bn-blaze { color: var(--mz-ink); font-weight: 800; }
.bn-tele { color: var(--blaze-teal, #0096A6); font-weight: 500; }
.brand-page { color: var(--mz-muted); font-weight: 500; font-size: 13px; }
.brand-page::before { content: '·'; margin: 0 7px; }

body { background: var(--mz-bg); color: var(--mz-ink); font-weight: 400; }
/* Materialize ships body font-weight 300, which reads as very thin on the light theme's white
   surfaces; nudge it up so body copy, table cells and labels have normal presence. */
html.light body { font-weight: 500; }
[hidden] { display: none !important; }

/* Scale the whole UI down ~15% (Material defaults are larger than the previous design).
   Full-height pages divide by this (see viewer.css) so `zoom` does not leave a gap at the
   bottom: a 100vh box under zoom:0.85 renders 85% tall, hence height: calc(100vh / zoom). */
:root { --ui-zoom: 0.85; }
body { zoom: var(--ui-zoom); }

/* Icons take their colour from the surrounding text. Materialize hard-codes
   `.sidenav li>a>i.material-icons{color:rgba(0,0,0,.54)}` and `.material-icons{color:#444}`,
   which beat a plain `.material-icons` rule — hence the specific selectors + !important. */
.material-icons { color: inherit; }
.sidenav li > a > i.material-icons,
nav .material-icons,
.nav-wrapper .material-icons,
.btn .material-icons,
.btn-flat .material-icons,
.acct-menu .material-icons { color: inherit !important; }

h1, h2, h3, h4, h5, h6 { color: var(--mz-ink); }
/* Materialize ships `.card .card-title { font-weight: 300 }`, which renders headings in
   cards (e.g. "Users") too thin. Restore a normal heading weight. */
.card .card-title { font-weight: 600; }
a { color: var(--mz-accent); }
.container { width: 95%; max-width: none; }
.grey-text { color: var(--mz-muted) !important; }
.card { background: var(--mz-surface); }
.card .card-content { color: var(--mz-ink); }
.divider { background-color: var(--mz-line); }

/* Navbar */
nav { background: var(--mz-surface); }
nav.nav-extended { background: var(--mz-surface); box-shadow: none; border-bottom: 1px solid var(--mz-line); }
nav .brand-logo { color: var(--mz-ink); font-weight: 700; }
nav .brand-logo, nav ul a { color: var(--mz-ink); }
nav ul a:hover { background: var(--mz-surface-2); }
nav .sidenav-trigger { color: var(--mz-ink); }
nav .tabs.tabs-transparent { background: transparent; }
nav .tabs.tabs-transparent .tab a { color: var(--mz-muted); }
nav .tabs.tabs-transparent .tab a.active { color: #5fdbe4; }
nav .tabs .indicator { background-color: var(--mz-accent); }

/* Side nav + dropdown */
.sidenav { background: var(--mz-surface); }
.sidenav li > a { color: var(--mz-ink); }
.sidenav li > a:hover { background: var(--mz-surface-2); }
.sidenav li > a.active { background: #0c2b30; color: #5fdbe4; }
/* Brand feature icons in the sidenav, themed via a mask so they take the link's colour. */
.sidenav .nav-brand-ic {
  display: inline-block; width: 24px; height: 24px; margin-right: 24px; vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
.dropdown-content { background: var(--mz-surface); border: 1px solid var(--mz-line); }
.dropdown-content li > a, .dropdown-content li > span { color: var(--mz-ink); }
.dropdown-content li:hover, .dropdown-content li.active { background: var(--mz-surface-2); }

/* Profile menu: a plain anchored dropdown, so its position stays correct under body{zoom}
   (Materialize's Dropdown computes pixel offsets and drifts when zoomed). */
.acct-holder { position: relative; }
.acct-menu {
  position: absolute; right: 0; top: 100%; margin-top: 4px; min-width: 190px; padding: 6px 0;
  background: var(--mz-surface); border: 1px solid var(--mz-line); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); display: none; z-index: 40;
}
.acct-menu.open { display: block; }
.acct-menu li > a { display: block; padding: 8px 16px; color: var(--mz-ink); font-size: 13px; }
.acct-menu li > a:hover { background: var(--mz-surface-2); }
.acct-menu .sep { height: 1px; background: var(--mz-line); margin: 6px 0; }

/* Theme toggle button, sitting beside the profile icon in the navbar */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 12px;
  background: transparent; border: none; cursor: pointer; color: var(--mz-ink);
}
.theme-toggle:hover { background: var(--mz-surface-2); }
.theme-toggle i { color: var(--mz-ink) !important; }

/* Search box shown on the admin tables (users / gateways / customers) */
.table-search { margin: 6px 0 10px; max-width: 320px; }
.table-search .input-field { margin: 0; }
.table-search input { margin-bottom: 0; }

/* Floating action button (viewer patient record) + its count badge */
.fixed-action-btn { z-index: 20; }
.fab-count {
  position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--mz-accent-2); color: #fff; font-size: 10px; line-height: 18px;
  text-align: center;
}
.fixed-action-btn ul li { position: relative; }

/* Report + image split (half report, half scrolling image canvas). Height divides by the
   UI zoom so the two panes fill the viewport with no gap at the bottom. */
.report-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px;
  height: calc(100vh / var(--ui-zoom, 1)); box-sizing: border-box; min-height: 0;
}
/* On the report page, let header + split fill the viewport exactly (no gap, no overflow). */
body.report-page { display: flex; flex-direction: column; height: calc(100vh / var(--ui-zoom, 1)); overflow: hidden; }
body.report-page header { flex: 0 0 auto; }
body.report-page .report-split { flex: 1 1 auto; height: auto; }
.report-pane { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.report-pane > .row, .report-pane > #status { flex: 0 0 auto; }
.report-pane > .card { margin: 0; }
/* The rendered latest report stays bounded; the editor fills the rest to the bottom. */
.report-pane > .card:not(#editorCard) { flex: 0 1 auto; max-height: 42vh; overflow: auto; }
#editorCard { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#editorCard .card-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#editorCard .rpt-input { flex: 1 1 auto; min-height: 140px; resize: none; }
/* Quill's container must grow with the card so the writing area fills the pane. */
#editorCard .ql-container { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 160px; }
#editorCard .ql-editor { flex: 1 1 auto; }
#editorCard .rpt-actions { flex: 0 0 auto; }
#editorCard .rpt-preview { flex: 1 1 auto; min-height: 140px; overflow: auto; }
.image-pane {
  display: grid; grid-template-rows: 1fr auto; min-height: 0; overflow: hidden;
  background: #000; border: 1px solid var(--mz-line); border-radius: 8px;
}
.image-stage { position: relative; min-height: 0; display: grid; place-items: center; background: #000; overflow: hidden; }
.image-stage canvas { max-width: 100%; max-height: 100%; display: block; }
.image-hint { position: absolute; color: #6b7684; font-size: 12px; }
.image-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--mz-surface); border-top: 1px solid var(--mz-line); }
.image-bar input[type=range] { flex: 1; accent-color: var(--mz-accent); }
@media (max-width: 900px) {
  .report-split { grid-template-columns: 1fr; height: auto; }
  .image-pane { height: 60vh; }
}

/* Modals used by the viewer FAB */
.modal .hist-list { max-height: 46vh; overflow: auto; }
.hist-note { font-size: 12px; color: var(--mz-ink); margin: 3px 0; }
.hist-size { color: var(--mz-muted); font-size: 10px; font-family: var(--font-mono, monospace); margin-left: 6px; }
.hist-body a { color: var(--mz-accent); text-decoration: none; }
.hist-body a:hover { text-decoration: underline; }
#attachModal .hist-add input[type="text"] {
  background: var(--mz-surface-2); border: 1px solid var(--mz-line); border-radius: 6px;
  color: var(--mz-ink); padding: 8px 10px; margin-bottom: 6px; height: 38px;
}

/* Patient facts block inside the history modal */
.patient-facts { margin: 4px 0 12px; border: 1px solid var(--mz-line); border-radius: 8px; padding: 8px 12px; }
.pf-row { display: flex; gap: 12px; padding: 3px 0; font-size: 13px; }
.pf-key { flex: 0 0 120px; color: var(--mz-muted); }
.pf-val { color: var(--mz-ink); }

/* Buttons */
.btn, .btn-large, .btn-small { background: var(--mz-accent-2); }
.btn:hover, .btn-large:hover, .btn-small:hover { background: var(--mz-accent); }
.btn-flat { color: var(--mz-ink); }
.btn-flat:hover { background: var(--mz-surface-2); }
.btn:disabled, .btn-flat:disabled { opacity: .4; }

/* Tables */
table.highlight > tbody > tr:hover { background: #131a23; }
table thead th { color: var(--mz-muted); }
table tr { border-bottom: 1px solid var(--mz-line); }
table.striped > tbody > tr:nth-child(odd) { background: var(--mz-surface-2); }

/* Wide tables (the worklist has 11 columns) scroll horizontally instead of being clipped,
   and stay inside the card. Rows never wrap mid-cell, so columns keep their meaning. */
.table-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; }
.table-scroll table { min-width: 900px; margin: 0; }
.table-scroll thead th { white-space: nowrap; }
.table-scroll td { white-space: nowrap; }
.table-scroll td.desc { white-space: normal; max-width: 220px; }
@media (max-width: 720px) { .table-scroll table { min-width: 720px; } }

/* Per-column header filters */
.filter-head th { padding: 6px 8px; }
.col-filter {
  width: 100%; min-width: 70px; padding: 5px 7px; margin: 0;
  background: var(--mz-surface-2); border: 1px solid var(--mz-line); border-radius: 6px;
  color: var(--mz-ink); font-size: 12px; height: 30px;
}
.col-filter:focus { outline: none; border-color: var(--mz-accent); }
/* Plain (non-filter) column header, aligned with the filter inputs beside it. */
.filter-head th.th-plain { color: var(--mz-muted); font-size: 12px; vertical-align: middle; }

/* Secondary line under the description: the referring physician. */
td.desc .ref { display: block; margin-top: 2px; color: var(--mz-muted); font-size: 11.5px; }
td.center { color: var(--mz-muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* Materialize ships `::placeholder { color: #d1d1d1 }`, which is invisible on the light
   theme's surfaces (e.g. the worklist column-filter placeholders). Use the theme muted
   colour so placeholders stay readable in both themes. */
input::placeholder, textarea::placeholder { color: var(--mz-muted); opacity: 1; }

/* Native select + its option list, everywhere (create-user/customer, filters, tenant pickers).
   Without this the control is white with white text in the dark theme. */
select, select.browser-default, .tenant-select, .assign-select, select.status-select {
  background-color: var(--mz-surface-2); color: var(--mz-ink);
  border: 1px solid var(--mz-line); border-radius: 6px;
}
/* Materialize ships `select { display: none }` because its JS select widget is meant to
   replace the native control. This app uses native selects everywhere and never initialises
   that widget, so selects without the `browser-default` class — e.g. the worklist assign and
   status dropdowns, the gateway customer picker, the viewer preset picker — were rendering
   invisible (0x0). Show them all. */
select { display: block; }
/* Inline selects inside table rows should hug their content instead of filling the cell. */
.assign-select, select.status-select, .tenant-select { display: inline-block; width: auto; }
select option { background-color: var(--mz-surface); color: var(--mz-ink); }
select.browser-default { height: 30px; }
.select-wrapper input.select-dropdown { color: var(--mz-ink); }
/* Materialize select widget (customer pickers): the widget hides the native control itself, but the
   `select { display: block }` override above would show it too, so re-hide it inside the wrapper. */
.select-wrapper select { display: none; }
/* Only the closed control (an <input>) — NOT `ul.dropdown-content.select-dropdown`, which shares the
   `select-dropdown` class and would otherwise inherit a fixed height and clip the option list. */
.select-wrapper input.select-dropdown {
  color: var(--mz-ink); border-bottom: 1px solid var(--mz-line); font-weight: 500;
}
.select-wrapper input.select-dropdown:focus { border-bottom-color: var(--mz-accent); }
.select-wrapper span.caret { color: var(--mz-muted); border-top-color: var(--mz-muted); }
/* The option list: solid surface, room to breathe, and never clipped. */
.select-wrapper ul.dropdown-content {
  background: var(--mz-surface); border: 1px solid var(--mz-line); border-radius: 6px;
  min-width: 100%; max-height: 320px; overflow-y: auto;
}
.select-wrapper ul.dropdown-content li { min-height: 0; }
.select-wrapper ul.dropdown-content li > span { color: var(--mz-ink); padding: 12px 16px; }
.select-wrapper ul.dropdown-content li.active > span { background: var(--mz-surface-2); color: var(--mz-accent); }
.select-wrapper ul.dropdown-content li:hover > span { background: var(--mz-surface-2); }

/* Cells */
td.mono { font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--mz-mono); }
td.name { font-weight: 600; }
td.desc { color: var(--mz-muted); max-width: 240px; }
td.row-actions { white-space: nowrap; text-align: right; }
td .muted { color: var(--mz-muted); }
/* Icon-only row actions (viewer / download). */
a.row-icon {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 30px; height: 30px; margin-right: 4px; border-radius: 6px;
  color: var(--mz-accent); text-decoration: none; border: 1px solid transparent;
}
a.row-icon .material-icons { font-size: 19px; }
a.row-icon:hover { background: rgba(0, 194, 203, .12); border-color: var(--mz-line); }

/* Chips: modality + status + assignee */
.tag, .assignee, .wf-status {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--mz-line); font-family: var(--font-mono, monospace);
  font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.tag { color: #5fdbe4; border-color: #134e54; background: #0c2b30; }
.assignee { color: #c9a7ff; border-color: #3f2f5f; background: #1e1630; }
.wf-received { color: #8b98a5; border-color: #2b3542; background: #141a22; }
.wf-in-progress { color: #5fdbe4; border-color: #134e54; background: #0c2b30; }
.wf-ready { color: #7fe3d4; border-color: #1f4f49; background: #0f2a27; }
.wf-review { color: #f0c674; border-color: #4f431f; background: #2a2410; }
.wf-done { color: #7fe3a1; border-color: #1f4f32; background: #0f2a1c; }
.wf-published { color: #c9a7ff; border-color: #3f2f5f; background: #1e1630; }
/* Chips/badges on the light theme: the dark colours above are unreadable/wrong on white. */
html.light .tag { color: #087f8a; border-color: #b3e3e8; background: #e0f4f6; }
html.light .assignee { color: #6d28d9; border-color: #ddd0fb; background: #f1e9fd; }
html.light .wf-received { color: #47515c; border-color: #d7dce2; background: #f3f5f8; }
html.light .wf-in-progress { color: #087f8a; border-color: #b3e3e8; background: #e0f4f6; }
html.light .wf-ready { color: #0f766e; border-color: #a7ded8; background: #e0f5f3; }
html.light .wf-review { color: #b45309; border-color: #f4d79a; background: #fdf3e0; }
html.light .wf-done { color: #15803d; border-color: #a7e0bd; background: #e3f6ea; }
html.light .wf-published { color: #6d28d9; border-color: #ddd0fb; background: #f1e9fd; }
select.status-select {
  background: var(--mz-surface-2); border: 1px solid var(--mz-line); border-radius: 999px;
  padding: 2px 8px; color: var(--mz-ink); font-size: 11px; height: 28px;
}

/* Row action buttons: assign/reassign and delete are icon-only to save horizontal space. */
button.row-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 30px; height: 30px; margin-right: 4px; padding: 0; border-radius: 6px;
  background: transparent; border: 1px solid transparent; color: var(--mz-accent); cursor: pointer;
}
button.row-icon-btn .material-icons { font-size: 19px; }
button.row-icon-btn:hover { background: rgba(0, 194, 203, .12); border-color: var(--mz-line); }
button.row-icon-btn.delete-study { color: var(--mz-danger); }
button.row-icon-btn.delete-study:hover { background: rgba(255,107,107,.12); border-color: var(--mz-danger); }

/* Patient details + history panel (the viewer FAB modal, reused on the worklist row) */
.pf-edit {
  margin: 4px 0 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--mz-line); border-radius: 8px; background: var(--mz-surface-2);
}
.pf-field { display: flex; align-items: center; gap: 10px; margin: 0; }
.pf-field span { flex: 0 0 120px; color: var(--mz-muted); font-size: 13px; }
.pf-field input, .pf-field select { flex: 1; color: var(--mz-ink); }
.pf-static { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.pf-static .pf-key { flex: 0 0 120px; }
.pf-actions { display: flex; gap: 8px; }
.pf-edit-toggle { margin: 0 0 12px; }
.hist-list { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow: auto; }
.hist-item { padding: 6px 0; border-top: 1px solid var(--mz-line); }
.hist-item:first-child { border-top: none; }
.hist-body { font-size: 12px; color: var(--mz-ink); word-break: break-word; white-space: pre-wrap; }
.hist-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--mz-muted); font-family: var(--font-mono, monospace);
}
.hist-del {
  margin-left: auto; padding: 0 6px; line-height: 16px; font-size: 12px; cursor: pointer;
  background: transparent; border: 1px solid var(--mz-line); border-radius: 4px; color: var(--mz-muted);
}
.hist-del:hover { color: var(--mz-danger); border-color: var(--mz-danger); }
.hist-add { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.wf-note {
  width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 6px 8px; resize: vertical;
  background: var(--mz-surface-2); border: 1px solid var(--mz-line); border-radius: 6px;
  color: var(--mz-ink); font-size: 12px; font-family: inherit;
}
.wf-note:focus { outline: none; border-color: var(--mz-accent); }
.wf-empty { color: var(--mz-muted); font-size: 11px; padding: 6px 0; list-style: none; }
.hist-add .btn { align-self: flex-start; }
.assign-cancel, .restore-study {
  border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--mz-line);
  background: transparent; color: var(--mz-ink);
}
.assign-cancel:hover { border-color: var(--mz-accent); }
.restore-study { background: var(--mz-accent-2); border-color: var(--mz-accent-2); color: #fff; }
.assign-select { background: var(--mz-surface-2); color: var(--mz-ink); border: 1px solid var(--mz-accent);
  border-radius: 6px; padding: 4px 6px; font-size: 12px; }

/* Upload / deleted panels */
#dropOverlay h4 { color: var(--mz-ink); }
.collection-item { background: var(--mz-surface) !important; border-bottom: 1px solid var(--mz-line) !important; color: var(--mz-ink); }
.upload-item { border-left: 3px solid var(--mz-line); }
.upload-item.valid { border-left-color: #37d67a; }
.upload-item.invalid, .upload-item.error { border-left-color: var(--mz-danger); }
.upload-item.done { border-left-color: var(--mz-accent); }
.ui-top { display: flex; justify-content: space-between; gap: 10px; }
.ui-name { font-family: var(--font-mono, monospace); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.ui-status { color: var(--mz-muted); font-size: 11px; text-transform: uppercase; }
.ui-meta { color: var(--mz-muted); font-size: 11px; margin-top: 4px; }
.progress { background: var(--mz-surface-2); }

/* Status line */
#status { color: var(--mz-muted); font-size: 13px; }
#status.error { color: var(--mz-danger); }

/* Login card layout */
body.login { min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 20%, #122033 0, #0a0d12 60%); }
.login-wrap { width: min(380px, 92vw); }
.login-wrap .card { margin: 0; border-radius: 12px; }
.login-wrap .card-title { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: normal; }
.login-logo { height: 42px; width: 42px; display: block; border-radius: 11px; }
.brand-lockup { font-size: 25px; letter-spacing: -.01em; }
.brand-lockup .bn-blaze { color: var(--mz-ink); font-weight: 800; }
.brand-lockup .bn-tele { color: var(--blaze-teal, #0096A6); font-weight: 500; }
.login-tagline { margin: 8px 0 14px; color: var(--mz-muted); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.brand-dot { width: 9px; height: 9px; border-radius: 50%; background: #37d67a; box-shadow: 0 0 0 4px rgba(55,214,122,.15); }
.login-wrap .message { min-height: 18px; margin: 0 0 6px; color: var(--mz-muted); font-size: 13px; }
.login-wrap .message.error { color: var(--mz-danger); }
.login-wrap .btn.full-width { width: 100%; margin-top: 8px; }
.login-wrap .hint { margin: 16px 0 0; color: var(--mz-muted); font-size: 13px; text-align: center; }
.input-field input, .input-field textarea, input:not([type]), textarea { color: var(--mz-ink); }
/* User-entry fields are boxed (like the password/textarea fields) so they are clearly visible on
   both themes — the bare Materialize underline alone is easy to miss. Checkboxes/radios excluded. */
.input-field input:not([type=checkbox]):not([type=radio]):not([type=range]),
.input-field textarea {
  background: var(--mz-surface-2); border: 1px solid var(--mz-line); border-radius: 8px;
  padding: 9px 11px; box-sizing: border-box;
}
.input-field input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
.input-field textarea:focus {
  border-color: var(--mz-accent); box-shadow: none !important; outline: none;
}
/* Labels read as too thin at Materialize's weight; give them weight, and align them inside the
   boxed field with the text. Every field behaves the same (nav.js toggles `active`): the label
   sits inside the box until focused/filled, then lifts to a small notch on the top border. */
.input-field > label { color: var(--mz-muted); font-weight: 500; left: 12px; }
.input-field > label:not(.label-icon).active {
  transform: translateY(-11px) scale(0.84);
  transform-origin: 0 0;
  color: var(--mz-muted); font-weight: 600;
  background: var(--mz-surface); padding: 0 6px; border-radius: 5px; left: 9px;
}
.input-field input:focus ~ label.active,
.input-field textarea:focus ~ label.active { color: var(--mz-accent); }
.mono { font-family: var(--font-mono, monospace); }

/* Analytics */
.seg { display: flex; gap: 4px; }
.seg-btn { background: transparent; border: 1px solid var(--mz-line); color: var(--mz-muted); border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; }
.seg-btn.active { background: #0c2b30; border-color: #134e54; color: #5fdbe4; }
.totals { display: flex; gap: 40px; padding: 10px 0; }
.stat { display: flex; flex-direction: column; }
.stat-num { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 12px; color: var(--mz-muted); text-transform: uppercase; letter-spacing: .05em; }
.chart { display: grid; gap: 8px; padding-top: 8px; }
.bar-row { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; }
.bar-label { color: var(--mz-muted); font-family: var(--font-mono, monospace); }
.bar-track { background: var(--mz-surface-2); border-radius: 6px; height: 16px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--mz-accent-2), var(--mz-accent)); border-radius: 6px; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; }
.empty { color: var(--mz-muted); font-size: 13px; }

/* Report */
.report-view { font-size: 14px; padding: 6px 0; line-height: 1.5; }
.report-view p { margin: 6px 0; }
.report-view ul, .report-view ol { margin: 6px 0; padding-left: 24px; }
.report-view ul ul, .report-view ul ol, .report-view ol ul, .report-view ol ol { margin: 2px 0; }
.report-view li { margin: 2px 0; }
/* Materialize ships `ul:not(.browser-default){list-style-type:none}`, which hides report bullets.
   Restore the markers (disc -> circle -> square as lists nest). */
.report-view ul, .report-view ul > li { list-style-type: disc; }
.report-view ul ul, .report-view ul ul > li { list-style-type: circle; }
.report-view ul ul ul, .report-view ul ul ul > li { list-style-type: square; }
.report-view strong { color: #fff; }
.report-view h1 { font-size: 21px; margin: 11px 0 6px; }
.report-view h2 { font-size: 18px; margin: 10px 0 5px; }
.report-view h3 { font-size: 16px; margin: 9px 0 4px; }
.report-view h4 { font-size: 14.5px; margin: 8px 0 4px; }
.report-view h5, .report-view h6 { font-size: 14px; margin: 7px 0 4px; }
/* Inline size markers ( [size=small] / [size=large] / [size=xl] ) — legacy Markdown bodies. */
.rt-sm { font-size: 0.85em; }
.rt-lg { font-size: 1.3em; }
.rt-xl { font-size: 1.7em; }
/* Rich-HTML sizes/indents as produced by the Quill editor (also used on the share page). */
.ql-size-small { font-size: 0.75em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge { font-size: 2.5em; }
.ql-indent-1 { padding-left: 3em; }
.ql-indent-2 { padding-left: 6em; }
.ql-indent-3 { padding-left: 9em; }
.ql-indent-4 { padding-left: 12em; }
.ql-indent-5 { padding-left: 15em; }
.ql-indent-6 { padding-left: 18em; }
.ql-indent-7 { padding-left: 21em; }
.ql-indent-8 { padding-left: 24em; }
.rpt-meta { margin-top: 8px; font-size: 12px; color: var(--mz-muted); font-family: var(--font-mono, monospace); }
.rpt-actions { display: flex; gap: 8px; margin-top: 10px; }
.rpt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.rpt-row #templateSelect { width: auto; min-width: 180px; }
.rpt-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--mz-muted); font-size: 12px; user-select: none; }
.rpt-toggle input { accent-color: var(--mz-accent); }
.rpt-shared { color: var(--mz-muted); font-size: 12px; }
.rpt-versions { padding-top: 10px; }
.rpt-version { display: flex; justify-content: space-between; font-size: 12px; color: var(--mz-muted); font-family: var(--font-mono, monospace); padding: 3px 0; border-top: 1px solid var(--mz-line); }

/* Report audit trail: collapsed by default (<details> with no `open`), one row per version. */
.rpt-audit { margin-top: 10px; border-top: 1px solid var(--mz-line); }
.rpt-audit > summary {
  display: flex; align-items: center; gap: 6px; padding: 8px 0 6px; cursor: pointer;
  color: var(--mz-muted); font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; list-style: none; user-select: none;
}
.rpt-audit > summary::-webkit-details-marker { display: none; }
.rpt-audit > summary:hover { color: var(--mz-ink); }
.rpt-audit > summary .material-icons { font-size: 16px; }
.rpt-audit > summary .badge { margin-left: 2px; padding: 0 7px; font-size: 11px; }
.rpt-audit-caret { margin-left: auto; transition: transform .15s ease; }
.rpt-audit[open] .rpt-audit-caret { transform: rotate(180deg); }
.rpt-audit .rpt-versions { max-height: 220px; overflow-y: auto; }
.rpt-audit .rpt-version:first-child { border-top: none; }

/* Focus mode: the editor takes the whole screen, the image canvas and rendered report hide. */
body.report-focus .report-split { grid-template-columns: 1fr; }
body.report-focus .image-pane { display: none; }
body.report-focus .report-pane > .card:not(#editorCard) { display: none; }
body.report-focus #editorCard .ql-editor { min-height: 100%; }

/* Admin: badges, states, roles, stat row */
.badge { background: var(--mz-surface-2); color: var(--mz-ink); border: 1px solid var(--mz-line); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; }
.state { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--mz-line); white-space: nowrap; }
.state.on, .state.active { color: #7fe3a1; border-color: #1f4f32; background: #0f2a1c; }
.state.off, .state.offline, .state.failing { color: var(--mz-danger); border-color: rgba(255,107,107,.4); background: transparent; }
.state.stale { color: #f0c674; border-color: #4f431f; background: #2a2410; }
.warn { color: #f0c674; }
/* State badges on the light theme. */
html.light .state.on, html.light .state.active { color: #15803d; border-color: #a7e0bd; background: #e3f6ea; }
html.light .state.off, html.light .state.offline, html.light .state.failing { color: #b91c1c; border-color: #f2b8b8; background: #fdeaea; }
html.light .state.stale { color: #b45309; border-color: #f4d79a; background: #fdf3e0; }
html.light .warn { color: #b45309; }
.stat-row { display: flex; gap: 40px; padding: 8px 0; }
.roles { border: 1px solid var(--mz-line); border-radius: 8px; padding: 10px 14px; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 2px 20px; }
.roles legend { color: var(--mz-muted); font-size: 13px; padding: 0 6px; }
.roles label { display: inline-flex; align-items: center; color: var(--mz-ink) !important; font-size: 14px; }
/* Multiselect customer picker (admin create/edit user) */
.tenant-field { margin: 4px 0 12px; }
.ms-select { position: relative; }
.ms-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px;
  text-align: left; cursor: pointer; font-size: 13px; font-family: inherit;
  background: var(--mz-surface-2); color: var(--mz-ink);
  border: 1px solid var(--mz-line); border-radius: 6px;
}
.ms-trigger:hover, .ms-select.open .ms-trigger { border-color: var(--mz-accent); }
/* Materialize turns any focused button teal (button:focus); keep the trigger neutral. */
.ms-trigger:focus { background: var(--mz-surface-2); color: var(--mz-ink); }
.ms-trigger:focus-visible { outline: 2px solid var(--mz-accent); outline-offset: 1px; }
.ms-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-caret { font-size: 20px !important; color: var(--mz-muted); }
.ms-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  display: none; max-height: 220px; overflow-y: auto; padding: 6px 0;
  background: var(--mz-surface); border: 1px solid var(--mz-line); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.ms-select.open .ms-panel { display: block; }
/* Near the bottom of the window the list opens upwards instead of off-screen. */
.ms-select.drop-up .ms-panel { top: auto; bottom: calc(100% + 4px); }
.ms-option {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  cursor: pointer; font-size: 13px; color: var(--mz-ink);
}
.ms-option:hover { background: var(--mz-surface-2); }
.ms-empty { margin: 0; padding: 8px 12px; color: var(--mz-muted); font-size: 12px; }
.sig-field { margin: 12px 0 4px; }
.sig-label { display: block; color: var(--mz-muted); font-size: 13px; margin-bottom: 6px; }
.sig-preview {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px;
  padding: 6px 12px; margin-bottom: 8px; border: 1px dashed var(--mz-line); border-radius: 8px;
  background: var(--mz-surface-2);
}
.sig-preview img { display: block; max-height: 56px; max-width: 220px; }
.sig-hint { color: var(--mz-muted); font-size: 12px; margin: 0 0 8px; }
.sig-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
td.actions button, td.row-actions button {
  background: transparent; border: 1px solid var(--mz-line); color: var(--mz-ink);
  border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 500; cursor: pointer; margin-left: 4px;
}
td.actions button:hover, td.row-actions button:hover { border-color: var(--mz-accent); }
td.actions button.danger, td.row-actions button.danger { color: var(--mz-danger); border-color: rgba(255,107,107,.4); }
td.actions button.danger:hover, td.row-actions button.danger:hover { background: rgba(255,107,107,.12); }
.tenant-select { background: var(--mz-surface-2); color: var(--mz-ink); border: 1px solid var(--mz-line); border-radius: 6px; padding: 2px 6px; font-size: 12px; height: 30px; }
.seg-tabs { display: flex; gap: 8px; }
/* Admin page-level tabs (Users / Gateway nodes / Customers) are larger than the analytics pills. */
#adminTabs .seg-btn { padding: 8px 20px; font-size: 14px; font-weight: 500; }

/* Materialize modal tweaks for dark theme */
.modal { background: var(--mz-surface); max-height: 88%; }
.modal .modal-content { color: var(--mz-ink); }
.modal .modal-footer { background: var(--mz-surface); border-top: 1px solid var(--mz-line); }
.modal .modal-footer .btn-flat { color: var(--mz-ink); }

/* ---------------------------------------------- Report templates page */
.tpl-list { display: flex; flex-direction: column; gap: 10px; }
.tpl-item { border: 1px solid var(--mz-line); border-radius: 8px; padding: 10px 12px; background: var(--mz-surface-2); }
.tpl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpl-actions { margin-left: auto; display: inline-flex; gap: 4px; }
.tpl-badge { text-transform: none; }
.tpl-body { margin: 8px 0 0; word-break: break-word; max-height: 200px; overflow: auto; }
.tpl-share { display: flex; align-items: center; gap: 8px; color: var(--mz-ink); font-size: 14px; margin: 4px 0 10px; }
.tpl-label { display: block; color: var(--mz-muted); font-size: 13px; font-weight: 500; margin: 10px 0 4px; }
.tpl-textarea {
  width: 100%; min-height: 180px; background: var(--mz-surface-2); border: 1px solid var(--mz-line);
  border-radius: 8px; padding: 10px; color: var(--mz-ink);
  font-family: var(--font-mono, monospace); font-size: 12.5px; resize: vertical;
}
.tpl-textarea:focus { outline: none; border-color: var(--mz-accent); }
.tpl-preview {
  background: var(--mz-surface-2); border: 1px solid var(--mz-line); border-radius: 8px;
  padding: 10px 14px; max-height: 340px; overflow: auto;
}

/* ---------------------------------------------- Public shared record page */
body.share-page {
  margin: 0; min-height: 100vh; background: var(--mz-bg); color: var(--mz-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.share-top {
  display: flex; align-items: center; gap: 14px; padding: 12px 18px;
  background: var(--mz-surface); border-bottom: 1px solid var(--mz-line);
}
.share-top .brand-lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.share-top .brand-mark { height: 28px; width: 28px; border-radius: 7px; }
.share-top .brand-word { font-size: 19px; letter-spacing: -.01em; }
.share-kind {
  margin-left: auto; color: var(--mz-muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; border: 1px solid var(--mz-line); border-radius: 999px; padding: 3px 12px;
}
.share-card {
  max-width: 860px; margin: 22px auto; padding: 22px 26px; background: var(--mz-surface);
  border: 1px solid var(--mz-line); border-radius: 12px;
}
.share-title { margin: 0 0 12px; font-size: 18px; }
.share-facts { list-style: none; margin: 0 0 18px; padding: 0; }
.share-facts li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 1px solid var(--mz-line); font-size: 13px; }
.share-facts li:first-child { border-top: none; }
.share-facts span { color: var(--mz-muted); }
.share-actions { margin-top: 12px; }
.share-note { color: var(--mz-muted); font-size: 12px; margin-top: 10px; }
.share-error { text-align: center; padding: 20px; }
.share-error h4 { margin: 0 0 8px; }
.share-error p { color: var(--mz-muted); }
.share-foot { text-align: center; color: var(--mz-muted); font-size: 12px; padding: 10px 0 26px; }

/* Shared report: letterhead, body, signature (screen) */
.share-report .lh { border-bottom: 2px solid var(--blaze-navy, #0B2D5B); padding-bottom: 10px; margin-bottom: 14px; }
.share-report .lh-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.share-report .lh-logo { height: 32px; width: 32px; }
.share-report .lh-centre { font-size: 16px; font-weight: 700; color: var(--blaze-teal, #0096A6); }
.share-report .lh-facts { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.share-report .lh-facts td { padding: 2px 6px; vertical-align: top; }
.share-report .lh-facts .k { color: var(--mz-muted); width: 120px; white-space: nowrap; }
.share-report .lh-facts .v { font-weight: 600; width: 38%; }
.share-report .doc-title { text-align: center; font-size: 15px; letter-spacing: .06em; margin: 8px 0 14px; }
.share-report .meta { color: var(--mz-muted); font-size: 11px; border-bottom: 1px solid var(--mz-line); padding-bottom: 6px; margin-bottom: 14px; }
.share-report .body { font-size: 13.5px; line-height: 1.5; }
.share-report .body p { margin: 6px 0; }
.share-report .body ul, .share-report .body ol { margin: 6px 0; padding-left: 24px; }
.share-report .body ul ul, .share-report .body ul ol, .share-report .body ol ul, .share-report .body ol ol { margin: 2px 0; }
.share-report .body ul, .share-report .body ul > li { list-style-type: disc; }
.share-report .body ul ul, .share-report .body ul ul > li { list-style-type: circle; }
.share-report .body ul ul ul, .share-report .body ul ul ul > li { list-style-type: square; }
.share-report .body h1 { font-size: 16px; margin: 12px 0 5px; }
.share-report .body h2 { font-size: 14px; margin: 10px 0 4px; }
.share-report .body h3, .share-report .body h4, .share-report .body h5, .share-report .body h6 { font-size: 13px; margin: 8px 0 3px; }
.share-report .sign { display: flex; justify-content: flex-end; margin-top: 40px; }
.share-report .sign-block { text-align: right; }
.share-report .sign-name { font-weight: 700; font-size: 14px; }
.share-report .sign-img { display: block; max-height: 56px; max-width: 220px; margin: 0 0 4px auto; }
.share-report .sign-quals, .share-report .sign-reg { font-size: 12px; color: var(--mz-muted); }

/* The printed/PDF output of a shared report is always ink-on-white. */
@media print {
  body.share-page { background: #fff; color: #111; }
  .share-top, .share-foot, .no-print { display: none !important; }
  .share-card { border: none; margin: 0; max-width: none; padding: 0; box-shadow: none; }
  .share-report .lh { border-bottom-color: #0B2D5B; }
  .share-report .lh-centre { color: #0B2D5B; }
  .share-report .lh-facts .k, .share-report .meta, .share-report .sign-quals, .share-report .sign-reg { color: #555; }
}