/* ===========================================
   FLARE ISM - Base Styles
   Theme CSS imported in page components
   =========================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

#root {
    height: 100%;
    width: 100%;
}
/* ===========================================
   FLARE ISM - App Styles
   Minimal styles for standalone dev mode
   =========================================== */

#root {
    height: 100%;
    width: 100%;
}
/**
 * Nimbus Design System - CSS Theme
 * Auto-generated from Figma Design Tokens
 *
 * This file contains all design tokens as CSS custom properties.
 * The theme automatically adapts to light/dark mode using prefers-color-scheme.
 */

:root {
    color-scheme: light dark;
}

/* Light Theme (Default) */
:root {
    /* Backgrounds - Surface */
    --bg-surface-primary: #ffffff;
    --bg-surface-secondary: #edeff2;
    --bg-surface-invert: #ffffff;
    --bg-surface-invert-2: #edeff2;
    --bg-surface-brand: #403456;

    /* Backgrounds - Buttons */
    --bg-button-primary: #303640;
    --bg-button-secondary: #edeff2;
    --bg-button-ghost: #ffffff;
    --bg-button-border: #d7dae0;
    --bg-button-disable: #edeff2;

    /* Backgrounds - Chips */
    --bg-chip-filled: #edeff2;
    --bg-chip-border: #edeff2;

    /* Backgrounds - Content Switcher */
    --bg-cs-bg: #edeff2;
    --bg-cs-highlight: #ffffff;

    /* Backgrounds - Footer */
    --bg-footer-surface-primary: #f6f7f9;
    --bg-footer-border-selected: #232933;

    /* Borders */
    --border-20: #d7dae0;
    --border-40: #d7dae0;
    --border-60: #bdc4d1;
    --border-100: #232933;
    --border-brand: #2d1b3f;

    /* Text Colors */
    --text-title: #232933;
    --text-paragraph: #5c6575;
    --text-disable: #bdc4d1;
    --text-invert: #ffffff;
    --text-brand: #2d1b3f;

    /* Icon Colors */
    --icon-hero: #171b27;
    --icon-secondary: #5c6575;
    --icon-disable: #828b99;
    --icon-brand: #675d78;

    /* Status Colors */
    --color-cleared: #589a23;
    --color-fire: #e6251e;
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
    :root {
        /* Backgrounds - Surface */
        --bg-surface-primary: #232933;
        --bg-surface-secondary: #303640;
        --bg-surface-invert: #464e5c;
        --bg-surface-invert-2: #5c6575;
        --bg-surface-brand: #d8d6dd;

        /* Backgrounds - Buttons */
        --bg-button-primary: #d8d6dd;
        --bg-button-secondary: #303640;
        --bg-button-ghost: #232933;
        --bg-button-border: #464e5c;
        --bg-button-disable: #303640;

        /* Backgrounds - Chips */
        --bg-chip-filled: #303640;
        --bg-chip-border: #303640;

        /* Backgrounds - Content Switcher */
        --bg-cs-bg: #464e5c;
        --bg-cs-highlight: #303640;

        /* Backgrounds - Footer */
        --bg-footer-surface-primary: #303640;
        --bg-footer-border-selected: #bdc4d1;

        /* Borders */
        --border-20: #5c6575;
        --border-40: #464e5c;
        --border-60: #5c6575;
        --border-100: #f6f7f9;
        --border-brand: #675d78;

        /* Text Colors */
        --text-title: #ffffff;
        --text-paragraph: #d7dae0;
        --text-disable: #5c6575;
        --text-invert: #232933;
        --text-brand: #2d1b3f;

        /* Icon Colors */
        --icon-hero: #ffffff;
        --icon-secondary: #d7dae0;
        --icon-disable: #bdc4d1;
        --icon-brand: #675d78;

        /* Status Colors */
        --color-cleared: #589a23;
        --color-fire: #e6251e;
    }
}

/* Force Light Theme */
[data-theme="light"] {
    color-scheme: light;

    /* Backgrounds - Surface */
    --bg-surface-primary: #ffffff;
    --bg-surface-secondary: #edeff2;
    --bg-surface-invert: #ffffff;
    --bg-surface-invert-2: #edeff2;
    --bg-surface-brand: #403456;

    /* Backgrounds - Buttons */
    --bg-button-primary: #303640;
    --bg-button-secondary: #edeff2;
    --bg-button-ghost: #ffffff;
    --bg-button-border: #d7dae0;
    --bg-button-disable: #edeff2;

    /* Backgrounds - Chips */
    --bg-chip-filled: #edeff2;
    --bg-chip-border: #edeff2;

    /* Backgrounds - Content Switcher */
    --bg-cs-bg: #edeff2;
    --bg-cs-highlight: #ffffff;

    /* Backgrounds - Footer */
    --bg-footer-surface-primary: #f6f7f9;
    --bg-footer-border-selected: #232933;

    /* Borders */
    --border-20: #d7dae0;
    --border-40: #d7dae0;
    --border-60: #bdc4d1;
    --border-100: #232933;
    --border-brand: #2d1b3f;

    /* Text Colors */
    --text-title: #232933;
    --text-paragraph: #5c6575;
    --text-disable: #bdc4d1;
    --text-invert: #ffffff;
    --text-brand: #2d1b3f;

    /* Icon Colors */
    --icon-hero: #171b27;
    --icon-secondary: #5c6575;
    --icon-disable: #828b99;
    --icon-brand: #675d78;

    /* Status Colors */
    --color-cleared: #589a23;
    --color-fire: #e6251e;
}

/* Force Dark Theme */
[data-theme="dark"] {
    color-scheme: dark;

    /* Backgrounds - Surface */
    --bg-surface-primary: #232933;
    --bg-surface-secondary: #303640;
    --bg-surface-invert: #464e5c;
    --bg-surface-invert-2: #5c6575;
    --bg-surface-brand: #d8d6dd;

    /* Backgrounds - Buttons */
    --bg-button-primary: #d8d6dd;
    --bg-button-secondary: #303640;
    --bg-button-ghost: #232933;
    --bg-button-border: #464e5c;
    --bg-button-disable: #303640;

    /* Backgrounds - Chips */
    --bg-chip-filled: #303640;
    --bg-chip-border: #303640;

    /* Backgrounds - Content Switcher */
    --bg-cs-bg: #464e5c;
    --bg-cs-highlight: #303640;

    /* Backgrounds - Footer */
    --bg-footer-surface-primary: #303640;
    --bg-footer-border-selected: #bdc4d1;

    /* Borders */
    --border-20: #5c6575;
    --border-40: #464e5c;
    --border-60: #5c6575;
    --border-100: #f6f7f9;
    --border-brand: #675d78;

    /* Text Colors */
    --text-title: #ffffff;
    --text-paragraph: #d7dae0;
    --text-disable: #5c6575;
    --text-invert: #232933;
    --text-brand: #2d1b3f;

    /* Icon Colors */
    --icon-hero: #ffffff;
    --icon-secondary: #d7dae0;
    --icon-disable: #bdc4d1;
    --icon-brand: #675d78;

    /* Status Colors */
    --color-cleared: #589a23;
    --color-fire: #e6251e;
}
/**
 * Nimbus Design System - Components Package
 * @lancontrolsystems/nimbus-web-components
 *
 * This package provides structural CSS components and layout tokens.
 * Use alongside @lancontrolsystems/nimbus-web-theme for colors.
 *
 * Usage:
 *   @import '@lancontrolsystems/nimbus-web-components/src/index.css';
 *
 * Or import individual files:
 *   @import '@lancontrolsystems/nimbus-web-components/src/tokens/typography.css';
 *   @import '@lancontrolsystems/nimbus-web-components/src/components/buttons.css';
 */

/* Tokens - CSS Custom Properties */

/**
 * Nimbus Design System - Spacing & Layout Tokens
 * Based on 4px base unit grid system
 */

:root {
    /* Spacing Scale (4px base) */
    --spacing-0: 0;
    --spacing-1: 0.25rem; /* 4px */
    --spacing-2: 0.5rem; /* 8px */
    --spacing-3: 0.75rem; /* 12px */
    --spacing-4: 1rem; /* 16px */
    --spacing-5: 1.25rem; /* 20px */
    --spacing-6: 1.5rem; /* 24px */
    --spacing-8: 2rem; /* 32px */
    --spacing-10: 2.5rem; /* 40px */
    --spacing-12: 3rem; /* 48px */
    --spacing-16: 4rem; /* 64px */

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 0.25rem; /* 4px - subtle rounding */
    --radius-md: 0.5rem; /* 8px - cards, containers */
    --radius-lg: 0.75rem; /* 12px - larger cards */
    --radius-xl: 1rem; /* 16px - buttons, modals */
    --radius-full: 9999px; /* Pill shape - chips, badges */

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-tooltip: 400;
}

/**
 * Nimbus Design System - Typography Tokens
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Font: Montserrat
 * Line Height: 140% (1.4)
 * Letter Spacing: 0
 * Paragraph Spacing: 10px
 */

:root {
    /* Font Family */
    --font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font Sizes */
    --font-size-xs: 0.625rem; /* 10px */
    --font-size-sm: 0.75rem; /* 12px */
    --font-size-m: 0.9375rem; /* 15px */
    --font-size-l: 1.25rem; /* 20px */
    --font-size-xl: 1.375rem; /* 22px */

    /* Line Heights */
    --line-height-default: 1.4; /* 140% */

    /* Paragraph Spacing */
    --paragraph-spacing: 0.625rem; /* 10px */
}

/* Typography Classes */

/* Extra Small */

.text-xs {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-default);
    letter-spacing: 0;
}

.text-xs-bold {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-default);
    letter-spacing: 0;
}

/* Small */

.text-sm {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-default);
    letter-spacing: 0;
}

.text-sm-bold {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-default);
    letter-spacing: 0;
}

/* Medium */

.text-m {
    font-family: var(--font-family);
    font-size: var(--font-size-m);
    line-height: var(--line-height-default);
    letter-spacing: 0;
}

.text-m-bold {
    font-family: var(--font-family);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-default);
    letter-spacing: 0;
}

/* Large */

.text-l {
    font-family: var(--font-family);
    font-size: var(--font-size-l);
    line-height: var(--line-height-default);
    letter-spacing: 0;
}

.text-l-bold {
    font-family: var(--font-family);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-default);
    letter-spacing: 0;
}

/* Extra Large */

.text-xl {
    font-family: var(--font-family);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-default);
    letter-spacing: 0;
}

.text-xl-bold {
    font-family: var(--font-family);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-default);
    letter-spacing: 0;
}

/* Components */

/**
 * Nimbus Design System - Button Components
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Variants: Primary, Secondary, Ghost
 * States: Default, Hover, Focus, Pressed, Disabled
 * Shape: Rounded rectangle (--radius-md / 8px)
 * Anatomy: Label + Optional Icons (leading/trailing)
 */

/* Base Button */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    height: 36px;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-default);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

/* Button with icon only (square/circle) */

.btn--icon-only {
    padding: var(--spacing-2);
    aspect-ratio: 1;
}

/* ==========================================
   PRIMARY BUTTON
   High emphasis - main actions
   ========================================== */

.btn--primary {
    background-color: var(--bg-button-primary);
    border-color: var(--bg-button-primary);
    color: var(--text-invert);
}

.btn--primary:hover {
    background-color: color-mix(in srgb, var(--bg-button-primary) 85%, black);
    border-color: color-mix(in srgb, var(--bg-button-primary) 85%, black);
}

.btn--primary:focus {
    background-color: color-mix(in srgb, var(--bg-button-primary) 80%, black);
    border-color: color-mix(in srgb, var(--bg-button-primary) 80%, black);
}

.btn--primary:active {
    background-color: color-mix(in srgb, var(--bg-button-primary) 70%, black);
    border-color: color-mix(in srgb, var(--bg-button-primary) 70%, black);
}

.btn--primary:disabled,
.btn--primary.btn--disabled {
    background-color: var(--bg-button-disable);
    border-color: var(--bg-button-disable);
    color: var(--text-disable);
    cursor: not-allowed;
}

/* ==========================================
   SECONDARY BUTTON
   Medium emphasis - supporting actions
   ========================================== */

.btn--secondary {
    background-color: transparent;
    border-color: var(--border-20);
    color: var(--text-title);
}

.btn--secondary:hover {
    background-color: var(--bg-button-primary);
    border-color: var(--bg-button-primary);
    color: var(--text-invert);
}

.btn--secondary:focus {
    background-color: color-mix(in srgb, var(--bg-button-primary) 90%, black);
    border-color: color-mix(in srgb, var(--bg-button-primary) 90%, black);
    color: var(--text-invert);
}

.btn--secondary:active {
    background-color: color-mix(in srgb, var(--bg-button-primary) 80%, black);
    border-color: color-mix(in srgb, var(--bg-button-primary) 80%, black);
    color: var(--text-invert);
}

