/* ============================================================================
   Klar shell (Phase 2): app bar (SH-1), rail (SH-2), account menu (SH-3),
   working list panel (SH-5), phone shell (SH-7), database chip and list (MA-7).
   Components: Components/Layout (MainLayout, NavMenu, AccountMenu, DatabaseChip,
   BottomTabs, DatabaseChooser), Components/Klar/WorkingList.

   Theme tokens only (palette + --klar-*), so Klar and Nucera, light and dark,
   follow. The rail keeps the look of the drawer it replaces: the drawer
   background, the rail tokens (--klar-rail-hover/-active/-line/-accent) and the
   active item's leading accent bar, which ThemeFileTests measure.

   Widths (proposal 4.3): full rail >= 1280 px; icon rail 56 px with tooltips at
   600-1279 px (the Menu button opens the full rail over the page); phone < 600 px:
   no rail, bottom tabs and the search as a second row of the bar.
   ========================================================================= */

:root:root {
    --klar-rail-width: 240px;
    --klar-rail-mini: 56px;
    --klar-tabs-height: 64px;
    --klar-shell-rail: var(--klar-rail-width);
}

@media (max-width: 1279.98px) {
    :root:root {
        --klar-shell-rail: var(--klar-rail-mini);
    }
}

@media (max-width: 599.98px) {
    :root:root {
        --klar-shell-rail: 0px;
        /* the search is the bar's second row on a phone (SH-7) */
        --mud-appbar-height: 108px;
    }
}


/* --- the host page's static shell (KlarHostShell, F-SHELL-22) ------------------------------------------------------

   The application starts after the page has loaded: until it draws its first screen the page shows the frame of the
   shell in the theme's colours (KlarHostShell writes them) instead of a blank white body - after every language or
   theme switch too. The frame goes as soon as the application's theme provider is in the body. */
.klar-boot {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.klar-boot-bar {
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--mud-appbar-height, 64px);
    background-color: var(--klar-boot-bar);
}

.klar-boot-rail {
    position: absolute;
    top: var(--mud-appbar-height, 64px);
    bottom: 0;
    left: 0;
    width: var(--klar-shell-rail);
    background-color: var(--klar-boot-rail);
}

.klar-boot-tabs {
    display: none;
}

@media (max-width: 599.98px) {
    .klar-boot-tabs {
        display: block;
        position: absolute;
        inset: auto 0 0 0;
        height: var(--klar-tabs-height);
        background-color: var(--klar-boot-rail);
    }
}

body:has(> style.mud-theme-provider) > .klar-boot {
    display: none;
}


/* --- app bar (SH-1) ----------------------------------------------------- */

.klar-appbar .mud-toolbar-appbar {
    height: var(--mud-appbar-height);
    padding: 0;
}

.klar-appbar-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-width: 0;
    padding: 0 .75rem;
}

.klar-appbar-button {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    position: relative;
    height: 40px;
    min-width: 40px;
    padding: 0 .5rem;
    border: 0;
    border-radius: var(--klar-radius-control);
    background: transparent;
    color: var(--mud-palette-appbar-text);
    font: inherit;
    font-size: .875rem;
    font-weight: 550;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--klar-micro) ease;
}

.klar-appbar-button:hover {
    background-color: var(--klar-rail-hover);
}

.klar-appbar-button:focus-visible {
    outline: 2px solid var(--mud-palette-appbar-text);
    outline-offset: 2px;
}

.klar-appbar-button .mud-icon-root,
.mud-appbar .klar-appbar-button-icon {
    color: var(--mud-palette-appbar-text);
}

/* labels from 1440 px, icons with counts below (SH-1 items 5 and 7) */
.klar-appbar-button-label {
    display: none;
}

@media (min-width: 1440px) {
    .klar-appbar-button-label {
        display: inline;
    }
}

.klar-appbar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3125rem;
    border-radius: 999px;
    background-color: var(--mud-palette-appbar-text);
    color: var(--mud-palette-appbar-background);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* the Menu button toggles the rail below 1280 px only */
.klar-appbar-menu {
    padding: 0;
    justify-content: center;
}

