/* ============================================================
   mRay DocLink — Material 3 dark theme
   Brand: mRay Styleguide V1 2026 (mbits)
   ============================================================ */

/* ---------- mRay brand tokens (styleguide) ---------- */
:root, html, body {
    /* Surface scale (styleguide A10..A60) */
    --surface-a10: #09090B;
    --surface-a20: #131316;
    --surface-a30: #1C1C1F;
    --surface-a40: #2A2A2E;
    --surface-a50: #45464A;
    --surface-a60: #888889;

    /* Brand colors */
    --mbits-yellow:        #FAC73C;
    --mbits-yellow-light:  #FBDF52;
    --mbits-yellow-dark:   #C9981E;
    --mbits-orange:        #F58220;
    --mbits-blue:          #2D9CDB;
    --mbits-turquoise:     #2BB7B3;

    /* Functional */
    --brand-success: #2BB673;
    --brand-warning: #F2994A;
    --brand-error:   #EB5757;
    --brand-info:    #2D9CDB;

    /* Text */
    --text-primary:   #F2F2F3;
    --text-secondary: #C7C7CB;
    --text-muted:     #888889;
    --on-accent:      #0C1415;

    /* ---------- Material 3 sys-color overrides ---------- */
    /* Primary = mbits yellow */
    --md-sys-color-primary: var(--mbits-yellow);
    --md-sys-color-on-primary: var(--on-accent);
    --md-sys-color-primary-container: var(--mbits-yellow-dark);
    --md-sys-color-on-primary-container: var(--on-accent);

    /* Secondary = turquoise */
    --md-sys-color-secondary: var(--mbits-turquoise);
    --md-sys-color-on-secondary: var(--on-accent);
    --md-sys-color-secondary-container: #1F4F4D;
    --md-sys-color-on-secondary-container: #B6ECE9;

    /* Tertiary = blue */
    --md-sys-color-tertiary: var(--mbits-blue);
    --md-sys-color-on-tertiary: var(--on-accent);
    --md-sys-color-tertiary-container: #194E73;
    --md-sys-color-on-tertiary-container: #C8E6FA;

    /* Error */
    --md-sys-color-error: var(--brand-error);
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #5B1A1A;
    --md-sys-color-on-error-container: #FBD4D4;

    /* Surface (mapped to brand surface scale) */
    --md-sys-color-surface: var(--surface-a20);
    --md-sys-color-on-surface: var(--text-primary);
    --md-sys-color-surface-dim: var(--surface-a10);
    --md-sys-color-surface-bright: var(--surface-a40);
    --md-sys-color-surface-container-lowest: var(--surface-a10);
    --md-sys-color-surface-container-low: var(--surface-a20);
    --md-sys-color-surface-container: var(--surface-a30);
    --md-sys-color-surface-container-high: var(--surface-a40);
    --md-sys-color-surface-container-highest: var(--surface-a50);
    --md-sys-color-on-surface-variant: var(--text-secondary);
    --md-sys-color-surface-variant: var(--surface-a40);

    /* Outline */
    --md-sys-color-outline: var(--surface-a50);
    --md-sys-color-outline-variant: var(--surface-a40);

    /* Inverse */
    --md-sys-color-inverse-surface: var(--text-primary);
    --md-sys-color-inverse-on-surface: var(--surface-a20);
    --md-sys-color-inverse-primary: var(--mbits-yellow-dark);

    /* Background = surface */
    --md-sys-color-background: var(--md-sys-color-surface);
    --md-sys-color-on-background: var(--md-sys-color-on-surface);

    /* Component overrides */
    --md-icon-font: 'Material Symbols Outlined';
    --md-ref-typeface-plain: 'Roboto', system-ui, sans-serif;
    --md-ref-typeface-brand: 'Roboto', system-ui, sans-serif;

    /* Actual .app-brandbar height - must match .app-shell's grid-template-rows
       brand-row value (see the literal "112px 1fr" below and its two
       responsive overrides), or anything anchored to it (e.g.
       .wizard-overlay's top) drifts out of sync and the header appears to
       change height when that thing opens. Previously guessed at 96px from
       padding+logo math instead of reading the actual explicit value here -
       confirmed via a live measurement that 112px is what actually renders. */
    --brandbar-h: 112px;

    color-scheme: dark;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-ref-typeface-plain);
    -webkit-font-smoothing: antialiased;
}

/* Native form controls take the browser's own font, not the page's - the
   "Table | Tiles" switch came out in Arial. Inherit it everywhere; a class
   that wants monospace still says so. */
button, input, select, textarea { font-family: inherit; }

a { color: var(--md-sys-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

#spa-root { height: 100%; }

.boot-splash {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    --md-circular-progress-size: 48px;
}

/* ---------- App shell ---------- */
.app-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: 112px 1fr;
    grid-template-areas:
        "brand brand"
        "rail content";
    height: 100vh;
    overflow: hidden;
}

.app-shell.no-rail {
    grid-template-columns: 1fr;
    grid-template-areas:
        "brand"
        "content";
}

/* Big centered brand header */
.app-brandbar {
    grid-area: brand;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background:
        radial-gradient(ellipse at center top, color-mix(in srgb, var(--mbits-yellow) 14%, transparent), transparent 70%),
        var(--surface-a10);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    z-index: 10;
}

.app-brandbar-logo {
    height: 64px;
    width: auto;
    display: block;
}

.app-brandbar-actions {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-brandbar-leading {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 100px;
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}
.user-chip:hover { background-color: var(--md-sys-color-surface-container-highest); }

/* Navigation rail / drawer */
.app-rail {
    grid-area: rail;
    background-color: var(--md-sys-color-surface-container-low);
    border-right: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 12px 0;
}

.rail-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px 16px;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
}

.rail-brand img {
    height: 28px;
    width: auto;
}

.rail-brand-label {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.rail-section {
    padding: 12px 16px 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
}

.rail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 20px;
    margin: 2px 12px;
    border-radius: 28px;
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.15s;
    cursor: pointer;
}

.rail-item:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    text-decoration: none;
}

.rail-item.active {
    background-color: color-mix(in srgb, var(--mbits-yellow) 18%, transparent);
    color: var(--mbits-yellow);
}

.rail-item md-icon,
.rail-item .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    flex-shrink: 0;
}

.rail-spacer { flex: 1; }

/* Sub-views indented under their parent nav item (Dokumente > Archiv/Papierkorb) */
.rail-item-sub {
    margin-left: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.8125rem;
}
.rail-item-sub .material-symbols-outlined { font-size: 18px; }

.rail-divider {
    height: 1px;
    background-color: var(--md-sys-color-outline-variant);
    margin: 8px 16px;
}

/* Content area */
.app-content {
    grid-area: content;
    overflow-y: auto;
    background-color: var(--md-sys-color-surface);
}

.content-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
    padding: 8px 4px;
    flex-wrap: wrap;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.875rem;
}

.pagination-label {
    min-width: 0;
}

.pagination-per-page-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pagination-per-page {
    background-color: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 0.875rem;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 400;
    margin: 0;
    color: var(--md-sys-color-on-surface);
}

.page-subtitle {
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
    margin: 4px 0 0;
}

.page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Surface card */
.surface-card {
    background-color: var(--md-sys-color-surface-container-low);
    border-radius: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    overflow: hidden;
}

.surface-card + .surface-card {
    margin-top: 16px;
}

/* ---------- Data table (M3 styled) ---------- */
.data-table-wrap {
    overflow-x: auto;
    background-color: var(--md-sys-color-surface-container-low);
    border-radius: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table thead th {
    text-align: left;
    padding: 14px 16px;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--md-sys-color-on-surface-variant);
    /* No uppercase: the sortable headers sit in a button that never had it, so
       a plain header ("UNTERSUCHUNGEN") stood out next to them. */
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background-color: var(--md-sys-color-surface-container);
    position: sticky;
    top: 0;
}

.data-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface);
    vertical-align: middle;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover td {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
}

.data-table .col-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.data-table .col-actions md-icon-button { vertical-align: middle; }

.col-actions-wrap {
    display: inline-flex;
    align-items: center;
    height: 20px;
}

/* Tabular explorer view: links wrap an icon + label.  Disable the
   default <a> underline globally and re-apply it only to the
   textual portion so the icon stays clean.  Hovering still
   reinforces the affordance. */
.data-table tbody a {
    text-decoration: none;
    color: inherit;
}
.data-table tbody a:hover .row-link-text,
.data-table tbody a:focus-visible .row-link-text {
    text-decoration: underline;
}

.empty-state {
    padding: 48px 24px;
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
}

.empty-state md-icon,
.empty-state .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
}

/* Unknown route inside the shell: the empty-state look plus a way back. */
.not-found-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.not-found-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
}

/* One pane per settings tab; a tab that finishes loading after the next one
   was opened paints into a detached pane (see renderTabContent). */
.settings-pane { display: block; }

/* Full-page fatal-error view shown when the backend is
   unreachable.  Intentionally has no controls (no rail, no
   buttons) — anything actionable would be misleading. */
.fatal-error {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    background: var(--md-sys-color-background, #121212);
    color: var(--md-sys-color-on-surface-variant, #c4c7c5);
    z-index: 10;
}
.fatal-error md-icon,
.fatal-error .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-size: 56px;
    color: var(--md-sys-color-on-surface-variant, #c4c7c5);
}
.fatal-error-msg {
    color: var(--md-sys-color-error, #f2b8b5);
    font-size: 1rem;
}

/* Mobile: tables become cards */
@media (max-width: 768px) {
    .data-table-wrap {
        background: transparent;
        border: none;
        overflow: visible;
    }

    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table tr,
    .data-table th,
    .data-table td {
        display: block;
    }

    .data-table thead {
        position: absolute;
        left: -9999px;
    }

    .data-table tbody tr {
        background-color: var(--md-sys-color-surface-container-low);
        border: 1px solid var(--md-sys-color-outline-variant);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 12px 16px;
    }

    .data-table tbody td {
        border: none;
        padding: 6px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right;
    }

    .data-table tbody td::before {
        content: attr(data-label);
        font-weight: 500;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        color: var(--md-sys-color-on-surface-variant);
        text-transform: uppercase;
        flex: 0 0 auto;
        text-align: left;
    }

    .data-table tbody td.col-actions {
        justify-content: flex-end;
        width: auto;
    }

    .data-table tbody td.col-actions::before { display: none; }
}

/* ---------- Forms ---------- */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 480px;
}

.form-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Bind output lists (root-directory editor) — any number of PDF / DICOM
   outputs, each row a destination + optional folder + naming scheme;
   see outputListEditor() in spa.js */
.output-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
}

.output-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.output-list-title {
    font-weight: 500;
}

.output-list-empty {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.output-list-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.output-list-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--md-sys-color-surface-container-low);
}

.output-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.output-row-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
}

/* Folder picker (bind output target) — a text field with a floating list of
   matching folders; see folderPickerField() in spa.js */
.folder-picker {
    position: relative;
    width: 100%;
}

.folder-suggest {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% - 4px);
    max-height: 240px;
    overflow-y: auto;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.folder-suggest--up {
    top: auto;
    bottom: calc(100% - 4px);
}

