/* ============================================================================
   Proxima — the shared Docned design system, applied to Atlas.
   Tokens and component recipes follow C:\Development\VBI\STYLE_GUIDE.md. Only the
   pieces the app shell (app bar, sidebar) and the dashboard need are here; add the
   next component by copying the closest recipe from the guide, never by inventing
   a new shape, radius or shadow.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── Design tokens ─── */
:root {
    /* Two steps darker than the guide's #f8f9fc: white cards, tables and inputs need an edge
       against the page, and the hairlines need to be visible on a bright screen. */
    --bg-primary: #eaeef4;
    --bg-primary-rgb: 234, 238, 244;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e6eaf1;
    --bg-elevated: #ffffff;
    --bg-glass: rgba(15, 23, 42, 0.03);
    --bg-glass-hover: rgba(15, 23, 42, 0.06);

    --text-primary: #161a2b;
    --text-secondary: #5c6378;
    --text-muted: #8590a3;

    --accent: #2fb383;
    --accent-glow: rgba(47, 179, 131, 0.15);
    --accent-soft: rgba(47, 179, 131, 0.08);
    --accent-gradient: linear-gradient(135deg, #2fb383, #34d399);
    --accent-wash: radial-gradient(120% 100% at 0% 0%, rgba(47, 179, 131, 0.10) 0%, rgba(47, 179, 131, 0.00) 60%);
    /* App bar wash: starts on the plain surface at the brand corner and eases into a light
       green towards the trailing edge. */
    --appbar-wash: linear-gradient(90deg, rgba(47, 179, 131, 0.00) 0%, rgba(47, 179, 131, 0.03) 40%, rgba(47, 179, 131, 0.10) 100%);

    --border: rgba(15, 23, 42, 0.13);
    --border-subtle: rgba(15, 23, 42, 0.07);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.10);
    --shadow-glow: 0 0 30px var(--accent-glow);

    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    --scrollbar-thumb: rgba(0, 0, 0, 0.18);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.32);

    /* Status (meaning, not chrome — identical in both themes) */
    --status-success: #22c55e;
    --status-warning: #f59e0b;
    --status-danger: #ef4444;
    --status-info: #3b82f6;
    /* Categorical chart series, fixed order (validated for colour-vision separation on this surface). */
    --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
    --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;

    /* App shell geometry. Full-screen pages (results, verification viewers) offset
       themselves by these, so the shell can change without touching them. */
    --px-appbar-height: 56px;
    --px-sidebar-width: 260px;
}

[data-theme="dark"] {
    --bg-primary: #0f1419;
    --bg-primary-rgb: 15, 20, 25;
    --bg-secondary: #161b22;
    --bg-tertiary: #1e242c;
    --bg-elevated: #1a2028;
    --bg-glass: rgba(255, 255, 255, 0.03);
    --bg-glass-hover: rgba(255, 255, 255, 0.06);

    --text-primary: #e6edf3;
    --text-secondary: #9aa4b1;
    --text-muted: #6b7280;

    --accent-glow: rgba(47, 179, 131, 0.28);
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
    --accent-soft: rgba(47, 179, 131, 0.14);

    --border: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.04);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);

    --scrollbar-thumb: rgba(255, 255, 255, 0.18);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.32);

    color-scheme: dark;
}

/* ─── Reset & base ─── */
*, *::before, *::after { box-sizing: border-box; }

html {
    height: 100%;
    margin: 0;
    padding: 0;
}
/* The 15px base goes on body, not html: MudBlazor sizes its components in rem, and those pages
   should keep their proportions until they are migrated too. */
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Scrollbars ─── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── App shell ─── */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-primary);
}
.app-body {
    flex: 1;
    min-height: 0;
    display: flex;
}
.app-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow-y: auto;
}

/* ─── App bar ─── */
.appbar {
    position: relative;
    z-index: 50;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--px-appbar-height);
    padding: 0 24px 0 12px;
    background-color: var(--bg-secondary);
    background-image: var(--appbar-wash);     /* the soft brand wash used on every Proxima app bar */
    border-bottom: 1px solid var(--border);
    /* No backdrop-filter here, although the guide suggests one: the bar is opaque so the blur is
       invisible, and the filter would make the bar the containing block for the fixed menu
       backdrop, confining "click outside to close" to the bar itself. */
}
.appbar-leading,
.appbar-trailing { display: flex; align-items: center; gap: 12px; }
.appbar-center { flex: 1; display: flex; justify-content: center; }
.appbar-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    white-space: nowrap;
}
.appbar-badge {
    font-size: 9.5px;
    font-weight: 500;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 1px 7px;
    border-radius: var(--radius-full);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
}

.brand-lockup { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-lockup:hover { text-decoration: none; }
.app-icon { display: inline-block; flex-shrink: 0; border-radius: 9px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.app-icon-sm { width: 28px; height: 28px; }
.app-icon-md { width: 36px; height: 36px; }
.app-icon-lg { width: 64px; height: 64px; border-radius: 16px; }
.app-icon-halo {
    display: inline-flex;
    padding: 18px;
    border-radius: var(--radius-xl);
    background: var(--accent-soft);
    box-shadow: var(--shadow-glow);
}

/* Workspace + account trigger in the app bar's trailing slot */
.account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.account-trigger:hover,
.account-trigger[aria-expanded="true"] { border-color: var(--text-secondary); }
.account-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.account-trigger-icon { color: var(--text-muted); display: inline-flex; }
.account-trigger-icon.custom-llm { color: var(--status-warning); }
.account-trigger-name {
    font-size: 13.5px;
    font-weight: 500;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Sidebar (tree view, style guide §5.20) ─── */
.sidebar {
    width: var(--px-sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    overflow: hidden;
    transition: width var(--transition), opacity var(--transition), visibility 0s linear 0s;
}
.sidebar.collapsed {
    width: 0;
    opacity: 0;
    border-right-width: 0;
    visibility: hidden;                       /* keeps the hidden links out of the tab order */
    transition: width var(--transition), opacity var(--transition), visibility 0s linear 200ms;
}
.sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 10px;
    width: var(--px-sidebar-width);   /* keeps rows from reflowing while the panel animates shut */
    font-size: 14px;
}
.sidebar-group { display: block; }

/* Group header — a tree row with the chevron on the left */
.sidebar-group-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* third-party button resets centre flex content */
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    font: 400 14px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease;
}
.sidebar-group-label:hover { background: var(--bg-glass-hover); }
.sidebar-group-label:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.sidebar-toggle {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: transform 0.18s ease, color 0.18s ease;
    transform: rotate(90deg);                 /* expanded: chevron points down */
}
.sidebar-group.collapsed .sidebar-toggle { transform: rotate(0deg); }
.sidebar-group-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* Children hang from a guide line, indented one level */
.sidebar-group-items {
    padding-left: 18px;
    margin-left: 15px;
    border-left: 1px solid var(--border-subtle);
}
.sidebar-group.collapsed .sidebar-group-items { display: none; }
.sidebar-group > .sidebar-group-items.top-level { padding-left: 0; margin-left: 0; border-left: none; }

/* Leaf rows */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.sidebar-item:hover {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
    text-decoration: none;
}
.sidebar-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 500;
}
.sidebar-item.active .sidebar-item-icon { color: var(--accent); }
.sidebar-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.sidebar-item-icon { display: inline-flex; flex-shrink: 0; color: var(--text-muted); }
.sidebar-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-item-count {
    flex-shrink: 0;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0.02em;
}
.sidebar-item.active .sidebar-item-count {
    background: var(--accent);
    color: #ffffff;
}

/* ─── Buttons ─── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font: 500 13px/1 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.btn-primary {
    border: none;
    background: var(--accent-gradient);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px var(--accent-glow), 0 2px 4px rgba(0, 0, 0, 0.06);
}
.btn-primary:active { transform: translateY(0); }
/* Destructive counterpart of the primary button (style guide "Danger" #ef4444). */
.btn-danger {
    border: none;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.35), 0 2px 4px rgba(0, 0, 0, 0.06);
}
.btn-danger:active { transform: translateY(0); }
.btn-danger:focus-visible { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3); }
.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-secondary:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.btn-icon:hover {
    color: var(--accent);
    background: var(--accent-soft);
}
.btn-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.btn:disabled,
.btn-icon:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
    transform: none !important;
}
.btn-primary:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    box-shadow: none;
    opacity: 1;
}

