/* dashboard.css
 *
 * Dashboard tab styles, extracted from styles.css as part of the frontend
 * modularization plan (docs/planning/frontend-modularization-and-csp-
 * hardening-plan.md), Stage 6. This file grows as each sub-stage lands.
 *
 * Scoped to js/modules/dashboard/widgets.js (Stage 6a): Dashboard Widgets
 * (multi-device overlay charts + Fleet KPI tiles) and the add-widget-modal;
 * js/modules/dashboard/historical-charts.js (Stage 6b): the per-device
 * metric chart, its sidebar, and Key Signal Threshold reference lines;
 * and js/modules/dashboard/device-grid.js + key-signals.js (Stage 6c/d
 * Phase 1): the top bar, device cards/list rows, location grouping, quick
 * actions, and the key-signals-modal. .chart-control-label/
 * .chart-control-label--spaced/.chart-metric-hint are shared by multiple
 * stages' markup.
 *
 * Load order: linked in index.html after onboarding.css, before fleet.css.
 */

.dashboard-widgets-area {
    margin-bottom: 1rem;
}

.dashboard-widgets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.dashboard-widgets-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-widgets-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.dashboard-widget-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.dashboard-widget-card-header {
    margin-bottom: 0.5rem;
}

.dashboard-widget-card-header h4 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.dashboard-widget-card-body {
    flex: 1;
}

.dashboard-widget-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.65rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.dashboard-widget-card-actions {
    flex-shrink: 0;
    display: flex;
    gap: 0.35rem;
}

/* Match the 1px border weight used by the device card's own action buttons
   (.device-card-qa-btn) rather than .btn-ghost's default 2px, so these read as
   part of the same Dashboard button family. */
.dashboard-widget-card-actions .btn-icon {
    border-width: 1px;
}

.dashboard-widget-visibility {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.dashboard-widget-kpi-value {
    flex: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.dashboard-widget-kpi-unit {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-left: 2px;
}

.dashboard-widget-kpi-sub {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.dashboard-widget-kpi-live {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--success-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
}

.dashboard-widget-kpi-live .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-color);
}

.dashboard-widget-kpi-pending {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    padding: 0 0.25rem;
}

/* Key Signal Threshold coverage on KPI tile widgets — see
   docs/key-signal-threshold-widget-integration-plan.md. Warning/amber for OOB
   (never danger/red — a caution against a configured range, not a firmware
   alarm), neutral dashed for "nobody is watching this at all". */
.dashboard-widget-oob-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
    background: color-mix(in srgb, var(--warning-color) 16%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--warning-color) 45%, transparent);
    color: var(--warning-text);
    font-size: 0.72rem;
    font-weight: 700;
}

.dashboard-widget-unmonitored-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
    border: 1px dashed var(--cool-gray-5);
    color: var(--cool-gray-4);
    font-size: 0.72rem;
    font-weight: 600;
}

.dashboard-widget-unmonitored-badge .link {
    color: var(--blue-green-3);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* Maintenance Alerts widget body -- see docs/planning/images/fleet-maintenance/07-dashboard-tile.png. */
.dashboard-widget-maintenance-count {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--danger-text);
    font-variant-numeric: tabular-nums;
}

.dashboard-widget-maintenance-count-label {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.dashboard-widget-maintenance-urgent {
    margin-top: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 7px;
    background: color-mix(in srgb, var(--warning-color) 16%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--warning-color) 45%, transparent);
    color: var(--warning-text);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.4;
}

.dashboard-widget-maintenance-ok {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 0.5rem;
}

.dashboard-widget-maintenance-ok-icon {
    font-size: 1.6rem;
    color: var(--success-color);
    line-height: 1;
}

.dashboard-widget-maintenance-ok-title {
    font-size: 0.88rem;
    font-weight: 700;
    margin-top: 0.35rem;
}

.dashboard-widget-maintenance-ok-sub {
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.dashboard-widget-maintenance-footer {
    margin-top: 0.6rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--border-color);
    text-align: right;
}

.dashboard-widget-maintenance-footer .link {
    color: var(--blue-green-3);
    font-weight: 600;
    font-size: 0.76rem;
    cursor: pointer;
}

.widget-kpi-coverage-hint {
    margin-top: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: 7px;
    font-size: 0.78rem;
    line-height: 1.45;
}

.widget-kpi-coverage-hint.unmonitored {
    border: 1px dashed var(--cool-gray-5);
    color: var(--cool-gray-4);
}

