/* =====================================================================
   theme.css — theme variables + every cross-cutting override.

   Loaded LAST in <head>. Rules here beat style.css at equal specificity.

   Structure:
     1. Radius scale
     2. Theme variables (light, vivid-light, vivid-dark)
     3. Table header text
     4. Shell transparency
     5. Nav items
     6. Border removal
     7. Rounded corners
     8. Table row alternation
     9. Compactness
    10. Glass mode
    11. Theme switcher + glass toggle button
    12. Sidebar + collapse
    13. Dropdown stacking, click shield, wildcard rows
    14. Visible edges (solid themes)
    15. Visible edges (glass mode)
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  1. RADIUS SCALE — single source of truth                           */
/* ------------------------------------------------------------------ */
:root {
    --r-xs: 4px;   /* pills, badges, chips */
    --r-sm: 6px;   /* buttons, inputs, small controls */
    --r-md: 8px;   /* cards, panels, surfaces, table containers */
    --r-lg: 12px;  /* modals */
}

/* ------------------------------------------------------------------ */
/*  2. THEME VARIABLES                                                 */
/* ------------------------------------------------------------------ */

/* LIGHT */
:root,
[data-theme="light"] {
    --bg-body:    #f5f7fa;
    --bg-card:    #ffffff;
    --shadow-card: 0 2px 10px rgba(0,0,0,0.08);

    --text-primary:   #333;
    --text-heading:   #1a3c5e;
    --text-secondary: #4a5568;
    --text-muted:     #7a8899;

    --bg-search-input: #ffffff;
    --border-input:    transparent;
    --focus-border:    #1a73e8;
    --focus-shadow:    0 0 0 3px rgba(26, 115, 232, 0.14);

    --btn-primary-bg:      #1a73e8;
    --btn-primary-hover:   #1557b0;
    --btn-primary-text:    #ffffff;
    --btn-secondary-bg:    #f0f3f8;
    --btn-secondary-hover: #dde1e6;
    --btn-secondary-text:  #1a3c5e;

    --bg-stats:   #e8edf5;
    --text-stats: #1a3c5e;

    --bg-table-header:     #e8edf5;
    --text-table-header:   #1a3c5e;
    --border-table-header: transparent;
    --border-table-row:    transparent;
    --hover-row:           #f8faff;

    --badge-online-bg:      #e6f7e6;
    --badge-online-color:   #0d7a0d;
    --badge-offline-bg:     #fde8e8;
    --badge-offline-color:  #b71c1c;

    --match-username-bg:    #e3f2fd;
    --match-username-color: #0d47a1;
    --match-serial-bg:      #f3e5f5;
    --match-serial-color:   #6a1b9a;

    --metric-good:     #0d7a0d;
    --metric-info:     #1565c0;
    --metric-warning:  #e65100;
    --metric-critical: #c62828;

    --bg-modal:              #ffffff;
    --text-modal:            #1a3c5e;
    --border-modal-header:   transparent;
    --btn-modal-close-bg:    #f0f3f8;
    --btn-modal-close-hover: #dde1e6;
    --bg-modal-summary:      #f8faff;
    --border-mgmt-item:      transparent;

    --status-enabled-bg:    #e6f7e6;
    --status-enabled-color: #0d7a0d;
    --status-disabled-bg:    #fde8e8;
    --status-disabled-color: #b71c1c;
    --status-online-bg:     #e6f7e6;
    --status-online-color:  #0d7a0d;
    --status-offline-bg:    #fde8e8;
    --status-offline-color: #b71c1c;
    --status-normal-bg:     #e3f2fd;
    --status-normal-color:  #0d47a1;
    --status-insync-bg:     #e8f5e9;
    --status-insync-color:  #1b5e20;
    --status-los-bg:        #fce4ec;
    --status-los-color:     #b71c1c;

    --error-bg:    #fde8e8;
    --error-color: #b71c1c;

    --alert-warning-bg:     #fff8e1;
    --alert-warning-color:  #7a5c00;
    --alert-warning-border: transparent;

    --manage-accent:       #7b61c4;
    --manage-accent-hover: #563d9b;
    --manage-accent-bg:    rgba(123, 97, 196, 0.15);

    --live-accent:         #f9a825;
    --live-accent-hover:   #e65100;
    --live-accent-bg:      rgba(249, 168, 37, 0.15);

    --chart-tooltip-bg:      rgba(28, 32, 38, 0.94);
    --chart-tooltip-text:    #ffffff;
    --chart-tooltip-muted:   #c9d1d9;
    --chart-tooltip-divider: rgba(255, 255, 255, 0.15);
    --chart-guide-line:      rgba(120, 120, 120, 0.85);
    --chart-grid-line:       transparent;

    --live-dot-color: #0d7a0d;
    --live-dot-glow:  rgba(13, 122, 13, 0.60);

    --bg-example-tag:    #e8edf5;
    --hover-example-tag: #d0d9e8;

    --live-value-online:  #0d7a0d;
    --live-value-offline: #b71c1c;

    --bg-theme-btn:            transparent;
    --border-theme-btn:        transparent;
    --text-theme-btn:          #4a5568;
    --bg-theme-btn-active:     #1a73e8;
    --text-theme-btn-active:   #ffffff;
    --border-theme-btn-active: transparent;

    --tab-bg:             #e8edf5;
    --tab-active-bg:      #ffffff;
    --tab-text:           #4a5568;
    --tab-active-text:    #1a3c5e;
    --tab-border:         transparent;
    --clause-bg:          #f8faff;
    --clause-border:      transparent;
    --chip-bg:            #e3f2fd;
    --chip-text:          #0d47a1;
    --select-bg:          #ffffff;
    --select-border:      transparent;
    --select-disabled-bg: #f0f3f8;
    --path-arrow:         #7a8899;

    --glass-bg:     rgba(255, 255, 255, 0.58);
    --glass-blur:   22px;
    --glass-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    --glass-glow-1: rgba(26, 115, 232, 0.16);
    --glass-glow-2: rgba(255, 138, 0, 0.11);

    --border-subtle: color-mix(in srgb, var(--text-heading) 14%, transparent);
    --border-strong: color-mix(in srgb, var(--text-heading) 28%, transparent);
}

