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

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

body {
    margin: 0;
}

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

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

:root {
  color-scheme: light dark;
}

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

  /* Backgrounds - Buttons */
  --bg-button-primary: #403456;
  --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;
}

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

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

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

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

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

    /* Borders */
    --border-20: #5C6575;
    --border-40: #464E5C;
    --border-60: #5C6575;
    --border-100: #F6F7F9;
    --border-brand: #675D78;

    /* Text Colors */
    --text-title: #FFFFFF;
    --text-paragraph: #D7DAE0;
    --text-disable: #5C6575;
    --text-invert: #232933;
    --text-brand: #2D1B3F;

    /* Icon Colors */
    --icon-hero: #FFFFFF;
    --icon-secondary: #D7DAE0;
    --icon-disable: #BDC4D1;
    --icon-brand: #675D78;
  }
}

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

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

  /* Backgrounds - Buttons */
  --bg-button-primary: #403456;
  --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;
}

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

  /* Backgrounds - Surface */
  --bg-surface-primary: #232933;
  --bg-surface-secondary: #303640;
  --bg-surface-invert: #464E5C;
  --bg-surface-invert-2: #5C6575;
  --bg-surface-brand: #D8D6DD;

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

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

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

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

  /* Borders */
  --border-20: #5C6575;
  --border-40: #464E5C;
  --border-60: #5C6575;
  --border-100: #F6F7F9;
  --border-brand: #675D78;

  /* Text Colors */
  --text-title: #FFFFFF;
  --text-paragraph: #D7DAE0;
  --text-disable: #5C6575;
  --text-invert: #232933;
  --text-brand: #2D1B3F;

  /* Icon Colors */
  --icon-hero: #FFFFFF;
  --icon-secondary: #D7DAE0;
  --icon-disable: #BDC4D1;
  --icon-brand: #675D78;
}
/**
 * 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);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-default);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Small - icon only or minimal text */

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

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

/* Medium (default) */

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

/* Large - with time display */

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

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

/* Alarm - High emphasis (Red) */

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

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

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

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

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

/* Online - Low emphasis (Green) */

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

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

/* Offline - Inactive (Gray) */

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

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

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

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

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

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

.chip__label {
    flex-shrink: 0;
}

.chip__time {
    opacity: 0.9;
}

.chip__separator {
    opacity: 0.6;
}

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

/* Icon only */

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

/* Text only (no icon) */

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

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

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

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

/* Chip stack for hierarchical display */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Compact card - less padding */

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

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

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

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

/* Clickable card */

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

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

/* Selected card */

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

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

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

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

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

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

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

/* Checked state */

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

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

/* Checkmark icon fallback */

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

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

/* Indeterminate state */

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

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

/* Focus state */

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

/* Disabled state */

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

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

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

/* Checkbox Group */

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

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

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

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

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

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

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

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

/* Selected state */

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

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

/* Focus state */

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

/* Disabled state */

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

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

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

/* Radio Group */

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

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

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

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

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

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

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

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

/* Large size (default) */

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

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

/* Small size */

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

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

/* On state */

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

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

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

/* Focus state */

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

/* Disabled state */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Error state */

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

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

/* Disabled state */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Selected state */

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

/* Disabled state */

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

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

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

/* Icon-only variant */

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

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

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

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

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

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

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

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

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

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

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

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

/* Selected state */

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

/* Inactive/disabled state */

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

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

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

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

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

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

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

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

/* Compact tabs */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Icon variants */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Compact - no description */

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

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

/* Light theme notification */

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

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

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

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

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

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

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

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

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

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

/* Position variants */

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

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

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

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

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

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

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

/* Separator between parts */

.info-tag__separator {
    opacity: 0.6;
}

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

/* Success / Passed (green) */

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

/* Error / Failed (red) */

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

/* Warning (amber) */

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

/* Neutral / Default */

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

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

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

/* Badge variants */

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

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

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

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

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

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

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

