/* ========================================================================
   Lumisens Design System — component library styles (Lum*)
   Shipped as a static web asset of Lmp.Web3.Components:
   <link rel="stylesheet" href="_content/Lmp.Web3.Components/css/lum.css" />
   Load BEFORE the host app.css so page-level overrides keep winning.
   ======================================================================== */

/* Component-family sheets (same directory). @import must precede all rules. */
@import url('lum-forms.css');
@import url('lum-display.css');
@import url('lum-overlays.css');
@import url('lum-advanced-filter.css');
@import url('lum-a11y.css');

:root {
    /* Glassmorphism - Dark base with luminous accents (Brutal default) */
    --background: 225 25% 8%;
    --foreground: 0 0% 98%;

    --card: 225 20% 14%;
    --card-foreground: 0 0% 98%;

    --popover: 225 25% 10%;
    --popover-foreground: 0 0% 98%;

    /* Primary: Lumisens Orange — matches #f3a529 logo arc */
    --primary: 37 89% 56%;
    --primary-foreground: 0 0% 0%;

    /* Secondary: Cool slate */
    --secondary: 220 15% 20%;
    --secondary-foreground: 0 0% 90%;

    --muted: 220 15% 18%;
    --muted-foreground: 220 10% 65%;

    --accent: 37 85% 20%;
    --accent-foreground: 37 100% 70%;

    --destructive: 0 80% 55%;
    --destructive-foreground: 0 0% 100%;

    /* Status colors */
    --success: 152 75% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 42 95% 55%;
    --warning-foreground: 0 0% 0%;

    /* Admin actions: warm orange, distinct from primary amber */
    --admin: 8 70% 45%;
    --admin-foreground: 0 0% 100%;

    --border: 220 15% 25%;
    --input: 220 15% 18%;
    --ring: 37 89% 56%;

    --radius: 1rem;

    /* Glass effect variables */
    --glass-bg: 220 20% 15% / 0.6;
    --glass-border: 0 0% 100% / 0.1;
    --glass-blur: 20px;

    /* Mesh accents (decorative) */
    --mesh-cool: 200 80% 50%;
    --mesh-violet: 280 60% 50%;

    /* Sidebar */
    --sidebar-background: 225 25% 6%;
    --sidebar-foreground: 0 0% 85%;
    --sidebar-primary: 37 89% 56%;
    --sidebar-primary-foreground: 0 0% 0%;
    --sidebar-accent: 220 20% 15%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 220 15% 18%;
    --sidebar-ring: 37 89% 56%;
    --sidebar-muted: 220 10% 50%;

    /* Sidebar width */
    --sidebar-width: 16rem;
    --sidebar-width-collapsed: 3rem;

    /* Scrollbar */
    --scrollbar-thumb: 220 15% 30%;
    --scrollbar-thumb-hover: 220 15% 40%;
    --scrollbar-track: transparent;
    --scrollbar-size: 8px;
}

/* Theme: Brutal (dark) — default, same as :root */
html[data-theme-style="brutal"] {
    --sidebar-background: 225 25% 6%;
    --sidebar-foreground: 0 0% 85%;
    --sidebar-accent: 220 20% 15%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 220 15% 18%;
    --sidebar-muted: 220 10% 50%;
    --scrollbar-thumb: 220 15% 30%;
    --scrollbar-thumb-hover: 220 15% 40%;
}

/* Theme: Frost (light) */
html[data-theme-style="frost"] {
    --background: 210 40% 96%;
    --foreground: 222 47% 11%;

    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;

    --primary: 37 89% 50%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 93%;
    --secondary-foreground: 222 47% 15%;

    --muted: 210 30% 92%;
    --muted-foreground: 215 20% 36%;

    --accent: 37 60% 92%;
    --accent-foreground: 37 80% 35%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;

    --success: 152 65% 38%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 0%;

    --admin: 8 65% 42%;
    --admin-foreground: 0 0% 100%;

    --border: 214 32% 86%;
    --input: 214 32% 91%;
    --ring: 37 89% 50%;

    --glass-bg: 0 0% 100% / 0.45;
    --glass-border: 214 32% 80% / 0.5;

    --sidebar-background: 215 30% 16%;
    --sidebar-foreground: 210 20% 90%;
    --sidebar-primary: 37 89% 56%;
    --sidebar-primary-foreground: 0 0% 0%;
    --sidebar-accent: 215 25% 22%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 215 20% 24%;
    --sidebar-ring: 37 89% 56%;
    --sidebar-muted: 215 15% 55%;
    --scrollbar-thumb: 214 20% 78%;
    --scrollbar-thumb-hover: 214 20% 68%;
}

/* Theme: Aurora (purple/glass) */
html[data-theme-style="aurora"] {
    --background: 270 50% 12%;
    --foreground: 0 0% 98%;
    --card: 0 0% 100% / 0.10;
    --card-foreground: 0 0% 98%;
    --popover: 270 40% 14%;
    --popover-foreground: 0 0% 98%;
    --border: 0 0% 100% / 0.12;
    --input: 0 0% 100% / 0.08;
    --muted: 0 0% 100% / 0.06;
    --muted-foreground: 0 0% 100% / 0.65;
    --secondary: 0 0% 100% / 0.08;
    --secondary-foreground: 0 0% 98%;
    --glass-bg: 0 0% 100% / 0.08;
    --glass-border: 0 0% 100% / 0.12;
    --sidebar-background: 270 45% 12%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-accent: 270 40% 22%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 270 30% 30%;
    --sidebar-muted: 260 20% 65%;
    --admin: 8 68% 46%;
    --admin-foreground: 0 0% 100%;

    --scrollbar-thumb: 0 0% 100% / 0.15;
    --scrollbar-thumb-hover: 0 0% 100% / 0.25;
}

*, *::before, *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: hsl(var(--border));
}

/* LumSeriesChart: horizontally scrollable strip (MinPointWidth) */
.lum-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    overscroll-behavior-x: contain;
}

.lum-chart-scroll .lum-chart-track {
    width: 100%;
}

/* Pinned Y axis while scrolled: a sticky zero-size anchor at the visible left edge hosts a
   clone of the axis on a fade plate, so bars scrolling underneath never collide with the
   labels (lumChart._syncAxisPin builds and positions the clone). */
.lum-chart-axis-pin {
    position: sticky;
    left: 0;
    width: 0;
    height: 0;
    z-index: 2;
    pointer-events: none;
}

.lum-chart-axis-pin-inner {
    position: absolute;
    background: linear-gradient(to right, hsl(var(--card) / 0.94) calc(100% - 32px), hsl(var(--card) / 0));
}

/* Global scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--scrollbar-thumb)) var(--scrollbar-track);
}

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

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
    background-color: hsl(var(--scrollbar-thumb));
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

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

::-webkit-scrollbar-corner {
    background: transparent;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-feature-settings: "cv11", "ss01", "cv01";
}

html {
    overflow-x: hidden;
}

h1:focus {
    outline: none;
}

.invalid {
    outline: 1px solid #e50000;
}

.glass {
    background: hsl(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid hsl(var(--glass-border));
}

.glass-divider {
    border-color: hsl(var(--glass-border));
}

.glass-card {
    position: relative;
    background: linear-gradient(135deg, hsl(var(--card) / 0.32), hsl(var(--card) / 0.16));
    backdrop-filter: blur(34px) saturate(1.35);
    -webkit-backdrop-filter: blur(34px) saturate(1.35);
    border: 1px solid hsl(var(--glass-border));
    box-shadow: 0 10px 50px hsl(0 0% 0% / 0.35), inset 0 1px 0 hsl(0 0% 100% / 0.06);
}

html[data-theme-style="aurora"] .glass-card {
    background: linear-gradient(135deg, hsl(0 0% 100% / 0.03), hsl(0 0% 100% / 0.015));
}

.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 20% 10%, hsl(var(--primary) / 0.14), transparent 45%),
        radial-gradient(circle at 85% 0%, hsl(var(--mesh-cool) / 0.10), transparent 45%),
        linear-gradient(180deg, hsl(0 0% 100% / 0.06), transparent 40%);
}

.glass-card > * {
    position: relative;
    z-index: 1;
}

.glass-strong {
    background: linear-gradient(135deg, hsl(var(--background) / 0.78), hsl(var(--background) / 0.62));
    backdrop-filter: blur(32px) saturate(1.15);
    -webkit-backdrop-filter: blur(32px) saturate(1.15);
    border: 1px solid hsl(var(--glass-border));
}

@keyframes pulse-success {
    0%, 100% { box-shadow: 0 0 0 0 hsl(152 75% 45% / 0.4); }
    50% { box-shadow: 0 0 0 8px hsl(152 75% 45% / 0); }
}

.lum-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    outline: none;
    border: none;
    cursor: pointer;
}

.lum-btn:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.lum-btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.lum-btn svg {
    pointer-events: none;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Button sizes */
.lum-btn-default { height: 2.5rem; padding: 0.5rem 1rem; }

.lum-btn-sm { height: 2.25rem; padding: 0.25rem 0.75rem; border-radius: calc(var(--radius) - 2px); }

.lum-btn-lg { height: 2.75rem; padding: 0.5rem 2rem; border-radius: calc(var(--radius) - 2px); }

.lum-btn-icon { height: 2.5rem; width: 2.5rem; padding: 0; }

/* Button variants */
.lum-btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.lum-btn-primary:hover { opacity: 0.9; }

.lum-btn-destructive {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
}

.lum-btn-destructive:hover { opacity: 0.9; }

.lum-btn-admin {
    background-color: hsl(var(--admin));
    color: hsl(var(--admin-foreground));
}

.lum-btn-admin:hover { opacity: 0.9; }

.lum-btn-admin-outline {
    background-color: transparent;
    color: hsl(var(--admin));
    border: 1px solid hsl(var(--admin) / 0.45);
}

.lum-btn-admin-outline:hover {
    background-color: hsl(var(--admin) / 0.12);
    border-color: hsl(var(--admin) / 0.7);
}

.lum-btn-outline {
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

.lum-btn-outline:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.lum-btn-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.lum-btn-secondary:hover { opacity: 0.8; }

.lum-btn-ghost {
    background: transparent;
    color: hsl(var(--foreground));
}

.lum-btn-ghost:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.lum-btn-link {
    background: transparent;
    color: hsl(var(--primary));
    text-underline-offset: 4px;
}

.lum-btn-link:hover { text-decoration: underline; }

.lum-input {
    display: flex;
    height: 2.5rem;
    width: 100%;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.lum-input::placeholder {
    color: hsl(var(--muted-foreground));
}

.lum-input:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

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

.lum-input.lum-input-error,
.lum-input-error {
    border-color: hsl(var(--destructive));
}

.lum-input.lum-input-error:focus,
.lum-input-error:focus {
    border-color: hsl(var(--destructive));
    box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.2);
}

.lum-input[type="file"] {
    border: none;
    padding: 0;
    font-size: 0.875rem;
}

.lum-select-trigger {
    display: flex;
    height: 2.5rem;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.lum-select-trigger:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.lum-select-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.lum-select-content {
    position: relative;
    z-index: 50;
    max-height: 24rem;
    min-width: 8rem;
    overflow: auto;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    padding: 0.25rem;
}

.lum-select-item {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    border-radius: calc(var(--radius) - 4px);
    padding: 0.375rem 0.5rem 0.375rem 2rem;
    font-size: 0.875rem;
    outline: none;
    transition: background-color 0.1s;
    position: relative;
}

.lum-select-item:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

/* Per-item disabled state (capability gating): visible but not selectable, with a
   title/tooltip carrying the reason. Kept hoverable so the title shows. */
.lum-select-item-disabled,
.lum-select-item-disabled:hover {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: transparent;
    color: inherit;
}

/* Group header row inside a dropdown (e.g. options grouped by gateway). */
.lum-select-group-label {
    padding: 0.375rem 0.5rem 0.125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}

.lum-select-item-indicator {
    position: absolute;
    left: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Multi-select checkbox indicator */
.lum-multiselect-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.2rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    transition: background-color 0.15s, border-color 0.15s;
}

.lum-multiselect-check.checked {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* Dropdown panel positioned below trigger */
.lum-select-dropdown {
    position: absolute;
    z-index: 9999;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 4px;
}

/* Allow select dropdown, popover, and tooltip to escape modal overflow on desktop */
@media (min-width: 769px) {
.lum-modal-content:has(.lum-select-dropdown),
    .lum-modal-content:has(.lum-popover),
    .lum-modal-content:has(.lum-tooltip),
    .lum-modal-content:has(.lum-utc-dropdown) {
        overflow: visible;
    }

.lum-modal-body:has(.lum-select-dropdown),
    .lum-modal-body:has(.lum-popover),
    .lum-modal-body:has(.lum-tooltip),
    .lum-modal-body:has(.lum-utc-dropdown) {
        overflow-y: visible;
        z-index: 1;
    }
}

/* Select mobile overrides – bottom panel (like LumSortDropdown) */
@media (max-width: 768px) {
.lum-select-dropdown {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: auto;
        margin-top: 0;
        z-index: 9999;
    }

.lum-select-dropdown .lum-select-content {
        max-height: 50dvh;
        border-radius: 1rem 1rem 0 0;
        border-bottom: none;
        /* Keep the last option above the home-indicator / gesture area. */
        padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px));
        animation: lum-slide-up 0.2s ease-out;
    }

.lum-select-item {
        min-height: 44px;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}

.lum-utc-picker {
    position: relative;
    display: inline-block;
    width: 100%;
}

.lum-utc-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lum-utc-trigger-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.lum-utc-trigger-offset {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.lum-utc-trigger-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.lum-utc-flag {
    font-size: 1.125rem;
    line-height: 1;
    flex-shrink: 0;
}

.lum-utc-dropdown {
    position: absolute;
    z-index: 9999;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 18rem;
    outline: none;
}

.lum-utc-panel {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15), 0 4px 10px -2px rgb(0 0 0 / 0.1);
    overflow: hidden;
}

.lum-utc-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid hsl(var(--border));
    background-color: hsl(var(--popover));
}

.lum-utc-search {
    flex: 1;
}

.lum-utc-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.25rem;
}

