/* Import Nimbus Design System Theme */
/**
 * Nimbus Design System - CSS Theme
 * Auto-generated from Figma Design Tokens
 *
 * This file contains all design tokens as CSS custom properties.
 * The theme automatically adapts to light/dark mode using prefers-color-scheme.
 *
 * NOTE: the @import below is hand-added and must survive regeneration from the
 * token export. Everything after it is generated.
 */

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

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

/* Firefox. Set on the root and inherited, so nested scroll containers pick it
   up without each needing its own rule. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

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

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

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

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

/* The square where the vertical and horizontal bars meet: left at its default
   it paints an opaque grey patch in the corner of dual-axis scrollers. */
:where(*)::-webkit-scrollbar-corner {
    background: transparent;
}

:root {
    color-scheme: light dark;
}

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

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

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

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

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

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

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

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

    /* Status Colors */
    --color-cleared: #589a23;
    --color-fire: #e6251e;
    --color-mode-service: #7b3fbe;
    --color-mode-weekly-test: #285cc3;
}

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

        /* Backgrounds - Buttons */
        --bg-button-primary: #5c6575;
        --text-button-primary: #ffffff;
        --bg-button-secondary: #303640;
        --bg-button-ghost: #232933;
        --bg-button-border: #464e5c;
        --bg-button-disable: #303640;

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

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

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

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

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

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

        /* Status Colors */
        --color-cleared: #589a23;
        --color-fire: #e6251e;
        --color-mode-service: #7b3fbe;
        --color-mode-weekly-test: #285cc3;
    }
}

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

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

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

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

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

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

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

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

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

    /* Status Colors */
    --color-cleared: #589a23;
    --color-fire: #e6251e;
    --color-mode-service: #7b3fbe;
    --color-mode-weekly-test: #285cc3;
}

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

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

    /* Backgrounds - Buttons */
    --bg-button-primary: #5c6575;
    --text-button-primary: #ffffff;
    --bg-button-secondary: #303640;
    --bg-button-ghost: #232933;
    --bg-button-border: #464e5c;
    --bg-button-disable: #303640;

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

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

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

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

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

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

    /* Status Colors */
    --color-cleared: #589a23;
    --color-fire: #e6251e;
    --color-mode-service: #7b3fbe;
    --color-mode-weekly-test: #285cc3;
}

/* Import Nimbus Design System Components */
/**
 * Nimbus Design System - Components Package
 * @lancontrolsystems/nimbus-web-components
 *
 * This package provides structural CSS components and layout tokens.
 * Use alongside @lancontrolsystems/nimbus-web-theme for colors.
 *
 * Usage:
 *   @import '@lancontrolsystems/nimbus-web-components/src/index.css';
 *
 * Or import individual files:
 *   @import '@lancontrolsystems/nimbus-web-components/src/tokens/typography.css';
 *   @import '@lancontrolsystems/nimbus-web-components/src/components/buttons.css';
 */

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

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

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

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

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

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-tooltip: 400;
}
/**
 * Nimbus Design System - Typography Tokens
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Font: Montserrat
 * Line Height: 140% (1.4)
 * Letter Spacing: 0
 * Paragraph Spacing: 10px
 */

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

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

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

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

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

/* Typography Classes */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Button with icon only (square/circle) */
.btn--icon-only {
    padding: var(--spacing-2);
    aspect-ratio: 1;
}

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

