/* ===========================================
   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-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-bold);
    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-regular);
    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: 400px;
    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);
}

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

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

.drawer__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid var(--border-20);
    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_1p77q_6 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    height: var(--content-height, calc(100vh - var(--spacing-5) - 5rem));
}

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

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

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

._location_1p77q_28 {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--text-title);
    margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

._fireOverlayPulsing_1p77q_183 {
    animation: _firePulse_1p77q_1 800ms ease-in-out infinite alternate;
}

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

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

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

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

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

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

._bannerFireAlarm_4msvd_29 {
    background-color: #e6251e;
}
._bannerFault_4msvd_32 {
    background-color: #ed6a07;
}
._bannerPreAlarm_4msvd_35 {
    background-color: #e6251e;
}
._bannerIsolate_4msvd_38 {
    background-color: #7f8c8d;
}
._bannerTest_4msvd_41 {
    background-color: #2980b9;
}
._bannerDefault_4msvd_44 {
    background-color: #e6251e;
}

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

._alertType_4msvd_56 {
    font-family: var(--font-family);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-bold);
    color: #fff;
    white-space: nowrap;
    margin-left: var(--spacing-4);
}

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

._relativeTime_4msvd_70 {
    font-family: var(--font-family);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

._bannerRight_4msvd_78 {
    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-2) var(--spacing-3);
}

._statusGroup_4msvd_88 {
    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_4msvd_97 {
    font-weight: var(--font-weight-regular);
}

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

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

._iconBtn_4msvd_113 {
    width: var(--spacing-8);
    height: var(--spacing-8);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-20);
    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_4msvd_113:hover {
    background-color: var(--bg-surface-tertiary, var(--bg-surface-secondary));
}

._iconBtnActive_4msvd_133 {
    background-color: #e6251e;
    color: #fff;
    border-color: transparent;
}

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

._iconBtnAcknowledged_4msvd_143 {
    background-color: #e65100;
    color: #fff;
    border-color: transparent;
}

._iconBtnAcknowledged_4msvd_143:hover {
    background-color: #bf4300;
}

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

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

._bodyFrame_4msvd_164 {
    border: 1px solid var(--border-20);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

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

._infoCard_4msvd_179 {
    background-color: var(--bg-surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

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

._infoValue_4msvd_195 {
    font-family: var(--font-family);
    font-size: var(--font-size-m);
    color: var(--text-title);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

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

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

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

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

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

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

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

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

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

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

._splitBtnMain_4msvd_261 {
    background-color: var(--bg-button-primary);
    color: var(--text-invert);
    border: none;
    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-bold);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-fast);
}

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

._splitBtnChevron_4msvd_279 {
    background-color: var(--bg-button-primary);
    color: var(--text-invert);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    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_4msvd_279:hover {
    background-color: color-mix(in srgb, var(--bg-button-primary) 85%, white);
}

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

._dropdownItem_4msvd_310 {
    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-regular);
    color: var(--text-title);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

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

._dropdownItem_4msvd_310 + ._dropdownItem_4msvd_310 {
    border-top: 1px solid var(--border-20);
}
._backdrop_62tox_1 {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

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

._textarea_62tox_47 {
    width: 100%;
    resize: vertical;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-20);
    background: var(--bg-surface-secondary);
    color: var(--text-title);
    font-size: var(--font-size-m);
    font-family: var(--font-family);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-fast, 0.15s);
    min-height: 96px;
}

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

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

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

._cancelBtn_62tox_79 {
    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-bold);
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border-20);
    color: var(--text-title);
    transition: background-color var(--transition-fast, 0.15s);
}

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

._acknowledgeBtn_62tox_96 {
    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-bold);
    cursor: pointer;
    background: var(--bg-button-primary);
    border: none;
    color: var(--text-invert);
    transition: background-color var(--transition-fast, 0.15s);
}

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

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

._categoryBtn_1no2z_9 {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    border: 1px solid 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-regular);
    cursor: pointer;
    transition: background-color var(--transition-fast, 0.15s),
        border-color var(--transition-fast, 0.15s),
        color var(--transition-fast, 0.15s);
}

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

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

._categoryBtnSelected_1no2z_28: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_1no2z_40 {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--color-alarm, #e53e3e);
}

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

._textarea_1no2z_53 {
    width: 100%;
    resize: vertical;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-20);
    background: var(--bg-surface-secondary);
    color: var(--text-title);
    font-size: var(--font-size-m);
    font-family: var(--font-family);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-fast, 0.15s);
    min-height: 96px;
}

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

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

._cancelBtn_1no2z_78 {
    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-bold);
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border-20);
    color: var(--text-title);
    transition: background-color var(--transition-fast, 0.15s);
}

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

._clearBtn_1no2z_95 {
    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-bold);
    cursor: pointer;
    background: var(--bg-button-primary);
    border: none;
    color: var(--text-invert);
    transition: background-color var(--transition-fast, 0.15s);
}

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

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