.lum-utc-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.lum-utc-group-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    background-color: hsl(var(--popover));
    border-bottom: 1px solid hsl(var(--border) / 0.5);
    z-index: 1;
}

.lum-utc-group-offset {
    font-variant-numeric: tabular-nums;
    color: hsl(var(--foreground));
}

.lum-utc-group-count {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.lum-utc-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "flag name offset" "flag region offset";
    column-gap: 0.625rem;
    row-gap: 0.125rem;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-radius: calc(var(--radius) - 4px);
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    transition: background-color 0.1s;
}

.lum-utc-row .lum-utc-flag { grid-area: flag; }

.lum-utc-row-name {
    grid-area: name;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lum-utc-row-region {
    grid-area: region;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lum-utc-row:not(:has(.lum-utc-row-region)) {
    grid-template-areas: "flag name offset";
    grid-template-rows: auto;
}

.lum-utc-row-offset {
    grid-area: offset;
    font-variant-numeric: tabular-nums;
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
}

.lum-utc-row:hover,
.lum-utc-row.highlighted {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

/* Mobile: bottom sheet */
@media (max-width: 768px) {
.lum-utc-dropdown {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: auto;
        margin-top: 0;
        z-index: 9999;
    }

.lum-utc-panel {
        max-height: 75vh;
        border-radius: 1rem 1rem 0 0;
        border-bottom: none;
        animation: lum-slide-up 0.2s ease-out;
    }

.lum-utc-row {
        min-height: 48px;
        padding: 0.625rem 0.75rem;
        font-size: 1rem;
    }

.lum-utc-flag {
        font-size: 1.25rem;
    }

.lum-utc-group-header {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
}

.lum-checkbox {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    border-radius: calc(var(--radius) - 8px);
    border: 1px solid hsl(var(--primary));
    accent-color: hsl(var(--primary));
    cursor: pointer;
    transition: background-color 0.15s;
}

.lum-checkbox:checked {
    background-color: hsl(var(--primary));
}

.lum-checkbox:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

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

.lum-switch {
    position: relative;
    display: inline-flex;
    height: 1.5rem;
    width: 2.75rem;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    border-radius: 9999px;
    border: 2px solid transparent;
    background-color: hsl(var(--input));
    transition: background-color 0.2s;
}

.lum-switch[data-checked="true"] {
    background-color: hsl(var(--primary));
}

.lum-switch:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

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

.lum-switch-thumb {
    pointer-events: none;
    display: block;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 9999px;
    background-color: hsl(var(--background));
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    transition: transform 0.2s;
    transform: translateX(0);
}

.lum-switch[data-checked="true"] .lum-switch-thumb {
    transform: translateX(1.25rem);
}

.lum-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    transition: color 0.15s, background-color 0.15s;
}

.lum-badge-default {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: 1px solid transparent;
}

.lum-badge-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border: 1px solid transparent;
}

.lum-badge-destructive {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    border: 1px solid transparent;
}

.lum-badge-outline {
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    background: transparent;
}

.lum-badge-success {
    background-color: hsl(var(--success));
    color: hsl(var(--success-foreground));
    border: 1px solid transparent;
}

.lum-badge-warning {
    background-color: hsl(var(--warning));
    color: hsl(var(--warning-foreground));
    border: 1px solid transparent;
}

.lum-card {
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* Frost: frosted white glass
   backdrop-filter moved to ::before so it doesn't create a containing block
   that traps position:fixed children (e.g. ApexCharts tooltips). */
html[data-theme-style="frost"] .lum-card {
    position: relative;
    isolation: isolate;
    background-color: transparent;
    border-color: hsl(214 32% 86% / 0.60);
    box-shadow: 0 4px 24px hsl(215 25% 50% / 0.10);
}

html[data-theme-style="frost"] .lum-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: hsl(0 0% 100% / 0.70);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1;
    pointer-events: none;
    transition: background-color 0.2s;
}

html[data-theme-style="frost"] .lum-card:hover {
    box-shadow: 0 8px 32px hsl(215 25% 50% / 0.15);
}

html[data-theme-style="frost"] .lum-card:hover::before {
    background-color: hsl(0 0% 100% / 0.80);
}

/* Aurora: thin glass (same ::before pattern) */
html[data-theme-style="aurora"] .lum-card {
    position: relative;
    isolation: isolate;
    background: transparent;
    border-color: hsl(0 0% 100% / 0.12);
    box-shadow: none;
}

html[data-theme-style="aurora"] .lum-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: hsl(0 0% 100% / 0.04);
    z-index: -1;
    pointer-events: none;
}

html[data-theme-style="aurora"] .lum-card:hover {
    border-color: hsl(0 0% 100% / 0.18);
}

.lum-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.5rem;
}

.lum-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.015em;
}

