:root {
    /* Sense dark mode (default) */
    --bg: #021940;
    --fg: rgb(255, 255, 255);
    --accent: #fc9077;
    --secondary: #6690e1;
    --tertiary: #66b4c4;
    --border: rgba(255, 255, 255, 0.3);
    --hover-bg: rgba(255, 255, 255, 0.1);
    --selected-bg: rgba(102, 144, 225, 0.2);
    --chart-gap: #354766;   /* opaque: --fg at 20% over --bg */
    /* Waveform line colors */
    --line-voltage-1: #fc9077;
    --line-voltage-2: #f5d76e;
    --line-amperage-1: #6690e1;
    --line-amperage-2: #66b4c4;
    /* Link colors */
    --link: #5cb8ff;
    --link-visited: #b8d4ff;
}

[data-theme="light"] {
    --bg: #ffffff;
    --fg: #021940;
    --accent: #f9461c;
    --secondary: #0046cd;
    --tertiary: #00829d;
    --border: rgba(2, 25, 64, 0.3);
    --hover-bg: rgba(2, 25, 64, 0.05);
    --selected-bg: rgba(0, 70, 205, 0.1);
    --chart-gap: #ccd1d9;   /* opaque: --fg at 20% over --bg */
    /* Waveform line colors */
    --line-voltage-1: #f9461c;
    --line-voltage-2: #d4a017;
    --line-amperage-1: #0046cd;
    --line-amperage-2: #00829d;
    /* Link colors */
    --link: #0046cd;
    --link-visited: #5c3d99;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: var(--link);
}

a:visited {
    color: var(--link-visited);
}

html, body {
    height: 100%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--fg);
    background-color: var(--bg);
}

body {
    padding: 10px;
    display: flex;
    overflow: hidden;
}

/* ── layout panes ─────────────────────────────── */
.left-panel {
    width: 27%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    padding-right: 20px;
}

.right-panel {
    width: 73%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
}

/* ── header ─────────────────────────────────────── */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 20px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 15px;
}

.header-title {
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-title img {
    height: 28px;
}

.header-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

.connection-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #888;
}

.status-dot.connected {
    background-color: #4ade80;
}

.status-dot.disconnected {
    background-color: #f87171;
}

