/* MainTrak design system.
   The same layout and vocabulary as Acumen Next (sidebar shell, admin headers, form fields, data tables, modal panels),
   in the MainTrak greens. Every colour comes from a token so the dark theme is a token swap, not a second stylesheet.
   Components in AcuMainTrak.UI render these classes; pages may also use them directly on plain HTML. */

:root {
    --ink: #17231c;
    --ink-soft: #33423a;
    --muted: #7a8880;
    --muted-dark: #5b6a62;
    --canvas: #f4f7f5;
    --panel: #ffffff;
    --panel-alt: #f8fbf9;
    --sidebar: #eef3ef;
    --hover: #e4ece6;
    --field: #fbfcfb;
    --line: #e0e8e2;
    --line-dark: #cbd8cf;

    --brand: #2e8741;
    --brand-text: #28482c;
    --brand-fill: #28482c;
    --brand-fill-hover: #2e8741;
    --brand-soft: #e7f3ea;
    --brand-soft-line: #bcdcc4;
    --brand-ring: rgba(46, 135, 65, .16);

    --success: #2e8741;
    --success-soft: #e7f5eb;
    --success-line: #b7ddc1;
    --info: #1971b5;
    --info-soft: #e9f3f9;
    --info-line: #bcd8ea;
    --warning: #b8691f;
    --warning-soft: #fff3e6;
    --warning-line: #f0c8a3;
    --danger: #b0473f;
    --danger-soft: #fdf0ee;
    --danger-line: #ebc5c0;
    --purple: #6e4a8e;
    --purple-soft: #f1ebf8;

    --overlay: rgba(18, 32, 24, .46);
    --shadow: 0 12px 32px rgba(20, 50, 30, .06);
    --shadow-raised: 0 15px 34px rgba(20, 50, 30, .14);
    --shadow-modal: 0 24px 60px rgba(14, 40, 24, .25);

    --radius: 6px;
    --radius-sm: 4px;
    --sidebar-width: 244px;
    --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --mono: "Cascadia Code", Consolas, "SFMono-Regular", Menlo, monospace;

    color-scheme: light;
}

[data-theme="dark"] {
    --ink: #e3eae5;
    --ink-soft: #c4cfc8;
    --muted: #8a998f;
    --muted-dark: #a3b1a8;
    --canvas: #0e1411;
    --panel: #151d18;
    --panel-alt: #19231d;
    --sidebar: #111915;
    --hover: #1d2821;
    --field: #19221c;
    --line: #243029;
    --line-dark: #334139;

    --brand: #56bb6d;
    --brand-text: #8fd6a0;
    --brand-fill: #2f7f43;
    --brand-fill-hover: #37934e;
    --brand-soft: rgba(86, 187, 109, .13);
    --brand-soft-line: rgba(86, 187, 109, .34);
    --brand-ring: rgba(86, 187, 109, .22);

    --success: #56bb6d;
    --success-soft: rgba(86, 187, 109, .13);
    --success-line: rgba(86, 187, 109, .34);
    --info: #5aa6e0;
    --info-soft: rgba(90, 166, 224, .13);
    --info-line: rgba(90, 166, 224, .34);
    --warning: #e3a25c;
    --warning-soft: rgba(227, 162, 92, .13);
    --warning-line: rgba(227, 162, 92, .36);
    --danger: #e27b72;
    --danger-soft: rgba(226, 123, 114, .13);
    --danger-line: rgba(226, 123, 114, .36);
    --purple: #b596d6;
    --purple-soft: rgba(181, 150, 214, .14);

    --overlay: rgba(0, 0, 0, .6);
    --shadow: 0 12px 32px rgba(0, 0, 0, .28);
    --shadow-raised: 0 15px 34px rgba(0, 0, 0, .4);
    --shadow-modal: 0 24px 60px rgba(0, 0, 0, .55);

    color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: var(--brand); }
