/* Airmodus Dashboard Styles */

:root {
    --primary: #76d13a;
    --primary-dark: #5fb82e;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --gray-50: #f9fafb;
    --gray-100: #f7f7f7;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #444444;
    --gray-800: #1f2937;
    --gray-900: #444444;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--gray-100);
    color: var(--gray-900);
    line-height: 1.5;
}

/* Navbar */
.navbar {
    background: var(--gray-900);
    color: white;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1001;
}

.nav-brand a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 3px;
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;
}

.nav-collapse {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-width: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-links a {
    color: var(--gray-300);
    text-decoration: none;
}

.nav-links a:hover {
    color: white;
}

.nav-toggle {
    display: none;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--gray-600);
    border-radius: 4px;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
}
.nav-toggle:hover {
    border-color: var(--gray-400);
}
.nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--gray-300);
    border-radius: 1px;
}

/* Collapsed navbar: viewport too narrow OR chat sidebar steals horizontal space */
@media (max-width: 1100px) {
    .nav-toggle { display: inline-flex; }
    .nav-collapse {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        background: var(--gray-900);
        padding: 0.75rem 1.25rem 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
    .navbar.nav-open .nav-collapse { display: flex; }
    .nav-links,
    .user-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .nav-links a,
    .user-menu .nav-admin-link,
    .user-menu .nav-auth-link {
        padding: 0.5rem 0.25rem;
    }
    .user-menu .nav-admin-link {
        text-align: left;
    }
    .user-menu .user-info {
        padding: 0.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 0.25rem;
        padding-top: 0.6rem;
    }
}

@media (max-width: 1500px) {
    body.chat-sidebar-open .nav-toggle { display: inline-flex; }
    body.chat-sidebar-open .nav-collapse {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: var(--chat-sidebar-width, 480px);
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        background: var(--gray-900);
        padding: 0.75rem 1.25rem 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
    body.chat-sidebar-open .navbar.nav-open .nav-collapse { display: flex; }
    body.chat-sidebar-open .nav-links,
    body.chat-sidebar-open .user-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    body.chat-sidebar-open .nav-links a,
    body.chat-sidebar-open .user-menu .nav-admin-link,
    body.chat-sidebar-open .user-menu .nav-auth-link {
        padding: 0.5rem 0.25rem;
    }
    body.chat-sidebar-open .user-menu .user-info {
        padding: 0.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 0.25rem;
        padding-top: 0.6rem;
    }
}

@media (max-width: 600px) {
    .navbar {
        padding: 0.75rem 1rem;
    }
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Page header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h1 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.back-link {
    color: var(--gray-500);
    text-decoration: none;
    font-size: 0.875rem;
}

.back-link:hover {
    color: var(--primary);
}

.page-header-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.header-action-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.header-action-link:hover { text-decoration: underline; }

/* Stats */
.stats {
    display: flex;
    gap: 1.5rem;
}

.stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
}

/* Device grid */
.device-grid {
    display: grid;
    /* min(100%, 300px) prevents overflow on phones <320px while still
       hitting 300px target on wider viewports. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1.5rem;
}

@media (max-width: 600px) {
    .device-grid { gap: 1rem; }
    .device-card { padding: 1rem; }
    .page-header { margin-bottom: 1rem; }
    .page-header h1 { font-size: 1.25rem; }
    .stats { gap: 1rem; }
    .stat-value { font-size: 1.25rem; }
    .gateway-header {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }
    .gateway-header h2 { font-size: 0.875rem; }
    .gateway-serial, .gateway-fw { font-size: 0.7rem; }
}

/* Device card */
.device-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.device-image {
    margin: -0.5rem 0 0.75rem;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
    border-radius: 6px;
    overflow: hidden;
}

.device-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.device-card.is-offline .device-image img {
    filter: grayscale(0.4);
}

.device-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.device-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-400);
}

.device-status.active,
.device-status.online {
    background: var(--success);
}

.device-status.stale {
    background: var(--warning);
}

.device-status.offline {
    background: var(--gray-400);
}

.device-name {
    font-size: 1.125rem;
    font-weight: 600;
}

.device-serial {
    font-size: 0.875rem;
    color: var(--gray-500);
    font-family: monospace;
    margin-bottom: 1rem;
}

.device-info {
    border-top: 1px solid var(--gray-200);
    padding-top: 1rem;
    margin-bottom: 1rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.info-label {
    color: var(--gray-500);
}

.info-value {
    color: var(--gray-700);
}

.device-card.is-active {
    border-left: 3px solid var(--success);
}

.device-card.is-stale {
    border-left: 3px solid var(--warning);
}

.device-card.is-offline {
    opacity: 0.65;
}

.device-card.is-offline .device-name {
    color: var(--gray-500);
}

.device-link {
    display: block;
    text-align: center;
    color: var(--primary);
    text-decoration: none;
    padding: 0.5rem;
    border: 1px solid var(--primary);
    border-radius: 4px;
}

.device-link:hover {
    background: var(--primary);
    color: white;
}

.device-card.is-offline .device-link {
    color: var(--gray-400);
    border-color: var(--gray-300);
}

.device-card.is-offline .device-link:hover {
    background: var(--gray-400);
    color: white;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 8px;
}

.empty-state h2 {
    color: var(--gray-700);
    margin-bottom: 1rem;
}

.empty-state p {
    color: var(--gray-500);
    margin-bottom: 1rem;
}

.empty-state pre {
    background: var(--gray-100);
    padding: 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
    overflow-x: auto;
}

/* Gateway sections */
.gateway-section {
    margin-bottom: 2rem;
}

.gateway-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gateway-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.gateway-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-400);
    background: var(--gray-100);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

.gateway-serial {
    font-size: 0.8rem;
    color: var(--gray-400);
    font-family: monospace;
}

.gateway-fw {
    font-size: 0.7rem;
    color: var(--gray-400);
    padding: 0.1rem 0.4rem;
    background: var(--gray-100);
    border-radius: 3px;
}

.device-model {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: -0.25rem;
}

.gateway-info-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    font-weight: 600;
    font-style: italic;
    font-family: Georgia, serif;
    color: var(--gray-400);
    border: 1.5px solid var(--gray-300);
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 0.25rem;
    user-select: none;
}