@media (min-width: 1280px), (max-width: 599.98px) {
    .klar-appbar-menu {
        display: none;
    }
}

/* the app mark: the logo of the app settings when set, else the title */
.klar-appmark {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: none;
    height: 40px;
    padding: 0 .375rem;
    color: var(--mud-palette-appbar-text);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: .01em;
}

.klar-appmark:focus-visible {
    outline: 2px solid var(--mud-palette-appbar-text);
    outline-offset: 2px;
}

.klar-appmark-logo {
    height: 32px;
    width: auto;
}

/* a logo that carries the name makes the title redundant */
.klar-appmark:has(.klar-appmark-logo:not([style*="display: none"])) .klar-appmark-title {
    display: none;
}

.klar-appbar-search {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.klar-appbar-search .cp-trigger {
    max-width: 640px;
}

/* the search takes the room the other items leave (they never shrink): its label ends in "…", the Ctrl K hint goes
   first - a minimum width here squeezed the database chip until its environment ran over the field (German at 625 px) */
@media (min-width: 600px) and (max-width: 767.98px) {
    .klar-appbar-search .cp-trigger .cp-trigger-kbd {
        display: none;
    }
}

.klar-appbar-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: none;
}

.klar-appbar .klar-jobs-badge .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 14px) calc(100% - 14px);
}


/* --- database chip (SH-1 item 3, MA-7) ---------------------------------- */

/* never narrower than its content: the environment must stay readable (the name ends in "…" at max-width) */
.klar-db-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: none;
    min-width: 0;
    max-width: 360px;
    height: 32px;
    padding: 0 .625rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-appbar-text) 26%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-appbar-text);
    font: inherit;
    font-size: .8125rem;
    white-space: nowrap;
}

button.klar-db-chip {
    cursor: pointer;
}

button.klar-db-chip:hover {
    background-color: var(--klar-rail-hover);
}

.klar-db-chip:focus-visible {
    outline: 2px solid var(--mud-palette-appbar-text);
    outline-offset: 2px;
}

/* the environment: a solid tag, the tone of the environment; the text is the bar's colour on it. It only ends in "…"
   on a very narrow phone (the chip's tooltip has the whole text), it never runs over its neighbours */
.klar-db-env {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: .125rem .4375rem;
    border-radius: 6px;
    background-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    font-size: .6875rem;
    font-weight: 750;
    letter-spacing: .04em;
}

.klar-db-chip--primary .klar-db-env {
    background-color: var(--mud-palette-appbar-text);
    color: var(--mud-palette-appbar-background);
}

.klar-db-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.klar-db-caret {
    margin-inline-start: -.25rem;
}

@media (max-width: 1279.98px) {
    .klar-db-chip .klar-db-name {
        display: none;
    }
}

.klar-db-menu {
    min-width: 360px;
    max-width: min(420px, 100vw - 32px);
}

.klar-db-choice {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
}

.klar-db-radio {
    color: var(--mud-palette-text-secondary);
}

.klar-db-radio--on {
    color: var(--klar-primary-ink);
}

.klar-db-choice-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    text-align: start;
}

.klar-db-choice-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.klar-db-choice-meta {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

/* the current database is not a target, but it stays readable */
.klar-db-item.mud-menu-item-disabled {
    opacity: 1;
    cursor: default;
}


/* --- account menu (SH-3) ------------------------------------------------ */

.klar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--mud-palette-appbar-text) 20%, transparent);
    color: var(--mud-palette-appbar-text);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.klar-avatar--large {
    width: 40px;
    height: 40px;
    font-size: .875rem;
    background-color: color-mix(in srgb, var(--klar-primary-ink) 14%, var(--mud-palette-surface));
    color: var(--klar-primary-ink);
}

.klar-account-menu {
    min-width: 300px;
}

.klar-account-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1rem .5rem;
}

.klar-account-who {
    min-width: 0;
}

.klar-account-display {
    font-weight: 650;
}