.widget-kpi-coverage-hint.unmonitored .link {
    color: var(--blue-green-3);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.widget-kpi-coverage-hint.monitored {
    background: color-mix(in srgb, var(--success-color) 8%, var(--white));
    border: 1px solid color-mix(in srgb, var(--success-color) 30%, var(--white));
    color: var(--text-secondary);
}

.widget-type-picker-options {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.5rem 0 1rem;
}

.widget-type-option {
    font-family: inherit;
    text-align: left;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: border-color 0.15s, background 0.15s;
}

.widget-type-option:hover,
.widget-type-option:focus-visible {
    border-color: var(--primary-color);
    background: var(--blue-green-9);
    outline: none;
}

.widget-type-option-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Lets a locked option's feature-tier-badge (appended as a 3rd flex child by the shared
   applyFeatureAccessState()) sit flush against the button's right edge instead of
   crowding the label/desc text -- inert for the two ungated types, which never get a
   badge appended. */
.widget-type-option-text {
    flex: 1;
    min-width: 0;
}

.widget-type-option-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.widget-type-option-desc {
    display: block;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.72rem;
    margin-top: 2px;
}

/* The generic .modal-box input/select rule only sets border-width/radius/min-height —
   it doesn't set width, padding, or border-color, so without this these fields render
   native-width and native-bordered instead of matching every other form in the app
   (see .form-group input, which this mirrors). */
#widget-config-form input[type="text"],
#widget-config-form select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--card-bg);
    color: var(--text-primary);
}

#widget-config-form input[type="text"]:focus,
#widget-config-form select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--primary-focus-ring);
}

#widget-overlay-devices {
    height: 150px;
}

.dashboard-widget-owner-role {
    margin-top: 0.5rem;
}

/* ── Historical Charts (Stage 6b) ─────────────────────────────────────────── */

/* Charts section grows to fill freed space */
.charts-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 340px;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

#chart-change-btn {
    margin-left: 1.5rem;
}

/* Historical Charts Section — body grows within the flex parent */
#charts-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chart-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 1rem;
    align-items: stretch;
}

.chart-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.25s ease;
    opacity: 1;
}

.chart-sidebar.collapsed {
    width: 0;
    opacity: 0;
}

.chart-control-label--spaced {
    margin-top: 0.5rem;
}

.chart-load-btn {
    margin-top: 0.5rem;
    width: 100%;
    justify-content: center;
}

.chart-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chart-control-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
}

.chart-sidebar select {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8125rem;
    background: var(--card-bg);
    cursor: pointer;
}

.chart-sidebar select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.chart-metric-hint {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

@media (max-width: 480px) {
    .chart-layout {
        flex-direction: column;
    }
    .chart-sidebar {
        width: 100%;
    }
    .chart-sidebar.collapsed {
        width: 100%;
        max-height: 0;
        opacity: 0;
    }
}

#chart-container {
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 1rem;
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#metric-chart {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.chart-placeholder {
    color: var(--text-secondary);
    text-align: center;
    padding: 4rem 2rem;
    font-style: italic;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Device Grid (Stage 6c/d Phase 1) ─────────────────────────────────── */

/* ── SparkplugB 4-region layout ───────────────────────────────────────────── */

.sparkplug-top-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--bg-color);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.sparkplug-top-count.online  { color: var(--success-color); }
.sparkplug-top-count.offline { color: var(--text-secondary); }
.sparkplug-top-count.unknown { color: var(--warning-text); }

.dashboard-view-toggle {
    display: flex;
    gap: 0.25rem;
}

.dashboard-view-toggle .btn {
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
}

.dashboard-view-toggle .btn.active {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.alarm-summary-badge {
    background: var(--danger-color);
    color: var(--white);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: auto;
}

.monitoring-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    background: var(--warning-bg);
    border: 1px solid color-mix(in srgb, var(--warning-color) 60%, transparent);
    color: var(--text-primary);
    flex-shrink: 0;
}

.monitoring-banner-icon {
    flex: none;
    margin-top: 0.1rem;
    color: var(--warning-color);
}

.monitoring-banner-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.monitoring-banner-main strong {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.monitoring-banner-since {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--warning-text);
    white-space: nowrap;
}

.sparkplug-body-layout {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
}

.sparkplug-main-area {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}

.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.location-group {
    margin-bottom: 1.4rem;
}

.location-group:last-child {
    margin-bottom: 0;
}

.location-group-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.location-group-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.location-health-ring {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--success-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--text-primary);
    flex-shrink: 0;
}

.location-health-ring.warn {
    border-color: var(--warning-color);
}

.location-health-ring.crit {
    border-color: var(--danger-color);
}

/* ── Dashboard list view (Option B) — built on the app's existing dense-table
   convention (.metrics-table-container/.metrics-table), not new table CSS ──── */