a:hover { color: var(--brand-text); }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
h1 { font-size: 30px; letter-spacing: -.6px; line-height: 1.1; color: var(--ink); }
h2 { font-size: 19px; letter-spacing: -.2px; line-height: 1.2; color: var(--ink); }
h3 { font-size: 15px; line-height: 1.25; color: var(--ink-soft); }
h4 { font-size: 13px; line-height: 1.3; color: var(--ink-soft); }
h5, h6 { font-size: 12px; line-height: 1.3; color: var(--ink-soft); }
h1:focus { outline: none; }
hr, .divider { height: 0; margin: 16px 0; border: 0; border-top: 1px solid var(--line); }
.divider.vertical { align-self: stretch; height: auto; margin: 0 4px; border-top: 0; border-left: 1px solid var(--line); }
code, pre, kbd, .mono { font-family: var(--mono); }
code { border-radius: 3px; padding: 1px 4px; background: var(--hover); font-size: .92em; }
pre { overflow: auto; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--panel-alt); font-size: 12px; }
kbd { border: 1px solid var(--line-dark); border-bottom-width: 2px; border-radius: 3px; padding: 1px 5px; color: var(--muted-dark); background: var(--panel); font-size: 10px; }
.shortcut-keys { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; white-space: nowrap; }
/* Key hints: the letter labels shown over everything clickable (mtUi.keyHints). Above dialogs and loading screens. */
.key-hints { position: fixed; z-index: 6000; inset: 0; pointer-events: none; }
.key-hint { position: fixed; transform: translate(-4px, -4px); border: 1px solid #a16207; border-radius: 3px; padding: 0 4px; color: #1c1917; background: #fde047; box-shadow: 0 1px 3px rgb(0 0 0 / .35); font: 700 11px/1.5 var(--mono); text-transform: uppercase; }
.key-hint b { opacity: .45; }
.key-hints-status { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); border-radius: var(--radius); padding: 6px 12px; color: #fff; background: rgb(28 25 23 / .9); font-size: 12px; }
img { max-width: 100%; }
::selection { background: var(--brand-soft-line); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
* { scrollbar-width: thin; scrollbar-color: var(--line-dark) transparent; }

/* ---------- Icons ---------- */
.ui-icon { width: 1em; height: 1em; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; line-height: 0; vertical-align: -0.125em; }
.ui-icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.ui-icon.filled svg { fill: currentColor; stroke: none; }
.ui-icon.text-icon { width: auto; min-width: 1em; font-size: .8em; font-weight: 800; line-height: 1; }

/* ---------- Application shell ---------- */
.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: sticky; top: 0; width: var(--sidebar-width); height: 100vh; flex: 0 0 var(--sidebar-width); display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); padding: 22px 14px 14px; background: var(--sidebar); }
.sidebar-scroll { min-height: 0; flex: 1; overflow-y: auto; margin: 0 -8px; padding: 0 8px 10px; }
.brand-lockup { display: block; padding: 0 10px 20px; text-decoration: none; }
.brand-logo { width: 170px; height: auto; display: block; }
.brand-logo.dark { display: none; }
[data-theme="dark"] .brand-logo.light { display: none; }
[data-theme="dark"] .brand-logo.dark { display: block; }
.brand-product { display: block; margin-top: 8px; color: var(--muted-dark); font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.context-indicator { width: 100%; display: grid; gap: 4px; margin: 0 0 20px; border: 1px solid var(--brand-soft-line); padding: 9px 10px; color: var(--ink-soft); background: var(--brand-soft); text-align: left; text-decoration: none; }
.context-indicator:hover { border-color: var(--brand); }
.context-status { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-size: 9px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.context-status.offline { color: var(--warning); }
.context-status.offline .connection-dot { background: var(--warning); }
.context-indicator strong { overflow: hidden; color: var(--brand-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.context-indicator small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.connection-dot, .status-dot { width: 7px; height: 7px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: var(--success); }
.status-dot.warning { background: var(--warning); }
.status-dot.danger { background: var(--danger); }
.status-dot.muted { background: var(--line-dark); }
.status-dot.info { background: var(--info); }

.primary-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-section-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 12px 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }
.nav-section-spaced { margin-top: 22px; }
.nav-link { position: relative; width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: flex-start; gap: 11px; border: 0; border-radius: var(--radius); padding: 0 11px; color: var(--muted-dark); background: transparent; font-size: 13px; font-weight: 600; text-align: left; text-decoration: none; }
.nav-link:hover { color: var(--ink); background: var(--hover); }
.nav-link.active { color: var(--brand-text); background: var(--panel); box-shadow: 0 3px 12px rgba(21, 60, 36, .07); }
/* The search button at the top of the sidebar, shaped like a search box. */
.nav-search { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 9px; margin: 0 0 12px; border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 0 8px 0 11px; color: var(--muted); background: var(--panel); font-size: 13px; text-align: left; cursor: pointer; }
.nav-search span { flex: 1 1 auto; }
.nav-search .shortcut-keys { flex: 0 0 auto; }
.nav-search:hover { border-color: var(--brand-soft-line); color: var(--ink-soft); }
.nav-search:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: 0; }
/* A count on a menu item, such as job requests waiting for triage; amber once the oldest has waited three days. */
.nav-count { min-width: 20px; margin-left: auto; border-radius: 999px; padding: 1px 6px; color: var(--brand-text); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-soft-line); font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; }
.nav-count.late { color: var(--warning); background: var(--warning-soft); box-shadow: inset 0 0 0 1px var(--warning-line); }
/* Sidebar links keep the sidebar's colours whatever link styles a page brings in (HTML pasted from emails often
   carries rules such as a:link { color: blue }, which would otherwise beat .nav-link). */
.sidebar-scroll a.nav-link:is(:link, :visited) { color: var(--muted-dark); font-weight: 600; }
.sidebar-scroll a.nav-link:is(:link, :visited):hover { color: var(--ink); }
.sidebar-scroll a.nav-link.active:is(:link, :visited) { color: var(--brand-text); }
/* Home is the way back to the dashboard, so it reads as a button rather than one link among many. */
.nav-link.nav-home { min-height: 42px; margin-bottom: 6px; border: 1px solid var(--brand-soft-line); background: var(--brand-soft); }
.sidebar-scroll a.nav-link.nav-home:is(:link, :visited) { color: var(--brand-text); font-weight: 700; }
.nav-link.nav-home .nav-glyph { border-color: transparent; color: #fff; background: var(--brand-fill); }
.nav-link.nav-home:hover { border-color: var(--brand); background: var(--brand-soft); }
.nav-link.nav-home.active { border-color: var(--brand); box-shadow: var(--shadow); }
.nav-glyph { width: 22px; height: 22px; display: inline-flex; flex: 0 0 22px; align-items: center; justify-content: center; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); color: var(--muted-dark); font-size: 13px; }
.nav-link.active .nav-glyph { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.nav-link > span:not(.nav-glyph):not(.nav-count) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { margin-left: auto; min-width: 22px; border-radius: 10px; padding: 3px 6px; color: var(--brand-text); background: var(--brand-soft); font-size: 10px; font-weight: 800; text-align: center; }
.nav-count.alert { color: #fff; background: var(--danger); }
.nav-chevron { margin-left: auto; color: var(--muted); font-size: 13px; transition: transform .15s ease; }
.nav-link[aria-expanded="true"] .nav-chevron { transform: rotate(90deg); }
.nav-children { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 22px; border-left: 1px solid var(--line-dark); padding-left: 8px; }
.nav-children .nav-link { min-height: 32px; font-size: 12px; }
.nav-hidden-toggle { opacity: .55; }
.nav-editing .nav-link { cursor: default; }
.nav-edit-toggle { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; border: 0; border-radius: var(--radius-sm); color: var(--muted); background: transparent; font-size: 13px; }
.nav-edit-toggle:hover { color: var(--brand); background: var(--brand-soft); }
/* Customise mode: pages are dragged by their row (by the grip on touch screens), or moved with the arrows. */
.nav-editing .nav-link.nav-movable { gap: 7px; padding-left: 4px; cursor: grab; }
.nav-editing.sorting, .nav-editing.sorting .nav-link { cursor: grabbing; }
.nav-editing .nav-link.dragging { opacity: .35; }
.nav-editing .nav-link.drop-before { box-shadow: inset 0 2px 0 var(--brand); }
.nav-editing .nav-link.drop-after { box-shadow: inset 0 -2px 0 var(--brand); }
.nav-grip { display: inline-flex; flex: 0 0 auto; color: var(--muted); font-size: 13px; cursor: grab; touch-action: none; }
.nav-move-buttons { display: inline-flex; margin-left: auto; opacity: 0; transition: opacity .12s ease; }
.nav-movable:hover .nav-move-buttons, .nav-movable:focus-within .nav-move-buttons { opacity: 1; }
.nav-move-buttons + .nav-edit-toggle { margin-left: 0; }
.nav-drop-end { display: none; margin: 2px 0 6px; border: 1px dashed var(--line-dark); border-radius: var(--radius); padding: 8px 10px; color: var(--muted); font-size: 11px; text-align: center; }
.nav-editing.sorting .nav-drop-end, .nav-drop-end.empty { display: block; }
.nav-drop-end.drop-target { border-color: var(--brand); color: var(--brand-text); background: var(--brand-soft); }
/* The copy of the row that follows the pointer while dragging. */
.sort-ghost { border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-modal); opacity: .95; cursor: grabbing; }
.sort-ghost .nav-move-buttons, .sort-ghost .nav-edit-toggle { visibility: hidden; }
@media (hover: none) { .nav-move-buttons { opacity: 1; } }
.nav-quick-actions { display: flex; flex-direction: column; gap: 3px; }
.nav-quick-actions .nav-link { min-height: 34px; font-size: 12px; }
.nav-info-value { margin-left: auto; color: var(--brand-text); font-size: 12px; font-weight: 800; }

.sidebar-footer { display: flex; flex-direction: column; gap: 10px; margin: 0 -14px -14px; border-top: 1px solid var(--line); padding: 12px 14px 12px; background: var(--sidebar); }
.sidebar-user { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: var(--radius); padding: 6px; color: var(--ink); background: transparent; text-align: left; }
.sidebar-user:hover { background: var(--hover); }
.sidebar-user > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sidebar-user strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-actions { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.sidebar-actions .icon-button { position: relative; width: 34px; height: 34px; border-color: transparent; color: var(--muted-dark); background: transparent; }
.sidebar-actions .icon-button:hover { border-color: var(--line-dark); color: var(--brand); background: var(--panel); }
.sidebar-actions .icon-button.offline { color: var(--danger); }
.sidebar-version { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.icon-badge { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--sidebar); border-radius: 9px; padding: 0 3px; color: #fff; background: var(--danger); font-size: 9px; font-weight: 800; line-height: 1; }
.ai-glyph { color: #8b5cf6; }

.avatar { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; color: #fff; background: var(--brand-fill); font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.small { width: 24px; height: 24px; flex-basis: 24px; font-size: 9px; }
.avatar.large { width: 44px; height: 44px; flex-basis: 44px; font-size: 13px; }
.avatar.accent { background: var(--brand); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { border: 2px solid var(--panel); }
.avatar-stack .avatar + .avatar { margin-left: -8px; }

.main-content { min-width: 0; flex: 1; }
.admin-shell, .workspace-shell { max-width: none; min-height: 100vh; margin: 0 auto; padding: 32px 40px 32px; }
.admin-shell.wide, .workspace-shell.wide { max-width: none; }
.admin-shell.narrow { max-width: 980px; }
.admin-shell.flush { padding: 0; }

.mobile-navigation { display: none; }
.mobile-navigation-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--line); padding: 8px 14px; background: var(--sidebar); }
.mobile-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--brand-text); font-size: 15px; font-weight: 800; }
.mobile-brand img { width: 28px; height: 28px; object-fit: contain; }
.mobile-menu-toggle { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); padding: 7px 11px; color: var(--brand-text); background: var(--panel); font-size: 12px; font-weight: 700; }
.mobile-workspace-menu { max-height: calc(100vh - 56px); overflow-y: auto; border-bottom: 1px solid var(--line); padding: 14px; background: var(--sidebar); box-shadow: var(--shadow-raised); }
.mobile-workspace-menu .brand-lockup, .mobile-workspace-menu .context-indicator { display: none; }
.mobile-workspace-menu .sidebar-footer { margin: 16px 0 0; padding: 12px 0 0; }

@media (max-width: 900px) {
    .app-shell { display: block; }
    .app-shell > .sidebar { display: none; }
    .mobile-navigation { position: sticky; top: 0; z-index: 60; display: block; }
    .admin-shell, .workspace-shell { padding: 20px 16px 28px; }
    .admin-header { flex-direction: column; }
    h1 { font-size: 24px; }
}

/* ---------- Page structure ---------- */
/* A list page whose table fills the window: the heading stays in place and the table scrolls inside its panel,
   with the pager always visible. The grid's "Fit" rows option measures this height. */
.admin-shell:has(> .list-workspace), .admin-shell:has(> .list-grid-page) { display: flex; flex-direction: column; height: 100vh; min-height: 560px; padding-bottom: 20px; }
.list-workspace, .list-grid-page { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; width: 100%; }
.list-workspace > .admin-header { flex: 0 0 auto; padding-bottom: 18px; }
.list-workspace > .admin-table-panel, .list-workspace > .workspace-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }
/* Only the table (or grid, or its empty state) takes the spare height; toolbars and pagers keep their natural size. */
.list-workspace > .admin-table-panel > *, .list-grid-page > * { flex: 0 0 auto; min-height: 0; }
.list-workspace > .admin-table-panel > :is(:only-child, .maintrak-grid-shell, .data-table-wrap, .empty-admin-state),
.list-grid-page > :is(:only-child, .maintrak-grid-shell, .data-table-wrap, .empty-admin-state) { flex: 1 1 auto; }
.list-workspace > .admin-table-panel > .data-table-wrap { overflow: auto; }
@media (max-width: 900px) { .admin-shell:has(> .list-workspace), .admin-shell:has(> .list-grid-page) { height: auto; min-height: 0; } }

.admin-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 26px; }
.admin-header > div:first-child { min-width: 0; }
.admin-header h1 { margin-top: 8px; }
.admin-header p { max-width: 640px; margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.admin-header-main { display: flex; align-items: center; gap: 18px; min-width: 0; }
.admin-header-main > div:last-child { min-width: 0; }
.admin-header-media { flex: 0 0 auto; }
.admin-header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.admin-header .back-link { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; color: var(--muted-dark); font-size: 11px; font-weight: 700; text-decoration: none; }
.admin-header .back-link:hover { color: var(--brand); }
button.back-link { border: 0; padding: 0; background: none; font-family: inherit; line-height: inherit; cursor: pointer; }
.section-kicker { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 1.45px; text-transform: uppercase; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb-slash { color: var(--brand); }
.heading-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.workflow-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.workflow-nav a, .workflow-nav button { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: var(--radius); padding: 9px 13px; color: var(--muted-dark); background: transparent; font-size: 13px; font-weight: 600; text-decoration: none; }
.workflow-nav a:hover, .workflow-nav button:hover { color: var(--ink); background: var(--hover); }
.workflow-nav a.active, .workflow-nav button.active { color: var(--brand-text); background: var(--brand-soft); }

.admin-content-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .75fr); gap: 20px; align-items: start; }
.split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sidebar-grid { display: grid; grid-template-columns: minmax(250px, .62fr) minmax(0, 1.8fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .admin-content-grid, .split-grid, .sidebar-grid { grid-template-columns: 1fr; } }

/* ---------- Panels ---------- */
.admin-panel, .panel { min-width: 0; border: 1px solid var(--line); padding: 20px; background: var(--panel); box-shadow: var(--shadow); }
.panel.flat { box-shadow: none; }
.panel.tight { padding: 14px; }
.panel.flush, .admin-table-panel { min-width: 0; padding: 0; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.panel.subtle { border-color: var(--line); background: var(--panel-alt); box-shadow: none; }
.panel + .panel, .admin-panel + .admin-panel, .admin-table-panel + .admin-table-panel, .panel + .admin-table-panel, .admin-table-panel + .panel { margin-top: 20px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.panel-heading h2 { margin-top: 5px; font-size: 17px; }
.panel-heading h3 { margin-top: 4px; }
.panel-heading p { max-width: 680px; margin-top: 6px; color: var(--muted-dark); font-size: 12px; line-height: 1.5; }
.panel-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.panel-heading + * { margin-top: 16px; }
.panel-body { padding: 18px 20px; }
.panel-footer { display: flex; align-items: center; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); padding: 12px 20px; }
/* A panel with its own header, body and action rows (the shape of the old cards). */
.panel.panel-card { display: flex; flex-direction: column; padding: 0; }
.panel-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.panel-card-title { flex: 1 1 auto; min-width: 0; }
.panel-card-avatar { flex: 0 0 auto; }
.panel-card-body { flex: 1 1 auto; min-width: 0; padding: 14px 20px 18px; }
.panel-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 20px 16px; }
.feature-panel { min-width: 0; border: 1px solid var(--brand-soft-line); padding: 22px; background: var(--brand-soft); }
.feature-panel h2 { margin-top: 8px; color: var(--brand-text); font-size: 20px; letter-spacing: -.3px; }
.feature-panel p { margin-top: 10px; color: var(--muted-dark); font-size: 12px; line-height: 1.6; }
.detail-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 22px; }
.detail-section-heading h3 { margin-top: 4px; }