.status-dot.connecting {
    background-color: #fbbf24;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── feed list ──────────────────────────────────── */
.feed-header {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.new-anomalies-pill {
    width: 100%;
    margin: 0 0 10px 0;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--selected-bg);
    color: var(--fg);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.new-anomalies-pill:hover {
    background-color: var(--hover-bg);
}

.feed-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feed-item {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
}

.feed-item-text {
    font-weight: normal;
}

.feed-item:hover {
    background-color: var(--hover-bg);
}

.feed-item.selected {
    background-color: var(--selected-bg);
    border-color: var(--secondary);
}

.feed-item.unseen {
    border-left: 4px solid var(--accent);
    background-color: rgba(252, 144, 119, 0.1);
}

.feed-item.unseen .feed-item-text::before {
    content: "\2022 ";
    color: var(--accent);
}

.feed-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.feed-item-type {
    font-weight: 600;
    font-size: 15px;
}

.feed-item-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.feed-item-status.new {
    background-color: var(--accent);
    color: var(--bg);
}

.feed-item-status.confirmed {
    background-color: var(--secondary);
    color: white;
}

.feed-item-status.resolved {
    background-color: var(--tertiary);
    color: var(--bg);
}

.feed-item-meta {
    font-size: 13px;
    opacity: 0.8;
    display: flex;
    gap: 15px;
}

.feed-item-summary {
    font-size: 13px;
    margin-top: 6px;
    opacity: 0.9;
}

/* ── detail panel ───────────────────────────────── */
.detail-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.detail-header {
    font-size: 18px;
    font-weight: 600;
}

.detail-share-btn {
    font-size: 12px;
    padding: 5px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.detail-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0.6;
    border: 1px dashed var(--border);
    border-radius: 4px;
}

.detail-content {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;   /* whole detail scrolls when content (e.g. a long table) runs past the page */
}

.detail-content.visible {
    display: flex;
}

/* ── top split: table + map side by side ────────── */
.detail-top-split {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.detail-info {
    flex: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);   /* content-height rows (2nd row no longer stretched) */
    gap: 8px;
}

.detail-info .notes-section {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.detail-info-item {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.detail-info-label {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 4px;
}

.detail-info-value {
    font-size: 16px;
    font-weight: 600;
}

/* feature-14 provenance/retention in the detail boxes */
.detail-prov { font-size: 11px; font-weight: 400; opacity: 0.6; margin-top: 3px; word-break: break-word; }
.detail-prov .detail-ovr { color: var(--accent); font-weight: 600; opacity: 1; }
.detail-ret { font-size: 14px; font-weight: 400; word-break: break-word; }
.detail-none { font-size: 14px; font-weight: 400; opacity: 0.55; }

/* ── map ────────────────────────────────────────── */
.map-container {
    flex: 1;
    min-height: 175px;
    border-radius: 4px;
    background-color: var(--hover-bg);
}

/* ── waveform plots ─────────────────────────────── */
.waveform-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.waveform-container {
    position: relative;
    height: 150px;
}

.waveform-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    opacity: 0.6;
}

.axis path,
.axis line {
    stroke: currentColor;
    fill: none;
}

.axis text {
    fill: currentColor;
    font-size: 12px;
}

.grid line {
    stroke: currentColor;
    stroke-opacity: 0.2;
    shape-rendering: crispEdges;
}

.grid path {
    display: none;
}

/* crosshair target lines + value tooltip on the waveform plots */
.wf-crosshair {
    stroke: var(--fg);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    opacity: 0.55;
    pointer-events: none;
    shape-rendering: crispEdges;
}

.wf-tip {
    pointer-events: none;
}

.wf-tip-bg {
    fill: var(--bg);
    stroke: var(--border);
    stroke-width: 1;
    opacity: 0.92;
}

.wf-tip-text {
    fill: var(--fg);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* ── observations table ─────────────────────────── */
.observations-section {
    margin-top: 20px;
    position: relative;
}

.observations-section table {
    display: block;
}

.observations-section thead,
.observations-section tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.observations-section tbody {
    display: block;
}

.observations-section tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.observations-header {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

thead th {
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    text-align: left;
    padding: 6px 8px;
}

tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
}

tbody tr:hover {
    background-color: var(--hover-bg);
}

tbody tr.selected {
    background-color: var(--selected-bg);
}

tbody tr.selected:hover {
    background-color: var(--selected-bg);
}

/* ── controls ───────────────────────────────────── */
select {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: var(--secondary);
}

.btn {
    padding: 8px 16px;
    background-color: var(--bg);
    color: var(--fg);
    border: 1px solid var(--fg);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.1s ease;
}

.btn:hover {
    opacity: 0.9;
    background-color: var(--hover-bg);
}

.btn:active {
    transform: scale(0.98);
}

/* ── scrollbar styling ──────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--fg);
    opacity: 0.5;
}

/* Login styles */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.login-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 40px;
    width: 100%;
    max-width: 360px;
}

.login-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 32px;
    justify-content: center;
}

.login-header img {
    height: 24px;
}

.login-field {
    margin-bottom: 20px;
}

.login-field label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--fg);
    opacity: 0.8;
}

.login-field input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
}

.login-field input:focus {
    outline: none;
    border-color: var(--secondary);
}

/* password show/hide toggle */
.password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrap input {
    padding-right: 64px;  /* room for the toggle button */
}

.password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    color: var(--secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
}

.password-toggle:hover {
    background-color: var(--hover-bg);
}

.login-error {
    color: var(--accent);
    font-size: 13px;
    margin-bottom: 16px;
    min-height: 18px;
}

.login-button {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-button:hover {
    opacity: 0.9;
}

.app-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 10px;
}

/* ── top bar + tabs ─────────────────────────────── */
.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    /* No bottom padding: the tabs are the tallest item, so their bottom edge
       sits directly on the border line (folder-tab look, no bg-color gap). */
    padding: 4px 4px 0 4px;
    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    /* Align on the baseline so the logo's horizontal stroke sits on the text
       baseline and its triangular tail hangs below like a glyph descender. */
    align-items: baseline;
    /* Share a baseline with .tabs so "Starfield" sits on the same line as the tab
       labels; the tabs are the tallest item, so they and the bar don't move. */
    align-self: baseline;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.brand img {
    height: 26px;
    /* Baseline alignment puts the image's bottom edge (the descender tip) on the
       text baseline. The sense.svg glyph's descender -- the triangle below the
       house stroke -- is the bottom 1.25/6 of its height, so nudge the image down
       by that much to land the horizontal stroke (not the tip) on the baseline;
       the tail then hangs below like a real glyph descender. = (1.25/6) * 26px.
       A relative offset is visual-only, so it doesn't disturb the text. */
    position: relative;
    top: calc(26px * 0.208333);
    /* Baseline alignment also lets the 26px image (taller than the text's ascent)
       grow the row and push the text down. The negative top margin keeps the image
       from contributing above the text's ascent, so the text stays where it sat
       under centred alignment and only the logo moves. */
    margin-top: -10px;
}

