.filter-action-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(8px);
}

.page-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
}

.page-toolbar__group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.page-toolbar>.page-toolbar__group:only-child {
    width: 100%;
    flex-basis: 100%;
}

.page-toolbar__group--primary {
    flex: 1 1 18rem;
}

.page-toolbar__group--secondary {
    flex: 0 1 auto;
    margin-left: auto;
    justify-content: flex-end;
}

@media (max-width: 600px) {
    .page-toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .page-toolbar__group {
        width: 100%;
        justify-content: stretch;
    }

    .page-toolbar__group:only-child {
        grid-column: 1 / -1;
    }

    .page-toolbar__group--secondary {
        margin-left: 0;
    }

    .page-toolbar__group>* {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.dialog-actions-bar {
    width: 100%;
}

@media (max-width: 600px) {
    .mud-dialog-actions .dialog-actions-bar {
        width: 100%;
    }

    .mud-dialog-actions .dialog-actions-bar>.flex-grow-1 {
        display: none;
    }

    .mud-dialog-actions .dialog-actions-bar>.mud-button-root {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }
}

.mud-table.mud-data-grid .mud-table-toolbar {
    gap: 8px;
    flex-wrap: wrap;
}

.mud-table.mud-data-grid .mud-table-toolbar>.page-toolbar {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

.mud-table.mud-data-grid .mud-table-toolbar .data-grid-toolbar-search {
    display: flex;
    flex: 1 1 24rem;
    min-width: 0;
}

.mud-table.mud-data-grid .mud-table-toolbar .data-grid-toolbar-search .data-grid-toolbar-search__field {
    flex: 1 1 auto;
}

/* Popisek vypisuje prohledávaná pole a bývá delší než pole. Bez tohohle ho prohlížeč
   uřízne uprostřed slova; s ellipsis se vypíše přesně tolik, kolik se vejde do
   aktuální šířky, a zbytek se naznačí třemi tečkami. */
.data-grid-toolbar-search input {
    text-overflow: ellipsis;
}

.mud-table.mud-data-grid .mud-table-toolbar .data-grid-toolbar-action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.mud-table.mud-data-grid .mud-table-toolbar .data-grid-layout-controls {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.mud-table.mud-data-grid .mud-table-toolbar .data-grid-column-settings__menu {
    max-height: min(400px, calc(100vh - 12rem));
    overflow-y: auto;
}

.mud-table.mud-data-grid .mud-table-toolbar .data-grid-column-order__menu {
    max-height: min(400px, calc(100vh - 12rem));
    overflow-y: auto;
}

@media (max-width: 900px) {
    .mud-table.mud-data-grid .mud-table-toolbar .data-grid-toolbar-search {
        flex-basis: 100%;
    }
}

/* On phones, drop the grid toolbar's secondary controls (column settings,
   column order, fullscreen, …) onto their OWN full-width row, right-aligned and
   separated by a divider, so they stop crowding the search field / panel edge
   and become comfortable tap targets. Targets both the default DataGridToolbar
   layout controls and pages that supply a custom secondary group. */
@media (max-width: 600px) {
    /* The toolbar (search + control icons) is one block, clearly separated from
       the table body by a divider so the icon row never reads as the first table
       row / first card.
       CRITICAL: MudToolBar has a FIXED height (--mud-internal-toolbar-height,
       ~56px) and does not wrap. When the search + control icons stack onto two
       rows, the second row overflowed the fixed box and landed on top of the
       first table row. height:auto lets the toolbar grow to contain both rows. */
    .mud-table.mud-data-grid .mud-table-toolbar {
        height: auto !important;
        min-height: var(--mud-internal-toolbar-height, 56px);
        flex-wrap: wrap;
        align-items: flex-start;
        padding-top: 8px;
        padding-bottom: 8px;
        margin-bottom: 4px;
        border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider, rgba(0, 0, 0, 0.12)) 70%, transparent);
    }

    /* CRITICAL: the base .page-toolbar switches to a 2-column GRID on mobile,
       which would place the quick-search and the control icons side-by-side and
       make our flex-based "own row" rule a no-op. Force the grid toolbar's
       page-toolbar back to flex so search (full width) and the icon group wrap
       onto separate rows — identical to the custom Schedule toolbar. */
    .mud-table.mud-data-grid .mud-table-toolbar .page-toolbar {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
    }

    /* The three control icons (visibility, order, fullscreen) sit on their own
       row directly under the quick-search, grouped at the right. */
    .mud-table.mud-data-grid .mud-table-toolbar .page-toolbar__group--secondary,
    .mud-table.mud-data-grid .mud-table-toolbar .data-grid-layout-controls {
        flex: 1 1 100%;
        width: 100%;
        justify-content: flex-end;
        gap: 2px;
        margin-top: 4px;
    }

    /* Keep the controls grouped at the right edge — override the generic
       page-toolbar mobile rule that stretches group children to fill. */
    .mud-table.mud-data-grid .mud-table-toolbar .page-toolbar__group--secondary > *,
    .mud-table.mud-data-grid .mud-table-toolbar .data-grid-layout-controls > * {
        flex: 0 0 auto;
    }

    /* Roomier tap targets for the toolbar icon buttons on touch screens. */
    .mud-table.mud-data-grid .mud-table-toolbar .page-toolbar__group--secondary .mud-icon-button,
    .mud-table.mud-data-grid .mud-table-toolbar .data-grid-layout-controls .mud-icon-button {
        padding: 8px;
    }
}

.mud-table.mud-data-grid.is-pseudo-fullscreen {
    position: fixed !important;
    inset: 0;
    z-index: 1200;
    background: var(--mud-palette-surface, #fff);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px;
    box-sizing: border-box;
}

.mud-table.mud-data-grid.is-pseudo-fullscreen .mud-table-toolbar {
    flex: 0 0 auto;
}

.mud-table.mud-data-grid.is-pseudo-fullscreen .mud-table-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
    height: auto !important;
}

.mud-table.mud-data-grid.is-pseudo-fullscreen .mud-table-pagination {
    flex: 0 0 auto;
}

/* =========================================================================
   Responsive foundation (tablet / mobile) — applies app-wide
   ========================================================================= */

/* 1) Never let any page scroll the viewport sideways. Wide content must
      scroll inside its own container, not push the whole page. */
.mud-table .mud-table-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tighten the outer page padding on small screens so content gets more room. */
@media (max-width: 600px) {
    .mud-container.mud-container-maxwidth-false,
    .mud-container.mud-container-maxwidth-xl,
    .mud-container.mud-container-maxwidth-lg {
        padding-left: 8px;
        padding-right: 8px;
    }

    .mud-card .mud-card-content.pa-4 {
        padding: 12px;
    }
}

/* 2) Stacked "card" data tables — MudBlazor flips MudTable/MudDataGrid into a
      label:value stacked layout below its Breakpoint. The .mud-{bp}-table marker
      class is ALWAYS present; MudBlazor only activates stacking inside a media
      query (Xs<600, Sm<960, Md<1280, Lg<1920, Xl<2560). We therefore gate our
      card styling behind the SAME media widths, so desktop tables stay untouched
      and only the actually-stacked layout becomes a real card.
      The rule body is repeated per breakpoint marker, each gated by the exact
      same media width MudBlazor uses to switch that marker into stacked mode. */
@media (max-width: 600px) {
    .mud-xs-table .mud-table-root,
    .mud-xs-table .mud-table-body { display: block; width: 100%; }
    .mud-xs-table .mud-table-body > .mud-table-row { display: block; margin: 0 4px 10px; border: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, 0.12)); border-radius: 10px; overflow: hidden; background: var(--mud-palette-surface, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
    .mud-xs-table .mud-table-body > .mud-table-row > .mud-table-cell:last-child { border-bottom: none; }
    .mud-xs-table .mud-table-cell { flex-wrap: wrap; gap: 2px 12px; align-items: baseline; padding: 8px 14px; min-width: 0; }
    .mud-xs-table .mud-table-cell:not(:last-child) { border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-table-lines, rgba(0, 0, 0, 0.12)) 55%, transparent); }
    .mud-xs-table .mud-table-cell:before { flex: 0 1 auto; color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6)); font-weight: 600; overflow-wrap: anywhere; }
    .mud-xs-table .mud-table-cell > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; text-align: end; }
    /* Control cells (selection checkbox + empty-label icon columns) collapse onto one
       compact strip at the top of the card instead of each taking a full empty row.
       :has(.mud-checkbox) catches the SelectColumn cell whatever class it carries. */
    .mud-xs-table .mud-table-cell.mud-table-cell-checkbox,
    .mud-xs-table .mud-table-cell[data-label=""],
    .mud-xs-table .mud-table-body .mud-table-cell:first-child:has(.mud-checkbox),
    .mud-xs-table .mud-table-body .mud-table-cell:nth-child(2):has(.mud-checkbox) { display: inline-flex; align-items: center; width: auto; min-width: 0; padding: 6px 8px; border-bottom: none !important; vertical-align: middle; justify-content: flex-start; }
    .mud-xs-table .mud-table-cell.mud-table-cell-checkbox::before,
    .mud-xs-table .mud-table-cell[data-label=""]::before,
    .mud-xs-table .mud-table-body .mud-table-cell:has(.mud-checkbox)::before { display: none; }
}