.klar-account-user,
.klar-account-db {
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.klar-account-logout .mud-menu-item-text {
    font-weight: 700;
}

.klar-menu-current .mud-menu-item-text {
    font-weight: 650;
}


/* --- rail (SH-2) -------------------------------------------------------- */

.klar-rail {
    position: fixed;
    top: var(--mud-appbar-height);
    bottom: 0;
    left: 0;
    z-index: calc(var(--mud-zindex-appbar) - 1);
    width: var(--klar-shell-rail);
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--mud-palette-drawer-background);
    color: var(--mud-palette-drawer-text);
    border-right: 1px solid var(--klar-rail-line);
    scrollbar-width: thin;
    transition: width var(--klar-standard) var(--klar-ease);
}

/* the rail takes the focus when it opens over the page; its entries show their own focus */
.klar-rail:focus {
    outline: none;
}

.klar-rail-nav {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: .5rem .5rem 1rem;
}

.klar-rail-section + .klar-rail-section {
    margin-top: .75rem;
}

.klar-rail-section--footer {
    margin-top: auto !important;
    padding-top: .5rem;
    border-top: 1px solid var(--klar-rail-line);
}

.klar-rail-section-label {
    padding: .25rem .75rem .25rem;
    color: var(--mud-palette-drawer-icon);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.klar-rail-list,
.klar-rail-children {
    margin: 0;
    padding: 0;
    list-style: none;
}

.klar-rail-item,
.klar-rail-sub {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
    margin: 1px 0;
    border-radius: var(--klar-radius-control);
    color: var(--mud-palette-drawer-text);
    text-decoration: none;
    transition: background-color var(--klar-micro) ease, color var(--klar-micro) ease;
}

.klar-rail-item {
    min-height: 36px;
    padding: 7px 12px;
    font-size: .875rem;
    font-weight: 450;
}

.klar-rail-icon.mud-icon-root {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--mud-palette-drawer-icon);
    transition: color var(--klar-micro) ease;
}

.klar-rail-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.klar-rail-item:hover,
.klar-rail-sub:hover {
    background-color: var(--klar-rail-hover);
    color: var(--mud-palette-white);
}

.klar-rail-item:hover .klar-rail-icon {
    color: var(--mud-palette-white);
}

/* the one active entry: white, bold, the active well and the accent bar (as the drawer's active item) */
.klar-rail-item--active {
    color: var(--mud-palette-white);
    font-weight: 600;
    background-color: var(--klar-rail-active);
}

.klar-rail-item--active:hover {
    background-color: var(--klar-rail-active);
}

.klar-rail-item--active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--klar-rail-accent);
}

.klar-rail-item--active .klar-rail-icon {
    color: var(--klar-rail-accent);
}

.klar-rail-item:focus-visible,
.klar-rail-sub:focus-visible {
    outline: 2px solid var(--klar-rail-accent);
    outline-offset: -2px;
}

/* the always visible children of Products: quieter, indented under the label */
.klar-rail-sub {
    min-height: 30px;
    padding: 4px 12px 4px 46px;
    font-size: .8125rem;
}

.klar-rail-sub--current {
    color: var(--mud-palette-white);
    font-weight: 650;
}

.klar-rail-star.mud-icon-root {
    flex: none;
    width: 16px;
    height: 16px;
    margin-inline-start: -22px;
    color: var(--klar-rail-accent);
}

.klar-rail-count {
    margin-inline-start: auto;
    padding: 0 .375rem;
    border-radius: 999px;
    background-color: var(--klar-rail-hover);
    color: var(--mud-palette-drawer-text);
    font-size: .6875rem;
    font-weight: 650;
    line-height: 1.125rem;
    font-variant-numeric: tabular-nums;
}