.tabs {
    display: flex;
    align-self: baseline;
    gap: 6px;
}

.tab {
    padding: 8px 18px;
    background: transparent;
    color: var(--fg);
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.7;
}

.tab:hover {
    background-color: var(--hover-bg);
    opacity: 1;
}

.tab.active {
    opacity: 1;
    background-color: var(--selected-bg);
    border-color: var(--border);
    border-bottom-color: transparent;
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

.current-user {
    font-size: 13px;
    opacity: 0.8;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logout-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
}

.logout-btn:hover {
    background-color: var(--hover-bg);
}

/* ── views ──────────────────────────────────────── */
.view {
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* ── admin / users page ─────────────────────────── */
.admin-wrap {
    height: 100%;
    overflow-y: auto;
    padding: 4px 2px 20px 2px;
}

.admin-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0.6;
    border: 1px dashed var(--border);
    border-radius: 4px;
}

.admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.admin-toolbar h2 {
    font-size: 18px;
    font-weight: 600;
}

.admin-status {
    font-size: 13px;
    min-height: 18px;
    margin-bottom: 8px;
    opacity: 0.85;
}

.admin-status.error {
    color: var(--accent);
    opacity: 1;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.users-table th,
.users-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.users-table th {
    font-weight: 600;
}

.perm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.perm-chip {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--selected-bg);
    white-space: nowrap;
}

.perm-chip.expired {
    opacity: 0.5;
    text-decoration: line-through;
}

.row-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.mini-btn {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
}

.mini-btn:hover:not(:disabled) {
    background-color: var(--hover-bg);
}

.mini-btn.danger {
    border-color: var(--accent);
    color: var(--accent);
}

.mini-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* user create/edit editor */
.user-form {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
    margin: 6px 0 14px 0;
    background: var(--hover-bg);
}

.user-form h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 14px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-field label {
    font-size: 12px;
    opacity: 0.75;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="datetime-local"] {
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
}

.form-field.checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.perm-editor {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-bottom: 14px;
}

.perm-editor-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}

.perm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
}

.perm-row .perm-name {
    width: 180px;
}

.perm-row .perm-desc {
    opacity: 0.6;
    font-size: 12px;
    flex: 1;
}

.perm-row select {
    padding: 4px 8px;
    font-size: 12px;
}

.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

/* ── notes section ─────────────────────────────── */
.notes-section {
    margin-bottom: 15px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

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

.notes-char-count {
    font-size: 12px;
    font-weight: normal;
    opacity: 0.6;
}

#notes-textarea {
    width: 100%;
    min-height: 0;
    height: calc(2em * 1.3 + 20px);
    padding: 10px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.3;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
    resize: vertical;
}

#notes-textarea:focus {
    outline: none;
    border-color: var(--secondary);
}