@media (max-width: 960px) {
    .mud-sm-table .mud-table-root,
    .mud-sm-table .mud-table-body { display: block; width: 100%; }
    .mud-sm-table .mud-table-body > .mud-table-row { display: block; margin: 0 4px 10px; border: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, 0.12)); border-radius: 10px; overflow: hidden; background: var(--mud-palette-surface, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
    .mud-sm-table .mud-table-body > .mud-table-row > .mud-table-cell:last-child { border-bottom: none; }
    .mud-sm-table .mud-table-cell { flex-wrap: wrap; gap: 2px 12px; align-items: baseline; padding: 8px 14px; min-width: 0; }
    .mud-sm-table .mud-table-cell:not(:last-child) { border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-table-lines, rgba(0, 0, 0, 0.12)) 55%, transparent); }
    .mud-sm-table .mud-table-cell:before { flex: 0 1 auto; color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6)); font-weight: 600; overflow-wrap: anywhere; }
    .mud-sm-table .mud-table-cell > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; text-align: end; }
    /* Control cells (selection checkbox + empty-label icon columns) collapse onto one
       compact strip at the top of the card instead of each taking a full empty row.
       :has(.mud-checkbox) catches the SelectColumn cell whatever class it carries. */
    .mud-sm-table .mud-table-cell.mud-table-cell-checkbox,
    .mud-sm-table .mud-table-cell[data-label=""],
    .mud-sm-table .mud-table-body .mud-table-cell:first-child:has(.mud-checkbox),
    .mud-sm-table .mud-table-body .mud-table-cell:nth-child(2):has(.mud-checkbox) { display: inline-flex; align-items: center; width: auto; min-width: 0; padding: 6px 8px; border-bottom: none !important; vertical-align: middle; justify-content: flex-start; }
    .mud-sm-table .mud-table-cell.mud-table-cell-checkbox::before,
    .mud-sm-table .mud-table-cell[data-label=""]::before,
    .mud-sm-table .mud-table-body .mud-table-cell:has(.mud-checkbox)::before { display: none; }
}