/* VIVID LIGHT */
[data-theme="vivid-light"] {
    --bg-body:    #ffeedd;
    --bg-card:    #ffffff;
    --shadow-card: 0 4px 18px rgba(255, 87, 34, 0.10);

    --text-primary:   #1a0033;
    --text-heading:   #b8005c;
    --text-secondary: #3a1a5a;
    --text-muted:     #6a4a89;

    --bg-search-input: #f0e0ff;
    --border-input:    transparent;
    --focus-border:    #ff4400;
    --focus-shadow:    0 0 0 3px rgba(255, 68, 0, 0.32);

    --btn-primary-bg:      #ff4400;
    --btn-primary-hover:   #e63c00;
    --btn-primary-text:    #ffffff;
    --btn-secondary-bg:    #e0c8ff;
    --btn-secondary-hover: #d0b0f0;
    --btn-secondary-text:  #3a1a5a;

    --bg-stats:   #6600cc;
    --text-stats: #ffffff;

    --bg-table-header:     #cc0066;
    --text-table-header:   #ffffff;
    --border-table-header: transparent;
    --border-table-row:    transparent;
    --hover-row:           #ffe6cc;

    --badge-online-bg:      #00cc44;
    --badge-online-color:   #ffffff;
    --badge-offline-bg:     #ff2244;
    --badge-offline-color:  #ffffff;

    --match-username-bg:    #0066ff;
    --match-username-color: #ffffff;
    --match-serial-bg:      #cc00ff;
    --match-serial-color:   #ffffff;

    --metric-good:     #00a040;
    --metric-info:     #0066ff;
    --metric-warning:  #ff8800;
    --metric-critical: #dd0033;

    --bg-modal:              #ffffff;
    --text-modal:            #1a0033;
    --border-modal-header:   transparent;
    --btn-modal-close-bg:    #f0e0ff;
    --btn-modal-close-hover: #e0c8ff;
    --bg-modal-summary:      #f8ecff;
    --border-mgmt-item:      transparent;

    --status-enabled-bg:    #00cc44;
    --status-enabled-color: #ffffff;
    --status-disabled-bg:    #ff2244;
    --status-disabled-color: #ffffff;
    --status-online-bg:     #00cc44;
    --status-online-color:  #ffffff;
    --status-offline-bg:    #ff2244;
    --status-offline-color: #ffffff;
    --status-normal-bg:     #0066ff;
    --status-normal-color:  #ffffff;
    --status-insync-bg:     #00d4aa;
    --status-insync-color:  #003d33;
    --status-los-bg:        #ff2244;
    --status-los-color:     #ffffff;

    --error-bg:    #ffe0e0;
    --error-color: #990022;

    --alert-warning-bg:     #fff2cc;
    --alert-warning-color:  #5a3300;
    --alert-warning-border: transparent;

    --manage-accent:       #cc00ff;
    --manage-accent-hover: #aa00dd;
    --manage-accent-bg:    rgba(204, 0, 255, 0.14);

    --live-accent:         #ff8800;
    --live-accent-hover:   #e67700;
    --live-accent-bg:      rgba(255, 136, 0, 0.14);

    --chart-tooltip-bg:      rgba(26, 0, 51, 0.96);
    --chart-tooltip-text:    #ffffff;
    --chart-tooltip-muted:   #d0b8e6;
    --chart-tooltip-divider: rgba(255, 255, 255, 0.28);
    --chart-guide-line:      rgba(204, 0, 102, 0.75);
    --chart-grid-line:       transparent;

    --live-dot-color: #00cc44;
    --live-dot-glow:  rgba(0, 204, 68, 0.55);

    --bg-example-tag:    #f0e0ff;
    --hover-example-tag: #e0c8ff;

    --live-value-online:  #00a040;
    --live-value-offline: #dd0033;

    --bg-theme-btn:            transparent;
    --border-theme-btn:        transparent;
    --text-theme-btn:          #3a1a5a;
    --bg-theme-btn-active:     #cc0066;
    --text-theme-btn-active:   #ffffff;
    --border-theme-btn-active: transparent;

    --tab-bg:             #f0e0ff;
    --tab-active-bg:      #ffffff;
    --tab-text:           #5a3a7a;
    --tab-active-text:    #b8005c;
    --tab-border:         transparent;
    --clause-bg:          #f8ecff;
    --clause-border:      transparent;
    --chip-bg:            #cc0066;
    --chip-text:          #ffffff;
    --select-bg:          #f0e0ff;
    --select-border:      transparent;
    --select-disabled-bg: #e6d0f5;
    --path-arrow:         #6a4a89;

    --glass-bg:     rgba(255, 255, 255, 0.60);
    --glass-blur:   22px;
    --glass-shadow: 0 16px 48px rgba(204, 0, 102, 0.16);
    --glass-glow-1: rgba(204, 0, 102, 0.20);
    --glass-glow-2: rgba(102, 0, 204, 0.16);

    --border-subtle: color-mix(in srgb, var(--text-heading) 20%, transparent);
    --border-strong: color-mix(in srgb, var(--text-heading) 38%, transparent);
}