/* the icon rail (600-1279 px): icons only, the name as a tooltip on hover and on keyboard focus */
@media (min-width: 600px) and (max-width: 1279.98px) {
    .klar-rail:not(.klar-rail--open) {
        overflow: visible;
    }

    .klar-rail:not(.klar-rail--open) .klar-rail-nav {
        padding: .5rem .375rem 1rem;
    }

    .klar-rail:not(.klar-rail--open) .klar-rail-section-label,
    .klar-rail:not(.klar-rail--open) .klar-rail-children {
        display: none;
    }

    .klar-rail:not(.klar-rail--open) .klar-rail-section + .klar-rail-section {
        margin-top: .5rem;
        padding-top: .5rem;
        border-top: 1px solid var(--klar-rail-line);
    }

    .klar-rail:not(.klar-rail--open) .klar-rail-item {
        justify-content: center;
        padding: 7px 0;
    }

    /* the label stays in the accessibility tree, only its box goes */
    .klar-rail:not(.klar-rail--open) .klar-rail-item .klar-rail-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .klar-rail:not(.klar-rail--open) .klar-rail-item::after {
        content: attr(data-tooltip);
        position: absolute;
        inset-inline-start: calc(100% + 10px);
        top: 50%;
        z-index: 10;
        padding: .3125rem .625rem;
        border-radius: 6px;
        background-color: var(--mud-palette-dark);
        color: var(--mud-palette-dark-text);
        font-size: .8125rem;
        font-weight: 550;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translateY(-50%);
        transition: opacity var(--klar-micro) ease;
    }

    .klar-rail:not(.klar-rail--open) .klar-rail-item:hover::after,
    .klar-rail:not(.klar-rail--open) .klar-rail-item:focus-visible::after {
        opacity: 1;
    }

    /* opened with the Menu button: the full rail over the page */
    .klar-rail--open {
        width: var(--klar-rail-width);
        box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    }
}

.klar-rail-scrim {
    display: none;
}

@media (min-width: 600px) and (max-width: 1279.98px) {
    .klar-rail-scrim {
        display: block;
        position: fixed;
        inset: var(--mud-appbar-height) 0 0 0;
        z-index: calc(var(--mud-zindex-appbar) - 2);
        background-color: rgba(0, 0, 0, .32);
    }
}

@media (max-width: 599.98px) {
    /* the rail's entries live in the "More" sheet on a phone */
    .klar-shell .klar-rail:not(.klar-rail--sheet) {
        display: none;
    }
}

/* the content starts after the rail */
.klar-shell .mud-main-content.klar-main {
    margin-inline-start: var(--klar-shell-rail);
    min-height: 100vh;
    min-height: 100dvh;
}

.klar-content:focus {
    outline: none;
}

/* the page never scrolls sideways (SHELL-21): a table or tab bar that is too wide scrolls in its own container;
   clip (not hidden) keeps sticky heads and save bars working */
.klar-shell .mud-main-content.klar-main {
    overflow-x: clip;
}

/* toasts sit in the content area, beside the rail (proposal 5.6) */
@media (min-width: 600px) {
    body:has(.klar-shell .klar-rail) .mud-snackbar-location-bottom-center {
        left: calc(50% + var(--klar-shell-rail) / 2);
    }
}


/* --- phone shell (SH-7) ------------------------------------------------- */

@media (max-width: 599.98px) {
    .klar-appbar-row {
        flex-wrap: wrap;
        row-gap: 0;
        align-content: center;
        height: 100%;
        padding: .25rem .5rem .5rem;
    }

    .klar-appmark {
        order: 1;
    }

    .klar-appbar-row .klar-db-chip,
    .klar-appbar-row .klar-db {
        order: 2;
    }

    /* the one place the chip may give way: the environment then ends in "…" */
    .klar-appbar-row .klar-db,
    .klar-appbar-row .klar-db-chip {
        flex: 0 1 auto;
        min-width: 0;
    }

    .klar-appbar-actions {
        order: 3;
        margin-inline-start: auto;
    }

    /* the working list lives in the bottom tabs on a phone */
    .klar-appbar-actions .klar-wl-button {
        display: none;
    }

    /* the search field itself, a row of its own */
    .klar-appbar-search {
        order: 4;
        flex: 1 0 100%;
        padding-top: .375rem;
    }

    .klar-appbar-search .cp-trigger {
        width: 100%;
        max-width: none;
        height: 40px;
        justify-content: flex-start;
        padding: 0 .75rem;
        border-color: color-mix(in srgb, var(--mud-palette-appbar-text) 22%, transparent);
        background-color: color-mix(in srgb, var(--mud-palette-appbar-text) 9%, transparent);
    }

    .klar-appbar-search .cp-trigger .cp-trigger-label {
        display: inline;
    }

    .klar-shell .mud-main-content.klar-main {
        padding-bottom: calc(var(--klar-tabs-height) + 1rem + env(safe-area-inset-bottom, 0px));
    }
}