.btn--secondary:disabled,
.btn--secondary.btn--disabled {
    background-color: transparent;
    border-color: var(--border-20);
    color: var(--text-disable);
    cursor: not-allowed;
}

/* ==========================================
   GHOST BUTTON
   Low emphasis - tertiary actions
   ========================================== */

.btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-paragraph);
}

.btn--ghost:hover {
    background-color: var(--bg-button-primary);
    border-color: var(--bg-button-primary);
    color: var(--text-invert);
}

.btn--ghost:focus {
    background-color: color-mix(in srgb, var(--bg-button-primary) 90%, black);
    border-color: color-mix(in srgb, var(--bg-button-primary) 90%, black);
    color: var(--text-invert);
}

.btn--ghost:active {
    background-color: color-mix(in srgb, var(--bg-button-primary) 80%, black);
    border-color: color-mix(in srgb, var(--bg-button-primary) 80%, black);
    color: var(--text-invert);
}

.btn--ghost:disabled,
.btn--ghost.btn--disabled {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-disable);
    cursor: not-allowed;
}

/* ==========================================
   BUTTON SIZES
   ========================================== */

.btn--sm {
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-xs);
}

.btn--lg {
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-m);
}

/* ==========================================
   BUTTON ICON ELEMENTS
   ========================================== */

.btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.btn__icon--leading {
    margin-right: calc(var(--spacing-1) * -1);
}

.btn__icon--trailing {
    margin-left: calc(var(--spacing-1) * -1);
}

/* ==========================================
   BUTTON GROUP
   ========================================== */

.btn-group {
    display: inline-flex;
    gap: var(--spacing-2);
}

.btn-group--vertical {
    flex-direction: column;
}

/**
 * Nimbus Design System - Chip Components
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Sizes: Small, Medium, Large
 * States: Alarm (red), Warning (amber), Online (green), Offline (gray)
 * Shape: Pill (fully rounded)
 * Anatomy: Icon + Label + Optional Time
 *
 * Hierarchy (Traffic Light System):
 * - High emphasis: Alarm (red) - most important
 * - Medium emphasis: Warning/Fault (amber)
 * - Low emphasis: Online (green)
 * - Inactive: Offline (gray)
 */

/* ==========================================
   BASE CHIP
   ========================================== */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-default);
    white-space: nowrap;
}

/* ==========================================
   CHIP SIZES
   ========================================== */

/* Small - icon only or minimal text */

.chip--sm {
    padding: var(--spacing-1);
    font-size: var(--font-size-xs);
}

.chip--sm.chip--has-text {
    padding: var(--spacing-1) var(--spacing-2);
}

/* Medium (default) */

.chip--md {
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-xs);
}

/* Large - with time display */

.chip--lg {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
}

/* ==========================================
   CHIP STATES / VARIANTS
   Traffic light system: Red > Amber > Green > Gray
   ========================================== */

/* Alarm - High emphasis (Red) */

.chip--alarm {
    background-color: #c62828;
    color: #ffffff;
}

.chip--alarm .chip__icon {
    color: #ffffff;
}

/* Warning/Fault - Medium emphasis (Amber) */

.chip--warning {
    background-color: transparent;
    color: #e65100;
    border: 1px solid currentColor;
}

.chip--warning .chip__icon {
    color: #e65100;
}

/* Online - Low emphasis (Green) */

.chip--online {
    background-color: #2e7d32;
    color: #ffffff;
}

.chip--online .chip__icon {
    color: #ffffff;
}

/* Offline - Inactive (Gray) */

.chip--offline {
    background-color: var(--bg-chip-filled);
    color: var(--text-paragraph);
}

.chip--offline .chip__icon {
    color: var(--icon-secondary);
}

/* Offline variant with red text (for emphasis when needed) */

.chip--offline-alert {
    background-color: #c62828;
    color: #ffffff;
}

/* ==========================================
   CHIP ELEMENTS
   ========================================== */

.chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.chip__label {
    flex-shrink: 0;
}

.chip__time {
    opacity: 0.9;
}

.chip__separator {
    opacity: 0.6;
}

/* ==========================================
   CHIP DISPLAY VARIANTS
   ========================================== */

/* Icon only */

.chip--icon-only {
    padding: var(--spacing-1);
    aspect-ratio: 1;
    justify-content: center;
}

/* Text only (no icon) */

.chip--text-only .chip__icon {
    display: none;
}

/* ==========================================
   CHIP GROUP / LIST
   ========================================== */

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.chip-group--vertical {
    flex-direction: column;
    align-items: flex-start;
}

/* Chip stack for hierarchical display */

.chip-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    align-items: flex-start;
}

/**
 * Nimbus Design System - Card Components
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Card Anatomy:
 * 1. Status chip (header)
 * 2. Information widget (data grid)
 * 3. Information expansion (tags)
 * 4. Actions (buttons)
 * 5. Timeline (status icons)
 */

/* ==========================================
   BASE CARD
   ========================================== */

.card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.card--elevated {
    box-shadow: var(--shadow-card);
    border: none;
}

/* ==========================================
   CARD SECTIONS
   ========================================== */

.card__header {
    padding: var(--spacing-4);
    padding-bottom: var(--spacing-2);
}

.card__body {
    padding: var(--spacing-4);
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
}

.card__footer {
    padding: var(--spacing-4);
    padding-top: var(--spacing-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

/* ==========================================
   ALERT CARD
   Specific layout for alert/event cards
   ========================================== */

.card--alert {
    gap: var(--spacing-2);
}

.card--alert .card__header {
    padding-bottom: var(--spacing-3);
}

/* ==========================================
   INFORMATION WIDGET
   Grid of labeled data fields
   ========================================== */

.card__info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.card__info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--bg-surface-secondary);
    border-radius: var(--radius-sm);
    min-width: 80px;
}

.card__info-label {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
    text-transform: capitalize;
}

.card__info-value {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================
   INFORMATION EXPANSION
   Row of tags/labels
   ========================================== */

.card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.card__tag {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    background-color: transparent;
    border: 1px solid var(--border-40);
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
}

/* ==========================================
   CARD ACTIONS
   Button row at bottom
   ========================================== */

.card__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.card__actions--start {
    justify-content: flex-start;
}

.card__actions--end {
    justify-content: flex-end;
    margin-left: auto;
}

.card__actions--between {
    justify-content: space-between;
    width: 100%;
}

/* ==========================================
   TIMELINE / STATUS ICONS
   Row of status indicator icons
   ========================================== */

.card__timeline {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.card__timeline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
}

.card__timeline-icon--active {
    background-color: var(--bg-button-primary);
    color: var(--text-invert);
}

.card__timeline-icon--inactive {
    background-color: var(--bg-surface-secondary);
    color: var(--icon-disable);
}

/* ==========================================
   CARD VARIANTS
   ========================================== */

/* Compact card - less padding */

.card--compact .card__header,
.card--compact .card__body,
.card--compact .card__footer {
    padding: var(--spacing-3);
}

.card--compact .card__header {
    padding-bottom: var(--spacing-1);
}

.card--compact .card__body {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
}

.card--compact .card__footer {
    padding-top: var(--spacing-1);
}

/* Clickable card */

.card--clickable {
    cursor: pointer;
    transition:
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}

.card--clickable:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-60);
}

/* Selected card */

.card--selected {
    border-color: var(--border-brand);
    border-width: 2px;
}

/**
 * Nimbus Design System - Form Controls
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Components: Checkbox, Radio, Switch/Toggle
 */

/* ==========================================
   CHECKBOX
   States: unchecked, checked, indeterminate
   ========================================== */

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    user-select: none;
}

.checkbox__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-60);
    border-radius: var(--radius-sm);
    background-color: var(--bg-surface-primary);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.checkbox__box svg,
.checkbox__box::after {
    opacity: 0;
    transition: opacity var(--transition-fast);
}

/* Checked state */

.checkbox__input:checked + .checkbox__box {
    background-color: var(--bg-button-primary);
    border-color: var(--bg-button-primary);
}

.checkbox__input:checked + .checkbox__box svg,
.checkbox__input:checked + .checkbox__box::after {
    opacity: 1;
    color: var(--text-invert);
}

/* Checkmark icon fallback */

.checkbox__box::after {
    content: "✓";
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--text-invert);
}

.checkbox__input:checked + .checkbox__box::after {
    opacity: 1;
}

/* Indeterminate state */

.checkbox__input:indeterminate + .checkbox__box {
    background-color: var(--bg-button-primary);
    border-color: var(--bg-button-primary);
}

.checkbox__input:indeterminate + .checkbox__box::after {
    content: "−";
    opacity: 1;
}

/* Focus state */

.checkbox__input:focus-visible + .checkbox__box {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

/* Disabled state */

.checkbox__input:disabled + .checkbox__box {
    background-color: var(--bg-button-disable);
    border-color: var(--border-20);
    cursor: not-allowed;
}

.checkbox__input:disabled ~ .checkbox__label {
    color: var(--text-disable);
    cursor: not-allowed;
}

.checkbox__label {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-title);
}

/* Checkbox Group */

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.checkbox-group--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.checkbox-group__label {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
    margin-bottom: var(--spacing-1);
}

/* ==========================================
   RADIO
   States: unselected, selected
   ========================================== */

.radio {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    user-select: none;
}

.radio__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-60);
    border-radius: var(--radius-full);
    background-color: var(--bg-surface-primary);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.radio__circle::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-button-primary);
    opacity: 0;
    transform: scale(0);
    transition: all var(--transition-fast);
}

/* Selected state */

.radio__input:checked + .radio__circle {
    border-color: var(--bg-button-primary);
}

.radio__input:checked + .radio__circle::after {
    opacity: 1;
    transform: scale(1);
}

/* Focus state */

.radio__input:focus-visible + .radio__circle {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

/* Disabled state */

.radio__input:disabled + .radio__circle {
    background-color: var(--bg-button-disable);
    border-color: var(--border-20);
    cursor: not-allowed;
}

.radio__input:disabled ~ .radio__label {
    color: var(--text-disable);
    cursor: not-allowed;
}

.radio__label {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-title);
}

/* Radio Group */

.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.radio-group--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.radio-group__label {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
    margin-bottom: var(--spacing-1);
}

/* ==========================================
   SWITCH / TOGGLE
   States: on (green), off (gray)
   Sizes: l (large), sm (small)
   ========================================== */

.switch {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    user-select: none;
}

.switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch__track {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    background-color: var(--bg-chip-filled);
    transition: background-color var(--transition-fast);
    flex-shrink: 0;
}

.switch__handle {
    position: absolute;
    border-radius: var(--radius-full);
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-fast);
}

/* Large size (default) */

.switch__track {
    width: 2.75rem;
    height: 1.5rem;
}

.switch__handle {
    width: 1.25rem;
    height: 1.25rem;
    left: 0.125rem;
}

/* Small size */

.switch--sm .switch__track {
    width: 2rem;
    height: 1.125rem;
}

.switch--sm .switch__handle {
    width: 0.875rem;
    height: 0.875rem;
    left: 0.125rem;
}

/* On state */

.switch__input:checked + .switch__track {
    background-color: #4caf50;
}

.switch__input:checked + .switch__track .switch__handle {
    transform: translateX(1.25rem);
}

.switch--sm .switch__input:checked + .switch__track .switch__handle {
    transform: translateX(0.875rem);
}

/* Focus state */

.switch__input:focus-visible + .switch__track {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

/* Disabled state */

.switch__input:disabled + .switch__track {
    opacity: 0.5;
    cursor: not-allowed;
}

.switch__input:disabled ~ .switch__label {
    color: var(--text-disable);
    cursor: not-allowed;
}

.switch__label {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-title);
}

/**
 * Nimbus Design System - Text Inputs
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Anatomy: Label, Input Field, Helper Text, Trailing Icon
 * Variants: Default, Search
 */

/* ==========================================
   INPUT FIELD WRAPPER
   ========================================== */

.input-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.input-field__label {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
}

.input-field__helper {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    color: var(--text-paragraph);
}

.input-field__helper--error {
    color: #c62828;
}

/* ==========================================
   INPUT CONTAINER
   ========================================== */

.input {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-40);
    border-radius: var(--radius-sm);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.input:hover {
    border-color: var(--border-60);
}

.input:focus-within {
    border-color: var(--border-100);
    box-shadow: 0 0 0 1px var(--border-100);
}

/* Error state */

.input--error {
    border-color: #c62828;
}

.input--error:focus-within {
    border-color: #c62828;
    box-shadow: 0 0 0 1px #c62828;
}

/* Disabled state */

.input--disabled {
    background-color: var(--bg-button-disable);
    border-color: var(--border-20);
    cursor: not-allowed;
}

/* ==========================================
   INPUT ELEMENT
   ========================================== */

.input__field {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-title);
    padding: 0;
    min-width: 0;
}

.input__field::placeholder {
    color: var(--text-disable);
}

.input__field:disabled {
    cursor: not-allowed;
    color: var(--text-disable);
}