/* ─── Dropdown menu (anchored popover) ─── */
.menu-host { position: relative; }
.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: transparent;
}
.menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 70;
    min-width: 220px;
    padding: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    animation: menu-in 0.14s ease-out;
}
.menu-left { right: auto; left: 0; }
@keyframes menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: 500 14px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}
.menu-item:hover { background: var(--accent-soft); color: var(--accent); }
.menu-item.selected { color: var(--accent); }
.menu-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.menu-item-icon { display: inline-flex; color: var(--text-muted); flex-shrink: 0; }
.menu-item:hover .menu-item-icon { color: inherit; }
.menu-item-check { margin-left: auto; opacity: 0; display: inline-flex; }
.menu-item.selected .menu-item-check { opacity: 1; }
.menu-divider { height: 1px; margin: 4px 6px; background: var(--border-subtle); }
.menu-header {
    padding: 8px 10px 6px;
    font: 600 11px 'Inter', system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Field menu (PxFieldMenu): steps on the left, the active step's fields on the right. */
.menu.pxfm { display: flex; padding: 0; min-width: 540px; max-height: 380px; overflow: hidden; }
.menu.pxfm.menu-fixed { position: fixed; top: auto; right: auto; bottom: auto; left: auto; }
.pxfm-nodes { width: 200px; flex-shrink: 0; padding: 4px; border-right: 1px solid var(--border-subtle); overflow-y: auto; }
.pxfm-node {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
    border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary);
    font: 500 13px 'Inter', system-ui, sans-serif; text-align: left; cursor: pointer;
}
.pxfm-node:hover, .pxfm-node.active { background: var(--accent-soft); color: var(--accent); }
.pxfm-node:hover .menu-item-icon, .pxfm-node.active .menu-item-icon { color: inherit; }
.pxfm-node-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxfm-count { font-size: 11px; color: var(--text-muted); }
.pxfm-node.active .pxfm-count { color: inherit; opacity: 0.8; }
.pxfm-fields { flex: 1; min-width: 330px; padding: 4px; overflow-y: auto; }
.pxfm-filter { width: calc(100% - 4px); margin: 2px 2px 6px; }
.pxfm-row { display: flex; align-items: center; gap: 2px; }
.pxfm-row .menu-item, .pxfm-node-confidence { min-width: 0; padding: 7px 10px; font-size: 13px; }
.pxfm-row .menu-item { flex: 1; }
.pxfm-text { overflow: hidden; text-overflow: ellipsis; }
.pxfm-conf {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer;
}
.pxfm-conf:hover { background: var(--accent-soft); color: var(--accent); }
.pxfm-empty { padding: 12px 10px; font-size: 13px; color: var(--text-muted); }

/* ─── Avatar ─── */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font: 600 12px 'Inter', system-ui, sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    overflow: hidden;
    border: 2px solid var(--bg-elevated);
    user-select: none;
}
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 36px; height: 36px; font-size: 13px; }

/* ─── Tooltip (CSS only) ─── */
.has-tooltip { position: relative; }
.has-tooltip[data-tooltip]::before,
.has-tooltip[data-tooltip]::after {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 80;
}
.has-tooltip[data-tooltip]::after {
    content: attr(data-tooltip);
    padding: 6px 10px;
    font: 500 12px 'Inter', system-ui, sans-serif;
    line-height: 1.3;
    color: var(--bg-elevated);
    background: var(--text-primary);
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.has-tooltip[data-tooltip]::before {
    content: "";
    bottom: calc(100% + 3px);
    width: 0; height: 0;
    border: 5px solid transparent;
    border-top-color: var(--text-primary);
}
.has-tooltip:hover::after,
.has-tooltip:hover::before,
.has-tooltip:focus-visible::after,
.has-tooltip:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 0.18s;
}
.has-tooltip.tip-bottom[data-tooltip]::after,
.has-tooltip.tip-bottom[data-tooltip]::before {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translate(-50%, -4px);
}
.has-tooltip.tip-bottom[data-tooltip]::before {
    top: calc(100% + 3px);
    border-top-color: transparent;
    border-bottom-color: var(--text-primary);
}
.has-tooltip.tip-bottom:hover::after,
.has-tooltip.tip-bottom:hover::before,
.has-tooltip.tip-bottom:focus-visible::after,
.has-tooltip.tip-bottom:focus-visible::before {
    transform: translate(-50%, 0);
}

/* End-anchored variant: the bubble's right edge sits on the trigger's right edge, so a control at
   the far right of a scroll container never pushes a tooltip past its edge. */
.has-tooltip.tip-end[data-tooltip]::after {
    left: auto;
    right: 0;
    transform: translate(0, 4px);
}
.has-tooltip.tip-end[data-tooltip]::before {
    left: auto;
    right: 12px;
    transform: translate(0, 4px);
}
.has-tooltip.tip-end:hover::after,
.has-tooltip.tip-end:hover::before,
.has-tooltip.tip-end:focus-visible::after,
.has-tooltip.tip-end:focus-visible::before {
    transform: translate(0, 0);
}