.klar-bottom-tabs {
    display: none;
}

@media (max-width: 599.98px) {
    .klar-bottom-tabs {
        display: flex;
        position: fixed;
        inset: auto 0 0 0;
        z-index: var(--mud-zindex-appbar);
        height: calc(var(--klar-tabs-height) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background-color: var(--mud-palette-drawer-background);
        border-top: 1px solid var(--klar-rail-line);
    }
}

/* scoped to the bottom tabs: .klar-tab alone is the tab of the Klar tabs block (KlarTabs, passports and editors) */
.klar-bottom-tabs .klar-tab {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--mud-palette-drawer-text);
    font: inherit;
    font-size: .6875rem;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
}

.klar-bottom-tabs .klar-tab-icon.mud-icon-root {
    color: var(--mud-palette-drawer-icon);
}

.klar-bottom-tabs .klar-tab-icon-wrap {
    position: relative;
    display: inline-flex;
}

.klar-bottom-tabs .klar-tab-badge {
    position: absolute;
    top: -6px;
    inset-inline-start: 14px;
    background-color: var(--klar-rail-accent);
    color: var(--mud-palette-drawer-background);
}

.klar-bottom-tabs .klar-tab-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.klar-bottom-tabs .klar-tab--active {
    color: var(--mud-palette-white);
    font-weight: 700;
}

.klar-bottom-tabs .klar-tab--active .klar-tab-icon {
    color: var(--klar-rail-accent);
}

.klar-bottom-tabs .klar-tab:focus-visible {
    outline: 2px solid var(--klar-rail-accent);
    outline-offset: -3px;
}

/* the "More" sheet: every other workspace, from the bottom - only with the phone's tabs (from 600 px the rail is back;
   the sheet stayed with icon-only entries, SH-7) */
.klar-sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--mud-zindex-appbar) + 1);
    background-color: rgba(0, 0, 0, .4);
}

.klar-sheet {
    position: fixed;
    inset: auto 0 0 0;
    z-index: calc(var(--mud-zindex-appbar) + 2);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border-radius: 16px 16px 0 0;
    background-color: var(--mud-palette-drawer-background);
    color: var(--mud-palette-drawer-text);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .3);
}

@media (min-width: 600px) {
    .klar-sheet,
    .klar-sheet-scrim {
        display: none;
    }
}

.klar-sheet-head {
    display: flex;
    align-items: center;
    padding: .5rem .5rem .25rem 1rem;
}

.klar-sheet-head .mud-icon-button {
    color: var(--mud-palette-drawer-text);
}

.klar-sheet-title {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--mud-palette-white);
}

.klar-sheet-body {
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.klar-rail--sheet {
    position: static;
    width: auto;
    border: 0;
}

.klar-rail--sheet .klar-rail-nav {
    min-height: 0;
}


/* --- a value sheet is open: no tabs (R3-P1-05) ---------------------------- */

/* the tabs (z-index of the app bar, 1300) covered the Save of the value editor's bottom sheet (klar/values.css, 1150)
   and stayed above its backdrop. The sheet is modal and must stay below the pop-overs (1200, the lists of its fields),
   so the tabs go while it is open: the sheet and its backdrop reach the bottom of the screen. */
:root:has(.klar-value-sheet) .klar-bottom-tabs {
    display: none;
}


/* --- print: the shell never prints -------------------------------------- */

@media print {
    .klar-rail,
    .klar-rail-scrim,
    .klar-bottom-tabs,
    .klar-sheet,
    .klar-sheet-scrim,
    .klar-side-panel,
    .klar-wl-drawer {
        display: none !important;
    }

    .klar-shell .mud-main-content.klar-main {
        margin: 0 !important;
    }
}


/* --- side panels: working list (SH-5), Jobs & downloads (SH-6), bulk change (PR-11) ---------------------------------

   MudBlazor positions a temporary drawer that is not docked in the layout absolutely, at the top of the document:
   opened on a scrolled page the panel was above the screen, out of view. A side panel is fixed to the screen at every
   scroll position, from the top to the bottom of the window. */
.klar-side-panel.mud-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    height: auto;
}