/* ==========================================
   INPUT ICONS / TRAILING
   ========================================== */

.input__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-secondary);
    flex-shrink: 0;
}

.input__trailing {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--text-paragraph);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
}

.input__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    background: transparent;
    color: var(--icon-secondary);
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
}

.input__clear:hover {
    background-color: var(--bg-surface-secondary);
    color: var(--text-title);
}

/* ==========================================
   SEARCH INPUT
   ========================================== */

.input--search {
    padding-left: var(--spacing-3);
}

.input--search .input__icon {
    order: -1;
}

/* ==========================================
   INPUT SIZES
   ========================================== */

.input--sm {
    padding: var(--spacing-1) var(--spacing-2);
}

.input--sm .input__field {
    font-size: var(--font-size-xs);
}

.input--lg {
    padding: var(--spacing-3) var(--spacing-4);
}

.input--lg .input__field {
    font-size: var(--font-size-m);
}

/* ==========================================
   TEXTAREA
   ========================================== */

.textarea {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-40);
    border-radius: var(--radius-sm);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.textarea:hover {
    border-color: var(--border-60);
}

.textarea:focus-within {
    border-color: var(--border-100);
    box-shadow: 0 0 0 1px var(--border-100);
}

.textarea__field {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-title);
    resize: vertical;
    min-height: 80px;
    padding: 0;
}

.textarea__field::placeholder {
    color: var(--text-disable);
}

/* ==========================================
   SELECT
   ========================================== */

.select {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-40);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.select:hover {
    border-color: var(--border-60);
}

.select:focus-within {
    border-color: var(--border-100);
    box-shadow: 0 0 0 1px var(--border-100);
}

.select__field {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-title);
    cursor: pointer;
    appearance: none;
    padding: 0;
    min-width: 0;
}

.select__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-secondary);
    flex-shrink: 0;
    pointer-events: none;
}

/**
 * Nimbus Design System - Content Switcher
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Segmented control with pill highlight
 * Variants: Text labels, Icon labels
 */

/* ==========================================
   CONTENT SWITCHER CONTAINER
   ========================================== */

.switcher {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1);
    background-color: var(--bg-cs-bg);
    border-radius: var(--radius-full);
    gap: var(--spacing-1);
}

/* ==========================================
   SWITCHER ITEM
   ========================================== */

.switcher__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-4);
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.switcher__item:hover {
    color: var(--text-title);
}

/* Selected state */

.switcher__item--selected {
    background-color: var(--bg-cs-highlight);
    color: var(--text-title);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-sm);
}

/* Disabled state */

.switcher__item:disabled,
.switcher__item--disabled {
    color: var(--text-disable);
    cursor: not-allowed;
}

/* ==========================================
   SWITCHER ICON
   ========================================== */

.switcher__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
}

/* Icon-only variant */

.switcher__item--icon-only {
    padding: var(--spacing-2);
}

/* ==========================================
   SWITCHER SIZES
   ========================================== */

.switcher--sm {
    padding: 2px;
}

.switcher--sm .switcher__item {
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-xs);
}

.switcher--lg .switcher__item {
    padding: var(--spacing-2) var(--spacing-5);
    font-size: var(--font-size-m);
}

/**
 * Nimbus Design System - Tabs
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Underline style tabs
 * States: selected (bold + underline), unselected, inactive
 * Can have icon + text labels
 */

/* ==========================================
   TABS CONTAINER
   ========================================== */

.tabs {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    border-bottom: 1px solid var(--border-20);
}

.tabs--no-border {
    border-bottom: none;
}

/* ==========================================
   TAB ITEM
   ========================================== */

.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    padding-bottom: calc(var(--spacing-2) - 2px);
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab:hover {
    color: var(--text-title);
}

/* Selected state */

.tab--selected {
    color: var(--text-title);
    font-weight: var(--font-weight-bold);
    border-bottom-color: var(--border-100);
}

/* Inactive/disabled state */

.tab--inactive,
.tab:disabled {
    color: var(--text-disable);
    cursor: not-allowed;
}

.tab--inactive:hover,
.tab:disabled:hover {
    color: var(--text-disable);
}

/* ==========================================
   TAB ICON
   ========================================== */

.tab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ==========================================
   TAB MORE / OVERFLOW
   ========================================== */

.tab--more {
    color: var(--text-paragraph);
}

.tab--more .tab__icon {
    margin-left: var(--spacing-1);
}

/* ==========================================
   TABS VARIANTS
   ========================================== */

/* Compact tabs */

.tabs--compact .tab {
    padding: var(--spacing-1) var(--spacing-2);
    padding-bottom: calc(var(--spacing-1) - 2px);
    font-size: var(--font-size-xs);
}

/* Pill tabs (no underline, background highlight) */

.tabs--pill {
    border-bottom: none;
    background-color: var(--bg-surface-secondary);
    padding: var(--spacing-1);
    border-radius: var(--radius-md);
    gap: var(--spacing-1);
}

.tabs--pill .tab {
    border-bottom: none;
    margin-bottom: 0;
    border-radius: var(--radius-sm);
    padding: var(--spacing-1) var(--spacing-3);
}

.tabs--pill .tab--selected {
    background-color: var(--bg-surface-primary);
    box-shadow: var(--shadow-sm);
}

/* ==========================================
   TAB PANEL (content area)
   ========================================== */

.tab-panel {
    padding: var(--spacing-4) 0;
}

.tab-panel[hidden] {
    display: none;
}

/**
 * Nimbus Design System - Notifications / Toasts
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Anatomy: Icon, Title, Description, Action Button, Close Button
 * Style: Dark background, pill-shaped
 */

/* ==========================================
   NOTIFICATION / TOAST
   ========================================== */

.notification {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background-color: #232933;
    border-radius: var(--radius-full);
    color: #ffffff;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
}

/* ==========================================
   NOTIFICATION ICON
   ========================================== */

.notification__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* Icon variants */

.notification__icon--error {
    background-color: #c62828;
    color: #ffffff;
}

.notification__icon--warning {
    background-color: #e65100;
    color: #ffffff;
}

.notification__icon--success {
    background-color: #2e7d32;
    color: #ffffff;
}

.notification__icon--info {
    background-color: #1565c0;
    color: #ffffff;
}

/* ==========================================
   NOTIFICATION CONTENT
   ========================================== */

.notification__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification__title {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification__description {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================
   NOTIFICATION ACTIONS
   ========================================== */

.notification__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

.notification__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-1) var(--spacing-3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: #ffffff;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.notification__action:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.notification__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.notification__close:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================
   NOTIFICATION VARIANTS
   ========================================== */

/* Compact - no description */

.notification--compact {
    padding: var(--spacing-2) var(--spacing-3);
}

.notification--compact .notification__icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* Light theme notification */

.notification--light {
    background-color: var(--bg-surface-primary);
    color: var(--text-title);
    border: 1px solid var(--border-20);
}

.notification--light .notification__title {
    color: var(--text-title);
}

.notification--light .notification__description {
    color: var(--text-paragraph);
}

.notification--light .notification__action {
    color: var(--text-title);
    border-color: var(--border-40);
}

.notification--light .notification__action:hover {
    background-color: var(--bg-surface-secondary);
}

.notification--light .notification__close {
    color: var(--icon-secondary);
}

.notification--light .notification__close:hover {
    color: var(--text-title);
    background-color: var(--bg-surface-secondary);
}

/* ==========================================
   NOTIFICATION CONTAINER (for stacking)
   ========================================== */

.notification-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    z-index: var(--z-tooltip);
    pointer-events: none;
}

.notification-container > * {
    pointer-events: auto;
}

/* Position variants */

.notification-container--top-right {
    top: var(--spacing-4);
    right: var(--spacing-4);
}

.notification-container--top-center {
    top: var(--spacing-4);
    left: 50%;
    transform: translateX(-50%);
}

.notification-container--bottom-right {
    bottom: var(--spacing-4);
    right: var(--spacing-4);
}

.notification-container--bottom-center {
    bottom: var(--spacing-4);
    left: 50%;
    transform: translateX(-50%);
}

/**
 * Nimbus Design System - Info Tags / Badges
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Small inline status text indicators
 * Variants: Success (green), Error (red), Warning (amber), Neutral
 */

/* ==========================================
   INFO TAG
   ========================================== */

.info-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
}

/* Separator between parts */

.info-tag__separator {
    opacity: 0.6;
}

/* ==========================================
   INFO TAG VARIANTS
   ========================================== */

/* Success / Passed (green) */

.info-tag--success {
    background-color: rgba(46, 125, 50, 0.1);
    color: #2e7d32;
}

/* Error / Failed (red) */

.info-tag--error {
    background-color: rgba(198, 40, 40, 0.1);
    color: #c62828;
}

/* Warning (amber) */

.info-tag--warning {
    background-color: rgba(230, 81, 0, 0.1);
    color: #e65100;
}

/* Neutral / Default */

.info-tag--neutral {
    background-color: var(--bg-surface-secondary);
    color: var(--text-paragraph);
}

/* ==========================================
   BADGE
   Small pill-shaped indicator
   ========================================== */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-2);
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

/* Badge variants */

.badge--primary {
    background-color: var(--bg-button-primary);
    color: var(--text-invert);
}

.badge--secondary {
    background-color: var(--bg-surface-secondary);
    color: var(--text-paragraph);
}

.badge--success {
    background-color: #2e7d32;
    color: #ffffff;
}

.badge--error {
    background-color: #c62828;
    color: #ffffff;
}

.badge--warning {
    background-color: #e65100;
    color: #ffffff;
}

/* Dot badge (no text, just indicator) */

.badge--dot {
    width: 0.5rem;
    height: 0.5rem;
    min-width: 0.5rem;
    padding: 0;
}

/* Outline badge */

.badge--outline {
    background-color: transparent;
    border: 1px solid currentColor;
}

.badge--outline.badge--primary {
    color: var(--bg-button-primary);
}

.badge--outline.badge--success {
    color: #2e7d32;
}

.badge--outline.badge--error {
    color: #c62828;
}

.badge--outline.badge--warning {
    color: #e65100;
}

/**
 * Nimbus Design System - Card Repeater Component
 *
 * A panel/list container that wraps repeated Card entries.
 * Shows either a list of cards or a centered empty state.
 *
 * Usage:
 *   <div class="card-repeater">
 *     <div class="card-repeater__header">
 *       <span class="card-repeater__title">Events <span class="card-repeater__title-count">· 2</span></span>
 *       <div class="card-repeater__actions">...</div>
 *     </div>
 *     <div class="card-repeater__body">
 *       <div class="card-repeater__list">...</div>
 *       <!-- or when empty: -->
 *       <div class="card-repeater__empty">
 *         <span class="card-repeater__empty-icon">...</span>
 *         <span class="card-repeater__empty-label">Events cleared</span>
 *       </div>
 *     </div>
 *   </div>
 */

/* ==========================================
   CARD REPEATER CONTAINER
   ========================================== */

.card-repeater {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 0;
}

/* ==========================================
   HEADER
   Title row with optional action buttons
   ========================================== */

.card-repeater__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4);
    flex-shrink: 0;
}

.card-repeater__title {
    font-family: var(--font-family);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
}

.card-repeater__title-count {
    font-weight: var(--font-weight-bold);
    color: var(--text-paragraph);
}

.card-repeater__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* ==========================================
   BODY
   ========================================== */

.card-repeater__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ==========================================
   CARD LIST
   Populated state — stacked cards
   ========================================== */

.card-repeater__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    padding: var(--spacing-6);
    padding-top: 0;
    padding-right: var(--spacing-2);
    margin-right: var(--spacing-2);
    overflow-y: auto;
    min-height: 0;
}

/* ==========================================
   EMPTY STATE
   Centred icon + label when no cards present
   ========================================== */

.card-repeater__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-8);
    flex: 1;
    min-height: 200px;
}

.card-repeater__empty-icon {
    color: var(--icon-disable);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-repeater__empty-label {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
}

/**
 * Nimbus Design System - Drawer Component
 * A slide-in panel from the right side of the screen
 */

/* ==========================================
   OVERLAY / BACKDROP
   ========================================== */

.drawer-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
}

.drawer-overlay--open {
    opacity: 1;
    pointer-events: all;
}

/* ==========================================
   DRAWER PANEL
   ========================================== */

.drawer {
    position: fixed;
    top: var(--spacing-4);
    bottom: var(--spacing-4);
    right: var(--spacing-4);
    height: auto;
    width: 575px;
    max-width: calc(100vw - var(--spacing-4) * 2);
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    transform: translateX(calc(100% + var(--spacing-4)));
    transition:
        transform var(--transition-slow),
        top var(--transition-slow),
        bottom var(--transition-slow),
        right var(--transition-slow),
        width var(--transition-slow),
        max-width var(--transition-slow),
        border-radius var(--transition-slow);
}

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