.folder-suggest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-size: .875rem;
    color: var(--md-sys-color-on-surface);
}

.folder-suggest-item:hover,
.folder-suggest-item:focus-visible {
    background: var(--md-sys-color-surface-container-highest);
}

.folder-suggest-item .material-symbols-outlined {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.folder-suggest-empty {
    padding: 8px 12px;
    font-size: .875rem;
    color: var(--text-muted);
}

.form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Granted-directory grant rows: directory dropdown + subpath +
   remove button on a single line, wrapping on small screens. */
.grant-list { display: flex; flex-direction: column; gap: 10px; }
.grant-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(220px, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.grant-sub-wrap { position: relative; }
.grant-subpath {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 12px;
    background: var(--md-sys-color-surface-container-highest, #2a2a2e);
    color: var(--md-sys-color-on-surface, #e6e6e6);
    border: 1px solid var(--md-sys-color-outline, #555);
    border-radius: 4px;
    font: inherit;
}
.grant-subpath:focus {
    outline: none;
    border-color: var(--md-sys-color-primary, #80b4ff);
}
@media (max-width: 720px) {
    .grant-row { grid-template-columns: 1fr; }
}

md-filled-text-field,
md-outlined-text-field {
    width: 100%;
}

/* ---------- Filter / search bar ---------- */
.filter-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.filter-bar md-outlined-text-field,
.filter-bar md-filled-text-field {
    flex: 1;
    min-width: 200px;
    max-width: 480px;
}

.table-filter-bar {
    margin-bottom: 12px;
}
.table-filter-help {
    margin: 0 0 20px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.8rem;
}

.search-help-bar {
    margin: 4px 0 20px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 10px;
    background-color: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.82rem;
}
.search-help-bar > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-weight: 500;
}
.search-help-bar > summary::-webkit-details-marker { display: none; }
.search-help-bar > summary .material-symbols-outlined { font-size: 18px; }
.search-help-bar > summary .material-symbols-outlined:last-child {
    margin-left: auto;
    transition: transform 120ms ease;
}
.search-help-bar[open] > summary .material-symbols-outlined:last-child {
    transform: rotate(180deg);
}
.search-help-content {
    padding: 0 12px 12px;
    line-height: 1.5;
}

/* ---------- Pagination ---------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.875rem;
}

/* ---------- Snackbar ---------- */
.snackbar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    max-width: 90vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}

.snackbar.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.snackbar.error {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

/* ---------- Login page ---------- */
.login-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background:
        radial-gradient(ellipse at top, color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent), transparent 60%),
        var(--md-sys-color-surface);
}

.login-card {
    width: 100%;
    max-width: 400px;
    background-color: var(--md-sys-color-surface-container);
    border-radius: 28px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.login-brand {
    text-align: center;
    margin-bottom: 20px;
}

.login-brand img {
    /* The DocLink wordmark SVG has a wide aspect ratio; cap both
       dimensions so it never overpowers the small login card. */
    height: 32px;
    max-width: 70%;
    width: auto;
    object-fit: contain;
}

/* Only when a title follows does the wordmark need its own spacing. */
.login-brand img:not(:last-child) {
    margin-bottom: 12px;
}

.login-title {
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
    color: var(--md-sys-color-on-surface);
}

/* ---------- Explorer (file browser) ---------- */

.tile-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background-color: var(--mbits-yellow);
    color: #1a1a1f;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 2;
}

.tile-badge--dot {
    min-width: 12px;
    width: 12px;
    height: 12px;
    padding: 0;
    font-size: 0;
}

/* Personal folder type variant — the archive (teal) */

/* Breadcrumbs */

/* Explorer scan loader (shown while a scan for the current
   top-level directory is pending or running). */
.scan-loader {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 0 0 12px 0;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--mbits-yellow) 10%, var(--md-sys-color-surface-container-low));
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.8125rem;
    width: max-content;
}

.scan-loader-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
    border-top-color: var(--mbits-yellow);
    animation: scan-loader-spin 0.9s linear infinite;
}

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


.dicom-badge {
    color: var(--brand-info) !important;
}

/* Secondary line under a file name in the list view (DICOM patient/study
   hint). The filesystem path is NOT shown per file - see
   .explorer-level-path, which shows it once per level. */
.file-fullpath {
    display: block;
    font-size: 0.7rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}

/* Absolute path of the folder currently open, shown once above the listing
   (admins only - regular users never receive full_path). */

.explorer-level-path-text {
    overflow-wrap: anywhere;
}

/* ---------- Mobile responsive shell ---------- */
.menu-toggle { display: none; }

.mobile-fab {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 98;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: box-shadow 0.2s;
}
.mobile-fab:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55); }

@media (max-width: 960px) {
    :root, html, body { --brandbar-h: 72px; }

    .app-shell {
        grid-template-columns: 1fr;
        grid-template-rows: 72px 1fr;
        grid-template-areas:
            "brand"
            "content";
    }

    .app-brandbar { padding: 8px 12px; }
    .app-brandbar-logo { height: 40px; }
}

@media (max-width: 600px) {
    :root, html, body { --brandbar-h: 48px; }

    .app-shell { grid-template-rows: 48px 1fr; }
    .app-brandbar { padding: 4px 8px; }
    .app-brandbar-logo { height: 22px; }
    .app-brandbar-actions { right: 8px; gap: 4px; }
    .app-brandbar .menu-toggle {
        --md-icon-button-state-layer-size: 36px;
        --md-icon-button-icon-size: 20px;
    }
    .user-chip { font-size: 0.7rem; gap: 4px; }
    .user-chip .material-symbols-outlined { font-size: 18px; }
}

@media (max-width: 960px) {

    .app-rail {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        max-height: 80vh;
        overflow-y: auto;
        z-index: 100;
        transform: translateY(-110%);
        transition: transform 0.25s ease;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        flex-direction: column;
        border-right: none;
        border-bottom: 1px solid var(--md-sys-color-outline-variant);
    }

    .app-rail.open { transform: translateY(0); }

    .rail-scrim {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.45);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }

    .rail-scrim.open {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-fab { display: inline-flex; }

    .content-inner { padding: 16px; }

    .page-title { font-size: 1.5rem; }
}

/* ---------- Misc ---------- */
.text-muted { color: var(--md-sys-color-on-surface-variant); }
.text-error { color: var(--md-sys-color-error); }
/* Inline form error slots must not reserve vertical space while empty -
   otherwise the gap between the last field and the action row is larger
   than every other gap in the form. */
.text-error:empty { display: none; }

.chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 8px;
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    font-size: 0.75rem;
    font-weight: 500;
}

.chip.success {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 25%, transparent);
    color: var(--md-sys-color-primary);
}

.chip.error {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.chip.scanned-badge {
    gap: 4px;
    margin-left: 8px;
    background-color: color-mix(in srgb, var(--mbits-blue) 18%, transparent);
    color: var(--mbits-blue);
    vertical-align: middle;
}

.chip.scanned-badge .material-symbols-outlined {
    font-size: 16px;
}

.chip.source-chip {
    gap: 4px;
}
.chip.source-chip .material-symbols-outlined { font-size: 16px; }
.chip.source-chip.scan {
    background-color: color-mix(in srgb, var(--mbits-blue) 18%, transparent);
    color: var(--mbits-blue);
}
.chip.source-chip.manual {
    background-color: color-mix(in srgb, var(--text-muted) 18%, transparent);
    color: var(--text-muted);
}

.db-id {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 1em;
    opacity: 0.7;
}

.table-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    background: var(--md-sys-color-surface-container);
    padding: 4px 10px;
    color: var(--md-sys-color-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}
.table-link-btn:hover {
    background: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-primary);
}
.table-link-btn .material-symbols-outlined { font-size: 16px; }

/* --- Relative-path display (consistent across Task detail, wizard, etc.) --- */
.path-display {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.wizard-card .path-display { font-size: inherit; }
.path-sep {
    color: var(--text-muted);
    margin: 0 2px;
}
.path-segment {
    font-size: inherit;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Any clickable segment - a folder, or a file with a parent to jump to
   (opens Explorer at that folder, filtered to the file). */
.path-display button.path-segment {
    background: none;
    border: none;
    padding: 0;
    color: var(--md-sys-color-primary);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
}
.path-display button.path-segment:hover { text-decoration: underline; }
/* Non-clickable leaf fallback (a "file" that is itself a root - no parent
   to jump to; edge case). */
.path-segment-file {
    color: var(--text-secondary);
    font-weight: 500;
}

.dialog-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 320px;
}

/* === App modal (login-card style) =======================================
   Lightweight centred-card modal that visually mirrors the login
   card. Replaces the previous md-dialog reskin. The DOM tree is:
       .app-modal-backdrop
           .app-modal-card[--confirm|--form]
               .app-modal-header (icon + title)
               form.app-modal-form
                   .app-modal-body
                   .app-modal-footer (button row)
*/
.app-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.app-modal-card {
    width: 100%;
    max-width: 480px;
    background-color: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 28px;
    padding: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 0;
    color: var(--md-sys-color-on-surface);
    max-height: calc(100vh - 48px);
    overflow: auto;
}

.app-modal-card--form {
    max-width: 560px;
}

.app-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.25rem;
    font-weight: 500;
    padding: 28px 32px 20px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.app-modal-header-icon {
    font-size: 28px;
    color: var(--md-sys-color-primary);
    flex: 0 0 auto;
    margin-top: 1px;
}

.app-modal-header-icon.danger {
    color: var(--md-sys-color-error);
}

.app-modal-title {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}

.app-modal-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 32px;
}

.app-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--md-sys-color-on-surface);
}

.app-modal-text {
    line-height: 1.6;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 1rem;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* One failure per block, because these messages are whole sentences naming a
   file and a file-system reason - run together they read as one paragraph and
   nobody finds which file failed. */
.dialog-message-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 45vh;
    overflow-y: auto;
}

.dialog-message-item {
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid var(--md-sys-color-error);
    background: var(--surface-a10);
    font-size: .9rem;
    line-height: 1.5;
}

.confirm-file-list {
    margin: 8px 0 0;
    padding-left: 20px;
    max-height: 220px;
    overflow-y: auto;
    font-size: 0.92rem;
    color: var(--md-sys-color-on-surface);
}
.confirm-file-list li { margin: 2px 0; word-break: break-all; }
.confirm-file-list li.muted { color: var(--md-sys-color-on-surface-variant); }

/* ---------- Bind result dialog ---------- */
.bind-result-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bind-result-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--md-sys-color-surface-container-low,
        rgba(255, 255, 255, 0.04));
}
.bind-result-row-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    min-width: 0;
}
.bind-result-row-label {
    font-size: 0.95rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.bind-result-row md-text-button {
    align-self: flex-start;
    --md-text-button-label-text-weight: 600;
}

.app-modal-body > md-outlined-text-field,
.app-modal-body > md-outlined-select,
.app-modal-body > md-filled-text-field,
.app-modal-body > textarea {
    width: 100%;
}

.app-modal-footer {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 20px 32px 28px;
}

.app-modal-footer md-filled-button {
    --md-filled-button-container-shape: 999px;
    --md-filled-button-container-height: 48px;
    --md-filled-button-label-text-weight: 600;
    height: 48px;
    min-width: 140px;
}

.app-modal-card--confirm .app-modal-footer md-filled-button {
    flex: 1 1 auto;
}

/* Busy/progress modal — narrow card with a spinner and a one-line
   message.  Has no footer; the host code closes it when the work
   completes. */
.app-modal-card--busy {
    max-width: 420px;
}
.app-modal-card--busy .app-modal-form {
    padding-top: 20px;
}
.app-modal-busy-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0 4px;
}
.app-modal-busy-row md-circular-progress {
    --md-circular-progress-size: 32px;
    flex: 0 0 auto;
}

/* Destructive primary action: filled button with the error palette
   so it reads as M3's "filled error" affordance instead of an easily
   missed text button. Also covers tonal/text variants so any button
   tagged .btn-danger is visibly red. */
.btn-danger {
    --md-filled-button-container-color: var(--md-sys-color-error);
    --md-filled-button-label-text-color: var(--md-sys-color-on-error);
    --md-filled-button-hover-state-layer-color: var(--md-sys-color-on-error);
    --md-filled-button-pressed-state-layer-color: var(--md-sys-color-on-error);
    --md-filled-button-focus-state-layer-color: var(--md-sys-color-on-error);
    --md-text-button-label-text-color: var(--md-sys-color-error);
    --md-outlined-button-label-text-color: var(--md-sys-color-error);
    --md-outlined-button-outline-color: var(--md-sys-color-error);
}

textarea.m3-textarea {
    width: 100%;
    background-color: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    padding: 12px;
    font-family: inherit;
    font-size: 0.875rem;
    min-height: 120px;
    resize: vertical;
}

textarea.m3-textarea:focus {
    outline: 2px solid var(--md-sys-color-primary);
    border-color: transparent;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';    -webkit-font-smoothing: antialiased;
}

/* Inline flex wrapper used inside md-*-button to keep a leading icon
   and its label on a single horizontal line, vertically centered.
   The wrapper itself is a flex line; both children render at 1em so
   the button's own vertical padding stays symmetric. */
.btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    vertical-align: middle;
}

.btn-label > span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.btn-label .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}

/* ---------- Settings page ---------- */
.settings-card {
    padding: 0;
    margin-top: 16px;
}
.settings-card:first-of-type { margin-top: 0; }

.settings-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background-color: var(--md-sys-color-surface-container);
}
.settings-card-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--md-sys-color-on-surface);
}
.settings-card-header .material-symbols-outlined,
.settings-card-header md-icon {
    color: var(--md-sys-color-primary);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px 20px;
    padding: 20px;
}

.setting-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.setting-row md-outlined-text-field,
.setting-row textarea.m3-textarea {
    width: 100%;
}

.setting-key {
    font-size: 0.8125rem;
    color: var(--md-sys-color-on-surface);
    text-transform: capitalize;
    font-weight: 500;
}

.setting-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    cursor: pointer;
}

.setting-hint {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--md-sys-color-on-surface-variant);
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    padding: 4px 4px 24px;
    margin-top: 8px;
}

/* ---------- Markdown body (imprint / privacy) ---------- */
.markdown-body {
    color: var(--md-sys-color-on-surface);
    line-height: 1.55;
    font-size: 0.95rem;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin: 1.2em 0 0.4em;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
}
.markdown-body h1 { font-size: 1.6rem; }
.markdown-body h2 { font-size: 1.3rem; }
.markdown-body h3 { font-size: 1.1rem; }
.markdown-body p { margin: 0.6em 0; }
.markdown-body ul, .markdown-body ol { margin: 0.4em 0 0.4em 1.4em; }
.markdown-body li { margin: 0.2em 0; }
.markdown-body a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
}
.markdown-body a:hover { text-decoration: underline; }
.markdown-body code {
    background-color: var(--md-sys-color-surface-container-highest);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.9em;
}
.markdown-body hr {
    border: 0;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin: 1.2em 0;
}
.markdown-body img { max-width: 100%; height: auto; }

/* Markdown-mode textarea in Settings spans full grid width */
.settings-grid .setting-row:has(textarea.m3-textarea-md) {
    grid-column: 1 / -1;
}
/* Multilingual setting: stacked label + per-language sub-grid */
.settings-grid .setting-row-i18n {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.setting-i18n-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.setting-i18n-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.setting-i18n-field md-outlined-text-field,
.setting-i18n-field textarea.m3-textarea {
    width: 100%;
}
textarea.m3-textarea-md {
    min-height: 220px;
    font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ===== Unified view containers ===== */

/* PlainPage — static/legal text content */
.plain-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* CardsView — singleton / settings pages (Profile, Settings) */
.cards-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.cards-page .surface-card + .surface-card { margin-top: 0; }
.card-section-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    padding: 16px 16px 0;
    margin: 0;
}
.card-body {
    padding: 16px;
}
.card-field-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-size: 0.9rem;
}
.card-field-row:last-child { border-bottom: none; }
.card-field-label {
    min-width: 140px;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
}
.card-field-value {
    color: var(--md-sys-color-on-surface);
    flex: 1;
    word-break: break-word;
}
.card-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    flex-wrap: wrap;
}

/* DetailView — individual record pages */
.detail-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 960px;
}
.detail-back {
    margin-bottom: 20px;
}

/* Standalone legal page (when user is not logged in) */
.legal-standalone {
    max-width: 920px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}
.legal-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--md-sys-color-primary);
    text-decoration: none;
    margin-bottom: 16px;
    font-size: 0.9rem;
}
.legal-back:hover { text-decoration: underline; }
.legal-content { display: block; }

/* ===== File selection / context menu / workspace ===== */

.data-table tbody tr.selected td {
    background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
}
.col-select { width: 32px; }

.context-menu {
    position: fixed;
    z-index: 1000;
    min-width: 180px;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    padding: 4px;
}
.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    border: 0;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.context-menu-item:hover { background: var(--md-sys-color-surface-container-highest); }
.context-menu-item.danger { color: var(--md-sys-color-error); }

.workspace-path {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9rem;
}
.workspace-path code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    background: var(--md-sys-color-surface-container);
    padding: 2px 8px;
    border-radius: 4px;
}

/* ===== Admin logs view ===== */
.logs-filterbar md-outlined-select,
.logs-filterbar md-outlined-text-field { min-width: 160px; }
.logs-group { border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; margin-bottom: 12px; background: var(--md-sys-color-surface-container-low); }
.logs-group-summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; user-select: none; font-weight: 600; }
.logs-group-summary::-webkit-details-marker { display: none; }
.logs-group-title { color: var(--md-sys-color-primary); }
.logs-group-count { background: var(--md-sys-color-surface-container-highest); padding: 2px 10px; border-radius: 10px; font-size: 0.8rem; font-weight: 500; }
.logs-list { display: flex; flex-direction: column; border-top: 1px solid var(--md-sys-color-outline-variant); }
.logs-row { display: grid; grid-template-columns: 160px 80px 1fr; gap: 12px; padding: 6px 14px; border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 50%, transparent); align-items: start; }
.logs-row:last-child { border-bottom: 0; }
.logs-row-time { color: var(--md-sys-color-on-surface-variant); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; padding-top: 2px; }
.logs-row-level { font-weight: 600; font-size: 0.8rem; padding-top: 2px; }
.logs-row-msg { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.82rem; color: var(--md-sys-color-on-surface); }
.logs-level-debug .logs-row-level { color: var(--md-sys-color-on-surface-variant); }
.logs-level-info .logs-row-level { color: var(--md-sys-color-primary); }
.logs-level-warning .logs-row-level { color: #d4a017; }
.logs-level-error .logs-row-level,
.logs-level-critical .logs-row-level { color: var(--md-sys-color-error); }
.logs-level-error, .logs-level-critical { background: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent); }

/* Pinned (indestructible) Archive / Trash tiles in Explorer root */

/* ===========================================================
   Bind / merge wizard — full-screen step-based overlay
   =========================================================== */
.wizard-overlay {
    position: fixed;
    top: var(--brandbar-h, 96px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    overflow: hidden;
}
body.wizard-open .app-brandbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--brandbar-h, 112px);
    z-index: 1100;
}
body.wizard-open .app-brandbar-leading,
body.wizard-open .app-brandbar-actions,
body.wizard-open .app-brandbar a {
    pointer-events: none;
}
.wizard-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background-color: var(--surface-a30, var(--md-sys-color-surface));
    flex-wrap: wrap;
}
.wizard-path-bar {
    display: none; /* retired — directory is now a chip in .wizard-context-bar */
}
.wizard-path-label { display: none; }
.wizard-path-value { display: none; }
.wizard-context-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 24px;
    background-color: var(--md-sys-color-surface-container-low, #181818);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    flex-wrap: wrap;
}
.wizard-ctx-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 7px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
    color: var(--md-sys-color-on-surface);
    font-size: 0.8125rem;
    font-weight: 500;
    max-width: 100%;
    min-width: 0;
}
/* A long upload folder ("Upload Pool 2/m.mueller@…") ends in an ellipsis;
   the chip's title carries it in full. */
.wizard-ctx-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
/* Directory chip: neutral secondary background */
.wizard-ctx-chip:first-child {
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
}
.wizard-ctx-chip:first-child .wizard-ctx-icon {
    color: var(--md-sys-color-on-surface-variant);
}
.wizard-ctx-chip.wizard-ctx-empty {
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 400;
}
.wizard-ctx-icon {
    font-size: 14px;
    color: var(--md-sys-color-primary);
    flex-shrink: 0;
}
.wizard-ctx-chip.wizard-ctx-empty .wizard-ctx-icon {
    color: var(--md-sys-color-on-surface-variant);
}
.wizard-header .wizard-title {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
    flex: 1 1 auto;
    min-width: 200px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.wizard-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}
