/* ===========================================
   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.
 *
 * NOTE: the @import below is hand-added and must survive regeneration from the
 * token export. Everything after it is generated.
 */

/* Global scrollbar chrome. Hand-written, kept in its own file so a token
   regeneration of this one cannot clobber it. Must stay above all rules —
   @import is only valid at the top of a stylesheet. */

/**
 * Nimbus Design System - Scrollbars
 *
 * A single floating-pill scrollbar for every scroll container: no track chrome,
 * a narrow rounded thumb inset from the container edge.
 *
 * Hand-written, and deliberately NOT part of theme.css — that file is generated
 * from the Figma token export and would lose these rules on the next sync. It is
 * imported by theme.css so consumers still get it from the one entry point.
 *
 * Two engines, two mechanisms — each ignores the other's properties, so the
 * rules coexist and Firefox degrades to the closest thing it can express:
 *   - Firefox: `scrollbar-width` / `scrollbar-color` only. Thin and recoloured,
 *     but the thumb still spans the full track — no inset pill is possible.
 *   - WebKit/Blink (Chrome, Edge, Safari, Electron): the ::-webkit-scrollbar
 *     pseudo-elements give full control, which is what produces the design.
 *
 * The inset is a transparent border on the thumb rather than a narrower track:
 * a thumb always fills its track's width, so shrinking the track would shrink
 * the hit area too. `background-clip: padding-box` keeps the border transparent
 * to the (transparent) track, leaving a centred pill with a comfortable grab
 * target either side of it.
 */

:root {
    /* Thumb colours are deliberately borders, not text: the scrollbar is chrome
       that sits beside content, and the border ramp is the token scale tuned for
       that weight. Both resolve per-theme, so the bar follows light/dark with no
       extra rules here. */
    --scrollbar-size: 10px;
    --scrollbar-inset: 3px;
    --scrollbar-thumb: var(--border-60);
    --scrollbar-thumb-hover: var(--text-paragraph);
}

/* Firefox. Set on the root and inherited, so nested scroll containers pick it
   up without each needing its own rule. */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* WebKit does NOT inherit scrollbar pseudo-elements, so this has to match every
   scrollable element rather than just the root. `:where()` keeps specificity at
   zero — any component rule that wants a different scrollbar overrides this
   without needing !important or a specificity fight. */

:where(*)::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

:where(*)::-webkit-scrollbar-track {
    background: transparent;
}

:where(*)::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border: var(--scrollbar-inset) solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

:where(*)::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* The square where the vertical and horizontal bars meet: left at its default
   it paints an opaque grey patch in the corner of dual-axis scrollers. */

:where(*)::-webkit-scrollbar-corner {
    background: transparent;
}

:root {
    color-scheme: light dark;
}

/* Light Theme (Default) */

:root {
    /* Backgrounds - Surface */
    --bg-surface-primary: #ffffff;
    --bg-surface-secondary: #f5f7f9;
    --bg-page: #f6f7f9;
    --bg-surface-invert: #ffffff;
    --bg-surface-invert-2: #edeff2;
    --bg-surface-brand: #403456;

    /* Backgrounds - Buttons */
    --bg-button-primary: #303640;
    --text-button-primary: #ffffff;
    --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;
    --color-mode-service: #7b3fbe;
    --color-mode-weekly-test: #285cc3;
}

/* Dark Theme */

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

        /* Backgrounds - Buttons */
        --bg-button-primary: #5c6575;
        --text-button-primary: #ffffff;
        --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;
        --color-mode-service: #7b3fbe;
        --color-mode-weekly-test: #285cc3;
    }
}

/* Force Light Theme */

[data-theme="light"] {
    color-scheme: light;

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

    /* Backgrounds - Buttons */
    --bg-button-primary: #303640;
    --text-button-primary: #ffffff;
    --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;
    --color-mode-service: #7b3fbe;
    --color-mode-weekly-test: #285cc3;
}

/* Force Dark Theme */

[data-theme="dark"] {
    color-scheme: dark;

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

    /* Backgrounds - Buttons */
    --bg-button-primary: #5c6575;
    --text-button-primary: #ffffff;
    --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;
    --color-mode-service: #7b3fbe;
    --color-mode-weekly-test: #285cc3;
}
/**
 * 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);
    min-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);
    /* Not --text-invert: that tracks light-on-dark surfaces and flips to dark text in
       dark mode, where this button stays mid-grey and still needs white. */
    color: var(--text-button-primary);
}

.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-button-primary);
}

.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-button-primary);
}

.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-button-primary);
}

.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-button-primary);
}

.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-button-primary);
}

.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-button-primary);
}

.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 - Breadcrumb
 *
 * Trail of ancestor links ending in the page being looked at.
 */

/* ==========================================
   TRAIL
   ========================================== */

.breadcrumb {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    /* Lets a long crumb shrink and clip instead of pushing the trail past its container. */
    min-width: 0;
}

.breadcrumb__separator {
    color: var(--text-disable);
    flex: 0 0 auto;
    user-select: none;
}

/* ==========================================
   CRUMBS
   ========================================== */

/* A consumer's own anchor is styled alongside the component's, so a trail whose crumbs
   navigate through a router looks the same as one built from plain links. */