/* Compound selector (not just .dashboard-list-wrap) so this beats styles.css's
   .metrics-table-container { max-height: 500px; overflow-y: auto } on specificity -- both
   classes are always applied together on this element (device-grid.js's list wrapper), but
   styles.css loads after this file, and equal-specificity single-class rules would otherwise
   let its 500px cap + inner scrollbar silently win the cascade, producing a nested scrollbar
   inside a location group with enough rows to exceed 500px (in addition to the outer
   .sparkplug-main-area scroll) -- same bug reports.css's .reports-table-wrap already hit. */
.metrics-table-container.dashboard-list-wrap {
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
}

/* table-layout: fixed + a <colgroup> (in the JS template) is what actually fixes
   column widths — without an explicit width source, browsers auto-size columns per
   table (why widths used to drift between location groups and reflow on live
   ticks), or under-constrain the table so content spills past the container edge. */
.dashboard-list-table {
    table-layout: fixed;
    width: 100%;
}

.dashboard-list-table.with-location col:nth-child(1) { width: 4%; }
.dashboard-list-table.with-location col:nth-child(2) { width: 22%; }
.dashboard-list-table.with-location col:nth-child(3) { width: 24%; }
.dashboard-list-table.with-location col:nth-child(4) { width: 14%; }
.dashboard-list-table.with-location col:nth-child(5) { width: 16%; }
.dashboard-list-table.with-location col:nth-child(6) { width: 20%; }

.dashboard-list-table:not(.with-location) col:nth-child(1) { width: 4%; }
.dashboard-list-table:not(.with-location) col:nth-child(2) { width: 26%; }
.dashboard-list-table:not(.with-location) col:nth-child(3) { width: 30%; }
.dashboard-list-table:not(.with-location) col:nth-child(4) { width: 18%; }
.dashboard-list-table:not(.with-location) col:nth-child(5) { width: 22%; }

.dashboard-list-table .dashboard-list-dot-cell {
    text-align: center;
}

.dashboard-list-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-secondary);
    opacity: 0.4;
}

.dashboard-list-dot.online { background: var(--success-color); opacity: 1; }
.dashboard-list-dot.alarm-acked { background: var(--warning-color); opacity: 1; }
.dashboard-list-dot.alarm { background: var(--danger-color); opacity: 1; }
.dashboard-list-dot.offline { background: var(--text-secondary); opacity: 0.4; }
.dashboard-list-dot.unknown { background: transparent; border: 2px dashed var(--warning-color); box-sizing: border-box; opacity: 1; }

.dashboard-list-row {
    cursor: pointer;
}

.dashboard-list-row:hover td {
    background: var(--bg-color);
}

.dashboard-list-name,
.dashboard-list-serial {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list-name {
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-list-serial {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-family: 'Monaco', 'Courier New', monospace;
}

.dashboard-list-metric,
.dashboard-list-location,
.dashboard-list-status,
.dashboard-list-model {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list-row.alarm td.dashboard-list-status { color: var(--danger-color); font-weight: 600; }
.dashboard-list-row.alarm-acked td.dashboard-list-status { color: var(--warning-color); font-weight: 600; }
.dashboard-list-row.offline td.dashboard-list-status { color: var(--text-secondary); }
.dashboard-list-row.unknown td.dashboard-list-status { color: var(--warning-text); font-weight: 600; }

.device-card {
    --dashboard-reservation-color: var(--primary-color);
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1.25rem;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    z-index: 0;
}

.device-card.qa-menu-open {
    z-index: 40;
}

.device-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.device-card.online {
    border-left: 4px solid var(--success-color);
}

.device-card.alarm {
    border-left: 4px solid var(--danger-color);
}

.device-card.alarm-acked {
    border-left: 4px solid var(--warning-color);
}

.card-alarm-icon.acked {
    color: var(--warning-color);
}

.device-card.unknown {
    border-left: 4px solid var(--warning-color);
}

.device-card.offline {
    border-left: 4px solid var(--cool-gray-5);
    opacity: 0.58;
}

.device-card.upcoming {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--dashboard-reservation-color) 8%, var(--card-bg)) 0%, var(--card-bg) 26%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dashboard-reservation-color) 25%, transparent);
}

.device-card.reservation-maintenance {
    --dashboard-reservation-color: var(--warning-color);
}

.device-card.reservation-active {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--dashboard-reservation-color) 10%, var(--card-bg)) 0%, var(--card-bg) 26%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--dashboard-reservation-color) 42%, transparent),
        0 0 0 1px color-mix(in srgb, var(--dashboard-reservation-color) 18%, transparent);
}

.alarm-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: center;
    height: 1.35rem;
    padding: 0 0.6rem;
    line-height: 1;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--danger-color) 16%, var(--card-bg));
    color: var(--danger-color);
    border: 1px solid color-mix(in srgb, var(--danger-color) 55%, transparent);
    cursor: pointer;
    transition: background 0.15s;
}