@media (max-width: 1280px) {
    .mud-md-table .mud-table-root,
    .mud-md-table .mud-table-body { display: block; width: 100%; }
    .mud-md-table .mud-table-body > .mud-table-row { display: block; margin: 0 4px 10px; border: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, 0.12)); border-radius: 10px; overflow: hidden; background: var(--mud-palette-surface, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
    .mud-md-table .mud-table-body > .mud-table-row > .mud-table-cell:last-child { border-bottom: none; }
    .mud-md-table .mud-table-cell { flex-wrap: wrap; gap: 2px 12px; align-items: baseline; padding: 8px 14px; min-width: 0; }
    .mud-md-table .mud-table-cell:not(:last-child) { border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-table-lines, rgba(0, 0, 0, 0.12)) 55%, transparent); }
    .mud-md-table .mud-table-cell:before { flex: 0 1 auto; color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6)); font-weight: 600; overflow-wrap: anywhere; }
    .mud-md-table .mud-table-cell > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; text-align: end; }
    /* Control cells (selection checkbox + empty-label icon columns) collapse onto one
       compact strip at the top of the card instead of each taking a full empty row.
       :has(.mud-checkbox) catches the SelectColumn cell whatever class it carries. */
    .mud-md-table .mud-table-cell.mud-table-cell-checkbox,
    .mud-md-table .mud-table-cell[data-label=""],
    .mud-md-table .mud-table-body .mud-table-cell:first-child:has(.mud-checkbox),
    .mud-md-table .mud-table-body .mud-table-cell:nth-child(2):has(.mud-checkbox) { display: inline-flex; align-items: center; width: auto; min-width: 0; padding: 6px 8px; border-bottom: none !important; vertical-align: middle; justify-content: flex-start; }
    .mud-md-table .mud-table-cell.mud-table-cell-checkbox::before,
    .mud-md-table .mud-table-cell[data-label=""]::before,
    .mud-md-table .mud-table-body .mud-table-cell:has(.mud-checkbox)::before { display: none; }
}

/* 3) ResponsiveToolbar — secondary actions inline on desktop/tablet, collapsed
      into a single "⋮" kebab menu on mobile. */

/* Restore the bottom spacing the original PageToolbar had (mb-4) so the toolbar
   never sits flush against the stats panel / grid below it, on every page. */
.responsive-toolbar {
    margin-bottom: 1rem;
}

/* The generic .page-toolbar__group--primary reserves flex-basis:18rem (288px),
   which is right for a search-field primary but too greedy for a button primary:
   it could push the secondary export group onto a second line even when both
   would fit (e.g. ~1050px with the filter drawer open). Size the ResponsiveToolbar
   primary to its content instead so the secondary stays on the same row. */
.responsive-toolbar .page-toolbar__group--primary {
    flex: 1 1 auto;
    min-width: 0;
}

.responsive-toolbar__inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.responsive-toolbar__overflow {
    display: none;
}

/* Collapse exports to icon-only across the whole phone+tablet range (<= 960px),
   not just phones. Reason: between ~600-960px the full-text export buttons + the
   primary action don't fit cleanly and the secondary group wrapped onto an ugly
   second line even though there was space. Icon-only keeps it on one row. */
