/* Benchline Cloud Portal — aligned to the Benchline Control Center theme.
 * Light, flat, border-driven, compact. Single indigo accent. Mono for data. */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #e9edf4;
  --bg-grad-a: #eef2f9;
  --bg-grad-b: #e3e8f2;
  --panel: #ffffff;
  --panel-soft: #f3f6fb;
  --panel-softer: #eef2f8;

  /* Lines */
  --border: #dde3ee;
  --border-strong: #c8d2e2;

  /* Text */
  --text: #0e1726;
  --text-soft: #33415a;
  --muted: #6b7689;

  /* Brand / accent */
  --accent: #3b5bfe;
  --accent-strong: #2440e6;
  --accent-soft: rgba(59, 91, 254, 0.12);
  --accent-line: rgba(59, 91, 254, 0.35);
  --cyan: #06b6d4;

  /* Status */
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.14);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.16);

  /* Elevation & focus */
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 1px rgba(15, 23, 42, 0.05);
  --ring: 0 0 0 2px var(--accent-soft);

  /* Geometry */
  --radius: 3px;
  --radius-sm: 2px;
  --radius-pill: 3px;

  /* Type */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --topbar-h: 42px;
  --page-gutter: 12px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }

/* Root size drives every rem value below — the whole app scales with it. */
html { font-size: 13px; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(59, 91, 254, 0.10), transparent 60%),
    radial-gradient(820px 520px at 100% 0%, rgba(6, 182, 212, 0.08), transparent 55%),
    linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b));
  background-attachment: fixed;
}

a { color: var(--accent-strong); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }

::selection { background: var(--accent-soft); }

/* Thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: calc(var(--topbar-h) + var(--safe-top));
  height: auto;
  padding: var(--safe-top) max(14px, var(--safe-right)) 0 max(14px, var(--safe-left));
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-brand { display: flex; align-items: center; flex: 0 0 auto; }
.topbar .logo { height: 20px; display: block; }
.topbar .logo-mark { display: none; }
.topbar-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
}
.topbar .spacer { flex: 1; }
.topbar .role-pill {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  color: var(--muted);
}
.topbar .role-pill.admin {
  color: var(--accent-strong);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.topbar .user { color: var(--text-soft); font-size: 0.82rem; font-weight: 650; }

.topbar.has-view-as { flex-wrap: wrap; }
.topbar-account { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.view-as-control { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.view-as-control label { font-size: .82rem; font-weight: 700; }
.view-as-control select { width: 220px; max-width: 100%; min-width: 0; }
.view-as-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.view-as-status.view-as-error { top: calc(100% + 6px); right: 0; width: min(320px, calc(100vw - 28px)); height: auto; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--text-soft); font-size: .82rem; box-shadow: var(--shadow); overflow-wrap: anywhere; white-space: normal; clip-path: none; }
.view-as-error .btn { margin-left: 8px; }
.topbar.has-view-as .topbar-end { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
@media (max-width: 760px) {
  .view-as-control select { width: 190px; }
}

/* ---------- Buttons ---------- */
.btn {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.ghost {
  background: var(--panel-soft);
  color: var(--text-soft);
  border: 1px solid var(--border);
}
.btn.ghost:hover {
  background: var(--panel);
  border-color: var(--accent-line);
  color: var(--accent-strong);
}
.btn.danger {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.btn.danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn.sm { padding: 3px 8px; font-size: 0.78rem; }
.spacer { flex: 1; }
.row-del {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
  line-height: 1;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.row-del:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.4);
}
#demo-switch select, .view-as-control select {
  background: var(--panel-soft);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 650;
}
#demo-switch select:focus-visible, .view-as-control select:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }

/* ---------- Layout ---------- */
.container {
  width: min(1540px, calc(100% - (2 * var(--page-gutter)) - var(--safe-left) - var(--safe-right)));
  margin: 0 auto;
  padding: 14px 0 max(40px, calc(24px + var(--safe-bottom)));
}
.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
  align-items: stretch;
}
.admin-overview-grid.single-column { grid-template-columns: 1fr; }
@media (max-width: 980px) {
  .admin-overview-grid { grid-template-columns: 1fr; }
}
.page-title {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 2px;
}
.page-sub { color: var(--muted); margin: 0 0 12px; font-size: 0.86rem; }