.drawer--expanded {
    top: 0;
    bottom: 0;
    right: 0;
    width: 86vw;
    max-width: 86vw;
    border-radius: 0;
}

/* ==========================================
   DRAWER HEADER
   ========================================== */

.drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--border-20);
    flex-shrink: 0;
}

.drawer__header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

.drawer__header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

.drawer__title {
    font-family: var(--font-family);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
    margin: 0;
    flex: 1;
}

/* ==========================================
   DRAWER BODY
   ========================================== */

.drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-6);
}

/**
 * Nimbus Design System - Modal Component
 */

/* ==========================================
   BACKDROP
   ========================================== */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--spacing-4);
}

/* ==========================================
   MODAL CONTAINER
   ========================================== */

.modal {
    background: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-6);
    width: 480px;
    max-width: 100%;
    max-height: calc(100vh - var(--spacing-4) * 2);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.modal--sm {
    width: 360px;
}

.modal--lg {
    width: 640px;
}

/* ==========================================
   MODAL SECTIONS
   ========================================== */

.modal__header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.modal__title {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
}

.modal__subtitle {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
}

.modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    overflow-y: auto;
}

.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

/**
 * Nimbus Design System - Status Pill
 * Based on Figma Style Guide
 *
 * Outlined pill indicator showing a current status or mode.
 * Renders as a <span> by default; use the interactive variant for clickable pills.
 */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-bottom-width: 2px;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--text-title);
    white-space: nowrap;
}

.status-pill--interactive {
    cursor: pointer;
}

.status-pill--interactive:hover:not(:disabled) {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-40);
}

.status-pill--interactive:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

.status-pill--interactive:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
/* ===========================================
   System status pill trigger
   =========================================== */

._pill_kco7z_5 {
    gap: 8px;
    padding: 8px 12px 8px 16px;
}

._label_kco7z_10 {
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
    white-space: nowrap;
    line-height: 1;
}

._statusGroup_kco7z_19 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 4px;
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: 8px;
}

._statusGroupItem_kco7z_29 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

._statusCell_kco7z_35 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
}

._dot_kco7z_43 {
    width: 10px;
    height: 10px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-surface-primary);
    flex-shrink: 0;
}

._dot_kco7z_43::after {
    content: "";
    width: 7.5px;
    height: 7.5px;
    border-radius: 99px;
    background-color: currentColor;
}

._dotOnline_kco7z_62 {
    color: var(--color-cleared);
}

._dotOffline_kco7z_66 {
    color: var(--color-fire);
}

._divider_kco7z_70 {
    width: 1px;
    height: 20px;
    background-color: var(--border-20);
    flex-shrink: 0;
}

._statusIcon_kco7z_77 {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-title);
    font-size: 16px;
}

/* ===========================================
   Dropdown content
   =========================================== */

._dropdownTitle_kco7z_91 {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
}

._dropdownList_kco7z_98 {
    display: flex;
    flex-direction: column;
    padding: 4px 0 0;
    min-width: 300px;
}

._dropdownRow_kco7z_105 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
}

._dropdownRowMuted_kco7z_112 {
    opacity: 0.55;
}

._dropdownIconBox_kco7z_116 {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

._dropdownIconBoxOnline_kco7z_127 {
    background-color: var(--color-cleared);
    color: #ffffff;
}

._dropdownIconBoxOffline_kco7z_132 {
    background-color: #edeff2;
    color: #8b95a2;
}

._dropdownLabel_kco7z_137 {
    flex: 1;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-title);
    white-space: nowrap;
}

._dropdownLabelMuted_kco7z_146 {
    color: var(--text-secondary, #6b7280);
}

/* ===========================================
   Info box
   =========================================== */

._infoBox_kco7z_154 {
    margin: 4px 16px 8px;
    padding: 10px 12px;
    background-color: #f5f6f8;
    border-radius: 8px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-family: var(--font-family);
    font-size: 12px;
    color: var(--text-paragraph, #4b5563);
    line-height: 1.5;
}

._infoIcon_kco7z_168 {
    color: #6b7280;
    flex-shrink: 0;
    font-size: 14px;
    margin-top: 1px;
}

._helpLink_kco7z_175 {
    color: var(--color-primary, #1a7ae8);
    text-decoration: underline;
    cursor: pointer;
}

/* ===========================================
   Footer
   =========================================== */

._footer_kco7z_185 {
    border-top: 1px solid #edeff2;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

._footerRow_kco7z_193 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--font-family);
    font-size: 12px;
}

._footerLabel_kco7z_202 {
    color: var(--text-secondary, #6b7280);
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
}

._footerValue_kco7z_208 {
    color: var(--text-title);
    font-weight: var(--font-weight-semibold, 600);
    white-space: nowrap;
}
/* ===========================================
   FLARE ISM - Home Page Styles (CSS Module)
   Theme CSS imported in Home.tsx as side-effects
   =========================================== */

._home_1vvkd_6 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    height: var(--content-height, calc(100vh - var(--spacing-5) - 5rem));
}

/* ===========================================
   Header Section
   =========================================== */

._header_1vvkd_17 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    overflow: hidden;
}

._datetime_1vvkd_25 {
    font-size: 15px;
    font-weight: 600;
    color: #828b99;
}

._location_1vvkd_31 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #101828;
    margin: 0;
}

._sites_1vvkd_39 {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-top: var(--spacing-2);
}

._sitesLabel_1vvkd_46 {
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
    font-weight: var(--font-weight-regular);
}

._siteChip_1vvkd_52 {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-20);
    background-color: var(--bg-surface-primary);
    font-size: var(--font-size-sm);
    color: var(--text-title);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

._siteChip_1vvkd_52:hover {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-40);
}

._siteChipActive_1vvkd_70 {
    background-color: var(--bg-surface-primary);
    border-color: var(--border-40);
}

._connectionBadge_1vvkd_76 {
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background-color: #f44336;
    color: white;
}

._connectionBadge_1vvkd_76[data-connected="true"] {
    background-color: #4caf50;
}

/* ===========================================
   Main Content - Two Column Layout
   =========================================== */

._content_1vvkd_93 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-5);
    flex: 1;
    min-height: 0;
}

/* ---------------------------------------------------------------
   Demo-only override for shared CardRepeater list — see
   project_flare_demo_style_overrides memory. Revert once
   @lancontrolsystems/nimbus-web-components is updated to use
   scrollbar-gutter: stable.
   --------------------------------------------------------------- */
._content_1vvkd_93 .card-repeater__list {
    /* Right gutter reserved for scrollbar; left padding matches so both sides
       look equal when the scrollbar is visible. Slight right-side extra space
       when no scrollbar — acceptable trade-off vs both-edges asymmetry. */
    padding: 0 var(--spacing-6);
    margin-right: 0;
    scrollbar-gutter: stable;
}

._content_1vvkd_93 .card-repeater__header {
    padding: 0 var(--spacing-8);
}

._content_1vvkd_93 .card-repeater__title,
._content_1vvkd_93 .card-repeater__title-count {
    font-size: 13px;
    font-weight: 600;
}

._content_1vvkd_93 .card-repeater {
    border-color: var(--border-20);
    border-radius: 24px;
    padding: var(--spacing-8) 0;
    gap: var(--spacing-6);
}

/* ---------------------------------------------------------------
   Demo-only override for shared Button — 2px bottom border on all
   buttons, lighter #EDEFF2 border on outlined variants. Revert once
   @lancontrolsystems/nimbus-web-components is updated.
   --------------------------------------------------------------- */
._content_1vvkd_93 .btn {
    border-bottom-width: 2px;
}

._content_1vvkd_93 .btn--secondary,
._content_1vvkd_93 .btn--ghost {
    border-color: var(--border-20);
}

/* ---------------------------------------------------------------
   Remove default focus ring on mouse click for all buttons in the
   flare-ism content area. Keep keyboard focus ring via :focus-visible
   for accessibility.
   --------------------------------------------------------------- */
._content_1vvkd_93 button:focus {
    outline: none;
}

._content_1vvkd_93 button:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Shared Button :focus styles look identical to :hover, causing
   buttons to appear "stuck" in hover state after mouse click (focus
   persists after the drawer opens/closes). Suppress :focus colour
   styling for non-keyboard focus — revert to the base variant look.
   Keyboard focus still shows the outline via :focus-visible above.
   --------------------------------------------------------------- */
._content_1vvkd_93 .btn--secondary:focus:not(:focus-visible),
._content_1vvkd_93 .btn--ghost:focus:not(:focus-visible) {
    background-color: transparent;
    border-color: var(--border-20);
    color: var(--text-title);
}

._content_1vvkd_93 .btn--primary:focus:not(:focus-visible) {
    background-color: var(--bg-button-primary);
    color: var(--text-invert);
}

/* ---------------------------------------------------------------
   Demo-only Drawer overrides. Drawer is portalled to <body>, so
   these selectors are unscoped :global(). Revert once the shared
   Drawer is updated to match this spec.
   --------------------------------------------------------------- */
.drawer {
    top: 60px !important;
    bottom: 60px !important;
    right: 60px;
    border-color: var(--border-20);
    border-radius: 24px !important;
    box-shadow: none !important;
    overflow: hidden;
}

.drawer__header {
    padding: var(--spacing-6) !important;
    padding-bottom: var(--spacing-2) !important;
    border-bottom: none !important;
}

/* Hide the Drawer's built-in "Remote Control" button (no Drawer prop to disable it).
   It's the only button in drawer__header-left without an aria-label. */
.drawer__header-left > button:not([aria-label]) {
    display: none;
}

.drawer__header-left > button {
    height: 36px;
}

.drawer__header-left > button:focus,
.drawer__header-right > button:focus {
    outline: none;
}

.drawer__header-left > button:focus-visible,
.drawer__header-right > button:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

.drawer__title {
    white-space: nowrap;
}

.drawer__body {
    padding: var(--spacing-6) !important;
    margin-bottom: var(--spacing-6);
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------
   Demo-only Modal overrides. Modal is portalled to <body>, so
   selectors are unscoped :global(). Revert once the shared Modal
   is updated to match the spec.
   --------------------------------------------------------------- */
.modal {
    border-radius: 24px !important;
    gap: var(--spacing-3) !important; /* subtitle → body: 12px */
}

.modal__header {
    gap: var(--spacing-6) !important; /* title → subtitle: 24px */
}

.modal__title {
    font-size: var(--font-size-m) !important; /* 15px */
}

.modal__subtitle {
    font-size: var(--font-size-sm) !important; /* 12px */
    font-weight: 500 !important;
}

.modal__body {
    gap: 0 !important; /* let individual children drive their spacing */
}

.modal__footer {
    margin-top: var(
        --spacing-3
    ) !important; /* combined with modal gap (12px), gives 24px body → footer */
}

/* ===========================================
   Device Panel Filters
   =========================================== */

/* Stack title and filter row vertically in the Devices panel only. */
._devicesPanel_1vvkd_271 .card-repeater__header {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--spacing-3);
    overflow: hidden;
}

/* Force the actions wrapper to fill the full header width */
._devicesPanel_1vvkd_271 .card-repeater__actions {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Grid gives each filter column a hard 1fr width — avoids flex percentage resolution issues */
._deviceFilters_1vvkd_287 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
    min-width: 0;
}

/* Trigger button — styled as secondary button */
._filterTrigger_1vvkd_295 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 6px var(--spacing-3);
    border: 1px solid #e3e4e6;
    border-bottom-width: 2px;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

._filterTrigger_1vvkd_295:hover {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-40);
}

._filterTrigger_1vvkd_295:focus {
    outline: none;
}

._filterTrigger_1vvkd_295:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

._filterTriggerActive_1vvkd_332 {
    border-color: var(--border-40);
    background-color: var(--bg-surface-secondary);
}

._filterChevron_1vvkd_337 {
    font-size: 9px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

._filterTriggerLabel_1vvkd_343 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

._filterChevronOpen_1vvkd_351 {
    transform: rotate(180deg);
}

/* Portalled dropdown — same pattern as AlertCard splitBtnDropdown */
._filterDropdown_1vvkd_356 {
    position: absolute;
    background: var(--bg-surface-primary);
    border: 1px solid #e3e4e6;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 400;
    min-width: 160px;
    max-width: min(280px, calc(100vw - var(--spacing-8)));
    overflow: hidden;
}

._filterDropdownItem_1vvkd_368 {
    display: block;
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-title);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color var(--transition-fast);
}

._filterDropdownItem_1vvkd_368:hover:not(:disabled) {
    background: var(--bg-surface-secondary);
}

._filterDropdownItemSelected_1vvkd_390 {
    font-weight: 600;
}

._filterDropdownItemDisabled_1vvkd_394 {
    color: var(--text-disabled, #adb5bd);
    cursor: not-allowed;
}

/* ===========================================
   Panel Styles
   =========================================== */

._panel_1vvkd_403 {
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-40);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

._panelHeader_1vvkd_412 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--border-20);
}

