/* CES Osiris Custom Styles — Industrial Instrumentation Theme */

/* CSS Custom Properties — Dual Theme */
:root,
[data-theme="dark"] {
    /* Depth layers */
    --bg-primary: #1a1f2b;
    --bg-primary-rgb: 26, 31, 43;
    --bg-secondary: #232a38;
    --bg-secondary-rgb: 35, 42, 56;
    --bg-tertiary: #3a4456;
    --bg-tertiary-rgb: 58, 68, 86;
    --bg-elevated: #2d3548;
    --bg-elevated-rgb: 45, 53, 72;

    /* Text */
    --text-primary: #e2e6ed;
    --text-primary-rgb: 226, 230, 237;
    --text-secondary: #7a8699;
    --text-secondary-rgb: 122, 134, 153;
    --text-dim: #4d5a6e;
    --text-dim-rgb: 77, 90, 110;

    /* Accent */
    --accent: #c4a882;
    --accent-rgb: 196, 168, 130;
    --accent-dim: #8a7a6a;
    --accent-dim-rgb: 138, 122, 106;

    /* Status */
    --success: #4ade80;
    --success-rgb: 74, 222, 128;
    --warning: #fbbf24;
    --warning-rgb: 251, 191, 36;
    --error: #f87171;
    --error-rgb: 248, 113, 113;
    --info: #60a5fa;
    --info-rgb: 96, 165, 250;

    /* Adaptive surfaces */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.4);
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --sidebar-bg: rgba(35, 42, 56, 0.6);
    --hover-bg: rgba(74, 85, 104, 0.25);
    --active-bg: rgba(169, 150, 141, 0.15);
    --grid-line: rgba(58, 68, 86, 0.15);
    --zone-header-bg: rgba(45, 53, 72, 0.8);
    --zone-header-bg-hover: rgba(45, 53, 72, 1);
    --tooltip-bg: #293040;
    --tooltip-border: #4a5568;

    /* Animation timing tokens */
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.4s;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Typography — loaded via base.html <link> to Google Fonts.
       System-ui fallbacks keep the UI legible if the CDN is unreachable. */
    --font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:    "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace,
                    Menlo, Consolas, monospace;
}

/* Root font binding — everything inherits --font-display by default,
   and .telemetry-value (already defined below) switches to --font-mono. */
html, body {
    font-family: var(--font-display);
    font-feature-settings: "cv11", "ss01", "ss03";
}

[data-theme="light"] {
    /* Depth layers */
    --bg-primary: #f4f5f7;
    --bg-primary-rgb: 244, 245, 247;
    --bg-secondary: #ffffff;
    --bg-secondary-rgb: 255, 255, 255;
    --bg-tertiary: #d1d5db;
    --bg-tertiary-rgb: 209, 213, 219;
    --bg-elevated: #f9fafb;
    --bg-elevated-rgb: 249, 250, 251;

    /* Text */
    --text-primary: #1a1f2b;
    --text-primary-rgb: 26, 31, 43;
    --text-secondary: #6b7280;
    --text-secondary-rgb: 107, 114, 128;
    --text-dim: #9ca3af;
    --text-dim-rgb: 156, 163, 175;

    /* Accent */
    --accent: #b89b6a;
    --accent-rgb: 184, 155, 106;
    --accent-dim: #a08c72;
    --accent-dim-rgb: 160, 140, 114;

    /* Status — darker for legibility on light backgrounds */
    --success: #16a34a;
    --success-rgb: 22, 163, 74;
    --warning: #d97706;
    --warning-rgb: 217, 119, 6;
    --error: #dc2626;
    --error-rgb: 220, 38, 38;
    --info: #2563eb;
    --info-rgb: 37, 99, 235;

    /* Adaptive surfaces */
    --shadow-color: rgba(0, 0, 0, 0.08);
    --shadow-heavy: rgba(0, 0, 0, 0.12);
    --overlay-bg: rgba(0, 0, 0, 0.3);
    --sidebar-bg: rgba(255, 255, 255, 0.85);
    --hover-bg: rgba(0, 0, 0, 0.05);
    --active-bg: rgba(184, 155, 106, 0.12);
    --grid-line: rgba(0, 0, 0, 0.06);
    --zone-header-bg: rgba(249, 250, 251, 0.9);
    --zone-header-bg-hover: rgba(243, 244, 246, 1);
    --tooltip-bg: #ffffff;
    --tooltip-border: #d1d5db;
}

/* ========================================================================
   Industrial Instrumentation Theme — Depth & Glow
   ======================================================================== */

/* Elevation layers */
.elevation-surface {
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow-color);
}

.elevation-elevated {
    background: var(--bg-elevated);
    box-shadow: 0 4px 16px var(--shadow-heavy);
}

/* Status glow effects */
.glow-ok {
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

.glow-warn {
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

.glow-critical {
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
}

[data-theme="light"] .glow-critical {
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.25);
}

.glow-info {
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}

.glow-accent {
    box-shadow: 0 0 8px rgba(196, 168, 130, 0.3);
}

/* Monospace for telemetry values (instrument feel).
   Uses the --font-mono token (JetBrains Mono with system fallbacks) and
   enables tabular numerals so column-aligned readings don't jitter as
   digits change live. cv14 + zero gives the zero a slash so 0/O never
   get confused at 11–13px in dense readouts. */
.telemetry-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "zero", "cv14";
    letter-spacing: 0.01em;
}

/* Micro-interactions */
.hover-lift {
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--shadow-color);
}

.press-feedback:active {
    transform: scale(0.98);
}

/* Button ripple effect */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
        rgba(255, 255, 255, 0.25) 0%,
        transparent 60%
    );
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s, transform 0.5s;
    pointer-events: none;
}

.btn-ripple:active::after {
    opacity: 1;
    transform: scale(2.5);
    transition: 0s;
}

/* Dropdown open animation */
@keyframes dropdownOpen {
    from {
        opacity: 0;
        transform: scaleY(0.95) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scaleY(1) translateY(0);
    }
}

.dropdown-animate {
    transform-origin: top;
    animation: dropdownOpen var(--duration-fast) var(--ease-out);
}

/* Success pulse (for validation confirmations) */
@keyframes success-pulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.success-pulse {
    animation: success-pulse 0.6s ease-out;
}

/* Instrument panel gridlines (for dashboard backgrounds) */
.instrument-grid {
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 20px 20px;
}

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

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Selection styling */
::selection {
    background: var(--accent);
    color: var(--bg-primary);
}

/* Table sorting indicators */
th[data-sortable] {
    cursor: pointer;
    user-select: none;
}

th[data-sortable]:hover {
    background: var(--hover-bg);
}

/* Modal animations */
.modal-enter {
    animation: modalEnter var(--duration-normal) var(--ease-out);
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-exit {
    animation: modalExit var(--duration-fast) var(--ease-out) forwards;
}

@keyframes modalExit {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Toast notifications */
.toast {
    position: relative;
    overflow: hidden;
    animation: toastSlideIn var(--duration-slow) var(--ease-out);
}

.toast-exit {
    animation: toastSlideOut var(--duration-normal) var(--ease-out) forwards;
}

@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}

/* Toast progress bar — shrinks from 100% to 0% width */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.35;
    width: 100%;
    animation: toastCountdown linear forwards;
}

@keyframes toastCountdown {
    from { width: 100%; }
    to   { width: 0%; }
}

/* Copy-to-clipboard inline feedback */
.copy-trigger {
    position: relative;
    cursor: pointer;
}

.copy-trigger.copied::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--success);
    font-weight: 600;
    border-radius: inherit;
    animation: fadeSlideUp var(--duration-fast) var(--ease-out);
}

/* Pulse animation for online indicators */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Button active feedback — subtle scale on all buttons */
button:not(:disabled):not(.drawer-tab):active,
[role="button"]:not(:disabled):active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* Loading spinner */
.spinner {
    border: 2px solid var(--bg-tertiary);
    border-top-color: var(--accent);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.8s linear infinite;
}

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

/* Button hover effects */
button:active:not(:disabled) {
    transform: scale(0.98);
}

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Code blocks */
code {
    font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Table row hover */
tbody tr {
    transition: background-color 0.15s ease;
}

/* Card hover effect */
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-color);
}