/* ---------- Metric / KPI tiles ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.stat-card {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  min-height: 0;
  transition: border-color 0.15s ease;
}
.stat-card:hover { border-color: var(--border-strong); }
.stat-card .label {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.stat-card .value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 2px;
  color: var(--text);
}
.stat-card .value .sub { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.stat-card .sub { color: var(--muted); font-size: 0.76rem; margin-top: 2px; }
.stat-card .value .accent { color: var(--accent-strong); }

/* ---------- Panels / cards ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 10px;
}
.card-head {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.card-title {
  margin: 0;
  min-width: 0;
  flex: 0 1 auto;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
.card-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: 0 0 auto;
}
.dt-card-search {
  flex: 0 1 180px;
  width: 180px;
  min-width: 110px;
  height: 26px;
  box-sizing: border-box;
  margin-left: auto;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--text);
  font: 0.78rem var(--font-sans);
}
.dt-card-search:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
  background: var(--panel);
}
.dt-card-search::placeholder { color: var(--muted); }
.card-head .dt-card-search + .card-actions { margin-left: 0; }

.report-delivery-summary {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.report-delivery-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.report-delivery-status.sent { background: #dcfce7; color: #166534; }
.report-delivery-status.failed { background: #fee2e2; color: #991b1b; }
button.copy-report-error { border: 0; cursor: pointer; font-family: inherit; }
button.copy-report-error:hover { text-decoration: underline; }
button.copy-report-error:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.report-delivery-status.pending { background: #fef3c7; color: #92400e; }
.report-delivery-status.review { background: #dbeafe; color: #1e40af; }
.report-delivery-status.archived { background: #e2e8f0; color: #475569; }

.report-admin-section-head .report-review-badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 1px 6px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.report-review-help {
  margin: 0 10px 8px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}
.report-review-error {
  display: inline-block;
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: #b91c1c;
  font-size: 0.68rem;
}
table.dataTable.admin-dt tr.report-review-row-failed td { background: rgba(254, 226, 226, 0.25); }

.report-delivery-log {
  margin: 4px 10px 12px;
  border: 1px solid #1e293b;
  border-radius: 8px;
  background: #0b1220;
  color: #dbe4f0;
  overflow: hidden;
}
.report-delivery-log-scroll {
  max-height: 420px;
  overflow: auto;
}
.report-delivery-log-empty {
  padding: 22px 14px;
  color: #7b879c;
  text-align: center;
  font: 0.78rem var(--font-mono);
}
.report-delivery-log-entry {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.report-delivery-log-entry:last-child { border-bottom: 0; }
.report-delivery-log-entry summary {
  display: grid;
  grid-template-columns: 14px minmax(16rem, auto) 4.6rem minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 6px 12px;
  cursor: pointer;
  list-style: none;
  font: 0.72rem/1.45 var(--font-mono);
}
.report-delivery-log-entry summary::-webkit-details-marker,
.report-delivery-log-entry summary::marker { display: none; content: ""; }
.report-delivery-log-caret {
  color: #64748b;
  font-size: 0.62rem;
  transition: transform 0.12s ease;
}
.report-delivery-log-entry[open] .report-delivery-log-caret {
  transform: rotate(90deg);
}
.report-delivery-log-entry summary:hover {
  background: rgba(148, 163, 184, 0.08);
}
.report-delivery-log-entry time { color: #8b9cb3; white-space: nowrap; }
.report-delivery-log-status {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.report-delivery-log-entry.sent .report-delivery-log-status { color: #4ade80; }
.report-delivery-log-entry.failed .report-delivery-log-status { color: #f87171; }
.report-delivery-log-entry.pending .report-delivery-log-status,
.report-delivery-log-entry.in_progress .report-delivery-log-status { color: #fbbf24; }
.report-delivery-log-entry.review .report-delivery-log-status { color: #60a5fa; }
.report-delivery-log-message {
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-delivery-log-detail {
  margin: 0;
  padding: 0 12px 10px 34px;
  color: #94a3b8;
  font: 0.72rem/1.5 var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
}

.report-admin-section + .report-admin-section {
  border-top: 1px solid var(--border);
}
.report-admin-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 4px;
  color: var(--text-soft);
  font-size: 0.75rem;
}
.report-admin-section-head span {
  color: var(--muted);
  font-size: 0.68rem;
}
.report-admin-section-collapsible > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px;
  user-select: none;
}
.report-admin-section-collapsible > summary::-webkit-details-marker,
.report-admin-section-collapsible > summary::marker {
  display: none;
  content: "";
}
.report-admin-section-collapsible > summary:hover {
  background: var(--panel-soft);
}
.report-admin-section-caret {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1;
  transition: transform 0.12s ease;
}
.report-admin-section-collapsible[open] > summary .report-admin-section-caret {
  transform: rotate(90deg);
}

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
}
th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 800;
}
tbody tr { transition: background 0.12s ease; }
tbody tr:nth-child(even) { background: rgba(243, 246, 251, 0.5); }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--accent-soft); }
td.num { font-family: var(--font-mono); font-size: 0.85rem; }
tr:last-child td { border-bottom: none; }
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* DataTables chrome, tuned to the compact portal tables. */
.card .dt-container,
.chm-scale-modal .dt-container {
  --dt-header_padding: 5px 12px;
  --dt-body_padding: 5px 12px;
  --dt-footer_padding: 4px 8px;
  --dt-header_border: 1px solid var(--border);
  --dt-body_border: 1px solid var(--border);
  --dt-input_border: 1px solid var(--border-strong);
  --dt-input_border-radius: var(--radius-sm);
  --dt-input_padding: 4px 8px;
  --dt-input_background: var(--panel);
  --dt-input_color: var(--text);
  --dt-control_color: var(--muted);
  --dt-order-arrow_color: var(--muted);
  --dt-order-arrow_color-current: var(--accent-strong);
  --dt-order-arrow_opacity: 0.35;
  --dt-order-arrow_opacity-current: 0.95;
  --dt-order-header_outline-hover: none;
  --dt-paging-button_padding: 3px 8px;
  --dt-paging-button_margin-left: 3px;
  --dt-paging-button_border-radius: var(--radius-sm);
  --dt-paging-button_border: 1px solid var(--border);
  --dt-paging-button_background: var(--panel);
  --dt-paging-button_color: var(--text-soft);
  --dt-paging-button_border-current: 1px solid var(--accent-line);
  --dt-paging-button_background-current: var(--accent-soft);
  --dt-paging-button_color-current: var(--accent-strong);
  --dt-paging-button_border-current-hover: 1px solid var(--accent);
  --dt-paging-button_background-current-hover: var(--accent-soft);
  --dt-paging-button_color-current-hover: var(--accent-strong);
  --dt-paging-button_border-hover: 1px solid var(--border-strong);
  --dt-paging-button_background-hover: var(--panel-soft);
  --dt-paging-button_color-hover: var(--text);
  --dt-paging-button_color-disabled: #b4bcc8;
  --dt-paging-button_border-disabled: 1px solid transparent;
  --dt-paging-button_box-shadow: none;
  --dt-paging-button_box-shadow-active: none;
}
.card .dt-container div.dt-layout-row,
.chm-scale-modal .dt-container div.dt-layout-row {
  margin: 0;
  padding: 4px 10px;
  gap: 8px;
}
.card .dt-container div.dt-layout-row.dt-layout-table,
.chm-scale-modal .dt-container div.dt-layout-row.dt-layout-table {
  padding: 0;
  overflow-x: auto;
}
.card .dt-container .dt-info,
.card .dt-container .dt-paging,
.chm-scale-modal .dt-container .dt-info,
.chm-scale-modal .dt-container .dt-paging {
  font-size: 0.72rem;
  font-weight: 600;
}
.card .dt-container .dt-paging .dt-paging-button,
.chm-scale-modal .dt-container .dt-paging .dt-paging-button {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 1.7em;
}
table.dataTable.admin-dt { margin: 0; }
table.dataTable.admin-dt .user { color: var(--muted); font-size: 0.78rem; }
table.dataTable.admin-dt tbody tr:last-child td { border-bottom: 1px solid var(--border); }
table.dataTable.admin-dt > thead > tr > th,
table.dataTable.admin-dt > tbody > tr > td {
  text-align: left;
  vertical-align: middle;
}
table.dataTable.admin-dt th.dt-type-numeric,
table.dataTable.admin-dt td.dt-type-numeric,
table.dataTable.admin-dt th.dt-type-date,
table.dataTable.admin-dt td.dt-type-date {
  text-align: left;
}
table.dataTable.admin-dt th.dt-type-numeric div.dt-column-header,
table.dataTable.admin-dt th.dt-type-date div.dt-column-header {
  flex-direction: row;
}
table.dataTable.admin-dt td.dt-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
table.dataTable.admin-dt td.dt-actions .btn + .btn { margin-left: 4px; }
table.dataTable.admin-dt td.dt-actions select + .btn { margin-left: 4px; }
.ingest-key-expand {
  width: 24px;
  height: 24px;
  margin: -4px 4px -4px -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.ingest-key-expand:hover { background: var(--panel-soft); color: var(--text); }
table.dataTable.admin-dt tr.ingest-key-child > td,
table.dataTable.admin-dt td.ingest-key-child { padding: 0; }
.ingest-key-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 18px;
  padding: 12px 16px;
  background: var(--panel-soft);
}
.ingest-key-details > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ingest-key-details > div > span:first-child {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ingest-key-details code { overflow-wrap: anywhere; }
.ingest-key-details small { display: block; color: var(--muted); font-weight: 500; }
.ingest-key-details .ingest-key-detail-action {
  grid-column: 1 / -1;
  align-items: flex-end;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--muted);
  text-transform: capitalize;
}
.badge.in_service, .badge.completed, .badge.active {
  color: var(--success); border-color: rgba(16, 185, 129, 0.4); background: var(--success-soft);
}
.badge.idle, .badge.planned { color: var(--muted); }
.badge.maintenance, .badge.in_progress {
  color: var(--warning); border-color: rgba(245, 158, 11, 0.45); background: var(--warning-soft);
}
.badge.offline, .badge.inactive {
  color: var(--danger); border-color: rgba(239, 68, 68, 0.4); background: var(--danger-soft);
}
.badge.pending, .badge.error {
  color: var(--warning); border-color: rgba(245, 158, 11, 0.45); background: var(--warning-soft);
}
.badge.expired, .badge.invalid, .badge.blocked {
  color: var(--danger); border-color: rgba(239, 68, 68, 0.4); background: var(--danger-soft);
}
.badge.unconfigured { color: var(--muted); }