.wizard-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.875rem;
    cursor: default;
    border: 1px solid transparent;
}
.wizard-step .wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--md-sys-color-outline);
    color: var(--md-sys-color-on-primary);
    font-size: 0.75rem;
    font-weight: 600;
}
.wizard-step.done {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent);
    color: var(--md-sys-color-primary);
}
.wizard-step.done .wizard-step-num {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.wizard-step.active {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-primary);
}
.wizard-step.active .wizard-step-num {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.wizard-step .wizard-step-sep {
    opacity: 0.5;
}
.wizard-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 32px 24px 24px;
}
.wizard-body-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.wizard-step-title {
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0 0 4px;
}
.wizard-step-help {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9rem;
    margin: 0 0 12px;
}
.wizard-card {
    background-color: var(--surface-a30, var(--md-sys-color-surface-container));
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 16px;
    padding: 20px;
}
.combo-wrap {
    position: relative;
}
.combo-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
    background-color: var(--md-sys-color-surface-container-high, #2a2a2a);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    padding: 4px 0;
}
.combo-item {
    padding: 8px 14px;
    cursor: pointer;
    color: var(--md-sys-color-on-surface);
    font-size: 0.95rem;
}
.combo-item:hover,
.combo-item.active {
    background-color: var(--md-sys-color-secondary-container, #3a3a3a);
    color: var(--md-sys-color-on-secondary-container, #fff);
}
.combo-empty {
    padding: 8px 14px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9rem;
    font-style: italic;
}
.wizard-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 700px) {
    .wizard-grid-2 { grid-template-columns: 1fr; }
}
.wizard-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 18px;
}
@media (max-width: 900px) {
    .wizard-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .wizard-grid-3 { grid-template-columns: 1fr; }
}
.wizard-section-title {
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0 0 20px;
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0.01em;
}
.wizard-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.wizard-file-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wizard-file-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--md-sys-color-surface-container);
    font-size: 0.9rem;
}
.wizard-field-help {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.78rem;
    line-height: 1.4;
    margin: 0;
    padding: 0 4px;
}
.vocab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.vocab-custom-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 10px;
    border-radius: 8px;
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--md-sys-color-outline-variant);
}
.vocab-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    transition: color 0.15s;
}
.vocab-chip-remove:hover { color: var(--md-sys-color-error); }
.vocab-add-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.vocab-divider-label { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); font-style: italic; }
.wizard-footer {
    display: flex;
    justify-content: center;
    padding: 14px 24px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    background-color: var(--surface-a30, var(--md-sys-color-surface));
    position: sticky;
    bottom: 0;
}
.wizard-footer-inner {
    max-width: 960px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}
.wizard-footer-inner .wizard-footer-spacer { flex: 1 1 auto; }

/* File row used inside Step 1 (reorder list) */
.bind-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.bind-file-row:last-child { border-bottom: none; }
.bind-file-row .idx {
    width: 28px;
    color: var(--md-sys-color-on-surface-variant);
    font-variant-numeric: tabular-nums;
}

/* Review summary list */
.wizard-review {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 16px;
    row-gap: 6px;
    align-items: baseline;
    font-family: inherit;
}
.wizard-review dt {
    margin: 0;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.85rem;
    line-height: 1.4;
}
.wizard-review dd {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--md-sys-color-on-surface);
    word-break: break-word;
}
.wizard-review dd.empty {
    color: var(--md-sys-color-on-surface-variant);
    font-style: italic;
}
ol.review-file-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    font-size: 0.95rem;
    line-height: 1.4;
}
/* "File operations" review box: lists of new files and file moves.
   Uses the same body font as the rest of the review (no monospace)
   and groups items flush-left without bullet markers. */
.wizard-review ul.review-ops-list,
.review-ops-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    font-size: 0.95rem;
    line-height: 1.5;
    font-family: inherit;
}
.review-ops-list li {
    display: block;
    word-break: break-all;
}
.review-ops-list .op-kind {
    color: var(--md-sys-color-on-surface-variant);
}
.review-ops-list .op-name {
    color: var(--md-sys-color-on-surface);
}
.review-ops-list .op-arrow {
    color: var(--md-sys-color-on-surface-variant);
}
.review-ops-list .op-target {
    color: var(--md-sys-color-on-surface-variant);
    font-style: italic;
}
.review-ops-list .op-dir-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.02em;
    padding: 4px 0 2px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    word-break: break-all;
}
.review-ops-list .op-dir-label:not(:first-child) {
    margin-top: 8px;
}
.review-source-dir {
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
    margin: -6px 0 8px;
    word-break: break-all;
}
.review-file-item {
    cursor: default;
    padding: 2px 4px;
    margin: 0 -4px;
    border-radius: 4px;
}
.review-file-item:hover {
    background-color: transparent;
}
.review-file-item:focus-visible {
    outline: 2px solid var(--md-sys-color-primary, #80b4ff);
    outline-offset: 1px;
    background-color: var(--md-sys-color-surface-container-high, #2a2a2a);
}
.review-file-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    background-color: var(--md-sys-color-surface-container-low, #1a1a1a);
    border: 1px solid var(--md-sys-color-outline-variant);
    flex: 0 0 auto;
    margin-right: 8px;
    vertical-align: middle;
}
.review-file-item {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}
.review-file-name {
    color: var(--md-sys-color-on-surface);
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Review page: one named box per wizard step */
.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}
.review-box {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    padding: 16px 18px;
    background-color: var(--md-sys-color-surface-container, #1e1e1e);
    min-width: 0;
    overflow: hidden;
}
/* Full-width review box: spans every grid column regardless of
   viewport width so the "File operations" pane never gets cramped
   next to a single sibling on wide screens. */
.review-box--full {
    grid-column: 1 / -1;
}
.review-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.review-box-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0.01em;
}
.review-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: transparent;
    color: var(--md-sys-color-primary);
    font-size: 0.85rem;
    cursor: pointer;
}
.review-edit:hover {
    background-color: var(--md-sys-color-surface-container-high, #2a2a2a);
}
.review-edit md-icon, .review-edit .material-symbols-outlined {
    font-size: 18px;
}
.review-path {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-all;
}
.review-path-root {
    color: var(--md-sys-color-on-surface-variant);
    background: transparent;
    padding: 0;
    font-family: inherit;
}
.review-path-name {
    color: var(--md-sys-color-on-surface);
    font-weight: 500;
}
.split-example-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    color: var(--md-sys-color-on-surface-variant);
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* ----- Bind wizard Files-step thumbnail ----- */
.bind-file-thumb {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--md-sys-color-surface-container-highest);
    border: 1px solid var(--md-sys-color-outline-variant);
}
.bind-file-row.clickable { cursor: pointer; }
.bind-file-row.clickable:hover { background: var(--md-sys-color-surface-container-high); }

/* ----- Bind wizard Step 0: file row list ----- */
.wiz-file-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wiz-file-row { display: flex; align-items: center; border-radius: 8px; background: var(--md-sys-color-surface-container); }
.wiz-file-click { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 8px 10px; cursor: pointer; border-radius: 8px; }
.wiz-file-click:hover { background: var(--md-sys-color-surface-container-high); }
.wiz-file-thumb { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--md-sys-color-surface-container-highest); border-radius: 4px; overflow: hidden; color: var(--md-sys-color-on-surface-variant); font-size: 24px; }
.wiz-file-thumb img { width: 40px; height: 40px; object-fit: contain; }
.wiz-file-name { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; font-size: .9rem; }
.wiz-file-actions { display: flex; gap: 2px; padding-right: 6px; flex-shrink: 0; }
.wiz-reorder-btn { background: none; border: none; cursor: pointer; padding: 4px; color: var(--md-sys-color-on-surface-variant); border-radius: 4px; display: flex; align-items: center; }
.wiz-reorder-btn:hover:not(:disabled) { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.wiz-reorder-btn:disabled { opacity: 0.3; cursor: default; }
.wiz-reorder-btn .material-symbols-outlined { font-size: 18px; }

/* ----- Bind wizard: DICOM read-only hint ----- */
.wizard-dicom-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: var(--text-muted, var(--md-sys-color-on-surface-variant));
    background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 8px 0 20px;
}

.wizard-field-hint {
    font-size: .8125rem;
    color: var(--brand-error, #B00020);
    margin: 4px 0 0;
}

/* ----- Bind wizard Step 4 (Überprüfen): section headers ----- */
.wizard-review-section-header {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, var(--md-sys-color-on-surface-variant));
    padding: 12px 0 4px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    margin-top: 8px;
}
.wizard-review-section-header:first-child { margin-top: 0; }

/* ----- Global: required form fields — red label ----- */
md-outlined-text-field[required],
md-outlined-select[required] {
    --md-outlined-text-field-label-text-color: var(--brand-error, #B00020);
    --md-outlined-text-field-hover-label-text-color: var(--brand-error, #B00020);
    --md-outlined-select-label-text-color: var(--brand-error, #B00020);
    --md-outlined-select-hover-label-text-color: var(--brand-error, #B00020);
}

/* ============================================================
   Slideshow previewer (full-screen overlay)
   ============================================================ */
.slideshow-overlay {
    position: fixed;
    inset: 0;
    /* Above .app-modal-backdrop (1400) - the Gallery must render on top when
       opened from within the Task detail modal, not behind it. */
    z-index: 1500;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    flex-direction: column;
    color: #f4f4f5;
}
.slideshow-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.slideshow-title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 500;
}
.slideshow-counter {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}
.slideshow-stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
}
.slideshow-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.slideshow-stage iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
.slideshow-pdf-wrap {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
}
.slideshow-pdf-wrap embed,
.slideshow-pdf-wrap object {
    width: 100%;
    height: 100%;
    border: 0;
    flex: 1 1 auto;
}
.slideshow-dicom-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    max-width: 90%;
}
.slideshow-dicom-thumb {
    max-width: 70vw;
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1c1c1f;
    image-rendering: -webkit-optimize-contrast;
}
.slideshow-dicom-caption {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    text-align: center;
}
.slideshow-dicom-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 4px;
    background: var(--md-sys-color-primary, #FAC73C);
    color: #1c1c1f;
    font-weight: 500;
    text-decoration: none;
}
.slideshow-dicom-download:hover { filter: brightness(1.05); }
.slideshow-action-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: #f4f4f5;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s ease;
}
.slideshow-action-btn:hover { background: rgba(255, 255, 255, 0.16); }
.slideshow-action-btn.danger:hover {
    background: rgba(220, 38, 38, 0.5);
}
.slideshow-action-btn .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
}
.slideshow-empty {
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 24px;
}
.slideshow-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: background 0.15s ease;
}
.slideshow-nav-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.8); }
.slideshow-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.slideshow-nav-btn.prev { left: 16px; }
.slideshow-nav-btn.next { right: 16px; }
.slideshow-strip {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    overflow-y: hidden;
}
.slideshow-strip-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    background: #1c1c1f;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.slideshow-strip-thumb:hover { opacity: 1; }
.slideshow-strip-thumb.active {
    border-color: var(--md-sys-color-primary, #FAC73C);
    opacity: 1;
}

/* ============================================================
   TASKS — bell, list, detail
   ============================================================ */
.bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    border: 0;
    cursor: pointer;
}
.bell-btn:hover {
    background-color: var(--md-sys-color-surface-container-high);
}
.bell-btn .material-symbols-outlined { font-size: 22px; }
.bell-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 100px;
    background-color: var(--md-sys-color-error, #cf6679);
    color: var(--md-sys-color-on-error, #ffffff);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* Task chips */
.task-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 100px;
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    font-size: 0.8rem;
    font-weight: 500;
}
.task-chip .material-symbols-outlined { font-size: 16px; }
.task-chip.status-pending { color: var(--md-sys-color-on-surface-variant); }
.task-chip.status-running {
    background-color: rgba(80, 160, 255, 0.16);
    color: rgb(150, 200, 255);
}
.task-chip.status-done {
    background-color: rgba(80, 200, 120, 0.16);
    color: rgb(140, 220, 160);
}
.task-chip.status-failed {
    background-color: rgba(255, 100, 100, 0.16);
    color: rgb(255, 160, 160);
}
.task-chip.status-cancelled {
    background-color: rgba(180, 180, 180, 0.16);
    color: rgb(200, 200, 200);
}

/* Task list */
.tasks-filterbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.tasks-filterbar md-outlined-text-field {
    flex: 1 1 280px;
    max-width: 520px;
}
.tasks-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    background-color: var(--md-sys-color-surface-container-low);
}
.tasks-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    table-layout: fixed;
}
.tasks-table th:first-child { width: 42%; }
.tasks-table th:nth-child(2) { width: 18%; }
.tasks-table th:nth-child(3),
.tasks-table th:nth-child(4) { width: 20%; }
.tasks-table--with-type { min-width: 820px !important; }
.tasks-table--with-type th:first-child { width: 34% !important; }
.tasks-table--with-type th:nth-child(2) { width: 14% !important; }
.tasks-table--with-type th:nth-child(3) { width: 16% !important; }
.tasks-table--with-type th:nth-child(4),
.tasks-table--with-type th:nth-child(5) { width: 18% !important; }
.tasks-table tbody tr:last-child td { border-bottom: 0; }
.tasks-table .tasks-row {
    cursor: pointer;
    color: var(--md-sys-color-on-surface);
}
.tasks-table .tasks-row:hover,
.tasks-table .tasks-row:focus-visible {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
    outline: none;
}
.tasks-row-status { display: flex; align-items: center; }
.tasks-row-title { min-width: 0; }
.tasks-table .tasks-row-title {
    position: relative;
    display: flex;
    align-items: center;
}
.tasks-row-title-text {
    display: block;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}
.tasks-row-kind {
    font-size: 0.78rem;
    color: var(--md-sys-color-on-surface-variant);
}
.tasks-row-meta {
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
}
.tasks-row-time {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tasks-row-unread {
    flex: 0 0 auto;
    margin-right: 9px;
    width: 6px;
    height: 6px;
    border-radius: 100px;
    background-color: var(--md-sys-color-primary, #FAC73C);
}

/* Task detail */
.task-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    font-size: 0.9rem;
}
.task-back-link:hover { color: var(--md-sys-color-on-surface); }
.task-back-link .material-symbols-outlined { font-size: 18px; }

.task-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.task-detail-title-block {
    min-width: 0;
    flex: 1 1 auto;
}
.task-detail-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.task-detail-kind {
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 2px;
}
.task-detail-actions {
    display: none; /* cancel button is now inside .task-detail-header */
}

/* Progress bar + cancel button side-by-side when task is running */
.task-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.task-progress-row .task-progress {
    flex: 1 1 auto;
    margin-bottom: 0;
}
.task-progress-row md-filled-button {
    flex-shrink: 0;
}

.task-progress {
    position: relative;
    height: 22px;
    border-radius: 100px;
    background-color: var(--md-sys-color-surface-container-high);
    overflow: hidden;
    margin-bottom: 16px;
}
.task-progress-fill {
    height: 100%;
    background-color: var(--md-sys-color-primary, #FAC73C);
    transition: width 0.3s ease;
}
.task-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.task-detail-timing {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    font-size: 0.85rem;
    margin-bottom: 16px;
}
.task-detail-timing dt { color: var(--md-sys-color-on-surface-variant); }
.task-detail-timing dd { margin: 0; color: var(--md-sys-color-on-surface); }

.task-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.task-review-result {
    margin-bottom: 0;
}
.task-split-origin {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.task-source-directory {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
@media (max-width: 900px) {
    .task-review-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.task-card {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    padding: 16px 18px;
    background-color: var(--md-sys-color-surface-container, #1e1e1e);
    margin-bottom: 16px;
}
.task-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 1rem;
    font-weight: 600;
}
.task-card h4 {
    margin: 16px 0 8px 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
}
.task-card-error {
    border-color: rgba(255, 100, 100, 0.4);
    background-color: rgba(255, 100, 100, 0.06);
}
.task-card-error h3 { color: rgb(255, 160, 160); }
.task-card-warn {
    border-color: rgba(255, 200, 80, 0.4);
    background-color: rgba(255, 200, 80, 0.06);
}
.task-card-warn h3 { color: rgb(255, 220, 140); }

.task-error-text {
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.4);
    color: var(--md-sys-color-on-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.4;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.task-warning-list {
    margin: 0;
    padding-left: 20px;
}
.task-warning-list li { padding: 2px 0; }

.task-summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 0 0 4px 0;
    font-size: 0.9rem;
}
.task-summary dt { color: var(--md-sys-color-on-surface-variant); }
.task-summary dd { margin: 0; }

.task-file-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.88rem;
}
.task-file-list li {
    padding: 2px 0;
    overflow-wrap: anywhere;
}
.task-file-list code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
}
.task-file-meta { color: var(--md-sys-color-on-surface-variant); }

.task-card-payload summary {
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9rem;
}
.task-card-payload pre {
    margin: 12px 0 0 0;
    padding: 12px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.4);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Kind-specific task result cards (file.merge / file.split) */
.task-result-card {
    margin-bottom: 0;
}
.task-result-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface);
}
.task-result-row--link {
    cursor: pointer;
    border-radius: 8px;
    padding: 6px 8px;
    margin: 0 -8px;
    transition: background-color 0.15s;
}
.task-result-row--link:hover {
    background-color: var(--md-sys-color-surface-container-high);
}
.task-result-row--link .material-symbols-outlined:last-child {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 3px;
}
.review-file-item--link {
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 6px;
    margin: 0 -6px;
    transition: background-color 0.15s;
    gap: 6px;
}
.review-file-item--link:hover {
    background-color: var(--md-sys-color-surface-container-high);
}
.review-file-item--link .material-symbols-outlined:last-child {
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
    margin-left: auto;
}
.task-dir-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--md-sys-color-outline-variant);
    text-underline-offset: 3px;
    color: var(--md-sys-color-primary);
    border-radius: 4px;
    padding: 1px 4px;
    margin: 0 -4px;
    transition: background-color 0.15s;
}
.task-dir-link:hover {
    background-color: var(--md-sys-color-surface-container-high);
}
.task-result-row .material-symbols-outlined {
    font-size: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--md-sys-color-primary);
}
.task-result-row--muted,
.task-result-row--muted .material-symbols-outlined {
    color: var(--md-sys-color-on-surface-variant);
}
.task-result-row-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.task-result-row-sub {
    font-size: 0.82rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 2px;
    word-break: break-all;
}

/* ============================================================
   TASK / PROCESS extensions: tabs, log viewer, paging, processes table
   ============================================================ */
.tasks-tabbar {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    margin-bottom: 8px;
}
.tasks-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: -1px;
}
.tasks-tab .material-symbols-outlined { font-size: 20px; }
.tasks-tab:hover { color: var(--md-sys-color-on-surface); }
.tasks-tab.active {
    color: var(--md-sys-color-primary, #FAC73C);
    border-bottom-color: var(--md-sys-color-primary, #FAC73C);
}
.tasks-subtitle {
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0 0 12px 0;
}

.tasks-pager {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    justify-content: flex-end;
}
.tasks-pager-info {
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
}

.task-card-log {
    margin-top: 16px;
}
.task-card-log > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    padding: 4px 0;
}
.task-card-log > summary::-webkit-details-marker { display: none; }
.task-card-log[open] > summary {
    margin-bottom: 12px;
}
.task-log-text {
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.55);
    color: var(--md-sys-color-on-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    max-height: 360px;
    min-height: 160px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.task-log-text.task-log-empty {
    color: var(--md-sys-color-on-surface-variant);
    font-style: italic;
}
.task-log-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

/* ============================================================
   Inline task-progress widget (bind wizard / split dialog)
   ============================================================ */
.task-progress-widget {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 0;
}
.task-progress-widget-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}
.task-progress-widget-details {
    /* summary dl / error pre rendered here */
}
.task-progress-widget-error {
    margin: 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255, 80, 80, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    color: rgb(255, 160, 160);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.task-progress-widget-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--md-sys-color-primary);
    text-decoration: none;
}
.task-progress-widget-link:hover {
    text-decoration: none;
}
.task-progress-widget-link .material-symbols-outlined {
    font-size: 16px;
}

/* ============================================================
   Card-list, entity cards, status badges
   ============================================================ */

/* --- Card list (mobile view) -------------------------------- */
.card-list {
    display: none;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 0;
}

@media (max-width: 768px) {
    /* Only the tables that have a card list to take over. A table without one
       (services, diagnostics) keeps the stacked-row layout further up instead
       of disappearing, which is what used to leave those tabs blank. */
    .data-table-wrap.has-cards { display: none !important; }
    .card-list { display: grid !important; }
}

.entity-card {
    background: var(--surface-a30);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.entity-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.entity-card-label {
    color: var(--text-muted);
    min-width: 90px;
    font-size: 0.75rem;
}

.entity-card-title {
    /* A row, not a block: the documents card puts a checkbox, a 64px thumbnail
       and the name in here, and as inline content they shared a text baseline -
       which the tall thumbnail pushed down, leaving the checkbox and the name
       stuck to its bottom edge. */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.entity-card-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    justify-content: flex-end;
}

/* "Details" - opens the full card in a sheet. Only on screens where the card
   is actually collapsed; on a wide screen the table is showing anyway. */
.entity-card-more {
    display: none;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 6px;
    padding: 4px 8px 4px 4px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--md-sys-color-primary);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    /* A comfortable thumb target without making the card taller than it has
       to be - the padding above does most of the work. */
    min-height: 32px;
}
.entity-card-more .material-symbols-outlined { font-size: 18px; }

/* A card never sets its own width: long unbroken values (a Windows path, a
   GUID) used to push it past the screen and take the page's horizontal scroll
   with them, leaving the actions on the right unreachable. */
.entity-card,
.entity-card-title,
.entity-card-row { min-width: 0; }
.entity-card-title,
.entity-card-row > *:not(.entity-card-label) { overflow-wrap: anywhere; }

/* One type scale in every tile (2026-10-15): title 1rem/500, label
   0.75rem muted, value 0.875rem - whatever widget renders the value (link
   button, GUID, state text). Badges and chips keep their own small size. */
.entity-card { font-size: 0.875rem; line-height: 1.4; }
.entity-card-label { flex: 0 0 auto; min-width: 110px; }
.entity-card-row > *:not(.entity-card-label):not(.chip):not(.status-badge):not(.task-type-badge),
.entity-card-row .table-link-btn,
.entity-card-row .user-enable-state,
.entity-card-row .guid-cell,
.entity-card-row .db-id { font-size: 0.875rem; }
.entity-card-title .doc-name { font-size: inherit; font-weight: inherit; }

/* Upload folder(s) of a record: one line each, unbroken in the table,
   wrapped inside a card, which must never be wider than itself. */
.record-folder { display: inline-flex; flex-direction: column; gap: 2px; white-space: nowrap; min-width: 0; }
.entity-card .record-folder { white-space: normal; overflow-wrap: anywhere; }

/* One line under the card: "Details" left, the card's own actions right. */
.entity-card-foot {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}
.entity-card-foot .entity-card-actions { margin-top: 0; }