.lum-card-description {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.lum-card-content {
    padding: 0 1.5rem 1.5rem;
}

.lum-card-footer {
    display: flex;
    align-items: center;
    padding: 0 1.5rem 1.5rem;
}

.lum-alert {
    position: relative;
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    padding: 1rem;
    font-size: 0.875rem;
}

.lum-alert-default {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

.lum-alert-destructive {
    border-color: hsl(var(--destructive));
    color: hsl(var(--destructive));
}

.lum-alert-title {
    margin-bottom: 0.25rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.015em;
}

.lum-alert-description {
    font-size: 0.875rem;
    line-height: 1.625;
}

/* Sheet overlay (backdrop) */
.lum-overlay {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Sheet (side drawer) */
/* z-index must sit above the map page's stacked controls:
   .map-right-controls = 800, .map-fixtures-drawer = 900.
   1100 keeps the sheet below the 9999-level modal dialogs. */
.lum-sheet {
    position: fixed;
    z-index: 1100;
    background-color: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    /* env() is 0 on desktop; on notched phones the full-height side sheet
       keeps its content clear of the status bar and home indicator. */
    padding: calc(1.5rem + env(safe-area-inset-top, 0px)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

/* Sheet animation keyframes */
@keyframes lum-sheet-fade-in { from { opacity: 0 } to { opacity: 1 } }

@keyframes lum-sheet-fade-out { from { opacity: 1 } to { opacity: 0 } }

@keyframes lum-sheet-slide-in-right { from { transform: translateX(100%) } to { transform: translateX(0) } }

@keyframes lum-sheet-slide-out-right { from { transform: translateX(0) } to { transform: translateX(100%) } }

/* Sheet animation state classes – overlay */
.lum-overlay-hidden { display: none; }

.lum-overlay-open { animation: lum-sheet-fade-in 0.3s ease forwards; }

.lum-overlay-closing { animation: lum-sheet-fade-out 0.3s ease forwards; pointer-events: none; }

/* Sheet animation state classes – panel */
.lum-sheet-hidden { display: none; }

.lum-sheet-open { animation: lum-sheet-slide-in-right 0.4s ease forwards; }

.lum-sheet-closing { animation: lum-sheet-slide-out-right 0.3s ease forwards; pointer-events: none; }

.lum-sheet-right {
    inset: 0 0 0 auto;
    width: 75%;
    max-width: 24rem;
}

.lum-sheet-left {
    inset: 0 auto 0 0;
    width: 75%;
    max-width: 24rem;
}

.lum-sheet-top {
    inset: 0 0 auto 0;
}

.lum-sheet-bottom {
    inset: auto 0 0 0;
}

.lum-tabs-list {
    display: flex;
    width: 100%;
    height: 2.5rem;
    align-items: stretch;
    border-radius: var(--radius);
    /* The pill background lives on .lum-tabs-shell so the chevrons sit INSIDE the same
       bar as the tabs (one continuous pill, not separate buttons beside it). */
    background-color: transparent;
    color: hsl(var(--muted-foreground));
    padding: 0.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    /* Snap points respect the inner padding — without this the strip settles at
       scrollLeft = padding, clipping the first tab by 4px and leaving the left chevron lit. */
    scroll-padding-inline: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.lum-tabs-list::-webkit-scrollbar {
    display: none;
}

.lum-tabs-trigger {
    display: inline-flex;
    flex: 1 1 auto;
    min-width: max-content;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    scroll-snap-align: start;
    border-radius: calc(var(--radius) - 4px);
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.15s;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
}

.lum-tabs-trigger:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.lum-tabs-trigger.active {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.lum-tabs-content {
    margin-top: 0.5rem;
}

/* Empty content (switch used standalone in a toolbar row) adds no gap. */
.lum-tabs-content:empty {
    margin-top: 0;
}

/* Inline variant: switch sizes to its content instead of stretching full width,
   so it can sit beside action buttons in a toolbar row. */
.lum-tabs-inline.lum-tabs-list {
    width: auto;
}

/* Shell around the (hidden-scrollbar) strip: [chevron] [strip] [chevron]. The chevrons are
   flex siblings of the strip — never overlaid on it, so no tab is ever hidden under a glyph.
   data-overflow / data-overflow-left / data-overflow-right are maintained by lum-tabs.js. */
.lum-tabs-shell {
    display: flex;
    align-items: stretch;
    min-width: 0;
    border-radius: var(--radius);
    background-color: hsl(var(--muted));
}

.lum-tabs-viewport {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Edge fades — passive "there is more" signal over the clipped edge of the strip.
   Narrow, so the outermost visible tab stays readable. */
.lum-tabs-viewport::before,
.lum-tabs-viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.5rem;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    z-index: 1;
}

.lum-tabs-viewport::before {
    left: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    background: linear-gradient(to right, hsl(var(--muted)), transparent);
}

.lum-tabs-viewport::after {
    right: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(to left, hsl(var(--muted)), transparent);
}

.lum-tabs-shell[data-overflow-left] .lum-tabs-viewport::before { opacity: 1; }
.lum-tabs-shell[data-overflow-right] .lum-tabs-viewport::after { opacity: 1; }

/* Chevrons — present (both, space reserved) only while the strip overflows; the side with
   nothing left to reveal is dimmed rather than removed so the strip never changes width.
   Outside the tab order (keyboard users have Arrow/Home/End navigation on the tabs). */
.lum-tabs-nav {
    flex: 0 0 auto;
    display: none;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background-color: transparent;
    cursor: pointer;
    color: hsl(var(--muted-foreground));
    transition: color 0.15s, opacity 0.15s;
}

.lum-tabs-nav:hover {
    color: hsl(var(--foreground));
}

.lum-tabs-shell[data-overflow] .lum-tabs-nav { display: flex; }

.lum-tabs-shell[data-overflow]:not([data-overflow-left]) .lum-tabs-nav-left,
.lum-tabs-shell[data-overflow]:not([data-overflow-right]) .lum-tabs-nav-right {
    opacity: 0.35;
    pointer-events: none;
}

/* Chevrons visible → the strip keeps only its vertical padding; the horizontal breathing
   room comes from the chevron columns themselves. */
.lum-tabs-shell[data-overflow] .lum-tabs-list {
    padding-inline: 0;
    scroll-padding-inline: 0;
}

.lum-tabs-content:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.lum-accent-tabs-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.lum-accent-tabs-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid transparent;
    background: transparent;
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

.lum-accent-tabs-trigger:hover {
    background: hsl(var(--muted) / 0.55);
    color: hsl(var(--foreground));
}

.lum-accent-tabs-trigger:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.lum-accent-tabs-trigger.active {
    background: hsl(var(--primary) / 0.14);
    border-color: hsl(var(--primary) / 0.18);
    color: hsl(var(--primary));
    box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.08);
}

.lum-accent-tabs-trigger-icon {
    display: inline-flex;
    width: 0.875rem;
    height: 0.875rem;
    align-items: center;
    justify-content: center;
}

.lum-accent-tabs-trigger-icon svg {
    width: 0.875rem;
    height: 0.875rem;
}

.lum-accent-tabs-content {
    margin-top: 1rem;
}

.lum-tooltip {
    position: fixed;
    z-index: 9999;
    white-space: normal;
    width: max-content;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* lumTooltip.show promotes the portal to a manual popover so it reaches the top
   layer and can paint above a modal <dialog>. Undo the UA popover defaults that
   fight our own layout: `inset: 0` + `margin: auto` over-constrain the inline
   top/left we set, and `overflow: auto` would scroll rich content. */
.lum-tooltip[popover] {
    inset: auto;
    margin: 0;
    overflow: visible;
}

/* Rich tooltip content */
.lum-tooltip-rich {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Rich info tooltip (for help/explanation popovers) */
.lum-tooltip-info {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: normal;
}

.lum-tooltip-info-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 0.25rem;
}

.lum-tooltip-info-desc {
    color: hsl(var(--foreground) / 0.8);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.lum-tooltip-info-steps {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.6;
    background-color: hsl(var(--muted) / 0.6);
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 2px);
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.5rem;
}

.lum-tooltip-info-footer {
    font-size: 0.6875rem;
    font-style: italic;
    color: hsl(var(--muted-foreground));
}

.lum-skeleton {
    border-radius: calc(var(--radius) - 2px);
    background-color: hsl(var(--muted));
    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.lum-progress {
    position: relative;
    height: 1rem;
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    background-color: hsl(var(--secondary));
}

.lum-progress-bar {
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background-color: hsl(var(--primary));
    transition: transform 0.3s;
}

.lum-separator {
    flex-shrink: 0;
    background-color: hsl(var(--border));
}

.lum-separator-horizontal {
    height: 1px;
    width: 100%;
}

.lum-separator-vertical {
    height: 100%;
    width: 1px;
}

/* Outside-click dismissal layer. Sits above .map-toolbar / .map-bulk-actions
   (z-index: 1000) so a click on those bars closes the popover instead of being
   captured by the underlying button. The popover content above stays clickable. */
.lum-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: transparent;
}

.lum-popover {
    z-index: 1501;
    min-width: 18rem;
    width: max-content;
    max-width: min(24rem, calc(100vw - 2rem));
    /* Tall content (calendars, pickers) scrolls inside instead of running off
       a short viewport; pairs with the vertical clamp in lum-popover.js. */
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.lum-pagination {
    display: flex;
    justify-content: center;
}

.lum-pagination-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.lum-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s;
    height: 2.5rem;
    width: 2.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: hsl(var(--foreground));
}

.lum-pagination-link:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.lum-pagination-link.active {
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
}

.lum-pagination-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    border-radius: calc(var(--radius) - 2px);
}

.lum-pagination-nav:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.lum-dropdown-content {
    position: absolute;
    right: 0;
    margin-top: 0.25rem;
    z-index: 50;
    min-width: 8rem;
    overflow: hidden;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    padding: 0.25rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.lum-dropdown-item {
    display: flex;
    cursor: pointer;
    align-items: center;
    border-radius: calc(var(--radius) - 4px);
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    outline: none;
    transition: background-color 0.1s;
    position: relative;
    gap: 0.5rem;
    background: none;
    border: none;
    width: 100%;
    color: hsl(var(--popover-foreground));
}

.lum-dropdown-item:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

/* Size icons (raw SVG markup has no width/height of its own) */
.lum-dropdown-item svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.lum-dropdown-label {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.lum-dropdown-separator {
    margin: 0.25rem -0.25rem;
    height: 1px;
    background-color: hsl(var(--muted));
}

.lum-dropdown-shortcut {
    margin-left: auto;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

/* Grouped action menu (e.g. lamp toolbar "Tasks" / "Lamps" dropdowns) */
.lum-menu-trigger {
    gap: 0.375rem;
}

/* Dim and shrink the trailing chevron on a menu trigger */
.lum-menu-trigger svg:last-child {
    width: 0.85rem;
    height: 0.85rem;
    opacity: 0.6;
}

.lum-menu-content {
    min-width: 13rem;
}

/* Admin-flavoured menu item (e.g. "Admin config") keeps the Admin variant accent */
.lum-dropdown-item--admin {
    color: hsl(var(--admin));
}

.lum-dropdown-item--admin:hover {
    background-color: hsl(var(--admin) / 0.12);
    color: hsl(var(--admin));
}

/* Destructive-flavoured menu item (e.g. "Clear addresses") */
.lum-dropdown-item--danger {
    color: hsl(var(--destructive));
}

.lum-dropdown-item--danger:hover {
    background-color: hsl(var(--destructive) / 0.12);
    color: hsl(var(--destructive));
}

.lum-dropdown-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.lum-scroll-area {
    position: relative;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--scrollbar-thumb)) var(--scrollbar-track);
}

.lum-scroll-area::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.lum-scroll-area::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 9999px;
}

.lum-scroll-area::-webkit-scrollbar-thumb {
    background-color: hsl(var(--scrollbar-thumb));
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.lum-scroll-area::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--scrollbar-thumb-hover));
}

/* Desktop/Mobile visibility utilities */
.mobile-only { display: none !important; }

@media (max-width: 768px) {
.hide-mobile { display: none !important; }

.desktop-only { display: none !important; }

.mobile-only { display: flex !important; }
}

@media (max-width: 1024px) {
.hide-tablet { display: none !important; }
}

.lum-table-container {
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    position: relative;
    /* overflow-x: clip keeps horizontal content contained without establishing
       a scroll container — that lets sticky descendants (top scrollbar, header
       row) reach the viewport instead of being trapped here. */
    overflow-x: clip;
    overflow-y: visible;
    min-width: 0;
    /* Drives responsive column hiding + desktop/mobile flip via container
       queries. Lets tables nested in narrow drawers/modals respond to their
       own width instead of the viewport. */
    container-type: inline-size;
    container-name: lumtable;
}

.lum-table-grid {
    display: grid;
    width: max(100%, var(--grid-min-w, 0px));
}

/* Allow dropdown menus to escape table overflow (all layers) */
.lum-table-cell:has(.lum-dropdown-content) {
    overflow: visible;
}

.lum-table-row:has(.lum-dropdown-content) {
    overflow: visible;
    z-index: 10;
}

.lum-table-grid:has(.lum-dropdown-content) {
    overflow: visible;
}

.lum-table-container:has(.lum-dropdown-content) {
    overflow: visible;
}

.lum-table-desktop:has(.lum-dropdown-content) {
    overflow: visible;
}

.lum-table-header {
    background: hsl(var(--secondary));
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted-foreground));
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid hsl(var(--border));
    white-space: nowrap;
}

/* Override .lum-table-cell overflow for header cells so the resize handle and
   filter dropdown anchor aren't clipped at the cell edge.
   Also re-assert header typography here: the header cell carries both
   .lum-table-header and .lum-table-cell, and .lum-table-cell (declared later)
   would otherwise win the font-size cascade — making non-sortable header labels
   (which inherit the cell font) render larger than sortable .lum-table-sort-btn
   headers. This compound selector outranks .lum-table-cell and keeps every
   header — sortable or not — at the same size/weight/casing. */
.lum-table-header.lum-table-cell {
    overflow: visible;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted-foreground));
}

.lum-table-cell {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Data rows only (headers keep their own padding-driven height): reserve room
   for the tallest standard in-cell control — an h-7 (1.75rem) action button —
   plus the cell's 2×0.5rem vertical padding, so rows with and without buttons
   render at the same height. */
.lum-table-row .lum-table-cell {
    min-height: 2.75rem;
}

.lum-table-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    border-bottom: 1px solid hsl(var(--border) / 0.5);
    transition: background-color 0.15s;
}

.lum-table-row-clickable {
    cursor: pointer;
}

.lum-table-row:hover {
    background: hsl(var(--secondary) / 0.5);
}

.lum-table-row-even {
    background: hsl(var(--secondary) / 0.25);
}

.lum-table-row-even:hover {
    background: hsl(var(--secondary) / 0.5);
}

.lum-table-row-expanded {
    background: hsl(var(--primary) / 0.05);
}

.lum-table-row-alert > .lum-table-cell-first {
    border-left: 3px solid hsl(var(--warning));
}