/* Sidebar active state (legacy) */
.sidebar-active {
    background: var(--active-bg);
    color: var(--accent);
    border-left: 3px solid var(--accent);
}

/* ========================================================================
   Sidebar Navigation (collapsible groups)
   ======================================================================== */

.sidebar-nav {
    background: var(--sidebar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sidebar-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-tertiary) transparent;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 2px;
}

/* Group container */
.sidebar-group {
    margin-bottom: 2px;
}

/* Group toggle button (label + chevron) */
.sidebar-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px 4px;
    background: none;
    border: none;
    cursor: pointer;
    user-select: none;
}

.sidebar-group-toggle:hover .sidebar-chevron {
    color: var(--text-primary);
}

/* Chevron rotation */
.sidebar-chevron {
    transition: transform var(--duration-normal) var(--ease-out);
    flex-shrink: 0;
}

.sidebar-group.collapsed .sidebar-chevron {
    transform: rotate(-90deg);
}

/* Group items — animate collapse using CSS grid trick for smooth height */
.sidebar-group-items {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--duration-normal) var(--ease-out);
    overflow: hidden;
}

.sidebar-group-items > * {
    min-height: 0;
}

.sidebar-group.collapsed .sidebar-group-items {
    grid-template-rows: 0fr;
}

/* Staggered child reveal on expand */
.sidebar-group-items .sidebar-item {
    opacity: 1;
    transform: translateX(0);
    transition: opacity var(--duration-fast) ease,
                transform var(--duration-fast) ease;
}

.sidebar-group.collapsed .sidebar-group-items .sidebar-item {
    opacity: 0;
    transform: translateX(-8px);
}

.sidebar-group-items .sidebar-item:nth-child(1) { transition-delay: 0ms; }
.sidebar-group-items .sidebar-item:nth-child(2) { transition-delay: 25ms; }
.sidebar-group-items .sidebar-item:nth-child(3) { transition-delay: 50ms; }
.sidebar-group-items .sidebar-item:nth-child(4) { transition-delay: 75ms; }
.sidebar-group-items .sidebar-item:nth-child(5) { transition-delay: 100ms; }
.sidebar-group-items .sidebar-item:nth-child(n+6) { transition-delay: 125ms; }

.sidebar-group.collapsed .sidebar-group-items .sidebar-item {
    transition-delay: 0ms;
}

/* Sidebar item (link) */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 14px;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-left-color var(--duration-normal) var(--ease-out);
    border-left: 2px solid transparent;
    margin: 1px 4px;
}

.sidebar-item:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.sidebar-item.active {
    background: var(--active-bg);
    color: var(--accent);
    border-left-color: var(--accent);
}

.sidebar-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.sidebar-item:hover svg,
.sidebar-item.active svg {
    opacity: 1;
}

/* Alert row severity emphasis */
tr.alert-critical { background: rgba(239, 68, 68, 0.035); }
tr.alert-critical:hover { background: rgba(239, 68, 68, 0.08); }
tr.alert-critical > td:first-child { border-left: 3px solid #ef4444; }

tr.alert-high { background: rgba(249, 115, 22, 0.035); }
tr.alert-high:hover { background: rgba(249, 115, 22, 0.08); }
tr.alert-high > td:first-child { border-left: 3px solid #f97316; }

tr.alert-medium { background: rgba(234, 179, 8, 0.025); }
tr.alert-medium:hover { background: rgba(234, 179, 8, 0.06); }
tr.alert-medium > td:first-child { border-left: 3px solid #eab308; }

/* ========================================================================
   Dashboard Editor & Widgets
   ======================================================================== */

/* Three-panel editor layout */
.dashboard-editor-layout {
    display: flex;
    height: calc(100vh - 73px);
    overflow: hidden;
}

.editor-panel {
    background: var(--bg-secondary);
    border-color: var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.2s ease;
}

.editor-panel-left {
    width: 260px;
    min-width: 260px;
    border-right: 1px solid var(--bg-tertiary);
}

.editor-panel-right {
    width: 300px;
    min-width: 300px;
    border-left: 1px solid var(--bg-tertiary);
}

.editor-panel.collapsed {
    width: 0;
    min-width: 0;
    overflow: hidden;
}

.editor-panel.collapsed .editor-panel-body {
    display: none;
}

.editor-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 8px;
    border-bottom: 1px solid var(--bg-tertiary);
    flex-shrink: 0;
}

.editor-panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.editor-canvas {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
}

.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-tertiary);
    flex-shrink: 0;
}

.editor-grid-wrapper {
    flex: 1;
    overflow: auto;
    padding: 16px;
    position: relative;
}

/* GridStack overrides for Osiris theme */
.grid-stack {
    min-height: 400px;
}

.grid-stack-item-content {
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.grid-stack-item-content:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
}

.grid-stack-item-content.widget-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}

.grid-stack-item-content.widget-stale {
    border-color: var(--warning);
    box-shadow: 0 0 0 1px rgba(var(--warning-rgb), 0.2);
}

.grid-stack-item-content.widget-alarm-active {
    border-color: var(--error);
    box-shadow: 0 0 0 1px rgba(var(--error-rgb), 0.2);
}

/* ====================================================================
   Component Zones (v2 dashboard layout)
   ==================================================================== */

/* Zone header grid item — no widget chrome */
.zone-header-item .grid-stack-item-content {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.zone-header-item .grid-stack-item-content:hover {
    border-color: transparent;
}

.zone-header-container {
    width: 100%;
    height: 100%;
}

.zone-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--zone-header-bg);
    border-radius: 6px;
    border: 1px solid var(--bg-tertiary);
    border-left: 3px solid var(--accent);
    height: 100%;
    transition: background 0.15s ease;
}

.zone-header:hover {
    background: var(--zone-header-bg-hover);
}

.zone-collapse-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.zone-collapse-btn:hover {
    color: var(--text-primary);
}

.zone-chevron {
    transition: transform 0.2s ease;
}

.zone-collapsed .zone-chevron {
    transform: rotate(-90deg);
}

.zone-type-label {
    color: var(--accent);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: 4px;
    flex-shrink: 0;
}

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

.zone-cx-badge {
    font-size: 0.5625rem;
    padding: 2px 8px;
    border-radius: 9999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    transition: background var(--duration-normal) ease,
                color var(--duration-normal) ease,
                box-shadow var(--duration-normal) ease;
}

.zone-cx-badge.cx-unseen {
    background: rgba(77, 90, 110, 0.3);
    color: #4d5a6e;
}

