/* mlsame-only rules shared by more than one app, and the places mlsame keeps its own look over the kit's. */
:root {
    --menu-note-measure: 22rem;
}

/* 7.86:1 contrast ratio. */
.button--accent-alt {
    background: var(--accent-alt);
    color: var(--accent-text);
}

.button--accent-alt:hover {
    background: var(--accent-alt-hover);
}

.button--ghost.button--danger {
    color: var(--danger);
}

.button--ghost.button--danger:hover {
    background: var(--danger-soft);
    color: var(--danger-hover);
}

/* In a stack the gap already separates them; the margin on top doubled it */
.stack > .form-grid + .button-row {
    margin-top: 0;
}

.data-table tbody tr.data-table__row--inactive {
    background: var(--surface-sunken);
}

.modal__panel {
    padding: var(--space-4);
}

@media (min-width: 768px) {
    .modal__panel {
        padding: var(--space-5);
    }
}

/* Card header row: title + one action */
.card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.card__head > .button {
    white-space: nowrap;
}

/* Read view of a card: the value that matters, one quiet line under it */
.card__summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.card__summary > * {
    margin: 0;
}

.card__lead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 600;
}

.card__meta {
    max-width: 60ch;
    color: var(--muted);
    font-size: var(--text-sm);
}

/* The list kit's sheet folds every table cell into one phone line; mlsame's rows keep a label per cell, so the shell's
   card declarations return for the selectors it overrides (the extra ancestor outweighs the kit's selectors). */
@media (max-width: 1249.98px) {
    .data-table-wrap .data-table tbody tr {
        display: flex;
        padding: var(--space-3);
    }

    .data-table-wrap .data-table tbody td {
        display: flex;
        padding: var(--space-1) 0;
    }

    .data-table-wrap .data-table tbody td:not([data-label=""])::before {
        content: attr(data-label);
    }

    .data-table-wrap .data-table tbody td.data-table__cell--headline {
        display: block;
        padding: var(--space-1) 0 var(--space-2);
        order: -1;
    }

    .data-table-wrap .data-table__cell--headline .data-table__name {
        font-size: var(--text-lg);
        padding-inline-end: 0;
    }

    .data-table-wrap a.data-table__name {
        min-height: var(--tap-target);
    }

    .data-table-wrap .data-table__row--linked a.data-table__name {
        min-height: 0;
    }
}

/* The reorderable tables keep the grip a cell of the card on phones (the kit's absolute corner grip needs a
   positioned row and indents the content), and the handle column at desktop width as the list always had it. */
@media (max-width: 1249.98px) {
    .data-table-wrap .data-table tbody tr:has(.data-table__handle) {
        padding-inline-start: var(--space-3);
    }

    .data-table-wrap .data-table tbody td.data-table__handle {
        position: static;
        padding-inline: 0 !important;
    }

    .data-table-wrap .data-table tbody td.data-table__handle:empty {
        display: none;
    }

    .data-table-wrap .data-table tbody td.data-table__handle .sortable-handle {
        flex: none;
        min-width: var(--tap-target);
        min-height: var(--tap-target);
    }
}

@media (min-width: 1250px) {
    .data-table-wrap .data-table td.data-table__handle {
        width: calc(var(--tap-target) + 2 * var(--space-3));
        padding-inline: var(--space-3) !important;
    }
}

@media (min-width: 1250px) {
    .data-table-wrap .data-table__row--linked a.data-table__name {
        min-height: var(--tap-target);
    }
}

/* A bar with no kit search wrapper (the category lists, the bin's per-page) keeps its fields filling the row. */
.filters > .field {
    flex: 1 1 200px;
}

.filters__toggle {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .filters > .filters__per-page {
        flex: 0 1 auto;
        max-width: 12rem;
    }
}

.delete-page {
    max-width: none;
}

.sortable-placeholder .sortable-placeholder__label {
    color: var(--text);
}

/* A button row inside a card sits at the card's own gap. */
.card > .button-row {
    margin-top: 0;
}

/* A reorderable table keeps every control of a row on one line below 1250: the grip and the move buttons at the
   start, the row actions at the end, under the row's name and its labelled cells. */
.data-table-wrap .data-table--reorder tbody td.data-table__handle {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
}

@media (min-width: 1250px) {
    .data-table-wrap .data-table--reorder td.data-table__handle {
        width: auto;
    }
}

@media (max-width: 1249.98px) {
    .data-table-wrap .data-table--reorder tbody tr {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: var(--space-2);
    }

    .data-table-wrap .data-table--reorder tbody td {
        grid-column: 1 / -1;
    }

    .data-table-wrap .data-table--reorder tbody td.data-table__cell--headline {
        order: -1;
    }

    .data-table-wrap .data-table--reorder tbody td.data-table__handle {
        grid-column: 1;
        order: 1;
    }

    .data-table-wrap .data-table--reorder tbody td:last-child:not(.data-table__cell--headline) {
        grid-column: 2;
        order: 1;
        justify-self: end;
    }
}

/* The action column of a wide table sits at its right edge, not at the left of a column the headline leaves wide. */
@media (min-width: 1250px) {
    .data-table--actions-end td:last-child .data-table__actions {
        justify-content: flex-end;
    }
}

/* An inline edit row is a form: the hover fill that marks a clickable row would read as an error or a selection. */
.data-table tbody tr[data-editing]:hover {
    background: var(--surface);
}