._panelTitle_1vvkd_420 {
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-semibold);
    color: var(--text-title);
    margin: 0;
}

._panelAction_1vvkd_427 {
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-40);
    background-color: var(--bg-surface-primary);
    font-size: var(--font-size-sm);
    color: var(--text-title);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

._panelAction_1vvkd_427:hover {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-60);
}

._panelBody_1vvkd_445 {
    flex: 1;
    padding: var(--spacing-5);
    overflow-y: auto;
    min-height: 400px;
}

/* ===========================================
   Alert Card — FLARE ISM pill-banner override
   Sets banner to inset pill shape via CSS variables
   =========================================== */

._alertWrap_1vvkd_457 {
    --alert-banner-radius: var(--radius-full);
    --alert-banner-margin: var(--spacing-4) var(--spacing-4) var(--spacing-4);
}

/* ===========================================
   Fire / Fault Event Overlay
   Covers full viewport; pointer-events: none so content remains interactive.
   Gradient covers outer 50% from each edge (50% colour coverage).
   =========================================== */

._fireOverlay_1vvkd_468 {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(to bottom, var(--fire-overlay-color) 0%, white 100%);
}

/* Gateways panel is non-interactive and greyed out when offline — alerts remain accessible (cached) */
._content_1vvkd_93[data-offline] ._devicesPanel_1vvkd_271 {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
}

/* Dim individual pills when offline, keeping system status and profile interactive */
html[data-flare-offline]
        .pill-wrapper:not([data-pill-id="flare-ism-system-status"]):not([data-pill-id="profile"]) {
    opacity: 0.5;
    pointer-events: none;
}

._fireOverlayFire_1vvkd_492 {
    --fire-overlay-color: rgba(230, 37, 30, 0.6);
}

._fireOverlayFault_1vvkd_496 {
    --fire-overlay-color: rgba(255, 212, 85, 0.6);
}

._fireOverlayPulsing_1vvkd_500 {
    animation: _firePulse_1vvkd_1 800ms ease-in-out infinite alternate;
}

._fireOverlayOffline_1vvkd_504 {
    --fire-overlay-color: rgba(150, 150, 150, 0.4);
    animation: none;
}

@keyframes _firePulse_1vvkd_1 {
    from {
        opacity: 0.2;
    }
    to {
        opacity: 1;
    }
}

/* ===========================================
   Skeleton loader — maintains two-column grid
   structure during initial page load to prevent
   layout shift while shared CSS is applied.
   =========================================== */

._skeletonPanel_1vvkd_524 {
    background: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: 24px;
    padding: var(--spacing-8) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    overflow: hidden;
}

._skeletonHeader_1vvkd_535 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-8);
}

._skeletonTitle_1vvkd_542 {
    width: 80px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--bg-surface-secondary) 25%,
        var(--bg-surface-invert) 50%,
        var(--bg-surface-secondary) 75%
    );
    background-size: 200% 100%;
    animation: _skeletonShimmer_1vvkd_1 1.5s infinite;
}

._skeletonAction_1vvkd_556 {
    width: 110px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        var(--bg-surface-secondary) 25%,
        var(--bg-surface-invert) 50%,
        var(--bg-surface-secondary) 75%
    );
    background-size: 200% 100%;
    animation: _skeletonShimmer_1vvkd_1 1.5s infinite;
}

._skeletonList_1vvkd_570 {
    padding: 0 var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    flex: 1;
    scrollbar-gutter: stable both-edges;
}

._skeletonCard_1vvkd_579 {
    height: 160px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        var(--bg-surface-secondary) 25%,
        var(--bg-surface-invert) 50%,
        var(--bg-surface-secondary) 75%
    );
    background-size: 200% 100%;
    animation: _skeletonShimmer_1vvkd_1 1.5s infinite;
}

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

._spin_1vvkd_601 {
    animation: _spin_1vvkd_601 700ms linear infinite;
}

@keyframes _spin_1vvkd_601 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ===========================================
   Responsive Adjustments
   =========================================== */

@media (max-width: 1200px) {
    ._content_1vvkd_93 {
        grid-template-columns: 1fr;
    }
}
/* ===========================================
   Alert Card
   =========================================== */

._card_15vz5_5 {
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-bottom-width: 2px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-6);
}

/* ===========================================
   Compact row variant (Cleared Alerts drawer)
   =========================================== */

._compactCard_15vz5_20 {
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

._compactPill_15vz5_32 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background-color: var(--bg-surface-secondary);
    border-radius: 99px;
    padding: 12px 12px 12px 24px;
    width: 100%;
    box-sizing: border-box;
}

._compactPillLeft_15vz5_44 {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Must stay shrinkable or the ellipsis never engages. */
._compactPillTitle_15vz5_54 {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    min-width: 0;
    max-width: 100%;
}

/* Yields before the name shrinks. */
._compactPillTime_15vz5_68 {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
    white-space: nowrap;
    flex-shrink: 100;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

._compactPillSep_15vz5_80 {
    color: inherit;
    opacity: 0.6;
    font-weight: var(--font-weight-regular);
}

._compactPillRight_15vz5_86 {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--bg-surface-primary);
    border-radius: 99px;
    padding: 4px 4px 4px 12px;
    flex-shrink: 0;
}

._compactPillStatus_15vz5_96 {
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-paragraph);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

._compactPillStatusTime_15vz5_107 {
    color: var(--text-title);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
}

._compactPillBadge_15vz5_113 {
    width: 24px;
    height: 24px;
    border-radius: 99px;
    background-color: var(--color-cleared);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
}

._compactMeta_15vz5_126 {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 4px;
    flex-wrap: wrap;
}

._compactMetaItem_15vz5_134 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-paragraph);
    min-width: 0;
}

._compactMetaLabel_15vz5_145 {
    color: var(--text-paragraph);
    font-weight: var(--font-weight-semibold, 600);
}

._compactMetaSep_15vz5_150 {
    color: var(--text-paragraph);
    opacity: 0.6;
}

._compactMetaValue_15vz5_155 {
    color: var(--text-title);
    font-weight: var(--font-weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

._compactActions_15vz5_163 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

._compactActions_15vz5_163 .btn {
    border-bottom-width: 2px;
}

/* ===========================================
   Banner
   =========================================== */

._banner_15vz5_177 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-1);
    padding-left: var(--spacing-4);
    border-radius: var(--alert-banner-radius, var(--radius-lg) var(--radius-lg) 0 0);
    margin-bottom: var(--spacing-6);
}

._bannerFireAlarm_15vz5_188 {
    background-color: var(--color-fire);
}

._bannerFault_15vz5_192 {
    background-color: #ffd455;
    color: #1a1a1a;
}

._bannerPreAlarm_15vz5_197 {
    background-color: var(--color-fire);
}

._bannerIsolate_15vz5_201 {
    background-color: #7f8c8d;
}

._bannerTest_15vz5_205 {
    background-color: #2980b9;
}

._bannerDefault_15vz5_209 {
    background-color: var(--color-fire);
}

._bannerFault_15vz5_192 ._bannerLeft_15vz5_213,
._bannerFault_15vz5_192 ._alertType_15vz5_214,
._bannerFault_15vz5_192 ._relativeTime_15vz5_215 {
    color: #1a1a1a;
}

._bannerLeft_15vz5_213 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    min-width: 0;
    color: #fff;
}

._alertType_15vz5_214 {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: #fff;
    white-space: nowrap;
}

._bannerSep_15vz5_235 {
    opacity: 0.6;
    font-weight: var(--font-weight-regular);
}

._relativeTime_15vz5_215 {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

._bannerRight_15vz5_248 {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-shrink: 0;
    background-color: var(--bg-surface-primary);
    border-radius: var(--radius-full);
    padding: var(--spacing-1);
    padding-left: var(--spacing-3);
}

._statusGroup_15vz5_259 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

._statusLabel_15vz5_268 {
    font-weight: 600;
}

._statusTime_15vz5_272 {
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
    color: var(--text-title);
}

._iconButtons_15vz5_278 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

._iconBtn_15vz5_284 {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-20);
    border-bottom-width: 2px;
    background-color: var(--bg-surface-secondary);
    color: var(--icon-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color var(--transition-fast);
    padding: 0;
}

._iconBtn_15vz5_284:hover {
    background-color: var(--bg-surface-tertiary, var(--bg-surface-secondary));
}

._iconBtnTriggered_15vz5_305 {
    background-color: var(--color-fire);
    color: #fff;
    border-color: transparent;
}

._iconBtnTriggered_15vz5_305:hover {
    background-color: #c41f19;
}

._iconBtnRead_15vz5_315 {
    background-color: #ed6a07;
    color: #fff;
    border-color: transparent;
}

._iconBtnRead_15vz5_315:hover {
    background-color: #c45706;
}

._iconBtnAcknowledged_15vz5_325 {
    background-color: #fdbf09;
    color: #fff;
    border-color: transparent;
}

._iconBtnAcknowledged_15vz5_325:hover {
    background-color: #d4a007;
}

._iconBtnCleared_15vz5_335 {
    background-color: var(--color-cleared);
    color: #fff;
    border-color: transparent;
}

._iconBtnCleared_15vz5_335:hover {
    background-color: #47801d;
}

/* ===========================================
   Body
   =========================================== */

._body_15vz5_349 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

._bodyFrame_15vz5_355 {
    border: 1px solid var(--border-20);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
}

._infoGrid_15vz5_365 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-3);
}

._infoCard_15vz5_371 {
    background-color: var(--bg-surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-1);
}

._infoLabel_15vz5_381 {
    font-family: var(--font-family);
    font-size: 10px;
    color: var(--text-paragraph);
    font-weight: 600;
}

._infoValue_15vz5_388 {
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-title);
    font-weight: 700;
    line-height: 1.3;
}

._meta_15vz5_396 {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
}

._metaItem_15vz5_402 {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
}

._metaLabel_15vz5_410 {
    color: var(--text-paragraph);
    font-size: 12px;
    font-weight: 600;
}

._metaSep_15vz5_416 {
    color: var(--text-paragraph);
}

._metaValue_15vz5_420 {
    color: var(--text-title);
    font-size: 12px;
    font-weight: 700;
}

/* ===========================================
   Actions bar
   =========================================== */

._actions_15vz5_430 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
}

._actionsLeft_15vz5_437 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

._actionsRight_15vz5_443 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* Split button: Acknowledge + chevron */
._splitBtn_15vz5_450 {
    display: flex;
    align-items: stretch;
}