/* Selection checkbox */
.lum-table-select-checkbox {
    height: 1rem;
    width: 1rem;
    border-radius: 0.125rem;
    border: 1.5px solid hsl(var(--muted-foreground) / 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    cursor: pointer;
}

.lum-table-select-checkbox:hover {
    border-color: hsl(var(--primary));
}

.lum-table-select-checkbox.checked {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.lum-table-select-checkbox.indeterminate {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.lum-table-select-checkbox-dash {
    width: 0.5rem;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
}

/* Selected row highlight */
.lum-table-row-selected {
    background: hsl(var(--primary) / 0.08) !important;
}

html[data-theme-style="frost"] .lum-table-row-selected {
    background: hsl(48 100% 96%) !important;
}

html[data-theme-style="aurora"] .lum-table-row-selected {
    background: hsl(var(--primary) / 0.12) !important;
}

html[data-theme-style="aurora"] .lum-table-select-checkbox {
    border: 1.5px solid hsl(0 0% 100% / 0.45);
}

html[data-theme-style="aurora"] .lum-table-select-checkbox:hover {
    border-color: hsl(var(--primary));
}

html[data-theme-style="aurora"] .lum-table-select-checkbox.checked,
html[data-theme-style="aurora"] .lum-table-select-checkbox.indeterminate {
    border-color: hsl(var(--primary));
}

/* Mobile card selection */
.lum-table-card-selection {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem 0;
    cursor: pointer;
}

/* Selection toolbar slot */
.lum-table-selection-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.lum-table-expanded {
    padding: 1rem 1.5rem;
    background: hsl(var(--secondary) / 0.3);
    border-bottom: 1px solid hsl(var(--border));
    /* Soften the raw pop-in while the nested content (often another table)
       loads and measures itself. */
    animation: lum-table-fade-in 0.18s ease;
}

/* ====== Initial-load smoothing ======
   Two gates keep the table from painting intermediate states on page entry:
   1. [data-loading] — stamped by C# until the initial data resolved (see
      _hasLoadedOnce in LumDataTable). Hides the grid, mobile cards and
      pagination; shows the skeleton.
   2. .lum-sized — added by lumTable.autosizeColumns once the first
      measurement publishes real column widths (auto-sized tables only).
      Covers the frames between "data rendered" and "widths measured", so the
      header and rows appear together, already laid out — no width snap.
   The skeleton is visible under exactly the same conditions the content is
   hidden, so the crossfade is gapless in both directions. */
.lum-table-scrollwrap,
.lum-table-mobile,
.lum-table-pagination {
    transition: opacity 0.18s ease;
}

.lum-table-container[data-loading] .lum-table-scrollwrap,
.lum-table-container[data-loading] .lum-table-mobile,
.lum-table-container[data-loading] .lum-table-pagination,
.lum-table-container[data-autosize]:not(.lum-sized) .lum-table-scrollwrap {
    opacity: 0;
}

/* Failsafe: if lum.js never runs (or the autosize pass dies), reveal the
   fallback layout anyway. Keyed off :not([data-loading]) so the countdown only
   starts once the initial load resolved — a slow data fetch can no longer burn
   the window before there is anything to reveal (the old bug where the header
   appeared alone with fallback widths, then snapped when rows arrived). */
.lum-table-container[data-autosize]:not(.lum-sized):not([data-loading]) .lum-table-scrollwrap {
    /* No `from` keyframe: animates from the CURRENT opacity, so when JS has
       already revealed the table this is a 1→1 no-op instead of a re-flash. */
    animation: lum-table-reveal 0.15s ease 0.6s forwards;
}

.lum-table-container[data-autosize]:not(.lum-sized):not([data-loading]) .lum-table-skeleton {
    animation: lum-skeleton-hide 0.15s ease 0.6s forwards;
}

@keyframes lum-table-reveal {
    to { opacity: 1; }
}

@keyframes lum-skeleton-hide {
    to { opacity: 0; visibility: hidden; }
}

/* ====== Initial-load skeleton ======
   While [data-loading] the skeleton flows normally and gives the container its
   loading height (the real grid is header-only and near-empty then). Once the
   data lands it flips to an absolute overlay above the now-rendered (still
   invisible) grid and fades out when .lum-sized reveals the content. It stays
   in the DOM permanently — hidden it is inert (visibility + pointer-events). */
.lum-table-skeleton {
    position: absolute;
    inset: 0;
    z-index: 5;
    padding: 0.25rem 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.lum-table-container[data-loading] .lum-table-skeleton {
    position: static; /* in-flow: defines the container's loading height */
}

.lum-table-container[data-loading] .lum-table-skeleton,
.lum-table-container[data-autosize]:not(.lum-sized) .lum-table-skeleton {
    opacity: 1;
    visibility: visible;
    transition: none;
}

.lum-skeleton-line {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: 2.7rem;
    padding: 0 1.25rem;
    /* Alpha via color-mix — aurora theme vars already carry an alpha channel,
       so hsl(var(--border) / x) would double-apply and break there. */
    border-bottom: 1px solid color-mix(in srgb, hsl(var(--border)) 55%, transparent);
}

.lum-skeleton-line:last-child {
    border-bottom: none;
}

.lum-skeleton-line > span {
    height: 0.65rem;
    border-radius: 0.3rem;
    background: color-mix(in srgb, hsl(var(--foreground)) 7%, transparent);
    position: relative;
    overflow: hidden;
}

.lum-skeleton-line-header {
    height: 2.9rem;
    border-bottom: 1px solid hsl(var(--border));
}

.lum-skeleton-line-header > span {
    height: 0.75rem;
    background: color-mix(in srgb, hsl(var(--foreground)) 10%, transparent);
}

/* Column-ish width rhythm, with a second variant on even rows so the block
   reads as "rows of data", not stripes. */
.lum-skeleton-line > span:nth-child(1) { flex: 0 0 6%; }
.lum-skeleton-line > span:nth-child(2) { flex: 0 0 16%; }
.lum-skeleton-line > span:nth-child(3) { flex: 0 0 28%; }
.lum-skeleton-line > span:nth-child(4) { flex: 0 0 12%; }
.lum-skeleton-line > span:nth-child(5) { flex: 0 0 18%; }
.lum-skeleton-line:nth-child(even) > span:nth-child(2) { flex-basis: 12%; }
.lum-skeleton-line:nth-child(even) > span:nth-child(3) { flex-basis: 33%; }
.lum-skeleton-line:nth-child(even) > span:nth-child(5) { flex-basis: 13%; }

/* Shared shimmer sweep — also powers the standalone .lum-skeleton utility. */
.lum-skeleton-line > span::after,
.lum-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, hsl(var(--foreground)) 6%, transparent),
        transparent);
    animation: lum-skeleton-sweep 1.6s ease-in-out infinite;
}

@keyframes lum-skeleton-sweep {
    to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .lum-skeleton-line > span::after,
    .lum-skeleton::after {
        animation: none;
    }
}

/* Standalone shimmer placeholder for host pages (KPI tiles, stat values, …):
   <span class="lum-skeleton" style="width:3.5rem"></span> shown until the
   backing value is loaded. Sized by the caller; 1em-ish tall by default so it
   slots into text without moving the line. */
.lum-skeleton {
    display: inline-block;
    width: 3.5rem;
    height: 1em;
    border-radius: 0.3rem;
    vertical-align: baseline;
    background: color-mix(in srgb, hsl(var(--foreground)) 8%, transparent);
    position: relative;
    overflow: hidden;
}

@keyframes lum-table-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lum-table-expand-icon {
    transition: transform 0.2s;
    opacity: 0.5;
}

.lum-table-expand-icon.rotated {
    transform: rotate(90deg);
    opacity: 1;
}

.lum-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

.lum-table-loading {
    position: absolute;
    inset: 0;
    background: hsl(var(--background) / 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(2px);
    /* Hold the overlay back for 150ms — a refresh that resolves faster never
       shows it, so quick sort/filter/page flips don't blink a spinner. */
    animation: lum-delayed-fade 0.2s ease 0.15s backwards;
}

@keyframes lum-delayed-fade {
    from { opacity: 0; }
}

.lum-table-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid hsl(var(--border));
    border-top-color: hsl(var(--primary));
    border-radius: 50%;
    animation: lum-spin 0.8s linear infinite;
}

@keyframes lum-spin {
    to { transform: rotate(360deg); }
}

.lum-spinner {
    border: 2px solid hsl(var(--border));
    border-top-color: hsl(var(--primary));
    border-radius: 50%;
    animation: lum-spin 0.8s linear infinite;
    display: inline-block;
}

.lum-spinner-sm { width: 1rem; height: 1rem; }

.lum-spinner-md { width: 1.5rem; height: 1.5rem; }

.lum-spinner-lg { width: 2rem; height: 2rem; }

.lum-table-sort-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    min-width: 0;
    position: relative;
}

.lum-table-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
    min-width: 0;
    flex: 0 1 auto;
    position: relative;
}

.lum-table-sort-btn > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.lum-table-sort-btn > svg {
    flex-shrink: 0;
}

/* Non-sortable header label (filter-only or plain columns) */
.lum-table-header-label {
    position: relative;
    min-width: 0;
    display: inline-flex;
}

.lum-table-header-label > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Expanded header title tooltip (full title of an abbreviated header, or the
   untruncated text of a clipped one). Rendered by lumTable JS through the
   body-portaled lumTooltip — an inline ::before can't escape the header-scroll
   / sticky-band clipping without lifting overflow on the scroll wrappers,
   which pushed the whole header band outside the table. The modifier only
   restyles the shared .lum-tooltip to match header typography. */
.lum-tooltip.lum-tooltip-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    pointer-events: none;
}

/* Single-line address cell: shrink proportionally to the column width and clip
   the overflow with an ellipsis (full text shown via the cell's LumTooltip). */
.lum-address-ellipsis {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lum-table-sort-btn:hover,
.lum-table-sort-btn.active {
    color: hsl(var(--primary));
}

.lum-table-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    background: none;
    border: none;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background-color 0.15s;
}

.lum-table-filter-btn:hover {
    background: hsl(var(--secondary));
    color: hsl(var(--foreground));
}

.lum-table-filter-btn.active {
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.1);
}

.lum-table-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
}

.lum-table-filter-dropdown {
    position: absolute;
    z-index: 51;
    min-width: 14rem;
    animation: lum-filter-enter 0.15s ease-out;
    overscroll-behavior: contain;
}

@keyframes lum-filter-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lum-table-filter-popover {
    right: 0;
    min-width: 14rem;
}

.lum-table-filter-panel {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: 0 8px 24px hsl(var(--background) / 0.4);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lum-table-filter-panel-wide {
    min-width: 16rem;
}

.lum-table-filter-panel-date {
    min-width: 18rem;
}

.lum-table-filter-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lum-table-filter-input {
    font-size: 0.875rem;
    height: 2rem;
    padding: 0 0.5rem;
}

.lum-table-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.375rem;
    padding-top: 0.25rem;
    border-top: 1px solid hsl(var(--border) / 0.5);
}

.lum-table-filter-label {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.lum-table-filter-presets {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.lum-table-filter-calendars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Date filter: desktop shows two calendars, mobile shows single calendar + range summary */
.lum-date-filter-mobile { display: none; }

.lum-date-filter-desktop { display: block; }

.lum-date-filter-range-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
}

.lum-date-filter-range-chip {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    padding: 0.25rem 0.625rem;
    border-radius: calc(var(--radius) - 2px);
    background: hsl(var(--secondary));
    border: 1px solid hsl(var(--border));
}

.lum-date-filter-range-chip.empty {
    color: hsl(var(--muted-foreground));
    font-weight: 400;
}

.lum-date-filter-range-sep {
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
}

.lum-table-filter-options {
    max-height: 12rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.lum-table-filter-select-all {
    padding-bottom: 0.375rem;
    border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.lum-table-filter-divider {
    height: 1px;
    margin: 0.375rem 0;
    background: hsl(var(--border) / 0.5);
}

.lum-table-filter-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    padding: 0.25rem 0;
    cursor: pointer;
}

.lum-table-filter-check input[type="checkbox"] {
    accent-color: hsl(var(--primary));
    width: 0.875rem;
    height: 0.875rem;
}

.lum-table-filter-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.lum-table-filter-icon svg {
    width: 1rem;
    height: 1rem;
}

.lum-table-filter-range {
    display: flex;
    gap: 0.5rem;
}

.lum-table-filter-range-field {
    flex: 1;
}

.lum-table-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.25rem 0;
}

/* When the table sits in a vertical-rhythm container (space-y-*), the wrapper
   that holds the filter-chips row would otherwise inherit a full 1rem top gap,
   leaving the chip strip floating far below the element above it. Collapse that
   gap so the chips hug the content above, matching the minimal gap below them.
   Scoped to :has(> .lum-table-filter-chips) so it only applies when chips are
   actually shown, and to .space-y-* parents so modal/drawer tables are untouched.
   !important is required to beat Tailwind's higher-specificity space-y rule. */
:is([class*="space-y-"]) > div:has(> .lum-table-filter-chips) {
    margin-top: 0.25rem !important;
}

.lum-table-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    border: 1px solid hsl(var(--primary) / 0.2);
}

.lum-table-filter-chip-label {
    font-weight: 600;
}

.lum-table-filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin-left: 0.125rem;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.lum-table-filter-chip-remove:hover {
    opacity: 1;
}

.lum-table-filter-chip-clear {
    background: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
    border-color: hsl(var(--destructive) / 0.2);
    cursor: pointer;
    font-weight: 500;
}

.lum-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-top: 1px solid hsl(var(--border));
    gap: 1rem;
    flex-wrap: wrap;
}

.lum-table-pagination-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.lum-table-page-size {
    background: hsl(var(--secondary));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.lum-pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

.lum-calendar {
    user-select: none;
}

.lum-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
    margin-bottom: 0.5rem;
}

.lum-calendar-month-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    text-transform: capitalize;
}

.lum-calendar-header-btn {
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    text-transform: capitalize;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s;
}

.lum-calendar-header-btn:hover {
    background: hsl(var(--secondary));
}

.lum-calendar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: none;
    border: none;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.lum-calendar-nav-btn:hover {
    background: hsl(var(--secondary));
    color: hsl(var(--foreground));
}

.lum-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* No column gap: range-highlight backgrounds must form a continuous band. */
    gap: 1px 0;
}

.lum-calendar-weekday {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted-foreground));
    text-align: center;
    padding: 0.25rem;
}

.lum-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    background: none;
    border: none;
    color: hsl(var(--foreground));
    cursor: pointer;
    transition: background-color 0.1s, color 0.1s;
    margin: 1px auto;
}

.lum-calendar-day:hover:not(:disabled) {
    background: hsl(var(--secondary));
}

.lum-calendar-day:disabled {
    opacity: 0.25;
    cursor: default;
}

.lum-calendar-day-outside {
    color: hsl(var(--muted-foreground));
    opacity: 0.4;
}

.lum-calendar-day-today {
    font-weight: 700;
    border: 1px solid hsl(var(--primary) / 0.4);
}

.lum-calendar-day-selected {
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    font-weight: 600;
}

/* Range days stretch across the whole grid cell (day buttons are otherwise a
   fixed 2rem centered in a 1fr track) so the highlight forms an unbroken band. */
.lum-calendar-day-range {
    background: hsl(var(--primary) / 0.15);
    border-radius: 0;
    width: 100%;
}

.lum-calendar-day-range-start {
    border-radius: 0.375rem 0 0 0.375rem;
    width: 100%;
}

.lum-calendar-day-range-end {
    border-radius: 0 0.375rem 0.375rem 0;
    width: 100%;
}

.lum-calendar-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    padding: 0.25rem 0;
}

.lum-calendar-picker-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    background: none;
    border: none;
    color: hsl(var(--foreground));
    cursor: pointer;
    transition: background-color 0.1s, color 0.1s;
}

.lum-calendar-picker-cell:hover {
    background: hsl(var(--secondary));
}

.lum-calendar-picker-selected {
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    font-weight: 600;
}

.lum-calendar-picker-current {
    font-weight: 700;
    border: 1px solid hsl(var(--primary) / 0.4);
}

.lum-calendar-picker-outside {
    color: hsl(var(--muted-foreground));
    opacity: 0.4;
}

.lum-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.lum-status-dot.online {
    background: hsl(var(--success));
    box-shadow: 0 0 6px hsl(var(--success) / 0.5);
    animation: pulse-success 2s ease-in-out infinite;
}

.lum-status-dot.offline {
    background: hsl(var(--muted-foreground));
}

/* Frost theme overrides */
html[data-theme-style="frost"] .lum-table-container {
    box-shadow: 0 1px 3px hsl(var(--foreground) / 0.05);
}

html[data-theme-style="frost"] .lum-table-filter-panel {
    box-shadow: 0 4px 16px hsl(var(--foreground) / 0.08);
}