.admin-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); box-shadow: var(--shadow); }
.admin-metrics > div, .admin-metrics > button, .admin-metrics > a { min-height: 104px; display: flex; flex-direction: column; gap: 6px; border: 0; padding: 16px 18px; color: inherit; background: var(--panel); text-align: left; text-decoration: none; }
.admin-metrics > button:hover, .admin-metrics > a:hover { background: var(--panel-alt); }
.admin-metrics span, .admin-metrics small { color: var(--muted); font-size: 11px; }
.admin-metrics strong { color: var(--brand-text); font-size: 25px; line-height: 1.1; }
.admin-metrics .metric-alert strong { color: var(--danger); }
.admin-metrics .metric-warning strong { color: var(--warning); }
.admin-metrics + * { margin-top: 20px; }

.fact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.fact-grid > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; background: var(--panel-alt); }
.fact-grid span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
/* Facts are a record's details (an email, a phone number, an address): always shown in full, wrapping if need be. */
.fact-grid strong { min-width: 0; color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
.fact-grid strong.wrap { white-space: normal; overflow-wrap: anywhere; }
.fact-grid > .wide { grid-column: 1 / -1; }
.definition-list { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 12px; }
.definition-list dt { color: var(--muted); font-weight: 700; }
.definition-list dd { min-width: 0; margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }

/* ---------- Buttons ---------- */
.primary-action, .secondary-action { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: var(--radius-sm); padding: 9px 14px; font-size: 12px; font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.primary-action { border: 1px solid transparent; color: #fff; background: var(--brand-fill); }
.primary-action:hover:not(:disabled) { color: #fff; background: var(--brand-fill-hover); }
.secondary-action { border: 1px solid var(--line-dark); color: var(--brand-text); background: var(--panel); }
.secondary-action:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.secondary-action[aria-pressed="true"], .secondary-action.active { border-color: var(--brand); color: var(--brand-text); background: var(--brand-soft); }
.primary-action .ui-icon, .secondary-action .ui-icon, .text-action .ui-icon { font-size: 15px; }
.primary-action.danger-action, .primary-action.danger { color: #fff; background: var(--danger); }
.primary-action.danger-action:hover:not(:disabled), .primary-action.danger:hover:not(:disabled) { background: #963a33; }
.secondary-action.danger-action, .secondary-action.danger { color: var(--danger); }
.secondary-action.danger-action:hover:not(:disabled), .secondary-action.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.primary-action.warning { background: var(--warning); }
.primary-action.info { background: var(--info); }
.danger-action { color: var(--danger); }
.compact-action { min-height: 30px !important; padding: 6px 10px !important; font-size: 11px !important; }
.compact-action .ui-icon { font-size: 13px !important; }
.block-action { width: 100%; }
.text-action { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 0; color: var(--brand); background: transparent; font-size: 12px; font-weight: 800; text-decoration: none; }
.text-action:hover:not(:disabled) { color: var(--brand-text); text-decoration: underline; }
.text-action.danger { color: var(--danger); }
.text-action.muted { color: var(--muted-dark); }
.icon-button { width: 32px; height: 32px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid var(--line-dark); border-radius: 5px; padding: 0; color: var(--brand); background: var(--panel); font-size: 15px; line-height: 0; text-decoration: none; }
.icon-button:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); }
.icon-button.subtle { border-color: transparent; color: var(--muted-dark); background: transparent; }
.icon-button.subtle:hover:not(:disabled) { color: var(--brand); background: var(--hover); border-color: transparent; }
.icon-button.compact, .icon-button.sm { width: 26px; height: 26px; font-size: 13px; }
.icon-button.lg { width: 40px; height: 40px; font-size: 18px; }
.icon-button.danger { color: var(--danger); }
.icon-button.danger:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-soft); }
.icon-button.active, .icon-button[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-text); background: var(--brand-soft); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.button-row.end { justify-content: flex-end; }
.segmented { display: inline-flex; overflow: hidden; border: 1px solid var(--line-dark); border-radius: 5px; background: var(--panel); }
.segmented button { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-right: 1px solid var(--line); padding: 0 11px; color: var(--muted-dark); background: transparent; font-size: 11px; font-weight: 700; }
.segmented button:last-child { border-right: 0; }
.segmented button:hover:not(:disabled) { color: var(--brand-text); background: var(--hover); }
.segmented button.active, .segmented button[aria-pressed="true"] { color: var(--brand-text); background: var(--brand-soft); }
/* A count inside a segment, such as how many requests wait in a tab. */
.segmented-count { min-width: 18px; border-radius: 999px; padding: 0 6px; color: var(--ink-soft); background: var(--line); font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; }
.segmented button.active .segmented-count, .segmented button[aria-pressed="true"] .segmented-count { color: #fff; background: var(--brand); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 15px; }
.form-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid.auto { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.form-grid + .form-grid { margin-top: 14px; }
@media (max-width: 760px) { .form-grid, .form-grid.cols-3, .form-grid.cols-4 { grid-template-columns: 1fr; } }
.form-section { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.form-section:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.form-section > h3 { margin-bottom: 12px; }
.form-field { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; margin: 0; color: var(--muted-dark); font-size: 11px; font-weight: 700; }
.form-field.wide { grid-column: 1 / -1; }
.form-field > .field-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.form-field > .field-label .required { color: var(--danger); }
.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), .form-field select, .form-field textarea, .input-affix, .native-input { width: 100%; min-height: 38px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); outline: 0; padding: 8px 10px; color: var(--ink); background: var(--field); font-size: 13px; font-weight: 400; }
.form-field textarea { min-height: 76px; resize: vertical; line-height: 1.45; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .input-affix:focus-within, .native-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: 0; }
.form-field input:disabled, .form-field select:disabled, .form-field textarea:disabled, .input-affix.disabled { color: var(--muted); background: var(--hover); cursor: not-allowed; }
.form-field input[readonly], .form-field textarea[readonly] { background: var(--panel-alt); }
.form-field input::placeholder, .form-field textarea::placeholder, .native-input::placeholder { color: var(--muted); opacity: .8; }
.form-field input[type="color"] { width: 44px; height: 34px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); padding: 2px; background: var(--field); }
.form-field.dense input:not([type="checkbox"]):not([type="radio"]), .form-field.dense select, .form-field.dense .input-affix { min-height: 32px; padding-top: 5px; padding-bottom: 5px; font-size: 12px; }
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea, .form-field.invalid .input-affix { border-color: var(--danger); }
.form-field.invalid input:focus, .form-field.invalid .input-affix:focus-within { box-shadow: 0 0 0 3px var(--danger-soft); }
.field-help { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.4; }
.field-error { color: var(--danger); font-size: 11px; font-weight: 600; }
.field-counter { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 400; }
.input-affix { display: flex; align-items: center; gap: 7px; padding-top: 0 !important; padding-bottom: 0 !important; }
.input-affix > input, .input-affix > textarea { min-width: 0; flex: 1; min-height: 36px !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
.input-affix > .ui-icon { color: var(--brand); font-size: 15px; }
.input-affix > .affix-text { color: var(--muted-dark); font-size: 12px; white-space: nowrap; }
.input-affix > button { display: inline-flex; align-items: center; border: 0; padding: 4px; color: var(--muted); background: transparent; font-size: 14px; line-height: 0; }
.input-affix > button:hover { color: var(--brand); }
.input-affix.textarea { align-items: flex-start; padding-top: 8px !important; padding-bottom: 8px !important; }
.form-error { display: flex; align-items: center; gap: 8px; margin-top: 14px; border: 1px solid var(--warning-line); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--warning); background: var(--warning-soft); font-size: 12px; font-weight: 700; }
.form-error .ui-icon { font-size: 16px; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }

.check-field, .switch-field, .radio-field { position: relative; display: inline-flex; align-items: flex-start; gap: 9px; margin: 0; color: var(--ink-soft); font-size: 12px; font-weight: 600; cursor: pointer; }
.check-field.disabled, .switch-field.disabled, .radio-field.disabled { cursor: not-allowed; opacity: .6; }
.check-field input, .radio-field input { width: 16px; height: 16px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--brand); cursor: inherit; }
.check-field > span, .switch-field > span:last-child, .radio-field > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.check-field small, .switch-field small, .radio-field small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.35; }
.switch-field input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { position: relative; width: 34px; height: 20px; flex: 0 0 34px; border-radius: 10px; background: var(--line-dark); transition: background .15s ease; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
.switch-field input:checked + .switch-track { background: var(--brand); }
.switch-field input:checked + .switch-track::after { transform: translateX(14px); }
.switch-field input:focus-visible + .switch-track { outline: 3px solid var(--brand-ring); outline-offset: 2px; }
.settings-toggle { display: flex; align-items: flex-start; gap: 11px; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 13px; background: var(--panel-alt); cursor: pointer; }
.settings-toggle:hover { border-color: var(--brand-soft-line); }
.settings-toggle input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--brand); }
.settings-toggle > span { display: flex; flex-direction: column; gap: 3px; }
.settings-toggle strong { color: var(--ink-soft); font-size: 12px; }
.settings-toggle small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.radio-group { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.radio-group.vertical { flex-direction: column; }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px; }
.choice-card { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 11px 12px; color: var(--ink-soft); background: var(--panel); text-align: left; cursor: pointer; }
.choice-card:hover { border-color: var(--brand); }
.choice-card.selected, .choice-card[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.choice-card > span { display: flex; flex-direction: column; gap: 3px; }
.choice-card strong { font-size: 12px; }
.choice-card small { color: var(--muted); font-size: 11px; }

.admin-search, .search-box { min-width: 190px; height: 34px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); padding: 0 9px; color: var(--brand); background: var(--field); }
.search-box { height: 38px; }
.admin-search:focus-within, .search-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.admin-search input, .search-box input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.admin-search input::placeholder, .search-box input::placeholder { color: var(--muted); }
.admin-search button, .search-box button { display: inline-flex; border: 0; padding: 2px; color: var(--muted); background: transparent; line-height: 0; }