.btn--primary {
    background-color: var(--bg-button-primary);
    border-color: var(--bg-button-primary);
    /* Not --text-invert: that tracks light-on-dark surfaces and flips to dark text in
       dark mode, where this button stays mid-grey and still needs white. */
    color: var(--text-button-primary);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.btn-group--vertical {
    flex-direction: column;
}
/**
 * Nimbus Design System - Breadcrumb
 *
 * Trail of ancestor links ending in the page being looked at.
 */

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

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

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

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

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

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

/* A consumer's own anchor is styled alongside the component's, so a trail whose crumbs
   navigate through a router looks the same as one built from plain links. */
.breadcrumb__link,
.breadcrumb__item a {
    display: block;
    min-width: 0;
    color: var(--text-paragraph);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
    /* Clipped rather than wrapped: a trail is a single line of ancestry, and a wrapped
       crumb reads as two. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

   Both :focus and :focus-visible are styled deliberately: where :focus-visible is
   unknown the browser drops both rules below, including the one inside :not(), and the
   component would fall back to whatever focus styling the host happens to apply. */
.breadcrumb__link:focus,
.breadcrumb__link:focus-visible,
.breadcrumb__item a:focus,
.breadcrumb__item a:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}

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

/* A crumb with nowhere to lead: shaped like a link, without the affordances of one. */
.breadcrumb__text {
    display: block;
    min-width: 0;
    color: var(--text-paragraph);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb__current {
    display: block;
    min-width: 0;
    color: var(--text-title);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/**
 * Nimbus Design System - Chip Components
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Sizes: Small, Medium, Large
 * States: Alarm (red), Warning (amber), Online (green), Offline (gray)
 * Shape: Pill (fully rounded)
 * Anatomy: Icon + Label + Optional Time
 *
 * Hierarchy (Traffic Light System):
 * - High emphasis: Alarm (red) - most important
 * - Medium emphasis: Warning/Fault (amber)
 * - Low emphasis: Online (green)
 * - Inactive: Offline (gray)
 */

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

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

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

/* Small - icon only or minimal text */
.chip--sm {
    padding: var(--spacing-1);
    font-size: var(--font-size-xs);
}

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

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

/* Large - with time display */
.chip--lg {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
}

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

/* Alarm - High emphasis (Red) */
.chip--alarm {
    background-color: #c62828;
    color: #ffffff;
}

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

/* Warning/Fault - Medium emphasis (Amber) */
.chip--warning {
    background-color: transparent;
    color: #e65100;
    border: 1px solid currentColor;
}

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

/* Online - Low emphasis (Green) */
.chip--online {
    background-color: #2e7d32;
    color: #ffffff;
}

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

/* Offline - Inactive (Gray) */
.chip--offline {
    background-color: var(--bg-chip-filled);
    color: var(--text-paragraph);
}

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

/* Offline variant with red text (for emphasis when needed) */
.chip--offline-alert {
    background-color: #c62828;
    color: #ffffff;
}

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

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

.chip__label {
    flex-shrink: 0;
}

.chip__time {
    opacity: 0.9;
}

.chip__separator {
    opacity: 0.6;
}

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

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

/* Text only (no icon) */
.chip--text-only .chip__icon {
    display: none;
}

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

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

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

/* Chip stack for hierarchical display */
.chip-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    align-items: flex-start;
}
/**
 * Nimbus Design System - Card Components
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Card Anatomy:
 * 1. Status chip (header)
 * 2. Information widget (data grid)
 * 3. Information expansion (tags)
 * 4. Actions (buttons)
 * 5. Timeline (status icons)
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Selected card */
.card--selected {
    border-color: var(--border-brand);
    border-width: 2px;
}
/**
 * Nimbus Design System - Form Controls
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Components: Checkbox, Radio, Switch/Toggle
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Large size (default) */
.switch__track {
    width: 2.75rem;
    height: 1.5rem;
}

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

/* Small size */
.switch--sm .switch__track {
    width: 2rem;
    height: 1.125rem;
}

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

/* On state */
.switch__input:checked + .switch__track {
    background-color: #4caf50;
}

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

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

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

/* Disabled state */
.switch__input:disabled + .switch__track {
    opacity: 0.5;
    cursor: not-allowed;
}

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

.switch__label {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-title);
}
/**
 * Nimbus Design System - Text Inputs
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Anatomy: Label, Input Field, Helper Text, Trailing Icon
 * Variants: Default, Search
 */

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

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

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

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

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

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

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

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

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

/* Error state */
.input--error {
    border-color: #c62828;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.select__option--disabled.select__option--active {
    background-color: transparent;
}
/**
 * Nimbus Design System - Content Switcher
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Segmented control with pill highlight
 * Variants: Text labels, Icon labels
 */

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

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

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

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

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

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

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

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

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

/* Icon-only variant */
.switcher__item--icon-only {
    padding: var(--spacing-2);
}

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

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

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

.switcher--lg .switcher__item {
    padding: var(--spacing-2) var(--spacing-5);
    font-size: var(--font-size-m);
}
/**
 * Nimbus Design System - Tabs
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Underline style tabs
 * States: selected (bold + underline), unselected, inactive
 * Can have icon + text labels
 */

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

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

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

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

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

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

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

   Both :focus and :focus-visible are styled deliberately: where :focus-visible is
   unknown the browser drops both rules below, including the one inside :not(), and the
   component would fall back to whatever focus styling the host happens to apply. */
.tab:focus,
.tab:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

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

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

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

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

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

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

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

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

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

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

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

/* Pill tabs (no underline, background highlight) */
.tabs--pill {
    border-bottom: none;
    background-color: var(--bg-surface-secondary);
    padding: var(--spacing-1);
    border-radius: var(--radius-md);
    gap: var(--spacing-1);
}

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

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

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

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

.tab-panel[hidden] {
    display: none;
}
/**
 * Nimbus Design System - Notifications / Toasts
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Anatomy: Icon, Title, Description, Action Button, Close Button
 * Style: Dark background, pill-shaped
 */

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

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

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

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

/* Icon variants */
.notification__icon--error {
    background-color: #c62828;
    color: #ffffff;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Compact - no description */
.notification--compact {
    padding: var(--spacing-2) var(--spacing-3);
}

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

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

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

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

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

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

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

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

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

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

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

/* Position variants */
.notification-container--top-right {
    top: var(--spacing-4);
    right: var(--spacing-4);
}

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

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

.notification-container--bottom-center {
    bottom: var(--spacing-4);
    left: 50%;
    transform: translateX(-50%);
}
/**
 * Nimbus Design System - Inline Messages
 *
 * In-flow feedback attached to a specific piece of UI: a failed save, a validation
 * summary, a retryable load. Unlike a notification it takes up layout space beside
 * whatever it describes and stays until the state that caused it clears.
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

.inline-message__text {
    margin: 0;
}

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

.inline-message__action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-1) var(--spacing-3);
    border: 1px solid var(--inline-message-accent);
    border-radius: var(--radius-full);
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--text-title);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    white-space: nowrap;
}

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

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

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

/* Compact - for dense surfaces such as drawers and modals */
.inline-message--compact {
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
}

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

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

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

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

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

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

/* Each record sits on its own surface, so the rows need to be separated rather than
   ruled. border-spacing only applies to a separated border model. */
.table--rows {
    border-collapse: separate;
    border-spacing: 0 var(--spacing-2);
}

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

/* Radii go on the end cells: a <tr> cannot be rounded in a separated border model. */
.table--rows .table__header-cell:first-child,
.table--rows .table__body .table__row > *:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.table--rows .table__header-cell:last-child,
.table--rows .table__body .table__row > *:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}
/**
 * Nimbus Design System - Info Tags / Badges
 * Based on Figma Style Guide (20 Jan 2026)
 *
 * Small inline status text indicators
 * Variants: Success (green), Error (red), Warning (amber), Neutral
 */

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

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

/* Separator between parts */
.info-tag__separator {
    opacity: 0.6;
}

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

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

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

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

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

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

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

/* Badge variants */
.badge--primary {
    background-color: var(--bg-button-primary);
    color: var(--text-button-primary);
}

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

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

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

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

/* Dot badge (no text, just indicator) */
.badge--dot {
    width: 0.5rem;
    height: 0.5rem;
    min-width: 0.5rem;
    padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.card-repeater__empty-label {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
}
/**
 * Nimbus Design System - Drawer Component
 * A slide-in panel from the right side of the screen
 */

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

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

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

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

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

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

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

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

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

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


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

/* Declared rather than inherited: the buttons beside it set their own line-height, so a
   title taking the page's instead gives the header two differently-measured boxes, and
   centring them looks wrong however faithfully it is done. */
.drawer__title {
    font-family: var(--font-family);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-default);
    color: var(--text-title);
    margin: 0;
    flex: 1;
}

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

.drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-6);
}
/**
 * Nimbus Design System - Modal Component
 */

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

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

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

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

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

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

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

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

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

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

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