.gateway-info-toggle:hover {
    color: var(--gray-600);
    border-color: var(--gray-400);
}

.gateway-info {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin: 0.25rem 0 0.75rem;
}

/* Device detail */
.device-detail {
    display: grid;
    gap: 1.5rem;
}

.detail-section {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.detail-section h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-item .info-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-bottom: 0.25rem;
}

.info-item .info-value {
    font-size: 0.875rem;
    color: var(--gray-800);
}

/* Measurement display */
.measurement-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.measurement-item {
    text-align: center;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
}

.measurement-item.primary {
    background: var(--primary);
    color: white;
}

.measurement-item.primary .measurement-label {
    color: rgba(255,255,255,0.8);
}

.measurement-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
}

.measurement-unit {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.measurement-item.primary .measurement-unit {
    color: rgba(255,255,255,0.7);
}

.measurement-label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.measurement-time {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--gray-500);
    text-align: right;
}

/* Data table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th,
.data-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.data-table th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-600);
}

.data-table tr:hover {
    background: var(--gray-50);
}

/* Log container */
.log-container {
    max-height: 300px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.75rem;
}

.log-entry {
    padding: 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.log-time {
    color: var(--gray-400);
    white-space: nowrap;
}

.log-level {
    font-weight: 600;
    text-transform: uppercase;
    width: 50px;
}

.log-info .log-level { color: var(--primary); }
.log-warning .log-level { color: var(--warning); }
.log-error .log-level { color: var(--danger); }

.log-message {
    flex: 1;
    min-width: 0;
    color: var(--gray-700);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Buttons */
.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    background: var(--gray-200);
    color: var(--gray-700);
    margin-right: 0.5rem;
    /* So <a class="btn"> looks like a button, not an underlined link.
     * inline-block + line-height keep height consistent with <button>. */
    display: inline-block;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    vertical-align: middle;
}

.btn:hover { text-decoration: none; }

.btn:hover {
    background: var(--gray-300);
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-warning {
    background: var(--warning);
    color: white;
}

.btn-warning:hover {
    background: #d97706;
}

.command-buttons {
    margin-bottom: 1rem;
}

.command-result {
    padding: 0.75rem;
    background: var(--gray-50);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.875rem;
    min-height: 2rem;
}

.status-stream {
    margin-top: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.status-stream-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
}

.status-entry {
    display: flex;
    gap: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    font-family: monospace;
    font-size: 0.75rem;
}

.status-entry:last-child {
    border-bottom: none;
}

.status-time {
    color: var(--gray-400);
    white-space: nowrap;
}

.status-message {
    color: var(--gray-700);
}

.status-entry.status-error .status-message {
    color: var(--danger);
    font-weight: 500;
}

.status-entry.status-complete .status-message {
    color: var(--success);
    font-weight: 500;
}

/* CPC Diagnostics */
.collapsible-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.collapsible-header:hover {
    color: var(--primary-dark);
}

.collapse-icon {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--gray-400);
}

.diagnostics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    padding-top: 0.5rem;
}

.diagnostics-group h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 0.75rem;
    letter-spacing: 0.5px;
}

.diag-item {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
}

.diag-label {
    color: var(--gray-500);
}

.diag-value {
    color: var(--gray-800);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.diag-unit {
    color: var(--gray-500);
    margin-left: 0.25rem;
    font-weight: 400;
}

/* Filter chips for the diagnostics tab. */
.diag-chips {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.diag-chip {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--gray-200);
    background: white;
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.diag-chip:hover {
    background: var(--gray-50);
}

.diag-chip.active {
    background: var(--gray-800);
    border-color: var(--gray-800);
    color: white;
}

#diagnostics-container[data-filter="live"] .diag-item:not([data-kind="live"]) { display: none; }
#diagnostics-container[data-filter="config"] .diag-item:not([data-kind="config"]) { display: none; }
#diagnostics-container[data-filter="identity"] .diag-item:not([data-kind="identity"]) { display: none; }

/* The Recent setting changes panel is config-bucket content, so hide it
   when the active chip filter is anything other than All or Config. */
.tab-panel[data-active-chip="live"] .diag-changelog,
.tab-panel[data-active-chip="identity"] .diag-changelog {
    display: none;
}

.diag-changelog {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 6px;
    font-size: 0.875rem;
}

.diag-changelog-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.diag-changelog-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.diag-changelog-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.diag-changelog-list li:last-child {
    border-bottom: none;
}

.diag-changelog-cmd {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.8125rem;
    color: var(--gray-800);
}

.diag-changelog-meta {
    color: var(--gray-500);
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Status error banner */
.status-error {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 500;
}

.no-data {
    color: var(--gray-500);
    font-style: italic;
}

/* Widget Embed Section */
.widget-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.widget-section-header h2 { margin: 0; }

.widget-kebab-wrap {
    position: relative;
}

.widget-kebab {
    width: 32px;
    height: 32px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-kebab:hover { border-color: var(--primary); color: var(--gray-800); }

.widget-kebab-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 140px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 0.25rem;
    display: none;
    z-index: 50;
}

.widget-kebab-menu.open { display: block; }

.widget-kebab-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--gray-700);
}

.widget-kebab-item:hover { background: #f0fce8; color: var(--gray-800); }

.widget-preview-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.widget-preview-modal {
    background: #fff;
    border-radius: 8px;
    padding: 1rem;
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.widget-preview-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.widget-preview-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--gray-500);
    border-radius: 4px;
}

.widget-preview-modal-close:hover { background: var(--gray-100); color: var(--gray-800); }

.widget-customizer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .widget-customizer { grid-template-columns: 1fr; }
}