/* ---------- Shared collapsible folds ---------- */
.fold {
  margin: 0 0 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  overflow: hidden;
}
.card > .fold {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.fold > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  background: var(--panel-soft);
}
.fold > summary::-webkit-details-marker,
.fold > summary::marker {
  display: none;
  content: "";
}
.fold > summary:hover { background: var(--panel-soft); }
.fold-caret {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.12s ease;
}
.fold[open] > summary .fold-caret { transform: rotate(90deg); }
.fold > summary strong {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 0.75rem;
}
.fold > summary .hint,
.fold > summary small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}
.fold > summary .hint { margin-left: auto; }
.fold-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 10px;
}

/* ---------- Machine event log ---------- */
.event-log-source-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.event-log-source-label select {
  min-width: 140px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--text);
  font: 0.78rem var(--font-sans);
}
.event-log-body { padding-top: 0; }
.event-log-table-wrap {
  max-height: 480px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.event-log-table-wrap table { margin: 0; }
.event-log-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-soft);
  white-space: nowrap;
}
.event-log-table-wrap td,
.event-log-table-wrap th { padding: 5px 8px; font-size: 0.74rem; }
.event-log-table-wrap time {
  color: var(--muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.event-log-payload {
  max-width: 420px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  vertical-align: top;
}
.event-log-json summary {
  overflow: hidden;
  max-width: 420px;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-log-json[open] summary {
  margin-bottom: 6px;
  color: var(--text-soft);
}
.event-log-json pre,
.event-log-raw {
  display: block;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
}
.event-log-json pre {
  max-height: 420px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.event-log-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.event-log-chart {
  height: 160px;
  margin-bottom: 6px;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.event-log-chart canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.event-log-chart-note {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}
.event-log-chart-key {
  display: flex;
  gap: 14px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}
.event-log-chart-key span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.event-log-chart-key i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.event-log-chart-key i.up { background: #16a34a; }
.event-log-chart-key i.down { background: #dc2626; }

/* ---------- Machine data log ---------- */
.data-log-body,
.event-log-panel {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border);
}
.data-log-toolbar,
.event-log-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 10px;
}
.data-log-toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.data-log-toolbar select {
  min-width: 150px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--text);
  font: 0.78rem var(--font-sans);
}
.data-log-toolbar .hint {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}
.data-log-chart {
  height: 180px;
  margin-bottom: 10px;
  padding: 6px 4px 0;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.data-log-chart canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.data-log-table-wrap {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.data-log-table-wrap table { margin: 0; }
.data-log-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-soft);
  white-space: nowrap;
}
.data-log-table-wrap td,
.data-log-table-wrap th { padding: 5px 8px; font-size: 0.74rem; }
.data-log-table-wrap time {
  color: var(--muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.data-log-block {
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  white-space: nowrap;
}
.data-log-block code {
  color: var(--text);
  font-weight: 650;
}
.data-log-table-wrap td.empty {
  color: var(--muted);
  text-align: center;
}

/* ---------- Machine license ---------- */
.license-card-body {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border);
}
#license-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.license-fact {
  display: flex;
  min-width: 0;
  min-height: 52px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.license-fact > span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.license-fact > strong {
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.license-fact.license-id code {
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--text-soft);
}
.license-admin {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.license-admin[hidden] { display: none; }
.license-form {
  display: grid;
  gap: 6px;
}
.license-form-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.license-form-heading {
  display: flex;
  grid-column: span 2;
  min-width: 0;
  min-height: 30px;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.license-form-heading > strong {
  color: var(--text);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.license-form-heading > small {
  color: var(--muted);
  font-size: 0.66rem;
}
.license-key-fields .license-field { grid-column: span 2; }
.license-key-fields .license-actions { grid-column: span 4; }
.license-metadata-fields .license-field:first-of-type { grid-column: span 2; }
.license-metadata-fields .license-field-wide { grid-column: span 3; }
.license-metadata-fields .license-actions { grid-column: span 2; }
.license-key-fields #license-expiry-field[hidden] + .license-actions {
  grid-column: span 6;
}
.license-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.license-field > span,
.license-key-result > label {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.license-field input,
.license-field select {
  width: 100%;
  min-width: 0;
  height: 30px;
  box-sizing: border-box;
  padding: 0 8px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: 0.78rem var(--font-mono);
}
.license-field > small {
  display: none;
}
#license-expiry-field[hidden] { display: none; }
.license-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.license-actions .btn { white-space: nowrap; }
.license-field input:focus-visible,
.license-field select:focus-visible,
.license-key-result textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.license-admin .form-status.form-error {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--danger);
}
.license-key-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
}
.license-key-result[hidden] { display: none; }
.license-key-result > label { grid-column: 1 / -1; }
.license-key-result textarea {
  width: 100%;
  min-height: 68px;
  box-sizing: border-box;
  resize: vertical;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--text);
  font: 0.72rem/1.45 var(--font-mono);
  word-break: break-all;
}

@media (max-width: 1100px) {
  #license-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .license-form-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .license-form-heading,
  .license-key-fields .license-actions,
  .license-metadata-fields .license-actions,
  .license-key-fields #license-expiry-field[hidden] + .license-actions {
    grid-column: 1 / -1;
  }
  .license-key-fields .license-field,
  .license-metadata-fields .license-field:first-of-type {
    grid-column: span 1;
  }
  .license-metadata-fields .license-field-wide { grid-column: span 2; }
}

@media (max-width: 700px) {
  #license-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  #license-summary,
  .license-form-section { grid-template-columns: minmax(0, 1fr); }
  .license-form-heading,
  .license-key-fields .license-field,
  .license-key-fields .license-actions,
  .license-metadata-fields .license-field:first-of-type,
  .license-metadata-fields .license-field-wide,
  .license-metadata-fields .license-actions,
  .license-key-fields #license-expiry-field[hidden] + .license-actions {
    grid-column: 1;
  }
}

/* ---------- Sign in ---------- */
.signin-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.signin-card {
  width: 420px;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  text-align: center;
}
.signin-card .logo { height: 30px; margin-bottom: 14px; }
.signin-card h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; }
.signin-card p { color: var(--muted); margin: 0 0 22px; font-size: 0.86rem; }
#clerk-signin { display: flex; justify-content: center; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
}
.tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 750;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab:hover { color: var(--accent-strong); }
.tab.active { color: var(--accent-strong); border-bottom-color: var(--accent); }

/* ---------- PLC ---------- */

.empty, .loading { padding: 18px; text-align: center; color: var(--muted); font-size: 0.86rem; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

/* ---------- Forms ---------- */
.card-body { padding: 10px 12px; }
.form-field { display: flex; flex-direction: column; gap: 3px; }
.form-field label,
.form-field > span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 800;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="number"],
.form-field select {
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  width: 100%;
}
.form-field input:focus-visible,
.form-field select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--text-soft);
  cursor: pointer;
}
.form-check input { width: 15px; height: 15px; accent-color: var(--accent); }
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}
.form-status { font-size: 0.82rem; font-weight: 650; color: var(--muted); }
.form-status.ok { color: var(--success); }
.form-error {
  margin-top: 14px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 600;
}

/* ---------- Modal ---------- */
/* Keep Leaflet panes and controls inside their map's stacking context. */
.leaflet-container { isolation: isolate; }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
  background: rgba(14, 23, 38, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.modal-overlay[hidden] { display: none; }
.modal {
  width: min(440px, 100%);
  max-height: min(90vh, 90dvh);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}
.modal form,
.modal-body { overflow: auto; }
.user-access-modal { width: min(520px, 100%); }
.modal-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.modal form { padding: 12px 14px; }
.modal .form-field { margin-bottom: 10px; }
.report-regenerate-dialog { padding: 0; max-width: calc(100vw - 32px); }
.report-regenerate-dialog:not([open]) { display: none; }
.report-regenerate-dialog [hidden] { display: none; }
.report-regenerate-dialog::backdrop { background: rgba(14, 23, 38, 0.42); }
.report-regenerate-dialog .report-review-error {
  max-width: none;
  white-space: normal;
  overflow: visible;
  font-size: .88rem;
}
.modal-head.danger { color: var(--danger); }
.modal-body { padding: 12px 14px; }
.modal-body p { margin: 0 0 10px; font-size: 0.88rem; color: var(--text-soft); }

/* NTRIP caster administration */
.ntrip-service-state {
  margin-left: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
}
.ntrip-service-state.healthy { background: #e8f7ee; color: #16733a; }
.ntrip-service-state.unhealthy { background: #fff0f0; color: var(--danger); }
.ntrip-modal { width: min(760px, calc(100vw - 30px)); }
.ntrip-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ntrip-credentials-box {
  margin: 4px 0 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
}
.input-action-row { display: flex; gap: 7px; }
.input-action-row input { flex: 1; min-width: 0; }
#bs-rover-fields.disabled { opacity: 0.5; }
.ntrip-table-wrap { overflow-x: auto; }
.ntrip-table { min-width: 920px; }
.ntrip-table th:first-child, .ntrip-table td:first-child { width: 34px; padding-right: 0; }
.ntrip-expand {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.ntrip-expand:hover { background: #eef2f7; color: var(--text); }
.ntrip-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ntrip-actions .btn { padding: 5px 8px; }
.ntrip-detail-row > td { padding: 0 !important; background: #f8fafc; }
.ntrip-detail { padding: 16px 18px 18px 48px; border-top: 1px solid var(--border); }
.ntrip-status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ntrip-status-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.ntrip-status-grid span, .ntrip-section-head span { color: var(--muted); font-size: 0.72rem; }
.ntrip-status-grid strong { font-size: 0.82rem; }
.ntrip-status-grid small { color: var(--muted); font-size: 0.68rem; line-height: 1.35; }
.ntrip-status-grid .badge { align-self: flex-start; }
.ntrip-connection-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  font-size: 0.78rem;
}
.ntrip-connection-box code, .ntrip-secret-row code { font-family: "JetBrains Mono", monospace; }
.ntrip-chart-section, .ntrip-log-section { margin-top: 16px; }
.ntrip-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.ntrip-autoscroll { margin-left: auto; white-space: nowrap; }
.ntrip-time-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  font-size: 0.72rem;
}
.ntrip-time-controls > span { margin-left: auto; color: var(--muted); }
.ntrip-range-buttons, .ntrip-custom-range { display: flex; align-items: center; gap: 5px; }
.ntrip-custom-range[hidden] { display: none; }
.ntrip-range-btn.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.ntrip-custom-range label { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.ntrip-custom-range input {
  min-height: 28px;
  padding: 3px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--text);
  font: inherit;
}
/* --- Engineer drilling plans (/drawings) --- */
.drawing-upload-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.drawing-upload-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.drawing-upload-form label[hidden] { display: none; }
.drawing-upload-form input[type="text"],
.drawing-upload-form select {
  width: 100%;
  min-width: min(170px, 100%);
  max-width: 100%;
}
.drawing-preview-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 1fr;
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}
@media (max-width: 980px) {
  .drawing-preview-layout { grid-template-columns: 1fr; }
}
.drawing-map {
  height: 420px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #e8ecf1;
  overflow: hidden;
}
.drawing-plan-map { height: 340px; margin-bottom: 10px; }
.hole-lineup-map { height: 380px; }
.hole-lineup-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
}
.hole-lineup-controls input[type="range"] { flex: 1; min-width: 120px; }
.hole-lineup-readout {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
}
.hole-plan-label.leaflet-div-icon {
  background: transparent;
  border: 0;
  width: 0;
  height: 0;
}
.hole-plan-label .hpl-inner {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.22);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  pointer-events: none;
}
.hole-plan-label .hpl-name {
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
}
.hole-plan-label .hpl-placeholder {
  background: rgba(255, 255, 255, 0.72);
  color: #64748b;
  font-weight: 600;
}
.hole-plan-label .hpl-depth {
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
}
.hole-plan-label .hpl-dxf {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  color: #f8fafc;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  text-shadow:
    -1px -1px 0 #0f172a,
     1px -1px 0 #0f172a,
    -1px  1px 0 #0f172a,
     1px  1px 0 #0f172a,
     0 0 4px #0f172a;
  white-space: pre;
}
.drawing-input-invalid { border-color: #dc2626 !important; outline: 1px solid #dc2626; }
.drawing-line-flipped { background: #ecfeff; }
.drawing-line-flipped [data-action="flip-line"][aria-pressed="true"] {
  border-color: #0f766e;
  color: #0f766e;
}
.drawing-bulk-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.82rem;
}
.drawing-table-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.drawing-transform {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid #99d5cb;
  border-radius: 7px;
  background: #f0fdfa;
  color: #134e4a;
  font-size: 0.82rem;
}
.drawing-transform.unknown { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
.drawing-transform summary { cursor: pointer; font-weight: 600; }
.drawing-transform dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 12px; }
.drawing-transform dd { margin: 0; overflow-wrap: anywhere; }
.drawing-transform pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.75rem; }
.drawing-transform code { overflow-wrap: anywhere; }
.drawing-table-wrap table { margin: 0; }
.drawing-table-wrap input[type="text"] { width: 130px; }
.drawing-table-wrap input.drawing-hole-depth { width: 88px; }
.drawing-table-wrap .drawing-hole-uuid {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  padding: 2px 7px;
}
.drawing-hole-uuid-empty { color: var(--muted); }
.drawing-create-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.ntrip-chart {
  position: relative;
  height: 240px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}
.ntrip-events-wrap {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.ntrip-events { min-width: 1050px; margin: 0; background: #fff; }
.ntrip-events th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 5px 8px;
  background: var(--panel-soft);
  white-space: nowrap;
}
.ntrip-events td {
  max-width: 340px;
  padding: 4px 8px;
  vertical-align: middle;
  font-size: 0.72rem;
  line-height: 1.25;
}
.ntrip-events th:first-child, .ntrip-events td:first-child { width: 180px; }
.ntrip-events th:nth-child(2), .ntrip-events td:nth-child(2) { width: 82px; }
.ntrip-events th:nth-child(3), .ntrip-events td:nth-child(3) { width: 150px; }
.ntrip-events th:nth-child(5), .ntrip-events td:nth-child(5) { width: 150px; }
.ntrip-event time {
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  white-space: nowrap;
}
.ntrip-event strong { text-transform: capitalize; white-space: nowrap; }
.ntrip-event code {
  display: block;
  max-width: 320px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ntrip-event.warn td:first-child { border-left: 3px solid var(--warning); }
.ntrip-event.error td:first-child { border-left: 3px solid var(--danger); }
.ntrip-diagnostic-error { margin: 0 0 12px; }
.ntrip-detail-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.ntrip-error { color: var(--danger); }
.ntrip-secret-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.ntrip-secret-row:last-child { border-bottom: 0; }
.ntrip-secret-row span { color: var(--muted); font-size: 0.76rem; }
.ntrip-secret-row code { overflow-wrap: anywhere; font-size: 0.76rem; }

@media (max-width: 760px) {
  .ntrip-form-grid, .ntrip-status-grid { grid-template-columns: 1fr; }
  .ntrip-detail { padding-left: 14px; }
  .ntrip-service-state { display: none; }
  .ntrip-time-controls > span { width: 100%; margin-left: 0; }
  .ntrip-custom-range { align-items: flex-start; flex-direction: column; }
  .ntrip-section-head { flex-wrap: wrap; }
  .ntrip-autoscroll { margin-left: 0; }
}

/* ---------- Users / access page ---------- */
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--panel-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667485' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.2;
  min-height: 34px;
  padding: 6px 32px 6px 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease;
}
.form-field select:hover {
  background-color: var(--panel);
  border-color: var(--accent-line);
}
.form-field select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.assign-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 12px;
}

/* ---------- Info bar (compact page header: stats + inline edit) ----------
 * Alignment contract: every field is [tiny label] over a value slot of
 * exactly var(--mb-h) height, so inputs, static values, badges, checkboxes,
 * and buttons all sit on the same baseline. */
.info-bar {
  --mb-h: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 18px;
  padding: 8px 14px;
}
.mb-machine-title {
  align-self: center;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.mb-field { display: flex; flex-direction: column; gap: 3px; }
.mb-field > span:first-child {
  font-size: 0.64rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}
.mb-field input,
.mb-field select {
  height: var(--mb-h);
  box-sizing: border-box;
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  width: 110px;
}
.mb-field input.mb-name { width: 170px; }
.mb-field input.mb-guid { width: min(280px, 100%); font-family: var(--font-mono); }
.mb-field select { width: auto; padding-right: 4px; }
.mb-field input:focus-visible,
.mb-field select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.mb-static {
  height: var(--mb-h);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 650;
  white-space: nowrap;
}
.mb-static small {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.72rem;
}
.mb-id { min-height: var(--mb-h); height: auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mb-id code {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
  overflow-wrap: anywhere;
}
/* Subtle divider between field groups (identity | edits | stats | actions) */
.mb-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 2px 0;
}
.mb-actions {
  height: var(--mb-h);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.mb-actions .btn.sm { height: var(--mb-h); padding: 0 12px; }
/* Inline error inside the bar (override the block .form-error style) */
.info-bar .form-status.form-error {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--danger);
}

/* ---------- Hole drilling metrics ---------- */
.machine-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  border-top: 1px solid var(--border);
  background: var(--panel-soft);
}
.machine-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
}
.machine-stat + .machine-stat { border-left: 1px solid var(--border); }
.machine-stat span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.machine-stat strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1.25rem;
}
.hole-titlebar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.hole-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.hole-stats .machine-stat:first-child { border-left: 0; }

/* ---------- Copyable ID buttons ---------- */
.copy-id {
  font-family: var(--font-mono);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  color: var(--accent-strong);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.copy-id:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.copied,
.copy-id.copied {
  color: var(--success) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

/* ---------- Machine map (Mapbox) ---------- */
.map {
  height: min(65vh, 680px);
  min-height: 480px;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.map-style-control select {
  display: block;
  height: 30px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 24px 0 8px;
  background: #fff;
  color: #172033;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
}
.map-style-control select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.map .mapboxgl-popup-content {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  border-radius: var(--radius);
  padding: 10px 12px;
}
.map-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25), 0 1px 4px rgba(15, 23, 42, 0.4);
  cursor: pointer;
}
.map-dot.active {
  background: var(--success);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25), 0 0 10px rgba(16, 185, 129, 0.7);
}
.map-dot.down { background: var(--danger); }
.map-dot.stale {
  background: var(--warning);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25), 0 0 8px rgba(245, 158, 11, 0.6);
}
.map .mapboxgl-popup-content .map-popup-meta {
  color: #6b7689;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.map-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 10px 4px 0;
}
.map-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.map-legend .swatch {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.map-legend .swatch.active { background: var(--success); }
.map-legend .swatch.down { background: var(--danger); }
.map-legend .swatch.stale { background: var(--warning); }

@media (max-width: 760px) {
  .topbar { gap: 8px; }
  .topbar .logo-full { display: none; }
  .topbar .logo-mark { display: block; height: 22px; }
  .topbar-user { display: none; }
  .card-head .hint { flex-basis: 100%; }
  .ntrip-modal { width: min(760px, calc(100vw - 24px)); }
}

@media (max-width: 640px) {
  body { background-attachment: scroll; }
  .container { width: calc(100% - 16px - var(--safe-left) - var(--safe-right)); }
  .topbar {
    flex-wrap: wrap;
    row-gap: 6px;
    padding-bottom: 6px;
  }
  .page-sub { overflow-wrap: anywhere; }
  .card-head { flex-wrap: wrap; }
  .dt-card-search {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 36px;
    margin-left: 0;
    order: 3;
  }
  .card-actions { margin-left: auto; }
  .report-delivery-summary,
  .ntrip-service-state { flex-basis: 100%; margin-left: 0; }
  .report-delivery-log-entry summary {
    grid-template-columns: 14px minmax(0, 1fr) auto;
    grid-template-areas:
      "caret time status"
      "caret message message";
  }
  .report-delivery-log-entry summary .report-delivery-log-caret { grid-area: caret; }
  .report-delivery-log-entry summary time { grid-area: time; white-space: normal; }
  .report-delivery-log-entry summary .report-delivery-log-status { grid-area: status; }
  .report-delivery-log-entry summary .report-delivery-log-message {
    grid-area: message;
    white-space: normal;
  }
  .btn, .copy-id {
    min-height: 36px;
    touch-action: manipulation;
  }
  .btn.sm { min-height: 32px; }
  .tab { padding: 10px 12px; }
  input, select, textarea { font-size: 16px !important; }
  .mb-field input,
  .mb-field select,
  .license-field input,
  .license-field select,
  .chm-filter-field > input,
  .chm-filter-field > select { height: 36px; }
  .card .dt-container .dt-search input,
  .card .dt-container .dt-length select { height: 36px; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .btn { flex: 1 1 auto; }
  .modal-overlay {
    align-items: end;
    padding: max(8px, var(--safe-top)) max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left));
  }
  .modal,
  .ntrip-modal,
  .user-access-modal {
    width: 100%;
    max-height: min(92vh, 92dvh);
  }
  .info-bar .mb-sep { display: none; }
  .mb-machine-title { flex: 1 1 100%; font-size: 1.2rem; }
  .mb-field { max-width: 100%; }
  .mb-field input,
  .mb-field input.mb-name,
  .mb-field input.mb-guid { width: 100%; }
  .mb-static {
    height: auto;
    min-height: var(--mb-h);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .mb-actions { width: 100%; margin-left: 0; height: auto; }
  .license-key-result { grid-template-columns: 1fr; }
  .drawing-upload-form label { flex: 1 1 100%; }
  .drawing-upload-form input[type="text"],
  .drawing-upload-form select { min-width: 0; }
  .drawing-create-row { flex-wrap: wrap; }
  .drawing-create-row .btn { flex: 1 1 auto; }
  .hole-lineup-readout { white-space: normal; }
  .map-legend { flex-wrap: wrap; gap: 10px; }
  .card .dt-container .dt-search input { min-width: 0; width: 100%; }
  .card .dt-container div.dt-layout-row:not(.dt-layout-table) {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .card .dt-container div.dt-layout-cell {
    flex-wrap: wrap;
    width: 100%;
  }
  table.dataTable.admin-dt td.dt-actions {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .machine-stats { grid-template-columns: 1fr; }
  .machine-stat + .machine-stat {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
  .map {
    height: 56vh;
    min-height: 280px;
  }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .signin-wrap { padding: 16px; }
  .signin-card { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- Client fleet dashboard ---- */
.dash-status { display: block; color: var(--muted); font-size: 0.74rem; margin-bottom: 6px; }
.dash-status:empty { display: none; }
.dash-status.error { color: var(--danger); }

.dash-grid-map {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(508px, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 980px) { .dash-grid-map { grid-template-columns: 1fr; } }

.dash-fleet-card { overflow: hidden; min-width: 0; }
#dash-fleet { container-type: inline-size; overflow-x: auto; }
.dash-fleet-table { width: 100%; min-width: 480px; border-collapse: collapse; table-layout: fixed; }
.fleet-miner-col { width: 19%; }
.fleet-status-col { width: 25%; }
.fleet-hole-col { width: 21%; }
.fleet-depth-col { width: 16%; }
.fleet-alignment-col { width: 19%; }
.fleet-action-col { width: 28px; }
.dash-fleet-table.has-actions { min-width: 508px; }
.dash-fleet-table.has-actions .fleet-miner-col { width: calc(19% - 5.6px); }
.dash-fleet-table.has-actions .fleet-status-col { width: calc(25% - 5.6px); }
.dash-fleet-table.has-actions .fleet-hole-col { width: calc(21% - 5.6px); }
.dash-fleet-table.has-actions .fleet-depth-col { width: calc(16% - 5.6px); }
.dash-fleet-table.has-actions .fleet-alignment-col { width: calc(19% - 5.6px); }
.dash-fleet-table th { font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: .65px; color: var(--muted); background: #f8fafd; padding: 9px 8px; text-align: left; border-bottom: 1px solid #e5eaf2; }
.dash-fleet-table th.num { text-align: right; }
.dash-fleet-table td { height: 62px; padding: 11px 8px; border-bottom: 1px solid #e9edf4; vertical-align: middle; }
.dash-fleet-table th:first-child, .dash-fleet-table td:first-child { padding-left: 14px; }
.dash-fleet-table th:last-child, .dash-fleet-table td:last-child { padding-right: 14px; }
.dash-fleet-row { cursor: pointer; }
.dash-fleet-row:hover { background: var(--panel-soft); }
.dash-fleet-row:last-child td { border-bottom: 0; }
.dash-fleet-name { color: var(--text); text-decoration: none; font-weight: 650; font-size: 12px; overflow-wrap: anywhere; }
.dash-fleet-name:hover { text-decoration: underline; }
.dash-fleet-status { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.dash-fleet-status.online { color: #15803d; }
.dash-fleet-status.offline, .dash-fleet-seen { color: var(--muted); }
.dash-status-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.dash-fleet-seen { margin: 3px 0 0 23px; font-size: 11px; }
.dash-fleet-hole { color: #17243b; font-size: 16px; font-weight: 650; letter-spacing: -.25px; overflow-wrap: anywhere; line-height: 1.25; }
.dash-fleet-depth { text-align: right; white-space: nowrap; font-size: 17px; font-weight: 650; letter-spacing: -.3px; font-variant-numeric: tabular-nums; color: #17243b; }
.dash-fleet-depth small { color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: 0; }
.dash-alignment { display: inline-block; font-size: 11px; color: #fff; padding: 5px 8px; border-radius: var(--radius-sm); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.dash-alignment.aligned { background: #008a35; }
.dash-alignment.not-aligned { background: #e52030; }
.dash-fleet-table.has-actions th:last-child, .dash-fleet-table.has-actions td:last-child { padding: 0 2px; }
.dash-fleet-table .row-del { width: 24px; padding: 0; }
@container (max-width: 390px) {
  .dash-fleet-table th, .dash-fleet-table td { padding-left: 5px; padding-right: 5px; }
  .dash-fleet-table th:first-child, .dash-fleet-table td:first-child { padding-left: 9px; }
  .dash-fleet-table th:last-child, .dash-fleet-table td:last-child { padding-right: 9px; }
  .dash-fleet-name { font-size: 11px; } .dash-fleet-hole { font-size: 14px; }
  .dash-fleet-depth { font-size: 15px; } .dash-alignment { padding: 5px 6px; }
}

.dash-grid-charts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 1100px) { .dash-grid-charts { grid-template-columns: 1fr; } }
.dash-grid-charts .card-head { flex-wrap: wrap; }
.dash-cumulative { margin-left: auto; }
.dash-cumulative[aria-pressed="true"] {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.map .mapboxgl-ctrl-group { border-radius: var(--radius-sm); }
.map .mapboxgl-ctrl-group button:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.map .mapboxgl-ctrl-group button:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.map .mapboxgl-ctrl-group button:only-child { border-radius: var(--radius-sm); }
.dash-chart-body {
  height: 220px;
  padding: 8px 10px 10px;
  position: relative;
}
.dash-chart-body canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.dash-chart-body .empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}
.card-head .legend { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.card-head .legend span {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-soft); font-size: 0.72rem; font-weight: 650;
}
.card-head .legend i { width: 9px; height: 9px; border-radius: var(--radius-sm); display: inline-block; }
.card-head .hint { color: var(--muted); font-weight: 600; font-size: 0.72rem; }

.mchip { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.mchip-dot { width: 8px; height: 8px; border-radius: var(--radius-sm); display: inline-block; flex: 0 0 auto; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 750; padding: 2px 7px;
  border-radius: var(--radius-sm); border: 1px solid;
}
.chip.done { color: #047857; border-color: rgba(16, 185, 129, 0.4); background: var(--success-soft); }
.chip.active { color: var(--accent-strong); border-color: var(--accent-line); background: var(--accent-soft); }

.dash-foot {
  padding: 7px 12px;
  color: var(--muted);
  font-size: 0.72rem;
  border-top: 1px solid var(--border);
}