._splitBtnMain_15vz5_455 {
    height: 36px;
    background-color: var(--colour-grey-80, #303640);
    color: var(--text-invert);
    border-width: 0 1px 2px 0;
    border-style: solid;
    border-color: var(--colour-grey-70, #464e5c);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

._splitBtnMain_15vz5_455:hover {
    background-color: var(--colour-grey-70, #464e5c);
}

._splitBtnChevron_15vz5_479 {
    height: 36px;
    background-color: var(--colour-grey-80, #303640);
    color: var(--text-invert);
    border-width: 0 1px 2px 0;
    border-style: solid;
    border-color: var(--colour-grey-70, #464e5c);
    border-left: none;
    padding: 0 var(--spacing-3);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

._splitBtnChevron_15vz5_479:hover {
    background-color: var(--colour-grey-70, #464e5c);
}

._splitBtnMain_15vz5_455:focus,
._splitBtnChevron_15vz5_479:focus {
    outline: none;
}

._splitBtnMain_15vz5_455:focus-visible,
._splitBtnChevron_15vz5_479:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

/* Split button dropdown — rendered via portal to escape overflow:hidden */
._splitBtnDropdown_15vz5_516 {
    position: fixed;
    background: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 400;
    min-width: 220px;
    overflow: hidden;
}

._dropdownItem_15vz5_527 {
    display: block;
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-title);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

._dropdownItem_15vz5_527:hover {
    background: var(--bg-surface-secondary);
}

/* ===========================================
   Drawer-specific styles
   =========================================== */

._drawerBanner_15vz5_550 {
    margin-bottom: var(--spacing-6);
}

._drawerInfoGrid_15vz5_554 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 82px;
    gap: var(--spacing-2);
    margin-bottom: 24px;
}

._drawerInfoGrid_15vz5_554 ._infoLabel_15vz5_381 {
    font-size: 10px;
    font-weight: var(--font-weight-semibold, 600);
}

._drawerInfoGrid_15vz5_554 ._infoValue_15vz5_388 {
    font-size: 14px;
}

/* ===========================================
   Event mode pill (weekly test / service)

   Each mode sets --mode-pill-colour; the surfaces below choose fill or outline.
   =========================================== */

._modePillWeeklyTest_15vz5_577 {
    --mode-pill-colour: var(--color-mode-weekly-test, #285cc3);
}

._modePillService_15vz5_581 {
    --mode-pill-colour: var(--color-mode-service, #6d28d9);
}

/* Filled, for the coloured banners. */
._modePill_15vz5_577 {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    flex-shrink: 0;
    background-color: var(--mode-pill-colour);
    color: #fff;
}

/* Separates the pill from the preceding timestamp. */
._bannerLeft_15vz5_213 ._modePill_15vz5_577,
._compactPillLeft_15vz5_44 ._modePill_15vz5_577 {
    margin-left: var(--spacing-2);
}

/* Outlined and tighter on the compact row's neutral surface. */
._compactPillLeft_15vz5_44 ._modePill_15vz5_577 {
    padding: var(--spacing-1) var(--spacing-2);
    background-color: transparent;
    color: var(--mode-pill-colour);
    border: 1px solid var(--mode-pill-colour);
}

/* ===========================================
   Event Timeline
   =========================================== */

._timeline_15vz5_619 {
    border: 1px solid var(--border-20);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: var(--spacing-5);
    padding-bottom: 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._timelineHeader_15vz5_630 {
    font-family: var(--font-family);
    font-size: 10px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-paragraph);
    margin: 0 0 12px;
}

._timelineBody_15vz5_638 {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
}

/* Each row: fixed 33px icon column + flexible content column */
._timelineItem_15vz5_645 {
    display: grid;
    grid-template-columns: 33px 1fr;
    gap: 12px;
}

/* Icon column: circle on top, connector line stretching below */
._timelineIconCol_15vz5_652 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

._timelineIcon_15vz5_652 {
    width: 33px;
    height: 33px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    color: #fff;
}

/* Vertical line connecting one state to the next */
._timelineConnector_15vz5_672 {
    width: 2px;
    flex: 1;
    min-height: var(--spacing-5);
    background-color: var(--border-40);
    margin: 0;
}

/* State not yet reached — grey circle */
._timelineIconInactive_15vz5_681 {
    background-color: var(--bg-surface-tertiary, #e5e7eb) !important;
    color: var(--text-disabled, #9ca3af) !important;
}

._timelineIconTrigger_15vz5_686 {
    background-color: var(--color-fire);
}

._timelineIconRead_15vz5_690 {
    background-color: #ed6a07;
}

._timelineIconAck_15vz5_694 {
    background-color: #fdbf09;
}

._timelineIconClear_15vz5_698 {
    background-color: var(--color-cleared);
}

._timelineIconComment_15vz5_702 {
    background-color: #828b99;
}

._timelineContent_15vz5_706 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-3);
    flex: 1;
}

._timelineLabel_15vz5_715 {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    flex-wrap: wrap;
    line-height: 1.4;
}

._timelineLabelTime_15vz5_727 {
    font-weight: var(--font-weight-medium, 500);
}

/* Pending state label is dimmed */
._timelineLabelInactive_15vz5_732 {
    color: var(--text-disabled, #9ca3af);
    font-weight: var(--font-weight-regular);
}

._timelineSep_15vz5_737 {
    color: var(--text-paragraph);
    font-weight: var(--font-weight-regular);
    margin: 0 2px;
}

._timelineSubItem_15vz5_743 {
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

._timelineSubUser_15vz5_753 {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-title);
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

._timelineSubTitle_15vz5_764 {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-title);
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

._timelineSubComment_15vz5_775 {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-paragraph);
    line-height: 1.4;
    white-space: pre-wrap;
}

._timelineReasonBadge_15vz5_784 {
    align-self: flex-start;
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-invert);
    background: var(--bg-button-primary);
    border-radius: var(--radius-full, 999px);
    padding: 2px 10px;
    line-height: 1.6;
}

._addCommentBtn_15vz5_796 {
    align-self: flex-start;
}

/* Row that wraps the Add Comment button / form — tightens the gap to the
   preceding timelineItem so the visual gap to the comments above is 12px. */
._addCommentRow_15vz5_802 {
    margin-top: -12px;
}

._addCommentRow_15vz5_802 ._timelineContent_15vz5_706 {
    padding-top: 0;
}

/* ===========================================
   Inline comment form
   =========================================== */

._commentForm_15vz5_814 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-top: var(--spacing-2);
}

._commentTextarea_15vz5_821 {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border-20);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface-primary);
    color: var(--text-title);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    padding: var(--spacing-3);
    resize: none;
    field-sizing: content;
    outline: none;
    transition: border-color var(--transition-fast);
}

._commentTextarea_15vz5_821:focus {
    outline: none;
}

._commentTextarea_15vz5_821::placeholder {
    color: var(--text-disabled, #9ca3af);
}

._commentError_15vz5_845 {
    margin: 0;
    font-size: var(--font-size-s);
    color: var(--color-error, #d32f2f);
}

._commentFormActions_15vz5_851 {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
}

._spin_15vz5_857 {
    animation: _spin_15vz5_857 700ms linear infinite;
}

@keyframes _spin_15vz5_857 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
._backdrop_1f13k_1 {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

._modal_1f13k_11 {
    background: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: var(--spacing-6);
    width: 480px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

._title_1f13k_24 {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
}

._subtitle_1f13k_32 {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
}

._reasonsLoading_1f13k_40 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    margin: 4px 0px var(--spacing-6) 4px;
    font-size: var(--font-size-lg, 1.25rem);
    color: var(--text-paragraph);
}

._spin_1f13k_50 {
    animation: _spin_1f13k_50 700ms linear infinite;
}

@keyframes _spin_1f13k_50 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

._reasonTrigger_1f13k_63 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    border: none;
    box-shadow: inset 0 0 0 1px #d7dae0;
    background: var(--bg-surface-primary);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    outline: none;
}

/* Beats the app shell's global `button:focus-visible { outline: 2px solid ... }`
   (app-container/src/index.css), which otherwise wins on specificity over a
   single class selector regardless of cascade order. */
button._reasonTrigger_1f13k_63:focus,
button._reasonTrigger_1f13k_63:focus-visible {
    outline: none;
}

._reasonTriggerValue_1f13k_90 {
    color: var(--text-title);
}

._reasonTriggerPlaceholder_1f13k_94 {
    color: var(--text-paragraph);
    opacity: 0.6;
}

._reasonChevron_1f13k_99 {
    flex-shrink: 0;
    color: var(--text-paragraph);
    transition: transform var(--transition-fast, 0.15s);
}

._reasonChevronOpen_1f13k_105 {
    transform: rotate(180deg);
}

._reasonDropdown_1f13k_109 {
    position: fixed;
    z-index: 1100;
    width: 394px;
    max-width: calc(100vw - 32px);
    max-height: 318px;
    overflow-y: auto;
    background: var(--bg-surface-primary);
    border: none;
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 1px #d7dae0,
        0 8px 24px rgba(0, 0, 0, 0.2);
    padding: var(--spacing-1);
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
}

._reasonOption_1f13k_129 {
    text-align: left;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm, 4px);
    border: none;
    background: transparent;
    color: var(--text-title);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    cursor: pointer;
    outline: none;
    transition: background-color var(--transition-fast, 0.15s);
}

._reasonOption_1f13k_129:hover,
._reasonOption_1f13k_129:focus-visible {
    background: var(--bg-surface-secondary);
}

button._reasonOption_1f13k_129:focus,
button._reasonOption_1f13k_129:focus-visible {
    outline: none;
}

._reasonOptionSelected_1f13k_153 {
    background: var(--bg-button-primary);
    color: var(--text-invert);
    font-weight: var(--font-weight-bold);
}

._reasonOptionSelected_1f13k_153:hover {
    background: color-mix(in srgb, var(--bg-button-primary) 85%, white);
}

._validationMsg_1f13k_163 {
    margin: 0 0 var(--spacing-2) 0;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--color-alarm, #e53e3e);
}

._label_1f13k_170 {
    font-family: var(--font-family);
    font-size: var(--font-size-sm); /* 12px */
    font-weight: 500;
    color: var(--text-paragraph);
    margin-bottom: var(--spacing-2); /* 8px gap to textarea */
}

._textarea_1f13k_178 {
    width: 100%;
    resize: none;
    field-sizing: content;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    border: 1px solid #EDEFF2 /*var(--border-20)*/;
    background: var(--bg-surface-primary);
    color: var(--text-title);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-fast, 0.15s);
}

._textarea_1f13k_178:focus {
    border-color: var(--bg-button-primary);
}

._textarea_1f13k_178::placeholder {
    color: var(--text-paragraph);
    opacity: 0.5;
}

._actions_1f13k_203 {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

._cancelBtn_1f13k_210 {
    padding: var(--spacing-2) var(--spacing-5);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border-20);
    color: var(--text-title);
    transition: background-color var(--transition-fast, 0.15s);
}

._cancelBtn_1f13k_210:hover {
    background: var(--bg-surface-secondary);
}

._acknowledgeBtn_1f13k_227 {
    padding: var(--spacing-2) var(--spacing-5);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    background: var(--bg-button-primary);
    border: none;
    color: var(--text-invert);
    transition: background-color var(--transition-fast, 0.15s);
}

._acknowledgeBtn_1f13k_227:hover {
    background-color: color-mix(in srgb, var(--bg-button-primary) 85%, white);
}
/* Category pill buttons — selectable options inside the modal body */

._categories_11cfp_3 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin: 4px 0px var(--spacing-6) 4px;
}

._categoriesLoading_11cfp_10 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    margin: 4px 0px var(--spacing-6) 4px;
    font-size: var(--font-size-lg, 1.25rem);
    color: var(--text-paragraph);
}

._spin_11cfp_20 {
    animation: _spin_11cfp_20 700ms linear infinite;
}

@keyframes _spin_11cfp_20 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

._categoryBtn_11cfp_33 {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    border: 1px solid #EDEFF2 /*var(--border-20)*/;
    background: transparent;
    color: var(--text-title);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold, 700);
    cursor: pointer;
    transition: background-color var(--transition-fast, 0.15s),
        border-color var(--transition-fast, 0.15s),
        color var(--transition-fast, 0.15s);
}

._categoryBtn_11cfp_33:hover {
    background: var(--bg-surface-secondary);
}

._categoryBtnSelected_11cfp_52 {
    background: var(--bg-button-primary);
    border-color: var(--bg-button-primary);
    color: var(--text-invert);
    font-weight: var(--font-weight-bold);
}

._categoryBtnSelected_11cfp_52:hover {
    background: color-mix(in srgb, var(--bg-button-primary) 85%, white);
    border-color: color-mix(in srgb, var(--bg-button-primary) 85%, white);
}

._validationMsg_11cfp_64 {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--color-alarm, #e53e3e);
}

._label_11cfp_71 {
    font-family: var(--font-family);
    font-size: var(--font-size-sm); /* 12px */
    font-weight: 500;
    color: var(--text-paragraph);
    margin-bottom: var(--spacing-2); /* 8px gap to textarea */
}

._textarea_11cfp_79 {
    width: 100%;
    resize: none;
    min-height: 72px;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    border: 1px solid #EDEFF2 /*var(--border-20)*/;
    background: var(--bg-surface-primary);
    color: var(--text-title);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 600);
    font-family: var(--font-family);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-fast, 0.15s);
}

._textarea_11cfp_79:focus {
    border-color: var(--bg-button-primary);
}

._textarea_11cfp_79::placeholder {
    color: var(--text-paragraph);
    opacity: 0.5;
}

._cancelBtn_11cfp_105 {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    background: transparent;
    border: 1px solid #EDEFF2 /*var(--border-20)*/;
    border-bottom-width: 2px;
    color: var(--text-title);
    transition: background-color var(--transition-fast, 0.15s);
}

._cancelBtn_11cfp_105:hover {
    background: var(--bg-surface-secondary);
}

._clearBtn_11cfp_123 {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    background: var(--bg-button-primary);
    border: 1px solid var(--bg-button-primary);
    border-bottom-width: 2px;
    color: var(--text-invert);
    transition: background-color var(--transition-fast, 0.15s);
}

._clearBtn_11cfp_123:hover:not(:disabled) {
    background: color-mix(in srgb, var(--bg-button-primary) 85%, white);
}

._clearBtn_11cfp_123:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* ── Main list view ─────────────────────────────────────────────────────── */

._mainList_bvbcf_3 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 8px);
    margin: 3px 2px 3px 2px;
}

._row_bvbcf_10 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: inherit;
    gap: var(--spacing-3, 12px);
}