/* Inline SVG artwork a module supplies as its node icon (FaIcon): sized by font-size like a glyph, centred in the slot. */
.fa-svg { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.fa-svg svg { display: block; }

/* ─── Page header ─── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    margin-bottom: 20px;
}
.page-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--text-primary);
}
.page-title:focus, .page-title:focus-visible { outline: none; }
.page-actions { display: flex; align-items: center; gap: 8px; }

/* ─── Cards ─── */
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.card-body { padding: 18px 20px; }
.card-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 12px;
}

/* Stat tile — icon in a tinted disc, hero number, muted caption */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    flex-shrink: 0;
}
.stat-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}
.stat-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent);
}
.stat-icon.success { color: var(--status-success); background: rgba(34, 197, 94, 0.12); }
.stat-icon.danger  { color: var(--status-danger);  background: rgba(239, 68, 68, 0.12); }
.stat-icon.warning { color: var(--status-warning); background: rgba(245, 158, 11, 0.14); }
.stat-icon.info    { color: var(--status-info);    background: rgba(59, 130, 246, 0.12); }
.stat-value {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.stat-label { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }

.chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    flex-shrink: 0;
    margin-top: 16px;
}
@media (max-width: 1100px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart-grid { grid-template-columns: 1fr; }
}

/* ─── Table ─── */
.table-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.table-card-head {
    flex-shrink: 0;
    padding: 14px 18px 10px;
}
.table-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overflow-x: hidden;   /* the flexible primary column keeps the table within its container */
}
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
    background: var(--bg-elevated);
}
/* Flat header: the column labels sit on the card surface under a single hairline, so the list
   head, the labels and the rows read as one piece rather than a title block over a grid. */
.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 6px 10px 10px;
    font: 500 11px 'Inter', system-ui, sans-serif;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