@media (max-width: 768px) {
    .entity-card--collapsible .entity-card-foot { display: flex; }
    /* Title + first row is the card; the rest lives behind "Details".
       The sibling selector means "every row that follows another one", which
       is right whether or not the card has a title. */
    .entity-card--collapsible .entity-card-row ~ .entity-card-row { display: none; }
    .entity-card--collapsible .entity-card-more { display: inline-flex; }
    /* The sheet shows everything, whatever the screen. */
    .entity-card--full .entity-card-row { display: flex; }
}

/* --- Status badges ----------------------------------------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.pending   { background: color-mix(in srgb, var(--brand-warning) 20%, transparent); color: var(--brand-warning); }
.status-badge.running   { background: color-mix(in srgb, var(--mbits-blue) 20%, transparent);    color: var(--mbits-blue); }
.status-badge.done      { background: color-mix(in srgb, var(--brand-success) 20%, transparent); color: var(--brand-success); }
.status-badge.failed    { background: color-mix(in srgb, var(--brand-error) 20%, transparent);   color: var(--brand-error); }
.status-badge.cancelled { background: color-mix(in srgb, var(--text-muted) 20%, transparent);    color: var(--text-muted); }
/* A run the service broke off (restart, crash): needs a look, like a
   failure, but it is not one - amber with an outline (V3). */
.status-badge.interrupted { background: color-mix(in srgb, var(--brand-warning) 14%, transparent); color: var(--brand-warning);
                            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-warning) 60%, transparent); }

/* --- Task type badges --------------------------------------- */
.task-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

/* One neutral look for every type: the colour per type said nothing the
   label did not, and five hues in one column made the status colours next
   to it harder to read. */
.task-type-badge {
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
    color: var(--md-sys-color-on-surface, inherit);
}

/* --- Progress bar ------------------------------------------ */
.task-progress-bar {
    height: 4px;
    background: var(--surface-a40);
    border-radius: 2px;
    overflow: hidden;
    width: 100px;
}

.task-progress-bar-fill {
    height: 100%;
    background: var(--mbits-blue);
    transition: width 0.3s ease;
}

/* --- Task warnings ----------------------------------------- */
.task-warnings {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}
.task-warn-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8em;
    color: var(--mbits-yellow, #f5a623);
}
.task-warn-item .material-symbols-outlined {
    font-size: 14px;
}

/* --- Unseen badge ------------------------------------------ */
.unseen-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--mbits-yellow);
    color: #000;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 6px;
}

/* --- Task rows (clickable -> detail modal) ------------------ */
.task-row-clickable { cursor: pointer; }

/* --- Modal hint text ----------------------------------------- */
.app-modal-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 4px;
}
.app-modal-hint code {
    background: var(--surface-a40);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.85em;
}

/* --- Task detail modal --------------------------------------- */
.app-modal-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 16px;
}
.task-detail-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.task-detail-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.task-result-files {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
}
.task-result-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.task-result-file-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 0.85rem; }
.task-result-name-list {
    max-height: 160px;
    overflow-y: auto;
    margin: 4px 0 0;
    padding-left: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* --- Tasks/Explorer nav badges --------------------------------- */
.rail-item { position: relative; }
.rail-badge-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.rail-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
}
.rail-badge-running {
    background: color-mix(in srgb, var(--mbits-blue) 25%, transparent);
    color: var(--mbits-blue);
}
.rail-badge-unseen {
    background: color-mix(in srgb, var(--brand-success) 25%, transparent);
    color: var(--brand-success);
}
.rail-badge-unseen-error {
    background: color-mix(in srgb, var(--brand-error) 25%, transparent);
    color: var(--brand-error);
}


/* --- Explorer node list ------------------------------------ */

/* --- Segmented filter (task origin, log category) ----------- */
.segmented-btn {
    border: 1px solid var(--md-sys-color-outline-variant);
    background: none;
    color: var(--text-secondary);
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}
.segmented-btn:first-child { border-radius: 8px 0 0 8px; }
.segmented-btn:last-child  { border-radius: 0 8px 8px 0; }
.segmented-btn:not(:first-child) { border-left: none; }
.segmented-btn:hover { background: var(--surface-a40); color: var(--text-primary); }
.segmented-btn.active {
    background: color-mix(in srgb, var(--mbits-yellow) 18%, transparent);
    color: var(--mbits-yellow);
    border-color: var(--mbits-yellow);
}
/* The neighbour's removed left border would hide the active outline. */
.segmented-btn.active + .segmented-btn { border-left: 1px solid var(--mbits-yellow); }

/* "Ausgelöst von": a chip for the route (UI / service / command line) next to
   the person, because all three kinds share one list and the route is what
   distinguishes them. */
.task-origin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Documents list: where a shared row actually sits. Lost when the "Ordner"
   column became "Benutzer" - an archived PDF showing its origin pool and
   nothing else reads as if it had never left the folder. */
.doc-pool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.doc-place-chip {
    padding: 2px 7px;
    font-size: 0.6875rem;
    background-color: color-mix(in srgb, var(--text-muted) 20%, transparent);
    color: var(--text-muted);
}

/* --- Legal pages ---
   Without a session they render their own centred shell (no rail); with one they
   are ordinary views inside the app's content column, so the card chrome comes
   off and they sit like every other page. --- */
.legal-card.legal-inline {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    max-width: 900px;
}

.legal-shell {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 48px 16px;
    overflow-y: auto;
}

.legal-card {
    width: 100%;
    max-width: 820px;
    background: var(--surface-a10);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 16px;
    padding: 32px 36px;
    height: fit-content;
}

.legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.legal-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.link-like {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--mbits-yellow);
    cursor: pointer;
    text-decoration: none;
}
.link-like:hover { text-decoration: underline; }

/* Rendered markdown (built as DOM nodes, never innerHTML) */
.markdown-body { color: var(--text-primary); line-height: 1.6; }
.markdown-body h1 { font-size: 1.5rem; margin: 24px 0 12px; }
.markdown-body h2 { font-size: 1.25rem; margin: 20px 0 10px; }
.markdown-body h3 { font-size: 1.0625rem; margin: 16px 0 8px; }
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 { font-size: 0.9375rem; margin: 14px 0 6px; }
.markdown-body p { margin: 0 0 12px; }
.markdown-body ul,
.markdown-body ol { margin: 0 0 12px; padding-left: 24px; }
.markdown-body li { margin-bottom: 4px; }
.markdown-body a { color: var(--mbits-yellow); }
.markdown-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
    background: var(--surface-a20);
    padding: 1px 5px;
    border-radius: 4px;
}
.markdown-body blockquote {
    margin: 0 0 12px;
    padding: 4px 14px;
    border-left: 3px solid var(--md-sys-color-outline-variant);
    color: var(--text-secondary);
}
.markdown-body hr {
    border: none;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin: 20px 0;
}
.markdown-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    background: var(--surface-a20);
    padding: 12px 14px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0 0 12px;
}

/* --- Log toolbar ---------------------------------------------- */
.log-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* --- Settings > System -------------------------------------- */
.sys-section-title { margin: 20px 0 8px; }
.sys-kv {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 16px;
    font-size: 0.875rem;
    margin-bottom: 10px;
    max-width: 760px;
}
.sys-kv-label { color: var(--text-muted); }
.sys-kv-value { overflow-wrap: anywhere; }
.sys-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sys-progress { width: 160px; }
.sys-dir-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 760px;
    margin: 6px 0;
}
.sys-dir-row > .field-with-help,
.sys-dir-row > md-outlined-text-field { flex: 1 1 320px; min-width: 0; }

.sys-job-log-row td { padding-top: 0; }
@media (max-width: 768px) {
    .sys-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .sys-kv-value { margin-bottom: 6px; }
}

/* Maintenance view: above everything, including modals - DocLink itself is
   stopped underneath it while a restore or a version switch runs. */