.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}
/**
 * Nimbus Design System - Status Pill
 * Based on Figma Style Guide
 *
 * Outlined pill indicator showing a current status or mode.
 * Renders as a <span> by default; use the interactive variant for clickable pills.
 */

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

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

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

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

.status-pill--interactive:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

:root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;

    color: var(--text-paragraph);
    background-color: var(--bg-surface-primary);

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
}

h1 {
    font-size: 3.2em;
    line-height: 1.1;
    color: var(--text-title);
}
/* The organisation form both drawers share — Add organisation and Edit organisation — and
   the admin cards and module list inside it. One block, because they are one form. */

.nimbus-overview-organisation-form__title {
    margin: 0 0 var(--spacing-2);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-title);
}

.nimbus-overview-organisation-form__description {
    margin: 0 0 var(--spacing-6);
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

/* What the form says as a whole — a save refused, what saving will do — between the
   description and the fields. Stacked messages sit as close as the cards in a section do, and
   the group stands off the first field as the fields stand off each other. Nothing to say
   leaves it empty, and then it takes no room at all. */
.nimbus-overview-organisation-form__notices {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
}

.nimbus-overview-organisation-form__notices:empty {
    display: none;
}

/* A fieldset on the Edit drawer, so the whole form can be made read-only at once; it keeps
   none of a fieldset's own frame. */
.nimbus-overview-organisation-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* The grouped parts of the form — admins, logo, modules — each read as a heading, an
   optional line of explanation and one control, rather than as loose fields. */
.nimbus-overview-organisation-form__section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3);
}

.nimbus-overview-organisation-form__section-title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-title);
}

.nimbus-overview-organisation-form__section-description {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-paragraph);
}

/* A section's card spans the drawer; only the buttons keep their own width, which is
   what align-items above would otherwise take away from the cards. The module list is
   named too: its cards sit inside it, so the section's own child is the list. So do the
   warning and the admin picker an emptied primary-admin slot shows. */
.nimbus-overview-organisation-form__section > .card,
.nimbus-overview-organisation-form__section > .inline-message,
.nimbus-overview-organisation-form__section > .input-field,
.nimbus-overview-organisation-form__modules,
.nimbus-overview-organisation-form__admins {
    align-self: stretch;
}

/* A section's actions side by side — invite someone, or choose one of the organisation's users —
   wrapping onto a second line when the drawer is too narrow for both. */
.nimbus-overview-organisation-form__section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.nimbus-overview-organisation-form__admins {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Details on the left; the pending badge, then the buttons, on the right, centred on the
 * card's height.
 *
 * Padded here rather than by Card: Card's own padding lands on Card.Header/Body/Footer,
 * and this row is a plain child of the card, so none of those rules reach it.
 */
.nimbus-overview-organisation-form__admin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
}

/* The buttons keep their width; the details beside them are what give way to a long
   address. */
.nimbus-overview-organisation-form__admin-actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing-2);
}

/* The three lines of an invited person, spaced so the address and job title read as
   details under the name rather than as one run-on block. */
.nimbus-overview-organisation-form__admin-lines {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    /* Long addresses wrap instead of pushing Edit off the card. Growing to fill the row is
       what keeps the badge beside the buttons rather than midway across the card. */
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.nimbus-overview-organisation-form__admin-name {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-title);
}

.nimbus-overview-organisation-form__admin-status {
    flex-shrink: 0;
    white-space: nowrap;
}

.nimbus-overview-organisation-form__admin-detail {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-paragraph);
}

/* One bordered row per module, as the design shows: a slim strip carrying the checkbox
   and its name, not a panel with the control floating inside it. Card supplies the
   surface and border; the padding and the row layout are the parts it leaves open. */
.nimbus-overview-organisation-form__module {
    display: flex;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
}

/* Card's radius is the large one, which reads as a panel at this height. */
.nimbus-overview-organisation-form__modules .card {
    border-radius: var(--radius-md);
}

.nimbus-overview-organisation-form__modules {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

/* Select has no size prop, so its trigger keeps the medium padding while the drawer's
   inputs use the large one — matching them here keeps every control the same height.
   Remove this if a selectSize prop is added to the design system. */
.nimbus-overview-organisation-form .select__trigger,
.nimbus-overview-organisation-form .select:not(.select--listbox) {
    padding: var(--spacing-3) var(--spacing-4);
}

/* Figma's field labels are semibold in the title colour; the design system's default is
   regular in the paragraph colour. Scoped to this drawer rather than changed in the
   package, which would restyle every form in every module. */
.nimbus-overview-organisation-form .input-field__label {
    font-size: 10px;
    line-height: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-title);
}

.nimbus-overview-organisation-form .input__field,
.nimbus-overview-organisation-form .select__trigger,
.nimbus-overview-organisation-form .select__value {
    font-size: 12px;
    line-height: 18px;
    font-weight: var(--font-weight-medium);
}

.nimbus-overview-organisation-form .input__field::placeholder {
    font-size: 12px;
    line-height: 18px;
    font-weight: var(--font-weight-medium);
}
/* The sheet has to sit above the Add organisation drawer it opened from. Both are
   Drawers, so both carry --z-modal, and the one rendered later would already win on
   source order alone — but only by a tie-break, which the next change to either file
   could quietly reverse. Stating it lifts the panel and the backdrop it renders
   alongside, and a calc on the same token keeps it following the theme's scale.
   Applied through the wrapper because Drawer renders its overlay as a sibling with no
   class of its own to reach. */
.nimbus-overview-primary-admin > .drawer,
.nimbus-overview-primary-admin > .drawer-overlay {
    z-index: calc(var(--z-modal) + 1);
}

.nimbus-overview-primary-admin__title {
    margin: 0 0 var(--spacing-2);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-title);
}

.nimbus-overview-primary-admin__description {
    margin: 0 0 var(--spacing-6);
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

.nimbus-overview-primary-admin__fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

/* Figma's field labels are semibold in the title colour; the design system's default is
   regular in the paragraph colour. Scoped to this sheet rather than changed in the
   package, which would restyle every form in every module. */
.nimbus-overview-primary-admin .input-field__label {
    font-size: 10px;
    line-height: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-title);
}

.nimbus-overview-primary-admin .input__field {
    font-size: 12px;
    line-height: 18px;
    font-weight: var(--font-weight-medium);
}
/* The sheet has to sit above the Add organisation drawer it opened from. Both are
   Drawers, so both carry --z-modal, and the one rendered later would already win on
   source order alone — but only by a tie-break, which the next change to either file
   could quietly reverse. Stating it lifts the panel and the backdrop beside it, and a
   calc on the same token keeps it following the theme's scale. */
.nimbus-overview-admins > .drawer,
.nimbus-overview-admins > .drawer-overlay {
    z-index: calc(var(--z-modal) + 1);
}

.nimbus-overview-admins__title {
    margin: 0 0 var(--spacing-2);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-title);
}

.nimbus-overview-admins__description {
    margin: 0 0 var(--spacing-6);
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

/* The admins folded away so far. A list because that is what it is — the cards are rows,
   and a screen reader saying how many there are saves counting them. */
.nimbus-overview-admins__collected {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin: 0 0 var(--spacing-6);
    padding: 0;
    list-style: none;
}

.nimbus-overview-admins__fields {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-5);
}

/* The inputs fill the drawer; only the button below them keeps its own width, which is
   what align-items above would otherwise take away from them. */
.nimbus-overview-admins__fields > .input-field {
    align-self: stretch;
}

/* Figma's field labels are semibold in the title colour; the design system's default is
   regular in the paragraph colour. Scoped to this sheet rather than changed in the
   package, which would restyle every form in every module. */
.nimbus-overview-admins .input-field__label {
    font-size: 10px;
    line-height: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-title);
}

.nimbus-overview-admins .input__field {
    font-size: 12px;
    line-height: 18px;
    font-weight: var(--font-weight-medium);
}
.nimbus-overview-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
}

/* Matches the drawer's field labels: the picker is a field, so it reads as one even
   though it is a button rather than an input. */
.nimbus-overview-logo__label {
    font-family: var(--font-family);
    font-size: 10px;
    line-height: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-title);
}

/* The native control is driven by the Upload image and Replace buttons. */
.nimbus-overview-logo__input {
    display: none;
}

.nimbus-overview-logo__preview {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    width: 100%;
}

.nimbus-overview-logo__preview img {
    /* Contain so a wide or tall logo is shown whole rather than cropped by the frame. */
    width: 100%;
    max-height: 8rem;
    object-fit: contain;
    background-color: var(--bg-cs-bg);
    border: 1px solid var(--border-20);
    border-radius: var(--radius-md);
}

.nimbus-overview-logo__actions {
    display: flex;
    gap: var(--spacing-2);
}
.nimbus-overview-organisations-empty.nimbus-overview-organisations-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-6);
    min-height: 160px;
    padding: var(--spacing-8) var(--spacing-6);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface-secondary);
}

@media (max-width: 640px) {
    .nimbus-overview-organisations-empty.nimbus-overview-organisations-empty {
        padding: var(--spacing-6) var(--spacing-4);
        min-height: 0;
    }
}

.nimbus-overview-organisations-empty__description {
    margin: 0;
    max-width: 32rem;
    text-align: center;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 150%;
    letter-spacing: 0;
    color: var(--icon-disable, #828b99);
}
/* Read out but not shown: the standard visually-hidden pattern, since neither the theme nor
   the components package offers one. Kept in the accessibility tree, unlike display: none. */
.nimbus-overview-type-badge__hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Table supplies the grid, surfaces and cell padding — these are the extras the page
   wraps around it. */

/* The listing's surface, and the box it scrolls in.
 *
 * The surface is here because only Table's "rows" variant paints one: under "default" the
 * grid sits transparent on the shell's grey page and reads as though it were not there.
 *
 * Four columns of real text; below roughly a laptop's content width the table would
 * either overflow the page or crush the email column. Scrolling it inside its own box
 * keeps the page itself from scrolling sideways.
 *
 * overflow-x alone, not the shorthand: `overflow: hidden` would clip the corners but also
 * make the vertical axis scrollable, which turns a long page of rows into a second
 * scrollbar inside the page. The radius is carried by the cells instead.
 */
.nimbus-overview-organisations-table__scroll {
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: var(--radius-md);
    overflow-x: auto;
    transition: opacity var(--transition-fast);
}

/* The last page's rows, kept on screen while the next page loads: faded so they read as on
   their way out, but not emptied, so the table keeps its height and the page list stays put. */
.nimbus-overview-organisations-table__scroll--loading {
    opacity: 0.6;
}

/* The corners the container cannot clip without trapping the scroll — see above. */
.nimbus-overview-organisations-table .table__header-cell:first-child {
    border-top-left-radius: var(--radius-md);
}

.nimbus-overview-organisations-table .table__header-cell:last-child {
    border-top-right-radius: var(--radius-md);
}

.nimbus-overview-organisations-table .table__body .table__row:last-child > *:first-child {
    border-bottom-left-radius: var(--radius-md);
}

.nimbus-overview-organisations-table .table__body .table__row:last-child > *:last-child {
    border-bottom-right-radius: var(--radius-md);
}

/* The ruled grid the design shows. Table's "default" variant draws no rules of its own,
   and adding them in the library would change every listing that uses it, so they are
   scoped here: a divider under each row, and the header set off by its own rule. */
.nimbus-overview-organisations-table .table__header-cell {
    border-bottom: 1px solid var(--border-40);
}

.nimbus-overview-organisations-table .table__body .table__row:not(:last-child) > * {
    border-bottom: 1px solid var(--border-20);
}

/* The whole row opens the organisation, so it has to look like it does. */
.nimbus-overview-organisations-table__row {
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

/* Inset, because an offset ring would sit in the gap between rows. */
.nimbus-overview-organisations-table__row:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: -2px;
}

/* Reaches past the design system's own row background, which its default variant sets
   on three classes; a bare :hover on this one class loses that fight and never paints. */
.nimbus-overview-organisations-table .table__body .nimbus-overview-organisations-table__row:hover {
    background-color: var(--bg-cs-bg);
}

.nimbus-overview-organisations-table__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-top: var(--spacing-5);
}