/* VIVID DARK */
[data-theme="vivid-dark"] {
    --bg-body:    #0d0020;
    --bg-card:    #1a0033;
    --shadow-card: 0 4px 20px rgba(255, 68, 204, 0.10);

    --text-primary:   #ffffcc;
    --text-heading:   #ff99dd;
    --text-secondary: #d0b8ff;
    --text-muted:     #9079b5;

    --bg-search-input: #2a0050;
    --border-input:    transparent;
    --focus-border:    #ff66cc;
    --focus-shadow:    0 0 0 3px rgba(255, 102, 204, 0.38);

    --btn-primary-bg:      #ff4400;
    --btn-primary-hover:   #ff5500;
    --btn-primary-text:    #ffffff;
    --btn-secondary-bg:    #4a2a6a;
    --btn-secondary-hover: #5a3a7a;
    --btn-secondary-text:  #e0c8ff;

    --bg-stats:   #6600ff;
    --text-stats: #ffffff;

    --bg-table-header:     #a000cc;
    --text-table-header:   #ffffff;
    --border-table-header: transparent;
    --border-table-row:    transparent;
    --hover-row:           #2a0050;

    --badge-online-bg:      #00ff88;
    --badge-online-color:   #001a10;
    --badge-offline-bg:     #ff3366;
    --badge-offline-color:  #ffffff;

    --match-username-bg:    #00ccff;
    --match-username-color: #001a33;
    --match-serial-bg:      #ff66cc;
    --match-serial-color:   #1a0033;

    --metric-good:     #00ff88;
    --metric-info:     #66ccff;
    --metric-warning:  #ffaa33;
    --metric-critical: #ff4488;

    --bg-modal:              #1a0033;
    --text-modal:            #ffffcc;
    --border-modal-header:   transparent;
    --btn-modal-close-bg:    #2a0050;
    --btn-modal-close-hover: #3a0070;
    --bg-modal-summary:      #2a0050;
    --border-mgmt-item:      transparent;

    --status-enabled-bg:    #00ff88;
    --status-enabled-color: #001a10;
    --status-disabled-bg:    #ff3366;
    --status-disabled-color: #ffffff;
    --status-online-bg:     #00ff88;
    --status-online-color:  #001a10;
    --status-offline-bg:    #ff3366;
    --status-offline-color: #ffffff;
    --status-normal-bg:     #00ccff;
    --status-normal-color:  #001a33;
    --status-insync-bg:     #00ffaa;
    --status-insync-color:  #001a10;
    --status-los-bg:        #ff3366;
    --status-los-color:     #ffffff;

    --error-bg:    #4d0018;
    --error-color: #ff99bb;

    --alert-warning-bg:     rgba(255, 170, 51, 0.20);
    --alert-warning-color:  #ffcc66;
    --alert-warning-border: transparent;

    --manage-accent:       #cc66ff;
    --manage-accent-hover: #dd88ff;
    --manage-accent-bg:    rgba(204, 102, 255, 0.22);

    --live-accent:         #ffaa33;
    --live-accent-hover:   #ffbb55;
    --live-accent-bg:      rgba(255, 170, 51, 0.20);

    --chart-tooltip-bg:      rgba(13, 0, 32, 0.97);
    --chart-tooltip-text:    #ffffcc;
    --chart-tooltip-muted:   #b8a0ff;
    --chart-tooltip-divider: rgba(255, 102, 204, 0.30);
    --chart-guide-line:      rgba(255, 102, 204, 0.85);
    --chart-grid-line:       transparent;

    --live-dot-color: #00ff88;
    --live-dot-glow:  rgba(0, 255, 136, 0.55);

    --bg-example-tag:    #2a0050;
    --hover-example-tag: #3a0070;

    --live-value-online:  #00ff88;
    --live-value-offline: #ff4488;

    --bg-theme-btn:            transparent;
    --border-theme-btn:        transparent;
    --text-theme-btn:          #d0b8ff;
    --bg-theme-btn-active:     #cc00ff;
    --text-theme-btn-active:   #ffffff;
    --border-theme-btn-active: transparent;

    --tab-bg:             #1a0033;
    --tab-active-bg:      #2a0050;
    --tab-text:           #9079b5;
    --tab-active-text:    #ff99dd;
    --tab-border:         transparent;
    --clause-bg:          #2a0050;
    --clause-border:      transparent;
    --chip-bg:            #cc00ff;
    --chip-text:          #ffffff;
    --select-bg:          #1a0033;
    --select-border:      transparent;
    --select-disabled-bg: #2a0050;
    --path-arrow:         #9079b5;

    --glass-bg:     rgba(26, 0, 51, 0.58);
    --glass-blur:   24px;
    --glass-shadow: 0 16px 48px rgba(255, 68, 204, 0.20);
    --glass-glow-1: rgba(255, 102, 204, 0.22);
    --glass-glow-2: rgba(204, 0, 255, 0.18);

    --border-subtle: color-mix(in srgb, var(--text-heading) 22%, transparent);
    --border-strong: color-mix(in srgb, var(--text-heading) 42%, transparent);
}

/* ------------------------------------------------------------------ */
/*  3. TABLE HEADER TEXT                                               */
/* ------------------------------------------------------------------ */
.table-container thead th,
.table-container thead tr th,
.table-container th {
    color: var(--text-table-header);
}
.table-container thead th.sortable:hover,
.table-container thead th.sort-asc,
.table-container thead th.sort-desc,
.table-container thead th.sort-asc .sort-ind,
.table-container thead th.sort-desc .sort-ind {
    color: var(--text-table-header);
}
.table-container thead th .sort-ind {
    color: color-mix(in srgb, var(--text-table-header) 55%, transparent);
}