@media (max-width: 960px) {
    /* Mobile/tablet toolbar: the primary action (e.g. "+ Nový") stays on the left
       with its label; the secondary EXPORT actions become compact ICON-ONLY
       buttons, right-aligned. Multi-report exports are MudMenus, so tapping the
       icon still opens the dropdown (roletka). No kebab. */
    .responsive-toolbar.page-toolbar {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }

    /* Show the inline secondary actions, never the kebab. Push them to the right
       edge even on export-only pages (where the secondary group is the only child
       and a base rule stretches it to full width). */
    .responsive-toolbar .responsive-toolbar__inline {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
        margin-left: auto;
        /* A base rule (.page-toolbar__group > *) stretches this to full width, so
           right-justify the icon buttons inside it rather than relying on margins. */
        justify-content: flex-end;
    }

    .responsive-toolbar .responsive-toolbar__overflow {
        display: none;
    }

    .responsive-toolbar .page-toolbar__group--primary {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Secondary (exports) pinned to the right. */
    .responsive-toolbar .page-toolbar__group--secondary {
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
    }

    /* Collapse export button/menu labels to icon-only (keep the start icon and the
       dropdown arrow). font-size:0 hides the text node; icons keep an explicit size. */
    .responsive-toolbar .page-toolbar__group--secondary .mud-button-root {
        min-width: 0;
        font-size: 0;
        padding: 6px 8px;
        gap: 0;
    }

    .responsive-toolbar .page-toolbar__group--secondary .mud-button-root .mud-icon-root {
        font-size: 1.35rem;
    }

    .responsive-toolbar .page-toolbar__group--secondary .mud-button-root .mud-button-icon-start,
    .responsive-toolbar .page-toolbar__group--secondary .mud-button-root .mud-button-icon-end {
        margin-left: 0;
        margin-right: 0;
    }

    /* Keep the dropdown arrow on multi-report menus small but visible. */
    .responsive-toolbar .page-toolbar__group--secondary .mud-button-root .mud-button-icon-end .mud-icon-root {
        font-size: 1rem;
    }
}

/* 4) MudTabs — tighter tabs on phones so more fit before MudBlazor's scroll
      buttons kick in, and the tab panels never force horizontal page scroll. */
@media (max-width: 600px) {
    .mud-tabs .mud-tabs-toolbar .mud-tab {
        padding: 6px 10px;
        min-height: 44px;
        font-size: 0.8rem;
    }

    .mud-tabs .mud-tabs-panels {
        min-width: 0;
        max-width: 100%;
    }
}

/* =========================================================================
   Month calendar (MonthCalendar.razor) — měsíční mřížka s barevnými událostmi.
   Barvy z MudBlazor palety → funguje v light i dark tématu.
   ========================================================================= */
.mc {
    --mc-radius: 16px;
    --mc-week-min: 118px;
    --mc-day-head-h: 32px;
    --mc-lane-h: 21px;
    --mc-lane-gap: 4px;
    --mc-col-gap: 6px;
    --mc-line: color-mix(in srgb, var(--mud-palette-lines-default) 70%, transparent);
}

.mc .mc-title {
    min-width: 160px;
    text-align: center;
    text-transform: capitalize;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--mud-palette-text-primary);
}

/* ---- Legenda ---- */
.mc .mc-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 9px 16px;
    margin-bottom: 14px;
    border: 1px solid var(--mc-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-background-grey) 55%, var(--mud-palette-surface));
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.mc .mc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.mc .mc-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    background: var(--mud-palette-primary);
}

.mc .mc-legend-swatch--tentative {
    background-color: var(--mud-palette-surface);
    background-image: repeating-linear-gradient(45deg, var(--mud-palette-text-secondary) 0 3px, transparent 3px 7px);
    border: 1px dashed var(--mud-palette-text-secondary);
}

/* ---- Mřížka: CSS grid — dlaždice dnů + spanning pruhy událostí přes dny ---- */
.mc .mc-scroll {
    overflow: hidden;
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mc-radius);
    background: color-mix(in srgb, var(--mud-palette-background-grey) 45%, var(--mud-palette-surface));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 38px -22px rgba(0, 0, 0, 0.32);
    padding: 6px;
}

.mc .mc-cal {
    min-width: 800px;
}

/* Hlavička dní v týdnu. */
.mc .mc-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--mc-col-gap);
    padding: 2px 2px 8px;
}

.mc .mc-wd {
    padding-left: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mud-palette-text-secondary);
}

.mc .mc-wd.mc-wknd {
    color: var(--mud-palette-primary);
}

/* Týden = 7 sloupců dní + absolutní vrstva se spanning pruhy událostí. */
.mc .mc-week {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--mc-col-gap);
    margin-bottom: var(--mc-col-gap);
}

.mc .mc-week:last-child {
    margin-bottom: 0;
}

/* Dlaždice dne. Nízkospecifické `.mc .mc-day` (0,2,0), aby barvení v plánu
   konstrukce (`.mc .mc-day.pk-*` = 0,3,0) vždy vyhrálo. Výška roste s počtem lanes. */
.mc .mc-day {
    position: relative;
    min-height: max(var(--mc-week-min),
        calc(var(--mc-day-head-h) + var(--mc-lanes, 0) * (var(--mc-lane-h) + var(--mc-lane-gap)) + 14px));
    padding: 7px 8px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mc-line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

/* Hover: průhledný overlay přes pseudo-prvek, aby nepřepsal barevné pozadí dne. */
.mc .mc-day::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    opacity: 0;
    transition: opacity 0.16s ease;
    pointer-events: none;
    z-index: 0;
}