.nimbus-overview-organisations-table__count {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

.nimbus-overview-organisations-table__pages {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

/* The elided run. Sized to match a page button's text so the row of controls keeps an
   even rhythm rather than collapsing around the gap. */
.nimbus-overview-organisations-table__gap {
    padding: 0 var(--spacing-1);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
    user-select: none;
}

/* The name with its setting-up state beside it, wrapping under it only when the column is
   too narrow for both. */
.nimbus-overview-organisations-table__name {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
}

.nimbus-overview-organisations-table__state {
    white-space: nowrap;
}
.nimbus-overview-organisations-toolbar {
    display: flex;
    align-items: center;
    /* Wraps rather than squeezing the search field to nothing on a narrow window. */
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}

/* The search and the type filter are a pair: one width, and the height of the button
   beside them. The library sizes each by its content (the search by its 16px icon, the
   filter by its smaller text), so left alone they differ from each other and both fall
   short of the button's 36px. */
.nimbus-overview-organisations-toolbar__search,
.nimbus-overview-organisations-toolbar__filter {
    box-sizing: border-box;
    width: 16rem;
    min-height: 36px;
}

/* The trigger is the filter's hit area, so it fills the taller box rather than
   centring inside it. */
.nimbus-overview-organisations-toolbar__filter .select__trigger {
    align-self: stretch;
}

/* Pushes the primary action to the far end of the toolbar, as in the design. */
.nimbus-overview-organisations-toolbar > *:last-child {
    margin-left: auto;
}

@media (max-width: 640px) {
    /* Share the row, or take it whole once wrapped. */
    .nimbus-overview-organisations-toolbar__search,
    .nimbus-overview-organisations-toolbar__filter {
        flex: 1 1 12rem;
        width: auto;
    }

    /* Full width once wrapped, so the action is not stranded mid-row. */
    .nimbus-overview-organisations-toolbar > *:last-child {
        margin-left: 0;
    }
}
.nimbus-overview {
    padding: 2rem;
}

.nimbus-overview__title {
    color: var(--text-title);
    margin: 0 0 var(--spacing-2);
}

.nimbus-overview__subtitle {
    margin: 0 0 var(--spacing-6);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

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

@media (max-width: 640px) {
    .nimbus-overview {
        padding: var(--spacing-5) var(--spacing-4);
    }
}
/* The sheet has to sit above the Edit organisation drawer it opened from, as the invite sheets
   do: stated rather than left to source order, on the panel and the backdrop beside it. */
.nimbus-overview-choose-user > .drawer,
.nimbus-overview-choose-user > .drawer-overlay {
    z-index: calc(var(--z-modal) + 1);
}

.nimbus-overview-choose-user__title {
    margin: 0 0 var(--spacing-2);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-title);
}

.nimbus-overview-choose-user__description {
    margin: 0 0 var(--spacing-6);
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

/* Across the sheet, as the invite sheets' fields are. */
.nimbus-overview-choose-user__search {
    box-sizing: border-box;
    width: 100%;
}

/* The list, or what is said in its place, under the search; "Show more" keeps its own width. */
.nimbus-overview-choose-user__results {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3);
    margin-top: var(--spacing-5);
    transition: opacity var(--transition-fast);
}

/* What the last search found, while the next one loads: still there, but plainly not the answer. */
.nimbus-overview-choose-user__results--refreshing {
    opacity: 0.6;
}

.nimbus-overview-choose-user__results > .inline-message {
    align-self: stretch;
}

.nimbus-overview-choose-user__status {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

.nimbus-overview-choose-user__list {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--spacing-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Opened over the Edit organisation drawer, which carries --z-modal as the modal does. The
   modal is portalled to the end of the body, so it would win on source order alone — but
   only by a tie-break, as the admin sheets' stylesheets explain. Stated here instead. The
   backdrop is what carries the stacking, and the dialog is the only part with our class. */
.modal-backdrop:has(> .nimbus-overview-remove-primary-admin) {
    z-index: calc(var(--z-modal) + 1);
}

.nimbus-overview-remove-primary-admin__note {
    margin: var(--spacing-4) 0 0;
    font-size: var(--font-size-xs);
    color: var(--text-paragraph);
}
.nimbus-overview-history {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.nimbus-overview-history__title {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--text-title);
}

.nimbus-overview-history__status {
    margin: 0;
    color: var(--text-paragraph);
}

/* Entries are a list, newest first — a screen reader saying how many saves there have
   been is part of the answer. */
.nimbus-overview-history__entries {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nimbus-overview-history__entry {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    padding: var(--spacing-3) var(--spacing-4);
}

.nimbus-overview-history__meta {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-paragraph);
}

.nimbus-overview-history__changes {
    margin: 0;
    padding-left: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--text-title);
    overflow-wrap: anywhere;
}
/* Matches the details page's own status line (Groups, loading), so every tab's empty and
   loading text reads the same. */
.nimbus-overview-tab__status {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

/* Wide tables scroll inside themselves rather than widening the page. */
.nimbus-overview-tab__table {
    overflow-x: auto;
}

/* On one line: a narrow column would otherwise wrap "Invitation pending" out of its outline. */
.nimbus-overview-tab__status-badge {
    white-space: nowrap;
}

/* The Users tab's two lists, invitations and members, one above the other. */
.nimbus-overview-tab__sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

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

/* A step below the card's own title, which already says "Users". */
.nimbus-overview-tab__section-title {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-paragraph);
}

/* The count and "Show more" under the members, apart at either end as under the overview's
   table; wrapped onto two lines on a narrow window. */
.nimbus-overview-tab__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-top: var(--spacing-2);
}
/* One centred column, as the design lays it out: the header sits on the card's left edge
   rather than the page's.
 *
 * The account bar is fixed over the top right of the view and this column reaches under
 * it, so the header starts below it. The bar publishes its own height; the fallback keeps
 * the clearance if it ever stops doing so. */
.nimbus-overview-organisation {
    max-width: 45rem;
    margin: 0 auto;
    padding: calc(var(--spacing-5) + var(--pill-bar-height, 44px) + var(--spacing-4)) 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.nimbus-overview-organisation__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    min-width: 0;
}

.nimbus-overview-organisation__back {
    display: inline-flex;
    align-items: center;
    color: var(--text-title);
    border-radius: var(--radius-sm);
}

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

.nimbus-overview-organisation__title {
    margin: 0;
    color: var(--text-title);
    overflow-wrap: anywhere;
}

/* Pushed to the far end of the header, across from the name it edits. */
.nimbus-overview-organisation__edit {
    margin-left: auto;
    flex-shrink: 0;
}

/* Only there to disable the failed message's action while a try is in flight (see the page),
   so it keeps none of a fieldset's own frame. */
.nimbus-overview-organisation__retry {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* The action has no disabled look of its own: dimmed, and no longer inviting a press. */
.nimbus-overview-organisation__retry:disabled .inline-message__action {
    cursor: default;
    opacity: 0.6;
}

.nimbus-overview-organisation__retry:disabled .inline-message__action:hover {
    background-color: transparent;
}

.nimbus-overview-organisation__status {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-paragraph);
}

/* A card body trims its padding top and bottom to sit tight under a header. This card is
   all body, so it is evened out all round. */
.nimbus-overview-organisation .card__body {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
}

/* Logo and type side by side, the same height whatever the logo's proportions. */
.nimbus-overview-organisation__tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
}

/* Label at the top, value at the bottom, so the two values share a line even though
   one is an image and the other text. */
.nimbus-overview-organisation__tile {
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    min-width: 0;
}

/* Held to a wordmark's height; a tall or square logo shrinks to fit rather than
   stretching the tile. */
.nimbus-overview-organisation__logo {
    display: block;
    max-width: 100%;
    max-height: 2rem;
    object-fit: contain;
    object-position: left center;
}

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

.nimbus-overview-organisation__section-title {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-title);
}