/* ------------------------------------------------------------------ */
/*  4. SHELL TRANSPARENCY                                              */
/* ------------------------------------------------------------------ */
.app-header {
    height: 48px;
    padding: 0 14px;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.sidebar {
    padding: 8px 8px;
    gap: 2px;
    background: transparent;
    border: none;
    box-shadow: none;
}
.work-area {
    padding: 10px 14px 14px;
    background: transparent;
    border: none;
    box-shadow: none;
}
.app-body {
    display: grid;
    grid-template-columns: 210px 1fr;
    height: calc(100vh - 48px);
    background: transparent;
    transition: grid-template-columns 0.22s ease;
}

.brand-name { color: var(--text-heading); letter-spacing: 0.3px; }
.brand-icon { display: inline-flex; align-items: center; color: var(--focus-border); }

/* ------------------------------------------------------------------ */
/*  5. NAV ITEMS                                                       */
/* ------------------------------------------------------------------ */
.nav-item {
    padding: 7px 12px;
    gap: 10px;
    font-size: 12px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.nav-item:hover {
    background: color-mix(in srgb, var(--bg-example-tag) 80%, transparent);
}
.nav-item.active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
}
.nav-icon {
    width: 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.nav-icon svg { display: block; }

.sub-tabs {
    margin: 0 0 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-table-header) 40%, transparent);
}

/* ------------------------------------------------------------------ */
/*  6. BORDER REMOVAL — every element paints without an edge.          */
/*     §14 / §15 re-assert the edges that matter for legibility.       */
/* ------------------------------------------------------------------ */
thead, td, th,
.modal-header, .modal-summary, .modal,
.sub-tabs, .adv-topbar, .clause-path, .clause,
.mgmt-item, .mgmt-kv, .mgmt-actions, .mgmt-section-title, .mgmt-popup-header,
.live-item, .live-timestamp, .cred-row,
.prov-catalog-row, .prov-history-header, .prov-intent-row,
.prov-intent-target, .prov-step, .prov-cb-banner,
.timeline-header, .timeline-pager, .timeline-modal, .tl-badge,
.prov-target-card, .prov-cb-list, .prov-wc-row, .prov-dd-panel,
.breadcrumb-link, .prov-tab, .prov-tab.active,
.search-box input, .search-box input:focus,
.adv-input, .adv-select, .adv-input:focus, .adv-select:focus,
.btn-secondary, .btn-primary, .btn-secondary:hover, .btn-primary:hover,
.col-picker-btn, .col-picker-panel, .col-picker-reset,
.prov-dd-btn, .prov-dd-btn:hover,
.prov-quick-btn, .prov-quick-btn:hover,
.prov-quick-clear, .prov-quick-clear:hover,
.prov-dt-date, .prov-dt-time, .prov-live-toggle,
.mgmt-action-btn, .mgmt-toggle-btn, .mgmt-edit-input,
.mgmt-edit-cancel, .mgmt-edit-save,
.ident-name-input, .ident-name-cancel, .ident-name-save,
.toolbar-details-btn, .toolbar-icon-btn, .toolbar-toggle, .toolbar-toggle-btn,
.toolbar-action-btn, .theme-btn, .glass-btn, .sidebar-toggle,
.chart-tooltip {
    border: none;
}
thead th,
thead tr th,
.prov-step,
.prov-cb-banner,
.prov-intent-target,
.prov-intent-target.is-active {
    border-left: none;
    border-right: none;
}

/* ------------------------------------------------------------------ */
/*  7. ROUNDED CORNERS — every rule reads the radius scale             */
/* ------------------------------------------------------------------ */

/* Surfaces — 8px */
.table-container,
.stats,
.search-box,
.adv-builder,
.clause,
.adv-summary,
.prov-toolbar,
.prov-builder,
.prov-filter,
.prov-history,
.prov-target-card,
.prov-wc-row,
.prov-dd-panel,
.col-picker-panel,
.prov-cb-list,
.prov-cb-banner,
.prov-intent-expanded,
.prov-steps-list,
.prov-intent-target,
.prov-catalog-row,
.prov-dd-empty-state,
.prov-dt-line,
.cred-row,
.nav-item,
.opt-chip,
.sidebar-toggle,
.theme-switcher,
.olt-action-grid .btn-primary,
.olt-action-grid .btn-secondary {
    border-radius: var(--r-md);
}

/* Modals — 12px */
.modal,
.modal.modal-narrow,
.timeline-modal,
.onu-dash-shell,
.onu-full-modal,
.onu-mgmt-modal {
    border-radius: var(--r-lg);
}

/* Controls — 6px */
.btn-primary,
.btn-secondary,
.btn-sm,
.search-box input,
.search-box button,
.adv-input,
.adv-select,
.prov-dd-btn,
.prov-dd-sync-btn,
.prov-wc-sync-btn,
.prov-quick-btn,
.prov-quick-clear,
.prov-dt-date,
.prov-dt-time,
.prov-live-toggle,
.prov-copy-btn,
.prov-intent-cancel,
.prov-target-remove,
.mgmt-edit-input,
.mgmt-edit-save,
.mgmt-edit-cancel,
.mgmt-toggle-btn,
.mgmt-action-btn,
.ident-name-input,
.ident-name-save,
.ident-name-cancel,
.pen-btn,
.theme-btn,
.glass-btn,
.toolbar-details-btn,
.toolbar-icon-btn,
.toolbar-action-btn,
.toolbar-toggle,
.modal-close,
.onu-modal-back,
.timeline-close,
.timeline-row,
.tl-pg-num,
.tl-pg-nav,
.col-picker-btn,
.clause-remove,
.chart-tooltip {
    border-radius: var(--r-sm);
}

/* Pills — 4px */
.badge,
.status-badge,
.match-badge,
.flag,
.ident-status,
.ident-unprov,
.prov-intent-state,
.prov-intent-target-state,
.prov-intent-loc,
.prov-intent-loc-tag,
.prov-cb-lock,
.chip,
.tl-badge,
.example-tag {
    border-radius: var(--r-xs);
}