/* Jobs & downloads takes the focus on this wrapper when it opens; the panel fills it (its footer at the bottom) */
.klar-jobs-drawer-body {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 100%;
    outline: none;
}

.klar-jobs-drawer-body > .klar-jobs {
    flex: 1 0 auto;
}


/* --- working list panel (SH-5) ------------------------------------------ */

.klar-wl-drawer.mud-drawer {
    max-width: 100vw;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

@media (max-width: 599.98px) {
    .klar-wl-drawer.mud-drawer {
        width: 100vw !important;
    }
}

/* a closed side panel waits off-screen to the right; out of the layout it cannot widen a phone's page */
.klar-wl-drawer.mud-drawer--closed,
.klar-jobs-drawer.mud-drawer--closed {
    display: none;
}

.klar-wl {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.klar-wl-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem .5rem .5rem 1rem;
    border-bottom: 1px solid var(--klar-hairline);
}

.klar-wl-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 650;
    white-space: nowrap;
}

.klar-wl-title:focus {
    outline: none;
}

.klar-wl-switch {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    max-width: 220px;
    height: 32px;
    padding: 0 .25rem 0 .625rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--klar-radius-control);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
}

.klar-wl-switch:focus-visible {
    outline: 2px solid var(--klar-accent);
    outline-offset: 2px;
}

.klar-wl-switch-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.klar-wl-switcher-menu {
    min-width: 280px;
}

.klar-wl-switcher-item .mud-menu-item-text {
    display: flex;
    flex-direction: column;
}

.klar-wl-switcher-meta {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

.klar-wl-banner {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem 1rem 0;
    padding: .5rem .75rem;
    border-radius: var(--klar-radius-control);
    background-color: color-mix(in srgb, var(--klar-tone-primary) 9%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--klar-tone-primary) 70%, var(--mud-palette-text-primary));
    font-size: .8125rem;
}

.klar-wl-input {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem 1rem 0;
}

.klar-wl-paste {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: .5625rem .75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--klar-radius-control);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: var(--klar-font-mono, ui-monospace, monospace);
    font-size: .875rem;
    line-height: 1.35;
    /* a long pasted list: drag it taller (the rows attribute grows with the text up to twelve lines) */
    resize: vertical;
    max-height: 60vh;
}

.klar-wl-paste:focus {
    outline: 2px solid var(--klar-accent);
    outline-offset: 0;
    border-color: transparent;
}

.klar-wl-paste::placeholder {
    color: var(--mud-palette-text-secondary);
    font-family: var(--klar-font-ui, inherit);
}

.klar-wl-add.mud-button-root {
    flex: none;
    height: 40px;
}

.klar-wl-hint {
    padding: .25rem 1rem 0;
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

.klar-wl-status {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    padding: .625rem 1rem .25rem;
    font-size: .8125rem;
    font-weight: 600;
}

/* the count and, next to it, Copy ▾ and Clear list */
.klar-wl-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 .5rem;
    padding-right: .5rem;
}

.klar-wl-bar > .klar-wl-status {
    flex: 1 1 auto;
}

.klar-wl-bar-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding-top: .375rem;
}

.klar-wl-status-note {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.klar-wl-unknown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin: .25rem 1rem;
    padding: .375rem .5rem .375rem .75rem;
    border-radius: var(--klar-radius-control);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 14%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-text-primary));
    font-size: .8125rem;
}

.klar-wl-unknown-icon.mud-icon-root {
    color: currentColor;
}

.klar-wl-unknown-text {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.klar-wl-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .25rem 0 .5rem;
}