.mc .mc-day:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mc-line));
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.32);
}

.mc .mc-day:hover::after {
    opacity: 1;
}

.mc .mc-day--outside {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.mc .mc-day--outside .mc-day-num {
    opacity: 0.3;
}

.mc .mc-day--weekend {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

/* Dnešní den — zvýrazněná dlaždice s primárním prstencem a jemnou září. */
.mc .mc-day--today {
    border-color: transparent;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    box-shadow: 0 0 0 2px var(--mud-palette-primary),
                0 10px 24px -8px color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
}

.mc .mc-day--today:hover {
    box-shadow: 0 0 0 2px var(--mud-palette-primary),
                0 12px 28px -8px color-mix(in srgb, var(--mud-palette-primary) 62%, transparent);
}

/* Hlavička dne: číslo vlevo, volitelný odznak (DayContent) vpravo. */
.mc .mc-day-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    height: calc(var(--mc-day-head-h) - 6px);
}

.mc .mc-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0 4px;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.mc .mc-day--today .mc-day-num {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-contrast-text);
    box-shadow: 0 2px 8px -1px color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
}

/* Volitelný odznak v hlavičce dne (kapacita, směna…). */
.mc .mc-day-extra {
    font-size: 0.68rem;
    line-height: 1.15;
    text-align: right;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    padding-top: 2px;
}

/* Vrstva událostí — spanning pruhy přes sloupce dní, řádky = lanes. */
.mc .mc-week-events {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--mc-day-head-h);
    bottom: 7px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--mc-col-gap);
    grid-auto-rows: var(--mc-lane-h);
    row-gap: var(--mc-lane-gap);
    pointer-events: none;
    z-index: 2;
}

.mc .mc-seg {
    pointer-events: auto;
    min-width: 0;
    height: var(--mc-lane-h);
    margin: 0 3px;
}

.mc .mc-event {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    border-radius: 7px;
    padding: 0 9px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    cursor: default;
    transition: box-shadow 0.12s ease, filter 0.12s ease;
}

/* Jemný horní lesk dlaždice pro moderní hloubku. */
.mc .mc-event::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 50%;
    background: linear-gradient(rgba(255, 255, 255, 0.16), transparent);
    pointer-events: none;
}

.mc .mc-event--clickable {
    cursor: pointer;
}

.mc .mc-event--clickable:hover {
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
    filter: brightness(1.07);
}

.mc .mc-event-text {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    /* Stín odděluje bílý text od světlých barev typů i od šrafování čekajících žádostí. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    position: relative;
    z-index: 1;
}

.mc .mc-event--tentative {
    border: 1px dashed rgba(255, 255, 255, 0.85);
}

.mc .mc-event--tentative::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Tmavé šrafování: bílé pruhy splývaly s bílým textem a dlaždice byla nečitelná. */
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.18) 0 5px, transparent 5px 10px);
    pointer-events: none;
}

/* MudTooltip obal segmentu (EventTooltip) musí vyplnit celý pruh. */
.mc .mc-seg .mud-tooltip-root {
    display: block;
    width: 100%;
    height: 100%;
}

/* Přechod pruhu přes hranici týdne — špičaté/zaříznuté kraje značí pokračování. */
.mc .mc-seg--clip-end .mc-event {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
    padding-right: 13px;
}

.mc .mc-seg--clip-start .mc-event {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%);
    padding-left: 14px;
}

.mc .mc-seg--clip-start.mc-seg--clip-end .mc-event {
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
}

/* Inline akce na dlaždici (EventActions) — skryté, objeví se při hoveru na dlaždici. */
.mc .mc-event-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 3px;
    flex: 0 0 auto;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.mc .mc-event:hover .mc-event-actions,
.mc .mc-event:focus-within .mc-event-actions {
    opacity: 1;
}

.mc .mc-event-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    cursor: pointer;
}

.mc .mc-event-action:hover {
    background: rgba(255, 255, 255, 0.5);
}

.mc .mc-event-action .mud-icon-root {
    font-size: 13px;
    width: 13px;
    height: 13px;
}

/* Dotyková zařízení hover nemají — akce se řeší přes detail události. */
@media (hover: none) {
    .mc .mc-event-actions {
        display: none;
    }
}

.mc .mc-event--half {
    width: 62%;
}

.mc .mc-event--half.mc-event--pm {
    margin-left: auto;
}

/* Výběr rozsahu dnů tažením (OnRangeSelected). user-select vypnutý, aby tažení
   neoznačovalo texty v buňkách. */
.mc .mc-day--selectable {
    cursor: cell;
    user-select: none;
    -webkit-user-select: none;
}