.alarm-indicator:hover {
    background: color-mix(in srgb, var(--danger-color) 24%, var(--card-bg));
}

.alarm-indicator.acked {
    background: color-mix(in srgb, var(--warning-color) 16%, var(--card-bg));
    color: color-mix(in srgb, var(--warning-color) 80%, var(--black));
    border-color: color-mix(in srgb, var(--warning-color) 50%, transparent);
}

.alarm-indicator.acked:hover {
    background: color-mix(in srgb, var(--warning-color) 24%, var(--card-bg));
}

.alarm-row-acked td { opacity: 0.65; }

.alarm-ack-meta {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.detail-status-badge {
    display: inline-flex;
    align-items: center;
    height: 1.35rem;
    padding: 0 0.6rem;
    line-height: 1;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.detail-status-badge.online {
    background: color-mix(in srgb, var(--success-color) 14%, var(--white));
    color: color-mix(in srgb, var(--success-color) 85%, var(--black));
    border: 1px solid color-mix(in srgb, var(--success-color) 38%, transparent);
}

.detail-status-badge.unknown {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid color-mix(in srgb, var(--warning-color) 60%, transparent);
}

.detail-status-badge.offline {
    background: var(--cool-gray-8);
    color: var(--cool-gray-4);
    border: 1px solid var(--cool-gray-8);
}

.warranty-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: center;
    height: 1.35rem;
    padding: 0 0.6rem;
    line-height: 1;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.warranty-indicator.in-warranty {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-color);
}

.warranty-indicator.out-of-warranty {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger-color);
}

.warranty-indicator.pending,
.warranty-indicator.unknown {
    background: var(--cool-gray-8);
    color: var(--cool-gray-3);
    border-color: var(--cool-gray-7);
}

.docs-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: center;
    height: 1.35rem;
    padding: 0 0.6rem;
    line-height: 1;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--info-bg);
    color: var(--info-text);
    border: 1px solid var(--info-color);
    cursor: pointer;
    transition: background 0.15s;
}

.docs-indicator:hover {
    background: color-mix(in srgb, var(--info-color) 15%, var(--info-bg));
}


@media (max-width: 680px) {
    .documents-table th:nth-child(1),
    .documents-table td:nth-child(1) {
        display: none;
    }

    .documents-table th:nth-child(2),
    .documents-table td:nth-child(2) { width: 38%; }

    .documents-table th:nth-child(3),
    .documents-table td:nth-child(3) { width: 12%; }

    .documents-table th:nth-child(4),
    .documents-table td:nth-child(4) { width: 20%; }

    .documents-table th:nth-child(5),
    .documents-table td:nth-child(5) { width: 30%; }
}


.modal-box.modal-box-wide {
    max-width: 600px;
}

.modal-box.modal-box-history {
    max-width: 1200px;
}

.modal-box.modal-box-rule {
    width: min(760px, 96vw);
    max-width: none;
    max-height: min(900px, calc(100dvh - 2rem));
    display: flex;
    flex-direction: column;
    padding: 1.75rem 2.5rem 0;
}

.alarms-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.alarms-modal-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.alarms-modal-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.alarm-modal-name {
    font-weight: 600;
    color: var(--warning-text);
}

.alarm-modal-ts {
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.alarm-modal-action {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.alarm-modal-action-head {
    width: 1%;
    text-align: right;
}

.alarm-modal-ack-icon-btn {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    padding: 0;
}

.alarm-modal-ack-icon-btn svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.alarm-modal-ack-icon-btn:hover:not(:disabled) {
    color: #0f766e;
    border-color: #99f6e4;
    background: #f0fdfa;
}

.alarm-modal-ack-icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.alarm-modal-empty {
    color: var(--text-secondary);
    text-align: center;
    padding: 0.4rem 0.2rem 0.2rem;
}

.device-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.device-card-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}

.device-card-status-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.card-alarm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.32rem;
    height: 1.32rem;
    line-height: 1;
    color: var(--danger-color);
}

.card-alarm-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.device-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.device-card-field {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8rem;
}

#detail-remove-btn {
    border: 2px solid var(--danger-color);
}

.device-field-label {
    color: var(--text-secondary);
    font-weight: 600;
    min-width: 58px;
    flex-shrink: 0;
}

.device-field-value {
    color: var(--text-primary);
    word-break: break-all;
}

.device-field-upcoming {
    word-break: normal;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.device-card-field-upcoming-row {
    align-items: flex-start;
}

.device-card-field-upcoming-row .device-field-label {
    min-width: 58px;
}

.device-field-upcoming.loading {
    color: var(--text-secondary);
    font-style: italic;
}

/* ── Adaptive dashboard card — metric area, status line, quick actions ────────── */

.device-card-caption {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.device-card-statusline {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.device-card-metric-hero {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.2rem 0;
}

.device-card-metric-pair,
.device-card-metric-trio {
    display: flex;
    gap: 0.7rem;
    margin: 0.2rem 0;
}

.device-card-metric-trio {
    gap: 0.4rem;
}

.device-card-metric-mini {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.dc-metric-val-row {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}

.dc-metric-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-metric-val {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.dc-metric-val-hero {
    font-size: 1.5rem;
}

/* Key Signal out-of-band coloring — warning/amber, never danger/red (red stays
   reserved for alarms). Applies only to numeric Key Signal values; categorical
   Key Signals (rendered as status chips above) are never colored this way. */
.dc-metric-val.oob {
    color: var(--warning-text);
}

.dc-metric-unit {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-left: 0.15rem;
}

.dc-metric-spark {
    display: block;
    margin-top: 0.15rem;
}

.dc-metric-spark svg {
    display: block;
}

.device-card-status-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-primary);
}

.device-card-status-chip.good {
    background: color-mix(in srgb, var(--success-color) 15%, transparent);
    color: var(--success-color);
}

.device-card-status-chip.warn {
    background: color-mix(in srgb, var(--warning-color) 18%, transparent);
    color: var(--warning-color);
}

.device-card-status-chip.crit {
    background: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
}

.device-card-quick-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    align-items: center;
    flex-wrap: wrap;
}

.device-card-qa-btn {
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    cursor: pointer;
}

.device-card-qa-btn.primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.device-card-qa-btn:hover {
    filter: brightness(0.97);
}

.device-card-qa-overflow-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.device-card-qa-overflow-btn {
    min-width: 2rem;
    justify-content: center;
    text-align: center;
}

.device-card-qa-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 140px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    padding: 0.3rem;
    z-index: 90;
    display: none;
    flex-direction: column;
}

.device-card-qa-menu.open {
    display: flex;
}

.device-card-qa-menu.open-up {
    top: auto;
    bottom: calc(100% + 6px);
}

.device-card-qa-menu-item {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    font-size: 0.78rem;
    line-height: 1.2;
    padding: 0.45rem 0.55rem;
    border-radius: 6px;
    cursor: pointer;
}

.device-card-qa-menu-item:hover {
    background: var(--bg-color);
}

/* ── Key Signals (Stage 6c/d Phase 1) ─────────────────────────────────── */

/* Key Signals Section */
#key-signals-section {
    margin-bottom: 1rem;
}

.key-signals-header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.key-signals-header-controls select {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text-primary);
}

.key-signals-empty {
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.key-signals-premium-note {
    font-size: 0.72rem;
    padding: 0.25rem 0;
}

.key-signals-picker-empty {
    color: var(--text-secondary);
    padding: 0.5rem 0;
}

.key-signals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.key-signal-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.key-signal-sparkline {
    height: 44px;
    margin: 0.25rem 0;
}

.sparkline-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.key-signal-name {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.key-signal-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.key-signal-value.oob {
    color: var(--warning-text);
}

.key-signal-ts {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.key-signals-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.25rem 0;
}

.key-signal-picker-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    border-radius: 4px;
    transition: background 0.1s;
}

.key-signal-picker-item:hover {
    background: var(--bg-color);
}

.key-signal-picker-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    cursor: pointer;
}

.key-signal-picker-label {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.key-signal-on-card {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.key-signal-on-card-check:disabled {
    cursor: not-allowed;
}

/* ── CSV Export modal ─────────────────────────────────────────────────────── */
.csv-export-layout {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.csv-export-col {
    flex: 1;
    min-width: 0;
}

.csv-export-col-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.csv-metric-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    background: var(--bg-color);
}

.csv-export-no-sensors {
    color: var(--text-secondary);
}

.csv-metric-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csv-metric-item:hover {
    color: var(--primary-color);
}

.csv-export-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.csv-export-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.csv-export-error {
    margin: 0.25rem 0 0.5rem;
}

/* ── Device Detail, Schematic/Digital-Twin, and Remote Control ─────────────
   Moved from styles.css during Stage 6c/d/e Phase 2b (frontend modularization). ── */

/* Device detail slides up as a full-screen fixed sheet */
#sparkplug-device-detail {
    position: fixed;
    inset: 0;
    background: var(--bg-color);
    overflow: hidden;
    z-index: 500;
    padding: 1rem 1.25rem;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

#sparkplug-device-detail.detail-slide-in {
    transform: translateY(0);
}

.device-detail {
    background: var(--bg-color);
    border-radius: 8px;
    padding: 1.5rem;
}

.device-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.device-detail-title {
    flex: 1;
    min-width: 0;
}

.device-detail-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.2rem;
}

.device-detail-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-overflow-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.detail-overflow-btn {
    min-width: 26px;
    width: 26px;
    height: 26px;
    line-height: 1;
    padding: 0;
    font-size: 1.05rem;
}

.detail-overflow-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    min-width: 170px;
    z-index: 50;
    padding: 0.3rem;
}

.detail-overflow-item {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    font-size: 0.84rem;
    padding: 0.45rem 0.55rem;
    border-radius: 6px;
    cursor: pointer;
}

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

.detail-overflow-item:disabled {
    color: var(--text-secondary);
    cursor: not-allowed;
}

.detail-rename-status {
    display: inline-flex;
    align-items: center;
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-color);
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.12rem 0.45rem;
}

.device-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0;
    margin-top: 0.4rem;
}

.detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    white-space: nowrap;
    padding: 0 2rem;
}

.detail-meta-item:first-child {
    padding-left: 0;
}

.detail-meta-item + .detail-meta-item {
    border-left: 1px solid var(--border-color);
}

.detail-label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.detail-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

.device-detail h4 {
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

/* ── Detail view flex layout ────────────────────────────── */
#sparkplug-device-detail {
    display: flex;
    flex-direction: column;
}

.device-detail-header {
    flex-shrink: 0;
}

/* Two-panel main content area fills remaining viewport height */
.device-detail-main {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 0;
}

.device-detail-left {
    width: 42%;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    padding-right: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.device-detail-right {
    flex: 1;
    min-width: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Tab nav for the right panel */
.device-detail-right-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
    margin-bottom: 0;
}

.device-right-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    border-radius: 0;
}

.device-right-tab:hover {
    color: var(--text-primary);
}

.device-right-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

/* Pane container — fills right panel height below tabs */
.device-detail-right-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* Tablet portrait (and any narrow desktop window down to phone.css's 640px cutoff): the
   left/right split leaves Key Signals cramped into ~42% width -- confirmed on a real device
   (iPad-class tablet, ~744-834px). applyDetailLayoutMode() (device-detail.js) already treats
   <=900px as "mobile" for schematic-pane routing, so at these widths the left column already
   holds only Key Signals, same as phone -- this just makes the CSS match that existing JS
   threshold instead of leaving it stuck at the desktop side-by-side split. Deliberately narrower
   in scope than phone.css's own <=640px treatment of this same area: only the column-stacking,
   not phone's header collapse/expand redesign or sticky positioning -- the header stays in its
   normal, uncollapsed form here, confirmed correct in the tablet screenshot this was reported
   against. */
@media (min-width: 641px) and (max-width: 900px) {
    .device-detail-main {
        flex-direction: column;
        flex: 0 0 auto;
    }

    .device-detail-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 1rem;
        margin-bottom: 0.75rem;
        overflow-y: visible;
        flex: 0 0 auto;
    }

    .device-detail-right {
        padding-left: 0;
        flex: 0 0 auto;
        min-height: 500px;
    }

    .device-detail-right-body {
        min-height: 420px;
    }
}

.device-right-pane {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-top: 0.75rem;
}

/* Key signals sits at top of left column — keeps its natural border-bottom divider */
.device-detail-left #key-signals-section {
    flex-shrink: 0;
}

/* Schematic fills remaining left column height */
.device-detail-left #schematic-section {
    flex: 1;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    min-height: 0;
}

/* Sections inside right panes lose their separator chrome */
.device-right-pane .detail-section {
    flex: 1;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Live metrics fills its pane vertically */
.device-right-pane #live-metrics-section {
    display: flex;
    flex-direction: column;
}

.device-right-pane #live-metrics-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.device-right-pane #live-metrics-body .metrics-table-container {
    flex: 1;
    height: 100%;
    max-height: none;
}

/* Charts section fills its pane vertically */
.device-right-pane .charts-section {
    min-height: 0;
}

/* Each collapsible section */
.detail-section {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.schematic-title-row {
    gap: 0.45rem;
}

#schematic-title-actions {
    display: inline-flex;
    align-items: center;
}

.schematic-title-icon-spaced {
    margin-left: 0.2rem;
}

/* ── Schematic / Live-Metrics paired row ─────────────────── */
.schematic-metrics-row {
    display: flex;
    flex-direction: column;
}

.schematic-metrics-row.layout-side-left,
.schematic-metrics-row.layout-side-right {
    flex-direction: row;
    gap: 1.5rem;
    align-items: flex-start;
}

/* Both sections share available width equally */
.schematic-metrics-row.layout-side-left > #schematic-section,
.schematic-metrics-row.layout-side-right > #schematic-section {
    flex: 1 1 0;
    min-width: 0;
}

.schematic-metrics-row.layout-side-left > #live-metrics-section,
.schematic-metrics-row.layout-side-right > #live-metrics-section {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.schematic-metrics-row.layout-side-left #live-metrics-body,
.schematic-metrics-row.layout-side-right #live-metrics-body {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.schematic-metrics-row.layout-side-left #live-metrics-body .metrics-table-container,
.schematic-metrics-row.layout-side-right #live-metrics-body .metrics-table-container {
    flex: 1;
    height: 100%;
    max-height: 100%;
}

/* In unstacked mode, constrain height and center the inner wrapper without letterboxing */
.schematic-metrics-row.layout-stacked .schematic-image-container {
    height: 500px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.schematic-metrics-row.layout-stacked .schematic-image-inner {
    width: auto;
    height: 100%;
    display: inline-block;
}

.schematic-metrics-row.layout-stacked .schematic-image {
    width: auto;
    height: 100%;
}

/* Section being dragged */
.detail-section.sm-dragging { opacity: 0.35; }

/* Drop-position hints on the target section */
.detail-section.sm-drop-left  { box-shadow: -3px 0 0 var(--primary-color); border-radius: 3px; }

.detail-section.sm-drop-right { box-shadow:  3px 0 0 var(--primary-color); border-radius: 3px; }

/* Hide Type column when Live Metrics is paired side-by-side with Schematic */
.schematic-metrics-row.layout-side-left .type-col,
.schematic-metrics-row.layout-side-right .type-col { display: none; }

/* ── Schematic modal (full-width) ──────────────────────── */
.modal-box-schematic {
    max-width: 960px;
    width: 96%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-box-schematic .modal-actions {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 0;
    flex-shrink: 0;
}

.schematic-reset-btn {
    margin-right: auto;
}

/* ── Schematic configure layout ────────────────────────── */
.schematic-config-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 1.25rem;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    margin-bottom: 1rem;
}

.schematic-config-image-area {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
}

.schematic-upload-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.schematic-asset-label {
    font-size: 0.9rem;
    font-weight: 600;
}

.schematic-upload-hint {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.schematic-config-preview-wrap {
    position: relative;
    flex: 1;
    overflow: auto;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--code-bg);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.schematic-config-preview-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
}

.schematic-img-inner {
    position: relative;
    display: block;
    line-height: 0;
    cursor: crosshair;
}

.schematic-config-img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
}

.schematic-config-pins-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.schematic-config-pins-area h5 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

.schematic-pin-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.82rem;
}

.schematic-pin-name {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schematic-pin-pos {
    color: var(--text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

.schematic-pins-empty {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.schematic-pin-remove-btn {
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
}

.schematic-metric-picker {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    flex-shrink: 0;
}

.schematic-metric-picker p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.schematic-metric-select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.84rem;
    background: var(--card-bg);
    margin-bottom: 0.5rem;
}

.schematic-picker-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.schematic-config-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
    padding: 2rem;
}

/* Pending pin marker in configure mode */
.schematic-pending-pin {
    position: absolute;
    width: 18px;
    height: 18px;
    background: var(--warning-color);
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    z-index: 10;
}

/* Saved pin markers in configure mode */
.schematic-configure-pin {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--primary-color);
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    z-index: 5;
}

.schematic-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    background: var(--code-bg);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
}

#schematic-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.schematic-restart-progress {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.schematic-mode-toggle {
    display: inline-flex;
    gap: 0.3rem;
}

.schematic-image-container {
    display: block;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Inner wrapper is always sized to the actual image — badges are relative to this */
.schematic-image-inner {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
}

.schematic-image {
    display: block;
    width: 100%;
    height: auto;
}

.schematic-stream-container {
    position: relative;
    width: 100%;
    background: #0f172a;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.schematic-stream-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    background: #020617;
    cursor: crosshair;
}

.schematic-stream-exit-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: none;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.schematic-stream-keyboard-toggle-btn {
    position: absolute;
    top: 0.75rem;
    right: 3.6rem;
    z-index: 5;
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: none;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.schematic-stream-container.schematic-stream-fullscreen {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    z-index: 2400;
    background: #020617;
    aspect-ratio: auto !important;
    box-sizing: border-box;
    padding:
        env(safe-area-inset-top, 0px)
        0px
        env(safe-area-inset-bottom, 0px)
        0px;
}

.schematic-stream-container.schematic-stream-fullscreen .schematic-stream-exit-btn {
    display: inline-flex;
}

.schematic-stream-container.schematic-stream-fullscreen .schematic-stream-keyboard-toggle-btn {
    display: inline-flex;
}

.schematic-stream-keyboard {
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    transform: translateX(-50%) translateY(calc(100% + 1.25rem));
    width: min(720px, calc(100% - 1.5rem));
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 14px;
    padding: 0.62rem;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: transform 280ms cubic-bezier(0.2, 0.75, 0.2, 1), opacity 180ms ease;
    will-change: transform, opacity;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}

.schematic-stream-keyboard.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.schematic-stream-keyboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.52rem;
    color: #e2e8f0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.schematic-stream-keyboard-mode {
    margin-left: 0.35rem;
    color: #93c5fd;
    font-weight: 700;
    font-size: 0.75rem;
}

.schematic-stream-keyboard-body {
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
}

.schematic-keyboard-row {
    display: flex;
    gap: 0.32rem;
    justify-content: center;
}

.schematic-keyboard-row:nth-child(2),
.schematic-keyboard-row:nth-child(3) {
    padding-inline: 0.55rem;
}

.schematic-keyboard-row:nth-child(4) {
    padding-inline: 1.1rem;
}

.schematic-keyboard-key {
    min-width: 34px;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1.05;
    border-radius: 10px;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: #f8fafc;
    border: 1px solid rgba(100, 116, 139, 0.85);
    background: linear-gradient(180deg, #64748b 0%, #475569 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 2px 0 rgba(15, 23, 42, 0.85),
        0 4px 8px rgba(2, 6, 23, 0.5);
    transition: transform 90ms ease, box-shadow 90ms ease, filter 90ms ease;
}

.schematic-stream-keyboard .schematic-keyboard-key:hover {
    filter: brightness(1.06);
}

.schematic-stream-keyboard .schematic-keyboard-key:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 1px 0 rgba(15, 23, 42, 0.85),
        0 2px 5px rgba(2, 6, 23, 0.55);
}

.schematic-keyboard-key-action {
    min-width: 74px;
    background: linear-gradient(180deg, #475569 0%, #334155 100%);
}

.schematic-keyboard-key-space {
    min-width: 180px;
    background: linear-gradient(180deg, #5b6a7f 0%, #465569 100%);
}

.schematic-stream-keyboard .schematic-keyboard-key.btn-primary {
    border-color: rgba(96, 165, 250, 0.95);
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    box-shadow:
        inset 0 1px 0 rgba(191, 219, 254, 0.55),
        0 2px 0 rgba(30, 64, 175, 0.95),
        0 4px 10px rgba(30, 64, 175, 0.45);
}

.schematic-stream-keyboard .schematic-keyboard-key:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: saturate(0.4);
}

.schematic-stream-container.schematic-stream-fullscreen .schematic-stream-keyboard {
    width: min(1060px, calc(100% - 1.5rem));
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    padding: 0.75rem;
}

.schematic-stream-container.schematic-stream-fullscreen .schematic-keyboard-row {
    gap: 0.42rem;
}

.schematic-stream-container.schematic-stream-fullscreen .schematic-keyboard-key {
    min-width: 44px;
    padding: 0.5rem 0.65rem;
    font-size: 0.9rem;
}

.schematic-stream-container.schematic-stream-fullscreen .schematic-keyboard-key-action {
    min-width: 96px;
}

.schematic-stream-container.schematic-stream-fullscreen .schematic-keyboard-key-space {
    min-width: 260px;
}

body.schematic-stream-fullscreen-open {
    overflow: hidden;
}

.schematic-stream-container {
    view-transition-name: schematic-stream-capture;
}

::view-transition-old(schematic-stream-capture),
::view-transition-new(schematic-stream-capture) {
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.schematic-hotspot-badge {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(30, 41, 59, 0.88);
    color: white;
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    line-height: 1.3;
    text-align: center;
    min-width: 60px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    pointer-events: none;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.15);
}

.schematic-badge-label {
    color: rgba(255,255,255,0.7);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.schematic-badge-value {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .schematic-config-layout {
        grid-template-columns: 1fr;
    }

    .schematic-config-pins-area {
        max-height: 200px;
    }
}

/* ── Focused Dashboard Responsiveness (no wholesale redesign) ───────────── */
@media (max-width: 1200px) {
        .device-detail-meta {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0;
    }

        .device-detail-header {
        padding: 0.65rem 0.8rem;
        gap: 0.55rem;
    }

        .detail-meta-item {
        padding: 0 0.6rem;
    }

        .detail-value {
        font-size: 0.86rem;
    }

        #detail-last-seen {
        font-size: 0.82rem;
    }
}

/* Device-detail column-stacking (previously @max-width:900px, which caught tablet
   portrait too) now lives in phone.css at the real phone breakpoint -- tablet keeps the
   standard side-by-side layout with its own internal-pane scrolling. */