.widget-customizer-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.widget-control-label {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-bottom: 0.375rem;
}

.widget-type-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.wtype-btn {
    padding: 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    text-align: center;
    font-size: 0.75rem;
    color: var(--gray-600);
    line-height: 1.3;
}

.wtype-btn:hover { border-color: var(--primary); }

.wtype-btn.selected {
    border-color: var(--primary);
    background: #f0fce8;
    color: var(--gray-800);
    font-weight: 500;
}

.widget-control-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.widget-theme-toggle {
    display: flex;
    gap: 0.5rem;
}

.wtheme-btn {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 0.8rem;
}

.wtheme-btn.selected {
    border-color: var(--primary);
    background: #f0fce8;
}

.wtheme-btn.dark-opt {
    background: #1f2937;
    color: #f9fafb;
    border-color: #374151;
}

.wtheme-btn.dark-opt.selected {
    border-color: var(--primary);
}

.widget-select {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.8rem;
}

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

.widget-size-inputs {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.widget-size-inputs input {
    width: 65px;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.8rem;
    text-align: center;
}

.widget-size-inputs input:focus { outline: none; border-color: var(--primary); }

.widget-size-inputs span {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.widget-preview-wrap {
    background: #f0f0f0;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.widget-preview-wrap.dark-bg { background: #374151; }

.widget-preview-wrap iframe {
    border: none;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Hosting options */
.widget-hosting-title {
    font-size: 0.875rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.widget-hosting-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.widget-hosting-card {
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
}

.widget-hosting-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    user-select: none;
}

.widget-hosting-card-header:hover {
    background: var(--gray-50);
}

.widget-card-arrow {
    color: var(--gray-400);
    font-size: 1.125rem;
    font-weight: 400;
}

.widget-hosting-card-body {
    display: none;
    padding: 0 1rem 1rem;
}

.widget-hosting-card.open .widget-hosting-card-body {
    display: block;
}

.widget-hosting-card-body p {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
}

.widget-hosting-card-body code {
    background: var(--gray-100);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.75rem;
}

.widget-embed-wrap {
    position: relative;
}

.widget-embed-code {
    width: 100%;
    height: 56px;
    padding: 0.75rem;
    padding-right: 70px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.75rem;
    background: var(--gray-50);
    resize: none;
    color: var(--gray-700);
}

.widget-embed-code:focus { outline: none; border-color: var(--primary); }

.widget-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0.375rem 0.75rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
}

.widget-copy-btn:hover { background: var(--primary-dark); }
.widget-copy-btn.copied { background: var(--success); }

.widget-delete-row {
    text-align: right;
    padding-top: 0.5rem;
}

.widget-delete-link {
    font-size: 0.8rem;
    color: var(--danger);
    text-decoration: none;
}

.widget-delete-link:hover {
    text-decoration: underline;
}

/* ===== Device Detail Redesign ===== */

/* Hero Card */
.hero-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.hero-card-with-image {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
}

.hero-image {
    flex: 0 0 180px;
    background: var(--gray-50);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-image img {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.hero-content {
    flex: 1;
    min-width: 0;
}

@media (max-width: 600px) {
    .hero-card-with-image {
        flex-direction: column;
    }
    .hero-image {
        flex: 0 0 auto;
        height: 140px;
    }
}

.hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.hero-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.hero-serial {
    font-size: 0.8rem;
    color: var(--gray-400);
    font-family: monospace;
}

.hero-reading {
    text-align: center;
    padding: 1rem 0;
}

.hero-value {
    display: block;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.hero-unit {
    display: block;
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.hero-label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: 0.125rem;
}

.hero-updated {
    text-align: center;
    font-size: 0.75rem;
    color: var(--gray-400);
}

.hero-live-value {
    text-align: center;
    padding: 0.25rem 0;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.hero-live-value .hero-live-unit {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--gray-500);
    margin-left: 0.25rem;
}

.hero-error {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border-left: 4px solid var(--danger);
    border-radius: 0 4px 4px 0;
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Concentration Chart */
.chart-section {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.chart-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700);
}

.chart-range-buttons {
    display: flex;
    gap: 0.25rem;
}

.chart-range-btn {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--gray-600);
}

.chart-range-btn:hover {
    border-color: var(--primary);
}

.chart-range-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 250px;
}

.chart-canvas-wrap canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Tabs Section */
.tabs-section {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.tab-bar {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tab-btn {
    padding: 0.75rem 1.25rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--gray-500);
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover {
    color: var(--gray-700);
}

.tab-btn.active {
    color: var(--primary-dark);
    border-bottom-color: var(--primary);
    font-weight: 500;
}

.tab-panel {
    display: none;
    padding: 1.5rem;
}

.tab-panel.active {
    display: block;
}

/* Override detail-section in tabs to remove redundant card styling */
.tab-panel .detail-section {
    background: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

.tab-panel .detail-section h2 {
    margin-top: 1rem;
}

.tab-panel .detail-section:first-child h2 {
    margin-top: 0;
}

/* Device Type Badge */
.device-type-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.device-type-badge {
    background: #e5e7eb;
    color: #374151;
}

.model-picker {
    cursor: pointer;
    user-select: none;
}

.model-picker:hover,
.model-picker:focus {
    background: #d1d5db;
    outline: none;
}

.model-picker-caret {
    margin-left: 0.25rem;
    font-size: 0.6rem;
    opacity: 0.6;
}

.hero-status {
    position: relative;
}

.model-picker-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    min-width: 220px;
    padding: 0.25rem 0;
    max-height: 360px;
    overflow-y: auto;
}

.model-picker-menu[hidden] {
    display: none;
}

.model-picker-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.875rem;
    font-size: 0.85rem;
    color: var(--gray-700, #374151);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.model-picker-option:hover {
    background: #f3f4f6;
}

.model-picker-option.current {
    background: #eff6ff;
    color: #1e40af;
}

.model-picker-option .family-tag {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    background: #e5e7eb;
    color: #6b7280;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.model-picker-empty {
    padding: 0.75rem 0.875rem;
    font-size: 0.8rem;
    color: var(--gray-500, #6b7280);
}

/* Error Troubleshooting Card (inline above tabs) */
.error-troubleshoot-card {
    background: white;
    border: 1px solid #fecaca;
    border-left: 4px solid var(--danger);
    border-radius: 0 8px 8px 0;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.error-troubleshoot-card h3 {
    font-size: 0.875rem;
    color: var(--danger);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-troubleshoot-card .error-code-display {
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    font-size: 0.8125rem;
    background: #fef2f2;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-weight: 600;
}

.error-troubleshoot-card .troubleshoot-fallback {
    font-size: 0.8125rem;
    color: var(--gray-600);
}

/* Threshold Status Card */
.threshold-status-card {
    background: white;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
}

.threshold-status-card.threshold-ok {
    border-left: 4px solid var(--success);
}

.threshold-status-card.threshold-breached {
    border-left: 4px solid var(--danger);
}

.threshold-field-name {
    font-weight: 500;
    color: var(--gray-700);
}

.threshold-current {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.threshold-ok .threshold-current {
    color: var(--success);
}

.threshold-breached .threshold-current {
    color: var(--danger);
}

.threshold-config {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

/* Inactive Warning Banner */
.inactive-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid var(--warning);
    border-radius: 0 8px 8px 0;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: #92400e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Recent Device Logs (overview section) */
.recent-logs {
    background: white;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.recent-logs h3 {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.recent-logs .log-entry {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.8125rem;
    padding: 0.375rem 0;
}

.recent-logs .log-level-badge {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    border-radius: 3px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.log-level-badge.level-error,
.log-level-badge.level-critical {
    background: #fef2f2;
    color: var(--danger);
}

.log-level-badge.level-warning {
    background: #fffbeb;
    color: #b45309;
}

@media (max-width: 600px) {
    .hero-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    .chart-canvas-wrap {
        height: 200px;
    }
    .tab-btn {
        padding: 0.625rem 0.875rem;
        font-size: 0.8rem;
    }
    .threshold-status-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Multilogger icon */
.multilogger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    font-size: 10px;
    line-height: 1;
    color: var(--primary);
}

/* Detected serial ports table */
.detected-ports {
    margin: 0.5rem 0 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--gray-50);
    border-radius: 6px;
    border: 1px solid var(--gray-200);
}

.detected-ports-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.detected-ports-table th {
    text-align: left;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    padding: 0.25rem 0.5rem;
    font-weight: 500;
}

.detected-ports-table td {
    padding: 0.25rem 0.5rem;
    border-top: 1px solid var(--gray-200);
}

.detected-ports-table code {
    font-size: 0.75rem;
    background: white;
    padding: 0.0625rem 0.25rem;
    border-radius: 2px;
}

.port-badge {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 3px;
    font-weight: 500;
}

.port-badge-ok {
    background: #dcfce7;
    color: #166534;
}

.port-badge-unknown {
    background: #fef3c7;
    color: #92400e;
}

.port-add-pattern {
    font-size: 0.7rem;
    color: var(--primary-dark);
    text-decoration: none;
    margin-left: 0.5rem;
}

.port-add-pattern:hover {
    text-decoration: underline;
}

.port-unmatched td {
    background: #fffbeb;
}

/* Error indicator on dashboard cards */
.device-card.has-error {
    border-left: 3px solid var(--danger);
}

.device-error-banner {
    font-size: 0.75rem;
    color: var(--danger);
    font-weight: 500;
    padding: 0.25rem 0;
}

/* Organization section header (admin view) */
.org-section-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    margin: 2rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--gray-200);
}

.org-section:first-child .org-section-header {
    margin-top: 0;
}

/* Offline instruments section */
.offline-section {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--gray-200);
}

.offline-section-header {
    font-size: 1.1rem;
    color: var(--gray-500);
    margin-bottom: 0.25rem;
}

.offline-section-desc {
    font-size: 0.85rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.offline-section .device-card {
    opacity: 0.6;
}

/* ===== Status Timeline ===== */
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.timeline-header h2 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.timeline-range-buttons {
    display: flex;
    gap: 0.25rem;
}

.timeline-range-btn {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--gray-600);
}

.timeline-range-btn:hover {
    border-color: var(--primary);
}

.timeline-range-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.timeline-container {
    margin-top: 0.5rem;
}

.timeline-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.375rem;
}

.timeline-label {
    width: 140px;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--gray-600);
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 0.5rem;
}

.timeline-bar {
    flex: 1;
    position: relative;
    height: 20px;
    background: var(--gray-100);
    border-radius: 3px;
    overflow: hidden;
}

.timeline-segment {
    position: absolute;
    top: 0;
    height: 100%;
    min-width: 1px;
}

.timeline-segment.online {
    background: var(--success);
}

.timeline-segment.offline {
    background: var(--gray-300);
}

.timeline-segment.error-active {
    background: var(--danger);
    opacity: 0.85;
}

.timeline-axis {
    display: flex;
    margin-left: 140px;
    position: relative;
    height: 1.25rem;
    font-size: 0.625rem;
    color: var(--gray-400);
    margin-top: 0.25rem;
}

.timeline-axis-label {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.timeline-buffer-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid var(--warning);
    border-radius: 0 4px 4px 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: #92400e;
    margin-bottom: 0.75rem;
}

.timeline-tooltip {
    position: fixed;
    z-index: 9999;
    background: rgba(17, 24, 39, 0.97);
    color: #f9fafb;
    padding: 0.5rem 0.7rem;
    border-radius: 4px;
    font-size: 0.75rem;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    max-width: 360px;
    line-height: 1.45;
    opacity: 0;
    transition: opacity 0.08s linear;
}
.timeline-tooltip .tt-title {
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.timeline-tooltip .tt-online   { color: #34d399; }
.timeline-tooltip .tt-offline  { color: #9ca3af; }
.timeline-tooltip .tt-error    { color: #fca5a5; }
.timeline-tooltip .tt-hex {
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    color: #fbbf24;
    font-size: 0.7rem;
    margin-bottom: 0.15rem;
}
.timeline-tooltip .tt-meta {
    color: #cbd5e1;
    font-size: 0.7rem;
}

@media (max-width: 600px) {
    .timeline-label {
        width: 80px;
        font-size: 0.625rem;
    }
    .timeline-axis {
        margin-left: 80px;
    }
    .timeline-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ===== Mini Status Timeline (Dashboard Cards) ===== */
.mini-timeline {
    margin-bottom: 1rem;
    padding-top: 0.5rem;
}

.mini-tl-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.mini-tl-label {
    flex-shrink: 0;
    font-size: 0.625rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    width: 52px;
}

.mini-timeline-bar {
    flex: 1;
    height: 6px;
    background: var(--gray-100);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.mini-timeline-bar .timeline-segment {
    height: 100%;
}

.mini-timeline-error-wrap {
    margin-top: 0.25rem;
}

.mini-timeline-errors {
    cursor: pointer;
}

.mini-timeline-errors:hover {
    opacity: 0.85;
}

.mini-timeline-error-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mini-timeline-error-detail.expanded {
    max-height: 500px;
}

.mini-tl-error-row {
    display: flex;
    align-items: center;
    margin-top: 0.25rem;
}

.mini-tl-error-label {
    width: 100px;
    flex-shrink: 0;
    font-size: 0.625rem;
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 0.375rem;
}

.mini-tl-error-bar {
    flex: 1;
    position: relative;
    height: 5px;
    background: var(--gray-100);
    border-radius: 2px;
    overflow: hidden;
}

.mini-tl-error-bar .timeline-segment {
    height: 100%;
}

/* ===================================================================
   AIP token overrides — applied last so they win against the legacy
   gray/white styles above. Keeps the existing class names so dashboard.js
   keeps working; just retones for AIP shell + dark mode parity.
   =================================================================== */

.aip-stat-row {
    display: flex;
    gap: 18px;
    align-items: center;
}

.aip-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.aip-stat-value {
    font-size: 22px;
    font-weight: 600;
    color: var(--aip-text);
    font-variant-numeric: tabular-nums;
}

.aip-stat-label {
    font-size: 10px;
    color: var(--aip-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    margin-top: 2px;
}

/* ===== Org / gateway sections ===== */
.org-section {
    margin-bottom: 20px;
    padding: 0;
    background: transparent;
    border: 0;
}

.org-section-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--aip-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 12px 0 8px;
    padding: 0;
    border: 0;
}

.gateway-section {
    background: var(--aip-bg-panel);
    border: 1px solid var(--aip-border);
    border-radius: var(--aip-radius);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.gateway-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 0 10px;
    margin: 0 0 10px;
    border-bottom: 1px solid var(--aip-border);
}

.gateway-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--aip-text);
}

.gateway-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--aip-text-muted);
    font-weight: 600;
    padding: 1px 6px;
    background: var(--aip-bg-elevated);
    border-radius: 2px;
}

.gateway-serial,
.gateway-fw {
    font-size: 11px;
    color: var(--aip-text-muted);
    font-family: var(--aip-font-mono);
}

.gateway-info-toggle {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--aip-text-muted);
    cursor: pointer;
    padding: 1px 6px;
    border: 1px solid var(--aip-border);
    border-radius: var(--aip-radius);
    background: transparent;
}

.gateway-info-toggle:hover {
    color: var(--aip-text);
    background: rgba(127,127,127,0.10);
}

.gateway-info {
    color: var(--aip-text-muted);
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 10px;
    padding: 8px 10px;
    background: var(--aip-bg-elevated);
    border-radius: var(--aip-radius);
}

.multilogger-icon {
    color: var(--bp-violet5);
    font-size: 14px;
}

.offline-section {
    background: transparent;
    border: 1px dashed var(--aip-border);
    border-radius: var(--aip-radius);
    padding: 12px 14px;
    margin-top: 16px;
}

.offline-section-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--aip-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 4px;
}

.offline-section-desc {
    color: var(--aip-text-muted);
    font-size: 12px;
    margin: 0 0 10px;
}

.no-data {
    color: var(--aip-text-muted);
    font-size: 12px;
    font-style: italic;
}

/* ===== Device card retheme ===== */
.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.device-card {
    background: var(--aip-bg-panel);
    border: 1px solid var(--aip-border);
    border-radius: var(--aip-radius);
    padding: 12px 14px;
    box-shadow: none;
    color: var(--aip-text);
    transition: border-color 0.1s, background 0.1s;
}

.device-card:hover { border-color: var(--aip-accent-border); }

.device-card.is-active { border-left: 2px solid var(--aip-accent); }
.device-card.is-stale {
    border-left: 2px solid var(--bp-orange5);
    background: rgba(200,118,25,0.06);
}
.device-card.is-offline {
    border-left: 2px solid var(--aip-border-strong);
    opacity: 0.85;
}
.device-card.is-offline .device-name { color: var(--aip-text-muted); }
.device-card.has-error { border-left-color: var(--bp-red5); }

.device-image {
    background: var(--aip-bg-elevated);
    border-radius: var(--aip-radius);
    padding: 4px;
    margin-bottom: 8px;
}
.device-image img {
    border-radius: 2px;
    background: transparent;
}

.device-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.device-name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--aip-text);
}

.device-serial {
    font-size: 11px;
    color: var(--aip-text-muted);
    font-family: var(--aip-font-mono);
    margin-bottom: 8px;
}

.device-model {
    font-size: 11px;
    color: var(--aip-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 8px;
}

.device-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.device-status.active,
.device-status.online  { background: var(--bp-green5); }
.device-status.stale   { background: var(--bp-orange5); }
.device-status.offline { background: var(--aip-text-disabled); }

.device-error-banner {
    background: rgba(205,66,70,0.12);
    color: var(--bp-red5);
    border: 1px solid rgba(205,66,70,0.40);
    padding: 4px 8px;
    border-radius: var(--aip-radius);
    font-size: 11px;
    font-family: var(--aip-font-mono);
    margin: 4px 0 8px;
}

.device-info {
    margin-top: 6px;
    font-size: 12px;
}

.device-measurements-toggle {
    margin-top: 4px;
    border: 0;
    background: transparent;
    color: var(--aip-text-muted);
    font: inherit;
    font-size: 11px;
    line-height: 20px;
    cursor: pointer;
}

.device-measurements-toggle:hover {
    color: var(--aip-text);
}

.device-secondary-measurements {
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px solid var(--aip-divider);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    border-bottom: 1px solid var(--aip-divider);
}
.info-row:last-child { border-bottom: none; }

.info-label {
    color: var(--aip-text-muted);
    font-size: 11px;
}

.info-value {
    color: var(--aip-text);
    font-family: var(--aip-font-mono);
    font-size: 12px;
}

.device-link {
    display: block;
    margin-top: 10px;
    padding: 5px 0;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--aip-text-muted);
    background: var(--aip-bg-elevated);
    border: 1px solid var(--aip-border);
    border-radius: var(--aip-radius);
    text-decoration: none;
}

.device-link:hover {
    background: rgba(127,127,127,0.16);
    color: var(--aip-text);
    border-color: var(--aip-border-strong);
}

.device-card.is-offline .device-link { color: var(--aip-text-disabled); }
.device-card.is-offline .device-link:hover { color: var(--aip-text-muted); }

/* ===== Physical instrument systems ===== */
.instrument-systems {
    margin-bottom: 24px;
}

.instrument-systems-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.instrument-systems-heading h2 {
    margin: 0;
    color: var(--aip-text);
    font-size: 16px;
    font-weight: 600;
}

.instrument-systems-heading p {
    margin: 3px 0 0;
    color: var(--aip-text-muted);
    font-size: 12px;
}

.instrument-system {
    margin-bottom: 10px;
    border: 1px solid var(--aip-border);
    border-radius: var(--aip-radius);
    background: var(--aip-bg-panel);
}

.instrument-system-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px 0;
}

.instrument-system-name,
.instrument-system-org {
    color: var(--aip-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.45px;
}

.instrument-system-name {
    color: var(--aip-text);
}

.instrument-system-stage {
    position: relative;
    padding: 16px;
    overflow: hidden;
}

.instrument-system-nodes {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 76px;
}

.instrument-system-node {
    flex: 1 1 220px;
    max-width: 280px;
    min-width: 200px;
}

.instrument-system-node .device-card {
    height: 100%;
}

.instrument-system-links {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.instrument-link-base {
    fill: none;
    stroke: var(--aip-border-strong);
    stroke-width: 8;
    stroke-linecap: round;
    opacity: 0.48;
}

.instrument-link-channel {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.instrument-link-channel.is-particles {
    stroke: var(--bp-green3);
    stroke-width: 3;
    stroke-dasharray: 2 12;
    animation: instrument-particle-flow 1.8s linear infinite;
}

.instrument-link-channel.is-voltage {
    stroke: var(--bp-orange5);
    stroke-width: 2;
    stroke-dasharray: 8 4 2 4;
}

.instrument-link-channel.is-measurement {
    stroke: var(--aip-accent);
    stroke-width: 2;
    stroke-dasharray: 7 6;
    animation: instrument-measurement-flow 1.35s linear infinite;
}

.instrument-link-label {
    fill: var(--aip-text-muted);
    font-family: var(--aip-font-sans);
    font-size: 10px;
}

.instrument-link-label-background {
    fill: var(--aip-bg-panel);
    opacity: 0.96;
}

.instrument-link-label-group {
    pointer-events: none;
}

@keyframes instrument-particle-flow {
    to { stroke-dashoffset: -28; }
}

@keyframes instrument-measurement-flow {
    to { stroke-dashoffset: -26; }
}

.device-card-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
}

.device-card-actions .device-link,
.device-connect-btn {
    min-height: 34px;
    border: 1px solid var(--aip-border);
    border-radius: var(--aip-radius);
    background: var(--aip-bg-elevated);
    color: var(--aip-text);
    font: inherit;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    padding: 6px 10px;
    cursor: pointer;
}

.device-card-actions .device-link {
    margin-top: 0;
}

.device-connect-btn {
    padding-inline: 7px;
}

.device-card-actions .device-link:hover,
.device-connect-btn:hover {
    border-color: var(--aip-accent-border);
    background: var(--aip-accent-soft);
    color: var(--aip-text);
}

.connection-drawer-backdrop {
    position: fixed;
    z-index: 1190;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
}

.connection-drawer {
    position: fixed;
    z-index: 1200;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    padding: 20px;
    overflow-y: auto;
    border-left: 1px solid var(--aip-border);
    background: var(--aip-bg-panel);
    color: var(--aip-text);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 160ms ease;
}

.connection-drawer.is-open {
    transform: translateX(0);
}

.connection-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--aip-border);
}

.connection-drawer-kicker {
    color: var(--aip-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.45px;
}

.connection-drawer-header h2 {
    margin: 3px 0;
    font-size: 18px;
}

.connection-drawer-header p {
    margin: 0;
    color: var(--aip-text-muted);
    font-size: 12px;
}

.connection-drawer-close,
.connection-submit,
.connection-end-btn {
    border: 1px solid var(--aip-border);
    border-radius: var(--aip-radius);
    background: var(--aip-bg-elevated);
    color: var(--aip-text);
    font: inherit;
    font-size: 12px;
    padding: 6px 10px;
    cursor: pointer;
}

.connection-submit {
    background: var(--aip-accent);
    color: var(--bp-dark-gray1);
    border-color: var(--aip-accent);
}

.connection-submit:disabled {
    border-color: var(--aip-border);
    background: var(--aip-bg-elevated);
    color: var(--aip-text-disabled);
    cursor: not-allowed;
}

.connection-drawer-form {
    display: grid;
    gap: 7px;
    padding: 18px 0;
}

.connection-fields {
    display: grid;
    gap: 7px;
}

.connection-empty-state {
    padding: 13px 14px;
    border: 1px solid var(--aip-border);
    border-radius: var(--aip-radius);
    background: var(--aip-bg-elevated);
}

.connection-empty-state strong {
    display: block;
    color: var(--aip-text);
    font-size: 13px;
}

.connection-empty-state p {
    margin: 4px 0 0;
    color: var(--aip-text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.connection-drawer-form label,
.connection-existing h3 {
    margin: 7px 0 0;
    color: var(--aip-text);
    font-size: 12px;
    font-weight: 600;
}

.connection-drawer-form select {
    width: 100%;
    padding: 8px 9px;
    border: 1px solid var(--aip-border-strong);
    border-radius: var(--aip-radius);
    background: var(--aip-bg-elevated);
    color: var(--aip-text);
    font: inherit;
    font-size: 13px;
}

.connection-field-help,
.connection-form-error {
    min-height: 16px;
    margin: 0;
    color: var(--aip-text-muted);
    font-size: 11px;
}

.connection-form-error {
    color: var(--bp-red5);
}

.connection-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 34px;
    padding: 8px;
    margin-top: 6px;
    border: 1px solid var(--aip-border);
    border-radius: var(--aip-radius);
    background: var(--aip-bg-elevated);
}

.connection-channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--aip-text);
    font-size: 11px;
}

.connection-channel-chip::before {
    content: '';
    width: 20px;
    border-top: 2px solid var(--aip-accent);
}

.connection-channel-chip.is-particles::before { border-color: var(--bp-green3); border-top-style: dotted; }
.connection-channel-chip.is-voltage::before { border-color: var(--bp-orange5); border-top-style: dashed; }
.connection-channel-chip.is-measurement::before { border-color: var(--aip-accent); border-top-style: dashed; }

.connection-existing {
    padding-top: 14px;
    border-top: 1px solid var(--aip-border);
}

.connection-existing-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--aip-border);
}

.connection-existing-title {
    font-size: 12px;
    font-weight: 600;
}

.connection-existing-detail {
    color: var(--aip-text-muted);
    font-size: 11px;
}

@media (max-width: 760px) {
    .instrument-system-nodes {
        flex-direction: column;
        gap: 64px;
    }

    .instrument-system-node {
        width: 100%;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .instrument-link-channel.is-particles,
    .instrument-link-channel.is-measurement { animation: none; }
    .connection-drawer { transition: none; }
}

/* Mini timeline (7d online sparkline) */
.mini-timeline {
    margin-top: 8px;
    font-size: 11px;
}
.mini-tl-label {
    color: var(--aip-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    font-weight: 600;
}

/* ===== Detected ports table ===== */
.detected-ports {
    background: var(--aip-bg-elevated);
    border: 1px solid var(--aip-border);
    border-radius: var(--aip-radius);
    padding: 8px 10px;
    margin: 0 0 10px;
}

.detected-ports-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.detected-ports-table th {
    background: transparent;
    color: var(--aip-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    padding: 4px 6px;
    text-align: left;
    border-bottom: 1px solid var(--aip-border);
}
.detected-ports-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--aip-border);
    color: var(--aip-text);
}
.detected-ports-table tr:last-child td { border-bottom: none; }
.detected-ports-table code {
    font-family: var(--aip-font-mono);
    color: var(--aip-text-muted);
    background: var(--aip-bg-panel);
    padding: 1px 5px;
    border-radius: 2px;
    font-size: 11px;
}

.port-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.port-badge-ok      { background: var(--aip-accent-bg); color: var(--aip-accent); }
.port-badge-unknown { background: var(--aip-bg-elevated); color: var(--aip-text-muted); }

/* ===== Acquisition layer and ProductSystem identity ===== */
.gateway-overview,
.other-instruments {
    margin: 0 0 28px;
}

.gateway-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.gateway-overview-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--aip-border);
    border-radius: var(--aip-radius);
    background: var(--aip-bg-panel);
}

.gateway-overview-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 9px;
}

.gateway-overview-head h3 {
    margin: 1px 0 2px;
    color: var(--aip-text);
    font-size: 15px;
}

.gateway-overview-kind,
.gateway-overview-serial,
.gateway-scan-time,
.gateway-no-instruments {
    color: var(--aip-text-muted);
    font-size: 11px;
}

.gateway-overview-kind {
    text-transform: uppercase;
    letter-spacing: 0.45px;
    font-weight: 600;
}

.gateway-state {
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--aip-text-muted);
    background: var(--aip-bg-elevated);
    font-size: 10px;
    font-weight: 600;
}