/* Table: clip the inner table to the container's radius. */
.table-container table { border-radius: var(--r-md); overflow: hidden; }

/* ------------------------------------------------------------------ */
/*  8. TABLE ROW ALTERNATION                                           */
/* ------------------------------------------------------------------ */
tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--hover-row) 60%, transparent);
}
tbody tr:hover {
    background: var(--hover-row);
}
[data-theme="vivid-light"] tbody tr:nth-child(even) {
    background: rgba(204, 0, 102, 0.05);
}
[data-theme="vivid-dark"] tbody tr:nth-child(even) {
    background: rgba(255, 102, 204, 0.06);
}

/* ------------------------------------------------------------------ */
/*  9. COMPACTNESS                                                     */
/* ------------------------------------------------------------------ */
.panel-header       { margin: 0 0 10px; padding: 0; }
.panel-header h2    { font-size: 16px; }
.sub-tab            { padding: 6px 14px; font-size: 11px; }

.search-box         { padding: 10px 12px; margin-bottom: 10px; gap: 8px; }
.search-box input   { padding: 8px 12px; font-size: 13px; }
.search-box button  { padding: 8px 20px; font-size: 13px; }

.adv-builder        { padding: 12px; margin-bottom: 10px; }
.adv-topbar         { margin-bottom: 8px; padding-bottom: 6px; }
.clause             { padding: 10px 12px; margin-bottom: 8px; }
.adv-summary        { padding: 8px 12px; margin-bottom: 8px; font-size: 11px; }

.stats              { padding: 6px 12px; margin-bottom: 8px; font-size: 11px; }
.table-container table { font-size: 11px; }
table th            { padding: 8px 12px; font-size: 11px; }
table td            { padding: 7px 12px; }

.modal              { padding: 16px; }
.modal-header       { margin-bottom: 10px; padding-bottom: 10px; }
.modal-summary      { padding: 10px 14px; margin-bottom: 12px; }
.mgmt-item          { padding: 4px 0; }
.live-item          { padding: 4px 0; }

.welcome            { padding: 28px 16px; }
.welcome .icon      { font-size: 42px; margin-bottom: 10px; }
.welcome-title      { font-size: 14px; }
.no-results         { padding: 20px; }
.loading            { padding: 20px; }

.btn-primary        { padding: 8px 20px; font-size: 12px; }
.btn-secondary      { padding: 6px 14px; font-size: 11px; }
.btn-sm             { padding: 4px 10px; font-size: 10px; }

.prov-toolbar       { padding: 6px 10px; margin-bottom: 6px; }
.prov-builder       { padding: 10px 12px; margin-bottom: 6px; }
.prov-filter        { padding: 6px 10px; margin-bottom: 6px; }
.prov-history       { padding: 8px 12px; }
.prov-target-card   { padding: 6px 8px; }
.prov-intent-header { padding: 3px 5px; margin: -3px -5px 1px -5px; gap: 6px; }
.prov-dt-line       { padding: 4px 8px; margin: 3px 0 4px; }
.prov-dt-line > input,
.prov-dt-line > button { height: 24px; font-size: 11px; padding: 0 8px; }

/* ------------------------------------------------------------------ */
/*  10. GLASS MODE                                                     */
/* ------------------------------------------------------------------ */

/* Body — two soft glows behind every translucent surface. */
body {
    background:
        radial-gradient(1200px 800px at 6% -10%, var(--glass-glow-1, transparent), transparent 60%),
        radial-gradient(1000px 900px at 105% 108%, var(--glass-glow-2, transparent), transparent 60%),
        var(--bg-body);
    background-attachment: fixed;
}

/* Header and sidebar stay chrome-free. */
.app-header,
.sidebar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Work area — the one large glass pane. */
html[data-glass="on"] .work-area {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: none;
    border-radius: var(--r-lg) 0 0 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 -1px 0 rgba(0, 0, 0, 0.04);
    margin: 0;
    padding: 12px 16px 16px;
}

/* Panels transparent. */
html[data-glass="on"] .panel,
html[data-glass="on"] .sub-panel {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
}

/* Inner content surfaces — soft translucent layer. */
html[data-glass="on"] .table-container,
html[data-glass="on"] .search-box,
html[data-glass="on"] .adv-builder,
html[data-glass="on"] .clause,
html[data-glass="on"] .prov-builder,
html[data-glass="on"] .prov-toolbar,
html[data-glass="on"] .prov-filter,
html[data-glass="on"] .prov-history,
html[data-glass="on"] .prov-target-card,
html[data-glass="on"] .prov-wc-row,
html[data-glass="on"] .prov-dd-btn,
html[data-glass="on"] .cred-row,
html[data-glass="on"] .col-picker-btn {
    background: color-mix(in srgb, var(--bg-card) 30%, transparent);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: none;
    box-shadow: none;
}

/* Stats and summary banner — keep their brand color so their text
   stays legible. */
html[data-glass="on"] .stats,
html[data-glass="on"] .adv-summary {
    background: color-mix(in srgb, var(--bg-stats) 72%, transparent);
    color: var(--text-stats);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: none;
    box-shadow: none;
}

/* Floating menus — dense enough to read against the work-area glow. */
html[data-glass="on"] .prov-dd-panel,
html[data-glass="on"] .col-picker-panel {
    background: color-mix(in srgb, var(--bg-modal) 92%, transparent);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: none;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
}

/* Table body — faint bands. */
html[data-glass="on"] .table-container table tbody tr {
    background: color-mix(in srgb, var(--bg-card) 20%, transparent);
}
html[data-glass="on"] .table-container table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--bg-table-header) 12%, transparent);
}
html[data-glass="on"] .table-container table tbody tr:hover {
    background: color-mix(in srgb, var(--hover-row) 55%, transparent);
}