.klar-wl-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.klar-wl-row {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr auto auto;
    align-items: center;
    gap: .5rem;
    min-height: 40px;
    padding: .25rem .5rem .25rem 1rem;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.klar-wl-row:hover {
    background-color: var(--mud-palette-table-hover);
}

.klar-wl-row--archived .klar-wl-serial {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
}

.klar-wl-serial {
    color: var(--klar-primary-ink);
    font-weight: 600;
    font-size: .875rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.klar-wl-serial:hover {
    text-decoration: underline;
}

.klar-wl-type {
    min-width: 0;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.klar-wl-state {
    max-width: 10rem;
}

.klar-wl-remove.mud-icon-button {
    grid-column: 4;
}

/* phones: two lines per row, serial and state first */
@media (max-width: 599.98px) {
    .klar-wl-row {
        grid-template-columns: 1fr auto auto;
    }

    .klar-wl-type {
        grid-row: 2;
        grid-column: 1 / span 2;
    }

    .klar-wl-remove.mud-icon-button {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

.klar-wl-more {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.klar-wl-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--klar-hairline);
    background-color: var(--mud-palette-surface);
}

.klar-wl-overflow {
    margin-inline-start: auto;
}

.klar-wl-toggle--on.mud-icon-button {
    color: var(--klar-primary-ink);
}

.klar-wl-manage {
    margin: 0;
    padding: 0;
    list-style: none;
}

.klar-wl-manage-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem 0;
    border-bottom: 1px solid var(--klar-hairline);
}

.klar-wl-manage-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.klar-wl-manage-name {
    font-weight: 600;
}

.klar-wl-manage-meta,
.klar-wl-share-summary {
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.klar-wl-share {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}


/* --- the list of databases before sign-in (MA-7) ------------------------ */

.klar-db-chooser-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.klar-db-list {
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.klar-db-list-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 56px;
    padding: .5rem .75rem;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-control);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--klar-micro) ease, border-color var(--klar-micro) ease;
}

.klar-db-list-item:hover {
    border-color: var(--mud-palette-lines-inputs);
    background-color: var(--mud-palette-table-hover);
}

.klar-db-list-item:focus-visible {
    outline: 2px solid var(--klar-accent);
    outline-offset: 2px;
}

.klar-db-chooser-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}


/* --- visually hidden, still read -------------------------------------- */

.klar-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* --- Start (ST-1) --------------------------------------------------------- */

/* a long title (German) wraps inside itself; "Show all" and the block menu stay on the title's line */
.klar-start .klar-dash-block .klar-card-h {
    flex-wrap: nowrap;
}

.klar-start .klar-dash-block .klar-card-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.klar-start-search {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.klar-start-search-row {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

.klar-start-search-field {
    flex: 1 1 auto;
    min-height: 48px;
}

.klar-start-search-field .klar-search-input {
    height: 46px;
    font-size: 1rem;
}

.klar-start-search-button.mud-button-root {
    flex: none;
    min-height: 48px;
    padding-inline: 1.375rem;
}

.klar-start-search-popup {
    top: 52px;
}

.klar-start-recent {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .5rem;
    font-size: .8125rem;
}

.klar-start-recent-label {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.klar-start-recent a {
    color: var(--klar-primary-ink);
    text-decoration: none;
}

.klar-start-recent a:hover {
    text-decoration: underline;
}

.klar-start-recent-sep {
    color: var(--mud-palette-text-disabled);
}

.klar-start-role {
    max-width: 360px;
    margin-bottom: .75rem;
}

/* "Today at my stations": ✓ 37  ✗ 2 at the end of a station's row */
.klar-start-today-counts {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-size: .8125rem;
}

.klar-start-today-done,
.klar-start-today-failed {
    display: inline-flex;
    align-items: center;
    gap: .1875rem;
}

@media (max-width: 599.98px) {
    .klar-start-search-button.mud-button-root {
        padding-inline: .875rem;
    }
}


/* --- search (SH-4) and system pages (SI-6) -------------------------------- */

.cp-state-link {
    margin-inline-start: .5rem;
    color: var(--klar-primary-ink);
    font-weight: 600;
    text-decoration: none;
}

.cp-state-link:hover {
    text-decoration: underline;
}

.klar-problem-reference {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.klar-inline-copy {
    padding: .125rem .5rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    background: transparent;
    color: var(--klar-primary-ink);
    font: inherit;
    font-size: .75rem;
    cursor: pointer;
}

.klar-inline-copy:focus-visible {
    outline: 2px solid var(--klar-accent);
    outline-offset: 2px;
}