/* Autocomplete and multi-select dropdowns */
.combo { position: relative; }
.combo-panel { position: absolute; z-index: 70; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); padding: 4px; background: var(--panel); box-shadow: var(--shadow-raised); }
.combo-option { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 3px; padding: 7px 9px; color: var(--ink-soft); background: transparent; font-size: 12px; font-weight: 500; text-align: left; }
.combo-option:hover, .combo-option.active { color: var(--brand-text); background: var(--brand-soft); }
.combo-option.selected { font-weight: 700; }
.combo-option input { accent-color: var(--brand); }
.combo-empty { padding: 10px; color: var(--muted); font-size: 12px; font-weight: 400; }
.select-trigger { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--ink); background: var(--field); font-size: 13px; font-weight: 400; text-align: left; }
.select-trigger:focus-visible, .select-trigger[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: 0; }
.select-trigger > span:first-child { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger .placeholder { color: var(--muted); }
.select-trigger .ui-icon { color: var(--muted); }

/* ---------- Tables ---------- */
.table-toolbar { min-height: 64px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; border-bottom: 1px solid var(--line); padding: 12px 18px; }
.table-toolbar > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.table-toolbar > .segmented:first-child { display: inline-flex; flex-direction: row; gap: 0; }
.table-toolbar strong { color: var(--ink); font-size: 13px; }
.table-toolbar > div:first-child > span { color: var(--muted); font-size: 11px; }
.table-toolbar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.data-table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--muted); background: var(--panel); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 11px 14px; border-top: 1px solid var(--line); color: var(--ink-soft); vertical-align: middle; }
.data-table tbody tr:first-child td { border-top: 0; }
.data-table td strong { color: var(--ink); }
.data-table td small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.data-table.dense th { padding: 8px 10px; }
.data-table.dense td { padding: 7px 10px; }
.data-table.hover tbody tr:hover td, .data-table tbody tr.clickable:hover td { background: var(--panel-alt); }
.data-table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr.selected td { background: var(--brand-soft); }
.data-table.sticky-head thead th { position: sticky; top: 0; z-index: 1; }
.data-table .numeric, .data-table .text-right { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .actions { width: 1%; text-align: right; white-space: nowrap; }
.data-table .actions > * + * { margin-left: 4px; }
.data-table tfoot td { border-top: 1px solid var(--line-dark); font-weight: 700; }
.data-table th button.sort { display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 0; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.data-table th button.sort:hover { color: var(--brand); }
.table-empty { padding: 34px 20px !important; color: var(--muted) !important; text-align: center; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 10px 16px; color: var(--muted-dark); font-size: 12px; }
.pager-controls { display: flex; align-items: center; gap: 4px; }
.pager select { min-height: 30px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); padding: 3px 6px; color: var(--ink); background: var(--field); font-size: 12px; }
/* Phones: each row of a data-table becomes a card of "label value" lines, so lists never scroll sideways. The labels
   are the column headings, copied onto the cells as data-label by maintrak-ui.js. The first column is the card's title
   (the second when the first has no heading, such as a checkbox), with the actions cell beside it. Add no-stack to a
   table that must stay a grid (an editable grid, a small key/value table): it scrolls sideways instead. Tables
   without a thead are left alone. 700px is also the breakpoint in maintrak-ui.js and MainTrakGrid.razor.css. */
@media (max-width: 700px) {
    .data-table:not(.no-stack):has(> thead) { display: block; width: 100%; min-width: 0; }
    .data-table:not(.no-stack):has(> thead) > thead { display: none; }
    .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) { display: block; }
    .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; border-top: 1px solid var(--line); padding: 10px 14px; }
    .data-table:not(.no-stack):has(> thead) > tbody > tr:first-child { border-top: 0; }
    .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) > tr > :is(td, th) { order: 3; flex: 0 0 100%; min-width: 0; width: auto; max-width: none; border: 0; padding: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
    .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) > tr > :empty { display: none; }
    .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) > tr > [data-label]::before { content: attr(data-label); display: inline-block; min-width: 92px; margin-right: 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
    .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) > tr > :first-child:not([data-label]) { order: 1; flex: 0 0 auto; }
    .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) > tr > :first-child[data-label], .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) > tr > :first-child:not([data-label]) + * { order: 1; flex: 1 1 160px; color: var(--ink); font-size: 13px; font-weight: 600; }
    .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) > tr > :first-child[data-label]::before, .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) > tr > :first-child:not([data-label]) + [data-label]::before { display: none; }
    .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) > tr > td.actions { order: 2; flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; margin-left: auto; }
    .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) > tr > td.actions[data-label]::before { display: none; }
    .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) > tr > td.actions > * + * { margin-left: 0; }
    .data-table:not(.no-stack):has(> thead) > :is(tbody, tfoot) > tr > .table-empty:first-child { flex: 1 1 100%; color: var(--muted); font-size: 12px; font-weight: 400; text-align: center; }
    /* The cells keep their hover and selected tints; the card gets the same tint so it reads as one block. */
    .data-table:not(.no-stack):has(> thead) > tbody > tr.selected { background: var(--brand-soft); }
    .data-table.hover:not(.no-stack):has(> thead) > tbody > tr:hover, .data-table:not(.no-stack):has(> thead) > tbody > tr.clickable:hover { background: var(--panel-alt); }
}
}

