/* ============================================
   VAHARY ACCESS - GLOBAL STYLES
   ============================================ */

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--v-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   CSS VARIABLES - LIGHT THEME
   ============================================ */
/* Both theme blocks now alias the shell tokens onto the Vahary tokens (--v-*), which flip light/dark
   via data-v-theme (kept in lockstep with the .light-theme/.dark-theme class by access-layout.js).
   The sidebar stays a fixed ink chrome; translucent-white sidebar overlays are kept as-is. */
.vahary-app.light-theme,
.vahary-app.dark-theme {
    --color-primary: var(--v-color-interactive-accent);
    --color-primary-hover: var(--v-color-interactive-accent-hover);
    --color-primary-light: color-mix(in srgb, var(--v-color-interactive-accent) 12%, transparent);

    --bg-app: var(--v-color-surface-base);
    --bg-topbar: var(--v-color-surface-raised);
    --bg-sidebar: #181E24;
    --bg-sidebar-hover: rgba(255, 255, 255, 0.08);
    --bg-sidebar-active: color-mix(in srgb, var(--v-color-interactive-accent) 28%, transparent);
    --bg-content: var(--v-color-surface-raised);
    --bg-panel: var(--v-color-surface-raised);
    --bg-input: var(--v-color-surface-sunken);

    --text-primary: var(--v-color-text-primary);
    --text-secondary: var(--v-color-text-secondary);
    --text-muted: color-mix(in srgb, var(--v-color-text-secondary) 72%, var(--v-color-surface-base));
    --text-sidebar: rgba(255, 255, 255, 0.9);
    --text-sidebar-muted: rgba(255, 255, 255, 0.6);

    --border-color: var(--v-color-border-hairline);
    --border-sidebar: rgba(255, 255, 255, 0.1);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.32);

    --color-success: var(--v-color-status-healthy);
    --color-warning: var(--v-color-status-attention);
    --color-error: var(--v-color-status-fault);
    --color-info: var(--v-color-status-neutral);
}

/* (Dark theme values now come from the shared --v-* tokens via the combined block above,
   flipped by data-v-theme — no separate dark literal block needed.) */

/* ============================================
   LAYOUT DIMENSIONS
   ============================================ */
.vahary-app {
    --topbar-height: 60px;
    --sidebar-width-expanded: 260px;
    --sidebar-width-collapsed: 64px;
    --sidebar-width: var(--sidebar-width-expanded);
    --event-panel-height-collapsed: 44px;
    /* Capped against the viewport as well as in pixels: on a 13" laptop a flat 280px dock left the page
       under it too short to be worth pushing up, which is how "reserve space" turns back into "cover it". */
    --event-panel-height-expanded: min(280px, 42vh);

    /* bug-003a — the ONE height every element that has to make room for the dock reads. The dock used to be
       a `position: fixed` overlay whose expanded height nothing else knew about, so expanding it painted
       over the page AND over the left nav (`.sidebar` stopped at the COLLAPSED height, unconditionally).
       Everything that borders the dock now sizes off this variable, so the two states and the transition
       between them stay in step by construction rather than by three rules agreeing. */
    --event-panel-height: var(--event-panel-height-collapsed);
}

.vahary-app.event-panel-expanded {
    --event-panel-height: var(--event-panel-height-expanded);
}

.vahary-app.sidebar-collapsed {
    --sidebar-width: var(--sidebar-width-collapsed);
}

/* ============================================
   BASE LAYOUT
   ============================================ */
.vahary-app {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-app);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
}

/* ============================================
   TOP BAR
   ============================================ */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    background: var(--bg-topbar);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.top-bar-left,
.top-bar-center,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.top-bar-left { flex: 0 0 auto; }
.top-bar-center { flex: 1; justify-content: center; max-width: 500px; margin: 0 24px; }
.top-bar-right { flex: 0 0 auto; }

/* Top Bar Button */
.top-bar-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.top-bar-btn:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

/* UI-OMN-D03: live/frozen indicator for the shared event link. Colour encodes link health so a stale
   dashboard reads as stale, not quiet. Label uses the high-contrast -on token; the dot uses the vivid
   base hue. Both themes pass AA because -on/-subtle invert together in dark mode. */
.live-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    user-select: none;
}

.live-link-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.live-link--live {
    color: var(--v-color-status-healthy-on);
    background: var(--v-color-status-healthy-subtle);
}
.live-link--live .live-link-dot { background: var(--v-color-status-healthy); }