/* The first column lines up with the list title above it. */
.table thead th:first-child,
.table tbody td:first-child { padding-left: 18px; }
.table tbody td {
    padding: 11px 10px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.table td.cell-nowrap,
.table th.cell-nowrap { white-space: nowrap; }
/* The primary column gets a fixed share of the width and ellipsises its text; max-width: 0 gives
   it no minimum, so a long file name can never push the table into a horizontal scroll. The rest
   of the width spreads across the other columns instead of piling up here. */
.table tbody td.cell-primary { font-weight: 500; width: 35%; max-width: 0; }
.table tbody td.cell-primary > .cell-with-icon { display: flex; align-items: center; gap: 8px; min-width: 0; }
.table tbody td.cell-primary .cell-type-icon { display: inline-flex; flex-shrink: 0; color: var(--text-muted); }
.table tbody td.cell-primary .cell-ellipsis {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table tbody td.cell-muted { color: var(--text-secondary); }
.table th:last-child,
.table td:last-child { padding-right: 24px; }     /* clear of the scroll container's scrollbar */
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-glass-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ─── Tag (inline status pill) ─── */
.tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--accent-soft);
    color: var(--accent);
    font: 500 11px 'Inter', system-ui, sans-serif;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.tag.neutral { color: var(--text-secondary); background: var(--bg-tertiary); }
.tag.info    { color: #1d4ed8; background: rgba(59, 130, 246, 0.14); }
.tag.warn    { color: #b45309; background: rgba(245, 158, 11, 0.18); }
.tag.error   { color: #b91c1c; background: rgba(239, 68, 68, 0.16); }
.tag.success { color: #15803d; background: rgba(34, 197, 94, 0.16); }
[data-theme="dark"] .tag.info  { color: #93c5fd; }
[data-theme="dark"] .tag.warn  { color: #fbbf24; }
[data-theme="dark"] .tag.error { color: #fca5a5; }
[data-theme="dark"] .tag.success { color: #86efac; }

/* ─── Status indicator ─── */
.status-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--status-success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

/* ─── Empty state ─── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 40px 24px;
    color: var(--text-secondary);
}
.empty-state-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: 4px;
}
.empty-state-title { font: 600 15px 'Inter', system-ui, sans-serif; color: var(--text-primary); }
.empty-state-body { font-size: 13px; color: var(--text-muted); max-width: 360px; }
.empty-hint { font-size: 13px; color: var(--text-muted); padding: 24px 0; text-align: center; }

/* ─── Charts (dashboard) ─── */
.px-chart { display: block; width: 100%; height: auto; overflow: visible; }
.px-chart .grid-line { stroke: var(--border-subtle); stroke-width: 1; }
.px-chart .axis-label { fill: var(--text-muted); font: 500 11px 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.px-chart .series-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.px-chart .series-area { stroke: none; }
.px-chart .area-stop-top { stop-color: var(--accent); stop-opacity: 0.22; }
.px-chart .area-stop-bottom { stop-color: var(--accent); stop-opacity: 0; }
.px-chart .series-point { fill: var(--accent); stroke: var(--bg-elevated); stroke-width: 2; }
.px-chart .hover-column { fill: transparent; cursor: crosshair; }
.px-chart .crosshair { stroke: var(--border); stroke-width: 1; }
.px-chart .tooltip-box { fill: var(--text-primary); }
.px-chart .tooltip-text { fill: var(--bg-elevated); font: 500 11.5px 'Inter', system-ui, sans-serif; }

/* Donut with legend: slices carry the series colour, the legend carries identity and value. */
.px-pie { display: flex; align-items: center; gap: 20px; }
.px-pie-svg { width: 236px; height: 236px; flex-shrink: 0; overflow: visible; }
.px-pie-slice { stroke: var(--bg-elevated); stroke-width: 2; transition: opacity 0.15s ease, transform 0.15s ease; transform-origin: 100px 100px; cursor: pointer; }
.px-pie-slice.dim { opacity: 0.35; }
.px-pie-slice.active { transform: scale(1.03); }
.px-pie-slice.other { fill: var(--text-muted); }
.px-pie-slice.series-1, .px-pie-swatch.series-1 { fill: var(--series-1); background: var(--series-1); }
.px-pie-slice.series-2, .px-pie-swatch.series-2 { fill: var(--series-2); background: var(--series-2); }
.px-pie-slice.series-3, .px-pie-swatch.series-3 { fill: var(--series-3); background: var(--series-3); }
.px-pie-slice.series-4, .px-pie-swatch.series-4 { fill: var(--series-4); background: var(--series-4); }
.px-pie-slice.series-5, .px-pie-swatch.series-5 { fill: var(--series-5); background: var(--series-5); }
.px-pie-slice.series-6, .px-pie-swatch.series-6 { fill: var(--series-6); background: var(--series-6); }
.px-pie-slice.series-7, .px-pie-swatch.series-7 { fill: var(--series-7); background: var(--series-7); }
.px-pie-slice.series-8, .px-pie-swatch.series-8 { fill: var(--series-8); background: var(--series-8); }
.px-pie-swatch.other { background: var(--text-muted); }
.px-pie-center-value { fill: var(--text-primary); font: 600 24px 'Inter', system-ui, sans-serif; letter-spacing: -0.02em; }
.px-pie-center-label { fill: var(--text-muted); font: 500 11px 'Inter', system-ui, sans-serif; }
.px-pie-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.px-pie-legend-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 2px 6px; border-radius: var(--radius-sm); font-size: 12px; transition: background-color 0.12s ease, opacity 0.15s ease; cursor: default; }
.px-pie-legend-row.active { background: var(--bg-glass-hover); }
.px-pie-legend-row.dim { opacity: 0.55; }
.px-pie-swatch { width: 8px; height: 8px; border-radius: 2px; }
.px-pie-legend-label { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-pie-legend-value { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.px-pie-legend-share { color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }

/* Ranked bars: a label column, bars from one baseline, the value at the tip. */
.bar-chart { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.bar-chart-row { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 12px; align-items: center; min-height: 22px; }
.bar-chart-label { font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.bar-chart-track { position: relative; display: flex; align-items: center; gap: 8px; height: 22px; border-left: 1px solid var(--border); padding-left: 1px; }
.bar-chart-fill { height: 12px; border-radius: 0 4px 4px 0; background: var(--accent); transition: width 0.3s ease; flex-shrink: 0; }
.bar-chart-value { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-chart-row.other .bar-chart-fill { background: var(--text-muted); opacity: 0.55; }
.bar-chart-row.other .bar-chart-label { color: var(--text-secondary); }

/* ─── Holding surface (auth restore / workspace resolve) ─── */
.holding-surface {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
}
.spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--accent-soft);
    border-top-color: var(--accent);
    animation: spinner-rotate 0.8s linear infinite;
}
@keyframes spinner-rotate { to { transform: rotate(360deg); } }

/* ─── Page description ─── */
.page-description {
    margin: -12px 0 20px;
    font-size: 13.5px;
    color: var(--text-secondary);
}

/* ─── Inputs ─── */
.input,
.select,
.textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: 400 14px/1.5 'Inter', system-ui, sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder { color: var(--text-muted); }
.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.select { appearance: none; padding-right: 30px; cursor: pointer; }
.select-wrap { position: relative; display: inline-flex; }
.select-wrap > svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); }
.input-sm, .select-sm { padding: 6px 10px; font-size: 13px; }
.select-sm { padding-right: 26px; }
/* Leading icon inside a text input */
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon > svg { position: absolute; left: 11px; color: var(--text-muted); pointer-events: none; }
.input-icon > .input { padding-left: 34px; }

/* ─── Checkboxes ─── */
.checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}
.checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.checkbox-box {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border);
    border-radius: 5px;
    color: #ffffff;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.checkbox-box svg { opacity: 0; transition: opacity 0.12s ease; }
.checkbox:hover .checkbox-box                 { border-color: var(--text-secondary); }
.checkbox input:checked + .checkbox-box       { background: var(--accent); border-color: var(--accent); }
.checkbox input:checked + .checkbox-box svg   { opacity: 1; }
.checkbox input:focus-visible + .checkbox-box { box-shadow: 0 0 0 3px var(--accent-soft); }
.checkbox input:disabled ~ *                  { opacity: 0.5; cursor: not-allowed; }
.checkbox.disabled                            { cursor: not-allowed; }
.checkbox input:indeterminate + .checkbox-box { background: var(--accent); border-color: var(--accent); }
.checkbox input:indeterminate + .checkbox-box svg { display: none; }
.checkbox input:indeterminate + .checkbox-box::after {
    content: "";
    width: 10px;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
}
.checkbox-label { font-size: 14px; color: var(--text-primary); }

/* ─── Scenario step groups: one hue per palette group, read by the canvas cards and the palette ─── */
:root {
    --node-flow: var(--accent);
    --node-analysis: #3b82f6;
    --node-actions: #8b5cf6;
    --node-integrations: #d97706;
    --node-custom: #64748b;
}
[data-theme="dark"] {
    --node-analysis: #60a5fa;
    --node-actions: #a78bfa;
    --node-integrations: #fbbf24;
    --node-custom: #94a3b8;
}
.group-flow         { --node-color: var(--node-flow); }
.group-analysis     { --node-color: var(--node-analysis); }
.group-actions      { --node-color: var(--node-actions); }
.group-integrations { --node-color: var(--node-integrations); }
.group-custom       { --node-color: var(--node-custom); }

/* ─── Radios (style guide §15) ─── */
.radio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}
.radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.radio-box {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border);
    border-radius: 50%;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.radio-box::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.radio:hover .radio-box                  { border-color: var(--text-secondary); }
.radio input:checked + .radio-box        { background: var(--accent); border-color: var(--accent); }
.radio input:checked + .radio-box::after { opacity: 1; transform: scale(1); }
.radio input:focus-visible + .radio-box  { box-shadow: 0 0 0 3px var(--accent-soft); }
.radio input:disabled ~ *                { opacity: 0.5; cursor: not-allowed; }
.radio-label { font-size: 14px; color: var(--text-primary); }
.radiogroup {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ─── Segmented control ─── */
.segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.segmented-option {
    flex: 0 0 auto;                 /* size to content; .segmented-stretch shares the width instead */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font: 500 13px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}
.segmented-option svg { flex-shrink: 0; }
.segmented-option:hover:not(.selected) { color: var(--text-primary); background: var(--bg-glass-hover); }
.segmented-option.selected {
    background: var(--bg-elevated);
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.segmented-option:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.segmented-compact .segmented-option { padding: 5px 10px; }
.segmented-stretch { display: flex; width: 100%; }
.segmented-stretch .segmented-option { flex: 1; }

/* ─── Pagination ─── */
.pagination { display: inline-flex; align-items: center; gap: 4px; }
.pagination-btn {
    min-width: 36px;                 /* fits two-digit page numbers without growing */
    height: 32px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font: 500 13px 'Inter', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pagination-btn:hover:not(:disabled):not(.active) {
    border-color: var(--border);
    color: var(--text-primary);
    background: var(--bg-glass-hover);
}
.pagination-btn.active { background: var(--accent); border-color: var(--accent); color: #ffffff; cursor: default; }
.pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.pagination-ellipsis {
    min-width: 36px;                 /* same slot width as a page button so the row never reflows */
    text-align: center;
    color: var(--text-muted);
    user-select: none;
}

/* ─── Table extras: toolbar, sortable headers, row actions, footer ─── */
.table-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}
.table-toolbar-spacer { flex: 1; }
.table-toolbar .input-icon { width: 320px; max-width: 100%; }
.table thead th.sortable { cursor: pointer; user-select: none; }
.table thead th.sortable:hover { color: var(--text-secondary); }
.table thead th .sort-label { display: inline-flex; align-items: center; gap: 4px; }
.table thead th .sort-caret { display: inline-flex; }
.table thead th.sorted { color: var(--accent); }
.table td.cell-icon { width: 1%; padding-right: 0; color: var(--text-muted); }
.table td.cell-check { width: 1%; padding-right: 4px; }
.table td.cell-actions { width: 1%; padding-left: 4px; }
.table .row-actions { display: flex; align-items: center; gap: 0; justify-content: flex-end; opacity: 0; transition: opacity 0.15s ease; }
.table tr:hover .row-actions,
.table tr:focus-within .row-actions { opacity: 1; }
.btn-icon-sm { width: 28px; height: 28px; }
.table-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-subtle);
    font-size: 12.5px;
    color: var(--text-secondary);
}
.table-footer .page-size { display: inline-flex; align-items: center; gap: 8px; }
.table-footer .range { font-variant-numeric: tabular-nums; }

/* ─── Field labels / descriptions ─── */
.field-label {
    display: block;
    font: 500 12.5px 'Inter', system-ui, sans-serif;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.field-description {
    margin: 8px 2px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ─── Detail list (label / value pairs) ─── */
.detail-list {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 10px 16px;
    margin: 0;
    font-size: 14px;
}
.detail-list dt { color: var(--text-secondary); font-weight: 500; }
.detail-list dd { margin: 0; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }

/* ─── Progress ─── */
.progress {
    position: relative;
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    width: 0;
    background: var(--accent-gradient);
    border-radius: var(--radius-full);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-indeterminate .progress-bar {
    width: 35%;
    animation: progress-slide 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(286%); }
}

/* ─── Banner / inline alert ─── */
.banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent);
}
.banner + .banner { margin-top: 10px; }
.banner-icon  { color: var(--accent); flex-shrink: 0; padding-top: 1px; display: inline-flex; }
.banner-body  { flex: 1; min-width: 0; }
.banner-title { font: 600 13.5px 'Inter', system-ui, sans-serif; color: var(--text-primary); margin-bottom: 2px; }
.banner-text  { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; overflow-wrap: anywhere; }
.banner-info    { border-left-color: var(--accent); }        .banner-info    .banner-icon { color: var(--accent); }
.banner-success { border-left-color: var(--status-success); } .banner-success .banner-icon { color: var(--status-success); }
.banner-warn    { border-left-color: var(--status-warning); } .banner-warn    .banner-icon { color: var(--status-warning); }
.banner-error   { border-left-color: var(--status-danger); }  .banner-error   .banner-icon { color: var(--status-danger); }

/* ─── List page extras ─── */
.page-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
}
.page-description.pre { white-space: pre-wrap; }
.table tbody tr.row-clickable { cursor: pointer; }
.btn-icon.warning { color: var(--status-warning); }
.btn-icon.warning:hover { color: var(--status-warning); background: rgba(245, 158, 11, 0.14); }
.table .row-actions.always { opacity: 1; }

/* ─── Custom dropdown (trigger; the list reuses .menu) ─── */
.custom-dropdown { display: inline-flex; }
.custom-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font: 500 14px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.custom-dropdown-trigger:hover { border-color: var(--text-secondary); }
.custom-dropdown-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.custom-dropdown-trigger svg { flex-shrink: 0; color: var(--text-muted); transition: transform 0.18s ease, color 0.18s ease; }
.custom-dropdown.open .custom-dropdown-trigger svg { transform: rotate(180deg); color: var(--accent); }
.custom-dropdown-value { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-dropdown.compact .custom-dropdown-trigger { padding: 5px 8px 5px 10px; font-size: 13px; gap: 6px; }
.custom-dropdown .menu { min-width: 100%; max-height: 320px; overflow-y: auto; }
/* Placed at the trigger's viewport rectangle (inline top/bottom/left/right/min-width/max-height),
   so a scrolling dialog panel or table cannot clip the list. */
.custom-dropdown .menu.menu-fixed { position: fixed; top: auto; right: auto; bottom: auto; left: auto; min-width: 0; }
/* Grouped lists: items sit indented under their group header */
.custom-dropdown .menu-header ~ .menu-item { padding-left: 22px; }
.menu.menu-up {
    top: auto;
    bottom: calc(100% + 6px);
    animation-name: menu-in-up;
}
@keyframes menu-in-up {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Tabs (segmented) ─── */
.tabs {
    display: inline-flex;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    padding: 3px;
    border-radius: var(--radius-md);
    gap: 2px;
}
.tab-btn {
    padding: 7px 14px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font: 500 13px 'Inter', system-ui, sans-serif;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.tab-btn { display: inline-flex; align-items: center; gap: 8px; }
.tab-btn svg { color: var(--text-muted); transition: color 0.12s ease; }
.tab-btn.active svg { color: var(--accent); }
.tab-btn:hover { color: var(--text-primary); }
/* Tabs at the top of a dialog */
.modal-tabs { margin: 4px 0 18px; }
.tab-btn.active {
    background: var(--bg-elevated);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}
.tab-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* ─── Date / time inputs (native picker, themed) ─── */
input[type="date"].input,
input[type="time"].input,
input[type="datetime-local"].input {
    min-width: 160px;
    font-variant-numeric: tabular-nums;
    color-scheme: light;
}
[data-theme="dark"] input[type="date"].input,
[data-theme="dark"] input[type="time"].input,
[data-theme="dark"] input[type="datetime-local"].input { color-scheme: dark; }
.input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; transition: opacity 0.12s ease; }
.input:hover::-webkit-calendar-picker-indicator { opacity: 0.85; }
[data-theme="dark"] .input::-webkit-calendar-picker-indicator { filter: invert(1); }
.textarea-sm { padding: 6px 10px; font-size: 13px; min-height: 0; }
.input:read-only, .textarea:read-only { background: var(--bg-glass); color: var(--text-secondary); }
.input:disabled, .textarea:disabled { opacity: 0.6; cursor: not-allowed; }
fieldset:disabled .input, fieldset:disabled .textarea { background: var(--bg-glass); color: var(--text-secondary); }

/* ─── Tooltip: wrapping variant for longer texts ─── */
.has-tooltip.tip-wrap[data-tooltip]::after {
    white-space: pre-line;
    max-width: 260px;
    text-align: left;
}

/* ─── Icon button states and square primary ─── */
.btn-icon.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.btn-icon.danger { color: var(--status-danger); }
.btn-icon.danger:hover { color: var(--status-danger); background: rgba(239, 68, 68, 0.12); }
.btn-square { width: 36px; height: 36px; padding: 0; justify-content: center; }
.tag.with-icon { display: inline-flex; align-items: center; gap: 4px; }
.custom-dropdown.full { display: flex; width: 100%; }
.custom-dropdown.full { min-width: 0; }
.custom-dropdown.full .custom-dropdown-trigger { width: 100%; min-width: 0; }
/* Multi-select: options carry a tick box and the menu stays open while several are picked */
.custom-dropdown-multi .menu-item { color: var(--text-primary); }
.custom-dropdown-multi .menu-item-box {
    width: 16px; height: 16px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: 4px; color: #ffffff;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.custom-dropdown-multi .menu-item-box svg { opacity: 0; }
.custom-dropdown-multi .menu-item:hover .menu-item-box { border-color: var(--text-secondary); }
.custom-dropdown-multi .menu-item.selected .menu-item-box { background: var(--accent); border-color: var(--accent); }
.custom-dropdown-multi .menu-item.selected .menu-item-box svg { opacity: 1; }
.custom-dropdown .custom-dropdown-trigger:disabled { opacity: 0.6; cursor: not-allowed; }

/* ─── Date field with custom picker (style guide §5.8) ─── */
.date-field { position: relative; display: inline-block; min-width: 160px; }
.date-field.full { display: block; width: 100%; }
.date-field-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: 400 14px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.date-field.compact .date-field-trigger { padding: 6px 10px; font-size: 13px; gap: 8px; }
.date-field-trigger:hover { border-color: var(--text-secondary); }
.date-field.open .date-field-trigger,
.date-field-trigger:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}
.date-field-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
.date-field-icon { color: var(--text-muted); flex-shrink: 0; }
.date-field-value { flex: 1; font-variant-numeric: tabular-nums; }
.date-field-value.empty { color: var(--text-muted); }
.date-field.open .date-field-icon { color: var(--accent); }

.date-picker {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 70;
    width: 280px;
    padding: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    animation: menu-in 0.14s ease-out;
}
.date-field.full .date-picker { left: auto; right: 0; }   /* keep it inside a narrow panel */
.date-picker.up { top: auto; bottom: calc(100% + 6px); animation-name: menu-in-up; }
.date-picker-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
/* Placed at the trigger's viewport rectangle (inline top/bottom/left), so a scrolling panel cannot clip it. */
.date-picker.date-picker-fixed { position: fixed; top: auto; right: auto; bottom: auto; left: auto; max-height: none; }

.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 2px 10px;
}
.date-picker-title { font: 600 14px 'Inter', system-ui, sans-serif; color: var(--text-primary); letter-spacing: -0.01em; }
.date-picker-nav {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.date-picker-nav:hover { background: var(--accent-soft); color: var(--accent); }

.date-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}
.date-picker-weekdays span {
    text-align: center;
    font: 500 10.5px 'Inter', system-ui, sans-serif;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 0;
}
.date-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-picker-day {
    aspect-ratio: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: 500 13px 'Inter', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.date-picker-day:hover { background: var(--accent-soft); color: var(--accent); }
.date-picker-day:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.date-picker-day.outside { color: var(--text-muted); opacity: 0.55; }
.date-picker-day.today { border-color: var(--accent); }
.date-picker-day.selected,
.date-picker-day.selected:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }

.date-picker-footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}
.date-picker-action {
    background: transparent;
    border: none;
    color: var(--accent);
    font: 600 12.5px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    transition: background-color 0.12s ease;
}
.date-picker-action:hover { background: var(--accent-soft); }

/* ─── Table editor (editable grid for table-type fields) ─── */
.table-editor { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.table-editor-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.table-editor-icon { display: inline-flex; color: var(--accent); }
.table-editor-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.table-editor-spacer { flex: 1; }
.table-editor-scroll { flex: 1; min-height: 0; overflow: auto; }
.table-editor-grid thead th { padding: 8px 10px; }
.table-editor-grid tbody td { padding: 4px 6px; }
.table-editor-grid td.cell-actions { padding-right: 8px; }
.table-editor-index { width: 1%; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; padding-left: 12px !important; }
.table-editor-grid .cell-text { display: inline-block; padding: 4px 6px; font-size: 13px; }
.table-editor-cell {
    width: 100%;
    min-width: 90px;
    padding: 5px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: 400 13px/1.4 'Inter', system-ui, sans-serif;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
.table-editor-cell:hover { border-color: var(--border); background: var(--bg-elevated); }
.table-editor-cell:focus { outline: none; border-color: var(--accent); background: var(--bg-elevated); box-shadow: 0 0 0 3px var(--accent-soft); }
.table-editor-db { min-width: 220px; }
.table-editor-info { display: inline-flex; flex-shrink: 0; color: var(--text-muted); cursor: help; border-radius: var(--radius-full); }
.table-editor-info.ok { color: var(--status-success); }
.table-editor-info.warn { color: var(--status-warning); }
.table-editor-info:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* ─── Database match picker ─── */
.db-match { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.db-match-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.db-match-trigger {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 8px 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.db-match-trigger:hover { border-color: var(--text-secondary); }
.db-match.open .db-match-trigger,
.db-match-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.db-match-trigger:disabled { cursor: default; background: var(--bg-glass); }
.db-match-caret { flex-shrink: 0; color: var(--text-muted); transition: transform 0.18s ease, color 0.18s ease; }
.db-match.open .db-match-caret { transform: rotate(180deg); color: var(--accent); }
.db-match-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.db-match-primary { font-size: 13px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-match-placeholder { color: var(--text-muted); font-weight: 400; }
.db-match-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.db-match-score {
    flex-shrink: 0;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent);
    font: 600 10.5px/16px 'Inter', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.db-match-score.warn  { color: #b45309; background: rgba(245, 158, 11, 0.18); }
.db-match-score.error { color: #b91c1c; background: rgba(239, 68, 68, 0.16); }
[data-theme="dark"] .db-match-score.warn  { color: #fbbf24; }
[data-theme="dark"] .db-match-score.error { color: #fca5a5; }
.db-match-secondary { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-match-ai-tag { margin-left: auto; flex-shrink: 0; }
.db-match-menu { min-width: 100%; width: max-content; max-width: 340px; max-height: 320px; overflow-y: auto; }   /* right-anchored: grows leftwards, stays in the panel */
.db-match-menu .menu-header { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.db-match-item { align-items: center; gap: 10px; white-space: normal; }
.db-match-item:hover .db-match-secondary { color: inherit; opacity: 0.8; }
.db-match.compact .db-match-trigger { padding: 3px 6px 3px 8px; }
.db-match.compact .db-match-body { flex-direction: row; align-items: center; gap: 8px; }
.db-match.compact .db-match-primary { font-size: 12.5px; flex: 1; }
.db-match.compact .db-match-secondary { display: none; }

/* ─── Toggle switch ─── */
.toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.toggle-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle:hover .toggle-track { border-color: var(--text-secondary); }
.toggle input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(16px); }
.toggle input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px var(--accent-soft); }
.toggle input:focus + .toggle-track, .toggle-track:focus, .toggle-track:focus-visible { outline: none; }
.toggle input:disabled ~ * { opacity: 0.5; cursor: not-allowed; }
.toggle-label { font-size: 13.5px; color: var(--text-primary); }


/* ─── Modal / dialog ─── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9500;
    padding: 16px;
    animation: modal-backdrop-in 0.18s ease-out;
}
@keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card:focus { outline: none; }
.modal-card {
    width: 460px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08);
    animation: modal-card-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modal-card-in {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-card.modal-card-md { width: 600px; }
.modal-card.modal-card-lg { width: 820px; }
.modal-card.modal-card-xl { width: 1000px; }   /* a module node with many settings tabs (Peppol) */
.modal-card.modal-card-wide { width: min(1440px, calc(100vw - 48px)); }   /* an expanded code editor */
.modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.modal-title { flex: 1; margin: 0; font: 600 17px/1.3 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; color: var(--text-primary); }
.modal-close { flex-shrink: 0; margin-right: -6px; }
.modal-body { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.modal-body.lead { margin-bottom: 14px; }   /* body text followed by a field */
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; }

/* Dialog variant: tabs across the top */
.modal-tabs-top {
    display: flex;
    overflow-x: auto;   /* the strip stays one line; a dialog with many tabs asks for a wider card instead */
    scrollbar-width: none;
    gap: 2px;
    margin: 6px 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.modal-tabs-top::-webkit-scrollbar { display: none; }
.modal-tab-top {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font: 500 13.5px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}
.modal-tab-top:hover { color: var(--text-primary); background: var(--bg-glass-hover); }
.modal-tab-top.active { color: var(--accent); background: var(--accent-soft); }
.modal-tab-top svg { color: var(--text-muted); flex-shrink: 0; transition: color 0.12s ease; }
.modal-tab-top.active svg { color: var(--accent); }
.modal-tab-top:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.modal-tabs-top-panel {
    min-height: 200px;
    margin-bottom: 18px;
    overflow-y: auto;
    animation: modal-panel-fade 0.18s ease-out;
}
/* Stacked tab panes: every tab is rendered into the same grid cell and only the active one is
   visible, so the panel is as tall as the tallest tab and the card never resizes on a switch. */
.modal-tabs-stack { display: grid; margin-bottom: 18px; }
.modal-tabs-stack > .modal-tab-pane { grid-area: 1 / 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
.modal-tabs-stack > .modal-tab-pane.active { animation: modal-panel-fade 0.18s ease-out; }
.modal-tabs-stack > .modal-tab-pane.inactive { visibility: hidden; pointer-events: none; }
@keyframes modal-panel-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Form rhythm inside dialogs */
.form-field { margin-bottom: 16px; }
.form-field .field-label { margin-bottom: 6px; }
.form-field .field-description { margin-top: 6px; }
.form-toggle { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.form-toggle .field-description { margin: 0 0 0 46px; }
.form-section-title {
    font: 600 12px 'Inter', system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 4px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
}
.input-with-action { display: flex; align-items: center; gap: 6px; }
.input-with-action > .input { flex: 1; min-width: 0; }

/* Icon choice grid (mobile scenario icon, queue icon) */
.icon-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.icon-choice {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.icon-choice:hover { color: var(--accent); border-color: var(--accent); }
.icon-choice.selected { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.icon-choice:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.icon-choice svg { width: 20px; height: 20px; fill: currentColor; }


/* ─── Row overflow menu (PxRowMenu) ─── */
/* Positioned fixed at the trigger's viewport rectangle, so it is never clipped by the table's
   scroll container; the row's hover-only action group stays visible while its menu is open. */
.row-menu { position: fixed; top: auto; right: auto; z-index: 70; min-width: 200px; width: max-content; }
.row-menu.menu-up { animation-name: menu-in-up; }
@keyframes menu-in-up {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.table .row-actions:has([aria-expanded="true"]) { opacity: 1; }
.menu-item.danger { color: var(--status-danger); }
.menu-item.danger:hover { background: rgba(239, 68, 68, 0.1); color: var(--status-danger); }
.menu-item.danger .menu-item-icon { color: inherit; }
.row-actions a.btn-icon { text-decoration: none; }

/* ─── Configuration lists ─── */
/* A second flexible column (the description) shares the leftover width with the primary one and
   ellipsises the same way, so a long description cannot wrap the row or widen the table. */
.table tbody td.cell-flex { max-width: 0; }
.table tbody td.cell-flex .cell-ellipsis {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.status-icons { display: inline-flex; align-items: center; gap: 8px; min-height: 18px; }
.status-icon { display: inline-flex; color: var(--text-muted); cursor: default; }
.status-icon.ok { color: var(--status-success); }
.status-icon.accent { color: var(--accent); }
.table-card > .progress { margin: 0; border-radius: 0; }
.table-card > .empty-state { flex: 1; justify-content: center; }

/* ─── Combined list head (experiment on the extraction templates list) ─── */
/* Title, description, search and the primary actions share one strip at the top of the table
   card, so the header row sits directly beneath them and the page has a single surface. */
.list-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 18px 8px;
}
.list-head-text { min-width: 0; }
.list-head .page-title { font-size: 20px; }
.list-head-description { margin: 3px 0 0; font-size: 13px; color: var(--text-secondary); }
.list-head-description.pre { white-space: pre-wrap; }
/* A filter row directly under the list head sits tight against it. */
.list-toolbar { padding-top: 0; }
.list-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.list-head-actions .input-icon { width: 260px; }
.list-head-actions .input-icon .input { width: 100%; }

.menu-item:disabled { opacity: 0.45; cursor: default; }
.menu-item:disabled:hover { background: transparent; color: var(--text-primary); }
.cell-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.cell-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.cell-with-action { display: inline-flex; align-items: center; gap: 4px; }
.table tbody td.cell-danger { color: var(--status-danger); }
/* Numeric columns: right-aligned with lining figures. */
.table th.cell-num, .table td.cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.list-head-description code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}
.list-card > .banner { margin: 0 16px 12px; }
.table tbody td .toggle { margin: 0; }

/* ─── Dialog extras: bordered inner table, checkbox stack, dropdown placeholder ─── */
.custom-dropdown-placeholder { color: var(--text-muted); }
.checkbox-list { display: flex; flex-direction: column; gap: 10px; }
.modal-table { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.modal-table .table thead th { border-top: none; }
.modal-table .table th:last-child,
.modal-table .table td:last-child { padding-right: 10px; }
.modal-tabs-top-panel > .banner { margin-bottom: 16px; }
.input-with-action > .custom-dropdown { flex: 1; min-width: 0; }

.modal-tab-top:disabled { opacity: 0.45; cursor: default; }
.modal-tab-top:disabled:hover { background: transparent; color: var(--text-secondary); }
.form-row { display: flex; gap: 12px; align-items: flex-start; }
.form-row > .form-field { flex: 1; min-width: 0; }

/* ─── Long forms in a dialog ─── */
/* The body scrolls inside the card while the head and the actions stay put. */
.modal-scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -8px 16px 0; padding-right: 8px; }
.checkbox-indent { margin-left: 28px; }
/* A test-connection button with its outcome beside it. */
.test-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.test-result { font-size: 13px; line-height: 1.4; }
.test-result.ok { color: var(--status-success, #16a34a); }
.test-result.fail { color: var(--status-danger); }
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }

/* ─── Snackbar / toast (style guide 37) on MudBlazor's snackbar markup ─── */
/* Inverted card anchored bottom-centre: the text colour becomes the surface and vice versa, so it
   reads dark on the light theme and light on the dark one. Severity shows in the icon only. */
#mud-snackbar-container { z-index: 2000; }
#mud-snackbar-container.mud-snackbar-location-bottom-center { bottom: 24px; }
.mud-snackbar,
.mud-snackbar.mud-alert-filled-normal,
.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-alert-filled-warning,
.mud-snackbar.mud-alert-filled-error {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: min(560px, calc(100vw - 32px));
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--text-primary);
    color: var(--bg-elevated);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    font: 500 13px/1.45 'Inter', system-ui, sans-serif;
}
.mud-snackbar .mud-snackbar-icon { display: inline-flex; flex-shrink: 0; padding: 0; margin: 0; opacity: 1; color: var(--accent); }
.mud-snackbar .mud-snackbar-icon svg { width: 18px; height: 18px; }
.mud-snackbar.mud-alert-filled-success .mud-snackbar-icon { color: #22c55e; }
.mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon { color: #f59e0b; }
.mud-snackbar.mud-alert-filled-error   .mud-snackbar-icon { color: #ef4444; }
.mud-snackbar .mud-snackbar-content-message { flex: 1; padding: 0; }
.mud-snackbar .mud-snackbar-content-action { margin: 0 -4px 0 0; padding: 0; }
.mud-snackbar .mud-snackbar-close-button {
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    color: inherit;
    opacity: 0.7;
    border-radius: var(--radius-sm);
    transition: opacity 0.12s ease, background-color 0.12s ease;
}
.mud-snackbar .mud-snackbar-close-button:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.mud-snackbar .mud-snackbar-close-button svg { width: 14px; height: 14px; }

/* ─── Database lookup sheet (under the document in the verification viewer) ─── */
.db-sheet-search { width: 300px; }
.db-sheet-search .input { width: 100%; }
.db-sheet-progress { margin: 0; border-radius: 0; height: 2px; }
.db-sheet-grid tbody td { padding: 6px 8px; white-space: nowrap; }
.db-sheet-grid .cell-text { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-sheet-mark { width: 1%; white-space: nowrap; padding-right: 0 !important; }
.db-sheet-row { cursor: pointer; }
.db-sheet-row.selected td { background: var(--accent-soft); }
.db-sheet-row.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.db-sheet-current { padding: 1px 6px; font-size: 10.5px; }
.db-sheet-foot { flex-shrink: 0; padding: 6px 14px; border-top: 1px solid var(--border-subtle); font-size: 11.5px; color: var(--text-muted); }

/* ─── Card tabs: folder tabs on the top edge of a card ─── */
/* The strip sits on the page background; the active tab shares the card's fill and border and
   overlaps the card's top edge by a pixel, so the two read as one surface. */
.card-tabs {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}
.card-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    color: var(--text-secondary);
    font: 500 13.5px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s ease, background 0.12s ease;
}
.card-tab svg { color: var(--text-muted); transition: color 0.12s ease; }
.card-tab:hover { color: var(--text-primary); }
.card-tab.active {
    margin-bottom: -1px;
    padding-bottom: 9px;
    background: var(--bg-elevated);
    color: var(--accent);
}
.card-tab.active svg { color: var(--accent); }
.card-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.card-tab-count {
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    font: 500 11px 'Inter', system-ui, sans-serif;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.card-tab.active .card-tab-count { background: var(--accent-soft); color: var(--accent); }
/* The card under a tab strip: the first tab starts on the card's left edge, so that corner is
   square and the tab's left border continues straight down into the card's. */
.card-tabbed { position: relative; border-top-left-radius: 0; }

/* ─── Page tabs inside a list card ─── */
/* A full-width strip between the head and the table: the active tab is underlined in the accent
   colour on the same line the table header starts from, so the tab and its content read as one. */
.list-head:has(+ .list-tabs) { padding-bottom: 6px; }
.list-tabs {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 0 18px;
    border-bottom: 1px solid var(--border);
}
.list-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 11px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--text-secondary);
    font: 500 13.5px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s ease, background 0.12s ease;
}
.list-tab svg { color: var(--text-muted); transition: color 0.12s ease; }
.list-tab:hover { color: var(--text-primary); background: var(--bg-glass-hover); }
.list-tab.active { color: var(--accent); }
.list-tab.active svg { color: var(--accent); }
.list-tab.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
}
.list-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.list-tab-count {
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    font: 500 11px 'Inter', system-ui, sans-serif;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.list-tab.active .list-tab-count { background: var(--accent-soft); color: var(--accent); }
.list-tabs + .table-scroll .table thead th { border-top: none; }

.segmented-count {
    margin-left: 2px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    font: 500 11px 'Inter', system-ui, sans-serif;
    line-height: 16px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.segmented-option.selected .segmented-count { background: var(--accent-soft); color: var(--accent); }

/* ─── Scrollable checkbox list (multi-select replacement) ─── */
.check-list-box {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    padding: 4px;
}
.check-list-item { padding: 6px 8px; border-radius: var(--radius-sm); }
.check-list-item:hover { background: var(--bg-glass-hover); }
.check-list-header {
    padding: 8px 8px 4px;
    font: 600 11px 'Inter', system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.check-list-header ~ .check-list-item { padding-left: 16px; }

/* ───────── Component: Dropzone ───────── */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 32px 24px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-glass);
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.dropzone:hover,
.dropzone:focus-visible {
    border-color: var(--text-secondary);
    background: var(--bg-glass-hover);
    outline: none;
}
.dropzone.dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    transform: scale(1.01);
}
.dropzone-icon  { color: var(--text-muted); margin-bottom: 6px; }
.dropzone.dragover .dropzone-icon { color: var(--accent); }
.dropzone-title { font: 600 14px inherit; color: var(--text-primary); }
.dropzone.dragover .dropzone-title { color: var(--accent); }
.dropzone-hint  { font-size: 12.5px; color: var(--text-muted); }
.dropzone-browse {
    font: inherit;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 3px;
}
.dropzone-browse:hover { text-decoration: underline; }
.dropzone-browse:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }