/* styles.css — Q-IND Studio dark theme for Pipe Tracking */

/* ── Nasalization (Quantum ecosystem brand font) ── */
@font-face {
    font-family: 'Nasalization';
    src: url('fonts/Nasalization Rg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── Palette ── */
:root {
    --bg: #1e1e1e;
    --surface: #2d2d2d;
    --surface-2: #262626;
    --surface-3: #3a3a3a;
    --border: #555;
    --border-soft: #444;
    --text: #e0e0e0;
    --muted: #888;
    --accent: #4CAF50;
    --warn: #FFB74D;
    --danger: #EF5350;
    --mono: 'Consolas', 'Menlo', 'Courier New', monospace;
    /* Aliases used by tracking.js (progress legend, sparkline) */
    --color-text: #e0e0e0;
    --color-primary: #4CAF50;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
}

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #2d2d2d; }
::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #777; }

/* ── Inline SVG icons (lucide outlines) ── */
.ic {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -2px;
    flex-shrink: 0;
}

/* ── Header ── */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.header-left { display: flex; align-items: center; gap: 10px; }

.ic-brand { width: 22px; height: 22px; color: var(--accent); }

.header-title {
    font-family: 'Nasalization', 'Segoe UI', sans-serif;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0.5px;
}
.header-title .brand { color: var(--accent); }

.header-brands {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: 14px;
    padding-left: 16px;
    border-left: 1px solid var(--border-soft);
}
.header-brands img { height: 20px; opacity: 0.55; transition: opacity 0.15s; }
.header-brands img:hover { opacity: 0.9; }

.header-right { display: flex; align-items: center; gap: 8px; }

.status-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #666;
}
.status-dot.online { background: var(--accent); }
.status-label {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.5px;
    font-family: var(--mono);
}

/* ── Layout ── */
.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 12px 16px 28px;
}

/* ── Toolbar ── */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 8px 0 12px;
}

.toolbar-spacer { flex: 1; }

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.toolbar-group label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 10px;
    color: var(--muted);
}
.search-wrap:focus-within { border-color: var(--accent); color: var(--text); }
.search-wrap .ic { width: 14px; height: 14px; }

#search-input {
    width: 220px;
    padding: 6px 0;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}
#search-input::placeholder { color: var(--muted); }

#group-select, #track-period, #track-shift, #track-from, #track-to,
#gen-heat, #gen-search {
    padding: 6px 8px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
#group-select:focus, #track-period:focus, #track-shift:focus,
#track-from:focus, #track-to:focus { outline: none; border-color: var(--accent); }
#track-from[hidden], #track-to[hidden] { display: none; }

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s, opacity 0.15s;
    color: #fff;
    white-space: nowrap;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { filter: brightness(0.9); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.btn .ic { width: 14px; height: 14px; }

.btn-primary { background: var(--accent); }
.btn-secondary { background: #555; }
.btn-danger { background: var(--danger); }

/* Continuous-run active state (red, pulsing) */
.btn-danger.sim-active {
    animation: sim-pulse 1.5s ease-in-out infinite;
}
@keyframes sim-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(239, 83, 80, 0); }
}

/* ── Stats ── */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
}
.stat-value {
    font-size: 20px;
    font-weight: 600;
    font-family: var(--mono);
    color: var(--text);
}
.stat-value.stat-ok   { color: var(--accent); }
.stat-value.stat-warn { color: var(--warn); }
.stat-value.stat-bad  { color: var(--danger); }

/* ── Station-state colors ── */
.st-ok   { color: var(--text); }
.st-nok  { color: var(--danger); }
.st-wip  { color: var(--warn); }
.st-pend { color: #555; }

/* ── Status badges ── */
.badge {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.badge-proc { background: rgba(33, 150, 243, 0.15); color: #64B5F6; }
.badge-ok   { background: rgba(76, 175, 80, 0.15); color: var(--accent); }
.badge-warn { background: rgba(255, 183, 77, 0.15); color: var(--warn); }
.badge-bad  { background: rgba(239, 83, 80, 0.15); color: var(--danger); }

/* ── Grade colour-band chips (Calgary grade colour code) ── */
.grade-chip {
    display: inline-flex; gap: 2px; vertical-align: middle; margin-right: 4px;
    background: #3a3f4d; border-radius: 3px; padding: 3px 4px;
}
.grade-band {
    display: inline-block; width: 5px; height: 12px; border-radius: 1px;
    border: 1px solid rgba(0,0,0,.25);
}

/* ── Tabulator dark theme (Q-IND palette) ── */
#tabla-tubos {
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    overflow: hidden;
}

.tabulator {
    border: none;
    font-size: 12px;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
}
.tabulator .tabulator-tableholder,
.tabulator .tabulator-tableholder .tabulator-table {
    background: var(--bg);
    color: var(--text);
}

.tabulator .tabulator-header {
    background: var(--surface);
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.tabulator .tabulator-header .tabulator-col {
    background: transparent;
    border-right: 1px solid var(--border-soft);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    color: #ccc;
    font-size: 11px;
}
.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical .tabulator-col-title {
    color: #ccc;
}
.tabulator .tabulator-header-filter input,
.tabulator .tabulator-header-filter select {
    background: var(--surface-3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 3px;
    padding: 3px 6px !important;
    font-family: inherit;
}
.tabulator .tabulator-header-filter input::placeholder { color: var(--muted); }

.tabulator-row {
    background: var(--bg);
    color: var(--text);
    border-bottom: 1px solid #2a2a2a;
}
.tabulator-row.tabulator-row-even { background: #232323; }
.tabulator-row.tabulator-selectable:hover { background: var(--surface-3) !important; }
.tabulator-row.tabulator-selected { background: rgba(76, 175, 80, 0.12) !important; }
.tabulator-row .tabulator-cell { border-right: 1px solid transparent; }

/* Monospace for identifiers & numeric cells */
.tabulator-cell[tabulator-field="pieceId"],
.tabulator-cell[tabulator-field="coilSeq"],
.tabulator-cell[tabulator-field="heat"],
.tabulator-cell[tabulator-field="coil"],
.tabulator-cell[tabulator-field="po"],
.tabulator-cell[tabulator-field="length"],
.tabulator-cell[tabulator-field="kgs"],
.tabulator-cell[tabulator-field="operator"] {
    font-family: var(--mono);
    font-size: 12px;
}

.tabulator-row.tabulator-group {
    background: var(--surface-2);
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
    font-weight: 600;
}
.tabulator-row.tabulator-group span { color: var(--accent) !important; }

.tabulator .tabulator-placeholder .tabulator-placeholder-contents { color: var(--muted); }

.tabulator .tabulator-footer {
    background: var(--surface);
    color: var(--text);
    border-top: 1px solid var(--border);
    font-family: inherit;
}
.tabulator .tabulator-footer .tabulator-footer-contents { color: var(--muted); }
.tabulator .tabulator-footer .tabulator-page,
.tabulator .tabulator-footer .tabulator-page-size {
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 11px;
}
.tabulator .tabulator-footer .tabulator-page:not(disabled):hover {
    background: #444;
    color: #fff;
}
.tabulator .tabulator-footer .tabulator-page.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ── Hint / legend line ── */
.hint {
    font-size: 11px;
    color: var(--muted);
    margin: 10px 2px 18px;
}
.hint span { margin: 0 6px; white-space: nowrap; }
.hint .ic { width: 13px; height: 13px; }

/* ── Detail: process log + pyrometry ── */
.detail-section {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 12px 14px;
}
.detail-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.detail-header .ic { color: var(--accent); width: 16px; height: 16px; }

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
@media (max-width: 1000px) { .detail-grid { grid-template-columns: 1fr; } }

#tabla-historial {
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    overflow: hidden;
}

.pyro-panel h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: #ccc;
}
.pyro-panel h3 .ic { color: var(--accent); width: 14px; height: 14px; }

.pyro-chart {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 10px;
    min-height: 120px;
}
.pyro-chart p { margin: 0; font-size: 12px; }
.pyro-svg { width: 100%; height: auto; display: block; }
.pyro-grid { stroke: var(--border-soft); stroke-width: 1; }
.pyro-tick { fill: var(--muted); font-size: 10px; font-family: var(--mono); }
.pyro-legend {
    display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px;
    font-size: 11px; color: var(--muted); font-family: var(--mono);
}
.pyro-legend i {
    display: inline-block; width: 14px; height: 3px; border-radius: 2px;
    vertical-align: middle; margin-right: 5px;
}

/* ── Pyrometry sparkline in the table ── */
.spark { display: inline-block; vertical-align: middle; }

/* ── Tab bar ── */
.tab-bar {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    gap: 0;
}
.tab-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 100%;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.tab-item:hover { color: var(--text); }
.tab-item.active { color: #fff; border-bottom-color: var(--accent); }
.tab-item .ic { width: 15px; height: 15px; }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Detail side column (pyro + process piece) ── */
.detail-side { display: flex; flex-direction: column; gap: 14px; }

/* ── Process piece ── */
.process-piece {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 10px 12px;
}
.process-piece h3 {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 10px; font-size: 12px; font-weight: 600; color: #ccc;
}
.process-piece h3 .ic { color: var(--accent); width: 14px; height: 14px; }

.pp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    align-items: end;
}
.pp-grid label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px;
}
.pp-grid .pp-comment { grid-column: 1; }
.pp-grid select, .pp-grid input {
    padding: 6px 8px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
}
.pp-grid select:focus, .pp-grid input:focus { outline: none; border-color: var(--accent); }
.pp-grid .btn { justify-content: center; }
.pp-note { margin: 8px 0 0; font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* ── Line view ── */
.line-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    align-items: start;
    padding-top: 10px;
}
.lv-area {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 10px;
}
.lv-area h3 {
    margin: 0 0 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 6px;
}
.lv-station {
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--surface-2);
    border: 1px solid #333;
    margin-bottom: 6px;
}
.lv-st-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.lv-st-name { font-size: 12px; color: #ccc; }
.lv-counts { display: flex; gap: 4px; }
.lv-badge {
    font-family: var(--mono);
    font-size: 10px;
    padding: 0 6px;
    border-radius: 8px;
    line-height: 16px;
}
.lv-wip   { background: rgba(255, 183, 77, 0.18); color: var(--warn); }
.lv-hold  { background: rgba(239, 83, 80, 0.18); color: var(--danger); }
.lv-prime { background: rgba(76, 175, 80, 0.18); color: var(--accent); }

.lv-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lv-chip {
    font-family: var(--mono);
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text);
    cursor: pointer;
    transition: filter 0.15s;
}
.lv-chip:hover { filter: brightness(1.3); }
.lv-chip.c-wip   { border-color: rgba(255, 183, 77, 0.6); }
.lv-chip.c-hold  { border-color: rgba(239, 83, 80, 0.6); color: #f5b5b3; }
.lv-chip.c-prime { border-color: rgba(76, 175, 80, 0.6); color: #b8e6ba; }
.lv-more, .lv-empty { font-size: 10px; color: var(--muted); font-family: var(--mono); align-self: center; }

/* ── Cameras ── */
.camera-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 12px;
    padding-top: 10px;
}
.camera-tile {
    background: #000;
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    overflow: hidden;
}
.camera-tile canvas { display: block; width: 100%; height: auto; }

/* ── Settings ── */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    padding-top: 10px;
    max-width: 1100px;
}
.settings-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 12px 14px;
}
.settings-card h3 {
    margin: 0 0 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 6px;
}
.set-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    font-size: 12px;
    color: #ccc;
    margin-bottom: 14px;
}
.set-row input[type="range"] { grid-column: 1 / -1; }
.set-val { font-family: var(--mono); color: var(--accent); font-size: 12px; }

.set-band {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: #ccc; margin-bottom: 10px;
}
.set-band span { flex: 1; }
.set-band input {
    width: 64px;
    padding: 4px 6px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 12px;
    text-align: center;
}
.set-band input:focus { outline: none; border-color: var(--accent); }

.set-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: #ccc; cursor: pointer; user-select: none;
    margin-bottom: 8px;
}
.set-check input { display: none; }
.set-check .check-box {
    width: 18px; height: 18px; min-width: 18px;
    border: 2px solid #666; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.set-check input:checked + .check-box { background: var(--accent); border-color: var(--accent); }
.set-check input:checked + .check-box::after { content: '✓'; color: #fff; font-size: 12px; font-weight: bold; }

/* ── Range sliders ── */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #555;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent);
    cursor: pointer; border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent);
    cursor: pointer; border: none;
}

/* ── Line View: plant schematic (top view) ── */
#line-view { padding-top: 8px; }
#line-svg {
    width: 100%;
    height: auto;
    display: block;
    background: #191b19;
    background-image: radial-gradient(circle, #232623 1px, transparent 1px);
    background-size: 22px 22px;
    border: 1px solid var(--border-soft);
    border-radius: 4px;
}

.lv3d-area {
    font-family: 'Nasalization', 'Segoe UI', sans-serif;
    font-size: 15px;
    fill: var(--accent);
    letter-spacing: 1px;
    opacity: 0.9;
}
.lv3d-rail { stroke: #4a4f4a; stroke-width: 2; }
.lv3d-roller { stroke: #333733; stroke-width: 2; }
.lv3d-flow { fill: none; stroke: rgba(76, 175, 80, 0.5); stroke-width: 2; }

.lv3d-box   { fill: #262a26; stroke: #4a4f4a; stroke-width: 1.5; }
.lv3d-stand { fill: #343a34; stroke: #555; stroke-width: 1; }
.lv3d-quench { stroke: #4a6b8a; }
.lv3d-rack {
    fill: rgba(239, 83, 80, 0.06);
    stroke: rgba(239, 83, 80, 0.35);
    stroke-dasharray: 4 3;
    stroke-width: 1;
}
.lv3d-ship {
    fill: rgba(76, 175, 80, 0.05);
    stroke: rgba(76, 175, 80, 0.45);
    stroke-dasharray: 5 4;
    stroke-width: 1.2;
}
.lv3d-mlabel {
    font-family: var(--mono);
    font-size: 10px;
    fill: #9aa29a;
    letter-spacing: 0.4px;
}
.lv3d-ship-label { fill: var(--accent); }
.lv3d-count { font-family: var(--mono); font-size: 11px; fill: var(--accent); }

/* Pipes */
.lv3d-pipe {
    cursor: pointer;
    transition: transform 0.55s cubic-bezier(.4, 0, .2, 1);
}
.lv3d-pipe:hover .p-body { stroke: #fff; stroke-width: 1.2; }
.lv3d-pipe .p-shadow { fill: rgba(0, 0, 0, 0.4); }
.lv3d-pipe .p-body {
    fill: url(#lvSteel);
    stroke: #666;
    stroke-width: 0.8;
}
.lv3d-pipe .p-label {
    font-family: var(--mono);
    font-size: 10px;
    fill: #cfd6cf;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.7);
    stroke-width: 3px;
}
.lv3d-pipe.is-hot .p-body { fill: url(#lvHot); stroke: #ff8a50; filter: drop-shadow(0 0 5px rgba(255, 110, 40, 0.55)); }
.lv3d-pipe.is-warm .p-body { fill: url(#lvWarm); stroke: #a05a45; }
.lv3d-pipe.is-hold .p-body { stroke: var(--danger); stroke-width: 1.4; }
.lv3d-pipe.is-scrap .p-body { fill: #3a2a2a; stroke: var(--danger); stroke-dasharray: 4 3; }
.lv3d-pipe.is-prime .p-body { stroke: var(--accent); stroke-width: 1.2; }

/* ── Fix: Tabulator light-gray header states (hover / sorted / moving) ── */
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background: #3a3f3a !important;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"],
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] {
    background: #343934 !important;
}
.tabulator .tabulator-header .tabulator-col.tabulator-moving {
    background: #3a3f3a !important;
    border: 1px solid var(--accent);
}
/* Sorter arrows: gray by default, green on the active sort */
.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter { color: #777; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
    border-bottom-color: #777;
    border-top-color: #777;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-sorter .tabulator-arrow {
    border-bottom-color: var(--accent) !important;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-sorter .tabulator-arrow {
    border-top-color: var(--accent) !important;
}
/* Keep titles readable in every state */
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover .tabulator-col-title,
.tabulator .tabulator-header .tabulator-col[aria-sort] .tabulator-col-title {
    color: #fff !important;
}

/* ── Combo / list-editor popups (header filters & editors) ── */
.tabulator-popup-container {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
}
.tabulator-edit-list {
    background: var(--surface-3);
}
.tabulator-edit-list .tabulator-edit-list-item {
    color: var(--text);
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.tabulator-edit-list .tabulator-edit-list-item.active,
.tabulator-edit-list .tabulator-edit-list-item:hover {
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}
.tabulator-edit-list .tabulator-edit-list-placeholder {
    color: var(--muted);
    padding: 6px 10px;
}
.tabulator-edit-list .tabulator-edit-list-group {
    color: var(--muted);
    background: var(--surface-2);
    padding: 6px 10px;
}
/* Focus ring of the list-filter input: green, not browser blue */
.tabulator .tabulator-header-filter input:focus,
.tabulator .tabulator-header-filter select:focus,
.tabulator input.tabulator-edit-list-input:focus {
    outline: none !important;
    border-color: var(--accent) !important;
}
input.tabulator-edit-list-input {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    font-family: inherit;
}

/* ── NDT chart threshold lines ── */
.emi-warn  { stroke: #FFD54F; stroke-dasharray: 4 3; stroke-width: 1; }
.emi-alarm { stroke: var(--danger); stroke-dasharray: 4 3; stroke-width: 1; }
.detail-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ══ Full-height app layout (no page scroll) ══ */
html, body { height: 100%; }
body { overflow: hidden; display: flex; flex-direction: column; }
.header, .tab-bar { flex-shrink: 0; }
.container {
    flex: 1;
    min-height: 0;
    max-width: none;
    width: 100%;
    padding: 8px 16px 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tab-pane.active { flex: 1; min-height: 0; }
#pane-tracking.active { display: flex; flex-direction: column; overflow: hidden; }
#pane-linetables.active, #pane-line.active, #pane-cameras.active, #pane-settings.active {
    display: block;
    overflow-y: auto;
}
.toolbar { flex-shrink: 0; padding: 4px 0 8px; }
.stats { flex-shrink: 0; margin-bottom: 8px; }
.stat-card { padding: 5px 12px; flex-direction: row; align-items: baseline; gap: 8px; }
.stat-value { font-size: 16px; }
#tabla-tubos { flex: 1; min-height: 140px; }
.hint { flex-shrink: 0; margin: 6px 2px; }

/* ── Detail section with sub-tabs ── */
.detail-section {
    flex-shrink: 0;
    height: 305px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px 14px 10px;
}
.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.detail-header h2 { margin: 0 0 6px; }

.detail-subtabs { display: flex; gap: 2px; }
.dtab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 12px;
    font-family: inherit;
    padding: 4px 12px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.dtab:hover { color: var(--text); }
.dtab.active { color: #fff; border-bottom-color: var(--accent); }

.dpane { display: none; }
.dpane.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#dpane-log.active { overflow: hidden; }
#tabla-historial { flex: 1; min-height: 0; }

.dpane-title {
    margin: 4px 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: #ccc;
    flex-shrink: 0;
}
.dpane .pyro-chart { max-width: 1000px; }
.dpane .pyro-svg { max-height: 210px; }
.dpane .process-piece { max-width: 640px; border: none; padding: 4px 0; background: transparent; }

/* ══ Detail: log + chart tile grid (maximize in place) ══ */
.detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    flex: 1;
    min-height: 0;
}
.detail-log { display: flex; min-height: 0; }
.detail-log #tabla-historial { flex: 1; min-height: 0; }

.chart-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    min-height: 0;
}
.chart-tile {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    cursor: pointer;
    transition: border-color 0.15s;
}
.chart-tile:hover { border-color: var(--accent); }
.tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 3px 8px;
    border-bottom: 1px solid #333;
    font-size: 10px;
    color: #aaa;
    flex-shrink: 0;
}
.tile-head span:first-child {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-max { color: #666; display: inline-flex; }
.tile-max .ic { width: 11px; height: 11px; }
.chart-tile:hover .tile-max { color: var(--accent); }

.tile-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 4px 6px;
    font-size: 11px;
}
.tile-body p { margin: 4px; font-size: 10px; }
.tile-body > svg { width: 100%; height: 100%; display: block; }

/* Maximize: the clicked tile takes the whole grid */
.chart-grid.maxed .chart-tile { display: none; }
.chart-grid.maxed .chart-tile.max {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}
/* Hide chart legends in overview; show them when maximized */
.chart-grid:not(.maxed) .pyro-legend { display: none; }
.chart-grid.maxed .chart-tile.max .tile-body { overflow: hidden; }

/* Summary tile */
.sum-row {
    display: flex;
    gap: 8px;
    padding: 1px 2px;
    font-size: 10px;
    align-items: baseline;
    overflow: hidden;
    white-space: nowrap;
}
.sum-row > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.sum-k { color: var(--muted); min-width: 62px; text-transform: uppercase; font-size: 9px; letter-spacing: 0.3px; }
.sum-mono { font-family: var(--mono); }
.sum-row .badge { font-size: 9px; padding: 0 8px; }
.sum-row .grade-chip { padding: 1px 3px; }
.sum-row .grade-band { width: 4px; height: 9px; }

/* Process-piece tile: compact form */
.tile-pp .process-piece { max-width: none; }
.tile-pp .pp-grid { gap: 4px 8px; }
.tile-pp .pp-grid label { font-size: 9px; gap: 2px; }
.tile-pp .pp-grid select, .tile-pp .pp-grid input { padding: 3px 6px; font-size: 11px; }
.tile-pp .pp-grid .btn { padding: 4px 8px; font-size: 11px; }
.tile-pp .pp-note { margin: 4px 0 0; font-size: 9px; }

/* ── Draggable divider between table and detail ── */
.detail-resize-handle {
    flex-shrink: 0;
    height: 5px;
    margin: 1px 0;
    border-radius: 3px;
    cursor: row-resize;
    background: transparent;
    transition: background 0.15s;
    touch-action: none;
}
.detail-resize-handle:hover,
.detail-resize-handle.dragging { background: var(--accent); }

/* ── Vertical divider inside the detail body (log | charts) ── */
.detail-body {
    grid-template-columns: var(--log-w, calc(50% - 9px)) 6px minmax(0, 1fr);
    gap: 0 6px;
}
.detail-vresize-handle {
    cursor: col-resize;
    border-radius: 3px;
    background: transparent;
    transition: background 0.15s;
    touch-action: none;
}
.detail-vresize-handle:hover,
.detail-vresize-handle.dragging { background: var(--accent); }

/* Plotly charts fill their tile */
.tile-body.js-plotly-plot, .tile-body .js-plotly-plot { width: 100%; height: 100%; }
.js-plotly-plot .modebar { filter: saturate(0.4); }

/* Maximize only from the tile header; chart body belongs to Plotly */
.chart-tile { cursor: default; }
.tile-head { cursor: pointer; }
.tile-head:hover { background: rgba(76, 175, 80, 0.08); }

/* ── Genealogy tab ── */
#pane-genealogy.active { display: block; overflow-y: auto; }

.gen-view { padding-top: 4px; }
.gen-heat-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.gen-heat-title { font-size: 12px; color: var(--muted); letter-spacing: 0.5px; }
.gen-heat-no { font-family: var(--mono); font-size: 16px; color: #fff; margin-left: 6px; }
.gen-heat-stats { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); flex-wrap: wrap; }

.gen-coils {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 8px;
    margin-left: 22px;
    border-left: 1px dashed var(--border-soft);
    padding-left: 14px;
}
.gen-coil-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 8px 12px;
}
.gen-coil-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.gen-coil-id { font-family: var(--mono); font-size: 12px; color: #fff; }
.gen-coil-meta { font-size: 11px; color: var(--muted); margin: 2px 0 6px; }

.lv-chip.c-scrap {
    border-color: rgba(239, 83, 80, 0.6);
    border-style: dashed;
    color: #b98884;
    text-decoration: line-through;
}
/* Heat cells are clickable → genealogy */
.tabulator-cell[tabulator-field="heat"] { cursor: pointer; color: #8fb4e8; }

/* ── Genealogy: coil provenance bar ── */
.coil-bar {
    position: relative;
    height: 14px;
    background: #191919;
    border: 1px solid #333;
    border-radius: 3px;
    margin: 6px 0 2px;
    overflow: hidden;
}
.coil-seg {
    position: absolute;
    top: 0; bottom: 0;
    border-right: 1px solid #111;
    cursor: pointer;
    opacity: 0.9;
}
.coil-seg:hover { filter: brightness(1.5); opacity: 1; }
.coil-seg.s-proc  { background: #FFB74D; }
.coil-seg.s-prime { background: #4CAF50; }
.coil-seg.s-hold  { background: #EF5350; }
.coil-seg.s-scrap { background: #7a3b36; }
.coil-seg.s-splice {
    background: repeating-linear-gradient(45deg, #BA68C8, #BA68C8 3px, #6d3a78 3px, #6d3a78 6px);
}
.coil-bar-scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 9px;
    color: #666;
    margin-bottom: 6px;
}
.lv-chip.c-splice { border-color: rgba(186, 104, 200, 0.7); color: #cfa3d6; }
.s-splice-txt { color: #BA68C8; }

.gen-sub-title {
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--accent);
    margin: 12px 0 6px 22px;
}

/* ── Ghost icon button (header) ── */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    font-size: 12px;
    color: var(--muted);
}
.user-chip[hidden] { display: none; }
.user-chip .ic { width: 13px; height: 13px; }
.user-chip .btn-ghost { padding: 3px; }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: #ccc;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-ghost:hover { background: var(--surface-3); color: #fff; }

/* ── Flash highlight in genealogy (arriving from a Tracking row) ── */
@keyframes gen-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
  30%, 70% { box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.85); }
}
.gen-flash {
  animation: gen-flash 0.8s ease-in-out 3;
  position: relative;
  z-index: 2;
}

/* ── Frozen columns: opaque above scrolling content ── */
.tabulator .tabulator-header .tabulator-col.tabulator-frozen {
    background: var(--surface);
    z-index: 20;
}
.tabulator-row .tabulator-cell.tabulator-frozen {
    background: var(--bg);
    z-index: 10;
}
.tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen { background: #232323; }
.tabulator-row.tabulator-selectable:hover .tabulator-cell.tabulator-frozen { background: var(--surface-3); }
.tabulator-row.tabulator-selected .tabulator-cell.tabulator-frozen { background: #1d3524; }
.tabulator .tabulator-frozen.tabulator-frozen-left { border-right: 2px solid var(--border); }

/* ── Reports tab ── */
#pane-reports.active { display: block; overflow-y: auto; }

.rep-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 16px 20px 18px;
    margin-bottom: 14px;
    max-width: 1280px;
}
.rep-card-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.rep-table-wrap { overflow-x: auto; }
.rep-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}
.rep-table col.metric { width: 180px; }
.rep-table th, .rep-table td {
    padding: 10px 18px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid #333;
    font-family: var(--mono);
    font-size: 13px;
    min-width: 110px;
}
.rep-table thead th {
    color: var(--accent);
    font-size: 13px;
    text-align: right;
    padding-top: 4px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}
.rep-table thead th:first-child { min-width: 180px; }
.rep-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.015); }
.rep-table tbody tr:hover td { background: rgba(76, 175, 80, 0.05); }
.rep-table tbody tr:last-child td { border-bottom: none; }
.rep-table .rep-metric {
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
    color: #aaa;
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--surface);
}
.rep-table tr.rep-row-nok_rate_pct td {
    background: rgba(255, 255, 255, 0.035);
    font-weight: 700;
    border-bottom: 2px solid var(--border);
}
.rep-table tr.rep-row-nok_rate_pct .rep-metric { color: #ddd; }

/* Sticky metric column must stay opaque per row state — the zebra/hover/NOK
   rules paint semi-transparent rgba on td and would otherwise win, letting
   scrolled columns bleed through underneath. */
.rep-table .rep-metric {
    z-index: 2;
    border-right: 1px solid var(--border-soft);
}
.rep-table tbody tr:nth-child(even) .rep-metric { background: #303030; }
.rep-table tbody tr:hover .rep-metric { background: #2e332e; }
.rep-table tr.rep-row-nok_rate_pct .rep-metric { background: #343434; }
.rep-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--surface);
    border-right: 1px solid var(--border-soft);
}
.rep-table td.rep-ok   { color: var(--accent); }
.rep-table td.rep-warn { color: var(--warn); }
.rep-table td.rep-bad  { color: var(--danger); }

/* Drillable bucket headers */
.rep-table th.rep-drill { cursor: pointer; transition: background 0.15s, color 0.15s; }
.rep-table th.rep-drill:hover { color: #fff; background: var(--surface-3); }

/* Breadcrumbs */
.rep-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rep-crumb {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    padding: 3px 9px;
    cursor: pointer;
}
.rep-crumb:hover { border-color: var(--accent); }
.rep-crumb.current { border-color: var(--accent); color: var(--accent); }
.rep-crumb-sep { color: var(--muted); font-size: 10px; }

/* Pareto */
.rep-pareto { max-width: 900px; padding-top: 6px; }
.pareto-row {
    display: grid;
    grid-template-columns: 220px 92px 1fr 52px;
    gap: 14px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #333;
    font-size: 12px;
}
.pareto-row:last-child { border-bottom: none; }
.pareto-label {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pareto-station {
    justify-self: start;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 10px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
}
.pareto-bar-wrap {
    background: var(--surface-2);
    border-radius: 8px;
    height: 16px;
    overflow: hidden;
}
.pareto-bar {
    background: linear-gradient(90deg, #c62828, var(--danger));
    height: 100%;
    border-radius: 8px;
    min-width: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.pareto-count {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--danger);
    text-align: right;
}


/* Reports toolbar: contained bar, even 30px controls */
#pane-reports .toolbar {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 10px 16px;
    margin: 2px 0 14px;
    gap: 20px;
    max-width: 1280px;
}
#pane-reports .toolbar select {
    height: 30px;
    min-width: 110px;
}
#rep-prev, #rep-next {
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
}
#rep-range {
    min-width: 74px;
    text-align: center;
}

/* ── Tracking time-window chip (from Reports drill) ── */
.track-window {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 5px 10px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--accent);
}
.track-window[hidden] { display: none; }
.track-window .ic { width: 13px; height: 13px; }
.track-window button {
    background: none; border: none; color: var(--accent);
    cursor: pointer; font-size: 13px; padding: 0 2px;
}
.track-window button:hover { color: #fff; }

/* ── Report "open in tracking" affordance ── */
.rep-goto {
    display: inline-block;
    margin-left: 8px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}
.rep-goto:hover { color: var(--accent); }

/* ══ Mobile mode (narrow screens): card list instead of the big table ══ */

.mobile-filters, .mobile-cards, .detail-back { display: none; }

@media (max-width: 840px) {

    /* ── Chrome: compact header + swipeable tab bar ── */
    .header { padding: 6px 10px; gap: 8px; }
    .header-title { font-size: 13px; letter-spacing: 1px; }
    #btn-fullscreen, .status-label, .user-chip #user-email,
    .header-brands { display: none; }
    .user-chip { padding: 3px 4px; }
    .header .btn { padding: 5px 10px; font-size: 11px; }

    .tab-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab-item { padding: 8px 10px; font-size: 11px; flex-shrink: 0; }

    .container { padding: 6px 8px 8px; }

    /* ── Tracking toolbar: search + window chip only ── */
    .toolbar { flex-wrap: wrap; gap: 6px; }
    .search-wrap { flex: 1 1 100%; }
    #btn-csv, #btn-clear-filters,
    .toolbar-group:has(#group-select) { display: none; }
    .track-window { flex: 1 1 auto; }
    #track-period-group { flex-wrap: wrap; row-gap: 6px; flex: 1 1 100%; }
    #track-period-group label { display: none; }
    #track-period { flex: 1; }

    /* ── Stats: 5 tight cards ── */
    .stats { grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 6px; }
    .stat-card { padding: 4px 2px; flex-direction: column; align-items: center; gap: 0; }
    .stat-label { font-size: 8px; letter-spacing: 0; }
    .stat-value { font-size: 14px; }

    /* ── Card list replaces the table ── */
    #tabla-tubos, .hint, #detail-resize { display: none; }

    .mobile-filters {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        flex-shrink: 0;
        padding: 0 0 8px;
        scrollbar-width: none;
    }
    .mobile-filters::-webkit-scrollbar { display: none; }
    .m-chip {
        background: var(--surface);
        border: 1px solid var(--border-soft);
        border-radius: 20px;
        color: var(--muted);
        font-family: inherit;
        font-size: 11px;
        padding: 4px 10px;
        white-space: nowrap;
        cursor: pointer;
    }
    .m-chip b { color: var(--text); font-weight: 600; margin-left: 2px; }
    .m-chip.active { border-color: var(--accent); color: var(--accent); }
    .m-chip.active b { color: var(--accent); }

    .mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 8px;
    }
    .m-card {
        background: var(--surface);
        border: 1px solid var(--border-soft);
        border-radius: 6px;
        padding: 8px 10px;
        cursor: pointer;
        flex-shrink: 0;
    }
    .m-card:active { border-color: var(--accent); }
    .m-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .m-id { font-family: var(--mono); font-size: 14px; font-weight: 600; color: #fff; }
    .m-meta { color: var(--muted); font-size: 11px; margin: 3px 0 5px; }
    .m-station { font-size: 12px; color: var(--text); }
    .m-station > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .m-progress {
        flex: 1;
        height: 4px;
        border-radius: 2px;
        background: var(--surface-3);
        overflow: hidden;
    }
    .m-progress i { display: block; height: 100%; background: var(--accent); }
    .m-pct { font-family: var(--mono); font-size: 10px; color: var(--muted); }
    .m-sparks { display: flex; gap: 14px; margin-top: 6px; align-items: center; }
    .m-spark { display: inline-flex; align-items: center; gap: 5px; }
    .m-spark i { font-style: normal; font-size: 8px; color: var(--muted); letter-spacing: 0.5px; }
    .m-more {
        background: var(--surface-2);
        border: 1px dashed var(--border);
        border-radius: 6px;
        color: var(--muted);
        font-family: inherit;
        font-size: 12px;
        padding: 10px;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* ── Detail: full-screen overlay, tiles stacked ── */
    .detail-section {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 100;
        height: auto;
        border-radius: 0;
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
    }
    body.m-detail-open .detail-section { display: flex; }
    .detail-back { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .detail-header { gap: 8px; flex-wrap: nowrap; align-items: flex-start; }
    .detail-header h2 { font-size: 12px; min-width: 0; }
    .detail-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .detail-log { flex: 0 0 auto; height: 220px; }
    #detail-vresize { display: none; }
    .chart-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 0 0 auto;
        overflow: visible;
    }
    .chart-tile { height: 230px; flex: 0 0 auto; }
    .chart-tile.tile-pp { height: auto; }
    .tile-max { display: none; }

    /* ── Reports: pareto rows wrap to two lines ── */
    .pareto-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "label station" "bar count";
        gap: 4px 10px;
    }
    .pareto-label { grid-area: label; }
    .pareto-station { grid-area: station; justify-self: end; }
    .pareto-bar-wrap { grid-area: bar; }
    .pareto-count { grid-area: count; }

    /* ── Reports: let the table scroll instead of crushing its columns ── */
    .rep-table { table-layout: auto; min-width: 700px; }
    .rep-table col.metric { width: 120px; }
    .rep-table thead th:first-child { min-width: 120px; }
    .rep-table th, .rep-table td { padding: 8px 10px; font-size: 12px; }

    /* ── Other tabs: reflow / pan ── */
    #line-view { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #line-view svg { min-width: 1050px; }
    .gen-view { overflow-x: auto; }
    .camera-grid, .settings-grid { grid-template-columns: 1fr; }
    .rep-card { padding: 8px; }
    .rep-crumbs { flex-wrap: wrap; }
}

/* ══ Mobile: AI chat panel goes full-screen ══ */
/* The panel lib (common-libs) sets inline width/height on drag-resize and
   restore, hence the !important overrides. Lib itself stays untouched. */
@media (max-width: 840px) {
    .q-assistant-panel {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-width: 0 !important;
        border-radius: 0 !important;
        border: none !important;
    }
    /* No drag-resize on touch, and slim down the header so it fits */
    .q-assistant-resize-left,
    .q-assistant-resize-top,
    .q-assistant-resize-corner,
    .q-assistant-header .resize-btn,
    .q-assistant-opacity-slider { display: none !important; }
    .q-assistant-header { flex-wrap: wrap; gap: 4px; padding: 8px 10px; }
    .q-assistant-model-select { max-width: 110px; }
}