.live-link--connecting {
    color: var(--text-secondary);
    background: var(--bg-input);
}

.live-link--reconnecting {
    color: var(--v-color-status-attention-on);
    background: var(--v-color-status-attention-subtle);
}
.live-link--reconnecting .live-link-dot { background: var(--v-color-status-attention); }

.live-link--offline {
    color: var(--v-color-status-fault-on);
    background: var(--v-color-status-fault-subtle);
}
.live-link--offline .live-link-dot { background: var(--v-color-status-fault); }

/* Pulse the dot while the link is unsettled — reads as "working on it", not frozen. */
.live-link--connecting .live-link-dot,
.live-link--reconnecting .live-link-dot,
.live-link--offline .live-link-dot {
    animation: live-link-pulse 1.4s ease-in-out infinite;
}

@keyframes live-link-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .live-link-dot { animation: none !important; }
}

/* ============================================
   SEVERITY GLYPHS (T2.5, spec 04 §2.2)
   Severity = shape + color + weight, never color alone.
   Shared by the Events grid, the shell dock, and any monitoring surface.
   ============================================ */
.sev-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    vertical-align: middle;
}

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

.sev-glyph.sev-alarm { color: var(--v-color-status-fault); }
.sev-glyph.sev-fault { color: var(--v-color-status-fault); }
.sev-glyph.sev-attn  { color: var(--v-color-status-attention); }
.sev-glyph.sev-info  { color: var(--v-color-status-healthy); opacity: 0.75; }

/* Active (unacked) alarms pulse; everything else holds still so the eye goes to what's live. */
.sev-glyph.sev-pulse { animation: sev-glyph-pulse 1.2s ease-in-out infinite; }

@keyframes sev-glyph-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.86); }
}

@media (prefers-reduced-motion: reduce) {
    .sev-glyph.sev-pulse { animation: none !important; }
}

.top-bar-btn svg { width: 20px; height: 20px; }

.top-bar-btn .badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-error);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo */
.logo-container { display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 32px; height: 32px; color: var(--color-primary); }
.logo-icon svg { width: 100%; height: 100%; }
.logo-text { font-weight: 800; font-size: 18px; letter-spacing: 1px; color: var(--color-primary); }

/* Dashboard Selector */
.dashboard-selector-wrapper {
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--border-color);
}

/* Dashboard Select Dropdown */
.dashboard-select {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 180px;
}

.dashboard-select:hover {
    background-color: rgba(99, 102, 241, 0.15);
    border-color: var(--color-primary);
}

.dashboard-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.dashboard-select option {
    background: var(--bg-content);
    color: var(--text-primary);
    padding: 8px;
}

/* Search Box */
.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-box:hover { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.search-icon { width: 18px; height: 18px; color: var(--text-muted); }
.search-text { flex: 1; color: var(--text-muted); font-size: 14px; }
.search-shortcut { padding: 4px 8px; background: var(--bg-app); border: 1px solid var(--border-color); border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); }

/* User Avatar */
.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}
.user-avatar:hover { transform: scale(1.05); }
.user-avatar span { font-size: 13px; font-weight: 700; color: var(--v-color-text-on-accent); }

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    /* bug-003a: was the COLLAPSED height, so an expanded dock ate the bottom 236px of the navigation. */
    bottom: var(--event-panel-height);
    width: var(--sidebar-width-expanded);
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    z-index: 90;
    transition: width 0.25s ease, bottom 0.3s ease;
    overflow: visible;
}

/* Sidebar Header with Brand + Pin Button */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
    min-height: 56px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-sidebar);
}

/* Brand mark */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    min-width: 0;
}
.sidebar-brand-mark {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    background: var(--color-primary); /* solid violet — brand: no gradients */
    color: var(--v-color-text-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    box-shadow: var(--shadow-sm);
}
.sidebar-brand-text {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.14em;
    color: var(--text-sidebar);
    white-space: nowrap;
    transition: opacity 0.2s, width 0.2s;
}

.sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: var(--bg-sidebar-hover);
    color: var(--text-sidebar-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
    background: var(--bg-sidebar-active);
    color: var(--text-sidebar);
}

.sidebar-toggle-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

/* Collapsed: the chevron points the other way (now an "expand" affordance) */
.sidebar-collapsed .sidebar-toggle-btn svg {
    transform: rotate(180deg);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Hide scrollbar but allow scrolling */
.sidebar-nav::-webkit-scrollbar { 
    width: 0;
    display: none;
}

/* Nav Item */
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 2px 0;
    border-radius: 8px;
    color: var(--text-sidebar);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s;
    cursor: pointer;
    white-space: nowrap;
    min-height: 40px;
}

.nav-item:hover { background: var(--bg-sidebar-hover); }
.nav-item.active {
    background: var(--bg-sidebar-active);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--color-primary);
}
.nav-item.active .nav-icon { color: var(--color-primary); }