html[data-theme-style="frost"] .lum-table-loading {
    background: hsl(var(--background) / 0.75);
}

/* Aurora theme overrides */
html[data-theme-style="aurora"] .lum-table-container {
    position: relative;
    isolation: isolate;
    background: transparent;
    border-color: hsl(var(--glass-border));
}

html[data-theme-style="aurora"] .lum-table-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: hsl(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    z-index: -1;
    pointer-events: none;
    /* Own compositing layer: without it Chromium re-rasterizes the blurred
       backdrop on every repaint underneath (row hover), which flashes a
       brighter diagonal "reflection" of the page mesh gradient. */
    transform: translateZ(0);
}

html[data-theme-style="aurora"] .lum-table-header {
    background: hsl(0 0% 100% / 0.04);
}

/* Aurora's --card is `0 0% 100% / 0.10` (10% white), which is what
   .lum-table-sticky-band uses by default. That's intentional at rest so the
   header band shares the table's glass aesthetic; but once the band is
   stuck against the viewport and rows scroll under it, that translucency
   blends with the data and makes the header unreadable. The stuck state
   switches to an opaque purple matching the filter panel. */
html[data-theme-style="aurora"] .lum-table-sticky-band.is-stuck {
    background: hsl(270 40% 14%);
    box-shadow: 0 4px 16px hsl(270 50% 5% / 0.5);
}

html[data-theme-style="aurora"] .lum-table-row:hover {
    background: hsl(0 0% 100% / 0.04);
}

html[data-theme-style="aurora"] .lum-table-row-even {
    background: hsl(0 0% 100% / 0.02);
}

html[data-theme-style="aurora"] .lum-table-filter-panel {
    background: hsl(270 40% 16% / 0.88);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-color: hsl(var(--glass-border));
    box-shadow: 0 8px 32px hsl(270 50% 5% / 0.6);
}

html[data-theme-style="aurora"] .lum-table-expanded {
    background: hsl(0 0% 100% / 0.03);
}

html[data-theme-style="aurora"] .lum-expanded-panel .lum-table-container {
    position: relative;
    isolation: isolate;
    background: transparent;
    border: 1px solid hsl(var(--glass-border));
    border-radius: 0.75rem;
}

html[data-theme-style="aurora"] .lum-expanded-panel .lum-table-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: hsl(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    z-index: -1;
    pointer-events: none;
    transform: translateZ(0); /* stable layer — see .lum-table-container::before */
}

html[data-theme-style="aurora"] .lum-table-page-size {
    background: hsl(0 0% 100% / 0.06);
    border-color: hsl(var(--glass-border));
}

html[data-theme-style="aurora"] .lum-table-row {
    border-bottom-color: hsl(0 0% 100% / 0.06);
}

html[data-theme-style="aurora"] .lum-table-filter-actions {
    border-top-color: hsl(0 0% 100% / 0.06);
}

html[data-theme-style="aurora"] .lum-table-filter-select-all {
    border-bottom-color: hsl(0 0% 100% / 0.06);
}

html[data-theme-style="aurora"] .lum-table-card-header {
    border-bottom-color: hsl(0 0% 100% / 0.06);
}

/* Aurora: tables inside modals — remove double glassmorphism.
   The modal-content already provides glass (8% white + blur 20px),
   so the table reuses that as its own glass layer instead of stacking another one.
   The table's glass lives on the container's ::before (backdrop-filter layer),
   so that pseudo-element is the one that must be switched off here. */
html[data-theme-style="aurora"] .lum-modal .lum-table-container {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

html[data-theme-style="aurora"] .lum-modal .lum-table-container::before {
    content: none;
}

.lum-expanded-panel { display: flex; flex-direction: column; gap: 0.75rem; }

.lum-expanded-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }

.lum-expanded-loading { display: flex; justify-content: center; padding: 2rem; }

.lum-expanded-empty { padding: 1rem 0; text-align: center; }

.lum-expanded-panel .lum-table-container { border: none; border-radius: 0; background: transparent; }

.lum-expanded-panel .lum-table-grid { font-size: 0.8125rem; }

/* Desktop/mobile toggle. overflow-x: scroll (not auto) keeps the bottom
   scrollbar's 6px lane reserved even while content fits, so the table
   doesn't jump vertically when columns start/stop overflowing — the empty
   track is transparent, so the idle lane reads as padding. (scrollbar-gutter
   only reserves space for vertical scrollbars, so it can't do this.) */
.lum-table-desktop { display: block; overflow-x: scroll; }

/* Thumb/track colors come from the per-theme --scrollbar-* vars. Do NOT
   derive them as hsl(var(--muted) / 0.3): aurora's --muted already carries
   an alpha channel, and the doubled alpha makes the whole declaration
   invalid — the scrollbar renders but its thumb is transparent/invisible. */
.lum-table-desktop::-webkit-scrollbar { height: 6px; }

.lum-table-desktop::-webkit-scrollbar-track { background: var(--scrollbar-track); }

.lum-table-desktop::-webkit-scrollbar-thumb { background: hsl(var(--scrollbar-thumb)); border-radius: 3px; }

.lum-table-desktop::-webkit-scrollbar-thumb:hover { background: hsl(var(--scrollbar-thumb-hover)); }

.lum-table-mobile { display: none; }

/* Collapsible button label: hides below lg viewport so an icon-only button
   keeps narrow table columns (e.g. MQTT) from overflowing. Plain CSS so it
   doesn't depend on the Tailwind CDN runtime catching up to dynamic DOM. */
@media (max-width: 1023.98px) {
.lum-btn-label-lg { display: none; }
}

/* Frozen (sticky) columns — need opaque backgrounds to cover scrolling content */
.lum-table-cell-frozen {
    position: sticky;
    z-index: 2;
    background: hsl(var(--card));
}

.lum-table-header.lum-table-cell-frozen {
    z-index: 4;
    background: hsl(var(--secondary));
}

.lum-table-row-even .lum-table-cell-frozen {
    background: color-mix(in srgb, hsl(var(--secondary)) 25%, hsl(var(--card)));
}

.lum-table-row:hover .lum-table-cell-frozen {
    background: color-mix(in srgb, hsl(var(--secondary)) 50%, hsl(var(--card)));
}

.lum-table-row-even:hover .lum-table-cell-frozen {
    background: color-mix(in srgb, hsl(var(--secondary)) 50%, hsl(var(--card)));
}

.lum-table-cell-frozen-last::after {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    bottom: 0;
    width: 6px;
    background: linear-gradient(90deg, hsl(var(--foreground) / 0.08), transparent);
    pointer-events: none;
}

/* Frost theme frozen columns */
html[data-theme-style="frost"] .lum-table-cell-frozen {
    background: hsl(var(--card));
}

html[data-theme-style="frost"] .lum-table-header.lum-table-cell-frozen {
    background: hsl(var(--secondary));
}

/* Aurora theme frozen columns */
html[data-theme-style="aurora"] .lum-table-cell-frozen {
    background: hsl(270 40% 12%);
}

html[data-theme-style="aurora"] .lum-table-header.lum-table-cell-frozen {
    background: hsl(270 40% 14%);
}

html[data-theme-style="aurora"] .lum-table-row-even .lum-table-cell-frozen {
    background: hsl(270 40% 13%);
}

html[data-theme-style="aurora"] .lum-table-row:hover .lum-table-cell-frozen,
html[data-theme-style="aurora"] .lum-table-row-even:hover .lum-table-cell-frozen {
    background: hsl(270 40% 15%);
}

html[data-theme-style="aurora"] .lum-table-cell-frozen-last::after {
    background: linear-gradient(90deg, hsl(270 50% 10% / 0.3), transparent);
}

/* Right-pinned (sticky) columns — mirror of frozen-left for the Actions
   column and other always-visible right-edge columns. Pinned columns are
   never hidden by responsive priority. */
.lum-table-cell-pin-right {
    position: sticky;
    z-index: 2;
    background: hsl(var(--card));
}

.lum-table-header.lum-table-cell-pin-right {
    z-index: 4;
    background: hsl(var(--secondary));
}

.lum-table-row-even .lum-table-cell-pin-right {
    background: color-mix(in srgb, hsl(var(--secondary)) 25%, hsl(var(--card)));
}

.lum-table-row:hover .lum-table-cell-pin-right,
.lum-table-row-even:hover .lum-table-cell-pin-right {
    background: color-mix(in srgb, hsl(var(--secondary)) 50%, hsl(var(--card)));
}

/* Leftmost right-pinned column gets a soft shadow on its left edge to hint
   that scrollable content sits underneath. box-shadow paints outside the
   cell box and isn't clipped by the cell's overflow:hidden, unlike a
   pseudo-element which would be. */
.lum-table-cell-pin-right-first {
    box-shadow: -4px 0 8px -4px hsl(var(--foreground) / 0.18);
}

/* Frost theme right-pin */
html[data-theme-style="frost"] .lum-table-cell-pin-right { background: hsl(var(--card)); }

html[data-theme-style="frost"] .lum-table-header.lum-table-cell-pin-right { background: hsl(var(--secondary)); }

/* Aurora theme right-pin */
html[data-theme-style="aurora"] .lum-table-cell-pin-right { background: hsl(270 40% 12%); }

html[data-theme-style="aurora"] .lum-table-header.lum-table-cell-pin-right { background: hsl(270 40% 14%); }

html[data-theme-style="aurora"] .lum-table-row-even .lum-table-cell-pin-right { background: hsl(270 40% 13%); }

html[data-theme-style="aurora"] .lum-table-row:hover .lum-table-cell-pin-right,
html[data-theme-style="aurora"] .lum-table-row-even:hover .lum-table-cell-pin-right { background: hsl(270 40% 15%); }

html[data-theme-style="aurora"] .lum-table-cell-pin-right-first {
    box-shadow: -4px 0 10px -4px hsl(270 50% 10% / 0.5);
}

/* Edge-fade hint: a soft right-edge gradient telling users they can scroll
   further right. The fade is hidden once they've scrolled to the end
   (data-scroll="end") or when the table fits and no scroll is needed
   (data-scroll="none"). The overlay lives on .lum-table-scrollwrap, NOT on
   the scroll container itself — otherwise the absolutely-positioned pseudo
   scrolls with the data and shows up as a vertical streak in the middle of
   the table. */
.lum-table-scrollwrap {
    position: relative;
}

.lum-table-scrollwrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(90deg, transparent, hsl(var(--foreground) / 0.12));
    pointer-events: none;
    transition: opacity 0.2s;
    opacity: 1;
    z-index: 1;
    /* Follow the container's rounded corner (0.75rem minus the 1px border) so
       the fade doesn't poke a square corner past the table's top-right curve. */
    border-top-right-radius: calc(0.75rem - 1px);
}

/* With no pagination below, the wrap's bottom edge IS the container's rounded
   bottom-right corner — round the fade there too. Keyed on the pagination
   sibling, not :last-child: the (display:none on desktop) .lum-table-mobile
   div always follows the wrap, so :last-child would never match. */
.lum-table-scrollwrap:not(:has(~ .lum-table-pagination))::after {
    border-bottom-right-radius: calc(0.75rem - 1px);
}

.lum-table-scrollwrap:has(.lum-table-desktop[data-scroll="end"])::after,
.lum-table-scrollwrap:has(.lum-table-desktop[data-scroll="none"])::after {
    opacity: 0;
}

/* 1px sentinel observed by IntersectionObserver to detect when the sticky
   band has actually stuck to the viewport. position:absolute keeps it out of
   the flow so it doesn't displace any content. */
.lum-table-sticky-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 1px;
    pointer-events: none;
}

/* Sticky band — wraps the header row + proxy scrollbar so they travel
   together as the page scrolls. The band sticks to the viewport because no
   ancestor establishes a vertical scroll context (.lum-table-container uses
   overflow-x: clip / overflow-y: visible). The header inside it is rendered
   in its own grid (separate from the data grid below) so vertical sticky
   isn't trapped by .lum-table-desktop's overflow-x scroll container.
   At rest the band carries the table's rounded top corners; once stuck
   (.is-stuck class added by JS via the sentinel above) we drop the radii
   and switch to an opaque background so data rows don't bleed through. */
.lum-table-sticky-band {
    position: sticky;
    top: 0;
    z-index: 5;
    /* Hard-stop gradient: the band's bottom 6px is the always-reserved proxy
       scrollbar lane; leave it unpainted at rest. On aurora --card is 10%
       white, so painting the lane would show a light strip under the header
       whenever the bar is hidden (the other themes hide it only because the
       container behind is the same card color). */
    background: linear-gradient(hsl(var(--card)) calc(100% - 6px), transparent calc(100% - 6px));
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    overflow: hidden;
}