/* Table header — no backdrop-filter. A promoted thead escapes the
   container's rounded corner in Chromium; the container blurs anyway,
   so the thead just sits on a translucent tint. */
html[data-glass="on"] .table-container thead,
html[data-glass="on"] .table-container thead tr,
html[data-glass="on"] .table-container thead th {
    background: color-mix(in srgb, var(--bg-table-header) 55%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Form controls — translucent fills. */
html[data-glass="on"] input,
html[data-glass="on"] select,
html[data-glass="on"] textarea {
    background: color-mix(in srgb, var(--select-bg) 45%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
html[data-glass="on"] input:focus,
html[data-glass="on"] select:focus,
html[data-glass="on"] textarea:focus {
    background: color-mix(in srgb, var(--select-bg) 70%, transparent);
    box-shadow: var(--focus-shadow);
}

/* Modals — overlay blurs the page; modal is a tinted glass pane. */
html[data-glass="on"] .modal-overlay,
html[data-glass="on"] .timeline-overlay,
html[data-glass="on"] .onu-full-overlay {
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}
html[data-glass="on"] .modal,
html[data-glass="on"] .timeline-modal,
html[data-glass="on"] .onu-dash-shell {
    background: var(--glass-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Modal internal sections transparent so the pane flows through. */
html[data-glass="on"] .modal-header,
html[data-glass="on"] .modal-summary,
html[data-glass="on"] .mgmt-popup-header,
html[data-glass="on"] .mgmt-popup-body,
html[data-glass="on"] .mgmt-cols,
html[data-glass="on"] .mgmt-col,
html[data-glass="on"] .mgmt-kv,
html[data-glass="on"] .mgmt-item,
html[data-glass="on"] .mgmt-section-title,
html[data-glass="on"] .mgmt-actions,
html[data-glass="on"] .onu-dash-header,
html[data-glass="on"] .onu-dash-toolbar,
html[data-glass="on"] .onu-dash-chart-pane,
html[data-glass="on"] .onu-dash-identity,
html[data-glass="on"] .timeline-header,
html[data-glass="on"] .timeline-body,
html[data-glass="on"] .timeline-pager {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
}

/* Chart tooltip — its own blur so it reads over the chart. */
html[data-glass="on"] .chart-tooltip {
    background: color-mix(in srgb, var(--chart-tooltip-bg) 82%, transparent);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Chrome buttons — read as interactive chips in both glass and solid
   modes. Uses the modal-summary tint (denser than bg-card) so the
   button stays visible against the transparent header. */
html[data-glass="on"] .theme-btn,
html[data-glass="on"] .glass-btn,
html[data-glass="on"] .sidebar-toggle {
    background: color-mix(in srgb, var(--bg-modal-summary) 70%, transparent);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
}

/* --- Glass-mode corner enforcement -------------------------------- */
/*  Sticky <th> + z-index promotes thead to its own compositor layer.
    When .table-container also has a backdrop-filter, the container is
    promoted too, and Chromium's border-radius + overflow-x:auto
    clipping does NOT apply to promoted children. clip-path on the
    container IS propagated to composited children, so it's the only
    reliable fix.                                                    */

html[data-glass="on"] .table-container {
    border-radius: var(--r-md);
    clip-path: inset(0 round var(--r-md));
    isolation: isolate;
}
html[data-glass="on"] .modal,
html[data-glass="on"] .timeline-modal,
html[data-glass="on"] .onu-dash-shell {
    border-radius: var(--r-lg);
    clip-path: inset(0 round var(--r-lg));
}
html[data-glass="on"] .col-picker-panel,
html[data-glass="on"] .prov-dd-panel {
    border-radius: var(--r-md);
    clip-path: inset(0 round var(--r-md));
}

/* ------------------------------------------------------------------ */
/*  11. THEME SWITCHER + GLASS TOGGLE BUTTON                           */
/* ------------------------------------------------------------------ */
.header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: color-mix(in srgb, var(--bg-card) 78%, var(--bg-body));
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.theme-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    color: var(--text-theme-btn);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
}
.theme-btn svg {
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.10));
}
.theme-btn:hover {
    background: color-mix(in srgb, var(--hover-row) 70%, transparent);
    transform: translateY(-1px);
}
.theme-btn[aria-pressed="true"] {
    background: var(--btn-primary-bg);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--btn-primary-bg) 45%, transparent);
}
.theme-btn[data-theme-value="light"] svg {
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.35));
}
.theme-btn[data-theme-value="vivid-light"] svg {
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.55));
}
.theme-btn[data-theme-value="vivid-dark"] svg {
    filter: drop-shadow(0 0 6px rgba(200, 132, 252, 0.60));
}
.theme-btn[aria-pressed="true"] svg {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)) brightness(1.15);
}