.zone-cx-badge.cx-observed {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

.zone-cx-badge.cx-verified_candidate {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    animation: cx-pulse 2s infinite;
}

.zone-cx-badge.cx-verified {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.zone-cx-badge.cx-validated {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

@keyframes cx-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.zone-remove-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.125rem;
    padding: 0 4px;
    opacity: 0;
    transition: opacity 0.15s;
    line-height: 1;
}

.zone-header-item:hover .zone-remove-btn {
    opacity: 0.5;
}

.zone-remove-btn:hover {
    color: var(--error);
    opacity: 1 !important;
}

/* CX accept/reject action buttons */
.zone-cx-actions {
    display: inline-flex;
    gap: 6px;
    margin-left: 8px;
}

.zone-cx-accept,
.zone-cx-reject {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.4;
}

.zone-cx-accept {
    background: rgba(var(--success-rgb), 0.15);
    color: var(--success);
    border-color: rgba(var(--success-rgb), 0.3);
}

.zone-cx-accept:hover {
    background: rgba(var(--success-rgb), 0.25);
    border-color: var(--success);
}

.zone-cx-reject {
    background: rgba(var(--error-rgb), 0.15);
    color: var(--error);
    border-color: rgba(var(--error-rgb), 0.3);
}

.zone-cx-reject:hover {
    background: rgba(var(--error-rgb), 0.25);
    border-color: var(--error);
}

/* Grid drop zone indicator */
.grid-drop-active {
    outline: 2px dashed var(--accent);
    outline-offset: -4px;
}

/* Grid onboarding / empty state */
.grid-onboarding {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.onboarding-icon {
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.onboarding-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Widget content */
.widget-container {
    height: 100%;
    width: 100%;
}

.widget-content {
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.widget-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Big Value widget */
.widget-big-value {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.big-value-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}

.big-value-number {
    font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.big-value-units {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.big-value-quality {
    margin-top: 4px;
}

/* Gauge widget */
.widget-gauge {
    align-items: center;
    justify-content: center;
}

.gauge-chart-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: calc(100% - 28px);
}

.gauge-canvas {
    max-width: 200px;
    max-height: 120px;
}

/* Time Series widget */
.widget-time-series {
    min-height: 0;
}

.ts-chart-container {
    flex: 1;
    position: relative;
    min-height: 0;
}

.ts-canvas {
    width: 100% !important;
    height: 100% !important;
}

/* State Badge widget */
.widget-state-badge {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.state-badge-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.state-badge-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-secondary);
    flex-shrink: 0;
}

.state-badge-label {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Boolean Indicator widget */
.widget-boolean {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.boolean-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.boolean-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-secondary);
    flex-shrink: 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.boolean-label {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Table widget */
.widget-table {
    min-height: 0;
}

.table-scroll {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.widget-data-table {
    width: 100%;
    font-size: 0.75rem;
    border-collapse: collapse;
}

.widget-data-table th {
    text-align: left;
    padding: 4px 8px;
    color: var(--text-secondary);
    font-weight: 500;
    border-bottom: 1px solid var(--bg-tertiary);
    white-space: nowrap;
}

.widget-data-table td {
    padding: 4px 8px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--hover-bg);
}

.widget-data-table tr.row-stale td {
    color: var(--warning);
}

.quality-badge {
    font-size: 0.625rem;
    padding: 1px 6px;
    border-radius: 9999px;
    text-transform: uppercase;
}

.quality-good { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.quality-questionable { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.quality-bad { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.quality-unknown { background: rgba(122, 134, 153, 0.15); color: #7a8699; }

/* Alarm Card widget */
.widget-alarm-card {
    min-height: 0;
}

.alarm-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.alarm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin-bottom: 4px;
    border-radius: 4px;
    font-size: 0.8125rem;
}

.alarm-label {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alarm-value {
    font-weight: 600;
    white-space: nowrap;
    margin-left: 8px;
}

/* Component Health widget */
.widget-component-health {
    min-height: 0;
}

.health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    padding: 8px 0;
    max-height: 280px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.health-tile {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

/* Save status indicator */
.save-status {
    font-size: 0.75rem;
    transition: color 0.2s ease;
}

/* ========================================================================
   Graph Workspace
   ======================================================================== */

/* Main three-panel layout: left browser | center chart | bottom dock */
.graph-workspace {
    display: flex;
    height: calc(100vh - 73px);
    overflow: hidden;
}

/* Left panel — point browser */
.graph-panel-left {
    width: 280px;
    min-width: 280px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.graph-panel-left .editor-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 8px;
    border-bottom: 1px solid var(--bg-tertiary);
    flex-shrink: 0;
}

.graph-panel-left .editor-panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Center area — toolbar + chart + dock */
.graph-canvas-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
}

/* Toolbar row */
.graph-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-tertiary);
    flex-shrink: 0;
    gap: 12px;
}

.graph-toolbar-left,
.graph-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Chart container */
.graph-chart-container {
    flex: 1;
    position: relative;
    min-height: 300px;
}

.graph-chart-container canvas,
.graph-chart-container > div {
    width: 100% !important;
    height: 100% !important;
}

/* Empty state overlay */
.graph-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    gap: 12px;
    z-index: 5;
}

.graph-empty-state svg {
    opacity: 0.4;
}

/* AI Graph Creation Bar */
.ai-graph-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-tertiary);
    flex-shrink: 0;
}

.ai-graph-bar input {
    font-size: 0.8125rem;
}

.ai-graph-bar button:disabled {
    cursor: not-allowed;
}

/* Bottom dock — series controls */
.graph-series-dock {
    border-top: 1px solid var(--bg-tertiary);
    background: var(--bg-secondary);
    flex-shrink: 0;
    max-height: 220px;
    overflow-y: auto;
}

.graph-series-dock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    border-bottom: 1px solid var(--bg-tertiary);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

/* Series table */
.graph-series-table {
    width: 100%;
    font-size: 0.8125rem;
}

/* Series table header and rows — flex layout for div-based rendering */
.series-table-header,
.series-row {
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.series-table-header {
    border-bottom: 1px solid var(--bg-tertiary);
    padding-top: 4px;
    padding-bottom: 4px;
}

.series-row {
    border-bottom: 1px solid var(--bg-tertiary);
    transition: background 0.1s ease;
    padding-top: 6px;
    padding-bottom: 6px;
}

.series-row:hover {
    background: rgba(var(--accent-rgb), 0.04);
}

/* Base cell style */
.series-cell {
    padding: 0 4px;
    flex-shrink: 0;
}

.series-cell-color { width: 32px; }
.series-cell-label { flex: 1; min-width: 80px; }
.series-cell-agg { width: 60px; }
.series-cell-vis { width: 32px; }
.series-cell-delete { width: 32px; }

/* Color swatch input */
.series-color-input {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}

.series-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.series-color-input::-webkit-color-swatch {
    border: 1px solid var(--bg-tertiary);
    border-radius: 4px;
}

/* Label input */
.series-label-input {
    background: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 4px 8px;
    font-size: 0.8125rem;
    width: 100%;
    min-width: 80px;
    max-width: 200px;
}

.series-label-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Aggregation select */
.series-agg-select {
    background: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 4px 6px;
    font-size: 0.75rem;
    cursor: pointer;
}

/* Visibility toggle */
.series-vis-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}

.series-vis-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.series-vis-btn.series-hidden {
    color: var(--text-tertiary);
    opacity: 0.5;
}

/* Delete button */
.series-delete-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}

.series-delete-btn:hover {
    background: rgba(var(--error-rgb, 239, 68, 68), 0.1);
    color: var(--error, #ef4444);
}

/* Point name cell — monospace, muted */
.series-cell-point {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Units cell */
.series-cell-units {
    width: 60px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* Graph library cards */
.graph-card {
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 8px;
    padding: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.graph-card:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.graph-card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.graph-card:hover .graph-card-actions {
    opacity: 1;
}

/* Custom datetime inputs (dark theme) */
.custom-datetime-input {
    color-scheme: dark;
    font-size: 0.8125rem;
}

.custom-datetime-input::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
}

/* Export dropdown */
#export-dropdown {
    min-width: 140px;
}

/* ========================================================================
   Point Browser
   ======================================================================== */

.pb-header {
    padding: 8px;
    border-bottom: 1px solid var(--bg-tertiary);
}

.pb-scope-row {
    margin-bottom: 6px;
}

.pb-scope-select {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.75rem;
    color: var(--text-primary);
    cursor: pointer;
}

.pb-scope-select:focus {
    outline: none;
    border-color: var(--accent);
}

.pb-search-row {
    margin-bottom: 6px;
}

.pb-search {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    outline: none;
}

.pb-search:focus {
    border-color: var(--accent);
}

.pb-component-filter {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.75rem;
    color: var(--text-primary);
    outline: none;
}

.pb-tree {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.pb-group {
    border-bottom: 1px solid var(--hover-bg);
}

.pb-group.collapsed .pb-group-items {
    display: none;
}

.pb-group.collapsed .pb-chevron {
    transform: rotate(-90deg);
}

.pb-group-header {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    gap: 6px;
}

.pb-group-header:hover {
    background: var(--hover-bg);
}

.pb-chevron {
    transition: transform 0.15s ease;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.pb-group-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-group-count {
    font-size: 0.625rem;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 1px 6px;
    border-radius: 9999px;
}

.pb-point {
    display: flex;
    flex-direction: column;
    padding: 5px 8px 5px 24px;
    cursor: grab;
    font-size: 0.75rem;
    transition: background-color 0.1s ease;
    border-left: 2px solid transparent;
}

.pb-point:hover {
    background: var(--hover-bg);
    border-left-color: var(--accent);
}

.pb-point:active {
    cursor: grabbing;
}

.pb-point-stale {
    opacity: 0.6;
}

.pb-point-name {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-point-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.pb-point-value {
    color: var(--accent);
    font-weight: 500;
}

.pb-point-units {
    color: var(--text-secondary);
    font-size: 0.625rem;
}

.quality-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.quality-dot.quality-good { background: var(--success); }
.quality-dot.quality-questionable { background: var(--warning); }
.quality-dot.quality-bad { background: var(--error); }
.quality-dot.quality-unknown { background: var(--text-secondary); }

/* ========================================================================
   Point Browser V2 — Component Visual Hierarchy
   ======================================================================== */

/* Equipment block — top-level hierarchy group */
.pb-equipment-block {
    margin: 6px 4px;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
}

.pb-equipment-block:hover {
    border-color: var(--hover-bg);
}

.pb-equipment-header {
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
    border-radius: 8px 8px 0 0;
}

.pb-equipment-header:hover {
    background: var(--hover-bg);
}

.pb-equipment-header-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pb-equip-icon {
    flex-shrink: 0;
    color: var(--accent);
}

.pb-equipment-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-equipment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 20px;
    margin-top: 2px;
}

.pb-equip-type-badge {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.1);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.pb-equipment-items {
    max-height: 5000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 1;
    padding: 0 4px 4px;
}

.pb-equipment-block.collapsed .pb-equipment-items {
    max-height: 0;
    opacity: 0;
    padding: 0;
}

.pb-equipment-block .pb-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.pb-equipment-block.collapsed > .pb-equipment-header .pb-chevron {
    transform: rotate(-90deg);
}

/* Components nested under equipment get slightly reduced styling */
.pb-equipment-items .pb-component-block {
    margin: 2px 4px;
    border-left-width: 2px;
}

/* Ungrouped equipment block visual distinction */
.pb-equipment-block.pb-ungrouped {
    border-style: dashed;
}

.pb-equipment-block.pb-ungrouped .pb-equip-icon {
    color: var(--text-secondary);
}

/* Component block — equipment-first cards */
.pb-component-block {
    background: var(--bg-primary);
    border-left: 3px solid var(--text-secondary);
    border-radius: 6px;
    margin: 4px 8px;
    transition: border-color 0.2s ease;
}

.pb-component-block:hover {
    border-left-color: var(--accent);
}

/* Health-based left border */
.pb-component-block:has(.pb-health-ok) { border-left-color: var(--success); }
.pb-component-block:has(.pb-health-warning) { border-left-color: var(--warning); }
.pb-component-block:has(.pb-health-error) { border-left-color: var(--error); }

/* Component header — click to expand/collapse */
.pb-component-header {
    padding: 10px;
    cursor: pointer;
    user-select: none;
}

.pb-component-header:hover {
    background: var(--hover-bg);
    border-radius: 4px;
}

.pb-component-header-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Health indicator dot */
.pb-health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pb-health-ok { background: var(--success); }
.pb-health-warning { background: var(--warning); }
.pb-health-error { background: var(--error); }
.pb-health-unknown { background: var(--text-secondary); }

/* Component name — prominent */
.pb-component-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chevron rotation for collapse */
.pb-component-block .pb-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.pb-component-block.collapsed .pb-chevron {
    transform: rotate(-90deg);
}

/* Commissioning coverage bar */
.pb-commissioning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-left: 16px;
}

.pb-coverage-bar-track {
    flex: 1;
    height: 4px;
    background: var(--hover-bg);
    border-radius: 2px;
    overflow: hidden;
}

.pb-coverage-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.pb-coverage-bar.commissioning-unseen { background: var(--text-secondary); }
.pb-coverage-bar.commissioning-observed { background: var(--info); }
.pb-coverage-bar.commissioning-verified { background: var(--success); }

.pb-coverage-text {
    font-size: 0.625rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.pb-coverage-text.commissioning-unseen { color: var(--text-secondary); }
.pb-coverage-text.commissioning-observed { color: var(--info); }
.pb-coverage-text.commissioning-verified { color: var(--success); }

/* Point items within component blocks */
.pb-component-block .pb-group-items {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    opacity: 1;
}

.pb-component-block.collapsed .pb-group-items {
    max-height: 0;
    opacity: 0;
}

/* Point row layout */
.pb-point-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Checkmark for points already on dashboard */
.pb-point-check {
    color: var(--success);
    font-size: 0.75rem;
    flex-shrink: 0;
    line-height: 1;
}

.pb-point-on-dashboard {
    border-left-color: var(--success);
}

.pb-point-on-dashboard .pb-point-name {
    color: var(--success);
}

/* Semantic type badge */
.pb-semantic-badge {
    font-size: 0.5625rem;
    padding: 1px 5px;
    border-radius: 9999px;
    background: var(--active-bg);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Suggestion cards per component */
.pb-suggestions {
    background: rgba(var(--accent-rgb), 0.08);
    border-top: 1px dashed var(--bg-tertiary);
    padding: 6px 8px;
    margin: 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.pb-suggestions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.pb-add-all-btn {
    font-size: 0.625rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--accent);
    color: var(--bg-primary);
    font-weight: 600;
    transition: opacity 0.15s ease;
}

.pb-add-all-btn:hover {
    opacity: 0.85;
}

.pb-suggestion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-primary);
    padding: 2px 0;
}

.pb-suggestion-type {
    color: var(--text-secondary);
}

.pb-suggestion-count {
    font-size: 0.625rem;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 0 5px;
    border-radius: 9999px;
}

/* CIL point suggestion panel (top of point browser) */
.pb-suggest-header {
    padding: 6px 10px 4px;
    border-bottom: 1px solid var(--bg-tertiary);
}

.pb-suggest-list {
    padding: 2px 6px 6px;
}

.pb-suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: default;
    transition: background-color 0.1s ease;
}

.pb-suggest-item:hover {
    background: rgba(var(--accent-rgb), 0.08);
}

.pb-suggest-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.pb-suggest-name {
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-suggest-reason {
    font-size: 0.625rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-suggest-add {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent);
    border-radius: 4px;
    transition: background-color 0.1s ease;
}

.pb-suggest-add:hover {
    background: rgba(var(--accent-rgb), 0.15);
}

/* ========================================================================
   Widget Inspector
   ======================================================================== */

/* Context/explanation section — meaning first */
.inspector-context {
    background: var(--bg-primary);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.inspector-context-component {
    font-size: 0.75rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.inspector-context-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.inspector-context-live {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 4px;
}

.inspector-live-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.inspector-live-units {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.inspector-context-time {
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

.inspector-divider {
    border: none;
    border-top: 1px solid var(--bg-tertiary);
    margin: 8px 0 12px;
}

/* Advanced/infrastructure toggle */
.inspector-advanced-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.inspector-advanced-toggle:hover {
    color: var(--accent);
}

.inspector-advanced-chevron {
    transition: transform 0.15s ease;
}

.inspector-advanced-section {
    margin-top: 6px;
}

.inspector-signal-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inspector-signal-gw {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.625rem;
}

.inspector-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
}

.inspector-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.inspector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--bg-tertiary);
}

.inspector-close {
    padding: 4px;
    border-radius: 4px;
    color: var(--text-secondary);
    transition: background 0.15s ease;
}

.inspector-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.inspector-fields {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.inspector-field {
    margin-bottom: 12px;
}

.inspector-field label {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.inspector-input {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    outline: none;
}

.inspector-input:focus {
    border-color: var(--accent);
}

.inspector-input-sm {
    background: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.75rem;
    color: var(--text-primary);
    outline: none;
}

.inspector-input-sm:focus {
    border-color: var(--accent);
}

/* Threshold / enum / rule rows */
.inspector-threshold-row,
.inspector-enum-row,
.inspector-severity-row,
.inspector-rule-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.inspector-threshold-row .inspector-input-sm,
.inspector-enum-row .inspector-input-sm,
.inspector-severity-row .inspector-input-sm,
.inspector-rule-row .inspector-input-sm {
    flex: 1;
    min-width: 0;
}

.inspector-remove-btn {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1;
}

.inspector-remove-btn:hover {
    background: rgba(var(--error-rgb), 0.2);
    color: var(--error);
}

.inspector-add-btn {
    display: block;
    width: 100%;
    padding: 4px;
    margin-top: 4px;
    font-size: 0.6875rem;
    color: var(--accent);
    text-align: center;
    border: 1px dashed var(--bg-tertiary);
    border-radius: 4px;
    transition: border-color 0.15s ease;
}

.inspector-add-btn:hover {
    border-color: var(--accent);
}

/* Signal info */
.inspector-signals {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inspector-signal-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: var(--bg-primary);
    border-radius: 4px;
    font-size: 0.75rem;
}

.inspector-signal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.inspector-signal-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

/* Live preview */
.inspector-live-preview {
    margin-top: 12px;
    padding: 8px;
    background: var(--bg-primary);
    border-radius: 6px;
}

.live-preview-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-top: 4px;
}

/* Inspector actions */
.inspector-actions {
    padding: 12px;
    border-top: 1px solid var(--bg-tertiary);
    display: flex;
    gap: 8px;
}

.inspector-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    transition: background 0.15s ease;
}

.inspector-btn-duplicate {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--bg-tertiary);
}

.inspector-btn-duplicate:hover {
    border-color: var(--accent);
}

.inspector-btn-delete {
    background: rgba(var(--error-rgb), 0.1);
    color: var(--error);
    border: 1px solid rgba(var(--error-rgb), 0.2);
}

.inspector-btn-delete:hover {
    background: rgba(var(--error-rgb), 0.2);
}

/* Dashboard view container */
.dashboard-view-container {
    min-height: 400px;
}

/* Unknown widget fallback */
.widget-unknown {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* ========================================================================
   Chat UI — Assistant Bubbles & Conversation Flow
   ======================================================================== */

/* Message area */
.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Chat row — avatar + bubble */
.chat-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 100%;
}

.chat-row-user {
    flex-direction: row-reverse;
}

.chat-row-assistant {
    flex-direction: row;
}

/* Avatar circle */
.chat-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.chat-avatar-user {
    background: var(--accent);
}

/* Chat bubbles */
.chat-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    position: relative;
    line-height: 1.5;
}

.chat-bubble-user {
    background: rgba(var(--accent-rgb), 0.18);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-top-right-radius: 4px;
    color: var(--text-primary);
}

.chat-bubble-assistant {
    background: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-top-left-radius: 4px;
    color: var(--text-primary);
}

.chat-bubble-error {
    background: rgba(var(--error-rgb), 0.08);
    border: 1px solid rgba(var(--error-rgb), 0.25);
    border-top-left-radius: 4px;
    color: var(--error);
}

/* Chat text */
.chat-text {
    font-size: 0.875rem;
    line-height: 1.6;
}

.chat-paragraph {
    margin: 0;
}

.chat-paragraph + .chat-paragraph {
    margin-top: 8px;
}

.chat-bold {
    color: var(--accent);
    font-weight: 600;
}

.chat-code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8125rem;
    background: var(--bg-tertiary);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--accent);
}

/* Inline telemetry reading highlight */
.chat-reading {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-weight: 600;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* List items */
.chat-list-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 2px 0;
    padding-left: 4px;
}

.chat-bullet {
    width: 5px;
    height: 5px;
    min-width: 5px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 8px;
}

.chat-list-num {
    color: var(--accent);
    font-weight: 600;
    min-width: 18px;
}

/* System message (anomaly alerts etc.) */
.chat-system-row {
    display: flex;
    justify-content: center;
}

.chat-system-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(var(--warning-rgb), 0.1);
    border: 1px solid rgba(var(--warning-rgb), 0.2);
    color: var(--warning);
    font-size: 0.75rem;
}

/* Evidence badges */
.chat-evidence-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--bg-tertiary);
}

.chat-evidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: border-color 0.15s;
    font-family: inherit;
}

.chat-evidence-badge:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.chat-evidence-score {
    color: var(--accent);
    font-weight: 600;
}

/* Expandable evidence panel */
.chat-evidence-panel {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    font-size: 0.75rem;
    line-height: 1.4;
}

.chat-evidence-panel.hidden {
    display: none;
}

.chat-evidence-panel-header {
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 4px;
    font-size: 0.6875rem;
}

.chat-evidence-panel-text {
    color: var(--text-secondary);
    margin: 0;
    white-space: pre-wrap;
}

/* Meta line (tokens, cached) */
.chat-meta {
    margin-top: 6px;
    font-size: 0.6875rem;
    color: var(--text-dim);
}

/* -----------------------------------------------------------------------
   AI Feedback (thumbs up/down on assistant responses)
   ----------------------------------------------------------------------- */

.chat-feedback {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--bg-tertiary);
}

.chat-feedback-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    color: var(--text-dim);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chat-feedback-btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
}

.chat-feedback-btn.chat-feedback-up:hover:not(:disabled) {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

.chat-feedback-btn.chat-feedback-down:hover:not(:disabled) {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.chat-feedback-btn.chat-feedback-disabled {
    opacity: 0.4;
    cursor: default;
}

.chat-feedback-btn.chat-feedback-selected-up {
    color: #22c55e;
    opacity: 1;
}

.chat-feedback-btn.chat-feedback-selected-down {
    color: #ef4444;
    opacity: 1;
}

/* -----------------------------------------------------------------------
   Telemetry context strip (shown in assistant responses)
   ----------------------------------------------------------------------- */

.chat-telemetry-strip {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--bg-tertiary);
}

.chat-telemetry-header {
    display: block;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.chat-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 4px;
}

.chat-telemetry-card {
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border-left: 2px solid var(--success);
}

.chat-telemetry-card.quality-warn {
    border-left-color: var(--warning);
}

.chat-telemetry-card.quality-bad {
    border-left-color: var(--error);
}

.chat-telemetry-label {
    font-size: 0.5625rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-telemetry-value {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------
   Thinking / loading indicator (animated in-chat)
   ----------------------------------------------------------------------- */

.chat-thinking {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-thinking-dots {
    display: flex;
    gap: 4px;
}

.chat-thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: chatAccentPulse 2s ease-in-out infinite;
}

.chat-thinking-dots span:nth-child(2) {
    animation-delay: 0.3s;
}

.chat-thinking-dots span:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes chatAccentPulse {
    0%, 100% {
        opacity: 0.25;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

.chat-thinking-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Fade-in animation for new messages */
@keyframes chatFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: chatFadeIn 0.25s ease-out;
}

/* ========================================================================
   Command Card (assistant command execution)
   ======================================================================== */

.cmd-card {
    border: 1px solid var(--bg-tertiary);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.cmd-card.cmd-risk-high { border-color: rgba(var(--error-rgb), 0.3); background: rgba(var(--error-rgb), 0.05); }
.cmd-card.cmd-risk-medium { border-color: rgba(var(--warning-rgb), 0.3); background: rgba(var(--warning-rgb), 0.05); }
.cmd-card.cmd-risk-low { border-color: rgba(var(--success-rgb), 0.3); background: rgba(var(--success-rgb), 0.05); }

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

.cmd-title {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.cmd-risk-badge {
    font-size: 0.675rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid;
}

.cmd-risk-badge.cmd-risk-high { color: var(--error); border-color: rgba(var(--error-rgb), 0.3); }
.cmd-risk-badge.cmd-risk-medium { color: var(--warning); border-color: rgba(var(--warning-rgb), 0.3); }
.cmd-risk-badge.cmd-risk-low { color: var(--success); border-color: rgba(var(--success-rgb), 0.3); }

.cmd-action {
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.cmd-reasoning {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.cmd-safety {
    margin-bottom: 0.5rem;
}

.cmd-safety-check {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
}

.cmd-check-pass { color: var(--success); font-weight: 600; font-size: 0.675rem; }
.cmd-check-fail { color: var(--error); font-weight: 600; font-size: 0.675rem; }
.cmd-check-text { color: var(--text-secondary); }

.cmd-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cmd-btn-confirm {
    padding: 0.375rem 0.75rem;
    background: var(--accent);
    color: var(--bg-primary);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}

.cmd-btn-confirm:hover { opacity: 0.9; }
.cmd-btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

.cmd-btn-cancel {
    padding: 0.375rem 0.75rem;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.15s;
}

.cmd-btn-cancel:hover { color: var(--text-primary); }
.cmd-btn-cancel:disabled { opacity: 0.5; cursor: not-allowed; }

/* Verification result */
.cmd-verify {
    border: 1px solid var(--bg-tertiary);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.25rem;
}

.cmd-verify.cmd-verify-pass { border-color: rgba(var(--success-rgb), 0.3); background: rgba(var(--success-rgb), 0.05); }
.cmd-verify.cmd-verify-warn { border-color: rgba(var(--warning-rgb), 0.3); background: rgba(var(--warning-rgb), 0.05); }

.cmd-verify-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}

.cmd-verify-pass .cmd-verify-header { color: var(--success); }
.cmd-verify-warn .cmd-verify-header { color: var(--warning); }

.cmd-verify-title {
    font-weight: 600;
    font-size: 0.875rem;
}

.cmd-verify-reasoning {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.cmd-verify-evidence {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cmd-verify-evidence strong {
    color: var(--text-primary);
}

/* ========================================================================
   Theme Toggle
   ======================================================================== */

/* Theme toggle pill */
.theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
    width: 64px;
    height: 32px;
    border-radius: 9999px;
    background: var(--bg-elevated);
    border: 1px solid var(--bg-tertiary);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-toggle-dot {
    position: absolute;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
    will-change: transform;
}

[data-theme="light"] .theme-toggle-dot {
    transform: translateX(32px);
}

.theme-toggle-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: opacity 0.2s ease;
}

.theme-toggle-icon svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
}

.theme-icon-sun {
    left: 6px;
}

.theme-icon-moon {
    right: 6px;
}

/* In dark mode: show sun (click to go light), hide moon */
[data-theme="dark"] .theme-icon-moon,
:root:not([data-theme]) .theme-icon-moon {
    opacity: 0;
}

/* In light mode: show moon (click to go dark), hide sun */
[data-theme="light"] .theme-icon-sun {
    opacity: 0;
}

/* Light mode video background adjustment */
[data-theme="light"] .video-bg {
    opacity: 0.06;
}

/* Light mode login card */
[data-theme="light"] .login-card {
    background: rgba(255, 255, 255, 0.85);
}

/* ========================================================================
   Component Drawer
   ======================================================================== */

/* Drawer tab bar */
.drawer-tab {
    padding: 10px 14px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-normal) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
    background: none;
    cursor: pointer;
}

.drawer-tab:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

.drawer-tab-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Drawer shell */
.drawer-shell {
    min-height: 100vh;
}

/* Border-left width utility for findings severity */
.border-l-3 {
    border-left-width: 3px;
}

/* ========================================================================
   Drawer & Panel Animations
   ======================================================================== */

/* Drawer overlay — fade instead of instant show/hide */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background var(--duration-normal) ease;
    z-index: 30;
    pointer-events: none;
}

.drawer-overlay.open {
    background: var(--overlay-bg);
    pointer-events: auto;
}

/* Drawer panel — improved easing */
.drawer-panel {
    transition: transform var(--duration-slow) var(--ease-out);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0);
}

.drawer-panel:not(.translate-x-full) {
    box-shadow: -8px 0 32px var(--shadow-heavy);
}

/* ========================================================================
   Data State Transitions
   ======================================================================== */

/* Live value flash — highlight cells when values change */
@keyframes valueFlash {
    0% { background: rgba(var(--accent-rgb), 0.2); }
    100% { background: transparent; }
}

.value-updated {
    animation: valueFlash 1s var(--ease-out);
}

/* Status change pulse — for gateway/health dots that change state */
@keyframes statusChange {
    0% { box-shadow: 0 0 0 0 currentColor; }
    50% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.status-changed {
    animation: statusChange 0.6s var(--ease-out);
}

/* Form field validation feedback */
@keyframes fieldShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

.field-error {
    animation: fieldShake 0.4s ease;
    border-color: var(--error) !important;
}

.field-success {
    border-color: var(--success) !important;
    transition: border-color var(--duration-normal) ease;
}

/* ========================================================================
   Responsive — Mobile Overrides (< 768px)
   ======================================================================== */

@media (max-width: 767px) {
    /* Sidebar drawer shadow when open */
    #sidebar.translate-x-0 {
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    }

    /* Tighter table cells */
    table th,
    table td {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* Allow tables to scroll horizontally with a usable min-width */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    .overflow-x-auto table {
        min-width: 600px;
    }
}

/* ========================================================================
   HTMX Swap Transitions
   ======================================================================== */

/* Content entering via HTMX swap */
.htmx-added {
    opacity: 0;
    transform: translateY(8px);
}

/* Settling state (after swap completes) */
.htmx-settling {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);
}

/* Element being swapped out */
.htmx-swapping {
    opacity: 0;
    transition: opacity var(--duration-fast) ease-in;
}

/* ========================================================================
   Page Entrance Animations
   ======================================================================== */

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.animate-entrance {
    animation: fadeSlideUp var(--duration-normal) var(--ease-out) both;
}

/* Staggered entrance for page content — apply to a parent container */
.animate-entrance-stagger > * {
    opacity: 0;
    animation: fadeSlideUp var(--duration-normal) var(--ease-out) both;
}

.animate-entrance-stagger > *:nth-child(1) { animation-delay: 0ms; }
.animate-entrance-stagger > *:nth-child(2) { animation-delay: 50ms; }
.animate-entrance-stagger > *:nth-child(3) { animation-delay: 100ms; }
.animate-entrance-stagger > *:nth-child(4) { animation-delay: 150ms; }
.animate-entrance-stagger > *:nth-child(5) { animation-delay: 200ms; }
.animate-entrance-stagger > *:nth-child(6) { animation-delay: 250ms; }
.animate-entrance-stagger > *:nth-child(n+7) { animation-delay: 300ms; }

/* ========================================================================
   Skeleton Loading Placeholders
   ======================================================================== */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-elevated) 37%,
        var(--bg-tertiary) 63%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
    color: transparent !important;
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text-sm {
    height: 10px;
    margin-bottom: 6px;
    border-radius: 3px;
}

.skeleton-heading {
    height: 22px;
    width: 40%;
    margin-bottom: 12px;
    border-radius: 4px;
}

.skeleton-badge {
    height: 22px;
    width: 64px;
    border-radius: 9999px;
    display: inline-block;
}

.skeleton-card {
    height: 120px;
    border-radius: 12px;
}

.skeleton-row {
    height: 48px;
    margin-bottom: 2px;
    border-radius: 6px;
}

.skeleton-circle {
    border-radius: 50%;
}

/* ========================================================================
   Empty States & Error Pages
   ======================================================================== */

/* Reusable empty state container — centered icon, heading, subtext */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    min-height: 200px;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    opacity: 0.6;
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    max-width: 28rem;
    line-height: 1.5;
}

/* Gentle float animation for error/empty state icons */
@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.animate-float {
    animation: gentleFloat 3s ease-in-out infinite;
}

/* Error page icon container */
.error-icon-ring {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* ========================================================================
   Design System — Surface Hierarchy
   ======================================================================== */

/* Primary surface — hero/status areas (elevated, prominent) */
.surface-primary {
    background: var(--bg-elevated);
    box-shadow: 0 4px 16px var(--shadow-heavy);
    border-radius: 12px;
}

/* Secondary surface — main content blocks */
.surface-secondary {
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 12px;
}

/* Tertiary — subtle groups, inline panels */
.surface-tertiary {
    background: rgba(var(--bg-primary-rgb), 0.5);
    border-radius: 8px;
}

/* ========================================================================
   Command Palette
   ======================================================================== */

.command-palette-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.625rem 0.875rem;
    border-radius: 10px;
    transition: border-color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
    border: 1px solid var(--bg-tertiary);
}

.command-palette-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15);
}