.nav-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sidebar-muted);
}
.nav-icon svg { width: 100%; height: 100%; }
.nav-item:hover .nav-icon, .nav-item.active .nav-icon { color: inherit; }
.nav-label { 
    flex: 1; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    transition: opacity 0.2s, width 0.2s;
    opacity: 1;
}

/* Nav Divider */
.nav-divider { 
    height: 1px; 
    background: var(--border-sidebar); 
    margin: 8px 12px;
}

/* Nav Group */
.nav-group { margin: 2px 0; }

.nav-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-sidebar);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    min-height: 40px;
}

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

.nav-arrow {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sidebar-muted);
    transition: transform 0.2s, opacity 0.2s;
    margin-left: auto;
}
.nav-arrow svg { width: 100%; height: 100%; }
.nav-group.expanded .nav-group-header .nav-arrow { transform: rotate(90deg); }

/* Nav Group Items */
.nav-group-items { 
    padding: 2px 0;
    overflow: hidden;
}

.nav-subitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 44px;
    border-radius: 6px;
    color: var(--text-sidebar-muted);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.15s;
    cursor: pointer;
    white-space: nowrap;
    min-height: 36px;
}

.nav-subitem:hover { background: var(--bg-sidebar-hover); color: var(--text-sidebar); }
.nav-subitem.active {
    background: var(--bg-sidebar-active);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--color-primary);
}

/* Highlight the parent group when it contains the active route, so the active section is obvious
   even before expanding. */
.nav-group:has(.nav-subitem.active) > .nav-group-header { color: #fff; }
.nav-group:has(.nav-subitem.active) > .nav-group-header .nav-icon { color: var(--color-primary); }

.nav-dot { 
    width: 5px; 
    height: 5px; 
    min-width: 5px;
    border-radius: 50%; 
    background: currentColor; 
    opacity: 0.5; 
}
.nav-subitem:hover .nav-dot, .nav-subitem.active .nav-dot { opacity: 1; }

/* Sidebar Footer */
.sidebar-footer { 
    padding: 12px 16px; 
    border-top: 1px solid var(--border-sidebar);
    flex-shrink: 0;
}
.footer-text { font-size: 11px; color: var(--text-sidebar-muted); white-space: nowrap; }

/* Sidebar Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--topbar-height);
    /* bug-003a: the mobile scrim stops at the dock too — it is chrome, not page content. */
    bottom: var(--event-panel-height);
    background: rgba(0, 0, 0, 0.5);
    z-index: 85;
}

/* ============================================
   SIDEBAR COLLAPSED STATE
   ============================================ */
.sidebar-collapsed .sidebar {
    width: var(--sidebar-width-collapsed);
}

/* Hide text elements when collapsed */
.sidebar-collapsed .nav-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar-collapsed .nav-arrow {
    opacity: 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
}

.sidebar-collapsed .sidebar-footer {
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}

/* Hide nav group items when collapsed */
.sidebar-collapsed .nav-group-items {
    display: none !important;
}

/* Center items in collapsed state */
.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: 8px;
}

/* Collapsed rail: hide the brand; the toggle stays centered so you can expand again. No hover-expand —
   the rail stays put until you click the toggle. */
.sidebar-collapsed .sidebar-brand { display: none; }

.sidebar-collapsed .nav-item,
.sidebar-collapsed .nav-group-header {
    justify-content: center;
    padding: 10px;
    gap: 0;
}

.sidebar-collapsed .nav-divider {
    margin: 8px;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
    position: fixed;
    top: var(--topbar-height);
    left: var(--sidebar-width);
    right: 0;
    bottom: var(--event-panel-height);
    background: var(--bg-app);
    overflow: auto;
    transition: left 0.3s ease, bottom 0.3s ease;
}

.sidebar-open .main-content { left: var(--sidebar-width); }
.sidebar-closed .main-content { left: 0; }
.content-wrapper { padding: 24px; height: 100%; display: flex; flex-direction: column; }