.notes-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.notes-save-btn {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.notes-save-btn:hover:not(:disabled) {
    opacity: 0.9;
}

.notes-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.notes-status {
    font-size: 12px;
    opacity: 0.7;
}

.notes-status.saved {
    color: #4ade80;
}

.notes-status.error {
    color: var(--accent);
}

/* ── settings view ─────────────────────────────── */
.settings-wrap {
    height: 100%;
    overflow-y: auto;
    padding: 4px 2px 20px 2px;
    max-width: 520px;
}

.settings-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.settings-label {
    font-size: 13px;
    font-weight: 600;
}

.settings-section select:disabled { opacity: 0.5; cursor: not-allowed; }

.settings-hint {
    font-size: 12px;
    opacity: 0.6;
}

/* ── feed-family workspace (Live / Waveform / Hypothesis) ─── */
.view-workspace {
    display: flex;
    gap: 10px;
}

.left-mode {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.selection-criteria {
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.section-header {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}

.filter-form label {
    display: block;
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 4px;
}

.filter-row {
    display: flex;
    gap: 8px;
}

.filter-row input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
}

.filter-row input:focus {
    outline: none;
    border-color: var(--secondary);
}

/* Impedance tab (feature-09) */
.imp-wrap { display: flex; gap: 20px; flex: 1; min-width: 0; height: 100%; padding: 20px; box-sizing: border-box; overflow: hidden; }
.imp-sidebar { width: 280px; flex-shrink: 0; overflow-y: auto; }
.imp-results { flex: 1; min-width: 0; overflow: auto; }
.imp-forbidden { flex: 1; display: flex; align-items: center; justify-content: center; opacity: 0.6; font-size: 15px; }
.imp-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.imp-subtitle { font-size: 14px; font-weight: 600; margin: 22px 0 8px; }
.imp-empty { opacity: 0.6; padding: 16px 0; font-size: 13px; }
.imp-pivot, .imp-table { border-collapse: collapse; font-size: 13px; }
.imp-pivot th, .imp-pivot td, .imp-table th, .imp-table td {
    border: 1px solid var(--border); padding: 6px 12px; text-align: right;
}
.imp-pivot thead th, .imp-table thead th { text-align: center; font-weight: 600; background: rgba(127, 127, 127, 0.08); }
.imp-pivot tbody th, .imp-table td.l, .imp-table th.l { text-align: left; font-weight: 500; }
.imp-table { width: 100%; }

/* single-home impedance chart: stretches with no packets, drawn opaque over the lines */
.imp-gap { fill: var(--chart-gap); }
.imp-export { display: inline-block; margin-top: 4px; font-size: 11px; }
.imp-total-row td { border-top: 2px solid var(--border); font-weight: 600; }

/* Waveforms aggregate scatter (feature-12) */
.wf-scatter { width: 100%; height: 300px; margin-top: 6px; }
.wf-scatter svg { overflow: visible; }
.wf-hiconf-line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: 0.9; }
.wf-hiconf-label { fill: var(--accent); font-size: 10px; font-weight: 600; }
.wf-link { color: var(--link); cursor: pointer; text-decoration: none; }
.wf-link:hover { text-decoration: underline; }

/* Chrome/WebKit renders the date-picker calendar icon dark; invert it on dark themes so
   it's visible. Light themes keep the default dark glyph. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.7; }
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,

/* datetime-local needs more width than a date input; stack from/to in the filter form */
.filter-form .f-dates { flex-direction: column; }
.filter-form .f-dates input { flex: none; width: 100%; box-sizing: border-box; }

/* Classification-override modal (feature-14) */
.ov-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
}
.ov-modal {
    background: var(--bg); color: var(--fg);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 16px; width: 600px; max-width: 92vw;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
.detail-override-btn { margin-top: 6px; font-size: 11px; padding: 3px 8px; }

/* Waveform detail: Export COMTRADE + Go-to-hypothesis on one row, splitting the width */
.detail-action-row { display: flex; gap: 8px; grid-column: 1 / -1; }
.detail-action-row > * { flex: 1 1 0; text-align: center; }
.detail-action-row .hyp-link { display: flex; align-items: center; justify-content: center; }
.ov-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.ov-sub { font-size: 12px; opacity: 0.8; margin-bottom: 10px; }
.ov-list { width: 100%; margin-bottom: 12px; }
.ov-buttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }
.ov-primary { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.ov-danger { border-color: var(--accent); color: var(--accent); }

/* feature-16: Retain button (waveform selection pane) + retain modal fields.
   .f-actions puts Apply and Retain at opposite ends of the row. Disabled buttons
   keep their box (not hidden) so their title tooltip explains why. */
.f-actions { justify-content: space-between; align-items: center; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background-color: var(--bg); opacity: 0.4; }
.ov-modal .f-label { display: block; font-size: 12px; opacity: 0.7; margin: 10px 0 4px; }
.rt-user { font-size: 13px; margin-bottom: 4px; }
.ov-modal .rt-reason {
    width: 100%; box-sizing: border-box; resize: vertical;
    padding: 8px 10px; font-size: 13px; border: 1px solid var(--border);
    border-radius: 4px; background: var(--bg); color: var(--fg);
}
.ov-modal .rt-until {
    padding: 7px 9px; font-size: 13px; border: 1px solid var(--border);
    border-radius: 4px; background: var(--bg); color: var(--fg);
}
.imp-pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; }
.imp-pager .btn { padding: 4px 10px; font-size: 12px; }
.agg-page-select { margin-bottom: 14px; }
.agg-page-select .f-label { margin-top: 0; }
#agg-page {
    width: 100%; box-sizing: border-box; padding: 7px 9px; font-size: 14px; font-weight: 600;
    border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--fg);
}