/* ---------- Tags, chips, badges ---------- */
.table-tag, .tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border-radius: 3px; padding: 3px 7px; color: var(--brand-text); background: var(--brand-soft); font-size: 10px; font-weight: 800; letter-spacing: .2px; line-height: 1.3; white-space: nowrap; }
.tag .ui-icon, .table-tag .ui-icon { font-size: 11px; }
.tag.neutral, .table-tag.neutral { color: var(--muted-dark); background: var(--hover); }
.tag.info, .table-tag.info { color: var(--info); background: var(--info-soft); }
.tag.success, .table-tag.success { color: var(--success); background: var(--success-soft); }
.tag.warning, .table-tag.warning { color: var(--warning); background: var(--warning-soft); }
.tag.danger, .table-tag.danger { color: var(--danger); background: var(--danger-soft); }
.tag.purple, .table-tag.purple { color: var(--purple); background: var(--purple-soft); }
.tag.outline { border: 1px solid currentColor; background: transparent; }
.tag.solid { color: #fff; background: var(--brand-fill); }
.tag.large { padding: 5px 9px; font-size: 11px; }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; border: 1px solid transparent; border-radius: 14px; padding: 4px 11px; color: var(--muted-dark); background: var(--hover); font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
button.chip:hover, a.chip:hover { color: var(--brand-text); background: var(--brand-soft); }
.chip.selected, .chip[aria-pressed="true"] { color: #fff; background: var(--brand-fill); }
.chip.outline { border-color: var(--line-dark); background: var(--panel); }
/* Outlined chips still show as selected: the outline rule above would otherwise leave white text on a white chip. */
.chip.outline.selected, .chip.outline[aria-pressed="true"] { border-color: var(--brand-fill); color: #fff; background: var(--brand-fill); }
button.chip.selected:hover, button.chip[aria-pressed="true"]:hover { border-color: var(--brand-fill-hover); color: #fff; background: var(--brand-fill-hover); }
.chip.small { min-height: 22px; padding: 2px 8px; font-size: 10px; }
.chip .chip-remove { display: inline-flex; margin-right: -4px; border: 0; padding: 1px; color: inherit; background: transparent; opacity: .7; line-height: 0; }
.chip .chip-remove:hover { opacity: 1; }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; min-height: 18px; border-radius: 9px; padding: 1px 6px; color: var(--brand-text); background: var(--brand-soft); font-size: 10px; font-weight: 800; }
.count-badge.alert { color: #fff; background: var(--danger); }
.colour-swatch { width: 14px; height: 14px; display: inline-block; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.12); border-radius: 3px; vertical-align: middle; }

/* ---------- Callouts ---------- */
.callout { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--info-line); border-radius: 5px; padding: 11px 13px; color: var(--ink-soft); background: var(--info-soft); font-size: 12px; line-height: 1.5; }
.callout > .ui-icon { flex: 0 0 auto; margin-top: 1px; color: var(--info); font-size: 16px; }
.callout > .callout-body { min-width: 0; flex: 1; }
.callout strong { color: var(--ink); }
.callout.success { border-color: var(--success-line); background: var(--success-soft); }
.callout.success > .ui-icon { color: var(--success); }
.callout.warning { border-color: var(--warning-line); background: var(--warning-soft); }
.callout.warning > .ui-icon { color: var(--warning); }
.callout.danger, .callout.error { border-color: var(--danger-line); background: var(--danger-soft); }
.callout.danger > .ui-icon, .callout.error > .ui-icon { color: var(--danger); }
.callout.neutral { border-color: var(--line); background: var(--panel-alt); }
.callout.neutral > .ui-icon { color: var(--muted-dark); }
.callout.dense { padding: 7px 10px; font-size: 11px; }
.callout .callout-close { margin: -3px -5px -3px 0; }
.callout + *, * + .callout { margin-top: 12px; }

/* ---------- Tabs ---------- */
.tab-strip, .view-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tab-strip::-webkit-scrollbar { display: none; }
.tab-strip button, .view-tab { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-bottom: 2px solid transparent; padding: 0 14px; color: var(--muted-dark); background: transparent; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tab-strip button:hover:not(:disabled), .view-tab:hover { color: var(--brand-text); background: var(--hover); }
.tab-strip button.active, .view-tab.active { border-bottom-color: var(--brand); color: var(--brand-text); }
.tab-strip button .ui-icon { font-size: 15px; }
.tab-strip .tab-badge { min-width: 20px; border-radius: 10px; padding: 2px 6px; color: var(--brand-text); background: var(--brand-soft); font-size: 10px; text-align: center; }
.tab-strip.pills { gap: 4px; border-bottom: 0; }
.tab-strip.pills button { min-height: 34px; border-bottom: 0; border-radius: var(--radius); padding: 0 12px; }
.tab-strip.pills button.active { background: var(--brand-soft); }
.tab-toolbar { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.tab-panel { padding-top: 18px; }
.tab-panel.flush { padding-top: 0; }
.tabs-vertical { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.tabs-vertical > .tab-strip { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--line); overflow: visible; }
.tabs-vertical > .tab-strip button { justify-content: flex-start; min-height: 38px; border-bottom: 0; border-right: 2px solid transparent; }
.tabs-vertical > .tab-strip button.active { border-right-color: var(--brand); background: var(--brand-soft); }
.tabs-vertical > .tab-panel { padding-top: 0; }
@media (max-width: 800px) { .tabs-vertical { grid-template-columns: 1fr; } .tabs-vertical > .tab-strip { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; } }

/* ---------- Menus and popovers ---------- */
.popover-anchor { position: relative; display: inline-flex; }
.popover-panel { position: fixed; z-index: 1300; min-width: 180px; max-width: min(420px, calc(100vw - 16px)); max-height: min(460px, calc(100vh - 16px)); overflow-y: auto; border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 5px; color: var(--ink); background: var(--panel); box-shadow: var(--shadow-raised); visibility: hidden; }
.popover-panel.positioned { visibility: visible; animation: pop-in .12s ease; }
.popover-panel.padded { padding: 14px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.menu-item { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 4px; padding: 7px 10px; color: var(--ink-soft); background: transparent; font-size: 12px; font-weight: 600; text-align: left; text-decoration: none; white-space: nowrap; }
.menu-item:hover:not(:disabled), .menu-item:focus-visible { color: var(--brand-text); background: var(--brand-soft); outline: 0; }
.menu-item .ui-icon { color: var(--muted-dark); font-size: 15px; }
.menu-item:hover .ui-icon { color: var(--brand); }
.menu-item.danger, .menu-item.danger .ui-icon { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-soft); }
.menu-item.active { color: var(--brand-text); background: var(--brand-soft); }
.menu-item .menu-item-hint { margin-left: auto; padding-left: 16px; color: var(--muted); font-size: 10px; font-weight: 600; }
.menu-divider { height: 1px; margin: 5px 4px; background: var(--line); }
.menu-header { padding: 7px 10px 4px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }

/* ---------- Tooltip ---------- */
.mt-tooltip { position: fixed; z-index: 2000; max-width: 320px; border-radius: 4px; padding: 6px 9px; color: #fff; background: rgba(20, 30, 24, .94); box-shadow: 0 6px 16px rgba(0,0,0,.18); font-size: 11px; font-weight: 600; line-height: 1.35; pointer-events: none; opacity: 0; transition: opacity .1s ease; white-space: pre-line; }
.mt-tooltip.visible { opacity: 1; }
[data-theme="dark"] .mt-tooltip { color: var(--ink); background: #2a352e; }
.tooltip-wrap { display: inline-flex; }

/* ---------- Modals ---------- */
.modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--overlay); animation: fade-in .14s ease; }
.modal-backdrop.stacked { background: rgba(0,0,0,.22); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-panel { position: relative; width: min(720px, 100%); max-width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-modal); animation: modal-in .16s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-panel.sm { width: min(460px, 100%); }
.modal-panel.md { width: min(720px, 100%); }
.modal-panel.lg { width: min(980px, 100%); }
.modal-panel.xl { width: min(1280px, 100%); }
.modal-panel.full { width: calc(100vw - 48px); height: calc(100vh - 48px); }
.modal-panel.resizable { resize: both; }
.modal-header { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: flex-start; gap: 18px; border-bottom: 1px solid var(--line); padding: 18px 22px 14px; }
.modal-header.draggable { cursor: move; user-select: none; }
.modal-header h2 { margin-top: 4px; font-size: 19px; }
.modal-header > div > small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.modal-body { min-height: 0; flex: 1; overflow: auto; padding: 20px 22px 22px; }
.modal-panel.no-header .modal-body { padding-top: 22px; }
.modal-body.flush { padding: 0; }
.modal-intro { color: var(--muted-dark); font-size: 13px; line-height: 1.5; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.modal-footer { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); padding: 13px 22px; background: var(--panel-alt); }
.modal-body > .modal-actions:last-child { position: sticky; bottom: -22px; margin-bottom: -22px; padding-bottom: 16px; background: var(--panel); }
.confirm-message { color: var(--ink-soft); font-size: 13px; line-height: 1.55; white-space: pre-line; }
@media (max-width: 640px) {
    .modal-backdrop { align-items: flex-end; padding: 0; }
    .modal-panel, .modal-panel.sm, .modal-panel.lg, .modal-panel.xl, .modal-panel.full { width: 100% !important; max-height: 94vh; height: auto; border-radius: 10px 10px 0 0; }
}
.drawer-backdrop { justify-content: flex-end; align-items: stretch; padding: 0; }
.drawer-backdrop .modal-panel { width: min(560px, 100%); max-height: none; height: 100vh; border-radius: 0; animation: drawer-in .18s ease; }
@keyframes drawer-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; z-index: 2100; right: 22px; bottom: 22px; width: min(400px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 9px; pointer-events: none; }
.toast-notice { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--info-line); border-radius: 5px; padding: 11px 12px; color: var(--ink-soft); background: var(--panel); box-shadow: var(--shadow-raised); font-size: 12px; font-weight: 600; line-height: 1.45; pointer-events: auto; animation: toast-in .18s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast-notice.leaving { animation: toast-out .18s ease forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }
.toast-check { width: 20px; height: 20px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: var(--info); font-size: 11px; }
.toast-message { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.toast-notice.success { border-color: var(--success-line); }
.toast-notice.success .toast-check { background: var(--success); }
.toast-notice.warning { border-color: var(--warning-line); }
.toast-notice.warning .toast-check { background: var(--warning); }
.toast-notice.error { border-color: var(--danger-line); }
.toast-notice.error .toast-check { background: var(--danger); }
.toast-notice.normal .toast-check { background: var(--muted-dark); }
.toast-notice > button { display: inline-flex; margin: -2px -2px 0 0; border: 0; padding: 2px; color: var(--muted); background: transparent; line-height: 0; }
.toast-notice > button:hover { color: var(--ink); }
.toast-notice.clickable { cursor: pointer; }

/* ---------- Loading ---------- */
.loading-spinner, .spinner { width: 22px; height: 22px; display: inline-block; flex: 0 0 auto; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .9s linear infinite; }
.spinner.small { width: 14px; height: 14px; border-width: 2px; }
.spinner.large { width: 38px; height: 38px; border-width: 3px; }
.primary-action .spinner { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-state { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 12px; }
.loading-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.progress-bar { position: relative; width: 100%; height: 6px; overflow: hidden; border-radius: 3px; background: var(--line); }
.progress-bar > span { position: absolute; inset: 0 auto 0 0; display: block; border-radius: inherit; background: var(--brand); transition: width .25s ease; }
.progress-bar.indeterminate > span { width: 40% !important; animation: progress-slide 1.2s ease-in-out infinite; }
.progress-bar.large { height: 10px; border-radius: 5px; }
.progress-bar.warning > span { background: var(--warning); }
.progress-bar.danger > span { background: var(--danger); }
.progress-bar.info > span { background: var(--info); }
@keyframes progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.skeleton { width: 100%; min-width: 0; animation: skeleton-in .25s ease .12s both; }
.skeleton-framed { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.skeleton-bar, .skeleton-block, .skeleton-thumb { display: block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--hover) 0%, var(--panel-alt) 45%, var(--hover) 90%); background-size: 300% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.skeleton-bar-sm { height: 8px; }
.skeleton-bar-lg { height: 20px; }
.skeleton-block { height: 150px; border-radius: 6px; }
.skeleton-thumb { width: 44px; height: 44px; border-radius: 6px; }
.skeleton-toolbar { min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.skeleton-list-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.skeleton-lines { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.skeleton-end { align-items: flex-end; }
.skeleton-table { display: grid; }
.skeleton-table-head { padding: 14px 16px; }
.skeleton-table-cell { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-height: 46px; padding: 12px 16px; border-top: 1px solid var(--line); }
.skeleton-panel { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.skeleton-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); }
.skeleton-metrics > div { min-height: 104px; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 17px 19px; background: var(--panel); }
.skeleton-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 11px; }
.skeleton-card { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.skeleton-card .skeleton-block { height: 100px; border-radius: 0; }
.skeleton-card .skeleton-lines { padding: 12px 11px 14px; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -200% 0; } }
@keyframes skeleton-in { from { opacity: 0; } to { opacity: 1; } }
.is-refreshing { opacity: .55; transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) { .skeleton, .skeleton-bar, .skeleton-block, .skeleton-thumb, .popover-panel, .modal-panel, .toast-notice { animation: none; } }

.global-loading { position: fixed; z-index: 5000; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: color-mix(in srgb, var(--canvas) 78%, transparent); backdrop-filter: blur(2px); }
.global-loading-card { min-width: 260px; max-width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1px solid var(--line); padding: 22px 26px; background: var(--panel); box-shadow: var(--shadow-raised); text-align: center; }
.global-loading-card img { width: 46px; height: 46px; object-fit: contain; animation: pulse 1.4s ease-in-out infinite; }
.global-loading-card strong { color: var(--ink); font-size: 14px; }
.global-loading-card small { color: var(--muted); font-size: 11px; }
@keyframes pulse { 50% { transform: scale(.92); opacity: .75; } }

/* ---------- Empty and restricted states ---------- */
.empty-admin-state, .empty-state { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px; color: var(--muted); text-align: center; }
.empty-admin-state > .ui-icon, .empty-state > .ui-icon { color: var(--brand); font-size: 26px; }
.empty-admin-state strong, .empty-state strong { color: var(--ink-soft); font-size: 14px; }
.empty-admin-state span, .empty-state span, .empty-admin-state p { max-width: 460px; font-size: 12px; line-height: 1.5; }
.empty-admin-state .button-row { justify-content: center; margin-top: 8px; }
.empty-admin-state.compact { min-height: 110px; padding: 16px; }
.access-denied-panel { max-width: 560px; margin: 60px auto; display: flex; flex-direction: column; align-items: center; gap: 10px; border: 1px solid var(--line); padding: 34px; background: var(--panel); box-shadow: var(--shadow); text-align: center; }
.access-denied-panel > .ui-icon { color: var(--warning); font-size: 30px; }
.access-denied-panel p { color: var(--muted-dark); font-size: 13px; }

/* ---------- Accordion, stepper, timeline, tree ---------- */
.accordion { border: 1px solid var(--line); background: var(--panel); }
.accordion-item + .accordion-item { border-top: 1px solid var(--line); }
.accordion-item > summary, .accordion-header { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 16px; color: var(--ink-soft); font-size: 13px; font-weight: 700; list-style: none; cursor: pointer; }
.accordion-item > summary::-webkit-details-marker { display: none; }
.accordion-item > summary:hover { background: var(--panel-alt); }
.accordion-item > summary .accordion-chevron { margin-left: auto; color: var(--muted); transition: transform .15s ease; }
.accordion-item[open] > summary .accordion-chevron { transform: rotate(180deg); }
.accordion-item > summary small { color: var(--muted); font-size: 11px; font-weight: 400; }
.accordion-body { border-top: 1px solid var(--line); padding: 14px 16px 16px; }

.stepper { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 22px; counter-reset: step; }
.stepper-step { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 4px 6px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; }
.stepper-step .step-index { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-dark); border-radius: 50%; color: var(--muted-dark); background: var(--panel); font-size: 11px; }
.stepper-step.active { color: var(--brand-text); }
.stepper-step.active .step-index { border-color: var(--brand); color: #fff; background: var(--brand-fill); }
.stepper-step.complete .step-index { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.stepper-step:disabled { opacity: .6; }
.stepper-separator { width: 28px; height: 1px; background: var(--line-dark); }
.stepper-actions { display: flex; justify-content: space-between; gap: 9px; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }

.timeline { position: relative; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline-item { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding-bottom: 16px; }
.timeline-item::before { content: ""; position: absolute; top: 22px; bottom: 0; left: 12px; width: 1px; background: var(--line-dark); }
.timeline-item:last-child::before { display: none; }
.timeline-point { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--brand-soft-line); border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: 13px; }
.timeline-point.warning { border-color: var(--warning-line); color: var(--warning); background: var(--warning-soft); }
.timeline-point.danger { border-color: var(--danger-line); color: var(--danger); background: var(--danger-soft); }
.timeline-point.info { border-color: var(--info-line); color: var(--info); background: var(--info-soft); }
.timeline-point.neutral { border-color: var(--line-dark); color: var(--muted-dark); background: var(--hover); }
.timeline-content { min-width: 0; padding-top: 3px; }
.timeline-content > strong { display: block; color: var(--ink-soft); font-size: 12px; }
.timeline-content > small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.timeline-content > div { margin-top: 6px; font-size: 12px; }

.tree { margin: 0; padding: 0; list-style: none; font-size: 12px; }
.tree ul { margin: 0; padding: 0 0 0 16px; list-style: none; border-left: 1px solid var(--line); margin-left: 9px; }
.tree-row { display: flex; align-items: center; gap: 6px; min-height: 30px; border-radius: 4px; padding: 3px 6px; color: var(--ink-soft); cursor: pointer; }
.tree-row:hover { background: var(--hover); }
.tree-row.selected { color: var(--brand-text); background: var(--brand-soft); font-weight: 700; }
.tree-toggle { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; color: var(--muted); background: transparent; line-height: 0; }
.tree-toggle.placeholder { visibility: hidden; }

/* ---------- File drop ---------- */
.file-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 120px; border: 1px dashed var(--brand-soft-line); border-radius: var(--radius); padding: 18px; color: var(--muted-dark); background: var(--panel-alt); font-size: 12px; text-align: center; transition: border-color .12s ease, background .12s ease; }
.file-drop.dragging, .file-drop:hover { border-color: var(--brand); background: var(--brand-soft); }
.file-drop > .ui-icon { color: var(--brand); font-size: 24px; }
.file-drop strong { color: var(--ink-soft); }
.file-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop.compact { min-height: 0; flex-direction: row; padding: 10px 14px; }

/* ---------- Rich text editor ---------- */
.rte { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); background: var(--field); }
.rte:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); padding: 5px 6px; background: var(--panel-alt); }
.rte-toolbar button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; padding: 0; color: var(--muted-dark); background: transparent; font-size: 14px; line-height: 0; }
.rte-toolbar button:hover:not(:disabled), .rte-toolbar button.active { color: var(--brand-text); background: var(--brand-soft); }
.rte-toolbar button.text-tool { width: auto; padding: 0 8px; font-size: 11px; font-weight: 700; line-height: 1; }
.rte-toolbar select { height: 28px; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; color: var(--ink-soft); background: var(--panel); font-size: 11px; }
.rte-toolbar .rte-separator { width: 1px; height: 18px; margin: 0 4px; background: var(--line-dark); }
.rte-content { min-height: 160px; max-height: 60vh; overflow: auto; padding: 12px 14px; color: var(--ink); font-size: 13px; line-height: 1.55; outline: 0; }
.rte-content:empty::before { content: attr(data-placeholder); color: var(--muted); }
.rte-content p { margin: 0 0 .6em; }
.rte-content img { max-width: 100%; height: auto; }
.rte-content table { border-collapse: collapse; }
.rte-content td, .rte-content th { border: 1px solid var(--line-dark); padding: 4px 6px; }
.rte-source { min-height: 160px; border: 0; padding: 12px 14px; color: var(--ink); background: var(--field); font-family: var(--mono); font-size: 12px; resize: vertical; outline: 0; }
.rte.disabled .rte-content { background: var(--hover); }
.html-content { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.html-content img { max-width: 100%; height: auto; }
.html-content p { margin: 0 0 .6em; }
.html-content p:last-child { margin-bottom: 0; }

/* ---------- Charts ---------- */
.chart { position: relative; width: 100%; color: var(--ink-soft); font-size: 11px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis line, .chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .axis text, .chart .axis-label { fill: var(--muted); font-size: 10px; }
.chart .value-label { fill: var(--ink-soft); font-size: 10px; font-weight: 700; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--muted-dark); font-size: 11px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; display: inline-block; border-radius: 2px; }
.chart-tooltip { position: absolute; z-index: 3; border-radius: 4px; padding: 6px 8px; color: #fff; background: rgba(20, 30, 24, .94); font-size: 11px; font-weight: 600; pointer-events: none; white-space: nowrap; transform: translate(-50%, -110%); }
.chart-empty { min-height: 160px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }

/* ---------- Calendar ---------- */
.calendar { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); background: var(--panel); }
.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 10px 14px; }
.calendar-toolbar h3 { min-width: 160px; color: var(--ink); font-size: 15px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekday { border-bottom: 1px solid var(--line); padding: 7px 8px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.calendar-day { min-width: 0; min-height: 112px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5px; background: var(--panel); cursor: pointer; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day:hover { background: var(--panel-alt); }
.calendar-day.outside { background: var(--panel-alt); }
.calendar-day.outside .calendar-day-number { color: var(--muted); }
.calendar-day.today .calendar-day-number { color: #fff; background: var(--brand-fill); }
.calendar-day-number { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.calendar-event { width: 100%; min-width: 0; display: block; overflow: hidden; border: 0; border-radius: 3px; padding: 3px 5px; color: var(--ink-soft); background: color-mix(in srgb, var(--event-colour, var(--brand)) 14%, var(--panel)); font-size: 11px; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event:hover { background: color-mix(in srgb, var(--event-colour, var(--brand)) 24%, var(--panel)); }
.calendar-more { border: 0; padding: 1px 4px; color: var(--brand); background: transparent; font-size: 10px; font-weight: 800; text-align: left; }
.calendar-week { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.calendar-week.day-view { grid-template-columns: 56px minmax(0, 1fr); }
.calendar-time-label { height: 48px; border-right: 1px solid var(--line); padding: 2px 6px 0 0; color: var(--muted); font-size: 10px; text-align: right; }
.calendar-slot { position: relative; height: 48px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.calendar-slot:hover { background: var(--panel-alt); }
.calendar-week-column { position: relative; }
.calendar-timed-event { position: absolute; left: 2px; right: 2px; z-index: 1; overflow: hidden; border-radius: 3px; padding: 3px 5px; color: var(--ink-soft); background: color-mix(in srgb, var(--event-colour, var(--brand)) 18%, var(--panel)); font-size: 11px; font-weight: 600; cursor: pointer; }
.calendar-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 14px; }
.calendar-mini-month h4 { margin-bottom: 6px; }
.calendar-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar-mini-grid span, .calendar-mini-grid button { height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; color: var(--ink-soft); background: transparent; font-size: 10px; }
.calendar-mini-grid button.has-events { color: var(--brand-text); background: var(--brand-soft); font-weight: 800; }
.calendar-mini-grid button.today { outline: 1px solid var(--brand); }
.calendar-mini-grid .weekday { color: var(--muted); font-weight: 800; }

/* ---------- Global error UI ---------- */
#blazor-error-ui { position: fixed; z-index: 3000; left: 50%; bottom: 20px; display: none; width: min(560px, calc(100vw - 32px)); transform: translateX(-50%); border: 1px solid var(--danger-line); border-radius: 5px; padding: 12px 14px; color: var(--ink-soft); background: var(--panel); box-shadow: var(--shadow-raised); font-size: 13px; }
#blazor-error-ui .reload { margin-left: 10px; color: var(--brand); font-weight: 700; }
#blazor-error-ui .dismiss { float: right; color: var(--muted); cursor: pointer; }

/* ---------- Startup and auth ---------- */
.app-startup { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted-dark); background: var(--canvas); }
.app-startup-logo { display: block; width: min(280px, 74vw); height: auto; }
.app-startup-kicker { color: var(--brand-text); font-size: 11px; font-weight: 800; letter-spacing: 2.2px; }
.app-startup strong { color: var(--ink); font-size: 17px; font-weight: 700; }
.app-startup small { color: var(--muted); font-size: 11px; }
.app-startup-track { width: 200px; height: 3px; overflow: hidden; background: var(--line); }
.app-startup-track span { display: block; width: 0; height: 100%; background: var(--brand); transition: width .3s ease; }
.auth-shell { min-height: 100vh; }
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 18px; background: linear-gradient(160deg, var(--canvas) 0%, var(--brand-soft) 100%); }
.login-panel { width: min(470px, 100%); border: 1px solid var(--line-dark); padding: 34px; background: var(--panel); box-shadow: 0 18px 48px rgba(20, 50, 30, .1); }
.login-panel.wide { width: min(640px, 100%); }
.login-brand { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 30px; }
.login-brand img { width: 190px; height: auto; }
.login-panel h1 { margin-top: 9px; font-size: 27px; line-height: 1.15; }
.login-intro { margin-top: 10px; color: var(--muted-dark); font-size: 14px; line-height: 1.5; }
.login-form { display: flex; flex-direction: column; gap: 15px; margin-top: 24px; }
.login-password-field { position: relative; display: flex; align-items: center; }
.login-password-field input { padding-right: 44px !important; }
.login-password-field .password-toggle { position: absolute; right: 5px; }
.login-submit { width: 100%; min-height: 44px; margin-top: 4px; font-size: 14px; }
.login-secondary-action { width: 100%; margin-top: 10px; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-providers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 9px; }
.login-providers img { width: 16px; height: 16px; }
.login-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 18px; font-size: 12px; }
.login-footer { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 16px; color: var(--muted); font-size: 11px; }

/* ---------- Layout utilities ---------- */
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stack.gap-xs { gap: 4px; } .stack.gap-sm { gap: 8px; } .stack.gap-lg { gap: 20px; } .stack.gap-xl { gap: 28px; }
.hstack { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; }
.hstack.wrap, .cluster { flex-wrap: wrap; }
.cluster { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hstack.top { align-items: flex-start; } .hstack.bottom { align-items: flex-end; } .hstack.stretch { align-items: stretch; }
.hstack.between, .cluster.between { justify-content: space-between; }
.hstack.end, .cluster.end { justify-content: flex-end; }
.hstack.center, .cluster.center { justify-content: center; }
.hstack.gap-xs, .cluster.gap-xs { gap: 4px; } .hstack.gap-sm, .cluster.gap-sm { gap: 6px; } .hstack.gap-lg, .cluster.gap-lg { gap: 18px; }
.spacer { flex: 1 1 auto; }
.grow { flex: 1 1 auto; min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.grid-12.gap-sm { gap: 8px; } .grid-12.gap-lg { gap: 24px; } .grid-12.gap-0 { gap: 0; }
.grid-12 > * { grid-column: span 12; min-width: 0; }
.xs-1 { grid-column: span 1 !important; } .xs-2 { grid-column: span 2 !important; } .xs-3 { grid-column: span 3 !important; } .xs-4 { grid-column: span 4 !important; } .xs-5 { grid-column: span 5 !important; } .xs-6 { grid-column: span 6 !important; } .xs-7 { grid-column: span 7 !important; } .xs-8 { grid-column: span 8 !important; } .xs-9 { grid-column: span 9 !important; } .xs-10 { grid-column: span 10 !important; } .xs-11 { grid-column: span 11 !important; } .xs-12 { grid-column: span 12 !important; }
@media (min-width: 600px) { .sm-1 { grid-column: span 1 !important; } .sm-2 { grid-column: span 2 !important; } .sm-3 { grid-column: span 3 !important; } .sm-4 { grid-column: span 4 !important; } .sm-5 { grid-column: span 5 !important; } .sm-6 { grid-column: span 6 !important; } .sm-7 { grid-column: span 7 !important; } .sm-8 { grid-column: span 8 !important; } .sm-9 { grid-column: span 9 !important; } .sm-10 { grid-column: span 10 !important; } .sm-11 { grid-column: span 11 !important; } .sm-12 { grid-column: span 12 !important; } }
@media (min-width: 960px) { .md-1 { grid-column: span 1 !important; } .md-2 { grid-column: span 2 !important; } .md-3 { grid-column: span 3 !important; } .md-4 { grid-column: span 4 !important; } .md-5 { grid-column: span 5 !important; } .md-6 { grid-column: span 6 !important; } .md-7 { grid-column: span 7 !important; } .md-8 { grid-column: span 8 !important; } .md-9 { grid-column: span 9 !important; } .md-10 { grid-column: span 10 !important; } .md-11 { grid-column: span 11 !important; } .md-12 { grid-column: span 12 !important; } }
@media (min-width: 1280px) { .lg-1 { grid-column: span 1 !important; } .lg-2 { grid-column: span 2 !important; } .lg-3 { grid-column: span 3 !important; } .lg-4 { grid-column: span 4 !important; } .lg-5 { grid-column: span 5 !important; } .lg-6 { grid-column: span 6 !important; } .lg-7 { grid-column: span 7 !important; } .lg-8 { grid-column: span 8 !important; } .lg-9 { grid-column: span 9 !important; } .lg-10 { grid-column: span 10 !important; } .lg-11 { grid-column: span 11 !important; } .lg-12 { grid-column: span 12 !important; } }
@media (min-width: 1920px) { .xl-1 { grid-column: span 1 !important; } .xl-2 { grid-column: span 2 !important; } .xl-3 { grid-column: span 3 !important; } .xl-4 { grid-column: span 4 !important; } .xl-5 { grid-column: span 5 !important; } .xl-6 { grid-column: span 6 !important; } .xl-7 { grid-column: span 7 !important; } .xl-8 { grid-column: span 8 !important; } .xl-9 { grid-column: span 9 !important; } .xl-10 { grid-column: span 10 !important; } .xl-11 { grid-column: span 11 !important; } .xl-12 { grid-column: span 12 !important; } }
/* min() lets a single card shrink to a narrow phone instead of pushing the page sideways. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.card-grid.small { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.card-grid.large { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.scroll-y { overflow-y: auto; min-height: 0; }
.scroll-x { overflow-x: auto; }
.sticky-top { position: sticky; top: 0; z-index: 5; }
.hide-mobile { } .show-mobile { display: none !important; }
@media (max-width: 760px) { .hide-mobile { display: none !important; } .show-mobile { display: revert !important; } }

/* Text */
.text-muted, .muted { color: var(--muted) !important; }
.text-soft { color: var(--muted-dark) !important; }
.text-ink { color: var(--ink) !important; }
.text-brand { color: var(--brand-text) !important; }
.text-success { color: var(--success) !important; }
.text-info { color: var(--info) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger, .text-error { color: var(--danger) !important; }
.text-xs { font-size: 10px !important; } .text-sm, .text-small { font-size: 11px !important; } .text-md { font-size: 13px !important; } .text-lg { font-size: 16px !important; } .text-xl { font-size: 20px !important; }
.text-strong, .fw-bold { font-weight: 700 !important; } .fw-normal { font-weight: 400 !important; }
.text-caption { color: var(--muted); font-size: 11px; }
.text-overline { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.text-right, .text-end { text-align: right !important; } .text-center { text-align: center !important; } .text-left, .text-start { text-align: left !important; }
.truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.pre-wrap { white-space: pre-wrap; }
.break-anywhere { overflow-wrap: anywhere; }
.tabular { font-variant-numeric: tabular-nums; }
.uppercase { text-transform: uppercase; }
.lead { color: var(--muted-dark); font-size: 13px; line-height: 1.55; }

/* Compatibility utilities: spacing/flex names used by older markup (4px scale). */
.d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .d-block { display: block !important; } .d-inline-block { display: inline-block !important; } .d-none { display: none !important; } .d-grid { display: grid !important; }
.flex-column { flex-direction: column !important; } .flex-row { flex-direction: row !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } .flex-grow-1, .flex-1 { flex: 1 1 auto !important; min-width: 0; } .flex-shrink-0 { flex-shrink: 0 !important; }
.align-center, .align-items-center { align-items: center !important; } .align-start, .align-items-start { align-items: flex-start !important; } .align-end, .align-items-end { align-items: flex-end !important; } .align-self-center { align-self: center !important; }
.justify-center, .justify-content-center { justify-content: center !important; } .justify-space-between, .justify-content-between { justify-content: space-between !important; } .justify-end, .justify-content-end, .justify-flex-end { justify-content: flex-end !important; } .justify-start, .justify-content-start { justify-content: flex-start !important; }
.gap-0 { gap: 0 !important; } .gap-1 { gap: 4px !important; } .gap-2 { gap: 8px !important; } .gap-3 { gap: 12px !important; } .gap-4 { gap: 16px !important; } .gap-5 { gap: 20px !important; } .gap-6 { gap: 24px !important; }
.w-100 { width: 100% !important; } .h-100 { height: 100% !important; } .mw-0 { min-width: 0 !important; }
.ma-0, .m-0 { margin: 0 !important; } .ma-1, .m-1 { margin: 4px !important; } .ma-2, .m-2 { margin: 8px !important; } .ma-3, .m-3 { margin: 12px !important; } .ma-4, .m-4 { margin: 16px !important; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 4px !important; } .mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 12px !important; } .mt-4 { margin-top: 16px !important; } .mt-5 { margin-top: 20px !important; } .mt-6 { margin-top: 24px !important; } .mt-8 { margin-top: 32px !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 4px !important; } .mb-2 { margin-bottom: 8px !important; } .mb-3 { margin-bottom: 12px !important; } .mb-4 { margin-bottom: 16px !important; } .mb-5 { margin-bottom: 20px !important; } .mb-6 { margin-bottom: 24px !important; } .mb-8 { margin-bottom: 32px !important; }
.ml-0, .ms-0 { margin-left: 0 !important; } .ml-1, .ms-1 { margin-left: 4px !important; } .ml-2, .ms-2 { margin-left: 8px !important; } .ml-3, .ms-3 { margin-left: 12px !important; } .ml-4, .ms-4 { margin-left: 16px !important; } .ml-auto, .ms-auto { margin-left: auto !important; }
.mr-0, .me-0 { margin-right: 0 !important; } .mr-1, .me-1 { margin-right: 4px !important; } .mr-2, .me-2 { margin-right: 8px !important; } .mr-3, .me-3 { margin-right: 12px !important; } .mr-4, .me-4 { margin-right: 16px !important; } .mr-auto, .me-auto { margin-right: auto !important; }
.mx-1 { margin-left: 4px !important; margin-right: 4px !important; } .mx-2 { margin-left: 8px !important; margin-right: 8px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-1 { margin-top: 4px !important; margin-bottom: 4px !important; } .my-2 { margin-top: 8px !important; margin-bottom: 8px !important; } .my-3 { margin-top: 12px !important; margin-bottom: 12px !important; } .my-4 { margin-top: 16px !important; margin-bottom: 16px !important; }
.pa-0, .p-0 { padding: 0 !important; } .pa-1, .p-1 { padding: 4px !important; } .pa-2, .p-2 { padding: 8px !important; } .pa-3, .p-3 { padding: 12px !important; } .pa-4, .p-4 { padding: 16px !important; } .pa-5, .p-5 { padding: 20px !important; } .pa-6 { padding: 24px !important; }
.pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: 4px !important; } .pt-2 { padding-top: 8px !important; } .pt-3 { padding-top: 12px !important; } .pt-4 { padding-top: 16px !important; }
.pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: 4px !important; } .pb-2 { padding-bottom: 8px !important; } .pb-3 { padding-bottom: 12px !important; } .pb-4 { padding-bottom: 16px !important; }
.pl-0, .ps-0 { padding-left: 0 !important; } .pl-1, .ps-1 { padding-left: 4px !important; } .pl-2, .ps-2 { padding-left: 8px !important; } .pl-4, .ps-4 { padding-left: 16px !important; }
.pr-0, .pe-0 { padding-right: 0 !important; } .pr-1, .pe-1 { padding-right: 4px !important; } .pr-2, .pe-2 { padding-right: 8px !important; } .pr-4, .pe-4 { padding-right: 16px !important; }
.px-1 { padding-left: 4px !important; padding-right: 4px !important; } .px-2 { padding-left: 8px !important; padding-right: 8px !important; } .px-3 { padding-left: 12px !important; padding-right: 12px !important; } .px-4 { padding-left: 16px !important; padding-right: 16px !important; }
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; } .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; } .py-3 { padding-top: 12px !important; padding-bottom: 12px !important; } .py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
.rounded { border-radius: var(--radius) !important; } .border { border: 1px solid var(--line) !important; } .overflow-hidden { overflow: hidden !important; } .overflow-auto { overflow: auto !important; } .position-relative { position: relative !important; } .cursor-pointer { cursor: pointer !important; }

/* ---------- Phones ----------
   So pages fit a 360px screen: long values wrap instead of running off the edge, rows of controls wrap, and nothing
   forces the page to scroll sideways. (Lists become cards in the Tables section, at the same 700px.) */
@media (max-width: 700px) {
    .admin-header h1, .admin-header p { overflow-wrap: anywhere; }
    .admin-header-actions, .panel-heading-actions { justify-content: flex-start; }
    .panel-heading, .panel-card-header, .detail-section-heading { flex-wrap: wrap; }
    .pager-controls { flex-wrap: wrap; }
    .segmented { max-width: 100%; overflow-x: auto; }
    .segmented button { flex: 0 0 auto; }
}

@media print {
    .sidebar, .mobile-navigation, .toast-stack, .workflow-nav, .admin-header-actions, .no-print { display: none !important; }
    .admin-shell { padding: 0; max-width: none; }
    body { background: #fff; }
}

/* ---------- Bridge for screens still on the previous stylesheet ----------
   The old app.css reads these variables for its font and page background (with !important), so pointing them at
   the design tokens gives unconverted screens the new type and canvas. Remove with app.css. */
:root, html[data-theme='light'] {
    --app-text-font-family: var(--font);
    --app-background: var(--canvas);
    --app-background-elevated: var(--canvas);
    --app-text: var(--ink);
}
html[data-theme='dark'], :root[data-theme='dark'] {
    --app-background: var(--canvas) !important;
    --app-background-elevated: var(--canvas);
    --app-text: var(--ink);
}