.lum-table-sticky-band.is-stuck {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /* Stuck: rows scroll under the whole band, lane included — paint it all. */
    background: hsl(var(--card));
    box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08);
}

/* Header scroll wrapper — overflow:hidden so the user can't scroll it
   directly; JS keeps its scrollLeft in sync with the data grid + proxy. */
.lum-table-header-scroll {
    overflow: hidden;
}

/* Chrome 121+ ignores ::-webkit-scrollbar styling when scrollbar-width /
   scrollbar-color are set — which the global `*` rule does — and on macOS
   that also means overlay scrollbars: invisible until scrolled, nothing to
   grab. Reset both here so the always-visible slim scrollbars styled below
   actually apply. Firefox (no ::-webkit-scrollbar support) skips this block
   and keeps the global thin styling. */
@supports selector(::-webkit-scrollbar) {
    .lum-table-desktop,
    .lum-table-scrollbar-top {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }

    /* An open dropdown flips overflow to visible (the menu must escape the
       scroll container), which drops the always-reserved 6px bottom bar —
       pad the lane back so the table height doesn't jump while a menu is
       open. Webkit-only: the 6px matches the styled ::-webkit-scrollbar;
       Firefox's scrollbar height differs (or is overlay on macOS). */
    .lum-table-desktop:has(.lum-dropdown-content) {
        padding-bottom: 6px;
    }
}

/* Proxy scrollbar — sits at the bottom edge of the sticky band, just under
   the header. JS sizes the inner spacer to match .lum-table-desktop.scrollWidth
   and bidirectionally syncs scrollLeft three ways (proxy/header/data).
   Mirrors the bottom bar of .lum-table-desktop exactly: same 6px height,
   same thumb, and NO own background — the sticky band paints behind it.
   (An own hsl(var(--card)) background stacks a second translucent layer on
   aurora and turns the bar into a washed-out fat strip.) */
.lum-table-scrollbar-top {
    overflow-x: auto;
    overflow-y: hidden;
    height: 6px;
    /* visibility (not display) so the 6px lane is always part of the sticky
       band — the header keeps a constant height whether or not the table
       overflows, instead of jumping when the proxy bar toggles. Hidden until
       initScrollHint stamps an overflow state, which also prevents a
       paint-time flash before JS runs. */
    visibility: hidden;
}

/* Colors use the per-theme --scrollbar-* vars (see the .lum-table-desktop
   note above). */
.lum-table-scrollbar-top::-webkit-scrollbar { height: 6px; }

.lum-table-scrollbar-top::-webkit-scrollbar-track { background: var(--scrollbar-track); }

.lum-table-scrollbar-top::-webkit-scrollbar-thumb { background: hsl(var(--scrollbar-thumb)); border-radius: 3px; }

.lum-table-scrollbar-top::-webkit-scrollbar-thumb:hover { background: hsl(var(--scrollbar-thumb-hover)); }

.lum-table-scrollbar-top-inner { height: 1px; }

/* Show only when the data grid actually overflows horizontally
   (data-scroll = start | mid | end). */
.lum-table-scrollwrap:has(.lum-table-desktop[data-scroll]:not([data-scroll="none"])) .lum-table-scrollbar-top {
    visibility: visible;
}

/* Container-query flip to mobile cards. Lets a table nested in a narrow
   drawer/modal pick card mode based on its actual width, not the viewport.
   The legacy @media (max-width: 768px) rule below stays as a fallback for
   ancient browsers without container-query support. */
@container lumtable (max-width: 599.98px) {
.lum-table-desktop,
    .lum-table-sticky-band { display: none; }

.lum-table-mobile { display: block; }

.lum-table-container { border-radius: 0.5rem; }
}

/* LumRowActions: inline icons by default; collapse to a kebab dropdown
   when the table container is narrow. The breakpoint matches the "sm"
   priority threshold in LumDataTable.ShouldHideAtBp + theme.js. */
.lum-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lum-row-actions-inline {
    display: flex;
    gap: 0.125rem;
    align-items: center;
    justify-content: center;
}

.lum-row-actions-collapsed { display: none; }

@container lumtable (max-width: 719.98px) {
.lum-row-actions-inline { display: none; }

.lum-row-actions-collapsed { display: flex; }
}

.lum-row-actions-menu {
    min-width: 200px;
    background: hsl(var(--popover));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px hsl(var(--foreground) / 0.15);
    padding: 0.25rem;
}

.lum-row-actions-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    border-radius: 0.375rem;
    min-height: 36px;
}

.lum-row-actions-menu-item:hover:not(:disabled),
.lum-row-actions-menu-item:focus-visible:not(:disabled) {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
    outline: none;
}

.lum-row-actions-menu-item:active:not(:disabled) {
    background: hsl(var(--accent) / 0.8);
}

.lum-row-actions-menu-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lum-row-actions-menu-item.destructive {
    color: hsl(var(--destructive));
}

.lum-row-actions-menu-item.destructive:hover:not(:disabled),
.lum-row-actions-menu-item.destructive:focus-visible:not(:disabled) {
    background: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
}

.lum-row-actions-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Column picker */
.lum-column-picker {
    width: 320px;
    max-height: 420px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: hsl(var(--popover));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px hsl(var(--foreground) / 0.15);
}

.lum-column-picker-header {
    padding: 0.75rem;
    border-bottom: 1px solid hsl(var(--border));
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lum-column-picker-title {
    font-size: 0.8125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lum-column-picker-search {
    width: 100%;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    background: hsl(var(--input));
    color: hsl(var(--foreground));
    outline: none;
}

.lum-column-picker-search:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 1px hsl(var(--ring));
}

.lum-column-picker-select-all {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid hsl(var(--border));
    color: hsl(var(--primary));
    transition: background 0.1s;
}

.lum-column-picker-select-all:hover {
    background: hsl(var(--accent));
}

.lum-column-picker-body {
    overflow-y: auto;
    flex: 1;
    padding: 0.375rem 0;
}

.lum-column-picker-body::-webkit-scrollbar { width: 4px; }

.lum-column-picker-body::-webkit-scrollbar-thumb { background: hsl(var(--scrollbar-thumb)); border-radius: 2px; }

.lum-column-picker-group-header {
    padding: 0.375rem 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted-foreground));
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.lum-column-picker-group-header:hover {
    color: hsl(var(--foreground));
}

.lum-column-picker-group-toggle {
    font-size: 0.625rem;
    color: hsl(var(--primary));
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.lum-column-picker-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}

.lum-column-picker-item:hover {
    background: hsl(var(--accent));
}

.lum-column-picker-item.disabled {
    opacity: 0.5;
    cursor: default;
}

.lum-column-picker-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid hsl(var(--border));
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* Column picker — tabs */
.lum-column-picker-tabs {
    display: flex;
    gap: 0.25rem;
    background: hsl(var(--muted) / 0.4);
    border-radius: 0.5rem;
    padding: 0.1875rem;
}

.lum-column-picker-tab {
    flex: 1;
    padding: 0.3125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.lum-column-picker-tab:hover { color: hsl(var(--foreground)); }

.lum-column-picker-tab.active {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    box-shadow: 0 1px 2px hsl(var(--foreground) / 0.08);
}

/* Column picker — "show selected only" toggle */
.lum-column-picker-selected-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    user-select: none;
}

/* Column picker — restricted (super-admin only) columns */
.lum-column-picker-item.restricted span:not(.lum-col-admin-badge),
.lum-column-picker-reorder-item.restricted > span.flex-1 {
    color: hsl(var(--destructive));
}

.lum-col-admin-badge {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: hsl(var(--destructive));
    border: 1px solid hsl(var(--destructive) / 0.5);
    border-radius: 0.25rem;
    padding: 0 0.25rem;
    margin-left: auto;
    white-space: nowrap;
}

.lum-col-admin-legend {
    color: hsl(var(--destructive));
    font-size: 0.6875rem;
}

/* Column picker — reorder tab */
.lum-column-picker-reorder { padding: 0.375rem; display: flex; flex-direction: column; gap: 0.25rem; }

.lum-column-picker-reorder-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    background: hsl(var(--card));
    cursor: grab;
}

.lum-column-picker-reorder-item.disabled {
    opacity: 0.6;
    cursor: default;
    background: hsl(var(--muted) / 0.3);
}

.lum-reorder-grip { color: hsl(var(--muted-foreground)); cursor: grab; font-size: 0.75rem; letter-spacing: -2px; }

.lum-col-pin-badge {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    margin-left: auto;
}

.lum-reorder-btn {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.625rem;
    cursor: pointer;
    transition: background 0.1s;
}

.lum-reorder-btn:hover:not(:disabled) { background: hsl(var(--accent)); }

.lum-reorder-btn:disabled { opacity: 0.35; cursor: default; }

.lum-column-picker-reorder-empty {
    padding: 1.5rem 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

/* Aurora theme column picker */
html[data-theme-style="aurora"] .lum-column-picker {
    background: hsl(270 40% 16% / 0.92);
    backdrop-filter: blur(var(--glass-blur));
    border-color: hsl(var(--glass-border));
    box-shadow: 0 8px 32px hsl(270 50% 5% / 0.6);
}

/* Column picker — mobile bottom-sheet */
@media (max-width: 767px) {
.lum-column-picker {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 80vh;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -8px 32px hsl(var(--foreground) / 0.25);
    }

.lum-column-picker-reorder-item { padding: 0.5rem 0.625rem; }

.lum-reorder-btn { width: 2rem; height: 2rem; font-size: 0.75rem; }
}

/* Page indicator (hidden on desktop) */
.lum-pagination-page-indicator {
    display: none;
    align-items: center;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    padding: 0 0.5rem;
    white-space: nowrap;
}

/* ===== Mobile toolbar ===== */
.lum-table-mobile-toolbar {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid hsl(var(--border));
}

.lum-table-mobile-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
    min-height: 44px;
    background: hsl(var(--secondary));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

.lum-table-mobile-toolbar-btn:hover {
    background: hsl(var(--accent));
}

.lum-table-mobile-toolbar-btn svg {
    flex-shrink: 0;
}

.lum-table-mobile-toolbar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-size: 0.6875rem;
    font-weight: 600;
}

/* ===== Mobile card styles ===== */
.lum-table-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
}

/* Compact density — used by mobile bottom-sheet hosts (e.g. the map fixtures
   drawer) where vertical space is at a premium. Tighter outer gap + reduced
   per-card padding so each card lands at ~64px instead of ~120px. Pairs
   with the LumDataTable MobileCompactCards parameter, which also defers
   most primary fields behind the existing Show more toggle. */
.lum-table-cards--compact {
    gap: 0.375rem;
    padding: 0.5rem;
}

.lum-table-cards--compact .lum-table-card-header {
    padding: 0.5rem 0.625rem;
}

.lum-table-cards--compact .lum-table-card-fields {
    padding: 0.4rem 0.625rem;
    gap: 0.25rem 0.625rem;
}

.lum-table-cards--compact .lum-table-card-toggle {
    padding: 0.375rem 0.625rem;
}

.lum-table-card {
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 2px);
    background: hsl(var(--card));
    overflow: visible;
    transition: border-color 0.15s;
    cursor: pointer;
}

.lum-table-card:has(.lum-tooltip) {
    position: relative;
    z-index: 10;
}

.lum-table-card:has(.lum-dropdown-content) {
    position: relative;
    z-index: 20;
}

.lum-table-card-alert {
    border-left: 3px solid hsl(var(--warning));
}

.lum-table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    gap: 0.5rem;
    border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.lum-table-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lum-table-card-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 0.75rem;
    padding: 0.75rem;
    align-items: baseline;
}

.lum-table-card-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
}

.lum-table-card-value {
    font-size: 0.8125rem;
    color: hsl(var(--foreground));
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Let flex children shrink so text wraps inline with icons instead of jumping to next line */
.lum-table-card-value .flex > * {
    min-width: 0;
}

/* Override Tailwind truncate inside mobile cards — show full text */
.lum-table-card-value .truncate {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}

.lum-table-card-secondary {
    border-top: 1px solid hsl(var(--border) / 0.5);
    background: hsl(var(--secondary) / 0.25);
}

.lum-table-card-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem;
    min-height: 44px;
    background: transparent;
    border: none;
    border-top: 1px solid hsl(var(--border) / 0.5);
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.lum-table-card-toggle:hover {
    color: hsl(var(--foreground));
    background: hsl(var(--secondary) / 0.3);
}

.lum-table-card-toggle svg {
    transition: transform 0.2s;
}

.lum-table-card-toggle.expanded svg {
    transform: rotate(180deg);
}

.lum-table-card-expanded-content {
    padding: 0.75rem;
    border-top: 1px solid hsl(var(--border) / 0.5);
    background: hsl(var(--secondary) / 0.3);
}

/* ===== Bottom sheet ===== */
.lum-table-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: hsl(0 0% 0% / 0.5);
    z-index: 100;
    animation: lum-fade-in 0.15s ease-out;
}