/* Card's radius is the large one, which reads as a panel at these heights. */
.nimbus-overview-organisation__section .card {
    border-radius: var(--radius-md);
}

/* Name and address on the left, the pending badge on the right, centred on the card. */
.nimbus-overview-organisation__person {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
}

.nimbus-overview-organisation__person-lines {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    /* Fills the row, so the badge sits at the far side; a long address wraps under it. */
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.nimbus-overview-organisation__person-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-title);
}

.nimbus-overview-organisation__person-detail {
    font-size: var(--font-size-xs);
    color: var(--text-paragraph);
}

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

.nimbus-overview-organisation__module {
    display: flex;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
}

/* The box is disabled because this reports the entitlement rather than offering to change
   it, but a disabled label is greyed almost out of sight and the name is the part that
   has to be read. It keeps the colour a live label would have. */
.nimbus-overview-organisation__module .checkbox,
.nimbus-overview-organisation__module .checkbox__input:disabled + .checkbox__box {
    cursor: default;
}

.nimbus-overview-organisation__module .checkbox__input:disabled ~ .checkbox__label {
    color: var(--text-title);
    cursor: default;
}

/* A disabled box is greyed even when checked, leaving a white tick on near-white. Checked
   keeps the filled background it has when live, so paid and unpaid are told apart by the
   fill rather than a faint mark. */
.nimbus-overview-organisation__module .checkbox__input:checked:disabled + .checkbox__box {
    background-color: var(--bg-button-primary);
    border-color: var(--bg-button-primary);
}

@media (max-width: 40rem) {
    .nimbus-overview-organisation {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    .nimbus-overview-organisation__tiles {
        grid-template-columns: 1fr;
    }
}

.nimbus-overview-organisation__person-status {
    flex-shrink: 0;
    white-space: nowrap;
}