.breadcrumb__link,
.breadcrumb__item a {
    display: block;
    min-width: 0;
    color: var(--text-paragraph);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
    /* Clipped rather than wrapped: a trail is a single line of ancestry, and a wrapped
       crumb reads as two. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb__link:hover,
.breadcrumb__item a:hover {
    color: var(--text-title);
    text-decoration: underline;
}

/* Focus. The ring matches .btn, and is removed again for pointer focus so that a host
   which rings every anchor on :focus does not box a crumb that was merely clicked.

   Both :focus and :focus-visible are styled deliberately: where :focus-visible is
   unknown the browser drops both rules below, including the one inside :not(), and the
   component would fall back to whatever focus styling the host happens to apply. */

.breadcrumb__link:focus,
.breadcrumb__link:focus-visible,
.breadcrumb__item a:focus,
.breadcrumb__item a:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

.breadcrumb__link:focus:not(:focus-visible),
.breadcrumb__item a:focus:not(:focus-visible) {
    outline: none;
}

/* A crumb with nowhere to lead: shaped like a link, without the affordances of one. */

.breadcrumb__text {
    display: block;
    min-width: 0;
    color: var(--text-paragraph);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb__current {
    display: block;
    min-width: 0;
    color: var(--text-title);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/**
 * 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-button-primary);
}

.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-md);
    transition: border-color var(--transition-fast);
}

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

/* Focus is a border recolour, deliberately without an outer ring. A ring drawn outside
   the border box is clipped wherever a field sits in a scroll container (a modal body,
   a drawer), and it reads as a double-weight edge beside any plainly-bordered control. */

.input:focus-within {
    border-color: var(--border-100);
}

/* Error state */

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

.input--error:focus-within {
    border-color: #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-md);
    transition: border-color var(--transition-fast);
}

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

.textarea:focus-within {
    border-color: 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-md);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

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

.select:focus-within {
    border-color: 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;
}

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

.select--error:focus-within {
    border-color: #c62828;
}

/* ==========================================
   SELECT — STYLED LISTBOX
   The variant that draws its own option menu, for designs where the OS-rendered
   native list is not acceptable.
   ========================================== */

.select--listbox {
    /* The trigger owns the padding so its hit area covers the whole control. */
    padding: 0;
}

.select--open {
    border-color: var(--border-100);
}

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

.select__trigger {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-title);
    text-align: left;
    cursor: inherit;
    min-width: 0;
}

/* The wrapper renders the focus ring via :focus-within, so the button must not
   draw its own — including against a global button:focus-visible outline. */

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

.select__trigger:disabled {
    cursor: not-allowed;
}

.select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.select__icon--open {
    transform: rotate(180deg);
}

.select__menu {
    /* Fixed, and positioned from the trigger's rect, so the menu escapes any
       ancestor that clips or scrolls — a modal body, for instance. */
    position: fixed;
    z-index: 1100;
    max-width: calc(100vw - 32px);
    max-height: 318px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-1);
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-40);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.select__option {
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-title);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.select__option--active {
    background-color: var(--bg-surface-secondary);
}

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

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

.select__option--disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.select__option--disabled.select__option--active {
    background-color: transparent;
}

/**
 * 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);
}

/* Focus. The ring matches .btn, inset rather than offset so it does not collide with
   the strip's own bottom border, and is removed again for pointer focus — the selected
   underline already answers which tab is chosen, and a host that rings every button on
   :focus would otherwise box it.

   Both :focus and :focus-visible are styled deliberately: where :focus-visible is
   unknown the browser drops both rules below, including the one inside :not(), and the
   component would fall back to whatever focus styling the host happens to apply. */

.tab:focus,
.tab:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

.tab:focus:not(:focus-visible) {
    outline: none;
    /* Square again with the ring gone. The corners are only rounded to shape the ring, and
       the selected underline is this element's own bottom border, so a radius left behind
       after a click curves its ends. */
    border-radius: 0;
}

/* 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 - Inline Messages
 *
 * In-flow feedback attached to a specific piece of UI: a failed save, a validation
 * summary, a retryable load. Unlike a notification it takes up layout space beside
 * whatever it describes and stays until the state that caused it clears.
 */

/* ==========================================
   INLINE MESSAGE
   ========================================== */

.inline-message {
    /* Every tint below is mixed from this one accent, so a variant only has to
       restate the colour. */
    --inline-message-accent: #c62828;

    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    /* The palette has no error or warning surfaces, so the accent is tinted into the
       card background and softened for the border, which holds up in either theme. */
    background-color: color-mix(
        in srgb,
        var(--inline-message-accent) 10%,
        var(--bg-surface-primary)
    );
    border: 1px solid color-mix(in srgb, var(--inline-message-accent) 45%, transparent);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-title);
}

/* ==========================================
   INLINE MESSAGE VARIANTS
   ========================================== */

.inline-message--error {
    --inline-message-accent: #c62828;
}

.inline-message--warning {
    --inline-message-accent: #e65100;
}

.inline-message--success {
    --inline-message-accent: #2e7d32;
}

.inline-message--info {
    --inline-message-accent: #1565c0;
}

/* ==========================================
   INLINE MESSAGE ICON
   ========================================== */

.inline-message__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--inline-message-accent);
    /* Sized against the message and nudged onto its first line, rather than centred on
       a block whose height changes when the text wraps. */
    font-size: 1.125rem;
    margin-top: 0.0625rem;
}

/* ==========================================
   INLINE MESSAGE CONTENT
   ========================================== */

.inline-message__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.inline-message__title {
    font-weight: var(--font-weight-bold);
}

.inline-message__text {
    margin: 0;
}

/* ==========================================
   INLINE MESSAGE ACTION
   ========================================== */

.inline-message__action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-1) var(--spacing-3);
    border: 1px solid var(--inline-message-accent);
    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: var(--text-title);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    white-space: nowrap;
}

.inline-message__action:hover {
    background-color: color-mix(in srgb, var(--inline-message-accent) 15%, transparent);
}

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

/* ==========================================
   INLINE MESSAGE VARIANTS - SIZE
   ========================================== */

/* Compact - for dense surfaces such as drawers and modals */

.inline-message--compact {
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
}

.inline-message--compact .inline-message__icon {
    font-size: 1rem;
}

/**
 * Nimbus Design System - Table
 *
 * Listings of records: sites, users, groups. The default variant is a plain grid; the
 * "rows" variant gives each record its own surface separated by a gap, which is how the
 * organisation management listings read — a row is an object you act on, not a line in
 * a spreadsheet.
 */

/* ==========================================
   TABLE
   ========================================== */

.table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-title);
}

.table__header-cell {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--text-paragraph);
    background-color: var(--bg-cs-bg);
}

.table__row-header,
.table__cell {
    padding: var(--spacing-4);
    text-align: left;
    /* A row header identifies its row; it should not also shout. */
    font-weight: var(--font-weight-regular);
    vertical-align: middle;
}

/* ==========================================
   TABLE — ROWS VARIANT
   ========================================== */