/* DB admin tab (feature-11) */
.view-db { overflow-y: auto; }
.db-wrap { max-width: 900px; margin: 0 auto; padding: 16px 20px 40px; }
.db-section { margin-bottom: 24px; }
.db-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.db-row label { display: flex; flex-direction: column; font-size: 12px; opacity: 0.85; gap: 4px; }
.db-row input, .db-row select {
    padding: 6px 8px; font-size: 13px; border: 1px solid var(--border);
    border-radius: 4px; background: var(--bg); color: var(--fg);
}
.db-total { font-size: 13px; margin-bottom: 8px; }
.db-job { font-size: 13px; opacity: 0.85; word-break: break-all; }
.db-danger { border-color: var(--accent); color: var(--accent); }
.db-danger:disabled { opacity: 0.4; }

/* Structured filter form controls (feature-07) */
.filter-form .f-label {
    display: block;
    font-size: 12px;
    opacity: 0.7;
    margin: 10px 0 4px;
}
.filter-form .f-level,
.filter-form .f-conf,
.filter-form .f-values,
.filter-form .f-values-text {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
}
.filter-form .f-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 8px 0;
}
.filter-form .f-mode label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 12px;
    opacity: 1;
    cursor: pointer;
}
.filter-form .f-values-wrap { margin-bottom: 4px; }
.filter-form .f-values { height: auto; }
.filter-form .f-values-text { margin-top: 0; }
.filter-form .f-dates { margin-bottom: 4px; }
.filter-form .btn { margin-top: 10px; }

/* "Go to linked hypothesis" link on the Waveform detail */
.hyp-link {
    grid-column: 1 / -1;
    display: block;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--secondary);
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
}

.hyp-link:hover {
    background-color: var(--hover-bg);
}

/* ── impedance placeholder ─────────────────────── */
.view-impedance {
    overflow: hidden;
}

/* ── sensor configuration tab ─────────────────── */
.view-sensor-config {
    display: block;
    position: relative;
    overflow-y: auto;
}

.sc-placeholder {
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0.6;
    border: 1px dashed var(--border);
    border-radius: 4px;
    padding: 40px;
    display: flex;
}

.sc-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 4px 2px 24px 2px;
}

.sc-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
}

.sc-selector {
    margin-bottom: 16px;
}

.sc-selector > label {
    display: block;
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 4px;
}

.sc-sensor-status {
    margin-top: 8px;
    font-size: 13px;
    min-height: 18px;
}

.sc-online { color: #4ade80; }
.sc-offline { color: var(--accent); }

.sc-gis { margin-bottom: 12px; }

.sc-gis-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sc-gis-table th,
.sc-gis-table td {
    text-align: left;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}

.sc-gis-table tr:last-child th,
.sc-gis-table tr:last-child td { border-bottom: none; }

.sc-gis-table th {
    font-weight: 400;
    opacity: 0.7;
    width: 45%;
}

.sc-boxes {
    flex-direction: column;
    gap: 12px;
}

.sc-box {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
}

.sc-box-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}

.sc-box-desc {
    font-size: 13px;
    opacity: 0.75;
    margin-bottom: 10px;
}

.sc-box-todo {
    opacity: 0.55;
}

.sc-mode {
    display: flex;
    gap: 18px;
    margin-bottom: 12px;
    font-size: 13px;
}

.sc-mode label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.sc-params {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sc-param {
    display: grid;
    grid-template-columns: 1fr 120px 90px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.sc-param input[type="number"] {
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
    width: 100%;
}

.sc-param input:disabled {
    opacity: 0.5;
}

.sc-default {
    font-size: 11px;
    opacity: 0.5;
}

.sc-box-note {
    font-size: 12px;
    opacity: 0.6;
    font-style: italic;
    margin-top: 12px;
}

.sc-syncbar {
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.sc-dirty {
    color: var(--accent);
    font-size: 14px;
}

.sc-sync-status,
.sc-request-status {
    font-size: 12px;
    opacity: 0.85;
    margin-left: 8px;
}

.sc-sync-status.saved,
.sc-request-status.saved { color: #4ade80; }
.sc-sync-status.error,
.sc-request-status.error { color: var(--accent); }

/* blocking popover during the async status query */
.sc-popover {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    z-index: 50;
    display: flex;
}

.sc-popover-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
}

.sc-spinner {
    width: 18px;
    height: 18px;
    border: 3px solid var(--border);
    border-top-color: var(--secondary);
    border-radius: 50%;
    animation: sc-spin 0.8s linear infinite;
}

@keyframes sc-spin {
    to { transform: rotate(360deg); }
}