/* A count after a sidebar label (Poptávky): a pill, tabular, pushed to the row's end. */
.sidebar__count {
    margin-inline-start: auto;
    min-width: 1.5rem;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    font-size: var(--text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1.5rem;
}

/* A group heading that stays under the page top while its rows scroll (a plan month, an agenda day). */
.plan-group__title {
    position: sticky;
    top: 0;
    z-index: var(--z-raised);
    background: var(--bg);
    min-height: var(--plan-group-head);
    display: flex;
    align-items: center;
    padding: 0 var(--space-2);
}

.plan-group__title h2,
.plan-group__title h3 {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

/* Totals list (the money card, the product price card): label left, figure right, one strong figure. */
.figures {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin: 0;
}

.figures__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}

.figures__item dt {
    color: var(--muted);
    font-size: var(--text-sm);
}

.figures__item dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.figures__item--strong dt {
    color: var(--text);
    font-weight: 500;
}

.figures__item--strong dd {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--display-tracking);
}

.figures__note {
    color: var(--muted);
    font-size: var(--text-xs);
}

/* Bottom sheet: the shared modal anchored to the bottom edge below 768 px. */
@media (max-width: 767.98px) {
    .modal--sheet {
        width: 100%;
        max-width: none;
        max-height: none;
        margin: auto 0 0;
        padding: 0;
    }

    .modal--sheet .modal__panel {
        max-width: none;
        max-height: 92dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    }
}

/* Scroll lock: behind an open modal the page, the dialog and a panel that reached its end never scroll. */
html:has(.modal[open]) {
    overflow: hidden;
}

.modal {
    overflow: hidden;
}

.modal__panel {
    overscroll-behavior: contain;
}

/* Full-screen sheet below 768 px; a wide centred modal from 768 px. */
@media (max-width: 767.98px) {
    .modal--full {
        height: 100dvh;
        max-height: 100dvh;
    }

    .modal--full .modal__panel {
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
}

@media (min-width: 768px) {
    .modal--wide {
        max-width: 800px;
    }

    .modal--wide .modal__panel {
        max-width: 760px;
    }
}

/* Choice chip as a large tile (icon and label) with a 4 px left edge in --cat; picked is marked by paint only.
   Two classes, so the list kit's .choice-chip wins nothing whatever order the sheets load in. */
.choice-chip.choice-chip--tile {
    justify-content: flex-start;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    min-height: var(--tap-target-lg);
    padding-inline: calc(var(--space-3) + var(--sidebar-edge)) var(--space-3);
    box-shadow: inset var(--sidebar-edge) 0 0 var(--cat, transparent);
    font-weight: 500;
    text-align: start;
}

.choice-chip.choice-chip--tile:has(:checked) {
    border-color: var(--text);
    background: var(--accent-soft);
    box-shadow: inset var(--sidebar-edge) 0 0 var(--cat, transparent), inset 0 0 0 1px var(--text);
    font-weight: 500;
}

@media (forced-colors: active) {
    .choice-chip.choice-chip--tile:has(:checked) {
        text-decoration: underline;
        text-underline-offset: var(--selection-underline-offset);
    }
}

/* Full-height sheet: the entry form of a seasonal order fills the phone, its footer stuck to the bottom edge. */
@media (max-width: 767.98px) {
    .modal--sheet.modal--full,
    .modal--sheet.modal--full .modal__panel {
        height: 100dvh;
        max-height: 100dvh;
    }

    .modal--sheet.modal--full .modal__panel {
        border-radius: 0;
        padding-block-start: var(--space-4);
    }
}

/* A transient message with an action (Předáno … Vrátit): a variant of the shared messages region, fixed above the
   bottom bar. It never takes focus and leaves room under the page while it shows. */
.messages--toast {
    position: fixed;
    z-index: var(--z-overlay);
    inset-inline: var(--space-4);
    inset-block-end: calc(var(--toast-offset, 0px) + var(--space-4) + env(safe-area-inset-bottom));
    max-width: var(--dialog-max-width);
    margin-inline: auto;
    pointer-events: none;
}

.messages--toast .message {
    align-items: center;
    pointer-events: auto;
    box-shadow: var(--shadow-md);
}

body:has(.messages--toast > .message) .content__inner {
    padding-bottom: var(--toast-room);
}

.message__action {
    flex: none;
    margin-inline-start: auto;
}

/* The question an armed menu item asks before it acts. */
.menu__note {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    max-width: var(--menu-note-measure);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* A change timeline: one row per change, newest first (docházka history, order history). */
.change-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.change-timeline__item { display: flex; flex-direction: column; gap: 2px; padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--border-strong); }
.change-timeline__item p { margin: 0; }
.change-timeline__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.change-timeline__action { font-weight: 600; }
.change-timeline__when,
.change-timeline__who { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.change-timeline__change { font-variant-numeric: tabular-nums; }
.change-timeline__change del { color: var(--muted); }
.change-timeline__change ins { text-decoration: none; font-weight: 600; }
.change-timeline__note { font-size: var(--text-sm); max-width: 60ch; }

/* A Historie disclosure holding a change timeline (docházka entries, the review card of a deleted order). */
.history-disclosure > .advanced__summary { margin: 0 calc(var(--space-3) * -1); font-size: var(--text-sm); border-radius: var(--radius-md); }
.history-disclosure__label { display: inline-flex; align-items: center; gap: var(--space-2); }
.history-disclosure > .change-timeline { margin-top: var(--space-2); }

/* Equal-width options, as the attendance designs draw them; the kit sizes each option to its label. */
.segmented--fill .segmented__option {
    flex: 1 1 0;
}

/* An opt-in bounded result list: --results-rows rows of --results-row-height (default one tap target) tall, scrolls in place. */
.bounded-results {
    --results-rows: 6;
    --results-row-height: var(--tap-target);
    max-height: min(calc(var(--results-rows) * var(--results-row-height) + 2 * var(--border-width)), 50dvh);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

@media print {
    .bounded-results {
        max-height: none;
        overflow: visible;
    }
}