/* Each record sits on its own surface, so the rows need to be separated rather than
   ruled. border-spacing only applies to a separated border model. */

.table--rows {
    border-collapse: separate;
    border-spacing: 0 var(--spacing-2);
}

.table--rows .table__body .table__row {
    background-color: var(--bg-surface-primary);
}

/* Radii go on the end cells: a <tr> cannot be rounded in a separated border model. */

.table--rows .table__header-cell:first-child,
.table--rows .table__body .table__row > *:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.table--rows .table__header-cell:last-child,
.table--rows .table__body .table__row > *:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/**
 * 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-button-primary);
}

.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;
}

/* Declared rather than inherited: the buttons beside it set their own line-height, so a
   title taking the page's instead gives the header two differently-measured boxes, and
   centring them looks wrong however faithfully it is done. */

.drawer__title {
    font-family: var(--font-family);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-default);
    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_ovpt6_5 {
    gap: 8px;
    padding: 8px 12px 8px 16px;
}

._label_ovpt6_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_ovpt6_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_ovpt6_29 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

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

._dot_ovpt6_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_ovpt6_43::after {
    content: "";
    width: 7.5px;
    height: 7.5px;
    border-radius: 99px;
    background-color: currentColor;
}

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

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

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

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

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

._dropdownList_ovpt6_91 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 20px 0;
    /* Fixed rather than content-driven: the panel would otherwise resize as rows come
       and go between states, so opening it twice in a row would jump. */
    box-sizing: border-box;
    width: 340px;
}

._dropdownRow_ovpt6_102 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: var(--bg-surface-primary);
    /* --border-20 alone reads too hard at this size, so soften it toward the panel it
       sits on. Derived rather than literal so it recedes in dark mode too. */
    border: 1px solid color-mix(in srgb, var(--border-20) 55%, var(--bg-surface-primary));
    border-radius: 12px;
}

._dropdownIconBox_ovpt6_114 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Roughly half the circle, so the glyph sits in it with clear space all round
       rather than filling it edge to edge. */
    font-size: 18px;
    flex-shrink: 0;
}

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

._dropdownIconBoxOffline_ovpt6_132 {
    background-color: #8b95a2;
    color: #ffffff;
    /* The offline glyphs are stroked and run to the edge of their viewBox, where the
       online ones are filled and inset, so they need trimming to look the same size. */
    font-size: 16px;
}

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

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

._infoBox_ovpt6_153 {
    margin: 0;
    padding: 10px 12px;
    background-color: var(--bg-surface-secondary);
    border-radius: 8px;
    display: flex;
    gap: 8px;
    /* Centred against the whole block, so the icon sits level with two-line copy
       rather than riding up beside the first line. */
    align-items: center;
    font-family: var(--font-family);
    font-size: 12px;
    color: var(--text-paragraph);
    line-height: 1.5;
}

._infoIcon_ovpt6_169 {
    color: var(--icon-disable);
    flex-shrink: 0;
    font-size: 14px;
}


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

._footer_ovpt6_180 {
    /* Even inset on all four sides of the panel, so this row sits the same distance
       from the list above it as from the panel edge below. */
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

._footerLabel_ovpt6_198 {
    color: var(--text-paragraph);
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
}

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

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

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

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

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

._location_t7kvz_61 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-title);
    margin: 0;
}

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

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

._siteChip_t7kvz_103 {
    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_t7kvz_103:hover {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-40);
}

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