.command-palette-icon {
    width: 18px;
    height: 18px;
    color: var(--text-dim);
    flex-shrink: 0;
    transition: color var(--duration-fast) ease;
}

.command-palette-wrapper:focus-within .command-palette-icon {
    color: var(--accent);
}

.command-palette-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9375rem;
    margin-left: 0.625rem;
    line-height: 1.4;
}

.command-palette-input::placeholder {
    color: var(--text-dim);
}

.command-palette-kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    font-size: 11px;
    font-family: inherit;
    color: var(--text-dim);
    background: rgba(var(--bg-elevated-rgb), 0.7);
    border: 1px solid var(--bg-tertiary);
    border-radius: 5px;
    line-height: 1.4;
    flex-shrink: 0;
}

.command-palette-results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--bg-tertiary);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--shadow-heavy);
    max-height: 360px;
    overflow-y: auto;
    z-index: 50;
    padding: 4px 0;
    animation: command-palette-in var(--duration-fast) var(--ease-out);
}

.command-palette-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    margin: 0 4px;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-fast) ease,
                color var(--duration-fast) ease;
}

.command-palette-item:hover,
.command-palette-item.active {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.command-palette-item.active {
    background: var(--active-bg);
}

@keyframes command-palette-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Command Palette: native <dialog> wrapper (v2 portal shell) ────────
   Positions the palette as a top-anchored modal (~10vh from top) with a
   soft backdrop. Overrides UA default <dialog> chrome. .command-palette-
   results stays relative to its parent (.command-palette wrapper) so the
   absolute positioning at top: 100% still works inside the modal. */
dialog.command-palette-dialog {
    /* UA defaults strip */
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    /* Position: top-anchored, horizontally centered */
    max-width: 640px;
    width: min(640px, calc(100vw - 32px));
    margin: 10vh auto auto;
    overflow: visible;
}

dialog.command-palette-dialog::backdrop {
    background: var(--overlay-bg);
    backdrop-filter: blur(2px);
}

dialog.command-palette-dialog[open] {
    animation: command-palette-dialog-in var(--duration-fast) var(--ease-out);
}

dialog.command-palette-dialog .command-palette-wrapper {
    background: var(--bg-elevated);
    box-shadow: 0 16px 48px var(--shadow-heavy);
}

@keyframes command-palette-dialog-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Phone: command palette goes near-full-width and closer to top */
@media (max-width: 639px) {
    dialog.command-palette-dialog {
        width: calc(100vw - 16px);
        margin-top: 3vh;
    }
}

/* ── Tenant settings drawer — right-hand slide-over native <dialog> ────
   Full-height, right-anchored, slide-in. Strips UA <dialog> chrome and
   overrides max-height so the drawer fills the viewport vertically. */
dialog.tenant-settings-drawer {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    max-width: none;
    max-height: none;
    width: auto;
    height: 100vh;
    margin: 0 0 0 auto;  /* anchor right */
    inset: 0 0 0 auto;   /* right-edge anchored */
    overflow: visible;
}

dialog.tenant-settings-drawer::backdrop {
    background: var(--overlay-bg);
}

dialog.tenant-settings-drawer[open] > div {
    animation: drawer-slide-in var(--duration-normal) var(--ease-out);
}

/* Phone: drawer takes full width */
@media (max-width: 639px) {
    dialog.tenant-settings-drawer {
        inset: 0;
        margin: 0;
        width: 100vw;
    }
}

@keyframes drawer-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Touch affordances for native <dialog> modals ────────────────────
   Ensure tap targets are comfortably large on touch devices and that
   dialog backdrops respond to touch close. */
@media (pointer: coarse) {
    dialog.command-palette-dialog .command-palette-input,
    dialog.command-palette-dialog .command-palette-item {
        min-height: 44px;  /* iOS HIG minimum tap target */
    }
    dialog.tenant-settings-drawer a,
    dialog.tenant-settings-drawer button {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ========================================================================
   Design System — Typography & Density
   ======================================================================== */

/* Heading hierarchy */
.heading-page {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.heading-section {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

.heading-sub {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

/* Label/value pattern */
.label-muted {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    line-height: 1.3;
}

.value-strong {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Dense table — tighter padding, smaller font for operational data */
.table-dense th {
    padding: 6px 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.table-dense td {
    padding: 6px 12px;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.table-dense tbody tr {
    transition: background-color 0.1s ease;
}

.table-dense tbody tr:hover {
    background: var(--hover-bg);
}

/* ========================================================================
   Design System — Freshness Colour System
   ======================================================================== */

.freshness-live {
    color: var(--success);
    opacity: 1;
}

.freshness-recent {
    color: var(--success);
    opacity: 0.7;
}

.freshness-stale {
    color: var(--warning);
    opacity: 0.8;
}

.freshness-dead {
    color: var(--text-dim);
    opacity: 0.5;
}

/* ========================================================================
   Instrument Motifs — hairline grid + segmented progress
   ========================================================================

   Two primitives that carry the "industrial instrument panel" voice of the
   v2 redesign. Both are opt-in utility classes: nothing in the v1 shell
   uses them today, so they add zero visual noise until a template asks
   for them.

   Use .instrument-grid on a full-section background (a <main>, a panel,
   or a page-level wrapper) to paint a hairline 16px grid using the
   existing --grid-line token. Non-repeating, theme-aware.

   Use .segmented-bar on a <div> with --segments:N and --lit:M CSS custom
   properties (N total segments, M lit) to render a precision progress
   strip instead of a pill bar. One rule, no JS. The bar colours default
   to osiris-accent for lit and osiris-border for dim; override with
   --segment-lit-color / --segment-dim-color on the same element if you
   need status colouring (see .segmented-bar-state-* helpers below). */

.instrument-grid {
    background-image:
        linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 16px 16px;
    background-position: 0 0;
}

.instrument-grid-subtle {
    background-image:
        linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
    background-blend-mode: overlay;
    opacity: 0.6;
}

/* Light theme: reduce grid visibility further to avoid "graph paper" look */
[data-theme="light"] .instrument-grid {
    opacity: 0.7;
}

[data-theme="light"] .instrument-grid-subtle {
    opacity: 0.4;
}

/* ── Segmented progress strip ──────────────────────────────────────────
   A 10–20-segment strip that replaces pill-shaped progress bars. The
   lit count is expressed via a CSS custom property so the template can
   set it inline without extra markup:
       <div class="segmented-bar"
            style="--segments: 10; --lit: 7"></div>
   Each segment is a flex child painted via a repeating gradient; we
   don't generate individual divs because 20× DOM nodes per bar adds up
   fast in the portfolio tile grid. */
.segmented-bar {
    --segments: 10;
    --lit: 0;
    --segment-lit-color:  rgb(var(--accent-rgb));
    --segment-dim-color:  rgb(var(--bg-tertiary-rgb));
    --segment-gap: 2px;

    position: relative;
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 1px;
    overflow: hidden;
    background-image: linear-gradient(
        to right,
        var(--segment-dim-color) 0 calc((100% / var(--segments)) - var(--segment-gap)),
        transparent              calc((100% / var(--segments)) - var(--segment-gap)) calc(100% / var(--segments))
    );
    background-size: calc(100% / var(--segments)) 100%;
    background-repeat: repeat-x;
}

.segmented-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: calc((100% / var(--segments)) * var(--lit));
    background-image: linear-gradient(
        to right,
        var(--segment-lit-color) 0 calc((100% / var(--segments)) - var(--segment-gap)),
        transparent              calc((100% / var(--segments)) - var(--segment-gap)) calc(100% / var(--segments))
    );
    background-size: calc(100% / var(--segments)) 100%;
    background-repeat: repeat-x;
    transition: width var(--duration-normal) var(--ease-out);
}

/* Semantic status colourings for segmented bars */
.segmented-bar-ok       { --segment-lit-color: rgb(var(--success-rgb)); }
.segmented-bar-warn     { --segment-lit-color: rgb(var(--warning-rgb)); }
.segmented-bar-critical { --segment-lit-color: rgb(var(--error-rgb));   }
.segmented-bar-info     { --segment-lit-color: rgb(var(--info-rgb));    }

/* Compact variant for dense tile strips */
.segmented-bar-sm { height: 5px; }

/* ========================================================================
   Design System — Status Badges
   ======================================================================== */

/* Status badge container */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

/* Compact variant for table rows */
.status-badge-compact {
    gap: 4px;
    font-size: 0.6875rem;
}

/* Status indicators — accessible shapes (not just colour) */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot-sm {
    width: 6px;
    height: 6px;
}

/* Reporting — filled green circle + pulse */
.status-reporting .status-dot {
    background: var(--success);
}

.status-reporting {
    color: var(--success);
}

/* Stale — half-filled amber circle */
.status-stale .status-dot {
    background: linear-gradient(180deg, var(--warning) 50%, transparent 50%);
    border: 1.5px solid var(--warning);
    box-sizing: border-box;
}

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

/* Offline / not reporting — empty red circle */
.status-offline .status-dot {
    background: transparent;
    border: 1.5px solid var(--error);
    box-sizing: border-box;
}

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

/* Degraded — amber with down indicator */
.status-degraded .status-dot {
    background: var(--warning);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    border-radius: 0;
    width: 9px;
    height: 8px;
}

.status-degraded {
    color: var(--warning);
}

/* Unknown — grey with question pattern */
.status-unknown .status-dot {
    background: var(--text-dim);
    border: 1.5px solid var(--text-dim);
    box-sizing: border-box;
    position: relative;
}

.status-unknown {
    color: var(--text-dim);
}

/* Healthy — green with check indicator */
.status-healthy .status-dot {
    background: var(--success);
}

.status-healthy {
    color: var(--success);
}

/* Pending — blue pulsing */
.status-pending .status-dot {
    background: var(--info);
}

.status-pending {
    color: var(--info);
}

/* Freshness intensity modifiers for status badges */
.status-badge.freshness-live .status-dot { opacity: 1; }
.status-badge.freshness-recent .status-dot { opacity: 0.75; }
.status-badge.freshness-stale .status-dot { opacity: 0.55; }
.status-badge.freshness-dead .status-dot { opacity: 0.35; }

/* ========================================================================
   Design System — Badge Hierarchy
   ======================================================================== */

/* Critical — full badge with colour + icon */
.badge-critical {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge-critical-red {
    background: rgba(var(--error-rgb), 0.15);
    color: var(--error);
    border: 1px solid rgba(var(--error-rgb), 0.25);
}

.badge-critical-amber {
    background: rgba(var(--warning-rgb), 0.15);
    color: var(--warning);
    border: 1px solid rgba(var(--warning-rgb), 0.25);
}

.badge-critical-green {
    background: rgba(var(--success-rgb), 0.15);
    color: var(--success);
    border: 1px solid rgba(var(--success-rgb), 0.25);
}

.badge-critical-blue {
    background: rgba(var(--info-rgb), 0.15);
    color: var(--info);
    border: 1px solid rgba(var(--info-rgb), 0.25);
}

/* Secondary — text + subtle dot indicator */
.badge-secondary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.badge-secondary .badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Tertiary — text only, no visual badge */
.badge-tertiary {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ========================================================================
   Design System — Motion & Transitions
   ======================================================================== */

/* Pulse-live — subtle breathing animation for live indicators */
@keyframes pulseLive {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.92);
    }
}

.pulse-live {
    animation: pulseLive 2.5s ease-in-out infinite;
}

/* ── Value-changed flash ──────────────────────────────────────────────
   The single most instrument-panel-feeling micro-interaction in the
   v2 shell. When a live telemetry value updates, its cell background
   flashes the accent colour and decays back to transparent over 400ms.
   Applied by static/js/value-flash.js which watches MutationRecords
   on every `.telemetry-value[data-live]` element.

   Opt-in: only elements tagged `data-live` participate, so we never
   flash static values (the condition spine's "Outside", "Alerts", etc.
   on pages where the data is snapshot-at-render-time).

   Respects prefers-reduced-motion. */
.telemetry-value[data-live] {
    /* Reserve space for the glow background so updates don't reflow. */
    border-radius: 3px;
    padding: 0 2px;
    margin: 0 -2px;
    transition: background-color 0s;
}

.telemetry-value[data-live].flash {
    animation: telemetryFlash 400ms var(--ease-out);
}

@keyframes telemetryFlash {
    0%   { background-color: rgba(var(--accent-rgb), 0.28); }
    100% { background-color: transparent; }
}

/* Light theme: boost flash visibility (bronze on white needs more opacity) */
[data-theme="light"] .telemetry-value[data-live].flash {
    animation: telemetryFlashLight 400ms var(--ease-out);
}

@keyframes telemetryFlashLight {
    0%   { background-color: rgba(var(--accent-rgb), 0.38); }
    100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .telemetry-value[data-live].flash {
        animation: none;
    }
}

/* ── Sparkline stroke ─────────────────────────────────────────────────
   A thin accent-coloured bar underneath a readout value to mark it as
   "live / carrying real data." Applied inside condition_spine cells via
   the `sparkline` cell flag. Scales with the tile / full / system
   context through the parent cell padding.

   The stroke is a pseudo-element so it doesn't affect the DOM or flow.
   Width is fixed at 100% of the cell — when historical data is
   available in a future iteration this can become a proportional SVG. */
.sparkline-stroke {
    position: relative;
}
.sparkline-stroke::after {
    content: '';
    display: block;
    margin-top: 3px;
    height: 2px;
    width: 100%;
    border-radius: 1px;
    background: rgba(var(--accent-rgb), 0.45);
    transition: opacity 150ms var(--ease-out);
}
/* Light theme: bump opacity for contrast on white backgrounds */
[data-theme="light"] .sparkline-stroke::after {
    background: rgba(var(--accent-rgb), 0.55);
}

/* ── HTMX swap choreography ───────────────────────────────────────────
   One rule for all HTMX innerHTML swaps: a 120ms fade + 4px up. HTMX
   briefly adds `.htmx-added` to swapped content during the settle
   phase — we hook that, not a custom class, so every HTMX target gets
   the choreography automatically without per-page opt-in.

   Skipped on `tr.htmx-added` because table-row outerHTML swaps create
   a brief overlap where animating fade-in causes visible double-flicker.
   Also skipped inside canvas / svg surfaces where animating an
   SSR-replaced child would tear the canvas paint. */
.htmx-added {
    animation: htmxSwapIn var(--duration-fast) var(--ease-out);
}

tr.htmx-added,
svg .htmx-added,
canvas + .htmx-added {
    animation: none;
}

@keyframes htmxSwapIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .htmx-added {
        animation: none;
    }
}

/* ── Icon Sizing ──────────────────────────────── */
.icon-inline { width: 1.25rem; height: 1.25rem; }
.icon-badge { width: 1rem; height: 1rem; }

/* ── Layout Stability ─────────────────────────── */
[hx-get]:empty { min-height: 4rem; }
.tab-content { min-height: 20rem; }

/* Fade-in — smooth entry for HTMX content swaps */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp var(--duration-normal) var(--ease-out) both;
}

/* Transition-surface — smooth hover elevation on cards */
.transition-surface {
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.transition-surface:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--shadow-color);
}

/* Tab transition: HTMX afterSwap opacity fade */
.tab-content {
    opacity: 1;
    transition: opacity var(--duration-fast) ease;
}

.tab-content.htmx-swapping {
    opacity: 0;
}

.tab-content.htmx-settling {
    opacity: 1;
    transition: opacity var(--duration-normal) var(--ease-out);
}

/* ========================================================================
   Design System — Building Health Bar
   ======================================================================== */

.health-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.health-bar-segment {
    height: 100%;
    transition: width 0.5s var(--ease-out);
}

.health-bar-healthy { background: var(--success); }
.health-bar-degraded { background: var(--warning); }
.health-bar-critical { background: var(--error); }
.health-bar-unknown { background: var(--text-dim); }

/* Thicker variant for building overview hero */
.health-bar-lg {
    height: 8px;
    border-radius: 4px;
}

/* ========================================================================
   Design System — Attention Pattern
   ======================================================================== */

.attention-strip {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-left: 3px solid var(--warning);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    transition: border-color var(--duration-fast) ease,
                background var(--duration-fast) ease;
}

.attention-item:hover {
    background: var(--hover-bg);
    border-left-color: var(--accent);
}

.attention-item-critical {
    border-left-color: var(--error);
}

.attention-item-info {
    border-left-color: var(--info);
}

.attention-item-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--warning);
}

.attention-item-critical .attention-item-icon {
    color: var(--error);
}

.attention-item-text {
    flex: 1;
    min-width: 0;
}

.attention-item-action {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--accent);
}

/* ========================================================================
   Design System — Empty State (enhanced)
   ======================================================================== */

/* Adds to existing .empty-state rules (line ~3286) */
.empty-state-hint {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 0.75rem;
    max-width: 24rem;
    line-height: 1.5;
}

.empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1rem;
    padding: 8px 16px;
    background: var(--accent);
    color: var(--bg-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity var(--duration-fast) ease;
}

.empty-state-action:hover {
    opacity: 0.9;
}

/* ========================================================================
   Accessibility — Reduced Motion
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .pulse-live {
        animation: none !important;
        opacity: 1 !important;
    }

    .fade-in {
        animation: none !important;
        opacity: 1 !important;
    }

    .transition-surface:hover {
        transform: none !important;
    }
}