.lum-table-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85dvh;
    background: hsl(var(--card));
    border-radius: 1rem 1rem 0 0;
    border: 1px solid hsl(var(--border));
    border-bottom: none;
    z-index: 101;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: lum-slide-up 0.2s ease-out;
}

@keyframes lum-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lum-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.lum-table-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0 0.5rem;
}

.lum-table-sheet-handle::after {
    content: '';
    width: 2rem;
    height: 0.25rem;
    border-radius: 9999px;
    background: hsl(var(--muted-foreground) / 0.3);
}

.lum-table-sheet-title {
    padding: 0 1rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.lum-table-sheet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lum-table-sheet-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    min-height: 44px;
    border-top: 1px solid hsl(var(--border) / 0.5);
    cursor: pointer;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    background: transparent;
    border-left: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    text-align: left;
    transition: background-color 0.15s;
}

.lum-table-sheet-item:hover {
    background: hsl(var(--secondary) / 0.5);
}

.lum-table-sheet-item.active {
    color: hsl(var(--primary));
    font-weight: 600;
}

.lum-table-sheet-item-indicator {
    display: inline-flex;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: hsl(var(--primary));
    flex-shrink: 0;
}

/* Mobile filter sheet — render filter panel inside the bottom sheet */
.lum-table-sheet .lum-table-filter-panel,
.lum-table-sheet .lum-table-filter-panel-wide,
.lum-table-sheet .lum-table-filter-panel-date {
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    min-width: unset;
    background: transparent;
}

/* ===== Frost theme — mobile overrides ===== */
html[data-theme-style="frost"] .lum-table-card {
    box-shadow: 0 1px 3px hsl(var(--foreground) / 0.05);
}

html[data-theme-style="frost"] .lum-table-sheet {
    box-shadow: 0 -4px 24px hsl(var(--foreground) / 0.1);
}

/* ===== Aurora theme — mobile overrides ===== */
/* Thin glass without backdrop-filter — matches aurora .lum-card. A per-card
   blur repaints on every hover/scroll (reflection flashes) and multiplies
   GPU cost by the number of cards on low-end mobile devices. */
html[data-theme-style="aurora"] .lum-table-card {
    background: hsl(var(--glass-bg));
    border-color: hsl(var(--glass-border));
}

html[data-theme-style="aurora"] .lum-table-card-alert {
    border-left-color: hsl(var(--warning));
}

html[data-theme-style="aurora"] .lum-table-card-secondary {
    background: hsl(0 0% 100% / 0.03);
    border-top-color: hsl(0 0% 100% / 0.06);
}

html[data-theme-style="aurora"] .lum-table-card-toggle {
    border-top-color: hsl(0 0% 100% / 0.06);
}

html[data-theme-style="aurora"] .lum-table-card-toggle:hover {
    background: hsl(0 0% 100% / 0.04);
}

html[data-theme-style="aurora"] .lum-table-sheet {
    background: hsl(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur));
    border-color: hsl(var(--glass-border));
    box-shadow: 0 -8px 32px hsl(270 50% 5% / 0.5);
}

html[data-theme-style="aurora"] .lum-table-card-expanded-content {
    background: hsl(0 0% 100% / 0.03);
    border-top-color: hsl(0 0% 100% / 0.06);
}

html[data-theme-style="aurora"] .lum-table-sheet-handle::after {
    background: hsl(0 0% 100% / 0.2);
}

html[data-theme-style="aurora"] .lum-table-sheet-item {
    border-top-color: hsl(0 0% 100% / 0.06);
}

html[data-theme-style="aurora"] .lum-table-sheet-item:hover {
    background: hsl(0 0% 100% / 0.04);
}

/* ===== Sort Dropdown ===== */
.lum-sort-desktop {
    position: relative;
    display: none;
}

@media (min-width: 769px) {
.lum-sort-desktop { display: inline-block; }

.lum-sort-mobile-trigger { display: none !important; }
}

@media (max-width: 768px) {
.lum-sort-mobile-trigger { display: inline-flex; }
}

.lum-sort-trigger {
    gap: 0.375rem;
}

.lum-sort-trigger.active {
    background: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary) / 0.3);
    color: hsl(var(--primary));
}

.lum-sort-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.lum-sort-dropdown-content {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 50;
    width: 14rem;
    max-height: 24rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    padding: 0.25rem;
    box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
    animation: lum-fade-in 0.1s ease-out;
}

.lum-sort-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem 0.25rem;
    color: hsl(var(--muted-foreground));
}

.lum-sort-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    font-size: 0.8125rem;
    border-radius: calc(var(--radius) - 4px);
    border: none;
    background: none;
    color: inherit;
    text-align: left;
}

.lum-sort-item:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.lum-sort-item.active {
    color: hsl(var(--primary));
    font-weight: 500;
}

.lum-sort-item .checkmark {
    margin-left: auto;
    color: hsl(var(--primary));
    font-weight: 600;
}

.lum-sort-item.destructive {
    color: hsl(var(--destructive));
}

.lum-sort-item.destructive:hover {
    background: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
}

.lum-sort-separator {
    height: 1px;
    margin: 0.25rem 0;
    background: hsl(var(--border));
}

.lum-sort-sheet-content {
    padding-bottom: 1rem;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lum-sort-mobile-trigger.active {
    color: hsl(var(--primary));
    font-weight: 600;
}

/* Mobile sheet destructive item */
.lum-table-sheet-item.destructive {
    color: hsl(var(--destructive));
}

.lum-table-sheet-item.destructive:hover {
    background: hsl(var(--destructive) / 0.1);
}

/* Frost theme overrides */
html[data-theme-style="frost"] .lum-sort-dropdown-content {
    background: hsl(0 0% 100% / 0.95);
    backdrop-filter: blur(12px);
    border-color: hsl(var(--border));
    box-shadow: 0 4px 16px hsl(var(--foreground) / 0.08);
}

html[data-theme-style="frost"] .lum-sort-item:hover {
    background: hsl(var(--secondary));
}

/* Aurora theme overrides */
html[data-theme-style="aurora"] .lum-sort-dropdown-content {
    background: hsl(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur));
    border-color: hsl(var(--glass-border));
    box-shadow: 0 4px 24px hsl(270 50% 5% / 0.4);
}

html[data-theme-style="aurora"] .lum-sort-item:hover {
    background: hsl(0 0% 100% / 0.08);
}

/* Sort dropdown mobile touch targets */
@media (max-width: 768px) {
.lum-sort-item {
        min-height: 44px;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

.lum-sort-dropdown-content {
        max-height: 40vh;
    }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
.lum-table-desktop { display: none; }

.lum-table-mobile { display: block; }

.lum-table-container {
        border-radius: 0.5rem;
    }

.lum-table-pagination {
        flex-direction: column;
        align-items: stretch;
    }

.lum-table-pagination-info {
        justify-content: center;
    }

/* Hide individual page buttons, show page indicator */
.lum-pagination-link,
    .lum-pagination-ellipsis {
        display: none !important;
    }

.lum-pagination-page-indicator {
        display: flex;
    }

/* Touch-friendly nav buttons */
.lum-pagination-nav {
        min-height: 44px;
        min-width: 44px;
        padding: 0.625rem 1rem;
    }

.lum-table-filter-panel-date {
        min-width: unset;
    }

/* Date filter: single calendar on mobile */
.lum-date-filter-mobile { display: block; }

.lum-date-filter-desktop { display: none; }

.lum-date-filter-mobile .lum-calendar-day {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.8125rem;
    }

.lum-date-filter-mobile .lum-calendar-nav-btn {
        min-height: 44px;
        min-width: 44px;
    }

/* Touch-friendly filter controls */
.lum-table-filter-check label {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

.lum-table-filter-check input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }

.lum-table-page-size {
        min-height: 44px;
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
}

/* Very small screens — stack label/value vertically for readability */
@media (max-width: 400px) {
.lum-table-card-fields {
        grid-template-columns: 1fr;
        gap: 0.125rem;
    }

.lum-table-card-label {
        margin-top: 0.375rem;
    }

.lum-table-card-label:first-child {
        margin-top: 0;
    }

.lum-table-card-header {
        padding: 0.5rem;
    }

.lum-table-card-fields {
        padding: 0.5rem;
    }
}

.lum-form-section {
    margin-bottom: 1.25rem;
}

.lum-form-section:last-child {
    margin-bottom: 0;
}

.lum-form-section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.75rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid hsl(var(--border));
}

.lum-form-grid {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.625rem 0.75rem;
    align-items: center;
}

.lum-form-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    text-align: right;
    white-space: nowrap;
}

.lum-form-required {
    color: hsl(var(--destructive));
    margin-left: 0.125rem;
}

.lum-form-error {
    font-size: 0.6875rem;
    color: hsl(var(--destructive));
    grid-column: 2;
    margin-top: -0.25rem;
}

.lum-form-input-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.lum-form-input-group .lum-input {
    flex: 1;
}

.lum-form-input-suffix {
    font-size: 0.6875rem;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
    min-width: 1.5rem;
}

/* Additional attributes section */
.lum-form-attrs-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.lum-form-attrs-row .lum-input {
    flex: 1;
}

.lum-form-attrs-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: calc(var(--radius) - 4px);
    border: none;
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}

.lum-form-attrs-remove:hover {
    color: hsl(var(--destructive));
}

/* Status message for dialogs */
.lum-form-status {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: calc(var(--radius) - 4px);
    margin-bottom: 0.75rem;
}

.lum-form-status-error {
    background: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
    border: 1px solid hsl(var(--destructive) / 0.2);
}

.lum-form-status-success {
    background: hsl(var(--success) / 0.1);
    color: hsl(var(--success));
    border: 1px solid hsl(var(--success) / 0.2);
}

/* Date trigger button styled as input */
.lum-form-date-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    cursor: pointer;
    font-size: 0.8125rem;
    width: 100%;
}

.lum-form-date-placeholder {
    color: hsl(var(--muted-foreground));
}

/* Responsive: single column on mobile */
@media (max-width: 640px) {
.lum-form-grid {
        grid-template-columns: 1fr;
        gap: 0.375rem;
    }

.lum-form-label {
        text-align: left;
    }

.lum-form-error {
        grid-column: 1;
    }

.lum-form-attrs-row {
        flex-direction: column;
        align-items: stretch;
    }

.lum-form-attrs-row .lum-input {
        flex: none;
    }

.lum-form-attrs-remove {
        align-self: flex-end;
    }
}

/* ===== Toast Notifications =====
   The container uses popover="manual" so it lives in the browser's top layer
   (above any open <dialog> + ::backdrop). The rules below also reset the UA's
   default popover styles (border, padding, margin, inset, background) which
   would otherwise center the container and add a visible frame. */
.lum-toast-container {
    position: fixed;
    inset: auto 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    overflow: visible;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    pointer-events: none;
}

/* When the popover is hidden (e.g. before showPopover() runs, or if the API
   isn't supported) keep it out of layout. Once shown, it switches to the
   top layer regardless of display. */
.lum-toast-container:not(:popover-open) {
    display: none;
}

.lum-toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    min-width: 16rem;
    max-width: 24rem;
    pointer-events: auto;
    animation: lum-toast-in 0.3s ease-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lum-toast-exit {
    animation: lum-toast-out 0.3s ease-in forwards;
}

.lum-toast-success {
    background: hsl(var(--success) / 0.15);
    color: hsl(var(--success));
    border: 1px solid hsl(var(--success) / 0.25);
}

.lum-toast-error {
    background: hsl(var(--destructive) / 0.15);
    color: hsl(var(--destructive));
    border: 1px solid hsl(var(--destructive) / 0.25);
}

.lum-toast-icon {
    flex-shrink: 0;
}

.lum-toast-message {
    flex: 1;
}

.lum-toast-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 2px;
}

.lum-toast-dismiss:hover {
    opacity: 1;
}

@keyframes lum-toast-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes lum-toast-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.96);
    }
}

@media (max-width: 640px) {
.lum-toast-container {
        left: 1rem;
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

.lum-toast {
        max-width: none;
    }
}

.lum-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.5rem;
    border-radius: 9999px;
    background: hsl(var(--muted));
    outline: none;
    cursor: pointer;
}

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

.lum-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: hsl(var(--primary));
    border: 2px solid hsl(var(--background));
    cursor: pointer;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    transition: transform 0.1s;
}

.lum-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.lum-slider::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: hsl(var(--primary));
    border: 2px solid hsl(var(--background));
    cursor: pointer;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.lum-slider::-moz-range-track {
    height: 0.5rem;
    border-radius: 9999px;
    background: hsl(var(--muted));
}

/* Wider sheet for detail drawer (600px vs default 384px) */
.lum-sheet-right.lum-sheet-wide {
    max-width: 37.5rem;
    width: 95%;
}

@media (max-width: 640px) {
.lum-sheet {
        padding: 1rem;
    }

.lum-sheet-right.lum-sheet-wide {
        width: 100%;
        max-width: 100%;
    }
}

.lum-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1.5rem;
    border: 2px dashed hsl(var(--border));
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    text-align: center;
}

.lum-dropzone:hover {
    border-color: hsl(var(--primary));
    background-color: hsl(var(--primary) / 0.05);
}

.lum-dropzone.dragover {
    border-color: hsl(var(--primary));
    background-color: hsl(var(--primary) / 0.08);
}

.lum-dropzone.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.lum-dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.lum-dropzone-icon {
    width: 2rem;
    height: 2rem;
    color: hsl(var(--muted-foreground));
}

.lum-dropzone.dragover .lum-dropzone-icon,
.lum-dropzone:hover .lum-dropzone-icon {
    color: hsl(var(--primary));
}

.lum-dropzone-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
}

.lum-dropzone-hint {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

[data-theme-style="frost"] .lum-dropzone {
    border-color: hsl(var(--border));
    background-color: hsl(var(--card) / 0.5);
}

[data-theme-style="frost"] .lum-dropzone:hover,
[data-theme-style="frost"] .lum-dropzone.dragover {
    border-color: hsl(var(--primary));
    background-color: hsl(var(--primary) / 0.06);
}

[data-theme-style="aurora"] .lum-dropzone {
    border-color: hsl(var(--glass-border));
    background-color: hsl(var(--glass-bg) / 0.3);
}

[data-theme-style="aurora"] .lum-dropzone:hover,
[data-theme-style="aurora"] .lum-dropzone.dragover {
    border-color: hsl(var(--primary));
    background-color: hsl(var(--primary) / 0.1);
}

@media (max-width: 768px) {
.lum-dropzone {
        padding: 1.5rem 1rem;
    }
}

/* Working-set chip variant of .lum-table-filter-chip — appears inline with
   column filter chips (via LumDataTable.LeadingFilterChips). Cyan to match
   palette.Custom on the map. */
.lum-table-filter-chip-workset {
    background: hsl(199 89% 48% / 0.12);
    color: hsl(199 89% 48%);
    border-color: hsl(199 89% 48% / 0.35);
}

@media (max-width: 768px) {
.lum-accent-tabs-trigger {
        flex: 1 1 calc(50% - 0.125rem);
        white-space: normal;
    }
}

.lum-accent-tabs-right {
    margin-left: auto;
}

/* Wizard stepper */
.lum-wizard-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.lum-wizard-steps-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
}

.lum-wizard-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.lum-wizard-step-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: background-color 150ms ease, color 150ms ease;
}

.lum-wizard-step-pending .lum-wizard-step-chip {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

.lum-wizard-step-active .lum-wizard-step-chip {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 0 0 4px hsl(var(--primary) / 0.15);
}

.lum-wizard-step-completed .lum-wizard-step-chip {
    background: hsl(var(--success));
    color: hsl(var(--success-foreground, 0 0% 100%));
}

.lum-wizard-step-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.lum-wizard-step-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: hsl(var(--foreground));
}

.lum-wizard-step-pending .lum-wizard-step-label {
    color: hsl(var(--muted-foreground));
}

.lum-wizard-step-description {
    font-size: 0.6875rem;
    color: hsl(var(--muted-foreground));
}

.lum-wizard-connector {
    flex: 1 1 auto;
    min-width: 1.5rem;
    height: 2px;
    border-radius: 1px;
    background: hsl(var(--border));
    transition: background-color 150ms ease;
}

.lum-wizard-connector-completed {
    background: hsl(var(--primary));
}

.lum-wizard-steps-active-label {
    display: none;
}

@media (max-width: 640px) {
.lum-wizard-step-text {
        display: none;
    }

.lum-wizard-connector {
        min-width: 0.75rem;
    }

.lum-wizard-steps-active-label {
        display: flex;
        font-size: 0.875rem;
        font-weight: 500;
        color: hsl(var(--foreground));
    }

.lum-wizard-step-active-num {
        color: hsl(var(--muted-foreground));
        margin-right: 0.5rem;
        font-weight: 400;
    }
}

/* Inline-editable verify table (LampsImportTable) */
.lum-import-cell {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    transition: background-color 100ms ease;
}

.lum-import-cell:hover {
    background: hsl(var(--accent) / 0.5);
}

.lum-import-cell-error {
    border-left: 2px solid hsl(var(--destructive));
    background: hsl(var(--destructive) / 0.08);
    padding-left: 0.5rem;
}

.lum-import-cell-error:hover {
    background: hsl(var(--destructive) / 0.15);
}

.lum-import-prev-value {
    display: inline-block;
    font-size: 0.6875rem;
    color: hsl(var(--muted-foreground));
    text-decoration: line-through;
    margin-left: 0.375rem;
}

.lum-import-prev-value-no-update {
    display: inline-block;
    font-size: 0.6875rem;
    color: hsl(var(--muted-foreground) / 0.5);
    margin-left: 0.375rem;
    font-style: italic;
}

.lum-import-cell-input {
    width: 100%;
    min-width: 6rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.8125rem;
    border-radius: 0.25rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background));
    color: hsl(var(--foreground));
}

.lum-import-cell-input:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}

/* ========================================================================
   Alignment utilities used by LumDataTable column Alignment (and general
   markup). Cells are flex containers, so text-align alone is not enough.
   ======================================================================== */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.lum-table-cell.text-center { justify-content: center; }
.lum-table-cell.text-right { justify-content: flex-end; }

/* ========================================================================
   Component Styles – Search input (LumSearchInput)
   ======================================================================== */

.lum-search-wrapper {
    position: relative;
}

.lum-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: hsl(var(--muted-foreground));
    pointer-events: none;
}

.lum-search-wrapper .lum-input {
    padding-left: 2.25rem;
}

/* ========================================================================
   LumDataTable — content-based auto-sizing support
   ======================================================================== */

/* Measurement pass (lumTable.autosizeColumns): rows spanning the full grid
   (expanded panels, empty state) would distribute their max-content across
   every track and inflate the result — hide them for the single layout pass. */
.lum-measuring .lum-table-expanded,
.lum-measuring .lum-table-empty {
    display: none !important;
}

/* Single-line cells keep measured widths meaningful and make truncation
   deterministic. Plain (non-template) cell values render inside
   .lum-table-cell-text, which carries the actual ellipsis (the cell itself is
   a flex container, where text-overflow does not apply to raw text children). */
.lum-table-cell {
    white-space: nowrap;
}

.lum-table-cell > .lum-table-cell-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================================================
   LumDataTable — column resize handles
   ======================================================================== */

/* Anchor for the absolutely-positioned handle. Frozen / right-pinned header
   cells are position:sticky already, which anchors the handle the same way —
   do not override those. */
.lum-table-header.lum-table-cell:not(.lum-table-cell-frozen):not(.lum-table-cell-pin-right) {
    position: relative;
}

.lum-table-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -4px;
    width: 8px;
    cursor: col-resize;
    touch-action: none;
    z-index: 3;
}

/* Divider line appears on hover / during drag */
.lum-table-resize-handle::after {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    border-radius: 1px;
    background: transparent;
    transition: background-color 0.15s;
}

.lum-table-resize-handle:hover::after,
.lum-resizing .lum-table-resize-handle::after {
    background: hsl(var(--primary) / 0.6);
}

/* No accidental text selection or hover styles mid-drag */
.lum-resizing {
    user-select: none;
    cursor: col-resize;
}

/* ============================================================
   LumImportWizard — generic file-import flow
   (styles mirror the Installation page's installation-* rules
   so the extracted wizard renders pixel-identically)
   ============================================================ */

/* Inline alert variants (LumAlert only ships default + destructive;
   the wizard needs info/warning/error). */
.lum-import-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-size: 0.875rem;
}

.lum-import-alert-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.0625rem;
}

.lum-import-alert-info {
    background: hsl(var(--primary) / 0.08);
    border-color: hsl(var(--primary) / 0.3);
    color: hsl(var(--foreground));
}

.lum-import-alert-info .lum-import-alert-icon {
    color: hsl(var(--primary));
}

.lum-import-alert-warning {
    background: hsl(var(--warning) / 0.1);
    border-color: hsl(var(--warning) / 0.3);
    color: hsl(var(--foreground));
}

.lum-import-alert-warning .lum-import-alert-icon {
    color: hsl(var(--warning));
}

.lum-import-alert-error {
    background: hsl(var(--destructive) / 0.1);
    border-color: hsl(var(--destructive) / 0.3);
    color: hsl(var(--foreground));
}

.lum-import-alert-error .lum-import-alert-icon {
    color: hsl(var(--destructive));
}

/* Footer button row inside the wizard — wraps reverse-stack on mobile */
.lum-import-wizard-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .lum-import-wizard-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        width: 100%;
    }

    .lum-import-wizard-footer .lum-btn {
        width: 100%;
    }
}

/* Default confirm step — stat cards */
.lum-import-confirm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .lum-import-confirm-grid {
        grid-template-columns: 1fr;
    }
}

.lum-import-confirm-card {
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
}

.lum-import-confirm-card-info { border-color: hsl(var(--primary) / 0.4); }

.lum-import-confirm-card-warning { border-color: hsl(var(--warning) / 0.4); }

.lum-import-confirm-card-error { border-color: hsl(var(--destructive) / 0.4); }

.lum-import-confirm-card-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.25rem;
}

.lum-import-confirm-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.lum-import-confirm-card-info .lum-import-confirm-card-value { color: hsl(var(--primary)); }

.lum-import-confirm-card-warning .lum-import-confirm-card-value { color: hsl(var(--warning)); }

.lum-import-confirm-card-error .lum-import-confirm-card-value { color: hsl(var(--destructive)); }

/* ===========================================================================
   Mobile / touch hardening
   =========================================================================== */

/* LumDropdownMenu on small screens: same bottom-sheet treatment as the select
   dropdown. The desktop menu is an inline position:absolute panel, which a
   scroll container would clip and a short viewport would push off-screen. */
@media (max-width: 768px) {
    .lum-dropdown-content {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: auto;
        margin: 0;
        z-index: 9999;
        max-height: 50dvh;
        overflow-y: auto;
        border-radius: 1rem 1rem 0 0;
        border-bottom: none;
        padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px));
        animation: lum-slide-up 0.2s ease-out;
    }

    .lum-dropdown-item {
        min-height: 2.75rem;
    }
}

/* Host wrapper for inline overlays that lum.js (lumSheet.open) promotes to the
   browser top layer on small screens via the native Popover API. Inline
   position:fixed bottom sheets (select, timepicker) otherwise anchor to the
   nearest transformed/backdrop-filtered ancestor — e.g. inside .lum-modal —
   instead of the viewport. In the top layer no ancestor can act as a
   containing block. On desktop the host stays display:contents (no attribute,
   no layout impact). */
.lum-sheet-host {
    display: contents;
}

.lum-sheet-host:popover-open {
    display: block;
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
    color: inherit;
}

/* Coarse pointers (touch): zoom-safe field text and WCAG-size hit targets.
   16px text stops iOS WKWebView from auto-zooming a focused field; 2.75rem
   (44px) is the minimum comfortable touch target. Fine pointers (desktop)
   are unaffected. */
@media (pointer: coarse) {
    .lum-input,
    .lum-select-trigger {
        font-size: 1rem;
    }

    .lum-input,
    .lum-select-trigger,
    .lum-btn-default {
        height: 2.75rem;
    }

    .lum-btn-sm {
        height: 2.5rem;
    }

    .lum-btn-icon {
        height: 2.75rem;
        width: 2.75rem;
    }

    .lum-checkbox {
        height: 1.5rem;
        width: 1.5rem;
    }

    /* Invisible halo widening the 44x24 switch's hit area to ~44px tall
       without changing how it looks. */
    .lum-switch::after {
        content: "";
        position: absolute;
        inset: -0.625rem;
    }

    .lum-calendar-day,
    .lum-date-filter-mobile .lum-calendar-day {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 0.8125rem;
    }

    .lum-slider::-webkit-slider-thumb {
        width: 1.75rem;
        height: 1.75rem;
    }

    .lum-slider::-moz-range-thumb {
        width: 1.75rem;
        height: 1.75rem;
    }

    .lum-row-actions-menu-item {
        min-height: 2.75rem;
    }
}