.mc .mc-day--selecting {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

@media (max-width: 700px) {
    .mc {
        --mc-week-min: 92px;
        --mc-lane-h: 18px;
    }
}
/* ==========================================================================
   Tooltip tabulky (TooltipTable / TooltipKeyValue / TooltipDetail)
   Přesunuto z inline <style> v TooltipTable.razor — styly jsou globální,
   aby šly třídy použít i mimo komponentu (např. obsah EventTooltip
   v MonthCalendar) a neemitovaly se s každou instancí znovu.
   ========================================================================== */

.tooltip-table-container {
    padding: 4px;
    min-width: 180px;
    /* Šířka se přizpůsobí obsahu; širší tabulky (více sloupců) tak nepřetékají box tooltipu. */
    width: max-content;
    max-width: min(680px, 92vw);
}

.tooltip-table-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: linear-gradient(135deg,
            var(--mud-palette-primary) 0%,
            var(--mud-palette-primary-darken) 100%);
    color: var(--mud-palette-primary-text);
}

.tooltip-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tooltip-table thead tr {
    background: linear-gradient(180deg,
            var(--mud-palette-background-gray) 0%,
            var(--mud-palette-surface) 100%);
}

.tooltip-table th {
    padding: 8px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
    border-bottom: 2px solid var(--mud-palette-divider);
}

.tooltip-table tbody tr {
    transition: background-color 0.15s ease;
}

.tooltip-table tbody tr:nth-child(odd) {
    background-color: var(--mud-palette-surface);
}

.tooltip-table tbody tr:nth-child(even) {
    background-color: var(--mud-palette-background);
}

.tooltip-table tbody tr:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.tooltip-table td {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-primary);
}

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

.tooltip-table .empty-message {
    text-align: center;
    padding: 16px;
    color: var(--mud-palette-text-disabled);
    font-style: italic;
}

.tooltip-table tfoot .footer-row {
    background: linear-gradient(180deg,
            var(--mud-palette-warning-lighten) 0%,
            var(--mud-palette-warning) 100%);
}

.tooltip-table tfoot td {
    padding: 8px 12px;
    font-weight: 600;
    color: var(--mud-palette-warning-text);
    border-top: 2px solid var(--mud-palette-warning-darken);
}

.tooltip-table.compact th,
.tooltip-table.compact td {
    padding: 4px 8px;
}

.tooltip-table.borderless td {
    border-bottom: none;
}

/* ============================================================
   Canvas prohlížeč souborů vložený v obsahu FilePreviewDialog:
   lišta s ovládáním + stage s plátnem (posun, zoom, výstřižek).
   ============================================================ */
@keyframes ssfp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ssfp-pop-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.file-preview-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Akce dialogu náhledu (Stáhnout / Vystřihnout + Tisk / Zavřít): MudDialog akce
   samy nezalamují, na úzkém displeji by se čtyři tlačítka stlačila do sebe. */
.file-preview-dialog .mud-dialog-actions {
    flex-wrap: wrap;
    row-gap: 8px;
}

.file-preview-viewer__toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
    min-height: 40px;
}