/* ============================================
   EVENT PANEL (Bottom Dock)
   ============================================ */
/* bug-003a: still `fixed`, but no longer an overlay — `.sidebar` and `.main-content` both end at
   --event-panel-height, so the dock occupies space nothing else is using in either state. */
.event-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--event-panel-height);
    background: var(--bg-panel);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 95;
    display: flex;
    flex-direction: column;
    transition: height 0.3s ease;
}

.event-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: var(--event-panel-height-collapsed);
    min-height: var(--event-panel-height-collapsed);
    cursor: pointer;
    user-select: none;
}

.event-panel-header:hover { background: var(--bg-input); }

.event-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--text-primary);
}

.event-icon { width: 18px; height: 18px; color: var(--color-primary); }
.event-count { padding: 2px 8px; background: var(--color-primary); border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--v-color-text-on-accent); }
.connection-status { font-size: 10px; margin-left: 8px; }
.connection-status.connected { color: var(--color-success); }
.connection-status.disconnected { color: var(--color-error); }

.event-panel-controls { display: flex; align-items: center; gap: 8px; }

.panel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    pointer-events: auto;
    position: relative;
    z-index: 10;
}
.panel-btn:hover { background: var(--bg-input); color: var(--text-primary); }
.panel-btn svg { width: 16px; height: 16px; transition: transform 0.3s ease; pointer-events: none; }

/* Event Panel Pin Button */
.event-panel-pin-btn svg { transform: rotate(0deg); }
.event-panel-pinned .event-panel-pin-btn { 
    color: var(--color-primary); 
    background: var(--color-primary-light);
}
.event-panel-pinned .event-panel-pin-btn svg { transform: rotate(45deg); }

/* Event Panel Content */
.event-panel-content { flex: 1; overflow: auto; padding: 0 16px 16px; }
.event-grid { display: flex; flex-direction: column; gap: 4px; }

.event-row {
    display: grid;
    grid-template-columns: 80px 140px 150px 1fr;
    gap: 16px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-input);
    border-left: 3px solid transparent;
}

.event-row.event-info { border-left-color: var(--color-info); }
.event-row.event-warning { border-left-color: var(--color-warning); }
.event-row.event-error { border-left-color: var(--color-error); }
.event-row.event-success { border-left-color: var(--color-success); }

.event-time { color: var(--text-muted); font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; }
.event-type { font-weight: 500; color: var(--text-primary); }
.event-source { color: var(--text-secondary); }
.event-detail { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================
   LIVE EVENTS — rich / dense rows (C2)
   ============================================ */
.ev-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 2px 10px; position: sticky; top: 0; z-index: 2;
    background: var(--bg-panel);
}
.ev-filter-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.ev-fchip {
    border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary);
    padding: 3px 12px; border-radius: 14px; font-size: 12px; font-weight: 500; cursor: pointer;
    transition: all 0.12s;
}
.ev-fchip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ev-fchip.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--v-color-text-on-accent); }
.ev-search {
    flex: 1; max-width: 280px; margin-left: auto;
    border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-input);
    color: var(--text-primary); padding: 5px 10px; font-size: 12.5px; outline: none;
}
.ev-search:focus { border-color: var(--color-primary); }

.ev-colsel { position: relative; }
.ev-colsel-btn {
    display: flex; align-items: center; justify-content: center; width: 30px; height: 28px;
    border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-input);
    color: var(--text-secondary); cursor: pointer;
}
.ev-colsel-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ev-colsel-btn svg { width: 15px; height: 15px; }
.ev-colsel-pop {
    position: absolute; right: 0; top: 34px; z-index: 5;
    background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: var(--shadow-md); padding: 8px; min-width: 130px;
    display: flex; flex-direction: column; gap: 6px;
}
.ev-colsel-pop label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; }

.event-grid-rich { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }

.ev-row {
    display: grid;
    grid-template-columns: 68px 130px minmax(150px, 2fr) 96px minmax(130px, 2fr) 26px;
    gap: 12px;
    align-items: center;
    padding: 5px 10px;
    border-radius: 6px;
    border-left: 3px solid transparent;
}

.ev-head {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 10.5px; letter-spacing: 0.05em; font-weight: 600;
    padding-top: 6px; padding-bottom: 6px;
}

