/* Theme variables - Dark (default) */
:root{
  /* Layout dimensions */
  --navbar-height: 60px;
  --footer-height: 40px;
  --sidebar-width: 250px;
  --sidebar-collapsed: 60px;
  /* Theme colors */
  --bg-primary:#0b1320;
  --bg-secondary:#111a2e;
  --bg-tertiary:#0f1730;
  --bg-input:#183153;
  --bg-hover:#234167;
  --border-color:#233;
  --border-secondary:#29436a;
  --border-tertiary:#1e2a3d;
  --text-primary:#e6edf3;
  --text-secondary:#acf;
  --text-dim:rgba(230,237,243,0.75);
  --text-accent:#f9c;
  --text-highlight:#bde;
  --text-link:#4a9eff;
  --row-diff:#2a2210;
  --row-critical:#3a1210;
  --conditioned-bg:#1a0d26;
  --chart-paper:#0b1320;
  --chart-plot:#0f1730;
  --chart-grid:#1e2a3d;
  --chart-text:#e6edf3;
  /* Data colors */
  --data-dt-minmax:#8bc;
  --data-dt-avg:#9cb;
  --data-conditioned:#dac;
  --data-delta:#ff9a4a;
}
/* Light theme - High contrast for outdoor visibility */
[data-theme="light"]{
  --bg-primary:#ffffff;
  --bg-secondary:#f0f0f0;
  --bg-tertiary:#e8e8e8;
  --bg-input:#d8d8d8;
  --bg-hover:#c8c8c8;
  --border-color:#999999;
  --border-secondary:#888888;
  --border-tertiary:#aaaaaa;
  --text-primary:#000000;
  --text-secondary:#1a1a1a;
  --text-dim:rgba(0,0,0,0.8);
  --text-accent:#990066;
  --text-highlight:#003399;
  --text-link:#0055cc;
  --row-diff:#fff3cd;
  --row-critical:#ffcccc;
  --conditioned-bg:#f0e6f6;
  --chart-paper:#ffffff;
  --chart-plot:#f5f5f5;
  --chart-grid:#cccccc;
  --chart-text:#000000;
  /* Data colors - High contrast but pleasant */
  --data-dt-minmax:#006688;
  --data-dt-avg:#007755;
  --data-conditioned:#8b008b;
  --data-delta:#cc5500;
}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;margin:0;background:var(--bg-primary);color:var(--text-primary);min-width:1000px}
html{overflow-x:auto;overflow-y:scroll}
header{padding:12px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}
main{padding:0;padding-bottom:60px}
/* SPA view management */
.view{display:none}
.view.active{display:block}
.view.hidden{display:none}
/* Chart & Map views need full height to size children correctly */
#chart-view.active,#map-view.active,#comparison-view.active{display:flex;flex-direction:column;height:100%}
h1{font-size:18px;margin:0}
.dim{opacity:.75}
/* Raw Data view */
.raw-container{padding:16px;overflow-x:auto}
.raw-container table{width:max-content;min-width:100%;border-collapse:collapse;margin-top:12px;font-size:14px;table-layout:auto}
.raw-container .col-job{width:10ch;min-width:80px}
.raw-container .col-addr{width:14ch;min-width:100px}
.raw-container .col-dt-minmax{width:18ch;min-width:145px}
.raw-container .col-dt-avg{width:10ch;min-width:80px}
.raw-container .col-dt-current{width:10ch;min-width:80px}
.raw-container .col-epoch{width:18ch;min-width:150px}
.raw-container .col-raw-values{width:auto;min-width:200px;overflow:visible;text-overflow:clip}
.dt-minmax{color:var(--data-dt-minmax)}
.dt-avg{color:var(--data-dt-avg)}
/* Job color indicators (barre colorate per job) */
.job-color-0{border-left:3px solid #4a9eff}
.job-color-1{border-left:3px solid #ff9a4a}
.job-color-2{border-left:3px solid #9aff4a}
.job-color-3{border-left:3px solid #ff4a9a}
.job-color-4{border-left:3px solid #4afff0}
.job-color-5{border-left:3px solid #f0ff4a}
.job-color-6{border-left:3px solid #9a4aff}
.job-color-7{border-left:3px solid #ff4a4a}
/* Default view */
.default-container{padding:16px;overflow-x:auto}
table{width:max-content;min-width:100%;border-collapse:collapse;margin-top:12px;font-size:14px;table-layout:auto}
th,td{border-bottom:1px solid var(--border-tertiary);padding:6px 8px;text-align:left;white-space:nowrap}
th{position:sticky;top:0;background:var(--bg-tertiary);z-index:1}
/* Larghezze specifiche per colonne (Conditioned View) */
.col-jobname{width:13ch;min-width:101px}
.col-address{width:14ch;min-width:96px}
.col-dt{width:12ch;min-width:105px}
.col-timestamp{width:24ch;min-width:200px}
.col-conditioned-values{width:17ch;min-width:125px}
.col-channel{width:18ch;min-width:162px}
.col-description{width:auto;min-width:300px}
.job{font-weight:600}
.addr{color:var(--text-secondary)}
.dt{color:var(--text-highlight)}
.conditioned-vals{color:var(--data-conditioned);background:var(--conditioned-bg)}
.channel{color:var(--text-accent);font-style:italic}
.description{color:var(--text-secondary);font-size:14px}
/* Indicatori specifici per protocollo */
.protocol-modbus{border-left:3px solid #4a9eff}
.protocol-nmea{border-left:3px solid #ff9a4a}
.protocol-indicator{font-size:10px;padding:1px 4px;border-radius:2px;margin-left:4px}
.protocol-indicator.modbus{background:#1e3a5f;color:#4a9eff}
.protocol-indicator.nmea{background:#5f3a1e;color:#ff9a4a}
/* Column visibility toggle */
th .col-hide-btn{opacity:0;margin-left:4px;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:11px;padding:0 2px;vertical-align:middle;transition:opacity 0.15s}
th:hover .col-hide-btn{opacity:0.7}
th .col-hide-btn:hover{opacity:1;color:#f85}
/* Column toolbar (above table - always visible) */
.col-toolbar{display:flex;align-items:center;gap:8px;padding:6px 12px;margin-bottom:4px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:6px;flex-wrap:wrap}
.toolbar-separator{color:var(--border-secondary);font-size:14px;user-select:none}
.toolbar-col-buttons{display:contents}

/* ======= Unified Button System (matching settings.html btn-primary pattern) ======= */
.btn{padding:6px 14px;border:none;border-radius:6px;font-weight:600;font-size:13px;cursor:pointer;transition:all 0.2s ease;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;line-height:1.4}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* Variant: default (neutral) */
.btn-default{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-secondary)}
.btn-default:hover{background:var(--bg-hover);box-shadow:0 2px 8px rgba(0,0,0,0.15)}

/* Variant: primary (accent blue) */
.btn-primary{background:var(--accent-color,#3b82f6);color:#fff}
.btn-primary:hover{background:var(--accent-hover,#2563eb);box-shadow:0 4px 12px rgba(59,130,246,0.3)}

/* Variant: secondary */
.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-secondary)}
.btn-secondary:hover{background:var(--bg-hover);box-shadow:0 2px 8px rgba(0,0,0,0.15)}

/* Variant: success (green toggle active) */
.btn-success,.btn.active{background:#1a3a1a;color:#9acd32;border:1px solid #2a5a2a}
.btn-success:hover,.btn.active:hover{background:#224a22;box-shadow:0 2px 8px rgba(154,205,50,0.2)}

/* Variant: warning (amber/restore) */
.btn-warning{background:#2a1a0a;color:#f0c060;border:1px solid #5a3a20}
.btn-warning:hover{background:#3a2a10;border-color:#7a5a30;box-shadow:0 2px 8px rgba(240,192,96,0.15)}

/* Variant: danger (red) */
.btn-danger{background:#3a1210;color:#f85;border:1px solid #5a2a20}
.btn-danger:hover{background:#4a1a18;border-color:#7a3a28;box-shadow:0 2px 8px rgba(255,136,85,0.2)}

/* Size: small (for footer, compact areas) */
.btn-sm{padding:4px 10px;font-size:12px;border-radius:5px}

/* Size: extra small (inline, column restore) */
.btn-xs{padding:3px 8px;font-size:12px;border-radius:4px;font-weight:500}
.group{margin-top:18px;font-weight:700;color:var(--text-highlight)}
/* Unified footer bar */
.heartbeat-footer{position:fixed;left:0;right:0;bottom:0;background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:8px 16px;font-size:13px;display:flex;justify-content:space-between;align-items:center;z-index:120;height:var(--footer-height);box-sizing:border-box}
.heartbeat-footer .footer-left{display:flex;align-items:center;gap:10px}
.heartbeat-footer .footer-right{display:flex;align-items:center;gap:10px}
.heartbeat-footer .badge{background:var(--bg-tertiary);padding:4px 8px;border-radius:4px}
.heartbeat-footer .badge-activity{min-width:110px;text-align:center;transition:background 0.2s ease,color 0.2s ease,opacity 0.2s ease}
.heartbeat-footer .badge-activity.is-busy{background:rgba(59,130,246,0.18);color:var(--text-primary);opacity:0.95}
/* Clock delta severity colors */
#clock-delta.delta-ok{color:var(--text-primary)}
#clock-delta.delta-warn{color:#f59e0b;font-weight:600}
#clock-delta.delta-critical{color:#ef4444;font-weight:700}
.badge{background:var(--bg-input);border:1px solid var(--border-secondary);border-radius:6px;padding:2px 6px}
.dropdown{position:relative;display:inline-block}
.dropdown-content{display:none;position:absolute;background:var(--bg-input);border:1px solid var(--border-secondary);border-radius:4px;min-width:160px;z-index:130;bottom:100%;left:0;margin-bottom:4px;padding:4px 0}
.dropdown-btn{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:5px;padding:2px 8px;cursor:pointer;font-weight:600;font-size:12px;transition:all 0.2s ease}
.dropdown-btn:hover{background:var(--bg-hover);box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.dropdown:hover .dropdown-content,.dropdown-content:hover{display:block}
.dropdown::after{content:'';position:absolute;bottom:100%;left:0;width:100%;height:15px}
.dropdown-content label{display:block;padding:4px 8px;cursor:pointer}
.dropdown-content label:hover{background:var(--bg-hover)}
.dropdown input[type="checkbox"]{margin-right:6px}
.all-checked input[type="checkbox"]:not(#all){opacity:0.5;pointer-events:none}
/* Navigation bar styles */
.nav-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);position:fixed;top:0;left:0;right:0;z-index:120;height:var(--navbar-height);box-sizing:border-box}
.nav-bar h1{font-size:18px;margin:0;text-align:left}
.nav-controls{display:flex;align-items:center;gap:12px}
.view-selector{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;font-weight:600;transition:all 0.2s ease}
.view-selector:hover{background:var(--bg-hover)}
.nav-button.hidden{display:none}

/* =========================================================================
 * Dashboard Sidebar Navigation (same pattern as settings.css sidebar)
 * ========================================================================= */
.dashboard-container {
    display: flex;
    height: 100vh;
    background: var(--bg-primary);
    min-width: 1000px;
}

.dashboard-nav {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    padding: 20px 0 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    height: calc(100vh - var(--navbar-height) - var(--footer-height));
    z-index: 99;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    transition: width 0.25s ease;
}
.dashboard-nav::after {
    content: '';
    display: block;
    min-height: var(--footer-height);
    flex-shrink: 0;
}

[data-theme="dark"] .dashboard-nav {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

.dashboard-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.dashboard-nav .nav-link:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.dashboard-nav .nav-link.active {
    background: var(--accent-color, #3b82f6);
    color: #fff;
    border-left-color: #fff;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
[data-theme="light"] .dashboard-nav .nav-link.active {
    background: var(--accent-color, #2563eb);
    color: #fff;
    border-left-color: #fff;
}

.dashboard-nav .nav-icon {
    font-size: 20px;
    margin-right: 12px;
    min-width: 24px;
    text-align: center;
}

.dashboard-nav .nav-label {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

/* Navbar User Info - top-right in navbar */
.navbar-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 4px 12px;
    border-left: 1px solid var(--border-color);
}
.navbar-user-info .user-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}
.navbar-user-info .role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Sidebar theme toggle link */
.sidebar-theme-toggle {
    margin-top: auto;
    color: var(--text-secondary) !important;
    opacity: 0.7;
}
.sidebar-theme-toggle:hover {
    opacity: 1;
    background: var(--bg-hover);
}

/* Sidebar logout link */
.sidebar-logout {
    margin-top: 0;
    color: var(--text-secondary) !important;
    opacity: 0.7;
}
.sidebar-logout:hover {
    color: #ef4444 !important;
    opacity: 1;
    background: #ef444410;
}

/* Sidebar divider line */
.sidebar-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 16px;
}

/* Sidebar accordion (PKI submenu) */
.sidebar-accordion { display: flex; flex-direction: column; }
.accordion-toggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.accordion-toggle .accordion-arrow { font-size: 10px; transition: transform 0.2s; margin-left: auto; padding-left: 6px; }
.accordion-toggle .accordion-arrow.open { transform: rotate(90deg); }
.accordion-body { display: none; flex-direction: column; padding-left: 12px; }
.accordion-body.open { display: flex; }
.sub-link { padding: 8px 20px 8px 32px; font-size: 13px; color: var(--text-dim); text-decoration: none; border-radius: 6px; transition: background 0.15s, color 0.15s; display: flex; align-items: center; gap: 8px; }
.sub-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.sub-link.active { color: var(--text-accent); background: var(--bg-hover); font-weight: 600; }

/* Audit page layout */
.audit-page { padding: 20px 28px; }
.audit-page .tab-header { margin-bottom: 24px; }
/* Stats grid cards */
.stats-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.stat-card { background: var(--bg-tertiary); border: 1px solid var(--border-secondary); border-radius: 8px; padding: 16px 20px; min-width: 140px; flex: 1; text-align: center; }
.stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--text-accent); }
.stat-card .stat-label { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

/* PKI badges */
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.badge-type-server { background: #3b82f620; color: #3b82f6; }
.badge-type-client { background: #f59e0b20; color: #f59e0b; }
.badge-type-codesigning { background: #8b5cf620; color: #8b5cf6; }
.badge-status-active { background: #22c55e20; color: #22c55e; }
.badge-status-superseded { background: #64748b20; color: #94a3b8; }
.badge-status-expired { background: #ef444420; color: #ef4444; }
.badge-status-revoked { background: #dc262620; color: #dc2626; }

/* Revocation result inline panel (queue page) */
.revocation-result-panel { margin-top: 8px; padding: 12px; background: var(--bg-secondary); border-radius: 8px; border: 1px solid var(--border); }
.rev-banner { display: flex; align-items: center; gap: 8px; padding: 8px 0; justify-content: center; }
.rev-active { color: #22c55e; }
.rev-revoked { color: #dc2626; }
.rev-superseded { color: #f59e0b; }
.rev-expired { color: #6b7280; }
.rev-unknown { color: #eab308; }
.rev-error { color: #ef4444; }
.rev-details-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 13px; }
.rev-details-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); }
.rev-details-table td:first-child { white-space: nowrap; width: 120px; color: var(--text-secondary); }

/* Cert result panel (view_cert job) */
.cert-result-panel { margin-top: 8px; padding: 12px; background: var(--bg-secondary); border-radius: 8px; border: 1px solid var(--border); }
.cert-banner { text-align: center; font-weight: 700; font-size: 15px; padding: 6px 0; color: var(--text-primary); }
.cert-info-block { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow-y: auto; margin: 8px 0; }
.cert-details-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 13px; }
.cert-details-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); }
.cert-details-table td:first-child { white-space: nowrap; width: 120px; color: var(--text-secondary); }
.cert-path-section { margin-top: 10px; }
.cert-path-chain { margin-top: 6px; }
.cert-path-node { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.cert-path-level { font-weight: 600; font-size: 12px; color: var(--accent); }
.cert-path-subject { font-size: 13px; }
.cert-path-dates { font-size: 11px; color: var(--text-secondary); }
.cert-path-arrow { text-align: center; color: var(--text-secondary); font-size: 14px; line-height: 1; }
.cert-verify-banner { text-align: center; padding: 8px; margin-top: 8px; border-radius: 6px; font-weight: 600; }
.cert-verify-ok { background: rgba(34,197,94,0.12); color: #22c55e; }
.cert-verify-fail { background: rgba(220,38,38,0.12); color: #dc2626; }
.cert-verify-warn { background: rgba(234,179,8,0.12); color: #eab308; }
.cert-verify-error { font-size: 12px; color: #ef4444; margin-top: 4px; text-align: center; }
.cert-sig-section, .cert-ca-section { margin-top: 10px; }
.cert-hint { margin-top: 8px; padding: 8px; background: rgba(59,130,246,0.08); border-radius: 6px; font-size: 12px; color: var(--text-secondary); }

/* Clickable table rows */
.clickable-row { cursor: pointer; transition: background 0.15s; }
.clickable-row:hover { background: var(--bg-hover); }

/* Device Registry: grouped CN rows */
.cn-group-row .expand-icon { width: 24px; text-align: center; color: var(--text-secondary); font-size: 11px; user-select: none; }
.cn-group-row .action-icons { display: flex; gap: 4px; justify-content: flex-end; }
.cn-detail-row { background: var(--bg-secondary); }
.cn-detail-row.hidden { display: none; }

/* Cert detail inline table */
.cert-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cert-detail-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-secondary); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--border-primary); white-space: nowrap; }
.cert-detail-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-primary); white-space: nowrap; }
.cert-detail-table tr:last-child td { border-bottom: none; }

/* Scrollable wrapper for expanded cert details */
.cn-detail-row td[colspan] { padding: 0; }
.cert-detail-scroll { overflow-x: auto; padding: 8px; }

/* Audit table: allow details column to wrap */
#audit-table td:last-child { white-space: normal; word-break: break-word; max-width: 320px; }

.serial-full { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 12px; word-break: break-all; letter-spacing: 0.5px; }

.btn-icon { background: none; border: none; cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 4px; transition: background 0.15s; }
.btn-icon:hover { background: var(--bg-hover); }

.registry-toolbar { display: flex; gap: 10px; align-items: center; }

/* History modal table */
.cert-path-table { width: 100%; }
.cert-path-table .serial-full { font-size: 11px; }

/* History modal: wide + resizable */
.modal-content.modal-history { width: 1400px; max-width: 98vw; max-height: 90vh; resize: both; overflow: hidden; min-width: 400px; min-height: 300px; }
.modal-content.modal-history .modal-body { overflow-y: auto; overflow-x: auto; flex: 1; }
.modal-content.modal-history table { white-space: nowrap; }

/* Hidden utility for sidebar nav links */
.dashboard-nav .nav-link.hidden,
.settings-nav .nav-link.hidden {
    display: none !important;
}
.role-badge.root { background: #8b5cf620; color: #8b5cf6 }
.role-badge.admin { background: #ef444420; color: #ef4444 }
.role-badge.user { background: #3b82f620; color: #3b82f6 }
.role-badge.viewer { background: #10b98120; color: #10b981 }
.role-badge.disabled { background: #ff444420; color: #ff6666; font-size: 12px; }
.role-badge.warning { background: #ffaa4420; color: #ffaa44; font-size: 12px; }
tr.row-disabled { opacity: 0.55; }
.btn-icon.enable { color: #10b981 }
.btn-icon.disable { color: #ef4444 }
.btn-perm-toggle { font-size: 11px; padding: 2px 7px; border-radius: 10px; border: 1px solid; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.btn-perm-toggle.perm-on  { background: #10b98118; color: #10b981; border-color: #10b98140; }
.btn-perm-toggle.perm-off { background: #ef444418; color: #ef4444; border-color: #ef444440; }
.btn-perm-toggle:hover { opacity: 0.75; }
td.perm-cell { white-space: nowrap; }

/* Dashboard content area - right of sidebar */
.dashboard-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    margin-top: var(--navbar-height);
    min-width: 0;
    height: calc(100vh - var(--navbar-height) - var(--footer-height));
    overflow-y: auto;
    overflow-x: auto;
}

/* Shift footer to account for sidebar */
.dashboard-content .heartbeat-footer {
    left: var(--sidebar-width);
}

/* Responsive: sidebar collapses below 1200px, shows only icons */
@media (max-width: 1199px) {
    .dashboard-nav {
        width: var(--sidebar-collapsed);
        z-index: 110;
    }

    .dashboard-nav .nav-link {
        padding: 12px 18px;
        justify-content: center;
    }

    .dashboard-nav .nav-icon {
        margin-right: 0;
    }

    .dashboard-nav .nav-label {
        opacity: 0;
        width: 0;
        display: none;
    }

    /* Hover: expand sidebar as overlay */
    .dashboard-nav:hover {
        width: var(--sidebar-width);
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
    }

    .dashboard-nav:hover .nav-link {
        padding: 12px 20px;
        justify-content: flex-start;
    }

    .dashboard-nav:hover .nav-icon {
        margin-right: 12px;
    }

    .dashboard-nav:hover .nav-label {
        opacity: 1;
        width: auto;
        display: inline;
    }

    /* Content shifts for collapsed sidebar */
    .dashboard-content {
        margin-left: var(--sidebar-collapsed);
    }

    .dashboard-content .heartbeat-footer {
        left: var(--sidebar-collapsed);
    }
}

/* Comparison view styles */
.comparison-container{padding:16px;padding-bottom:0;display:flex;flex-direction:column;height:100%;overflow:hidden}
.comparison-info{margin-bottom:8px;font-size:16px;font-weight:600;color:var(--text-highlight);flex-shrink:0}
.comparison-info span{color:var(--text-accent)}
/* Scrollable table wrapper: vertical scroll inside the view, not at page bottom */
.comparison-table-wrapper{flex:1;overflow-y:auto;overflow-x:auto;min-height:0;border:1px solid var(--border-tertiary);border-radius:4px}
#comparison-table{width:max-content;min-width:100%;border-collapse:collapse;font-size:14px;table-layout:auto}
#comparison-table th,#comparison-table td{border-bottom:1px solid var(--border-tertiary);padding:6px 8px;text-align:left;white-space:nowrap}
#comparison-table th{background:var(--bg-tertiary);position:sticky;top:0;z-index:2;font-weight:600}
#comparison-table thead tr:first-child th{top:0}
#comparison-table thead tr:nth-child(2) th{top:28px}
#comparison-table thead th[colspan]{text-align:center;border-bottom:1px solid var(--border-secondary)}
/* Comparison table column widths */
#comparison-table .col-address{width:12ch;min-width:96px}
#comparison-table .col-channel{width:16ch;min-width:130px}
#comparison-table .col-dt{width:10ch;min-width:85px;text-align:right}
#comparison-table .col-raw-values{width:12ch;min-width:100px;text-align:right}
#comparison-table .col-conditioned-values{width:14ch;min-width:115px;text-align:right}
#comparison-table .col-delta-value{width:10ch;min-width:85px;text-align:right}
#comparison-table .col-description{width:auto;min-width:180px}
#comparison-table tbody td.col-dt,
#comparison-table tbody td.col-raw-values,
#comparison-table tbody td.col-conditioned-values,
#comparison-table tbody td.col-delta-value{font-variant-numeric:tabular-nums}
#comparison-table tbody tr.diff{background:var(--row-diff)}
#comparison-table tbody tr.critical{background:var(--row-critical)}
#comparison-table tbody tr.diff .raw-vals,#comparison-table tbody tr.diff .conditioned-vals{background:var(--row-diff)}
#comparison-table tbody tr.critical .raw-vals,#comparison-table tbody tr.critical .conditioned-vals{background:var(--row-critical)}
#comparison-table .delta-value{color:var(--data-delta);font-weight:600}
#comparison-table .delta-time{color:var(--text-secondary);font-style:italic}
#comparison-table .error{color:#f85;text-align:center;font-style:italic}
/* Comparison controls styles */
.comparison-controls{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding:12px;background:var(--bg-tertiary);border-radius:6px;flex-wrap:wrap}
.comparison-controls label{display:flex;align-items:center;gap:8px;color:var(--text-primary);font-size:14px}
.job-selector{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:4px;padding:6px 10px;cursor:pointer;font-size:14px;min-width:180px}
.job-selector:hover{background:var(--bg-hover)}
.vs-separator{font-size:16px;font-weight:600;color:var(--text-accent);padding:0 8px}
.alarm-count{margin-left:16px;padding:4px 12px;background:#183153;color:#4a9eff;border-radius:4px;font-size:13px;font-weight:600}
.alarm-count.hidden{display:none}
.btn-reset-alarms{margin-left:12px}
.btn-reset-alarms:disabled{opacity:0.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-reset-alarms:disabled:hover{background:#3a1210;border-color:#5a2a20}
/* Chart view styles */
.chart-container{padding:16px;padding-bottom:0;flex:1;display:flex;flex-direction:column;min-height:0}
.chart-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding:12px;background:var(--bg-tertiary);border-radius:6px}
.signal-row{display:flex;align-items:center;gap:8px}
.signal-label{color:var(--text-secondary);font-size:13px;font-weight:600;width:80px;white-space:nowrap}
.job-selector-small{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:4px;padding:6px 10px;cursor:pointer;font-size:13px;min-width:120px}
.job-selector-small:hover{background:var(--bg-hover)}
.control-group{display:flex;align-items:center;gap:8px;margin-top:8px}
.control-group label{color:var(--text-secondary);font-size:13px;font-weight:600;white-space:nowrap}
.address-selector,.data-type-selector{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:4px;padding:6px 10px;cursor:pointer;font-size:13px;min-width:180px}
.address-selector:hover:not(:disabled),.data-type-selector:hover{background:var(--bg-hover)}
.address-selector:disabled{opacity:0.4;cursor:not-allowed}
.yaxis-selector{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:4px;padding:6px 10px;cursor:pointer;font-size:13px;min-width:130px}
.yaxis-selector:hover{background:var(--bg-hover)}
.control-actions{display:flex;gap:8px;margin-top:8px}
.btn-pause-chart.paused{background:#1a3a1a;border-color:#2a5a2a;color:#9acd32}
.chart-info{display:flex;justify-content:flex-end;align-items:center;margin-bottom:12px;padding:10px 12px;background:var(--bg-tertiary);border-radius:4px;font-size:14px}
.chart-stats{color:var(--text-secondary);font-size:13px}
.chart-plot{width:100%;flex:1;min-height:300px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:6px}
/* Popup allarmi */
.alarm-popup{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:1000}
.alarm-popup.hidden{display:none}
.alarm-popup-content{background:var(--bg-tertiary);border:2px solid var(--border-secondary);border-radius:8px;width:90%;max-width:450px;box-shadow:0 4px 20px rgba(0,0,0,0.5)}
.alarm-popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border-secondary)}
.alarm-popup-header h3{margin:0;color:var(--text-primary);font-size:18px}
.popup-close{background:none;border:none;color:var(--text-primary);font-size:28px;cursor:pointer;padding:0;width:32px;height:32px;line-height:28px;border-radius:4px}
.popup-close:hover{background:var(--bg-hover)}
.alarm-popup-body{padding:20px}
.popup-info{margin-bottom:16px;padding:12px;background:var(--bg-input);border-radius:4px;color:var(--text-secondary);font-size:14px}
.popup-checkbox{display:flex;align-items:center;gap:8px;margin-bottom:16px;cursor:pointer;font-size:14px;color:var(--text-primary);font-weight:600}
.popup-checkbox input[type="checkbox"]{width:18px;height:18px;cursor:pointer}
.popup-thresholds{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;padding:12px;background:var(--bg-secondary);border-radius:4px;border:1px solid var(--border-secondary)}
.popup-thresholds label{display:flex;flex-direction:column;gap:4px;color:var(--text-secondary);font-size:13px}
.popup-thresholds input[type="number"]{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:4px;padding:8px;font-size:14px}
.popup-thresholds input[type="number"]:focus{outline:none;border-color:var(--text-link)}
.popup-thresholds input[type="number"]:disabled{opacity:0.4;cursor:not-allowed}
.popup-actions{display:flex;gap:12px;justify-content:flex-end}
.popup-actions .btn{padding:8px 20px;font-size:14px}
/* Delta value clickable */
#comparison-table .delta-value{cursor:pointer;position:relative}
#comparison-table .delta-value:hover{background:#234167;border-radius:4px}
#comparison-table .delta-value.alarm-active::after{content:'🔔';margin-left:6px;font-size:12px}
/* Map view styles */
.map-container{display:flex;flex-direction:column;flex:1;padding:16px;gap:12px;box-sizing:border-box;min-height:0}
.map-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px;background:var(--bg-tertiary);border-radius:6px}
.map-controls .control-group{display:flex;align-items:center;gap:8px}
.map-controls label{color:var(--text-secondary);font-size:13px;font-weight:600;white-space:nowrap}
.map-controls .job-selector,.map-controls .channel-selector{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:4px;padding:6px 10px;cursor:pointer;font-size:13px;min-width:150px}
.map-controls .job-selector:hover:not(:disabled),.map-controls .channel-selector:hover:not(:disabled){background:var(--bg-hover)}
.map-controls .channel-selector:disabled{opacity:0.4;cursor:not-allowed}
.map-view{flex:1;min-height:400px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:6px;z-index:1}
.map-info{display:flex;gap:16px;padding:10px 12px;background:var(--bg-tertiary);border-radius:4px;font-size:13px;flex-wrap:wrap}
.map-info .info-item{display:flex;gap:6px;align-items:center}
.map-info .info-label{color:var(--text-secondary);font-weight:600}
.map-info .info-item span:last-child{color:var(--text-primary)}
/* Boat marker custom styles */
.boat-marker{background:transparent!important;border:none!important}
.boat-marker svg{filter:drop-shadow(0 0 3px rgba(0,0,0,0.8))}

/* Stats view styles */
.stats-container{padding:16px;max-width:1400px;margin:0 auto;overflow-x:auto}
.stats-container h2{color:var(--text-primary);font-size:20px;margin:24px 0 12px 0;border-bottom:2px solid var(--border-secondary);padding-bottom:8px;display:flex;justify-content:space-between;align-items:center}
#stats-table,#errors-table{width:100%;border-collapse:collapse;margin-bottom:24px;font-size:14px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:6px}
#stats-table th,#errors-table th{background:var(--bg-secondary);padding:10px;text-align:left;font-weight:600;color:var(--text-secondary);border-bottom:2px solid var(--border-secondary)}
#stats-table td,#errors-table td{padding:10px;border-bottom:1px solid var(--border-tertiary)}
#stats-table tbody tr:hover,#errors-table tbody tr:hover{background:var(--bg-input)}
.badge-success{background:#1e5f3a;color:#4eff9a;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600}
.badge-error{background:#5f1e1e;color:#ff6b6b;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600}
.badge-warning{background:#5f4a1e;color:#ffb84a;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600}
.badge-neutral{background:#1e2a3d;color:#999;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600}
.btn-clear-error{background:#5f1e1e;color:#ff6b6b;border:1px solid #ff6b6b;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:12px;font-weight:600}
.btn-clear-error:hover{background:#7f2e2e;color:#fff}
.btn-clear-all{margin-left:auto}
/* Timestamp toggle */
.timestamp-toggle{position:relative}
.timestamp-toggle:hover{background:#234167!important;text-decoration:underline}

/* Reconnecting overlay */
#reconnecting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

#reconnecting-overlay.visible {
  display: flex;
}

.reconnecting-content {
  background: var(--bg-secondary);
  border: 2px solid var(--border-secondary);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  min-width: 300px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.reconnecting-content p {
  color: var(--text-primary);
  font-size: 16px;
  margin: 16px 0 0 0;
  font-weight: 500;
}

.spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border: 4px solid var(--border-secondary);
  border-top: 4px solid var(--text-secondary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.offline-icon {
  display: none;
  font-size: 48px;
  margin: 0 auto;
  line-height: 1;
}

#reconnecting-overlay.phase-offline .reconnecting-content {
  border-color: #ef4444;
}

#reconnecting-overlay.phase-offline .reconnecting-content p {
  color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Lizard – Crypto Dashboard Styles
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Crypto container (shared by all views) */
.crypto-container{padding:24px;max-width:1200px}
.crypto-container h2{margin:0 0 4px;font-size:22px;color:var(--text-primary)}
.view-subtitle{color:var(--text-dim);font-size:14px;margin:0 0 24px}

/* Operation grid */
.op-grid{display:flex;flex-direction:column;gap:24px}
.op-section h3{margin:0 0 12px;font-size:16px;color:var(--text-highlight);padding-bottom:8px;border-bottom:1px solid var(--border-tertiary)}
.op-section{display:flex;flex-direction:column;gap:8px}

/* Operation cards */
.op-card{display:flex;flex-direction:column;padding:14px 18px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:8px;cursor:pointer;transition:all 0.2s ease}
.op-card:hover{background:var(--bg-hover);border-color:var(--text-link);transform:translateX(4px);box-shadow:0 2px 12px rgba(74,158,255,0.15)}
.op-title{font-weight:600;font-size:15px;color:var(--text-primary);margin-bottom:4px}
.op-desc{font-size:13px;color:var(--text-dim)}

/* Keyring status bar */
.keyring-status{margin-bottom:16px}

/* ── Modal ─────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(2px)}
.modal.hidden{display:none}
.modal-content{background:var(--bg-secondary);border:2px solid var(--border-secondary);border-radius:12px;width:90%;max-width:800px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.5)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-secondary)}
.modal-header h3{margin:0;font-size:18px;color:var(--text-primary)}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 20px;border-top:1px solid var(--border-secondary)}

/* Modal form inputs */
.modal-body .form-group{margin-bottom:16px}
.modal-body .form-group label{display:block;color:var(--text-primary);font-size:14px;font-weight:500;margin-bottom:6px}
.modal-input{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border-secondary);border-radius:6px;color:var(--text-primary);font-size:14px;box-sizing:border-box;font-family:inherit;transition:border-color 0.2s}
.modal-input:focus{outline:none;border-color:var(--text-link);box-shadow:0 0 0 3px rgba(74,158,255,0.1)}
textarea.modal-input{resize:vertical;min-height:80px}
select.modal-input{cursor:pointer}

/* File input */
input[type="file"].modal-input{padding:8px 10px;cursor:pointer;line-height:1.4}
input[type="file"].modal-input::file-selector-button{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:4px;padding:6px 14px;margin-right:10px;cursor:pointer;font-size:13px;transition:background 0.2s}
input[type="file"].modal-input::file-selector-button:hover{background:var(--text-link);color:#fff}

/* Result JSON display */
.result-json{background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:6px;padding:16px;font-family:'JetBrains Mono','Fira Code',monospace;font-size:13px;color:var(--text-primary);overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:400px;overflow-y:auto}

/* Verification result */
.verification-result{padding:4px 0}
.verification-status{padding:10px 14px;border-radius:6px;font-weight:600;font-size:14px;margin-bottom:12px}
.verification-status.valid{background:rgba(50,200,80,0.12);color:#5cdb5c;border:1px solid rgba(50,200,80,0.25)}
.verification-status.invalid{background:rgba(240,60,60,0.12);color:#ff6b6b;border:1px solid rgba(240,60,60,0.25)}

/* Certification chain diagram */
.cert-chain{padding:12px 0}
.cert-chain-node{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:6px}
.cert-chain-icon{font-size:20px;flex-shrink:0}
.cert-chain-label{font-weight:600;color:var(--text-secondary);font-size:12px;text-transform:uppercase;min-width:130px}
.cert-chain-cn{color:var(--text-primary);font-size:14px;font-weight:500}
.cert-chain-arrow{text-align:center;color:var(--text-secondary);font-size:12px;padding:2px 0;margin-left:20px}

/* Certification path table */
.cert-path-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:auto}
.cert-path-table th{text-align:left;padding:8px 10px;background:var(--bg-tertiary);color:var(--text-secondary);font-weight:600;border-bottom:2px solid var(--border-secondary);white-space:nowrap}
.cert-path-table td{padding:8px 10px;border-bottom:1px solid var(--border-primary);color:var(--text-primary);word-break:break-word}
.cert-path-table tr:last-child td{border-bottom:none}
.cert-path-table tr:hover td{background:rgba(74,158,255,0.05)}

/* Collapsible certificate details */
.cert-details-toggle{margin-bottom:12px}
.cert-details-toggle summary{cursor:pointer;padding:10px 14px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:6px;font-weight:600;font-size:14px;color:var(--text-secondary);transition:all 0.2s ease;user-select:none;list-style:none}
.cert-details-toggle summary::-webkit-details-marker{display:none}
.cert-details-toggle summary::before{content:'▶';display:inline-block;margin-right:8px;transition:transform 0.2s ease;font-size:11px}
.cert-details-toggle[open] summary::before{transform:rotate(90deg)}
.cert-details-toggle summary:hover{background:var(--bg-hover);color:var(--text-primary)}
.cert-details-toggle .result-json{margin-top:8px;border-top-left-radius:0;border-top-right-radius:0}

/* ═══════════════════════════════════════════════════════════════
   Job Queue Panel
   ═══════════════════════════════════════════════════════════════ */
.jobs-list{display:flex;flex-direction:column;gap:10px}
.job-card{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:8px;padding:12px 14px;transition:border-color 0.2s}
.job-card:hover{border-color:var(--border-secondary)}
.job-status-processing{border-left:3px solid #4a9eff}
.job-status-queued{border-left:3px solid #a0aec0}
.job-status-completed{border-left:3px solid #48bb78}
.job-status-failed{border-left:3px solid #ef4444}
.job-card-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.job-icon{font-size:16px;flex-shrink:0}
.job-filename{font-weight:600;font-size:13px;color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job-actions{display:flex;gap:4px;flex-shrink:0}
.job-progress-bar{height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden;margin-bottom:6px}
.job-progress-fill{height:100%;border-radius:3px;transition:width 0.4s ease}
.job-bar-queued .job-progress-fill{background:#a0aec0}
.job-bar-processing .job-progress-fill{background:linear-gradient(90deg,#4a9eff,#63b3ed);animation:job-pulse 1.5s ease-in-out infinite}
.job-bar-completed .job-progress-fill{background:#48bb78}
.job-bar-failed .job-progress-fill{background:#ef4444}
@keyframes job-pulse{0%,100%{opacity:1}50%{opacity:0.6}}
.job-card-footer{display:flex;justify-content:space-between;align-items:center}
.job-message{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.job-pct{font-size:12px;color:var(--text-secondary);font-weight:600;min-width:36px;text-align:right}
/* Queue summary bar */
.queue-summary-bar{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:8px;padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.queue-summary-bar .qs-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary)}
.queue-summary-bar .qs-value{font-weight:700;color:var(--text-primary);font-size:14px}
.queue-summary-bar .qs-highlight{color:#4a9eff;font-weight:700;font-size:14px}
/* Job group sections */
/* Processing section (fixed, non-collapsible) */
.job-processing-section{margin-bottom:16px;background:var(--bg-secondary);border:1px solid var(--accent-primary);border-radius:8px;padding:12px}
.job-processing-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.job-processing-header .job-group-title{font-weight:700;font-size:14px;color:var(--accent-primary)}
.job-processing-header .job-group-count{font-size:12px;color:var(--text-secondary);background:var(--bg-tertiary);padding:1px 8px;border-radius:10px}
.job-processing-body{display:flex;flex-direction:column;gap:8px}
/* Collapsible groups */
.job-group{margin-bottom:12px}
.job-group-header{display:flex;align-items:center;gap:8px;padding:8px 4px;cursor:pointer;user-select:none;border-bottom:1px solid var(--border-primary);margin-bottom:8px}
.job-group-header:hover{opacity:0.8}
.job-group-title{font-weight:600;font-size:13px;color:var(--text-primary)}
.job-group-count{font-size:12px;color:var(--text-secondary);background:var(--bg-tertiary);padding:1px 8px;border-radius:10px}
.job-group-toggle{font-size:11px;color:var(--text-secondary);margin-left:auto;transition:transform 0.2s}
.job-group.collapsed .job-group-toggle{transform:rotate(-90deg)}
.job-group.collapsed .job-group-body{display:none}
.job-group-body{display:flex;flex-direction:column;gap:8px}
/* Reorder drag handle */
.job-drag-handle{cursor:grab;font-size:14px;color:var(--text-secondary);flex-shrink:0;margin-right:4px;user-select:none;padding:2px 4px;border-radius:3px;transition:color 0.15s,background 0.15s}
.job-drag-handle:hover{color:var(--text-primary);background:var(--bg-tertiary)}
.job-drag-handle:active{cursor:grabbing}
.job-card.job-dragging{opacity:0.4;border-style:dashed}
.job-card.job-drag-over{border-color:#4a9eff;box-shadow:0 0 0 1px #4a9eff}
/* Job number badge */
.job-num-badge{font-size:11px;font-weight:700;color:var(--text-secondary);background:var(--bg-tertiary);padding:1px 6px;border-radius:8px;flex-shrink:0;white-space:nowrap}
/* Queue position badge */
.job-queue-badge{font-size:11px;background:var(--bg-tertiary);color:var(--text-secondary);padding:2px 8px;border-radius:10px;white-space:nowrap}