.glass-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: color-mix(in srgb, var(--bg-card) 88%, var(--bg-body));
    color: var(--text-theme-btn);
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.glass-btn:hover {
    background: color-mix(in srgb, var(--hover-row) 90%, var(--bg-card));
    color: var(--text-heading);
    transform: translateY(-1px);
}
.glass-btn-on {
    background: var(--bg-theme-btn-active);
    color: var(--text-theme-btn-active);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--bg-theme-btn-active) 45%, transparent);
}
.glass-icon {
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/*  12. SIDEBAR + COLLAPSE                                             */
/* ------------------------------------------------------------------ */
.sidebar {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    margin: auto 0 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.sidebar-toggle:hover {
    background: color-mix(in srgb, var(--hover-row) 70%, transparent);
    color: var(--text-heading);
}
.sidebar-toggle svg { display: block; pointer-events: none; }

html[data-sidebar="collapsed"] .app-body {
    grid-template-columns: 56px 1fr;
}
/*html[data-sidebar="collapsed"] .nav-label {
    display: none;
}
html[data-sidebar="collapsed"] .nav-item,
html[data-sidebar="collapsed"] .sidebar-toggle {
    justify-content: center;
    padding: 8px;
    gap: 0;
}*/
html[data-sidebar="collapsed"] .nav-icon {
    width: 20px;
}

/* ------------------------------------------------------------------ */
/*  13. DROPDOWN STACKING, CLICK SHIELD, WILDCARD ROWS                 */
/* ------------------------------------------------------------------ */
.prov-builder { position: relative; z-index: 10; }
.prov-filter,
.prov-history { position: relative; z-index: 1; }

.prov-target-card { position: relative; }
.prov-target-card.has-open-dd {
    z-index: 100;
    overflow: visible;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
}

.prov-dd.open {
    position: relative;
    z-index: 200;
}
.prov-dd-panel {
    z-index: 210;
}

/* `:has()` fallbacks for browsers that support them. */
.prov-target-card:has(.prov-dd.open) {
    z-index: 100;
    overflow: visible;
}
.prov-builder:has(.prov-dd.open) {
    z-index: 20;
}
.col-picker-wrap { position: relative; z-index: 1; }
.col-picker-wrap:has(.col-picker-panel.active) { z-index: 100; }
.col-picker-panel.active { z-index: 200; }

/* While a dropdown is open, block clicks on sibling cards, sibling
   rows, and the sections below the builder. */
.prov-target-card.dd-sibling,
.prov-filter.dd-sibling,
.prov-history.dd-sibling,
.prov-tab-panel.dd-sibling,
.prov-wc-row.dd-sibling {
    pointer-events: none;
    user-select: none;
}

/* The panel itself must always accept clicks. */
.prov-dd-panel,
.prov-dd-panel * {
    pointer-events: auto;
}

/* Wildcard rows — one row per OLT inside a single card. The row is
   the sibling unit that decides paint order in glass mode. */
.prov-wc-row { position: relative; }
.prov-wc-row.has-open-dd {
    z-index: 100;
    overflow: visible;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.prov-wc-row.has-open-dd .prov-dd.open  { z-index: 200; }
.prov-wc-row.has-open-dd .prov-dd-panel { z-index: 210; }

/* ------------------------------------------------------------------ */
/*  14. VISIBLE EDGES — solid themes                                   */
/*                                                                     */
/*  §6 strips borders from every surface so glass mode composites      */
/*  cleanly. That leaves solid themes with no visual partition between */
/*  surfaces. This section paints a 1px edge back on, reading its      */
/*  color from the per-theme --border-subtle / --border-strong pair.   */
/*                                                                     */
/*  §15 re-asserts the same edges under html[data-glass="on"], which   */
/*  outranks these rules by specificity.                               */
/* ------------------------------------------------------------------ */

/* --- Containers: 1px subtle edge --------------------------------- */
.search-box,
.adv-builder,
.stats,
.adv-summary,
.clause,
.table-container,
.prov-toolbar,
.prov-builder,
.prov-filter,
.prov-history,
.prov-target-card,
.prov-wc-row,
.prov-catalog-row,
.prov-intent-expanded,
.prov-intent-target,
.prov-step,
.prov-dd-empty-state,
.prov-dd-panel,
.prov-cb-list,
.prov-cb-banner,
.prov-dt-line,
.cred-row,
.modal,
.modal.modal-narrow,
.timeline-modal,
.col-picker-panel,
.onu-mgmt-modal,
.onu-dash-shell,
.onu-full-modal,
.chart-tooltip,
.opt-chip,
.prov-intent-loc,
.prov-wc-empty-hint {
    border: 1px solid var(--border-subtle);
}

/* Header/body dividers inside containers — a hairline, not a box. */
/* Header/body dividers inside containers — a hairline, not a box.
   Modal headers are excluded: they sit at the very top of their modal,
   so a top border reads as a stray line above the title. */
.prov-history-header,
.timeline-pager,
.prov-intent-row + .prov-intent-row,
.mgmt-kv:not(:last-child),
.mgmt-actions {
    border-top: 1px solid var(--border-subtle);
}

/* --- Interactive controls: 1px stronger edge --------------------- */
.search-box input,
.adv-input,
.adv-select,
.btn-primary,
.btn-secondary,
.btn-sm,
.prov-dd-btn,
.prov-quick-btn,
.prov-quick-clear,
.prov-dt-date,
.prov-dt-time,
.prov-live-toggle,
.col-picker-btn,
.prov-copy-btn,
.prov-intent-cancel,
.prov-target-remove,
.mgmt-action-btn,
.mgmt-toggle-btn,
.mgmt-edit-input,
.mgmt-edit-save,
.mgmt-edit-cancel,
.ident-name-input,
.ident-name-save,
.ident-name-cancel,
.pen-btn,
.toolbar-details-btn,
.toolbar-icon-btn,
.toolbar-action-btn,
.toolbar-toggle,
.toolbar-toggle-btn,
.modal-close,
.onu-modal-back,
.timeline-close,
.tl-pg-num,
.tl-pg-nav,
.clause-remove,
.prov-dd-sync-btn,
.prov-wc-sync-btn,
.theme-switcher,
.theme-btn,
.glass-btn,
.sidebar-toggle {
    border: 1px solid var(--border-strong);
}

/* Hover variants must re-declare the border or §6's rule wins on hover. */
.btn-primary:hover,
.btn-secondary:hover,
.prov-dd-btn:hover:not(.disabled),
.prov-quick-btn:hover,
.prov-quick-clear:hover,
.col-picker-btn:hover,
.toolbar-details-btn:hover,
.toolbar-icon-btn:hover,
.toolbar-action-btn:hover,
.toolbar-toggle-btn:hover,
.mgmt-action-btn:hover,
.mgmt-toggle-btn:hover:not(:disabled),
.prov-copy-btn:hover,
.prov-intent-cancel:hover,
.clause-remove:hover,
.tl-pg-num:hover,
.tl-pg-nav:hover:not(:disabled),
.onu-modal-back:hover,
.modal-close:hover,
.timeline-close:hover,
.sidebar-toggle:hover,
.theme-btn:hover,
.glass-btn:hover,
.prov-target-remove:hover:not(:disabled),
.prov-dd-sync-btn:hover:not(:disabled),
.prov-wc-sync-btn:hover:not(:disabled) {
    border: 1px solid var(--border-strong);
}

/* Focus states: paint the full border shorthand, not just border-color,
   because §6 set border-style: none via the :focus selector. Without
   the shorthand here, focusing an input removes its edge entirely. */
.adv-input:focus,
.adv-select:focus,
.search-box input:focus,
.prov-dd-btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    border: 1px solid var(--focus-border);
}

/* ------------------------------------------------------------------ */
/*  15. VISIBLE EDGES — glass mode                                     */
/*                                                                     */
/*  §10 strips borders behind html[data-glass="on"], which outranks    */
/*  §14 by specificity. These rules re-assert the same edges so glass  */
/*  mode still partitions surfaces.                                    */
/* ------------------------------------------------------------------ */

html[data-glass="on"] .search-box,
html[data-glass="on"] .adv-builder,
html[data-glass="on"] .stats,
html[data-glass="on"] .adv-summary,
html[data-glass="on"] .clause,
html[data-glass="on"] .table-container,
html[data-glass="on"] .prov-toolbar,
html[data-glass="on"] .prov-builder,
html[data-glass="on"] .prov-filter,
html[data-glass="on"] .prov-history,
html[data-glass="on"] .prov-target-card,
html[data-glass="on"] .prov-wc-row,
html[data-glass="on"] .prov-dd-panel,
html[data-glass="on"] .col-picker-panel,
html[data-glass="on"] .cred-row,
html[data-glass="on"] .col-picker-btn,
html[data-glass="on"] .modal,
html[data-glass="on"] .timeline-modal,
html[data-glass="on"] .onu-dash-shell,
html[data-glass="on"] .onu-mgmt-modal,
html[data-glass="on"] .chart-tooltip {
    border: 1px solid var(--border-subtle);
}

html[data-glass="on"] .prov-dd-btn,
html[data-glass="on"] .prov-quick-btn,
html[data-glass="on"] .prov-quick-clear,
html[data-glass="on"] .prov-dt-date,
html[data-glass="on"] .prov-dt-time,
html[data-glass="on"] .btn-primary,
html[data-glass="on"] .btn-secondary,
html[data-glass="on"] .toolbar-details-btn,
html[data-glass="on"] .toolbar-icon-btn,
html[data-glass="on"] .toolbar-toggle,
html[data-glass="on"] .theme-switcher,
html[data-glass="on"] .theme-btn,
html[data-glass="on"] .glass-btn,
html[data-glass="on"] .sidebar-toggle {
    border: 1px solid var(--border-strong);
}

/* Glass-mode focus states need the same shorthand treatment as §14. */
html[data-glass="on"] .adv-input:focus,
html[data-glass="on"] .adv-select:focus,
html[data-glass="on"] .search-box input:focus {
    border: 1px solid var(--focus-border);
}

/* ------------------------------------------------------------------ */
/*  16. FINAL OVERRIDES — must sit after everything above.             */
/* ------------------------------------------------------------------ */

/* The "on" glass toggle matches its brand background — restated here
   so §14 / §15 don't repaint it with --border-strong. */
.glass-btn-on,
html[data-glass="on"] .glass-btn-on {
    border-color: var(--bg-theme-btn-active);
}

/* The "clear" ✕ in the date rows must read as a real control, not as
   a disabled hint. §14 gives it --border-strong; this nudges its
   resting glyph color away from --text-muted. */
.prov-quick-clear {
    color: var(--text-secondary);
}
.prov-quick-clear:hover {
    background: var(--error-bg);
    color: var(--error-color);
}

/* --- Modals: persistent glass curtain --------------------------- */
/* The blur lives on `body.has-overlay::before`, not on each overlay.
   The curtain is a single compositor layer that only appears when at
   least one overlay is active, so modal-to-modal handoffs never tear
   it down. Individual overlays become transparent click-catchers —
   their own backgrounds and backdrop-filters are removed to avoid
   stacking. */

html[data-glass="on"] body.has-overlay::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 900;                       /* below modals, above content */
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    pointer-events: none;
}

/* Overlays themselves — no background, no filter. The curtain owns
   the visual. The overlay element remains the click-catcher. */
html[data-glass="on"] .modal-overlay,
html[data-glass="on"] .timeline-overlay,
html[data-glass="on"] .onu-full-overlay {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* While the curtain is up, freeze the work-area's backdrop-filter.
   It sits under the curtain, its blur is invisible, and keeping it
   live makes the compositor split its budget between two expensive
   layers. */
html[data-glass="on"] body.has-overlay .work-area {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
}

/* ------------------------------------------------------------------ */
/*  17. NESTED OVERLAYS — own blur                                     */
/*                                                                     */
/*  The persistent curtain sits below every overlay, so it blurs the   */
/*  work-area but cannot blur an *open modal* behind a nested modal.   */
/*  The details popup and the timeline open on top of the ONU          */
/*  dashboard. Without their own backdrop-filter, the dashboard stays  */
/*  sharp behind them and the blur reads as "broken". Give these two   */
/*  their own blur + dim, matching the curtain.                        */
/* ------------------------------------------------------------------ */

html[data-glass="on"] .onu-mgmt-overlay,
html[data-glass="on"] .timeline-overlay {
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}