/* bug-003b carry-over — reorderable, resizable dock columns.
   The header cell is the drag handle for REORDERING and hosts the grip for RESIZING on its trailing
   edge. `position: relative` anchors the grip; `overflow: hidden` stops a long label spilling into the
   next column once one has been dragged narrow. */
.ev-head-cell {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

.ev-head-cell.is-movable { cursor: grab; }
.ev-head-cell.is-dragging { opacity: 0.45; cursor: grabbing; }

.ev-head-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sits ON the boundary rather than inside the cell, so the target is where the eye expects it. Wider
   than it looks: a 2px line is a miserable thing to hit, so the hit area is 9px and only the centre is
   painted on hover. */
.ev-col-grip {
    position: absolute;
    top: 0; bottom: 0; right: -4px;
    width: 9px;
    cursor: col-resize;
    /* Above the header text, so a grab near the edge always resizes rather than starting a reorder. */
    z-index: 2;
    touch-action: none;
}

.ev-col-grip::after {
    content: "";
    position: absolute;
    top: 15%; bottom: 15%; left: 3px;
    width: 2px;
    border-radius: 1px;
    background: transparent;
    transition: background 0.12s;
}

.ev-col-grip:hover::after { background: var(--color-primary, #6d5ae0); }

/* While a resize is in flight the whole document takes the cursor and stops selecting text — otherwise
   dragging across the feed highlights every row it passes over. */
body.is-col-resizing { cursor: col-resize; user-select: none; }
body.is-col-resizing .ev-col-grip::after { background: var(--color-primary, #6d5ae0); }

.ev-colsel-reset {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 4px 6px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.15));
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.ev-colsel-reset:hover { background: var(--bg-sidebar-hover); }

.ev-data { background: var(--bg-input); transition: background 0.12s; }
.ev-data:hover { background: var(--bg-sidebar-hover); }
.ev-data.event-warning { border-left-color: var(--color-warning); }
.ev-data.event-error { border-left-color: var(--color-error); }

.ev-time { color: var(--text-muted); font-family: var(--v-font-data, 'SF Mono','Consolas',monospace); font-variant-numeric: tabular-nums; font-size: 11.5px; }
/* Dock event cell: severity glyph + type chip on one line (T2.5). */
.ev-event-cell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ev-event-cell .sev-glyph { width: 12px; height: 12px; }

.ev-chip {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    background: var(--border-color); color: var(--text-secondary);
}
.ev-chip-ok { background: rgba(16,185,129,0.15); color: var(--color-success); }
.ev-chip-deny { background: rgba(239,68,68,0.15); color: var(--color-error); }
.ev-chip-warn { background: rgba(245,158,11,0.15); color: var(--color-warning); }
.ev-chip-alarm { background: var(--color-error); color: #fff; }

.ev-holder { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ev-avatar {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: var(--v-color-text-on-accent); font-size: 9.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ev-avatar-img {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    object-fit: cover; background: var(--bg-sidebar-hover);
}
.ev-name { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-muted { color: var(--text-muted); }

.ev-clickable { cursor: pointer; }
.ev-clickable:hover .ev-name { color: var(--color-primary); text-decoration: underline; }

.ev-card { color: var(--text-secondary); font-family: 'SF Mono','Consolas',monospace; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-fc { color: var(--text-muted); }
.ev-dev { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ev-cam-col { display: flex; align-items: center; justify-content: center; }
.ev-cam-dot { color: var(--color-info); display: flex; }
.ev-cam-dot svg { width: 16px; height: 16px; }

/* bug-003b — acknowledge/clear from the dock. Sized to the row rather than to a MudButton: this sits in a
   28px feed line, and a stock button would set the row height for every event, alarm or not. */
.ev-ack-col { display: flex; align-items: center; justify-content: center; }

.ev-ack-btn {
    font: 600 10px/1 ui-monospace, monospace;
    letter-spacing: 0.04em;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid var(--color-warning);
    background: transparent;
    color: var(--color-warning);
    cursor: pointer;
}

.ev-ack-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-warning) 18%, transparent); }
.ev-ack-btn:disabled { opacity: 0.45; cursor: default; }
.ev-ack-btn:focus-visible { outline: 2px solid var(--v-color-border-focus); outline-offset: 1px; }

.ev-ack-btn.is-clear { border-color: var(--color-success); color: var(--color-success); }
.ev-ack-btn.is-clear:hover:not(:disabled) { background: color-mix(in srgb, var(--color-success) 18%, transparent); }

/* Answered already — states the fact rather than leaving a cell that reads as "nothing to do yet". */
.ev-ack-done { font-size: 11px; color: var(--color-success); }

.ev-empty { padding: 16px; text-align: center; color: var(--text-muted); }

/* Pause control */
.event-pause-btn { position: relative; }
.event-pause-btn.paused { color: var(--color-warning); }
.pause-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 8px; background: var(--color-warning); color: #fff;
    font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
}

/* ============================================
   NOTIFICATIONS PANEL (bug-001a)
   ============================================
   The bell rendered a live count and had no handler at all — a badge that counted up and did nothing.
   The panel is the same feed the badge counts, so the two cannot disagree: the badge is the UNREAD
   subset of exactly the rows listed here. Positioned like `.user-dropdown` next to it so it reads native. */
.notif-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 380px;
    max-width: calc(100vw - 32px);
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notif-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}
.notif-panel-title { font-weight: 600; color: var(--text-primary); }
.notif-panel-count {
    padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700;
    background: var(--color-primary); color: var(--v-color-text-on-accent);
}
.notif-panel-spacer { flex: 1; }
.notif-panel-action {
    border: none; background: transparent; cursor: pointer; padding: 4px 6px; border-radius: 6px;
    font: inherit; font-size: 12px; color: var(--color-primary);
}
.notif-panel-action:hover { background: var(--bg-input); }
.notif-panel-action:disabled { color: var(--text-muted); cursor: default; background: transparent; }

/* The list is the only part that scrolls; the header and footer stay put. */
.notif-panel-list { max-height: 340px; overflow-y: auto; overflow-x: hidden; }
.notif-panel-list::-webkit-scrollbar { width: 6px; }
.notif-panel-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

.notif-row {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--bg-input); }
.notif-row:focus-visible { outline: 2px solid var(--v-color-border-focus); outline-offset: -2px; }

/* Unread marker. Read rows keep the column so the text never shifts when a row is marked read. */
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; align-self: center; }
.notif-row.is-unread .notif-dot { background: var(--color-primary); }
.notif-row.is-alarm .notif-dot { background: var(--color-error); }

.notif-body { min-width: 0; }
.notif-title { font-size: 13px; font-weight: 600; }
.notif-row.is-alarm .notif-title { color: var(--color-error); }
.notif-detail {
    font-size: 12px; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-time { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.notif-empty { padding: 24px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }

.notif-panel-foot { border-top: 1px solid var(--border-color); }
.notif-panel-foot a {
    display: block; padding: 10px 14px; text-align: center;
    color: var(--color-primary); text-decoration: none; font-size: 13px; font-weight: 500;
}
.notif-panel-foot a:hover { background: var(--bg-input); }

/* A transparent full-viewport catcher so clicking anywhere else dismisses the panel. Blazor-only —
   the shell's JS click delegation knows nothing about this dropdown, and a click-away that lives in
   the same component as the state it closes cannot drift out of step with it. */
.dropdown-scrim { position: fixed; inset: 0; z-index: 999; background: transparent; border: none; }

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */
@media (max-width: 1024px) {
    .vahary-app { --sidebar-width: 240px; }
    .top-bar-center { display: none; }
    .logo-text { display: none; }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 768px) {
    .vahary-app { --sidebar-width: 280px; }
    .sidebar { transform: translateX(-100%); }
    .sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-open .sidebar-overlay { display: block; }
    .main-content { left: 0; }
    .event-row { grid-template-columns: 70px 1fr; gap: 8px; }
    .event-source, .event-detail { display: none; }
}

/* ============================================
   MUDBLAZOR Z-INDEX OVERRIDES
   ============================================ */
/* Ensure MudBlazor overlays and drawers appear above custom layout elements */
.mud-overlay {
    z-index: 1200 !important;
}

.mud-drawer {
    z-index: 1300 !important;
}

.mud-drawer-content {
    z-index: 1300 !important;
}

.mud-dialog-container {
    z-index: 1400 !important;
}

.mud-popover {
    z-index: 1500 !important;
}

.mud-snackbar-provider {
    z-index: 1600 !important;
}

/* ============================================
   LEGACY BLAZOR STYLES (kept for compatibility)
   ============================================ */
.blazor-error-boundary {
    background: var(--color-error);
    padding: 1rem;
    color: var(--v-color-status-fault-on);
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-error);
}

.validation-message {
    color: var(--color-error);
}