/* Outline badge */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}
/* ===========================================
   FLARE ISM - Home Page Styles (CSS Module)
   Theme CSS imported in Home.tsx as side-effects
   =========================================== */

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

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

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

._datetime_1yn64_25 {
    font-size: 15px;
    font-weight: 600;
    color: #828B99;
}

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

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

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

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

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

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

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

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

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

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

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


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

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

._content_1yn64_93 .card-repeater {
    border-color: #e3e4e6 /*#EDEFF2 | 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_1yn64_93 .btn {
    border-bottom-width: 2px;
}

._content_1yn64_93 .btn--secondary,
._content_1yn64_93 .btn--ghost {
    border-color: #e3e4e6 /*#EDEFF2 | 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_1yn64_93 button:focus {
    outline: none;
}

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

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

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

/* ---------------------------------------------------------------
   Demo-only Drawer overrides. Drawer is portalled to <body>, so
   these selectors are unscoped :global(). Revert once the shared
   Drawer is updated to match this spec.
   --------------------------------------------------------------- */
.drawer {
    top: 60px !important;
    bottom: 60px !important;
    right: 60px;
    border-color: #e3e4e6 /*#EDEFF2 | 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 */
    width: 400px !important;
}

.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_1yn64_271 .card-repeater__header {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--spacing-3);
    overflow: hidden;
}

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

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

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

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

._filterTrigger_1yn64_295:focus {
    outline: none;
}

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

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

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

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

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

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

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

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