.gateway-state.is-online {
    color: var(--bp-green3);
    background: color-mix(in srgb, var(--bp-green3) 12%, transparent);
}

.gateway-port-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin: 13px 0 3px;
    padding-top: 10px;
    border-top: 1px solid var(--aip-border);
    color: var(--aip-text-muted);
    font-size: 12px;
}

.gateway-port-summary .has-warning { color: var(--bp-orange5); }

.gateway-ports-toggle {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--aip-accent);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.device-acquisition,
.product-system-match {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--aip-border);
    border-radius: 999px;
    padding: 2px 7px;
    color: var(--aip-text-muted);
    background: var(--aip-bg-elevated);
    font-size: 10px;
    line-height: 1.35;
    text-decoration: none;
}

.gateway-overview-card .detected-ports {
    margin: 12px 0 0;
}

.device-acquisition {
    width: fit-content;
    margin-top: 5px;
}

.device-acquisition.is-current {
    color: var(--aip-accent);
    border-color: color-mix(in srgb, var(--aip-accent) 35%, var(--aip-border));
}

.device-acquisition.is-last,
.device-acquisition.is-none { opacity: 0.78; }

.product-system-match {
    color: var(--bp-green3);
    border-color: color-mix(in srgb, var(--bp-green3) 35%, var(--aip-border));
}