._row_bvbcf_10:hover {
    background-color: var(--color-surface-hover, #f9fafb);
}

._rowWithToggle_bvbcf_28 {
    display: flex;
    align-items: center;
    padding-right: var(--spacing-4, 16px);
    gap: var(--spacing-3, 12px);
}

._rowWithToggle_bvbcf_28 ._row_bvbcf_10 {
    flex: 1;
    padding-right: 0;
}

._rowText_bvbcf_40 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

._rowLabel_bvbcf_47 {
    font-family: var(--font-family);
    font-size: var(--font-size-m, 0.9375rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #111827);
}

._rowSub_bvbcf_54 {
    font-family: var(--font-family);
    font-size: var(--font-size-sm, 0.75rem);
    font-weight: var(--font-weight-regular, 400);
    color: var(--color-text-secondary, #6b7280);
}

._rowChevron_bvbcf_61 {
    color: var(--color-text-secondary, #9ca3af);
    flex-shrink: 0;
    font-size: 0.75rem;
}

._rowChevronBtn_bvbcf_67 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: var(--spacing-2, 8px);
    margin: calc(var(--spacing-2, 8px) * -1);
    cursor: pointer;
    outline: none;
}

._rowChevronBtn_bvbcf_67:focus,
._rowChevronBtn_bvbcf_67:focus-visible {
    outline: none;
}

/* ── Config view ─────────────────────────────────────────────────────────── */

._configBody_bvbcf_86 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5, 20px);
}

._fieldGroup_bvbcf_92 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 8px);
}

._fieldLabel_bvbcf_98 {
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #111827);
}

/* ── Sound dropdown ──────────────────────────────────────────────────────── */

._dropdown_bvbcf_107 {
    position: relative;
}

._dropdownTrigger_bvbcf_111 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px var(--spacing-3, 12px);
    background: var(--bg-surface-primary, #fff);
    border: 1.5px solid var(--border-40, #d7dae0);
    border-radius: 8px;
    cursor: pointer;
    color: inherit;
    font-family: var(--font-family);
    font-size: 0.9375rem;
    gap: var(--spacing-2, 8px);
    transition: border-color 120ms;
    outline: none;
}

._dropdownTrigger_bvbcf_111:hover {
    border-color: var(--border-60, #bdc4d1);
}

._dropdownTrigger_bvbcf_111:focus,
._dropdownTrigger_bvbcf_111:focus-visible {
    outline: none;
}

._dropdownOpen_bvbcf_138 ._dropdownTrigger_bvbcf_111 {
    border-color: var(--border-100, #232933);
}

._dropdownValue_bvbcf_142 {
    color: var(--color-text-primary, #111827);
    font-weight: var(--font-weight-medium, 500);
}

._dropdownPlaceholder_bvbcf_147 {
    color: var(--color-text-secondary, #9ca3af);
}

._dropdownChevron_bvbcf_151 {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6b7280);
    transition: transform 150ms;
}

._dropdownChevronOpen_bvbcf_158 {
    transform: rotate(180deg);
}

._dropdownList_bvbcf_162 {
    position: fixed;
    z-index: var(--z-tooltip, 400);
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--bg-surface-primary, #fff);
    border-radius: 8px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 172px;
    overflow-y: auto;
    outline: none;
}

._dropdownList_bvbcf_162:focus,
._dropdownList_bvbcf_162:focus-visible {
    outline: none;
}

._dropdownItem_bvbcf_183 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px var(--spacing-3, 12px);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 0.9375rem;
    color: var(--color-text-primary, #111827);
    gap: var(--spacing-2, 8px);
    transition: background 100ms;
}

._dropdownItem_bvbcf_183:hover {
    background-color: var(--color-surface-hover, #f9fafb);
}

._dropdownItemSelected_bvbcf_200 {
    background-color: var(--color-surface-hover, #f3f4f6);
    font-weight: var(--font-weight-medium, 500);
}

._dropdownItemLabel_bvbcf_205 {
    flex: 1;
}

/* ── Play button ─────────────────────────────────────────────────────────── */

._playButton_bvbcf_211 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: none;
    background-color: var(--bg-button-primary, #303640);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 120ms;
}

._playButton_bvbcf_211:hover {
    opacity: 0.75;
}

._playButton_bvbcf_211::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translate(-50%, -50%);
}

._playButtonPaused_bvbcf_248::before {
    clip-path: none;
    width: 2px;
    height: 7px;
    background-color: #ffffff;
    box-shadow: 4px 0 0 #ffffff;
    top: 50%;
    left: 50%;
    /* box-shadow extends the visual footprint to 6px (2px bar + 4px gap to
       the shadow bar), but the transform's percentage basis is only this
       element's own 2px box — so centering needs an explicit pixel offset
       (half of the true 6px visual width) rather than -50%. */
    transform: translate(-3px, -50%);
}

/* ── Repeat interval ─────────────────────────────────────────────────────── */

._intervalSelects_bvbcf_265 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 8px);
}

._timeInputWrapper_bvbcf_271 {
    position: relative;
    display: inline-flex;
    align-items: center;
}

._intervalInput_bvbcf_277 {
    width: 64px;
    padding: 8px 22px 8px var(--spacing-3, 12px);
    background: var(--color-surface, #fff);
    border: 1.5px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 0.9375rem;
    color: var(--color-text-primary, #111827);
    text-align: center;
    /* Native number-input spinners are dropped in favor of the custom
       up/down buttons, which render/behave consistently across browsers. */
    appearance: textfield;
}

._intervalInput_bvbcf_277::-webkit-outer-spin-button,
._intervalInput_bvbcf_277::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

._intervalInput_bvbcf_277:hover {
    border-color: var(--color-text-secondary, #6b7280);
}

._intervalInput_bvbcf_277:focus {
    outline: none;
    border-color: var(--color-text-primary, #111827);
    box-shadow: 0 0 0 1px var(--color-text-primary, #111827);
}

._timeInputSteppers_bvbcf_308 {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

._timeStepperBtn_bvbcf_317 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 12px;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.5625rem;
    cursor: pointer;
    line-height: 0;
    outline: none;
}

._timeStepperBtn_bvbcf_317:hover {
    color: var(--color-text-primary, #111827);
}

._timeStepperBtn_bvbcf_317:focus,
._timeStepperBtn_bvbcf_317:focus-visible {
    outline: none;
}

._intervalUnit_bvbcf_342 {
    font-family: var(--font-family);
    font-size: 0.875rem;
    color: var(--color-text-secondary, #6b7280);
    white-space: nowrap;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

._footerMain_bvbcf_351 {
    display: flex;
    justify-content: flex-end;
}

._footerConfig_bvbcf_356 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: var(--spacing-2, 8px);
}
._container_92guy_1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

._toolbarBtn_92guy_8 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-bottom-width: 2px;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-title);
    cursor: pointer;
}

._toolbarBtn_92guy_8:hover:not(:disabled) {
    background-color: var(--bg-surface-secondary);
}

._toolbarBtn_92guy_8:focus {
    outline: none;
}

._toolbarBtn_92guy_8:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

._toolbarBtn_92guy_8:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

._toolbarBtnActive_92guy_43 {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-40);
    color: var(--text-title);
}

._toolbarBtnActive_92guy_43:hover:not(:disabled) {
    background-color: var(--border-20);
}

._toolbarBtnMuted_92guy_53 {
    color: var(--text-paragraph);
    font-weight: var(--font-weight-semibold, 600);
}

._toolbarBtnStrong_92guy_58 {
    color: var(--text-title);
    font-weight: var(--font-weight-bold);
}

._toolbarBtnSep_92guy_63 {
    color: var(--text-paragraph);
    font-weight: var(--font-weight-regular);
}

._toolbarBtnChevron_92guy_68 {
    width: 16px;
    height: 16px;
    margin-left: 2px;
}

._sortDropdown_92guy_74 {
    position: fixed;
    background: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 600;
    min-width: 120px;
    overflow: hidden;
}

._sortDropdownItem_92guy_85 {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-title);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

._sortDropdownItem_92guy_85:hover {
    background-color: var(--bg-surface-secondary);
}

._sortDropdownItem_92guy_85:focus {
    outline: none;
}

._sortDropdownItem_92guy_85:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

._sortDropdownItemActive_92guy_112 {
    color: var(--text-title);
    font-weight: var(--font-weight-bold);
    background-color: var(--bg-surface-secondary);
}

._list_92guy_118 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._backBtn_92guy_124 {
    width: 40px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-bottom-width: 2px;
    border-radius: 8px;
    color: var(--text-title);
    cursor: pointer;
    padding: 0;
    align-self: flex-start;
    flex-shrink: 0;
}

._backBtn_92guy_124:hover {
    background-color: var(--bg-surface-secondary);
}

._backBtn_92guy_124:focus {
    outline: none;
}

._backBtn_92guy_124:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

/* Match the 2px bottom border used across all interactive elements in this drawer. */
.cleared-alerts-drawer .drawer__header-left button,
.cleared-alerts-drawer .drawer__header-right button {
    border-bottom-width: 2px;
}

/* The cleared alerts drawer is a fixed-width side panel. */
.cleared-alerts-drawer .drawer__title {
    font-size: 15px;
    font-weight: 700;
}

/* Detail mode: hide the title and pull header items to the left so Close
   and Back sit adjacent rather than at opposite ends. */
._detailMode_92guy_168 .drawer__title {
    display: none;
}

._detailMode_92guy_168 .drawer__header {
    justify-content: flex-start;
}

/* Wider than the shared Drawer default to fit the compact rows. Scoped here so
   other drawers keep the standard width; both classes are needed to outrank the
   shared .drawer rule. */
.drawer.cleared-alerts-drawer {
    width: 720px;
}

/* The cleared alerts drawer is a fixed-width side panel; the shared Drawer's
   built-in expand-to-fullscreen toggle is the only header button with
   aria-expanded, so we target it directly. */
.cleared-alerts-drawer .drawer__header-left button[aria-expanded] {
    display: none;
}

._loading_92guy_190,
._empty_92guy_191 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary, #667085);
    font-size: 14px;
}

._sentinel_92guy_201 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 8px;
    color: var(--text-secondary, #667085);
}

._spin_92guy_210 {
    animation: _spin_92guy_210 1s linear infinite;
}

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

._errorBanner_92guy_220 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-error-subtle, #fef3f2);
    border: 1px solid var(--border-error, #fda29b);
    border-radius: 6px;
    color: var(--text-error, #b42318);
    font-size: 14px;
}

._retryBtn_92guy_233 {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 4px 10px;
    color: inherit;
    cursor: pointer;
    font-size: 13px;
}

._retryBtn_92guy_233:hover {
    background: var(--bg-error-hover, #fee4e2);
}._popover_18xbj_1 {
    position: fixed;
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 430px;
    max-width: calc(100vw - 32px);
    box-shadow:
        0 3px 7px 0 rgba(0, 0, 0, 0.04),
        0 12px 12px 0 rgba(0, 0, 0, 0.03),
        0 28px 17px 0 rgba(0, 0, 0, 0.02),
        0 50px 20px 0 rgba(0, 0, 0, 0.01);
    z-index: 500;
    box-sizing: border-box;
}

._header_18xbj_21 {
    display: flex;
    align-items: center;
    width: 100%;
}

._title_18xbj_27 {
    margin: 0;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
    line-height: 1.4;
}

._fieldsRow_18xbj_36 {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

._field_18xbj_36 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 0 0;
    min-width: 0;
}

._fieldLabel_18xbj_51 {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-paragraph);
    line-height: 1.4;
}

._selectWrapper_18xbj_59 {
    position: relative;
    width: 100%;
}

._select_18xbj_59 {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 36px;
    padding: 8px 40px 8px 16px;
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: 99px;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-title);
    cursor: pointer;
    text-align: right;
    line-height: 19.9px;
    box-sizing: border-box;
}

._select_18xbj_59:focus {
    outline: none;
    border-color: var(--border-brand, #2D1B3F);
}

._selectChevron_18xbj_88 {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--icon-secondary);
    pointer-events: none;
}

._footer_18xbj_99 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    height: 36px;
    width: 100%;
}
/* Body wrapper — vertical stack with consistent gaps.
   padding: 2px gives button focus rings room to render without being clipped
   by the modal body's overflow-y: auto. */
._body_4l0zx_4 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    padding: 2px 2px var(--spacing-1);
}

/* Info banner */
._infoBanner_4l0zx_12 {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--bg-surface-secondary);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

._infoIcon_4l0zx_24 {
    flex-shrink: 0;
    font-size: var(--font-size-m);
    color: var(--text-paragraph);
}

/* Section — label + control */
._section_4l0zx_31 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

._sectionLabel_4l0zx_37 {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
}

/* Mode selector — grey track containing a sliding white indicator */
._modeSelector_4l0zx_45 {
    position: relative;
    display: flex;
    gap: var(--spacing-2);
    background: var(--bg-surface-secondary);
    padding: var(--spacing-1);
    border-radius: var(--radius-full);
}

/* Sliding white pill — animates to whichever button is selected */
._modeSelectorIndicator_4l0zx_55 {
    position: absolute;
    top: var(--spacing-1);
    bottom: var(--spacing-1);
    border-radius: var(--radius-full);
    background: var(--bg-surface-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition:
        left 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

._modeBtn_4l0zx_69 {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-2);
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-title);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

._modeBtn_4l0zx_69:focus {
    outline: none;
}

._modeBtn_4l0zx_69:focus-visible {
    outline: 2px solid var(--border-brand, #2d1b3f);
    outline-offset: 2px;
}

._modeBtn_4l0zx_69:hover:not(._modeBtnSelected_4l0zx_98) {
    opacity: 0.7;
}

._modeBtnSelected_4l0zx_98 {
    font-weight: var(--font-weight-semibold);
}

/* "current" label shown inline after the mode name */
._currentSuffix_4l0zx_107 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--text-title);
}

/* Device select — mirrors FiltersPopover select pattern */
._selectWrapper_4l0zx_114 {
    position: relative;
    width: 100%;
}

._deviceSelect_4l0zx_119 {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 36px;
    padding: 8px 40px 8px 16px;
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: 99px;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-title);
    cursor: pointer;
    line-height: 19.9px;
    box-sizing: border-box;
}

._deviceSelect_4l0zx_119:focus {
    outline: none;
    border-color: var(--border-brand, #2d1b3f);
}

._selectChevron_4l0zx_142 {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--icon-secondary);
    pointer-events: none;
}

/* Duration pills — reuses same pattern as ClearModal categories */
._durationPills_4l0zx_154 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

._durationPill_4l0zx_154 {
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-full);
    border: none;
    background: var(--bg-surface-secondary);
    color: var(--text-title);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold, 700);
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--transition-fast, 0.15s),
        color var(--transition-fast, 0.15s);
}