._filterDropdownItemSelected_1yn64_390 {
    font-weight: 600;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

._fireOverlayFault_1yn64_480 {
    --fire-overlay-color: rgba(237, 106, 7, 0.6);
}

._fireOverlayPulsing_1yn64_484 {
    animation: _firePulse_1yn64_1 800ms ease-in-out infinite alternate;
}

@keyframes _firePulse_1yn64_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_1yn64_503 {
    background: var(--bg-surface-primary, #fff);
    border: 1px solid #e3e4e6;
    border-radius: 24px;
    padding: var(--spacing-8) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    overflow: hidden;
}

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

._skeletonTitle_1yn64_521 {
    width: 80px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f5f7f9 25%, #e8eaed 50%, #f5f7f9 75%);
    background-size: 200% 100%;
    animation: _skeletonShimmer_1yn64_1 1.5s infinite;
}

._skeletonAction_1yn64_530 {
    width: 110px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f5f7f9 25%, #e8eaed 50%, #f5f7f9 75%);
    background-size: 200% 100%;
    animation: _skeletonShimmer_1yn64_1 1.5s infinite;
}

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

._skeletonCard_1yn64_548 {
    height: 160px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f5f7f9 25%, #e8eaed 50%, #f5f7f9 75%);
    background-size: 200% 100%;
    animation: _skeletonShimmer_1yn64_1 1.5s infinite;
}

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

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

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

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

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

._card_ka48u_5 {
    background-color: var(--bg-surface-primary);
    border: 1px solid #e3e4e6 /*#EDEFF2 | 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_ka48u_20 {
    background-color: var(--bg-surface-primary);
    border: 1px solid #EDEFF2;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

._compactPill_ka48u_32 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background-color: #F5F7F9;
    border-radius: 99px;
    padding: 12px 12px 12px 24px;
    width: 100%;
    box-sizing: border-box;
}

._compactPillLeft_ka48u_44 {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

._compactPillTitle_ka48u_52 {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: #303640;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    min-width: 0;
    max-width: 100%;
}

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

._compactPillRight_ka48u_71 {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #FFFFFF;
    border-radius: 99px;
    padding: 4px 4px 4px 12px;
    flex-shrink: 0;
}

._compactPillStatus_ka48u_81 {
    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_ka48u_92 {
    color: #303640;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
}

._compactPillBadge_ka48u_98 {
    width: 24px;
    height: 24px;
    border-radius: 99px;
    background-color: #589a23;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
}

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

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

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

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

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

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

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

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

._bannerFireAlarm_ka48u_173 {
    background-color: #e6251e;
}
._bannerFault_ka48u_176 {
    background-color: #ed6a07;
}
._bannerPreAlarm_ka48u_179 {
    background-color: #e6251e;
}
._bannerIsolate_ka48u_182 {
    background-color: #7f8c8d;
}
._bannerTest_ka48u_185 {
    background-color: #2980b9;
}
._bannerDefault_ka48u_188 {
    background-color: #e6251e;
}

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

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

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

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

._bannerRight_ka48u_221 {
    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_ka48u_232 {
    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_ka48u_241 {
    font-weight: 600;
}

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

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

._iconBtn_ka48u_257 {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 1px solid #e3e4e6 /*#EDEFF2 | 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_ka48u_257:hover {
    background-color: var(--bg-surface-tertiary, var(--bg-surface-secondary));
}

._iconBtnTriggered_ka48u_278 {
    background-color: #E6251E;
    color: #fff;
    border-color: transparent;
}

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

._iconBtnRead_ka48u_288 {
    background-color: #ED6A07;
    color: #fff;
    border-color: transparent;
}

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

._iconBtnAcknowledged_ka48u_298 {
    background-color: #FDBF09;
    color: #fff;
    border-color: transparent;
}

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

._iconBtnCleared_ka48u_308 {
    background-color: #589A23;
    color: #fff;
    border-color: transparent;
}

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

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

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

._bodyFrame_ka48u_328 {
    border: 1px solid #e3e4e6 /*#EDEFF2 | 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_ka48u_338 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-3);
}

._infoCard_ka48u_344 {
    background-color: #F5F7F9 /*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_ka48u_354 {
    font-family: var(--font-family);
    font-size: 10px;
    color: var(--text-paragraph);
    font-weight: 600;
}

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

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

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

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

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

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

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

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

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

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

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

._splitBtnMain_ka48u_428 {
    background-color: #303640 /*var(--bg-button-primary)*/;
    color: var(--text-invert);
    border: none;
    border-right: 1px solid #464E5C;
    border-bottom: 2px solid #464E5C;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-fast);
}

._splitBtnMain_ka48u_428:hover {
    background-color: color-mix(in srgb, #303640 85%, white);
}

._splitBtnChevron_ka48u_448 {
    background-color: #303640 /*var(--bg-button-primary)*/;
    color: var(--text-invert);
    border: none;
    border-bottom: 2px solid #464E5C;
    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);
}

._splitBtnChevron_ka48u_448:hover {
    background-color: color-mix(in srgb, #303640 85%, white);
}

._splitBtnMain_ka48u_428:focus,
._splitBtnChevron_ka48u_448:focus {
    outline: none;
}

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

/* Split button dropdown — rendered via portal to escape overflow:hidden */
._splitBtnDropdown_ka48u_479 {
    position: fixed;
    background: var(--bg-surface-primary);
    border: 1px solid #e3e4e6 /*#EDEFF2 | 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_ka48u_490 {
    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_ka48u_490:hover {
    background: var(--bg-surface-secondary);
}

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

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

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

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

._drawerInfoGrid_ka48u_517 ._infoValue_ka48u_361 {
    font-size: 14px;
}

/* ===========================================
   Drawer banner test/service mode pill
   =========================================== */

._testModePill_ka48u_538 {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-full);
    padding: 2px var(--spacing-2);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    margin-left: auto;
}

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

._timeline_ka48u_555 {
    border: 1px solid #e3e4e6 /*#EDEFF2 | var(--border-20)*/;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: var(--spacing-5);
    padding-bottom: 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

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

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

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

._timelineIcon_ka48u_588 {
    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_ka48u_608 {
    width: 2px;
    flex: 1;
    min-height: var(--spacing-5);
    background-color: #edeff2 /*var(--border-40)*/;
    margin: 0;
}

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

._timelineIconTrigger_ka48u_622 {
    background-color: #E6251E;
}

._timelineIconRead_ka48u_626 {
    background-color: #ED6A07;
}

._timelineIconAck_ka48u_630 {
    background-color: #FDBF09;
}

._timelineIconClear_ka48u_634 {
    background-color: #589A23;
}

._timelineIconComment_ka48u_638 {
    background-color: #828B99;
}

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

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

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

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

._timelineSubItem_ka48u_679 {
    background-color: var(--bg-surface-primary);
    border: 1px solid #e3e4e6 /*#EDEFF2 | var(--border-20)*/;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

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

._timelineSubComment_ka48u_711 {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--font-weight-bold, 700);
    color: #505a6b;
    line-height: 1.4;
    white-space: pre-wrap;
}

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

._addCommentRow_ka48u_726 ._timelineContent_ka48u_642 {
    padding-top: 0;
}

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

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

._commentTextarea_ka48u_745 {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e3e4e6 /*#EDEFF2 | 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_ka48u_745:focus {
    outline: none;
}

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

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

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

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

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

._modal_o4b62_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_o4b62_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_o4b62_32 {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

._label_10tz4_48 {
    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_10tz4_56 {
    width: 100%;
    resize: none;
    field-sizing: content;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    border: 1px solid #EDEFF2 /*var(--border-20)*/;
    background: var(--bg-surface-primary);
    color: var(--text-title);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 600);
    font-family: var(--font-family);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-fast, 0.15s);
}

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

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

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

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

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

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

._toolbarBtn_1xatr_8 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    background-color: #ffffff;
    border: 1px solid #EDEFF2;
    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: #101828;
    cursor: pointer;
}

._toolbarBtn_1xatr_8:hover:not(:disabled) {
    background-color: #F5F7F9;
}

._toolbarBtn_1xatr_8:focus {
    outline: none;
}

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

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

._toolbarBtnActive_1xatr_43 {
    background-color: #D5DAE3;
    border-color: #C4CAD4;
    color: #101828;
}

._toolbarBtnActive_1xatr_43:hover:not(:disabled) {
    background-color: #C4CAD4;
}

._toolbarBtnMuted_1xatr_53 {
    color: #828b99;
    font-weight: var(--font-weight-semibold, 600);
}

._toolbarBtnStrong_1xatr_58 {
    color: #303640;
    font-weight: var(--font-weight-bold);
}

._toolbarBtnSep_1xatr_63 {
    color: #303640;
    font-weight: var(--font-weight-regular);
}

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

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

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

._sortDropdownItem_1xatr_85:hover {
    background-color: #F5F7F9;
}

._sortDropdownItem_1xatr_85:focus {
    outline: none;
}

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

._sortDropdownItemActive_1xatr_112 {
    color: #101828;
    font-weight: var(--font-weight-bold);
    background-color: #F5F7F9;
}

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

._backBtn_1xatr_124 {
    width: 40px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid #EDEFF2;
    border-bottom-width: 2px;
    border-radius: 8px;
    color: #101828;
    cursor: pointer;
    padding: 0;
    align-self: flex-start;
    flex-shrink: 0;
}

._backBtn_1xatr_124:hover {
    background-color: #F5F7F9;
}

._backBtn_1xatr_124:focus {
    outline: none;
}

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

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

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

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

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

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

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

._retryBtn_1xatr_226:hover {
    background: var(--bg-error-hover, #fee4e2);
}
._popover_muvnj_1 {
    position: fixed;
    background-color: var(--bg-surface-primary, #ffffff);
    border: 1px solid #EDEFF2;
    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_muvnj_21 {
    display: flex;
    align-items: center;
    width: 100%;
}

._title_muvnj_27 {
    margin: 0;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: #303640;
    line-height: 1.4;
}

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

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

._fieldLabel_muvnj_51 {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: var(--font-weight-medium, 500);
    color: #505a6b;
    line-height: 1.4;
}

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

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

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

._selectChevron_muvnj_88 {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #303640;
    pointer-events: none;
}

._footer_muvnj_99 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    height: 36px;
    width: 100%;
}
._card_gp645_1 {
    background: var(--bg-surface-primary);
    border: 1px solid #e3e4e6 /*#EDEFF2 | var(--border-20)*/;
    border-bottom-width: 2px;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    cursor: pointer;
}

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

._card_gp645_1 .chip--online {
    background-color: #589A23;
}

._card_gp645_1 .chip--offline {
    background-color: #828B99;
    color: #ffffff;
}

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

._inset_gp645_33 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: #F5F7F9;
    border-radius: var(--radius-lg);
}

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

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

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

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

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

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

._panelBadge_gp645_86 {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid #e3e4e6 /*#EDEFF2 | 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_gp645_99 {
    display: flex;
    align-items: stretch;
    border: 1px solid #e3e4e6 /*#EDEFF2 | var(--border-20)*/;
    border-radius: var(--radius-md);
    overflow: hidden;
    padding: var(--spacing-2) var(--spacing-0); /* to align with panel badge height */
}

._connectionItem_gp645_108 {
    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_gp645_108:not(:last-child) {
    border-right: 1px solid #e3e4e6 /*#EDEFF2 | var(--border-20)*/;
    margin: 1px 0;
}

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

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

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

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

/* Hide expand and remote control buttons — scoped to this drawer only */
.fire-alarm-system-drawer .drawer__header-left button:nth-child(2),
.fire-alarm-system-drawer .drawer__header-left button:nth-child(3) {
    display: none;
}

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

/* Nimbus mode pill in drawer header */
._modePill_gp645_159 {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 8px;
    background-color: var(--bg-surface-primary);
    border: 1px solid #e3e4e6;
    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;
}

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

._drawerConnectionPanel_gp645_182 {
    border: 1px solid #e3e4e6;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

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

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

._drawerConnectionNetworkGroup_gp645_188 ._drawerConnectionItem_gp645_197:not(:last-child) {
    border-right: 1px solid #e3e4e6;
}

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

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

._drawerInfoCard_gp645_235 {
    background-color: #F5F7F9;
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

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

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

/* Mode history */
._drawerHistory_gp645_257 {
    border: 1px solid #e3e4e6;
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
}

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

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

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

._drawerHistoryIconCol_gp645_282 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

._drawerHistoryConnector_gp645_288 {
    width: 2px;
    flex: 1;
    min-height: var(--spacing-4);
    background-color: #e3e4e6;
}

._drawerHistoryContent_gp645_295 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-4);
}

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

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

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

/* Mode icons */
._modeIcon_gp645_333 {
    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_gp645_345 {
    background-color: #589A23;
}

._modeIcon--scheduled_gp645_349 {
    background-color: #285CC3;
}

._modeIcon--weekly-test_gp645_353 {
    background-color: #285CC3;
}

._modeIcon--config_gp645_357 {
    background-color: #7B3FBE;
}
/* ===========================================
   System status pill trigger
   =========================================== */

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

._label_77ow6_10 {
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: #303640;
    white-space: nowrap;
    line-height: 1;
}

._statusGroup_77ow6_19 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 4px;
    background-color: #ffffff;
    border: 1px solid #EDEFF2;
    border-radius: 8px;
}

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

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

._dot_77ow6_43 {
    width: 10px;
    height: 10px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    flex-shrink: 0;
}

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

._dotOnline_77ow6_62 {
    color: #589a23;
}

._dotOffline_77ow6_66 {
    color: #e6251e;
}

._divider_77ow6_70 {
    width: 1px;
    height: 20px;
    background-color: #EDEFF2;
    flex-shrink: 0;
}

._statusIcon_77ow6_77 {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #303640;
    font-size: 16px;
}

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

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

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

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

._dropdownRow_77ow6_111 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-family: var(--font-family);
    font-size: 12px;
    color: var(--text-title);
    white-space: nowrap;
}

._dropdownIcon_77ow6_122 {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-secondary);
    font-size: 18px;
    flex-shrink: 0;
}

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

._dropdownStatus_77ow6_141 {
    font-size: 12px;
    color: var(--text-paragraph);
    font-weight: var(--font-weight-medium, 500);
    text-transform: capitalize;
}