.maint-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: color-mix(in srgb, var(--md-sys-color-background) 88%, transparent);
}
.maint-card {
    width: min(720px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 24px;
    border-radius: 16px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.maint-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.maint-head md-circular-progress { --md-circular-progress-size: 32px; flex: 0 0 auto; }
.maint-title { font-size: 1.25rem; font-weight: 600; }
.maint-status {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.875rem;
}
.maint-note { margin: 10px 0; font-size: 0.875rem; }
/* The status lines above, "Hide" at the bottom right like every dialog's
   buttons - with what hiding means as a quiet line beside it. */
.maint-actions {
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.maint-hide-hint { flex: 1 1 auto; font-size: 0.8125rem; }
.maint-note:empty { display: none; }
.maint-log {
    max-height: 320px;
    overflow: auto;
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--md-sys-color-surface-container-lowest);
    font-size: 0.75rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Directories: where a pool comes from, and the state of a listed pool
   that has no folder yet. */
.pool-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pool-origin { font-size: 0.75rem; color: var(--text-muted); }

/* --- Services tab ------------------------------------------- */
.service-runner-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.service-runner-meta {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.settings-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    max-width: 720px;
    margin-bottom: 14px;
}

/* "In mRay eintragen": the mRay options the administrator sets himself
   (DocLink button, PDF import DPI) - DocLink writes neither. Top of the
   Users/Groups tabs and in Settings > mRay. */
.mray-manual-box {
    border-left: 4px solid var(--brand-info);
    background: var(--surface-a20);
    padding: 10px 14px;
    border-radius: 6px;
    margin: 0 0 16px;
    max-width: 720px;
    font-size: 0.8125rem;
}
.mray-manual-box .mray-manual-title {
    font-weight: 600;
    margin-bottom: 4px;
}
.mray-manual-box p { margin: 4px 0; color: var(--text-muted); }
.mray-manual-box code { font-family: ui-monospace, Consolas, monospace; }
.mray-manual-box pre {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8125rem;
    background: var(--surface-a10);
    padding: 8px 10px;
    border-radius: 4px;
    margin: 6px 0;
    overflow-x: auto;
    white-space: pre;
}
.mray-manual-box .mray-manual-part + .mray-manual-part { margin-top: 12px; }
.mray-manual-box.warn { border-left-color: var(--brand-warning); }

.service-interval-field {
    width: 110px;
}

/* --- Settings tabs ----------------------------------------- */
.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--surface-a40);
    margin-bottom: 24px;
}

.settings-tab {
    padding: 10px 16px;
    border-radius: 8px 8px 0 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    /* A native <button> does not inherit the document font - without this the
       tabs render in the UA font while everything around them is Roboto. */
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.settings-tab:hover { background: var(--surface-a40); color: var(--text-primary); }
.settings-tab.active { color: var(--mbits-yellow); border-bottom-color: var(--mbits-yellow); }

/* Under the log's search field: which days were searched, or why the query
   was refused. */
.log-search-status {
    font-size: 0.8125rem;
    margin: -4px 0 8px;
    min-height: 1.2em;
}

/* --- Log tail ---------------------------------------- */
.log-tail-pre {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--surface-a20);
    border-radius: 6px;
    padding: 12px;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Fills what the page leaves over, and scrolls on its own - see
   .app-content.is-fullpage-view. A fixed height here (it used to be
   calc(100vh - 160px)) always overshot, because the heading and the filter bar
   above it are part of the same column: the content area then scrolled too. */
.log-tail-fullpage {
    max-height: none;
    height: auto;
    flex: 1 1 0;
    min-height: 0;
    margin-top: 12px;
    font-size: 0.8rem;
}

/* A view that scrolls inside itself instead of scrolling the page. */
.app-content.is-fullpage-view { overflow: hidden; }
.app-content.is-fullpage-view .content-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* --- crudTable page header --------------------------------- */
.crud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Sync-health line under the header of the mirrored lists (Users/Groups/Dirs) */
.mray-sync-status {
    font-size: 0.8125rem;
    margin: -8px 0 12px;
    min-height: 1em;
}

/* Login/flag switches in the user modal */
.user-flag-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.text-success { color: var(--brand-success, #4caf50); }

/* DocLink access in the users table - reported, not set: it follows the group
   selection (see Gruppen). */
.user-enable-state { font-size: 0.75rem; white-space: nowrap; }

/* mRay GUIDs: opaque hex, middle-truncated in tables */
.guid-cell {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8125rem;
    word-break: break-all;
}

.crud-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.crud-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Page loading spinner — overlays content-inner while view loads */
.content-inner {
    position: relative;
}

.page-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    z-index: 20;
    background: var(--md-sys-color-surface, #1c1b1f);
    border-radius: 4px;
}

/* ── Slideshow ──────────────────────────────────────────────── */
.slideshow-header {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px;
    background: rgba(0,0,0,.7); flex-shrink: 0;
}
.slideshow-title {
    flex: 1; font-size: .95rem; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: #fff;
}
.slideshow-counter { font-size: .85rem; color: rgba(255,255,255,.6); white-space: nowrap; }
.slideshow-close-btn {
    background: none; border: 0; cursor: pointer; color: #fff;
    display: flex; align-items: center; padding: 4px;
    font-family: 'Material Symbols Outlined'; font-size: 22px;
}
.slideshow-stage {
    flex: 1; position: relative; overflow: hidden; display: flex;
    align-items: center; justify-content: center; background: #111;
    min-height: 0;
}
.slideshow-content-wrap {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.slideshow-content { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.slideshow-content--embed { width: 100%; height: 100%; border: 0; }
.slideshow-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.12); border: 0; color: #fff; border-radius: 50%;
    width: 48px; height: 48px; cursor: pointer; z-index: 1;
    font-family: 'Material Symbols Outlined'; font-size: 28px;
    display: flex; align-items: center; justify-content: center;
}
.slideshow-nav:hover { background: rgba(255,255,255,.24); }
.slideshow-nav:disabled { opacity: .3; pointer-events: none; }
.slideshow-nav.prev { left: 12px; }
.slideshow-nav.next { right: 12px; }
.slideshow-strip {
    display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto;
    background: rgba(0,0,0,.8); flex-shrink: 0;
}
.slideshow-strip-item {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 6px; overflow: hidden;
    cursor: pointer; border: 2px solid transparent;
    background: var(--md-sys-color-surface-container);
    display: flex; align-items: center; justify-content: center;
}
.slideshow-strip-item.active { border-color: var(--mbits-yellow); }
.slideshow-strip-item img { width: 100%; height: 100%; object-fit: cover; }
.slideshow-loading, .slideshow-nofile {
    font-size: 64px; color: rgba(255,255,255,.3);
    font-family: 'Material Symbols Outlined';
}
.slideshow-nofile-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    color: rgba(255,255,255,.5);
}
.slideshow-dl-link { color: inherit; font-size: .9rem; }

/* ── Tile checkbox ───────────────────────────────────────────── */
.tile-checkbox {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    width: 20px; height: 20px; cursor: pointer;
    accent-color: var(--mbits-yellow);
    opacity: 0; transition: opacity .15s; pointer-events: none;
}

/* ── Row checkbox ────────────────────────────────────────────── */


/* ── Search bar + Pagination ─────────────────────────────────── */
.table-search-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0 12px;
}
.table-search-bar .material-symbols-outlined {
    font-size: 20px; color: var(--md-sys-color-on-surface-variant); flex-shrink: 0;
}
/* As wide as the table below it, styled like the other input fields
   (cf. .grant-subpath, which mimics the md-outlined-text-field look). */
.table-search-input {
    flex: 1;
    background: var(--md-sys-color-surface-container-highest, #2a2a2e);
    border: 1px solid var(--md-sys-color-outline, #555);
    border-radius: 4px; padding: 14px 12px;
    color: var(--md-sys-color-on-surface, #e6e6e6);
    font: inherit; font-size: 0.9rem; outline: none;
    transition: border-color 0.15s;
}
.table-search-input:focus { border-color: var(--md-sys-color-primary); }
.table-search-input::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: .7; }
/* A query is a filter the list is silently applying - what is shown is not
   everything. Yellow + a thicker border makes that state impossible to miss,
   the same way an active filter chip would elsewhere in the UI. */
.search-input-wrap.has-value .table-search-input {
    border-color: #e0b400;
    border-width: 2px;
    /* Each side 1px less than without the border, so the thicker border does
       not shift the field's outer box or the text inside it. The right side
       keeps the room the clear-X needs - which is on screen in exactly this
       state, so shorthand-clobbering it would run the text under the button. */
    padding: 13px 27px 13px 11px;
}
/* Suppress the browser's own native clear-X on <input type="search"> - we
   render our own .search-clear-btn, so without this the field shows two X
   buttons (the native one appears on hover in some browsers). */
.table-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.table-search-input::-webkit-search-decoration { -webkit-appearance: none; }

.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}
.search-input-wrap .table-search-input {
    width: 100%;
    max-width: none;
    padding-right: 28px;
}
.search-clear-btn {
    position: absolute;
    right: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border: none; border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer; padding: 0;
}
.search-clear-btn:hover { background: var(--md-sys-color-surface-container-highest); }
.search-clear-btn .material-symbols-outlined { font-size: 16px; }
.search-input-wrap.has-value .search-clear-btn { display: flex; }

.search-help-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex-shrink: 0;
    border: none; border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer; padding: 0;
}
.search-help-btn:hover { background: var(--md-sys-color-surface-container-highest); }
.search-help-btn .material-symbols-outlined { font-size: 19px; }

.pagination-bar {
    display: flex; align-items: center; gap: 2px;
    padding: 10px 0 2px; justify-content: flex-end; flex-wrap: wrap;
}
.pagination-info {
    font-size: 0.82rem; color: var(--md-sys-color-on-surface-variant);
    margin-right: 6px;
}
/* While the rows of the page asked for are being fetched (gotoPage). */
.pagination-bar.loading { opacity: 0.6; pointer-events: none; cursor: progress; }
.pagination-page {
    min-width: 30px; height: 30px; padding: 0 6px;
    border-radius: 6px; font-size: 0.85rem;
    background: transparent; color: inherit;
    border: 1px solid transparent; cursor: pointer;
    transition: background 0.1s;
}
.pagination-page:hover { background: var(--md-sys-color-surface-container-high); }
.pagination-page.active {
    background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary);
}

/* ── Selection action bar ────────────────────────────────────── */
/* Thumbnails in the Documents table: the generated thumbnail is 512px,
   the row wants a compact preview (cf. .wiz-file-thumb). */
.doc-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--md-sys-color-surface-container-high);
    overflow: hidden;
}
.doc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.doc-thumb-clickable { cursor: zoom-in; }
.doc-thumb-clickable:hover { outline: 2px solid var(--md-sys-color-primary); }
.doc-thumb .material-symbols-outlined {
    font-size: 30px;
    color: var(--text-muted);
}

/* The documents lists are scanned, not read line by line: a slightly larger
   preview earns its place, the generous cell padding does not. The row is as
   tall as the thumbnail either way, so taking the padding down to 6px makes
   the row shorter than before (76px) *and* the preview bigger (64px, was 56px
   in an 84px row). Text cells simply centre in that height. */
.data-table.data-table-docs tbody td {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Clicking the row picks it (see rowClickTarget in spa.js). */
.row-clickable { cursor: pointer; }

/* Unseen documents: bold until first shown */
.doc-unseen { font-weight: 700; }

/* Same signal for the records a DICOM scan discovers (patients, studies):
   bold until the list has shown them once. One rule for "this is new to you",
   wherever it appears. */
.entity-unseen { font-weight: 700; }

/* "Benutzer" column: the display name, with the login under it. Stacked rather
   than side by side because the name is what is read and the login is what is
   searched for - and a table row should not grow wider for the second one. */
.doc-user {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.3;
}
.doc-user-login {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Right-click context menu */
.ctx-menu {
    position: fixed;
    z-index: 3000;
    min-width: 200px;
    padding: 6px;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
}
.ctx-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
}
.ctx-menu-item:hover { background: var(--md-sys-color-surface-container-highest); }
.ctx-menu-item .material-symbols-outlined { font-size: 18px; color: var(--text-muted); }

/* Row-selection checkbox in the Documents table */
.doc-select input {
    width: 18px;
    height: 18px;
    accent-color: var(--mbits-yellow);
    cursor: pointer;
}
.col-doc-select, .col-row-select { width: 32px; }
/* The generic row checkbox (makeSelectionBar) - same footprint as the one the
   documents table has always had. */
.row-select { display: inline-flex; align-items: center; }

/* The actions for the ticked rows float at the bottom of the screen
   (2026-10-10) - over the content area, right of the 280 px rail - so they
   stay in reach however far the list is scrolled. */
.explorer-sel-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--md-sys-color-surface-container-high, var(--md-sys-color-surface-container));
    border-radius: 16px; border: 1px solid var(--md-sys-color-outline-variant);
    position: fixed;
    z-index: 97;
    bottom: 20px;
    left: calc(280px + 24px);
    right: 24px;
    max-width: 1232px;
    margin: 0 auto;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
/* Room under the last row, so the bar never covers it. */
.content-inner:has(.explorer-sel-bar) { padding-bottom: 96px; }
.app-shell.no-rail .explorer-sel-bar { left: 24px; }
@media (max-width: 960px) {
    /* No rail beside the content; the round menu button sits bottom right. */
    .explorer-sel-bar { left: 12px; right: 12px; bottom: 92px; }
}
.sel-count { flex: 1; font-size: .9rem; color: var(--md-sys-color-on-surface-variant); }
.sel-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Wizard ──────────────────────────────────────────────────── */
.app-modal-card--wizard { max-width: 680px; }
.app-modal-card--task-detail { max-width: 640px; }
.wizard-steps { display: flex; gap: 6px; }
.wizard-step {
    flex: 1; height: 4px; border-radius: 2px;
    background: var(--md-sys-color-outline-variant);
}
.wizard-step.active { background: var(--mbits-yellow); }
.wizard-step.done   { background: color-mix(in srgb, var(--mbits-yellow) 50%, transparent); }
.wizard-section-title {
    font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--md-sys-color-on-surface-variant); margin: 16px 0 6px;
}
.search-results {
    list-style: none; margin: 4px 0 0; padding: 0;
    border: 1px solid var(--md-sys-color-outline-variant); border-radius: 8px;
    overflow: hidden; max-height: 180px; overflow-y: auto;
}
.search-results li {
    padding: 10px 14px; cursor: pointer; font-size: .9rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.search-results li:last-child { border-bottom: 0; }
.search-results li:hover { background: var(--md-sys-color-surface-container); }
.selected-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
    border-radius: 999px; background: color-mix(in srgb, var(--mbits-yellow) 15%, transparent);
    font-size: .85rem; margin-top: 8px;
}
.selected-chip button {
    background: none; border: 0; cursor: pointer; padding: 0;
    display: flex; align-items: center; color: inherit;
}
.create-new-section { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }

/* --- Group member picker ------------------------------------ */
.member-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
    align-items: center;
}

.member-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-a20);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px;
    padding: 3px 6px 3px 12px;
    font-size: 0.8125rem;
}
.member-chip button {
    display: inline-flex;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}
.member-chip button:hover { color: var(--brand-error); }
.member-chip .material-symbols-outlined { font-size: 16px; }

.member-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    padding: 6px;
}

.member-result {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: none;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}
.member-result:hover { background: var(--surface-a40); }
.member-result .material-symbols-outlined { font-size: 18px; color: var(--text-muted); }

/* --- Bind output configuration (one block per kind) ---------- */
.output-config {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
}

.output-enable {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.output-config-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Login footer (legal links) ------------------------------ */
.login-legal {
    margin-top: 20px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    gap: 6px;
}

/* --- Sortable column headers -------------------------------- */
.data-table th .sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* No underline on a column heading: it reads as a link to somewhere, and the
   sort arrow already says the header is interactive. The colour shift is the
   hover affordance instead. */
.data-table th .sort-btn:hover { color: var(--md-sys-color-on-surface); }

.data-table th .sort-arrow {
    font-family: 'Material Symbols Outlined';
    font-size: 16px;
    /* The inactive arrow stays in the layout rather than appearing on hover:
       the header must not change width when a column becomes the sorted one. */
    opacity: 0.35;
}

.data-table th .sort-btn.sorted { font-weight: 700; }
.data-table th .sort-btn.sorted .sort-arrow { opacity: 1; }


/* --- Field help (the "?" next to a setting) --------------------------------
   One sentence per field, on demand: a title for hover, a popover for click,
   so the form stays a form and not a manual. */
.field-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: help;
    padding: 0;
    flex: 0 0 auto;
}
.field-help:hover, .field-help:focus-visible { color: var(--mbits-yellow); background: var(--surface-a20); }
.field-help .material-symbols-outlined { font-size: 18px; }
.field-with-help {
    display: flex;
    align-items: center;
    gap: 2px;
}
.field-with-help > :first-child { flex: 1 1 auto; min-width: 0; }
.help-popover {
    position: fixed;
    z-index: 1200;
    max-width: 340px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface-a10, #222);
    color: var(--text-primary, #eee);
    border: 1px solid var(--outline, #555);
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* Diagnostics: buttons sit directly above the table, outside a form-stack. */
.form-actions + .data-table-wrap { margin-top: 16px; }

/* Document name: plain text now - downloads live in the selection bar, the
   context menu and the gallery, not behind the name. */
.doc-name { color: inherit; }

/* Legal pages: the leading blockquote is the "this is a template" callout. */
.legal-card .markdown-body > blockquote:first-child {
    border-left: 4px solid var(--mbits-yellow);
    background: var(--surface-a20);
    padding: 10px 14px;
    border-radius: 6px;
    margin: 0 0 18px;
}

/* ── Accessibility: keyboard focus (audit 3.9) ──────────────────────────────
   Rows, cards and tiles became focusable (tabindex) so they can be operated
   from the keyboard; the ring says where the focus is. :focus-visible keeps
   it away from mouse clicks. The gallery arrows are icon spans now, so the
   glyph takes the button's size instead of the icon class's 24px. */
tr[tabindex]:focus-visible,
.entity-card[tabindex]:focus-visible,
.slideshow-strip-item:focus-visible,
.wiz-file-click:focus-visible,
.doc-thumb[tabindex]:focus-visible,
.combo-item:focus-visible,
.slideshow-nav:focus-visible,
.slideshow-close-btn:focus-visible,
.slideshow-dl:focus-visible,
.wiz-reorder-btn:focus-visible,
.search-clear-btn:focus-visible,
.search-help-btn:focus-visible,
.pagination-page:focus-visible,
.settings-tab:focus-visible,
.segmented-btn:focus-visible,
.sort-btn:focus-visible,
.user-chip:focus-visible,
.mobile-fab:focus-visible,
.entity-card-more:focus-visible,
.link-like:focus-visible,
.table-link-btn:focus-visible,
.ctx-menu-item:focus-visible {
    outline: 2px solid var(--mbits-yellow);
    outline-offset: 2px;
}
tr[tabindex]:focus-visible { outline-offset: -2px; }
.app-modal-card:focus, .wizard-overlay:focus { outline: none; }
.slideshow-nav .material-symbols-outlined { font-size: inherit; }

/* --- Groups tab: additional pools ---------------------------- */
.extra-pools-panel {
    border-left: 4px solid var(--brand-info);
    background: var(--surface-a20);
    padding: 10px 14px;
    border-radius: 6px;
    margin: 0 0 16px;
    max-width: 720px;
    font-size: 0.8125rem;
}
.extra-pools-panel p { margin: 4px 0 8px; }
.extra-pools-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.extra-pool-chip { display: inline-flex; align-items: center; gap: 2px; }
.extra-pool-chip .table-link-btn { padding: 0; }
.extra-pools-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.extra-pools-add md-outlined-text-field,
.extra-pools-add md-filled-text-field { flex: 1 1 240px; min-width: 0; }

/* --- Groups tab: members dialog --------------------------------- */
.group-member-row { display: flex; align-items: center; gap: 8px; }
.group-member-row .material-symbols-outlined { font-size: 18px; color: var(--text-muted); }

/* --- Version tag (rail and login page) ----------------------------- */
/* Flush with what is around it: in the rail with the icons of the menu items
   (their margin 12px + padding 20px), on the login card centred under the
   legal links in their font. */
.rail-version, .login-version {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rail-version { padding: 6px 16px 12px 32px; }
.login-version { text-align: center; margin-top: 6px; }

/* --- Studies: details dialog ------------------------------------- */
.study-details-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    font-size: 0.875rem;
    word-break: break-word;
}

/* --- Preview size (small / medium / large), see thumbSizeToggle -----
   Only the bind wizard's file step has the switch now (2026-10-15): the
   documents lists show small previews in the table and large ones in the
   tiles, so these classes size the wizard's thumbnails alone. */
.thumb-size-toggle { display: inline-flex; }
.thumb-size-toggle .segmented-btn { display: inline-flex; align-items: center; padding: 4px 10px; }
.thumb-size-toggle .material-symbols-outlined { font-size: 20px; }
.wizard-files-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
body.thumbs-m .wiz-file-thumb, body.thumbs-m .wiz-file-thumb img { width: 96px; height: 96px; }
body.thumbs-l .wiz-file-thumb, body.thumbs-l .wiz-file-thumb img { width: 180px; height: 180px; }

/* --- Server-paged lists: "N von M" and "Mehr laden" (M7, V2/V3) --- */
.list-more-bar {
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
    gap: 8px 12px; padding: 10px 0 2px;
}
.list-more-info { font-size: 0.82rem; color: var(--md-sys-color-on-surface-variant); }
.list-more-hint { font-size: 0.78rem; }

/* Legal page that could not be loaded: a message instead of "Wird geladen" (W54). */
.legal-load-error { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.legal-load-error .text-muted { font-size: 0.82rem; }

/* --- r3f (2026-10-11): sync brake, mail errors, maintenance details ------ */
.text-warn { color: var(--brand-warning); }

/* The mRay sync held by the mass-delete brake: Users tab and Settings › mRay. */
.sync-brake-banner {
    border-left: 4px solid var(--brand-warning);
    background: color-mix(in srgb, var(--brand-warning) 10%, transparent);
    padding: 10px 14px;
    border-radius: 6px;
    margin: 0 0 16px;
    max-width: 820px;
    font-size: 0.875rem;
}
.sync-brake-head { display: flex; align-items: center; gap: 8px; color: var(--brand-warning); }
.sync-brake-banner p { margin: 6px 0; }
.sync-brake-list summary { cursor: pointer; margin: 4px 0; }
.sync-brake-list ul { margin: 4px 0 8px; padding-left: 20px; max-height: 220px; overflow: auto;
                      font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; }
.sync-brake-message { font-size: 0.8125rem; }

/* A mail to this user could not be sent (UserOut.last_mail_error). */
.user-mail-error { color: var(--brand-warning); font-size: 1rem; vertical-align: middle; margin-left: 4px; cursor: help; }

/* Maintenance job details: error, console tail, restore result. */
.maint-detail { margin-top: 10px; font-size: 0.8125rem; }
.maint-detail-title { font-weight: 600; margin: 8px 0 4px; }
.maint-console {
    font-family: ui-monospace, Consolas, monospace; font-size: 0.75rem;
    background: var(--surface-a10); padding: 8px 10px; border-radius: 4px;
    max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 4px 0;
}
.maint-restore-notes { margin: 6px 0; padding-left: 18px; }
.maint-restore-notes li { margin: 2px 0; }

/* Settings: a field that only applies with a newer server. */
.settings-field-missing { font-size: 0.75rem; }

/* --- Table or tiles (2026-10-15), see viewModeToggle -------------------
   One switch "Tabelle | Kacheln" next to the search of every list. Tiles:
   the card list replaces the table on any screen, as a grid. On a narrow
   screen the list is tiles anyway (see .card-list above), so the switch
   has nothing to offer there. */
.view-mode-toggle { display: inline-flex; flex-shrink: 0; }
.view-mode-toggle .segmented-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; }
.view-mode-toggle .material-symbols-outlined { font-size: 20px; }
.data-table-wrap.view-hidden { display: none; }
.card-list.card-list--tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
/* On a wide screen the tile is the whole card: the footer only carries its
   actions (the select box), "Details" stays hidden there. */
.card-list--tiles .entity-card-foot { display: flex; justify-content: flex-end; }
.card-list--tiles .entity-card-foot .entity-card-more { display: none; }
/* Documents, archive, trash: the tile leads with a large preview. */
.card-list--tiles .doc-card .entity-card-title { flex-wrap: wrap; }
.card-list--tiles .doc-card .doc-thumb { order: -1; width: 100%; height: 200px; }
@media (max-width: 768px) {
    .view-mode-toggle:not(.login-lang-switch) { display: none; }
    .card-list--tiles .entity-card--collapsible .entity-card-foot { justify-content: space-between; }
    .card-list--tiles .entity-card--collapsible .entity-card-foot .entity-card-more { display: inline-flex; }
}

/* Login page: the language switch DE | EN, top right. */
.login-shell { position: relative; }
.login-lang-bar { position: absolute; top: 16px; right: 16px; }
.login-lang-switch .segmented-btn { padding: 6px 12px; }

/* "Delete permanently?" - the names of the files, a few at most. */
.del-forever-list { margin: 8px 0 0; padding-left: 20px; overflow-wrap: anywhere; }