._durationPill_4l0zx_154:hover:not(._durationPillSelected_4l0zx_176) {
    background: color-mix(in srgb, var(--bg-surface-secondary) 60%, var(--bg-surface-primary));
}

._durationPillSelected_4l0zx_176 {
    background: var(--bg-button-primary);
    color: var(--text-invert);
}

/* Footer buttons — mirrors ClearModal */
._cancelBtn_4l0zx_186 {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    background: transparent;
    border: 1px solid #edeff2;
    border-bottom-width: 2px;
    color: var(--text-title);
    transition: background-color var(--transition-fast, 0.15s);
}

._cancelBtn_4l0zx_186:hover {
    background: var(--bg-surface-secondary);
}

._changeBtn_4l0zx_204 {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    background: var(--bg-button-primary);
    border: 1px solid var(--bg-button-primary);
    border-bottom-width: 2px;
    color: var(--text-invert);
    transition: background-color var(--transition-fast, 0.15s);
}

._changeBtn_4l0zx_204:hover:not(:disabled) {
    background: color-mix(in srgb, var(--bg-button-primary) 85%, white);
}

._changeBtn_4l0zx_204:disabled {
    background: var(--bg-surface-secondary);
    border-color: transparent;
    border-bottom-width: 1px;
    color: var(--text-paragraph);
    cursor: not-allowed;
}
._card_8bgyv_1 {
    background: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-bottom-width: 2px;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    cursor: pointer;
}

/* ---------------------------------------------------------------
   Demo-only overrides for shared Chip — see project_flare_demo_style_overrides
   memory. Revert once @lancontrolsystems/nimbus-web-components is updated.
   --------------------------------------------------------------- */
._card_8bgyv_1 .chip--lg {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
}

._card_8bgyv_1 .chip--online {
    background-color: var(--color-cleared);
}

._card_8bgyv_1 .chip--offline {
    background-color: #828b99;
    color: #ffffff;
}

/* ---- Inset grey section ---- */

._inset_8bgyv_33 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--bg-surface-secondary);
    border-radius: var(--radius-lg);
}

._identity_8bgyv_43 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

._equipmentLabel_8bgyv_49 {
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
    font-weight: var(--font-weight-regular);
}

._systemName_8bgyv_55 {
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
}

/* Service — amber chip (maintenance/technician mode), matches lg Chip sizing */
._serviceChip_8bgyv_62 {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    background: #b45309;
    color: #ffffff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Weekly test — custom blue chip (no matching design-system variant), matches lg Chip sizing */
._weeklyTestChip_8bgyv_77 {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    background: #285cc3;
    color: #ffffff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Footer ---- */

._footer_8bgyv_93 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: 0;
}

._panelBadge_8bgyv_101 {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border-20);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--text-paragraph);
    white-space: nowrap;
}

/* ---- Connection group — one bordered container, dividers via border-right ---- */

._connectionGroup_8bgyv_114 {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-20);
    border-radius: var(--radius-md);
    overflow: hidden;
    padding: var(--spacing-2) var(--spacing-0); /* to align with panel badge height */
}

._connectionItem_8bgyv_123 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-0) var(--spacing-4);
    color: var(--text-paragraph);
    font-size: var(--font-size-sm);
}

._connectionItem_8bgyv_123:not(:last-child) {
    border-right: 1px solid var(--border-20);
    margin: 1px 0;
}

/* ---- Status dots ---- */

._dotOnline_8bgyv_139 {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: #2e7d32;
    flex-shrink: 0;
}

._dotOffline_8bgyv_147 {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: #c62828;
    flex-shrink: 0;
}

._dotGrey_8bgyv_155 {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: #828b99;
    flex-shrink: 0;
}

/* Hide expand and remote control buttons — scoped to this drawer only */
.fire-alarm-system-drawer .drawer__header-left button:nth-child(2),
.fire-alarm-system-drawer .drawer__header-left button:nth-child(3) {
    display: none;
}

/* ===========================================
   Drawer styles
   =========================================== */

/* Connection status row — Panel box + 3-connection box side by side */
._drawerConnections_8bgyv_174 {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

._drawerConnectionPanel_8bgyv_181 {
    border: 1px solid var(--border-20);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

._drawerConnectionNetworkGroup_8bgyv_187 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border-20);
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex: 1;
}

._drawerConnectionItem_8bgyv_196 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
}

._drawerConnectionNetworkGroup_8bgyv_187 ._drawerConnectionItem_8bgyv_196:not(:last-child) {
    border-right: 1px solid var(--border-20);
}

._drawerConnectionLabel_8bgyv_208 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
    font-weight: var(--font-weight-regular);
}

._drawerConnectionStatus_8bgyv_217 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--text-title);
    font-weight: var(--font-weight-bold);
}

/* Info grid */
._drawerInfoGrid_8bgyv_227 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

._drawerInfoCard_8bgyv_234 {
    background-color: var(--bg-surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

._drawerInfoLabel_8bgyv_243 {
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
    font-weight: var(--font-weight-regular);
}

._drawerInfoValue_8bgyv_249 {
    font-size: var(--font-size-m);
    color: var(--text-title);
    font-weight: var(--font-weight-bold);
}

/* Mode history */
._drawerHistory_8bgyv_256 {
    border: 1px solid var(--border-20);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
}

._drawerHistoryTitle_8bgyv_262 {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
    margin-bottom: 24px;
}

._drawerHistoryList_8bgyv_270 {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
}

._drawerHistoryEmpty_8bgyv_277 {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    padding: var(--spacing-4) 0;
}

._drawerHistoryItem_8bgyv_285 {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--spacing-3);
}

._drawerHistoryIconCol_8bgyv_291 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

._drawerHistoryConnector_8bgyv_297 {
    width: 2px;
    flex: 1;
    min-height: var(--spacing-4);
    background-color: var(--border-20);
}

._drawerHistoryContent_8bgyv_304 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-4);
}

._drawerHistoryMeta_8bgyv_312 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
}

._drawerHistoryDuration_8bgyv_318 {
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

._drawerViewAll_8bgyv_323 {
    display: block;
    width: 100%;
    margin-top: var(--spacing-3);
    padding: var(--spacing-2) 0;
    background: none;
    border: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-link, var(--border-brand));
    cursor: pointer;
    text-align: center;
}

._drawerViewAll_8bgyv_323:hover {
    text-decoration: underline;
}

/* Mode icons */
._modeIcon_8bgyv_342 {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #fff;
}

._modeIcon--live_8bgyv_354 {
    background-color: var(--color-cleared);
}

._modeIcon--scheduled_8bgyv_358 {
    background-color: #285cc3;
}

._modeIcon--weekly-test_8bgyv_362 {
    background-color: #285cc3;
}

._modeIcon--config_8bgyv_366 {
    background-color: #7b3fbe;
}

._modeIcon--service_8bgyv_370 {
    background-color: #7B3FBE;
}
/* ===========================================
   System Offline Notification Banner
   =========================================== */

._banner_1jhgn_5 {
    position: fixed;
    top: var(--spacing-5, 20px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: #1e2330;
    color: #ffffff;
    border-radius: var(--radius-lg, 16px);
    padding: var(--spacing-6, 24px) var(--spacing-8, 32px);
    max-width: 580px;
    width: max-content;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 8px);
    pointer-events: none;
}

._title_1jhgn_24 {
    margin: 0;
    font-size: var(--font-size-xl, 22px);
    font-weight: var(--font-weight-bold, 700);
    color: #ffffff;
    line-height: 1.25;
}

._description_1jhgn_32 {
    margin: 0;
    font-size: var(--font-size-m, 15px);
    font-weight: var(--font-weight-regular, 400);
    color: #9aa0ad;
    line-height: 1.4;
}

/* Minimized variant — slim bar centered at top */
._bannerMinimized_1jhgn_41 {
    position: fixed;
    top: var(--spacing-5, 20px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: #1e2330;
    color: #ffffff;
    border-radius: var(--radius-lg, 16px);
    padding: var(--spacing-3, 12px) var(--spacing-6, 24px);
    max-width: 480px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
    white-space: nowrap;
}

._minTitle_1jhgn_60 {
    font-size: var(--font-size-m, 15px);
    font-weight: var(--font-weight-semibold, 600);
    color: #ffffff;
    line-height: 1.3;
}

._minDescription_1jhgn_67 {
    font-size: var(--font-size-sm, 12px);
    font-weight: var(--font-weight-regular, 400);
    color: #9aa0ad;
    line-height: 1.3;
}
._placeholderCard_1m67a_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    text-align: center;
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    font-family: var(--font-family);
}

._placeholderTitle_1m67a_13 {
    margin: 0;
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-paragraph);
}

._placeholderDescription_1m67a_20 {
    margin: 0;
    max-width: 32rem;
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

._addButton_1m67a_27 {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    background: var(--bg-surface-primary);
    border: 1px solid var(--border-40);
    color: var(--text-title);
}

._populatedCard_1m67a_39 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    border-radius: var(--radius-lg);
    font-family: var(--font-family);
}

._header_1m67a_47 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
}

._title_1m67a_54 {
    margin: 0;
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-title);
}

._description_1m67a_61 {
    margin: var(--spacing-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

._manageButton_1m67a_67 {
    flex-shrink: 0;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    background: var(--bg-surface-primary);
    border: 1px solid var(--border-40);
    color: var(--text-title);
}

._chips_1m67a_80 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-top: var(--spacing-1);
}

._chip_1m67a_80 {
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    background: var(--bg-surface-secondary);
    color: var(--text-title);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 600);
}
/* Hide the Expand and Remote Control buttons in the drawer header — this
   drawer only needs Close, unlike the fullscreen-capable AlertCard drawer. */
._drawer_1dotd_3 .drawer__header-left button:nth-of-type(2),
._drawer_1dotd_3 .drawer__header-left button:nth-of-type(3) {
    display: none;
}

._label_1dotd_8 {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-title);
    font-family: var(--font-family);
}

._fieldRow_1dotd_17 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-3);
}

._input_1dotd_24 {
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--bg-surface-secondary);
    background: var(--bg-surface-primary);
    color: var(--text-title);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    outline: none;
    transition: border-color var(--transition-fast, 0.15s);
}

._input_1dotd_24:focus {
    border-color: var(--bg-button-primary);
}

._inputError_1dotd_42 {
    border-color: var(--color-alarm, #e53e3e);
}

._inputError_1dotd_42:focus {
    border-color: var(--color-alarm, #e53e3e);
}

._counter_1dotd_50 {
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
    font-family: var(--font-family);
}

._counterError_1dotd_56 {
    color: var(--color-alarm, #e53e3e);
}

._duplicateWarning_1dotd_60 {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-alarm, #e53e3e);
    font-family: var(--font-family);
}

._saveError_1dotd_67 {
    margin: var(--spacing-3) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-alarm, #e53e3e);
    font-family: var(--font-family);
}

._addReasonButton_1dotd_74 {
    width: 110px;
    height: 36px;
    flex-shrink: 0;
    align-self: flex-end;
}

._chips_1dotd_81 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
}

._chip_1dotd_81 {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--bg-surface-secondary);
    background: transparent;
    color: var(--text-title);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold, 700);
    font-family: var(--font-family);
}

._chipRemove_1dotd_102 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: var(--spacing-2);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-alarm, #e53e3e);
    color: var(--text-invert);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}

._chip_1dotd_81:hover ._chipRemove_1dotd_102,
._chip_1dotd_81:focus-within ._chipRemove_1dotd_102,
._chipRemove_1dotd_102:focus-visible {
    opacity: 1;
    pointer-events: auto;
}
._settings_wb6pt_1 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    font-family: var(--font-family);
}

._title_wb6pt_8 {
    margin: 0;
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
}

._accessDenied_wb6pt_15 {
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}