.other-instruments > h2,
.other-instruments > p {
    margin: 0;
}

.other-instruments > h2 {
    margin-bottom: 12px;
    font-size: 18px;
}
.other-instruments > p {
    margin-top: 3px;
    margin-bottom: 14px;
    color: var(--aip-text-muted);
    font-size: 12px;
}

@media (max-width: 520px) {
    .gateway-overview-grid { grid-template-columns: 1fr; }
    .gateway-port-summary { align-items: flex-start; }
    .gateway-ports-toggle { width: 100%; margin: 3px 0 0; text-align: left; }
}

/* ===== Empty state ===== */
.empty-state {
    background: var(--aip-bg-panel);
    border: 1px dashed var(--aip-border);
    border-radius: var(--aip-radius);
    padding: 32px 20px;
    text-align: center;
}
.empty-state h2 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--aip-text);
}
.empty-state p {
    color: var(--aip-text-muted);
    font-size: 13px;
    margin: 0 0 12px;
}
.empty-state a { color: var(--aip-accent); }

.files-toolbar {
    margin-bottom: 12px;
}
.files-breadcrumbs {
    font-size: 14px;
    color: var(--aip-text-muted);
}
.files-breadcrumbs a {
    color: var(--aip-accent);
    text-decoration: none;
}
.files-breadcrumbs a:hover {
    text-decoration: underline;
}
.files-crumb-sep {
    color: var(--aip-text-muted);
    margin: 0 2px;
}
.files-table td a {
    color: var(--aip-text);
    text-decoration: none;
}
.files-table td a:hover {
    color: var(--aip-accent);
    text-decoration: underline;
}
.files-row-dir td:first-child a { font-weight: 500; }