.file-preview-viewer__label {
    min-width: 3.5em;
    text-align: center;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.file-preview-viewer__stage {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background: var(--mud-palette-background-grey);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.file-preview-viewer__stage--panning {
    cursor: grabbing;
}

.file-preview-viewer__stage--snip {
    cursor: crosshair;
}

/* Jen plátno vieweru (přímý potomek stage) – uvnitř stage žije i panel výstřižku
   s vlastním canvasem editoru, který tímhle nesmí být roztažen přes celý panel. */
.file-preview-viewer__stage > canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Výběr výstřižku: okolí se ztmaví (obří box-shadow ořízne overflow stage),
   vybraná oblast zůstává čistá – jako u systémových nástrojů na výstřižky. */
.file-preview-viewer__selection {
    position: absolute;
    display: none;
    border: 2px solid var(--mud-palette-primary);
    box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* Nápověda ovládání žije v liště (mimo záběr plátna); na úzkých oknech se schová. */
.file-preview-viewer__hint {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

@media (max-width: 1280px) {
    .file-preview-viewer__hint {
        display: none;
    }
}

/* Náhled výstřižku s uložením (jen když je nastaven cíl uložení, např. náhled dílu).
   Rozměry panelu jsou vztažené ke stage (backdrop = stage), NE k viewportu — stage
   má overflow: hidden a panel dimenzovaný přes vh by přišel o spodek s akcemi. */
.file-preview-viewer__snip-backdrop {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    animation: ssfp-fade-in 140ms ease-out;
}

.file-preview-viewer__snip-panel {
    position: relative; /* kotva pro plovoucí text a kroužek gumy editoru */
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: min(90%, 1100px);
    max-height: 100%;
    padding: 18px 22px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-12);
    animation: ssfp-pop-in 160ms ease-out;
}

.file-preview-viewer__snip-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* Plátno editoru výstřižku – stejná role, jakou měl dřívější <img> náhledu.
   Při stlačení na výšku vzniká object-fit letterbox; mapování souřadnic myši
   na pixely bitmapy to řeší v JS (editViewport v pdfFullscreenViewer.js). */
.file-preview-viewer__snip-canvas {
    align-self: center;
    flex: 0 1 auto;
    min-height: 0; /* dovolí obrázku smrštit se, ať se do panelu vejde titulek i akce */
    max-width: 100%;
    object-fit: contain;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: #fff;
    touch-action: none; /* kreslení gumou nesmí spouštět gesta prohlížeče */
}

.file-preview-viewer__snip-canvas[data-tool="erase"] {
    cursor: none; /* místo kurzoru se ukazuje kroužek stopy gumy */
}

.file-preview-viewer__snip-canvas[data-tool="text"] {
    cursor: text;
}

.file-preview-viewer__snip-canvas[data-tool="arrow"],
.file-preview-viewer__snip-canvas[data-tool="rect"] {
    cursor: crosshair;
}

.file-preview-viewer__snip-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
}

.file-preview-viewer__snip-toolbar-label {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.file-preview-viewer__snip-size {
    width: 110px;
    margin: 0 10px;
}

/* Kolečka výběru barvy textového popisku. */
.file-preview-viewer__snip-color {
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0 2px;
    border: 2px solid var(--mud-palette-surface);
    border-radius: 50%;
    cursor: pointer;
}

.file-preview-viewer__snip-color--active {
    outline: 2px solid var(--mud-palette-primary);
}

/* Kroužek ukazující stopu gumy; pozicuje ho JS vůči panelu (pointer-events none,
   ať nekrade tahy kreslení). Dvojitý okraj = viditelný na tmavé i světlé kresbě. */
.file-preview-viewer__snip-eraser-cursor {
    position: absolute;
    z-index: 2;
    border: 1.5px solid rgba(0, 0, 0, 0.7);
    outline: 1.5px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
}

/* Plovoucí rozepsaný textový popisek: úchyt vlevo = přetažení, vstupní pole
   roste s psaním. Vytváří ho JS (openTextOverlay) přímo v panelu. */
.file-preview-viewer__snip-text-overlay {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: stretch;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

.file-preview-viewer__snip-text-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border-radius: 4px 0 0 4px;
    font-size: 10px;
    cursor: move;
    touch-action: none;
    user-select: none;
}

.file-preview-viewer__snip-text-input {
    min-width: 60px;
    padding: 1px 3px;
    border: 1px dashed var(--mud-palette-primary);
    background: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
    font-family: Arial, Helvetica, sans-serif;
    outline: none;
}

.file-preview-viewer__snip-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
}

/* =========================================================================
   Floating horizontal-scroll arrows for data grids
   Overlay buttons created by secondside-blazor-mudblazor.js: fixed-position
   children of <body>, shown while the mouse is over a horizontally
   scrollable .mud-table-container. Same visual language as the horizontal
   menu scroll arrows (rounded, semi-transparent), plus a surface backdrop
   so they stay readable on top of table content.
   ========================================================================= */

.grid-hscroll-arrow {
    position: fixed;
    /* Above pseudo-fullscreen grids (1200) and dialogs (1400), below
       snackbar (1500) and tooltips (1600). */
    z-index: 1450;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, rgba(0, 0, 0, 0.87));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.grid-hscroll-arrow:hover {
    opacity: 1;
    color: var(--mud-palette-primary, #594ae2);
}

.grid-hscroll-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.grid-hscroll-arrow svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* ── Přepínání záznamů v titulku editačního dialogu ───────────────────────── */

.dialog-record-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    background: var(--mud-palette-background-gray, rgba(0, 0, 0, 0.04));
}

.dialog-record-nav__position {
    display: inline-block;
    min-width: 4.5rem;
    padding: 0 2px;
    text-align: center;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
    cursor: default;
    user-select: none;
}

@media (max-width: 600px) {
    /* Na mobilu se do titulku vejdou jen šipky, pořadí by ho rozbilo. */
    .dialog-record-nav__position {
        display: none;
    }
}

/* Řádek tabulky, který je právě otevřený v dialogu. */
.mud-table-row.record-nav-row-active > td {
    background-color: var(--mud-palette-primary-hover, rgba(89, 74, 226, 0.06));
}

.mud-table-row.record-nav-row-active > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary, #594ae2);
}

/* ====================== Styly vlastních komponent knihovny ======================
   Tyto třídy používají komponenty 2ndSide.Blazor.MudBlazor v markupu (OptionSelect,
   OptionAutocomplete, StatsPanel, FilterContainer, FilePreviewDialog,
   DataGridColumnSettings, ExcelColumnPickerDialog, PartDrawingIcon) — MUSÍ je proto
   dodávat balíček sám. Dřív žily jen v Erplitex utilities.css/dialogs.css/app.css
   a každý jiný konzument NuGetu dostal rozbité rozložení. */

.ui-flex-1 {
    flex: 1 1 auto;
}

.ui-min-w-0 {
    min-width: 0;
}

.ui-scroll-y-md {
    max-height: 400px;
    overflow-y: auto;
}

.ui-align-middle {
    vertical-align: middle;
}

/* FilterContainer — obal filtrační zásuvky: hlavička fixní, obsah scrolluje. */
.filter-root {
    height: 100%;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

.filter-scroll {
    overflow-y: auto;
    flex: 1 1 auto;
}

/* FilePreviewDialog — celoplošný náhled souboru. */
.file-preview-dialog {
    /* Celá dostupná výška – MudDialog má vlastní strop calc(100vh - 64px). */
    --file-preview-dialog-height: calc(100vh - 64px);
    height: var(--file-preview-dialog-height);
}

.file-preview-dialog__title {
    max-width: calc(100% - 80px);
}

.file-preview-dialog__viewport {
    height: calc(var(--file-preview-dialog-height) - 130px);
    overflow: hidden;
}

.file-preview-dialog__center-state {
    height: 100%;
}

/* PartDrawingIcon — tooltip s náhledem výkresu. */
.drawing-image-tooltip {
    max-width: max(400px, 90vw);
    max-height: max(400px, 70vh);
    overflow: hidden;
}

.drawing-image-tooltip img {
    max-width: 100%;
    max-height: 250px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: block;
}

@media (max-width: 768px) {
    .drawing-image-tooltip {
        max-width: 90vw;
        max-height: 60vh;
    }

    .drawing-image-tooltip img {
        max-height: 200px;
    }
}

@media (max-width: 480px) {
    .drawing-image-tooltip {
        max-width: 95vw;
        max-height: 50vh;
    }

    .drawing-image-tooltip img {
        max-height: 150px;
    }
}

/* ShellDrawerSection — hlavička + scrollující tělo vysouvací zásuvky. */
.shell-drawer-header {
    flex-shrink: 0;
}

.shell-drawer-header--filter {
    z-index: 100000;
}

.shell-drawer-header__content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.shell-drawer-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* PinCodeField — N políček pro číselný kód. Skutečný <input> leží průhledně přes políčka
   (psaní, vložení i autofill řeší prohlížeč), políčka jen kreslí stav. */
.ss-pin {
    --ss-pin-box: clamp(38px, 11vw, 52px);
    --ss-pin-height: calc(var(--ss-pin-box) * 1.18);
    --ss-pin-gap: 10px;
    --ss-pin-accent: var(--mud-palette-primary);
    --ss-pin-line: var(--mud-palette-lines-inputs);
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.ss-pin--dense {
    --ss-pin-box: clamp(32px, 9vw, 40px);
    --ss-pin-gap: 8px;
}

.ss-pin--error {
    --ss-pin-accent: var(--mud-palette-error);
    --ss-pin-line: var(--mud-palette-error);
}

.ss-pin__boxes {
    display: flex;
    gap: var(--ss-pin-gap);
    align-items: center;
}

.ss-pin__gap {
    width: calc(var(--ss-pin-gap) * 0.8);
    flex: 0 0 auto;
}

.ss-pin__box {
    width: var(--ss-pin-box);
    height: var(--ss-pin-height);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--ss-pin-line);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: calc(var(--ss-pin-box) * 0.5);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.ss-pin__box--filled {
    border-color: color-mix(in srgb, var(--ss-pin-accent) 55%, var(--ss-pin-line));
}

.ss-pin:focus-within .ss-pin__box--active {
    border-color: var(--ss-pin-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-pin-accent) 22%, transparent);
}

/* Blikající kurzor v prázdném aktivním políčku — napovídá, kam se píše. */
.ss-pin:focus-within .ss-pin__box--active:not(.ss-pin__box--filled)::after {
    content: "";
    width: 2px;
    height: 42%;
    border-radius: 1px;
    background: var(--ss-pin-accent);
    animation: ss-pin-caret 1s steps(1) infinite;
}

.ss-pin__dot {
    width: calc(var(--ss-pin-box) * 0.24);
    height: calc(var(--ss-pin-box) * 0.24);
    border-radius: 50%;
    background: currentColor;
    animation: ss-pin-pop 140ms ease-out;
}

.ss-pin__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.001;
    color: transparent;
    caret-color: transparent;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 16px; /* iOS Safari pod 16 px při fokusu přibližuje stránku */
    letter-spacing: 0;
    cursor: text;
}

.ss-pin__input::selection {
    background: transparent;
}

.ss-pin--disabled .ss-pin__box {
    opacity: 0.55;
}

.ss-pin--disabled .ss-pin__input {
    cursor: not-allowed;
}

.ss-pin--shake .ss-pin__boxes {
    animation: ss-pin-shake 420ms cubic-bezier(.36, .07, .19, .97);
}

.ss-pin__error {
    margin-top: 8px;
    color: var(--mud-palette-error);
    font-size: 0.8125rem;
}

@keyframes ss-pin-caret {
    50% { opacity: 0; }
}

@keyframes ss-pin-pop {
    from { transform: scale(0.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes ss-pin-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .ss-pin--shake .ss-pin__boxes,
    .ss-pin__dot,
    .ss-pin:focus-within .ss-pin__box--active:not(.ss-pin__box--filled)::after {
        animation: none;
    }
}