._connectionBadge_t7kvz_151 {
    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_t7kvz_151[data-connected="true"] {
    background-color: #4caf50;
}

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

._content_t7kvz_185 {
    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_t7kvz_185 .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_t7kvz_185 .card-repeater__header {
    padding: 0 var(--spacing-8);
}

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

._content_t7kvz_185 .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_t7kvz_185 .btn {
    border-bottom-width: 2px;
}

._content_t7kvz_185 .btn--secondary,
._content_t7kvz_185 .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_t7kvz_185 button:focus {
    outline: none;
}

._content_t7kvz_185 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_t7kvz_185 .btn--secondary:focus:not(:focus-visible),
._content_t7kvz_185 .btn--ghost:focus:not(:focus-visible) {
    background-color: transparent;
    border-color: var(--border-20);
    color: var(--text-title);
}

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

/* ---------------------------------------------------------------
   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_t7kvz_541 .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_t7kvz_541 .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_t7kvz_573 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
    min-width: 0;
}

/* Trigger button — styled as secondary button */
._filterTrigger_t7kvz_589 {
    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_t7kvz_589:hover {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-40);
}

._filterTrigger_t7kvz_589:focus {
    outline: none;
}

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

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

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

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

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

/* Portalled dropdown — same pattern as AlertCard splitBtnDropdown */
._filterDropdown_t7kvz_711 {
    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_t7kvz_735 {
    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_t7kvz_735:hover:not(:disabled) {
    background: var(--bg-surface-secondary);
}

._filterDropdownItemSelected_t7kvz_779 {
    font-weight: 600;
}

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

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

._panel_t7kvz_805 {
    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_t7kvz_823 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--border-20);
}

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

._panelAction_t7kvz_853 {
    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_t7kvz_853:hover {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-60);
}

._panelBody_t7kvz_889 {
    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_t7kvz_913 {
    --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_t7kvz_935 {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(to bottom, var(--fire-overlay-color) 0%, var(--bg-page) 100%);
}

/* Gateways panel is non-interactive and greyed out when offline — alerts remain accessible (cached) */
._content_t7kvz_185[data-offline] ._devicesPanel_t7kvz_541 {
    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_t7kvz_983 {
    --fire-overlay-color: rgba(230, 37, 30, 0.6);
}

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

._fireOverlayPulsing_t7kvz_999 {
    animation: _firePulse_t7kvz_1 800ms ease-in-out infinite alternate;
}

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

@keyframes _firePulse_t7kvz_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_t7kvz_1047 {
    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_t7kvz_1069 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-8);
}

._skeletonTitle_t7kvz_1083 {
    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_t7kvz_1 1.5s infinite;
}

._skeletonAction_t7kvz_1111 {
    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_t7kvz_1 1.5s infinite;
}

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

._skeletonCard_t7kvz_1157 {
    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_t7kvz_1 1.5s infinite;
}

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

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

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

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

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

._card_xvzrm_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_xvzrm_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_xvzrm_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_xvzrm_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_xvzrm_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_xvzrm_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_xvzrm_80 {
    color: inherit;
    opacity: 0.6;
    font-weight: var(--font-weight-regular);
}

._compactPillRight_xvzrm_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_xvzrm_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_xvzrm_107 {
    color: var(--text-title);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
}

._compactPillBadge_xvzrm_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_xvzrm_126 {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 4px;
    flex-wrap: wrap;
}

._compactMetaItem_xvzrm_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_xvzrm_145 {
    color: var(--text-paragraph);
    font-weight: var(--font-weight-semibold, 600);
}

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

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

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

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

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

/* Banner + mode pill. The pill lives out here on the card surface so the
   coloured banner is not asked to carry a second saturated fill inside it. */
._bannerRow_xvzrm_179 {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
}

._banner_xvzrm_179 {
    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);
    flex: 1 1 auto;
    min-width: 0;
}

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

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

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

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

/* Dark enough to carry the same white text as every other banner: 4.80:1, over
   the 4.5:1 normal text needs. A lighter teal could not, which is why this one
   is not the mid-teal it started as. */
._bannerNonCritical_xvzrm_218 {
    background-color: #007d96;
}

._bannerFault_xvzrm_202 ._bannerLeft_xvzrm_222,
._bannerFault_xvzrm_202 ._alertType_xvzrm_223,
._bannerFault_xvzrm_202 ._relativeTime_xvzrm_224 {
    color: #1a1a1a;
}

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

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

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

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

._bannerRight_xvzrm_257 {
    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_xvzrm_268 {
    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_xvzrm_277 {
    font-weight: 600;
}

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

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

._iconBtn_xvzrm_293 {
    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_xvzrm_293:hover {
    background-color: var(--bg-surface-tertiary, var(--bg-surface-secondary));
}

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

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

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

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

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

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

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

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

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

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

._bodyFrame_xvzrm_364 {
    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_xvzrm_374 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-3);
}

._infoCard_xvzrm_380 {
    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_xvzrm_390 {
    font-family: var(--font-family);
    font-size: 10px;
    color: var(--text-paragraph);
    font-weight: 600;
}

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

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

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

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

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

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

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

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

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

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

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

._splitBtnMain_xvzrm_464 {
    height: 36px;
    background-color: var(--bg-button-primary);
    color: var(--text-button-primary);
    border-width: 0 1px 2px 0;
    border-style: solid;
    border-color: color-mix(in srgb, var(--bg-button-primary) 70%, black);
    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_xvzrm_464:hover {
    background-color: color-mix(in srgb, var(--bg-button-primary) 85%, white);
}

._splitBtnChevron_xvzrm_488 {
    height: 36px;
    background-color: var(--bg-button-primary);
    color: var(--text-button-primary);
    border-width: 0 1px 2px 0;
    border-style: solid;
    border-color: color-mix(in srgb, var(--bg-button-primary) 70%, black);
    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_xvzrm_488:hover {
    background-color: color-mix(in srgb, var(--bg-button-primary) 85%, white);
}

._splitBtnMain_xvzrm_464:focus,
._splitBtnChevron_xvzrm_488:focus {
    outline: none;
}

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

/* Split button dropdown — rendered via portal to escape overflow:hidden */
._splitBtnDropdown_xvzrm_525 {
    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_xvzrm_536 {
    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_xvzrm_536:hover {
    background: var(--bg-surface-secondary);
}

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

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

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

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

._drawerInfoGrid_xvzrm_563 ._infoValue_xvzrm_397 {
    font-size: 14px;
}

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

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

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

._modePillService_xvzrm_590 {
    --mode-pill-colour: var(--color-mode-service, #7b3fbe);
}

/* Filled, for the coloured banners. */
._modePill_xvzrm_586 {
    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. */
._compactPillLeft_xvzrm_44 ._modePill_xvzrm_586 {
    margin-left: var(--spacing-2);
}

/* Standalone tag beside the banner: matches the banner's height and pill radius
   so the two read as one row. */
._bannerRow_xvzrm_179 ._modePill_xvzrm_586 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2) var(--spacing-5);
    border-radius: var(--alert-banner-radius, var(--radius-full));
    font-size: var(--font-size-sm);
}

/* Outlined and tighter on the compact row's neutral surface. */
._compactPillLeft_xvzrm_44 ._modePill_xvzrm_586 {
    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_xvzrm_638 {
    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_xvzrm_649 {
    font-family: var(--font-family);
    font-size: 10px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-paragraph);
    margin: 0 0 12px;
}

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

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

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

._timelineIcon_xvzrm_671 {
    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_xvzrm_691 {
    width: 2px;
    flex: 1;
    min-height: var(--spacing-5);
    background-color: var(--border-40);
    margin: 0;
}

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

/* The trigger dot carries the banner's colour, so the two agree on one screen.
   Glyph colours follow the banners too: only the yellow takes a dark one, and it
   sits after .timelineIcon so it wins that rule's color: #fff. */
._timelineIconCritical_xvzrm_708,
._timelineIconPreAlarm_xvzrm_709 {
    background-color: var(--color-fire);
}

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

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

._timelineIconNonCritical_xvzrm_722 {
    background-color: #007d96;
}

._timelineIconRead_xvzrm_726 {
    background-color: #ed6a07;
}

._timelineIconAck_xvzrm_730 {
    background-color: #fdbf09;
}

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

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

._timelineContent_xvzrm_742 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-3);
    flex: 1;
    /* Grid items default to min-width auto, letting long unbroken comments
       stretch the row past the card edge instead of wrapping. */
    min-width: 0;
}

._timelineLabel_xvzrm_754 {
    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_xvzrm_766 {
    font-weight: var(--font-weight-medium, 500);
}

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

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

._timelineSubItem_xvzrm_782 {
    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_xvzrm_792 {
    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_xvzrm_803 {
    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_xvzrm_814 {
    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;
    overflow-wrap: anywhere;
}

/* Sits inside .timelineSubItem, which is --bg-surface-primary, so the secondary
   surface is what separates the reason from the comment above it. */
._timelineReasonCard_xvzrm_826 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-paragraph);
    background: var(--bg-surface-secondary);
    border-radius: 8px;
    padding: 12px 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

._timelineReasonIcon_xvzrm_841 {
    flex-shrink: 0;
    font-size: 12px;
}

._addCommentBtn_xvzrm_846 {
    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_xvzrm_852 {
    margin-top: -12px;
}

._addCommentRow_xvzrm_852 ._timelineContent_xvzrm_742 {
    padding-top: 0;
}

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

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

._commentTextarea_xvzrm_871 {
    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_xvzrm_871:focus {
    outline: none;
}

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

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

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

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

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

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

._modal_1407j_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_1407j_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_1407j_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_1407j_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_1407j_50 {
    animation: _spin_1407j_50 700ms linear infinite;
}

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

/* Binds a label to its own control: without this the modal body's uniform gap leaves
   each label sitting as close to the field above it as to its own. */
._field_1407j_65 {
    display: flex;
    flex-direction: column;
}

/* The body gap alone reads as too tight between the reason and the comment. Carried
   here rather than on the comment so it disappears with the field. */
._reasonField_1407j_72 {
    margin-bottom: var(--spacing-3);
}

._label_1407j_76 {
    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_1407j_84 {
    width: 100%;
    resize: none;
    field-sizing: content;
    padding: var(--spacing-3) var(--spacing-4);
    /* Field radius and border track the design system's select, so the two controls
       in this modal match. */
    border-radius: var(--radius-md);
    border: 1px solid var(--border-40);
    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);
}

/* Same token and weight the design system's fields focus with, so this and the select
   alongside it highlight identically. */
._textarea_1407j_84:focus {
    border-color: var(--border-100);
}

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

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

._cancelBtn_1407j_120 {
    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);
    border-bottom-width: 2px;
    color: var(--text-title);
    transition: background-color var(--transition-fast, 0.15s);
}

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

._acknowledgeBtn_1407j_138 {
    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: 1px solid var(--bg-button-primary);
    border-bottom-width: 2px;
    color: var(--text-button-primary);
    transition: background-color var(--transition-fast, 0.15s);
}

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

._acknowledgeBtn_1407j_138:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

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

._retryBtn_1407j_168 {
    align-self: flex-start;
    margin-top: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    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);
    border-bottom-width: 2px;
    color: var(--text-title);
    transition: background-color var(--transition-fast, 0.15s);
}

._retryBtn_1407j_168:hover {
    background: var(--bg-surface-secondary);
}
._categoriesLoading_4i8p2_1 {
    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_4i8p2_11 {
    animation: _spin_4i8p2_11 700ms linear infinite;
}

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

/* Binds a label to its own control: without this the modal body's uniform gap leaves
   each label sitting as close to the field above it as to its own. */
._field_4i8p2_26 {
    display: flex;
    flex-direction: column;
}

/* The body gap alone reads as too tight between the reason and the comment. Carried
   here rather than on the comment so it disappears with the field. */
._reasonField_4i8p2_33 {
    margin-bottom: var(--spacing-3);
}

._label_4i8p2_37 {
    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_4i8p2_45 {
    width: 100%;
    resize: none;
    min-height: 72px;
    padding: var(--spacing-3) var(--spacing-4);
    /* Field radius and border track the design system's select, so the two controls
       in this modal match. */
    border-radius: var(--radius-md);
    border: 1px solid var(--border-40);
    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);
}

/* Same token and weight the design system's fields focus with, so this and the select
   alongside it highlight identically. */
._textarea_4i8p2_45:focus {
    border-color: var(--border-100);
}

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

._cancelBtn_4i8p2_75 {
    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_4i8p2_75:hover {
    background: var(--bg-surface-secondary);
}

._clearBtn_4i8p2_93 {
    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-button-primary);
    transition: background-color var(--transition-fast, 0.15s);
}

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

._clearBtn_4i8p2_93:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
._container_teulh_1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

._toolbarBtn_teulh_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_teulh_8:hover:not(:disabled) {
    background-color: var(--bg-surface-secondary);
}

._toolbarBtn_teulh_8:focus {
    outline: none;
}

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

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

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

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

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

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

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

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

._sortDropdown_teulh_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_teulh_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_teulh_85:hover {
    background-color: var(--bg-surface-secondary);
}

._sortDropdownItem_teulh_85:focus {
    outline: none;
}

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

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

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

._backBtn_teulh_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_teulh_124:hover {
    background-color: var(--bg-surface-secondary);
}

._backBtn_teulh_124:focus {
    outline: none;
}

._backBtn_teulh_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_teulh_168 .drawer__title {
    display: none;
}

._detailMode_teulh_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_teulh_190,
._empty_teulh_191 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary, #667085);
    font-size: 14px;
}

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

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

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

._errorBanner_teulh_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_teulh_233 {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 4px 10px;
    color: inherit;
    cursor: pointer;
    font-size: 13px;
}

._retryBtn_teulh_233:hover {
    background: var(--bg-error-hover, #fee4e2);
}
._popover_1ha3b_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_1ha3b_21 {
    display: flex;
    align-items: center;
    width: 100%;
}

._title_1ha3b_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;
}

/* Two per row rather than four: at 430px wide, four equal columns left ~90px each, which
   clipped the longest option ("Last 24 hours") to "Last". Wrapping keeps every label
   readable without widening the popover. */
._fieldsRow_1ha3b_39 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
    align-items: start;
    width: 100%;
}

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

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

/* Overrides on the design-system Select wrapper: the filter row uses a pill
   rather than the default rounded rectangle. The listbox variant draws its own
   themed menu, so the option list is styled by the design system rather than
   left to the browser's native rendering. */
._select_1ha3b_66 {
    width: 100%;
    height: 36px;
    padding: 0;
    border-radius: 99px;
    border-color: var(--border-20);
    box-sizing: border-box;
}

._select_1ha3b_66 .select__trigger {
    padding: 8px 12px 8px 16px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold, 600);
}

/* Left-aligned so the selected value lines up with both its field label above
   and the options in the open menu below. */
._select_1ha3b_66 .select__value {
    flex: 1;
    text-align: left;
}

._footer_1ha3b_88 {
    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_30hqf_4 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    padding: 2px 2px var(--spacing-1);
}

/* Info banner */
._infoBanner_30hqf_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_30hqf_24 {
    flex-shrink: 0;
    font-size: var(--font-size-m);
    color: var(--text-paragraph);
}

/* Error banner — shown in-modal when the mode change request failed, so the modal stays open
   for a retry. Mirrors the ClearedAlertsDrawer error-banner tokens. */
._errorBanner_30hqf_32 {
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--bg-error-subtle, #fef3f2);
    border: 1px solid var(--border-error, #fda29b);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-error, #b42318);
}

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

._sectionLabel_30hqf_49 {
    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_30hqf_57 {
    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_30hqf_67 {
    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_30hqf_81 {
    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_30hqf_81:focus {
    outline: none;
}

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

._modeBtn_30hqf_81:hover:not(._modeBtnSelected_30hqf_110) {
    opacity: 0.7;
}

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

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

/* Device select — mirrors FiltersPopover select pattern: overrides on the
   design-system Select wrapper for the pill shape. The listbox variant draws its
   own themed menu rather than leaving the option list to the browser. */
._deviceSelect_30hqf_128 {
    width: 100%;
    height: 36px;
    padding: 0;
    border-radius: 99px;
    border-color: var(--border-20);
    box-sizing: border-box;
}

._deviceSelect_30hqf_128 .select__trigger {
    padding: 8px 12px 8px 16px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold, 600);
}

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

._durationPill_30hqf_144 {
    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_30hqf_144:hover:not(._durationPillSelected_30hqf_166) {
    background: color-mix(in srgb, var(--bg-surface-secondary) 60%, var(--bg-surface-primary));
}

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

/* Footer buttons — mirrors ClearModal */
._cancelBtn_30hqf_176 {
    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_30hqf_176:hover {
    background: var(--bg-surface-secondary);
}

._changeBtn_30hqf_194 {
    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-button-primary);
    transition: background-color var(--transition-fast, 0.15s);
}

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

._changeBtn_30hqf_194:disabled {
    background: var(--bg-surface-secondary);
    border-color: transparent;
    border-bottom-width: 1px;
    color: var(--text-paragraph);
    cursor: not-allowed;
}
._card_79r4m_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;
    container-type: inline-size;
}

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

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

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

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

._inset_79r4m_34 {
    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_79r4m_44 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    min-width: 0;
}

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

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

/* Service — purple chip (maintenance/technician mode), matches lg Chip sizing.
   Shares --color-mode-service with the alert card's Service pill and .modeIcon--service
   so one mode reads as one colour everywhere. */
._serviceChip_79r4m_66 {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    background: var(--color-mode-service, #7b3fbe);
    color: #ffffff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    /* Cap to the available width so the timestamp never clips off the card edge;
       the label wraps inside the pill instead. */
    max-width: 100%;
    text-align: center;
}

/* Weekly test — blue chip (no matching design-system variant), matches lg Chip sizing */
._weeklyTestChip_79r4m_83 {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    background: var(--color-mode-weekly-test, #285cc3);
    color: #ffffff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    /* Cap to the available width so the timestamp never clips off the card edge;
       the label wraps inside the pill instead. */
    max-width: 100%;
    text-align: center;
}

/* ---- Footer ---- */

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

._panelBadge_79r4m_109 {
    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_79r4m_122 {
    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_79r4m_131 {
    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_79r4m_131:not(:last-child) {
    border-right: 1px solid var(--border-20);
    margin: 1px 0;
}

/* ---- Status dots ---- */

._dotOnline_79r4m_147 {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: #2e7d32;
    flex-shrink: 0;
}

._dotOffline_79r4m_155 {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: #c62828;
    flex-shrink: 0;
}

._dotGrey_79r4m_163 {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: #828b99;
    flex-shrink: 0;
}

/* ---- Narrow card (laptop sidebar width and below) ----
   Side by side, the system name and the mode pill each get roughly half the row and both
   wrap onto two lines. Stacking them gives each the full width, so both read on one line
   and the pill keeps its intended size. Declared last so it wins over the base rules. */

@container (max-width: 420px) {
    ._inset_79r4m_34 {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Now that the pill owns a full row it no longer needs to wrap to fit. */
    ._serviceChip_79r4m_66,
    ._weeklyTestChip_79r4m_83 {
        white-space: nowrap;
        max-width: none;
    }

    /* The panel badge and the three connection readouts stop fitting on one line first;
       let them wrap rather than overflow the card edge. */
    ._footer_79r4m_101 {
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }
}

/* 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;
}

/* Lay the drawer body out as a flex column so the mode-history panel can grow to fill the
   remaining vertical space below the fixed connection/info sections. min-height:0 lets the
   history's inner list scroll instead of overflowing the drawer. */
.fire-alarm-system-drawer .drawer__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ===========================================
   Drawer styles
   =========================================== */

/* Connection status row — Panel box + 3-connection box side by side */
._drawerConnections_79r4m_217 {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

._drawerConnectionPanel_79r4m_224 {
    border: 1px solid var(--border-20);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

._drawerConnectionNetworkGroup_79r4m_230 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border-20);
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex: 1;
}

._drawerConnectionItem_79r4m_239 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
}

/* Inset divider rather than a border: a border-right would run the full height of the
   cell, but the design stops it short of the group's top and bottom edges. */
._drawerConnectionNetworkGroup_79r4m_230 ._drawerConnectionItem_79r4m_239:not(:last-child) {
    position: relative;
}

._drawerConnectionNetworkGroup_79r4m_230 ._drawerConnectionItem_79r4m_239:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: var(--spacing-3);
    bottom: var(--spacing-3);
    width: 1px;
    background: var(--border-20);
}

._drawerConnectionLabel_79r4m_263 {
    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_79r4m_272 {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-sm);
    color: var(--text-title);
    font-weight: var(--font-weight-bold);
}

/* Info grid */
._drawerInfoGrid_79r4m_282 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

._drawerInfoCard_79r4m_289 {
    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_79r4m_298 {
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
    font-weight: var(--font-weight-regular);
}

._drawerInfoValue_79r4m_304 {
    font-size: var(--font-size-m);
    color: var(--text-title);
    font-weight: var(--font-weight-bold);
    /* Wrap on word boundaries; keeps long serials/timestamps from breaking mid-token. */
    overflow-wrap: anywhere;
}

/* Mode history — grows to fill the remaining drawer height (see .drawer__body flex above). */
._drawerHistory_79r4m_313 {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--border-20);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
}

._drawerHistoryTitle_79r4m_323 {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
    margin-bottom: 24px;
}

._drawerHistoryList_79r4m_331 {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

._drawerHistoryEmpty_79r4m_339 {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
    text-align: center;
    padding: var(--spacing-4) 0;
}

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

._drawerHistoryIconCol_79r4m_353 {
    /* Two rows: the icon sits centred against the whole entry's text block (row 1), and the
       connector fills the gap down to the next item (row 2). Centring the icon on the full
       two-line entry — not just the first line — matches the reference design. */
    display: grid;
    grid-template-rows: auto 1fr;
    justify-items: center;
}

._drawerHistoryIcon_79r4m_353 {
    /* Fill the first row's height (which equals the content block, since the connector row is the
       flexible one) and centre the icon within it → icon centre aligns with the entry's centre. */
    display: flex;
    align-items: center;
    height: 100%;
}

._drawerHistoryConnector_79r4m_370 {
    width: 2px;
    height: 100%;
    min-height: var(--spacing-4);
    background-color: var(--border-20);
}

._drawerHistoryContent_79r4m_377 {
    display: flex;
    flex-direction: column;
    /* Tight gap between the title (date · time) and body (Duration) lines within a row;
       the larger padding-bottom keeps the row-to-row spacing airy. */
    gap: 2px;
    padding-bottom: 22px;
}

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

._drawerHistoryDuration_79r4m_392 {
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

._drawerViewAll_79r4m_397 {
    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_79r4m_397:hover {
    text-decoration: underline;
}

/* Mode icons */
._modeIcon_79r4m_64 {
    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_79r4m_428 {
    background-color: var(--color-cleared);
}

._modeIcon--scheduled_79r4m_432 {
    background-color: var(--color-mode-weekly-test, #285cc3);
}

._modeIcon--weekly-test_79r4m_436 {
    background-color: var(--color-mode-weekly-test, #285cc3);
}

._modeIcon--config_79r4m_440 {
    background-color: var(--color-mode-service, #7b3fbe);
}

._modeIcon--service_79r4m_64 {
    background-color: var(--color-mode-service, #7b3fbe);
}
/* ── Main list view ─────────────────────────────────────────────────────── */

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

._row_vob5n_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_vob5n_10:hover {
    background-color: var(--bg-surface-secondary);
}

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

._rowWithToggle_vob5n_28 ._row_vob5n_10 {
    flex: 1;
    padding-right: 0;
}

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

._rowLabel_vob5n_47 {
    font-family: var(--font-family);
    font-size: var(--font-size-m, 0.9375rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-title);
}

._rowSub_vob5n_54 {
    font-family: var(--font-family);
    font-size: var(--font-size-sm, 0.75rem);
    font-weight: var(--font-weight-regular, 400);
    color: var(--text-paragraph);
}

._rowChevron_vob5n_61 {
    color: var(--icon-secondary);
    flex-shrink: 0;
    font-size: 0.75rem;
}

._rowChevronBtn_vob5n_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_vob5n_67:focus,
._rowChevronBtn_vob5n_67:focus-visible {
    outline: none;
}

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

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

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

/* Regular weight, not semibold: the field label names the control*/
._fieldLabel_vob5n_99 {
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: var(--font-weight-regular, 400);
    color: var(--text-title);
}

._fieldError_vob5n_106 {
    font-family: var(--font-family);
    font-size: 0.8125rem;
    color: var(--color-error, #d32f2f);
}

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

._dropdown_vob5n_114 {
    position: relative;
}

._dropdownTrigger_vob5n_118 {
    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);
    /* Matches .dropdownItem so the closed trigger and the open list read alike. */
    font-size: 0.875rem;
    gap: var(--spacing-2, 8px);
    transition: border-color 120ms;
    outline: none;
}

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

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

._dropdownOpen_vob5n_146 ._dropdownTrigger_vob5n_118 {
    border-color: var(--border-100, #232933);
}

._dropdownValue_vob5n_150 {
    color: var(--text-paragraph);
    font-weight: var(--font-weight-medium, 500);
}

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

._dropdownChevron_vob5n_159 {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--icon-secondary);
    transition: transform 150ms;
}

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

._dropdownList_vob5n_170 {
    position: fixed;
    z-index: var(--z-tooltip, 400);
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--bg-surface-primary, #fff);
    /* Detached card below the field, per the design: rounder than the trigger and
       lifted by a softer, wider shadow so it reads as floating rather than joined. */
    border-radius: 12px;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.12);
    padding: var(--spacing-1, 4px) 0;
    max-height: 172px;
    overflow-y: auto;
    outline: none;
}

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

/* Sits a step below the modal title in both size and weight: the options are
   choices to scan, not headings, and matching the title made the list shout.
   --font-size-sm (12px) keeps this on the design system's scale. */
._dropdownItem_vob5n_130 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Roomier than the trigger: the design gives each option a generous hit area
       and insets the label from the card edge, so the list reads as a menu rather
       than a packed table. On the spacing scale (16px / 20px). */
    padding: var(--spacing-4, 16px) var(--spacing-5, 20px);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: var(--font-size-sm, 0.75rem);
    line-height: 140%;
    color: var(--text-paragraph);
    gap: var(--spacing-2, 8px);
    transition: background 100ms;
}

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

._dropdownItemSelected_vob5n_218 {
    background-color: var(--bg-surface-secondary);
    font-weight: var(--font-weight-medium, 500);
}

._dropdownItemLabel_vob5n_223 {
    flex: 1;
}

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

._playButton_vob5n_229 {
    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(--icon-secondary);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 120ms;
}

._playButton_vob5n_229:hover {
    opacity: 0.75;
}

._playButton_vob5n_229::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    /* Optical, not geometric, centering: a right-pointing triangle carries its mass
       toward the flat edge (centroid is 1/3 from the left), so centering the
       bounding box leaves it looking shifted left. Nudge right by 1px — a sixth of
       the 6px width — to sit the centroid on the circle's centre. */
    transform: translate(calc(-50% + 1px), -50%);
}

._playButtonPaused_vob5n_270::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_vob5n_287 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 8px);
}

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

._intervalInput_vob5n_299 {
    width: 64px;
    padding: 8px 22px 8px var(--spacing-3, 12px);
    background: var(--bg-surface-primary);
    border: 1.5px solid var(--border-40);
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 0.9375rem;
    color: var(--text-title);
    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_vob5n_299::-webkit-outer-spin-button,
._intervalInput_vob5n_299::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

._intervalInput_vob5n_299:hover {
    border-color: var(--text-paragraph);
}

._intervalInput_vob5n_299:focus {
    outline: none;
    border-color: var(--text-title);
    box-shadow: 0 0 0 1px var(--text-title);
}

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

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

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

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

._intervalUnit_vob5n_364 {
    font-family: var(--font-family);
    font-size: 0.875rem;
    color: var(--text-paragraph);
    white-space: nowrap;
}

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

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

._footerConfig_vob5n_378 {
    display: flex;
    align-items: center;
    /* Advanced sits left, Back/Save right — the empty <span/> holds the left slot on
       screens without an Advanced button so Back/Save stay right-aligned. */
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-2, 8px);
}

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

/* ── Advanced (per-alert-type) view ──────────────────────────────────────── */

._advancedBody_vob5n_396 {
    display: flex;
    flex-direction: column;
}

/* The list scrolls internally once it grows beyond the capped height, keeping the modal a fixed size. */
/* Stacked label-above-dropdown rows, matching the single-sound config screen. The capped
   height keeps the modal a fixed size and lets the list scroll internally; the scrollbar
   is the affordance, so there is no separate chevron hint. */
._advancedList_vob5n_405 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5, 20px);
    max-height: 340px;
    overflow-y: auto;
    /* The global scrollbar already insets its thumb, so the old 8px pad here
       stacked into a double gap. A small pad plus a stable gutter keeps the
       fields clear of the bar without the list shifting when it appears. */
    padding-right: var(--spacing-1, 4px);
    scrollbar-gutter: stable;
}

._advancedEmpty_vob5n_418 {
    font-family: var(--font-family);
    font-size: 0.875rem;
    color: var(--text-paragraph);
    padding: var(--spacing-4, 16px) 0;
    text-align: center;
}

/* ── Loading skeleton ────────────────────────────────────────────────────── */
/* Sized to the real row (label line + 41px field) so the list does not jump when
   the types arrive. */

._skeleton_vob5n_430 {
    display: block;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--bg-surface-secondary) 25%,
        var(--border-40) 37%,
        var(--bg-surface-secondary) 63%
    );
    background-size: 400% 100%;
    animation: _skeletonShimmer_vob5n_1 1.4s ease-in-out infinite;
}

._skeletonLabel_vob5n_443 {
    width: 40%;
    height: 0.875rem;
}

._skeletonField_vob5n_448 {
    width: 100%;
    /* 10px padding + 1.5px border top and bottom, around a 0.875rem line. */
    height: 41px;
    border-radius: 8px;
}

@keyframes _skeletonShimmer_vob5n_1 {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

/* Respect a reduced-motion preference: the placeholder still reads as pending
   without the shimmer. */
@media (prefers-reduced-motion: reduce) {
    ._skeleton_vob5n_430 {
        animation: none;
    }
}

/* Visible to screen readers only — announces the pending state that the
   aria-hidden placeholder rows deliberately do not. */
._srOnly_vob5n_474 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The shared InlineMessage tints itself with the variant accent, which makes the info
   variant blue. The design calls for a neutral surface with the icon carrying the only
   contrast, so the accent tint and border are dropped here. --bg-cs-bg rather than the
   lighter --bg-surface-secondary: it stays a step darker than the modal in light mode and,
   unlike the other #edeff2 tokens, does not collapse into the modal's own background in
   dark. Doubled class to win over the package's single-class rule whatever the
   stylesheet order. */
._advancedNotice_vob5n_493._advancedNotice_vob5n_493 {
    background-color: var(--bg-cs-bg);
    border-color: transparent;
    /* Matches the Advanced/Back buttons beneath it rather than the lighter body default. */
    font-weight: var(--font-weight-semibold, 600);
}

._advancedNotice_vob5n_493 .inline-message__icon {
    color: var(--text-title);
}
._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_1boqw_3 .drawer__header-left button:nth-of-type(2),
._drawer_1boqw_3 .drawer__header-left button:nth-of-type(3) {
    display: none;
}

._label_1boqw_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_1boqw_17 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-3);
}

._input_1boqw_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_1boqw_24:focus {
    border-color: var(--bg-button-primary);
}

._inputError_1boqw_42 {
    border-color: var(--color-alarm, #e53e3e);
}

._inputError_1boqw_42:focus {
    border-color: var(--color-alarm, #e53e3e);
}

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

._counterError_1boqw_56 {
    color: var(--color-alarm, #e53e3e);
}

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

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

._addReasonButton_1boqw_74 {
    width: 110px;
    height: 36px;
    flex-shrink: 0;
    align-self: flex-end;
}

._chips_1boqw_81 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
}

._chip_1boqw_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_1boqw_102 {
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: var(--spacing-2);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-alarm, #e53e3e);
    color: var(--text-invert);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
}

/* focus-within keeps it reachable by keyboard, where there is no hover. */
._chip_1boqw_81:hover ._chipRemove_1boqw_102,
._chip_1boqw_81:focus-within ._chipRemove_1boqw_102 {
    display: inline-flex;
}
._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);
}