.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;
}

/* =========================================================================
   Stránka se seznamem (DataGridPageLayout → .grid-fill-page)
   Stránka scrolluje normálně, ale tabulka má strop výšky ≈ okno: dlouhá tabulka scrolluje uvnitř
   .mud-table-container, takže funguje virtualizace, sticky hlavička a pager zůstává hned pod ní.
   Krátká tabulka se stropu nedotkne. Chrome okolo tabulky (appbar, menu, pager) si aplikace může
   přepsat proměnnou --grid-page-table-chrome.
   ========================================================================= */

.grid-fill-page {
    --grid-page-table-chrome: 210px;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .grid-fill-page {
        --grid-page-table-chrome: 170px;
    }
}

/* MudCard má overflow:hidden — v řetězci card → card-content by ořízl popovery a plovoucí prvky. */
.grid-fill-page .mud-card,
.grid-fill-page .mud-card > .mud-card-content {
    overflow: visible !important;
}

.grid-fill-page .mud-table {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Spodní hranice 420 px drží tabulku použitelnou i na malých displejích; výšku řídí jen tento strop.
   overscroll-behavior-x brání gestu „zpět“ při vodorovném posunu tabulky. */
.grid-fill-page .mud-table-container {
    height: auto !important;
    max-height: max(calc(92dvh - var(--grid-page-table-chrome)), 420px) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior-x: contain;
}

/* Celoobrazovkový režim má vlastní scroll-box (výše), strop se na něj nevztahuje. */
.grid-fill-page .mud-table.mud-data-grid.is-pseudo-fullscreen .mud-table-container {
    max-height: none !important;
}

/* =========================================================================
   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: var(--ss-radius-sm, 10px); overflow: hidden; background: var(--mud-palette-surface, #fff); box-shadow: var(--ss-shadow-card, 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: var(--ss-radius-sm, 10px); overflow: hidden; background: var(--mud-palette-surface, #fff); box-shadow: var(--ss-shadow-card, 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: var(--ss-radius-sm, 10px); overflow: hidden; background: var(--mud-palette-surface, #fff); box-shadow: var(--ss-shadow-card, 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%;
    }
}

/* MudTabs badge (BadgeData / BadgeDot) — MudBlazor anchors it absolutely to an
   empty span, so it overhangs the tab and the tab bar's overflow:hidden clips it
   (most visibly on the last tab). Keep it in flow, raised a little like before. */
.mud-tabs .mud-tab .mud-tab-badge .mud-badge-wrapper {
    position: static;
    width: auto;
    height: auto;
}

.mud-tabs .mud-tab .mud-tab-badge .mud-badge {
    position: relative;
    inset: auto;
    top: -0.5em;
}

/* =========================================================================
   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: var(--ss-radius-sm, 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: var(--ss-radius-xs, 5px);
    box-shadow: var(--ss-shadow-card, 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: var(--ss-shadow-card, 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: var(--ss-radius-sm, 12px);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mc-line);
    box-shadow: var(--ss-shadow-card, 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: var(--ss-shadow-raised, 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: var(--ss-radius-xs, 7px);
    padding: 0 9px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #fff;
    box-shadow: var(--ss-shadow-card, 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: var(--ss-shadow-raised, 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: var(--ss-radius-xs, 6px);
    overflow: hidden;
    box-shadow: var(--ss-shadow-raised, 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;
}

/* FilterDrawerContent: plynulá výměna filtru při přechodu mezi stránkami. */
.ss-filter-content {
    transition: opacity 120ms ease;
}

.ss-filter-content--enter {
    animation: ss-filter-content-in 180ms ease;
}

.ss-filter-content--leaving {
    opacity: 0;
    pointer-events: none;
}

@keyframes ss-filter-content-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* TooltipCard: sekce pod sebou (TooltipSection, TooltipList); text vlevo (MudTooltip zarovnává na střed). */
.tooltip-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.tooltip-detail-container {
    max-width: 450px;
}

/* TooltipSection / TooltipDetail: řádky se střídáním barev. */
.tooltip-detail-content {
    display: flex;
    flex-direction: column;
    border-radius: var(--ss-radius-xs, 6px);
    overflow: hidden;
    box-shadow: var(--ss-shadow-raised, 0 2px 8px rgba(0, 0, 0, 0.15));
    text-align: left;
}

.tooltip-section-title {
    padding: 6px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
    background: linear-gradient(180deg, var(--mud-palette-background-gray) 0%, var(--mud-palette-surface) 100%);
    border-bottom: 2px solid var(--mud-palette-divider);
}

.tooltip-detail-item {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    transition: background-color 0.15s ease;
}

.tooltip-detail-item:last-child {
    border-bottom: none;
}

.tooltip-detail-item:nth-child(odd) {
    background-color: var(--mud-palette-surface);
}

.tooltip-detail-item:nth-child(even) {
    background-color: var(--mud-palette-background);
}

.tooltip-detail-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.tooltip-detail-label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    min-width: 100px;
    flex-shrink: 0;
}

.tooltip-detail-value {
    font-size: 0.8rem;
    color: var(--mud-palette-text-primary);
    word-break: break-word;
}

.tooltip-detail-value.highlight {
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.tooltip-detail-value.success,
.tooltip-note.tooltip-note--success {
    color: var(--mud-palette-success);
}

.tooltip-detail-value.warning,
.tooltip-note.tooltip-note--warning {
    color: var(--mud-palette-warning);
}

.tooltip-detail-value.error,
.tooltip-note.tooltip-note--error {
    color: var(--mud-palette-error);
}

.tooltip-note.tooltip-note--info {
    color: var(--mud-palette-info);
}

.tooltip-note.tooltip-note--secondary {
    color: var(--mud-palette-text-secondary);
}

/* TooltipNote: text bez popisku ve stejném řádku jako TooltipDetailItem. */
.tooltip-note {
    font-size: 0.8rem;
    color: var(--mud-palette-text-primary);
}

/* ============================================================
   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: var(--ss-radius-sm, 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: var(--ss-radius-xs, 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: var(--ss-radius-xs, 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: var(--ss-radius-xs, 8px);
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, rgba(0, 0, 0, 0.87));
    box-shadow: var(--ss-shadow-card, 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: var(--ss-radius-pill, 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-flex-1-min-0 {
    flex: 1 1 auto;
    min-width: 0;
}

/* Vybraná položka OptionSelect/OptionAutocomplete: dlouhý text se zkrátí třemi tečkami
   (celý je v title), chip nepřeteče úzký kontejner — zásuvku filtru, dialog, mobil. */
.ui-option-chip {
    max-width: 100%;
}

.ui-option-chip .mud-chip-content {
    min-width: 0;
    max-width: 100%;
}

.ui-option-chip__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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: var(--ss-shadow-raised, 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;
}

/* HorizontalNavMenu — hlavní menu jako pás pod appbarem. Barvy z palety motivu; aplikace smí
   přepsat vzhled pásu (.horizontal-menu-shell) i šířku podmenu (--horizontal-submenu-width na :root). */
:root {
    --horizontal-submenu-width: 340px;
}


.horizontal-menu-shell {
    /* Ukotvení pod fixním appbarem. top musí přesně sedět na jeho výšku, jinak menu při
       přechodu do sticky poskočí — MudBlazor ji mění podle displeje, breakpointy jsou stejné:
       úzký portrait 7/8 --mud-appbar-height, landscape 3/4, od 600px plná výška. */
    position: sticky;
    top: calc(var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px) / 8);
    z-index: 100;
    height: 58px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

@media (orientation: landscape) {
    .horizontal-menu-shell {
        top: calc(var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px) / 4);
    }
}

@media (min-width: 600px) {
    .horizontal-menu-shell {
        top: var(--mud-appbar-height, 64px);
    }
}

.horizontal-menu-strip {
    display: flex;
    align-items: flex-start;
    gap: 0.22rem;
    height: 100%;
    padding: 0.16rem 0.32rem;
}

.horizontal-menu-row {
    display: grid;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    column-gap: 0.35rem;
    padding: 0.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.horizontal-menu-row::-webkit-scrollbar {
    display: none;
}

/* Šipky jen když se menu nevejde (třídu přepíná js/horizontal-nav-menu.js). */
.horizontal-scroll-arrow {
    display: none !important;
    flex: 0 0 auto;
    align-self: center;
    width: 26px;
    height: 26px;
    border-radius: var(--ss-radius-xs, 8px);
    opacity: 0.7;
}

.horizontal-menu-strip.has-overflow .horizontal-scroll-arrow {
    display: inline-flex !important;
}

.horizontal-menu-cell {
    display: flex;
    min-width: 0;
}

.horizontal-menu-item {
    min-width: 98px;
    max-width: 114px;
    min-height: 46px;
    padding: 0.24rem 0.25rem;
    border-radius: var(--ss-radius-sm, 10px);
    text-transform: none;
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.horizontal-menu-item:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
}

.horizontal-menu-item.menu-group-item {
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, transparent);
}

.horizontal-menu-item.menu-link-item {
    border: 1px solid transparent;
}

.horizontal-menu-item-active {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border-color: transparent !important;
    box-shadow: var(--ss-shadow-raised, 0 2px 6px rgba(0, 0, 0, 0.18));
}

.horizontal-menu-item-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    width: 100%;
    line-height: 1;
    position: relative;
}

.horizontal-menu-item-icon {
    font-size: 1.03rem;
}

.horizontal-menu-item-label {
    display: block;
    max-width: 100%;
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vlastní vzhled má panel uvnitř — obal popoveru MudMenu zprůhlednit, jinak za ním zůstane bílý obdélník se stínem. */
.mud-popover.horizontal-submenu-host {
    background: transparent;
    box-shadow: none;
}

.horizontal-submenu-host .mud-list {
    padding: 0;
}

.horizontal-submenu-popover {
    padding-top: 0.85rem;
}

.horizontal-submenu-menu-surface {
    width: min(86vw, var(--horizontal-submenu-width));
    padding: 0.55rem;
    border-radius: var(--ss-radius-card, 18px);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, white 8%);
    box-shadow: var(--ss-shadow-raised, 0 16px 36px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.08));
    overflow: hidden;
}

.horizontal-submenu-menu-list {
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    max-height: min(calc(100dvh - var(--mud-appbar-height, 64px) - 5rem), 70vh);
    padding-right: 0.12rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

.horizontal-submenu-menu-list::-webkit-scrollbar {
    width: 8px;
}

.horizontal-submenu-menu-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    border-radius: var(--ss-radius-pill, 999px);
}

.horizontal-submenu-link {
    min-height: 42px;
    padding: 0.34rem 0.95rem;
    border-radius: var(--ss-radius-sm, 12px);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    white-space: normal;
}

.horizontal-submenu-link .mud-button-label {
    width: 100%;
    justify-content: center;
}

.horizontal-menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: var(--ss-radius-sm, 9px);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.horizontal-menu-badge.is-alert {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

/* Odznak položky menu (ikona nad popiskem) jako u zvonečku: v rohu ikony mimo tok, takže nerozhodí vycentrování. */
.horizontal-menu-item-inner > .horizontal-menu-badge {
    position: absolute;
    top: -6px;
    left: calc(50% + 5px);
    min-width: 16px;
    height: 16px;
    margin: 0;
    padding: 0 4px;
    font-size: 0.62rem;
    box-shadow: 0 0 0 2px var(--mud-palette-surface);
}

.horizontal-submenu-link-active {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border-color: transparent !important;
}

/* ImportCard — souhrn výsledku importu. */
.import-card__stats {
    font-size: 0.85rem;
}

/* 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: var(--ss-radius-sm, 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;
    }
}

/* CompositionBar – poměrové složení jako barevný proužek (šířku úseků nastavuje komponenta). */
.ss-composition-bar {
    display: flex;
    width: 100%;
    min-width: 80px;
    height: 10px;
    border-radius: var(--ss-radius-xs, 5px);
    overflow: hidden;
    background: var(--mud-palette-lines-default);
    cursor: help;
}

.ss-composition-bar__segment {
    height: 100%;
}

/* Grafy zobrazitelné / skrývatelné z appbaru (ChartTogglePanel, ChartToggleDataGridPageBase) – přesunuto z Erplitexu. */
.chart-panel-wrap {
    transition: max-height 250ms ease, opacity 250ms ease, margin-bottom 250ms ease;
    overflow: hidden;
}

.chart-panel-wrap.open {
    opacity: 1;
    max-height: 200vh;
    margin-bottom: 16px;
    overflow: visible;
}

.chart-panel-wrap.closed {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
}

/* První odkrytí po načtení stránky bez animace (ChartToggleController) — obsah pod grafy se neposouvá snímek po snímku. */
.chart-panel-wrap.no-anim {
    transition: none;
}

/* ====================== Vzhled (AppearanceProvider, AppearanceSettings) ====================== */

/* Obal layoutu s třídami vzhledu (AppearanceProvider, AppearanceService.RootClasses) — sám nic nevykresluje. */
.ss-appearance-root {
    display: contents;
}

/* Vzhled → Animace. Ukazatele načítání se nechávají běžet, jinak by nekonečná animace zamrzla mimo obrazovku. */
.ss-motion-reduced *:not(.mud-progress-linear *, .mud-progress-circular *),
.ss-motion-reduced *::before,
.ss-motion-reduced *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    .ss-motion-system *:not(.mud-progress-linear *, .mud-progress-circular *),
    .ss-motion-system *::before,
    .ss-motion-system *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Vzhled → Číslice pevné šířky: čísla v tabulkách a polích se řadí pod sebe. */
.ss-tabular-numbers .mud-table-cell,
.ss-tabular-numbers .mud-input {
    font-variant-numeric: tabular-nums;
}

/* Prvek v barvách lišty (hlavička zásuvky, náhled lišty) — styl lišty si volí uživatel ve Vzhledu. */
.ss-appbar-colors {
    background-color: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
}

/* ---------------- Styly rozhraní (UserAppearance.Style → ss-style-*) ----------------
   Paletu, rohy, stíny a písmo stylu nastavuje AppearanceThemeBuilder; tady je jen to, co MudTheme neumí:
   průsvitnost, obrysy, vzor pozadí, tvar menu a tabulek. Třídy jsou na obalu .ss-appearance-root kolem layoutu
   i providerů, takže platí i pro dialogy a podmenu. Klasický styl tu nic nemá. */

/* Písma stylů Terminál a Dílna — prohlížeč je stáhne, až když je styl opravdu použije. Licence OFL. */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-condensed-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlow-condensed-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokeny vzhledu pro vlastní plochy komponent a stránek (karty, dlaždice, banner, pilulky). Komponenta je používá
   se svou původní hodnotou jako zálohou — var(--ss-radius-card, 16px) — takže mimo AppearanceProvider vypadá jako dřív.
   Rohy se odvozují ze zaoblení motivu (Vzhled → Rohy / styl): klasických 6 px dává 8 / 10 / 16 / 22 px.
   Stíny (--ss-shadow-card / --ss-shadow-raised) nastavují jen neklasické styly — klasický má původní stíny komponent. */
.ss-appearance-root {
    --ss-grid-color: var(--mud-palette-primary);
    --ss-glass-edge: rgba(255, 255, 255, 0.7);
    --ss-hazard: #f5c400;

    --ss-radius-xs: clamp(0px, calc(var(--mud-default-borderradius) * 1.33), 10px);
    --ss-radius-sm: clamp(0px, calc(var(--mud-default-borderradius) * 1.67), 14px);
    --ss-radius-card: clamp(0px, calc(var(--mud-default-borderradius) * 2.67), 24px);
    --ss-radius-hero: clamp(0px, calc(var(--mud-default-borderradius) * 3.67), 32px);
    --ss-radius-pill: 999px;
    --ss-card-bg: var(--mud-palette-surface);
    --ss-card-border: var(--mud-palette-lines-default);
    --ss-font-heading: inherit;
    --ss-heading-transform: none;
    --ss-heading-spacing: normal;

    /* Výrazný pruh v hlavní barvě (úvodní banner nástěnky apod.): pozadí, písmo, obrys, stín, ozdoba. */
    --ss-banner-bg:
        radial-gradient(circle at 92% -20%, rgba(255, 255, 255, 0.28), transparent 42%),
        radial-gradient(circle at 70% 140%, color-mix(in srgb, var(--mud-palette-info) 55%, transparent), transparent 55%),
        linear-gradient(125deg, color-mix(in srgb, var(--mud-palette-primary) 80%, #000) 0%, var(--mud-palette-primary) 55%,
            color-mix(in srgb, var(--mud-palette-primary) 70%, var(--mud-palette-info)) 100%);
    --ss-banner-fg: #ffffff;
    --ss-banner-border: transparent;
    --ss-banner-shadow: 0 18px 40px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    --ss-banner-ornament: block;
}

.ss-mode-dark {
    --ss-glass-edge: rgba(255, 255, 255, 0.09);
    /* Hlavní barva je v tmavém režimu světlá — pruh tmavý s nádechem hlavní barvy, ať bílé písmo drží kontrast. */
    --ss-banner-bg:
        radial-gradient(circle at 92% -20%, color-mix(in srgb, var(--mud-palette-primary) 35%, transparent), transparent 45%),
        radial-gradient(circle at 70% 140%, color-mix(in srgb, var(--mud-palette-info) 30%, transparent), transparent 55%),
        linear-gradient(125deg, color-mix(in srgb, var(--mud-palette-primary) 22%, #0c1310) 0%, color-mix(in srgb, var(--mud-palette-primary) 34%, #0c1310) 60%,
            color-mix(in srgb, var(--mud-palette-info) 26%, #0c1310) 100%);
    --ss-banner-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.ss-style-soft {
    --ss-card-border: transparent;
    --ss-shadow-card: 0 1px 2px rgba(15, 20, 25, 0.04), 0 10px 30px rgba(15, 20, 25, 0.1);
    --ss-shadow-raised: 0 2px 4px rgba(15, 20, 25, 0.05), 0 18px 44px rgba(15, 20, 25, 0.16);
}

.ss-style-glass {
    --ss-card-bg: color-mix(in srgb, var(--mud-palette-surface) 74%, transparent);
    --ss-card-border: var(--ss-glass-edge);
    --ss-shadow-card: 0 8px 32px rgba(20, 30, 50, 0.12);
    --ss-shadow-raised: 0 14px 40px rgba(20, 30, 50, 0.2);
    --ss-banner-bg:
        radial-gradient(circle at 90% -10%, rgba(255, 255, 255, 0.35), transparent 45%),
        linear-gradient(125deg, color-mix(in srgb, var(--mud-palette-primary) 82%, transparent), color-mix(in srgb, var(--mud-palette-primary) 45%, transparent));
    --ss-banner-border: var(--ss-glass-edge);
}

/* Ostré styly: pilulky jen se zaoblením motivu, místo stínů obrysy. */
:is(.ss-style-technical, .ss-style-terminal, .ss-style-workshop) {
    --ss-radius-pill: var(--mud-default-borderradius);
    --ss-shadow-card: none;
    --ss-card-border: color-mix(in srgb, var(--mud-palette-text-primary) 24%, transparent);
    --ss-banner-ornament: none;
}

.ss-style-technical {
    --ss-shadow-raised: 4px 4px 0 color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    --ss-banner-bg:
        linear-gradient(color-mix(in srgb, var(--mud-palette-appbar-text) 9%, transparent) 1px, transparent 1px) 0 0 / 16px 16px,
        linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-appbar-text) 9%, transparent) 1px, transparent 1px) 0 0 / 16px 16px,
        var(--mud-palette-appbar-background);
    --ss-banner-fg: var(--mud-palette-appbar-text);
    --ss-banner-shadow: none;
}

.ss-style-terminal {
    --ss-card-border: var(--mud-palette-divider);
    --ss-shadow-raised: 0 0 0 1px var(--mud-palette-primary);
    --ss-banner-bg: var(--mud-palette-surface);
    --ss-banner-fg: var(--mud-palette-text-primary);
    --ss-banner-border: var(--mud-palette-primary);
    --ss-banner-shadow: none;
}

.ss-style-terminal.ss-mode-dark {
    --ss-banner-shadow: 0 0 32px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    --ss-shadow-raised: 0 0 0 1px var(--mud-palette-primary), 0 0 18px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}

.ss-style-tiles {
    --ss-card-border: transparent;
    --ss-shadow-card: none;
    --ss-shadow-raised: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    --ss-banner-bg: var(--mud-palette-tertiary);
    --ss-banner-fg: var(--mud-palette-tertiary-text);
    --ss-banner-shadow: none;
    --ss-banner-ornament: none;
}

.ss-style-workshop {
    --ss-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 0 rgba(0, 0, 0, 0.3);
    --ss-shadow-raised: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 0 rgba(0, 0, 0, 0.35);
    --ss-font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --ss-heading-transform: uppercase;
    --ss-heading-spacing: 0.04em;
    --ss-banner-bg:
        repeating-linear-gradient(-45deg, var(--ss-hazard) 0 10px, #121417 10px 20px) left bottom / 100% 6px no-repeat,
        linear-gradient(180deg, #2a2f34, #121417);
    --ss-banner-fg: #e8eaec;
    --ss-banner-border: #0b0c0e;
    --ss-banner-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.ss-style-technical.ss-mode-dark {
    --ss-grid-color: #8cb4ff;
}

/* Vzor pozadí stránky: pevná vrstva pod obsahem (neposouvá se se stránkou, pod průsvitnou lištou je vidět).
   Layout je vlastní kontext vrstvení — jinak by se pozadí body (app.css) kreslilo přes vrstvu se z-index -1. */
:is(.ss-backdrop-gradient, .ss-backdrop-mesh, .ss-backdrop-dots, .ss-backdrop-grid, .ss-backdrop-lines) .mud-layout {
    isolation: isolate;
}

:is(.ss-backdrop-gradient, .ss-backdrop-mesh, .ss-backdrop-dots, .ss-backdrop-grid, .ss-backdrop-lines) .mud-layout::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.ss-backdrop-gradient .mud-layout::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-background)) 0, var(--mud-palette-background) 480px);
}

.ss-backdrop-mesh .mud-layout::before {
    background:
        radial-gradient(ellipse 60% 55% at 8% 0%, color-mix(in srgb, var(--mud-palette-primary) 40%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 60% at 70% 105%, color-mix(in srgb, var(--mud-palette-primary) 22%, transparent), transparent 70%),
        var(--mud-palette-background);
    /* Druhá a třetí skvrna v odstínech posunutých po barevném kruhu (relativní barvy; starší prohlížeč má jen první řádek). */
    background:
        radial-gradient(ellipse 60% 55% at 8% 0%, color-mix(in srgb, var(--mud-palette-primary) 40%, transparent), transparent 70%),
        radial-gradient(ellipse 50% 50% at 92% 12%, hsl(from var(--mud-palette-primary) calc(h + 45) s l / 0.32), transparent 70%),
        radial-gradient(ellipse 60% 60% at 60% 105%, hsl(from var(--mud-palette-primary) calc(h - 60) s l / 0.28), transparent 70%),
        var(--mud-palette-background);
}

.ss-backdrop-dots .mud-layout::before {
    background: radial-gradient(color-mix(in srgb, var(--mud-palette-text-primary) 16%, transparent) 1px, transparent 1.4px) 0 0 / 16px 16px, var(--mud-palette-background);
}

/* Milimetrový papír: jemná linka po 8 px, výraznější po 40 px. */
.ss-backdrop-grid .mud-layout::before {
    background:
        linear-gradient(color-mix(in srgb, var(--ss-grid-color) 13%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, color-mix(in srgb, var(--ss-grid-color) 13%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(color-mix(in srgb, var(--ss-grid-color) 6%, transparent) 1px, transparent 1px) 0 0 / 8px 8px,
        linear-gradient(90deg, color-mix(in srgb, var(--ss-grid-color) 6%, transparent) 1px, transparent 1px) 0 0 / 8px 8px,
        var(--mud-palette-background);
}

/* Řádky jako na starém monitoru. */
.ss-backdrop-lines .mud-layout::before {
    background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent) 0 1px, transparent 1px 3px), var(--mud-palette-background);
}

/* Lišta a menu nad vzorem pozadí: místo plné barvy průsvitné s rozostřením (Měkký, Sklo). */
:is(.ss-style-soft, .ss-style-glass) .mud-appbar,
:is(.ss-style-soft, .ss-style-glass) .horizontal-menu-shell {
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
}

/* --- Měkký: lišta jako plovoucí ostrůvek, karty na měkkém stínu (Shadows), tlačítka a menu jako pilulky --- */
.ss-style-soft .mud-appbar {
    background-color: color-mix(in srgb, var(--mud-palette-background) 70%, transparent);
    box-shadow: none;
}

/* Ostrůvek = plocha lišty bez horních 8 px; stín kopíruje jen vybarvenou část (drop-shadow, ne box-shadow). */
.ss-style-soft .mud-toolbar-appbar {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    margin-inline: 10px;
    border-top: 8px solid transparent;
    border-radius: calc(var(--mud-default-borderradius) + 4px);
    background: var(--mud-palette-appbar-background) padding-box;
    filter: drop-shadow(0 4px 12px rgba(15, 20, 25, 0.1));
}

/* Na telefonu by okraje ostrůvku ubraly místo ikonám lišty — menší okraj i vnitřní odsazení. */
@media (max-width: 599.98px) {
    .ss-style-soft .mud-toolbar-appbar {
        margin-inline: 4px;
        padding-inline: 8px;
    }
}

.ss-style-soft .horizontal-menu-shell {
    border-bottom-color: transparent;
    background: color-mix(in srgb, var(--mud-palette-background) 70%, transparent);
}

:is(.ss-style-soft, .ss-style-tiles) .horizontal-menu-item {
    border-radius: 999px;
}

.ss-style-soft .horizontal-menu-item-active {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-primary) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(15, 20, 25, 0.1);
}

:is(.ss-style-soft, .ss-style-tiles) .mud-button-root:not(.mud-icon-button, .horizontal-menu-item, .horizontal-submenu-link) {
    border-radius: 999px;
}

.ss-style-soft .mud-table-head .mud-table-cell {
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

/* --- Sklo: průsvitná lišta, menu, karty, podmenu a dialogy --- */
.ss-style-glass .mud-appbar {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 55%, transparent);
    box-shadow: 0 1px 0 var(--ss-glass-edge);
}

.ss-style-glass .horizontal-menu-shell {
    border-bottom-color: var(--ss-glass-edge);
    background: color-mix(in srgb, var(--mud-palette-surface) 35%, transparent);
}

.ss-style-glass .horizontal-menu-item {
    border-radius: 999px;
}

.ss-style-glass .horizontal-menu-item-active {
    background: color-mix(in srgb, var(--mud-palette-surface) 70%, transparent) !important;
    color: var(--mud-palette-text-primary) !important;
    box-shadow: inset 0 0 0 1px var(--ss-glass-edge), 0 4px 14px rgba(20, 30, 50, 0.12);
}

/* Karty a tabulky na stránce jen poloprůsvitné (bez rozostření — stránka s mnoha kartami by na starším PC trhala). */
.ss-style-glass .mud-main-content :is(.mud-paper, .mud-card):not(.mud-paper .mud-paper, .mud-paper .mud-card) {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 78%, transparent);
}

.ss-style-glass .mud-main-content :is(.mud-paper, .mud-card):not(.mud-paper-outlined, .mud-paper .mud-paper, .mud-paper .mud-card) {
    border: 1px solid var(--ss-glass-edge);
}

.ss-style-glass .mud-table-head .mud-table-cell {
    background: transparent;
}

.ss-style-glass :is(.mud-dialog, .mud-popover.mud-paper:not(.horizontal-submenu-host), .horizontal-submenu-menu-surface) {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 72%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    backdrop-filter: blur(24px) saturate(1.6);
}

.ss-style-glass .mud-overlay-dialog .mud-overlay-scrim {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.ss-style-glass .mud-button-filled-primary {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
}

@media (prefers-reduced-transparency: reduce) {
    .ss-style-glass :is(.mud-appbar, .horizontal-menu-shell, .mud-dialog, .mud-popover.mud-paper:not(.horizontal-submenu-host), .horizontal-submenu-menu-surface),
    .ss-style-soft :is(.mud-appbar, .horizontal-menu-shell) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: var(--mud-palette-surface);
    }

    .ss-style-glass .mud-main-content :is(.mud-paper, .mud-card) {
        background-color: var(--mud-palette-surface);
    }
}

/* --- Technický a Terminál: místo stínů tenké obrysy (Shadows = none), ostré čipy --- */
:is(.ss-style-technical, .ss-style-terminal) :is(.mud-paper, .mud-card):not(.mud-paper-outlined, .mud-elevation-0, .horizontal-submenu-host) {
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 26%, transparent);
}

:is(.ss-style-technical, .ss-style-terminal, .ss-style-workshop) .mud-chip {
    border-radius: 2px;
}

.ss-style-technical .horizontal-menu-item {
    border-radius: 2px;
}

/* Verzálky potřebují vyšší řádek — štítek ořezává přetečení a háček nad Č/Ú by se jinak usekl. */
.ss-style-technical .horizontal-menu-item-label,
.ss-style-workshop .horizontal-menu-item-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.35;
}

.ss-style-technical .horizontal-menu-item-active {
    background: transparent !important;
    color: var(--mud-palette-primary) !important;
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-primary);
}

.ss-style-technical .mud-table-head .mud-table-cell {
    background: transparent;
    color: var(--mud-palette-text-primary);
    border-bottom: 1.5px solid var(--mud-palette-text-primary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.ss-style-technical .mud-card-header .mud-typography {
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.ss-style-technical .mud-button-root:not(.mud-icon-button) {
    letter-spacing: 0.06em;
}

.ss-style-technical .mud-dialog {
    box-shadow: 0 0 0 1px var(--mud-palette-text-primary), 8px 8px 0 color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

/* --- Terminál: přerušované linky, [tlačítka], v tmavém režimu svítící hlavní barva --- */
.ss-style-terminal .mud-table-cell {
    border-bottom-style: dashed;
}

.ss-style-terminal .mud-table-head .mud-table-cell {
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ss-style-terminal :is(.mud-button-filled, .mud-button-outlined) .mud-button-label::before {
    content: "[";
    margin-right: 0.35em;
}

.ss-style-terminal :is(.mud-button-filled, .mud-button-outlined) .mud-button-label::after {
    content: "]";
    margin-left: 0.35em;
}

.ss-style-terminal .mud-button-root:not(.mud-icon-button) {
    text-transform: none;
}

.ss-style-terminal *::selection {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.ss-style-terminal.ss-mode-dark :is(h1, h2, h3, h4, h5, h6, .mud-primary-text) {
    text-shadow: 0 0 8px color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
}

.ss-style-terminal.ss-mode-dark :is(.mud-button-filled-primary, .horizontal-menu-item-active) {
    box-shadow: 0 0 16px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent) !important;
}

.ss-style-terminal .mud-dialog {
    box-shadow: 0 0 0 1px var(--mud-palette-primary), 0 0 48px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

/* --- Dlaždice: velké oblé plochy bez čar, menu jako segmentový přepínač v pilulce --- */
.ss-style-tiles .mud-appbar {
    box-shadow: none;
}

.ss-style-tiles .horizontal-menu-shell {
    border-bottom: 0;
    background: var(--mud-palette-background);
}

.ss-style-tiles .horizontal-menu-row {
    border-radius: 999px;
    background: var(--mud-palette-surface);
}

.ss-style-tiles .horizontal-menu-item.menu-group-item {
    border-color: transparent;
    background: transparent;
}

.ss-style-tiles .horizontal-menu-item-active {
    background: var(--mud-palette-text-primary) !important;
    color: var(--mud-palette-background) !important;
    box-shadow: none;
}

.ss-style-tiles .mud-main-content .mud-paper-outlined:not(.mud-paper .mud-paper) {
    border-color: transparent;
}

.ss-style-tiles .mud-table-head .mud-table-cell {
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

.ss-style-tiles .mud-table-cell {
    border-bottom-color: color-mix(in srgb, var(--mud-palette-divider) 55%, transparent);
}

.ss-style-tiles .mud-dialog {
    border-radius: calc(var(--mud-default-borderradius) + 8px);
}

/* --- Dílna: výstražný pruh pod lištou, ocelové plochy s nýty, stavy jako kontrolky --- */
.ss-style-workshop .mud-appbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: repeating-linear-gradient(-45deg, var(--ss-hazard) 0 10px, #121417 10px 20px);
    pointer-events: none;
}

.ss-style-workshop .horizontal-menu-shell {
    border-bottom-color: #0b0c0e;
    background: #2a2f34;
}

.ss-style-workshop .horizontal-menu-item {
    border-radius: 2px;
    color: #c9cfd5;
}

.ss-style-workshop .horizontal-menu-item.menu-group-item {
    border-color: #3a4148;
    background: transparent;
}

.ss-style-workshop .horizontal-menu-item-label {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: 0.8rem;
}

.ss-style-workshop .horizontal-menu-item-active {
    background: var(--ss-hazard) !important;
    color: #121417 !important;
}

/* Nadpisy vlastních komponent knihovny (nástěnka, kanban, detail řádku) úzkým písmem stylu. */
.ss-style-workshop :is(.ss-board__title, .ss-kanban__title, .ss-row-detail__title, .ss-journey__title) {
    font-family: var(--ss-font-heading);
    text-transform: var(--ss-heading-transform);
    letter-spacing: var(--ss-heading-spacing);
}

/* Nýty v rozích karet na stránce (ne u tabulek — nýt by seděl na záhlaví). */
.ss-style-workshop .mud-main-content :is(.mud-paper, .mud-card):not(.mud-paper .mud-paper, .mud-paper .mud-card, .mud-table, .mud-elevation-0) {
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    background-image:
        radial-gradient(circle at 9px 9px, var(--ss-rivet) 2.5px, transparent 3.2px),
        radial-gradient(circle at calc(100% - 9px) 9px, var(--ss-rivet) 2.5px, transparent 3.2px),
        radial-gradient(circle at 9px calc(100% - 9px), var(--ss-rivet) 2.5px, transparent 3.2px),
        radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--ss-rivet) 2.5px, transparent 3.2px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 60px);
}

.ss-style-workshop {
    --ss-rivet: #9aa2a9;
}

.ss-style-workshop.ss-mode-dark {
    --ss-rivet: #0c0e10;
}

.ss-style-workshop .mud-table-head .mud-table-cell {
    background: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text);
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ss-style-workshop .mud-button-filled {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 55%, rgba(0, 0, 0, 0.12));
}

/* Stavové čipy jako kontrolka na panelu stroje: tmavý štítek, barevná LED. */
.ss-style-workshop .mud-chip.mud-chip-filled:is(.mud-chip-color-success, .mud-chip-color-warning, .mud-chip-color-error) {
    background-color: #121417;
    color: #e6e9ec;
}

.ss-style-workshop .mud-chip.mud-chip-color-success { --ss-led: #3ddc5b; }
.ss-style-workshop .mud-chip.mud-chip-color-warning { --ss-led: #ffb300; }
.ss-style-workshop .mud-chip.mud-chip-color-error { --ss-led: #ff3b30; }

.ss-style-workshop .mud-chip.mud-chip-filled:is(.mud-chip-color-success, .mud-chip-color-warning, .mud-chip-color-error)::before {
    content: "";
    flex: none;
    align-self: center;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--ss-led);
    box-shadow: 0 0 6px var(--ss-led);
}

.ss-style-workshop .mud-dialog .mud-dialog-title {
    background: #121417;
    color: #f2f2f2;
    box-shadow: inset 0 -4px 0 var(--ss-hazard);
}

.ss-style-workshop .mud-dialog .mud-dialog-title .mud-button-close {
    color: #f2f2f2;
}

/* ---------------- Nastavení vzhledu (AppearanceSettings) ---------------- */

.ss-appearance-heading {
    font-weight: 600;
    margin-bottom: 8px;
}

/* Skupina voleb (karta) a řádek „popisek → ovládání“; na úzkém displeji pod sebou. */
.ss-appearance-group {
    padding: 8px 20px 4px;
}

.ss-appearance-group__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 8px;
}

.ss-appearance-row {
    display: grid;
    grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
    gap: 8px 24px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--mud-palette-divider);
}

.ss-appearance-row__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ss-appearance-row__control {
    min-width: 0;
}

@media (max-width: 600px) {
    .ss-appearance-row {
        grid-template-columns: 1fr;
    }

    /* Přepínače na telefonu bez ikon (texty se jinak lámou) a režim se čtyřmi volbami ve dvou řadách. */
    .ss-appearance-toggle .mud-icon-root {
        display: none;
    }

    .ss-appearance-toggle--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ss-appearance-toggle--grid > .mud-toggle-item:nth-child(n + 3) {
        border-top-style: solid !important;
        margin-top: -1px;
    }

    .ss-appearance-toggle--grid > .mud-toggle-item:nth-child(odd) {
        margin-left: 0 !important;
        border-left-style: none !important;
    }
}

.ss-appearance-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 480px;
}

.ss-appearance-choice {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ss-appearance-choice:hover {
    border-color: var(--mud-palette-primary);
}

.ss-appearance-choice:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.ss-appearance-choice--selected {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.ss-appearance-choice__sample {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border-radius: calc(var(--mud-default-borderradius) - 2px);
    background: var(--mud-palette-background);
    color: var(--mud-palette-primary);
}

.ss-appearance-choice__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.8125rem;
    text-align: center;
}

/* Ukázka lišty: pruh nahoře v barvách daného stylu, pod ním obsah. */
.ss-appearance-appbar-sample {
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    background: var(--mud-palette-background);
}

.ss-appearance-appbar-sample > span:first-child {
    height: 12px;
}

.ss-appearance-appbar-sample--tinted > span:first-child {
    background: var(--mud-palette-tertiary);
}

.ss-appearance-appbar-sample--accent > span:first-child {
    background: var(--mud-palette-primary);
}

.ss-appearance-appbar-sample--plain > span:first-child {
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ss-appearance-appbar-sample > span:last-child {
    margin: 6px;
    height: 8px;
    width: 60%;
    border-radius: 2px;
    background: var(--mud-palette-divider);
}

.ss-appearance-time {
    max-width: 160px;
}

/* Vzorník barev */
.ss-appearance-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ss-appearance-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid var(--mud-palette-surface);
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px var(--mud-palette-divider);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ss-appearance-swatch:hover {
    transform: scale(1.08);
}

.ss-appearance-swatch:focus-visible {
    outline: 2px solid var(--swatch);
    outline-offset: 2px;
}

.ss-appearance-swatch--selected {
    box-shadow: 0 0 0 2px var(--swatch);
}

.ss-appearance-custom-color {
    max-width: 220px;
}

/* Dlaždice stylů a pozadí — víc voleb než u lišty, řádek se zalomí. */
.ss-appearance-choices--styles {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    max-width: none;
}

.ss-appearance-choices--compact {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    max-width: none;
}

.ss-appearance-tones {
    display: grid;
    justify-items: start;
    gap: 6px;
}

/* Ukázka stylu: lišta a dvě karty v typických barvách stylu (nezávisle na právě zvoleném stylu), akcent z palety. */
.ss-appearance-style-sample {
    display: grid;
    grid-template: "bar bar" 11px "a b" 1fr / 1.6fr 1fr;
    gap: 5px;
    width: 88%;
    height: 44px;
    padding-bottom: 5px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--mud-palette-divider);
    --ss-sample-bg: color-mix(in srgb, var(--mud-palette-primary) 7%, #f6f7f6);
    --ss-sample-bar: color-mix(in srgb, var(--mud-palette-primary) 28%, #ffffff);
    --ss-sample-card: #ffffff;
    background: var(--ss-sample-bg);
}

.ss-appearance-style-sample > span:nth-child(1) {
    grid-area: bar;
    background: var(--ss-sample-bar);
}

.ss-appearance-style-sample > span:nth-child(2),
.ss-appearance-style-sample > span:nth-child(3) {
    background: var(--ss-sample-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.ss-appearance-style-sample > span:nth-child(2) {
    margin-left: 5px;
}

.ss-appearance-style-sample > span:nth-child(3) {
    margin-right: 5px;
}

.ss-appearance-style-sample--soft {
    --ss-sample-bg: color-mix(in srgb, var(--mud-palette-primary) 12%, #eff1ef);
}

.ss-appearance-style-sample--soft > span:nth-child(1) {
    margin: 3px 4px 0;
    border-radius: 4px;
    background: #ffffff;
}

.ss-appearance-style-sample--soft > span:nth-child(n + 2) {
    border-radius: 5px;
    box-shadow: 0 3px 8px rgba(15, 20, 25, 0.12);
}

.ss-appearance-style-sample--glass {
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--mud-palette-primary) 55%, transparent), transparent 60%),
        radial-gradient(circle at 95% 40%, color-mix(in srgb, var(--mud-palette-primary) 30%, #7fb6ff), transparent 60%),
        #eef1f4;
}

.ss-appearance-style-sample--glass > span:nth-child(1) {
    background: rgba(255, 255, 255, 0.55);
}

.ss-appearance-style-sample--glass > span:nth-child(n + 2) {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
    border-radius: 4px;
}

.ss-appearance-style-sample--technical {
    background:
        linear-gradient(color-mix(in srgb, var(--mud-palette-primary) 16%, transparent) 1px, transparent 1px) 0 0 / 6px 6px,
        linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-primary) 16%, transparent) 1px, transparent 1px) 0 0 / 6px 6px,
        #f7f8fa;
}

.ss-appearance-style-sample--technical > span:nth-child(1) {
    background: #1d2733;
}

.ss-appearance-style-sample--technical > span:nth-child(n + 2) {
    border-radius: 0;
    box-shadow: inset 0 0 0 1px #7d8894;
}

.ss-appearance-style-sample--terminal {
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px), #050706;
}

.ss-appearance-style-sample--terminal > span:nth-child(1) {
    background: #000000;
    box-shadow: inset 0 -1px 0 var(--mud-palette-primary);
}

.ss-appearance-style-sample--terminal > span:nth-child(n + 2) {
    border-radius: 0;
    background: #090d0b;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 60%, transparent);
}

.ss-appearance-style-sample--tiles {
    --ss-sample-bg: #e9ebea;
    --ss-sample-bar: transparent;
}

.ss-appearance-style-sample--tiles > span:nth-child(n + 2) {
    border-radius: 7px;
    box-shadow: none;
}

.ss-appearance-style-sample--tiles > span:nth-child(3) {
    background: color-mix(in srgb, var(--mud-palette-primary) 35%, #ffffff);
}

.ss-appearance-style-sample--workshop {
    --ss-sample-bg: #c9ced2;
    --ss-sample-card: #eceef0;
}

.ss-appearance-style-sample--workshop > span:nth-child(1) {
    background: linear-gradient(#121417 0 8px, transparent 8px), repeating-linear-gradient(-45deg, #f5c400 0 3px, #121417 3px 6px);
}

.ss-appearance-style-sample--workshop > span:nth-child(n + 2) {
    border-radius: 1px;
    box-shadow: inset 0 0 0 1px #9aa3ab, 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* Ukázka vzoru pozadí v barvách aktuální palety. */
.ss-appearance-backdrop-sample {
    display: block;
    width: 88%;
    height: 40px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--mud-palette-divider);
    background: var(--mud-palette-background);
}

.ss-appearance-backdrop-sample--gradient {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-background)), var(--mud-palette-background));
}

.ss-appearance-backdrop-sample--mesh {
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--mud-palette-primary) 50%, transparent), transparent 65%),
        radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--mud-palette-primary) 30%, transparent), transparent 60%),
        var(--mud-palette-background);
}

.ss-appearance-backdrop-sample--dots {
    background: radial-gradient(color-mix(in srgb, var(--mud-palette-text-primary) 30%, transparent) 1px, transparent 1.4px) 0 0 / 8px 8px, var(--mud-palette-background);
}

.ss-appearance-backdrop-sample--grid {
    background:
        linear-gradient(color-mix(in srgb, var(--ss-grid-color) 22%, transparent) 1px, transparent 1px) 0 0 / 8px 8px,
        linear-gradient(90deg, color-mix(in srgb, var(--ss-grid-color) 22%, transparent) 1px, transparent 1px) 0 0 / 8px 8px,
        var(--mud-palette-background);
}

.ss-appearance-backdrop-sample--lines {
    background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent) 0 1px, transparent 1px 3px), var(--mud-palette-background);
}

/* Náhled — na širokém displeji zůstává při posunu voleb na očích. */
.ss-appearance-preview-sticky {
    position: sticky;
    top: 80px;
}

.ss-appearance-preview {
    overflow: hidden;
}

.ss-appearance-preview__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.ss-appearance-preview__title {
    flex: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ss-appearance-preview__body {
    padding: 16px;
    background: var(--mud-palette-background);
}

/* Mini graf v náhledu — sloupce v barvách řad grafů (AppearanceService.ChartColors). */
.ss-appearance-preview__chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 64px;
    padding: 4px 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ss-appearance-preview__chart > span {
    flex: 1;
    border-radius: 2px 2px 0 0;
}

@media (max-width: 960px) {
    .ss-appearance-preview-sticky {
        position: static;
    }
}

@media (max-width: 420px) {
    .ss-appearance-choices {
        gap: 8px;
    }

    .ss-appearance-choice {
        padding: 6px;
    }
}

/* ---------------- PointerDragDrop: duch tažení a kurzor ---------------- */

.ss-dnd-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    margin: 0;
    pointer-events: none;
    opacity: 0.95 !important;
    box-shadow: var(--ss-shadow-raised, 0 14px 30px rgba(0, 0, 0, 0.3)) !important;
    transition: none !important;
    animation: none !important;
}

body.ss-dnd-dragging,
body.ss-dnd-dragging * {
    cursor: grabbing !important;
    user-select: none;
}

/* Doznívající bublina by při tažení zakrývala cíle. */
body.ss-dnd-dragging .mud-tooltip {
    display: none !important;
}

/* ---------------- FillGauge ---------------- */

.ss-gauge {
    display: flex;
    flex-direction: column;
    min-width: 170px;
}

.ss-gauge small {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.ss-gauge__bar {
    height: 6px;
    margin-top: 3px;
    border-radius: 3px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.ss-gauge__bar i {
    display: block;
    height: 100%;
    background: var(--mud-palette-primary);
}

.ss-gauge.is-over .ss-gauge__bar i {
    background: var(--mud-palette-error);
}

/* Sparkline + KpiCard */
.ss-sparkline { display: block; color: var(--mud-palette-primary); }
.ss-sparkline__area { opacity: .16; }
.ss-sparkline__bar { opacity: .4; }
.ss-sparkline__bar--last { opacity: 1; }
.ss-kpi-card__value { line-height: 1.25; font-variant-numeric: tabular-nums; }

/* =========================================================================
   HeatmapMatrix — matice řádky × sloupce: hlavička a první sloupec drží, vodorovný posun na telefonu.
   Varianta tiles = dlaždice s mezerami (heatmapa hodnot), grid = mřížka s čarami (kalendář zdroj × den).
   ========================================================================= */
.ss-heatmap-wrap { overflow: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); }
.ss-heatmap { border-collapse: separate; background: var(--mud-palette-surface); }
.ss-heatmap thead th { position: sticky; top: 0; z-index: 2; background: var(--mud-palette-surface); font-weight: 500; text-align: center; }
.ss-heatmap .ss-heatmap__label { position: sticky; left: 0; z-index: 1; background: var(--mud-palette-surface); text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-heatmap thead th.ss-heatmap__label { z-index: 3; }
.ss-heatmap td.ss-heatmap__cell { text-align: center; white-space: nowrap; }
.ss-heatmap td.ss-heatmap__cell.is-clickable { cursor: pointer; }
.ss-heatmap td.ss-heatmap__cell:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }

.ss-heatmap--tiles { border-spacing: 2px; font-size: .78rem; font-variant-numeric: tabular-nums; }
.ss-heatmap--tiles thead th { padding: 2px 4px; color: var(--mud-palette-text-secondary); white-space: nowrap; line-height: 1.15; }
.ss-heatmap--tiles .ss-heatmap__label { min-width: 150px; max-width: 220px; padding: 2px 8px 2px 4px; }
.ss-heatmap--tiles td.ss-heatmap__cell { min-width: 42px; height: 30px; padding: 0 4px; border-radius: 4px;
    background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary); }
.ss-heatmap--tiles tr.ss-heatmap__summary-row td, .ss-heatmap--tiles td.ss-heatmap__summary { font-weight: 600; }

.ss-heatmap--grid { border-spacing: 0; font-size: .82rem; }
.ss-heatmap--grid th, .ss-heatmap--grid td { border-bottom: 1px solid var(--mud-palette-lines-default); border-right: 1px solid var(--mud-palette-lines-default); }
.ss-heatmap--grid thead th { min-width: 30px; padding: 2px; }
.ss-heatmap--grid .ss-heatmap__label { min-width: 180px; max-width: 220px; padding: 4px 8px; }
.ss-heatmap--grid td.ss-heatmap__cell { height: 30px; min-width: 30px; padding: 0; }

@media (max-width: 600px) {
    .ss-heatmap--tiles .ss-heatmap__label { min-width: 110px; max-width: 140px; }
    .ss-heatmap--grid .ss-heatmap__label { min-width: 120px; max-width: 140px; }
}

/* Pásma (HeatmapTones) — barvy z palety, světlý i tmavý motiv. */
.ss-heatmap-tone--info { background: color-mix(in srgb, var(--mud-palette-info) 22%, transparent) !important; }
.ss-heatmap-tone--success { background: color-mix(in srgb, var(--mud-palette-success) 26%, transparent) !important; }
.ss-heatmap-tone--warning { background: color-mix(in srgb, var(--mud-palette-warning) 28%, transparent) !important; }
.ss-heatmap-tone--error { background: color-mix(in srgb, var(--mud-palette-error) 32%, transparent) !important; }
.ss-heatmap-tone--outline { background: transparent !important; box-shadow: inset 0 0 0 2px var(--mud-palette-secondary); }
.ss-heatmap-tone--none { color: var(--mud-palette-text-disabled) !important; cursor: default !important; }

/* Legenda (HeatmapLegendSwatch / HeatmapLegendRamp) */
.ss-heatmap-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: .82rem; color: var(--mud-palette-text-secondary); }
.ss-heatmap-legend__swatch { display: inline-block; width: 18px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: middle;
    background: var(--mud-palette-background-gray); }
.ss-heatmap-legend__ramp { display: inline-block; width: 90px; height: 12px; border-radius: 3px; margin: 0 6px; vertical-align: middle; }

/* PercentBar — pruh „x %“ v buňce tabulky (100 % = celá šířka). */
.ss-percent-bar { display: flex; align-items: center; gap: 6px; min-width: 120px; }
.ss-percent-bar__track { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--mud-palette-lines-default); overflow: hidden; }
.ss-percent-bar__fill { display: block; height: 100%; border-radius: 3px; background: var(--mud-palette-text-secondary); }
.ss-percent-bar__value { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.ss-percent-bar.is-emphasized .ss-percent-bar__value { font-weight: 600; }
.ss-percent-bar--primary .ss-percent-bar__fill { background: var(--mud-palette-primary); }
.ss-percent-bar--primary .ss-percent-bar__value { color: var(--mud-palette-primary); }
.ss-percent-bar--secondary .ss-percent-bar__fill { background: var(--mud-palette-secondary); }
.ss-percent-bar--secondary .ss-percent-bar__value { color: var(--mud-palette-secondary); }
.ss-percent-bar--info .ss-percent-bar__fill { background: var(--mud-palette-info); }
.ss-percent-bar--info .ss-percent-bar__value { color: var(--mud-palette-info); }
.ss-percent-bar--success .ss-percent-bar__fill { background: var(--mud-palette-success); }
.ss-percent-bar--success .ss-percent-bar__value { color: var(--mud-palette-success); }
.ss-percent-bar--warning .ss-percent-bar__fill { background: var(--mud-palette-warning); }
.ss-percent-bar--warning .ss-percent-bar__value { color: var(--mud-palette-warning-darken); }
.ss-percent-bar--error .ss-percent-bar__fill { background: var(--mud-palette-error); }
.ss-percent-bar--error .ss-percent-bar__value { color: var(--mud-palette-error); }

/* =========================================================================
   DashboardBoard — nástěnka z dlaždic v mřížce o 12 sloupcích. Úprava je WYSIWYG: obsah zůstává vidět, nad ním lišta (úchop, velikost,
   šipky, odebrání) a na pravém okraji úchop pro změnu šířky. Tažení řídí js/dashboard-board.js (duch pod prstem, značka vložení, FLIP).
   ========================================================================= */
.ss-board {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ss-board-gap, 12px); align-items: stretch;
}
.ss-board__tile { position: relative; grid-column: span 12; min-width: 0; display: flex; flex-direction: column; border-radius: var(--ss-radius-card, 16px); }
.ss-board__tile--small { grid-column: span 4; }
.ss-board__tile--medium { grid-column: span 6; }
.ss-board__tile--large { grid-column: span 8; }
.ss-board__content { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.ss-board__content > * { flex: 1 1 auto; }

@media (max-width: 1100px) {
    .ss-board__tile--small, .ss-board__tile--medium { grid-column: span 6; }
    .ss-board__tile--large { grid-column: span 12; }
}

@media (max-width: 700px) {
    .ss-board__tile--small, .ss-board__tile--medium, .ss-board__tile--large { grid-column: span 12; }
}

/* úprava */
.ss-board.is-editing .ss-board__tile {
    outline: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 55%, transparent); outline-offset: 4px;
    transition: outline-color .2s ease, opacity .2s ease;
}
.ss-board.is-editing .ss-board__tile:hover { outline-color: var(--mud-palette-primary); }
.ss-board.is-editing .ss-board__content { pointer-events: none; user-select: none; opacity: .78; filter: saturate(.7); transition: opacity .2s ease, filter .2s ease; }
.ss-board.is-editing .ss-board__tile:hover .ss-board__content { opacity: .9; filter: none; }
.ss-board__edit { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

.ss-board__bar {
    pointer-events: auto; position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 4px;
    border-radius: var(--ss-radius-sm, 12px); border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-surface) 86%, transparent); backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: var(--ss-shadow-card, 0 8px 24px rgba(15, 23, 42, .14));
    animation: ss-board-bar-in .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes ss-board-bar-in { from { opacity: 0; transform: translateY(-6px); } }
.ss-board__grip {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--ss-radius-xs, 8px); cursor: grab; touch-action: none;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
.ss-board__grip:active { cursor: grabbing; }
.ss-board__icon { color: var(--mud-palette-primary); }
.ss-board__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }

.ss-board__sizes, .ss-board__arrows {
    display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--ss-radius-sm, 10px); background: var(--mud-palette-background-gray);
}
.ss-board__sizes button, .ss-board__arrows button, .ss-board__remove {
    display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 6px; border: 0; border-radius: var(--ss-radius-xs, 8px);
    background: transparent; color: var(--mud-palette-text-primary); cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.ss-board__sizes button:hover, .ss-board__arrows button:hover:not(:disabled) { background: var(--mud-palette-action-default-hover); }
.ss-board__sizes button.is-on {
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}
.ss-board__arrows button:disabled { opacity: .35; cursor: default; }
.ss-board__remove { min-width: 28px; color: var(--mud-palette-text-secondary); }
.ss-board__remove:hover { background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent); color: var(--mud-palette-error); }
.ss-board__sizes button:focus-visible, .ss-board__arrows button:focus-visible, .ss-board__remove:focus-visible {
    outline: 2px solid var(--mud-palette-primary); outline-offset: 1px;
}

/* šipky jen na dotyku (na desktopu se táhne) */
@media (hover: hover) and (pointer: fine) {
    .ss-board__arrows { display: none; }
}

.ss-board__resize {
    pointer-events: auto; position: absolute; top: 50%; right: -9px; width: 14px; height: 64px; transform: translateY(-50%); border-radius: var(--ss-radius-xs, 8px);
    cursor: ew-resize; touch-action: none; display: flex; align-items: center; justify-content: center;
    background: var(--mud-palette-primary); box-shadow: 0 4px 14px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    transition: height .18s ease, transform .18s ease;
}
.ss-board__resize span { width: 2px; height: 24px; border-radius: 2px; background: color-mix(in srgb, var(--mud-palette-primary-text) 80%, transparent); box-shadow: 4px 0 0 -0px transparent; }
.ss-board__resize:hover { height: 88px; }

/* šířka v CSS na tabletu a telefonu neodpovídá rozpětí — okraj se netáhne, zůstává přepínač */
@media (max-width: 1100px) {
    .ss-board__resize { display: none; }
}

.ss-board__tile.is-resizing { outline: 2px solid var(--mud-palette-primary) !important; transition: none; }
.ss-board__tile.is-resizing .ss-board__content { opacity: .55; }
.ss-board-size-badge {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
    padding: 10px 22px; border-radius: var(--ss-radius-pill, 999px); font-size: 2rem; font-weight: 700; line-height: 1;
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--mud-palette-primary) 50%, transparent);
}

.ss-board__tile.is-lifted { opacity: .3; }
.ss-board-ghost {
    position: fixed; z-index: 2000; pointer-events: none; overflow: hidden; border-radius: var(--ss-radius-card, 16px);
    transform: rotate(1.2deg) scale(1.02); opacity: .96; box-shadow: var(--ss-shadow-raised, 0 24px 60px rgba(15, 23, 42, .28));
    outline: 2px solid var(--mud-palette-primary);
}
.ss-board-ghost .ss-board__edit { display: none; }
body.ss-board-dragging, body.ss-board-dragging * { cursor: grabbing !important; user-select: none !important; }

.ss-board__tile.is-insert-before::before, .ss-board__tile.is-insert-after::before {
    content: ""; position: absolute; z-index: 4; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent), 0 0 18px var(--mud-palette-primary);
    animation: ss-board-insert 1s ease-in-out infinite alternate;
}
.ss-board__tile.is-insert-before::before { left: calc(var(--ss-board-gap, 12px) / -2 - 2px); }
.ss-board__tile.is-insert-after::before { right: calc(var(--ss-board-gap, 12px) / -2 - 2px); }
.ss-board__tile[data-board-span="12"].is-insert-before::before, .ss-board__tile[data-board-span="12"].is-insert-after::before {
    left: 0; right: 0; width: auto; height: 4px; bottom: auto;
}
.ss-board__tile[data-board-span="12"].is-insert-before::before { top: calc(var(--ss-board-gap, 12px) / -2 - 2px); }
.ss-board__tile[data-board-span="12"].is-insert-after::before { top: auto; bottom: calc(var(--ss-board-gap, 12px) / -2 - 2px); }
@keyframes ss-board-insert { from { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
    .ss-board__bar, .ss-board__tile.is-insert-before::before, .ss-board__tile.is-insert-after::before { animation: none; }
}

/* =========================================================================
   MiniCharts — RingGauge, MiniBarChart: lehké SVG/CSS grafy do dlaždic (čárový průběh do tabulek je Sparkline). Barva z --ss-tone (paleta motivu), gradient
   z tónu do světlejší/tmavší varianty, náběh animací (ne při prefers-reduced-motion).
   ========================================================================= */
.ss-ring, .ss-minibars__col { --ss-tone: var(--mud-palette-primary); --ss-tone-2: var(--mud-palette-primary-lighten); }
.ss-ring--secondary, .ss-minibars__col--secondary { --ss-tone: var(--mud-palette-secondary); --ss-tone-2: var(--mud-palette-secondary-lighten); }
.ss-ring--tertiary, .ss-minibars__col--tertiary { --ss-tone: var(--mud-palette-tertiary); --ss-tone-2: var(--mud-palette-tertiary-lighten); }
.ss-ring--info, .ss-minibars__col--info { --ss-tone: var(--mud-palette-info); --ss-tone-2: var(--mud-palette-info-lighten); }
.ss-ring--success, .ss-minibars__col--success { --ss-tone: var(--mud-palette-success); --ss-tone-2: var(--mud-palette-success-lighten); }
.ss-ring--warning, .ss-minibars__col--warning { --ss-tone: var(--mud-palette-warning); --ss-tone-2: var(--mud-palette-warning-lighten); }
.ss-ring--error, .ss-minibars__col--error { --ss-tone: var(--mud-palette-error); --ss-tone-2: var(--mud-palette-error-lighten); }
.ss-ring--dark, .ss-minibars__col--dark { --ss-tone: var(--mud-palette-text-secondary); --ss-tone-2: var(--mud-palette-text-disabled); }

/* RevealOnScroll: vyjetí zespodu při vjetí do obrazu, kaskáda přes --ss-reveal-delay (js/reveal.js); animace uvnitř počkají na odkrytí */
.ss-reveal {
    opacity: 0; transform: translateY(22px) scale(.985);
    transition: opacity .6s cubic-bezier(.2, .8, .2, 1) var(--ss-reveal-delay, 0ms), transform .7s cubic-bezier(.2, .8, .2, 1) var(--ss-reveal-delay, 0ms);
}
.ss-reveal.is-in { opacity: 1; transform: none; }
.ss-reveal:not(.is-in) * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .ss-reveal { opacity: 1; transform: none; transition: none; }
}

/* RingGauge */
.ss-ring { position: relative; width: var(--ss-ring-size, 112px); height: var(--ss-ring-size, 112px); flex: 0 0 auto; }
.ss-ring svg { width: 100%; height: 100%; overflow: visible; }
.ss-ring__disc-from { stop-color: var(--ss-tone); stop-opacity: .12; }
.ss-ring__disc-to { stop-color: var(--ss-tone); stop-opacity: 0; }
.ss-ring__tick { stroke: var(--mud-palette-text-disabled); stroke-width: 1; stroke-linecap: round; opacity: .55; }
.ss-ring__tick--major { stroke-width: 1.6; opacity: .9; }
.ss-ring__track {
    fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: var(--ss-ring-dash) 100;
    stroke: color-mix(in srgb, var(--ss-tone) 13%, var(--mud-palette-background-gray));
}
.ss-ring__value {
    fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: var(--ss-ring-dash) 100;
    animation: ss-ring-in 1.1s cubic-bezier(.2, .8, .2, 1) both;
}
.ss-ring__overflow {
    fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: var(--ss-ring-dash) 100;
    stroke: color-mix(in srgb, var(--ss-tone) 65%, var(--mud-palette-text-primary));
    animation: ss-ring-in .9s .6s cubic-bezier(.2, .8, .2, 1) both;
}
.ss-ring__knob {
    transform-origin: 60px 60px; transform: rotate(var(--ss-ring-to));
    animation: ss-ring-knob 1.1s cubic-bezier(.2, .8, .2, 1) both;
}
.ss-ring__knob circle {
    fill: var(--mud-palette-surface); stroke: var(--ss-tone); stroke-width: 3;
    filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--ss-tone) 55%, transparent));
}
.ss-ring__stop-from { stop-color: var(--ss-tone-2); }
.ss-ring__stop-to { stop-color: var(--ss-tone); }
.ss-ring__target { fill: var(--mud-palette-text-primary); opacity: .7; }
@keyframes ss-ring-in { from { stroke-dasharray: 0 100; } }
@keyframes ss-ring-knob { from { transform: rotate(var(--ss-ring-from)); } }
.ss-ring__center {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18%;
}
.ss-ring__text {
    display: inline-flex; align-items: baseline; gap: .12em; font-size: calc(var(--ss-ring-size, 112px) * .2); line-height: 1.05; font-weight: 750;
    font-variant-numeric: tabular-nums; letter-spacing: -.03em; white-space: nowrap;
}
.ss-ring__unit { font-size: .55em; font-weight: 600; letter-spacing: 0; color: var(--mud-palette-text-secondary); }
.ss-ring__caption {
    margin-top: 3px; font-size: calc(var(--ss-ring-size, 112px) * .09); line-height: 1.15; color: var(--mud-palette-text-secondary); font-weight: 500;
}
.ss-ring__goal {
    position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); white-space: nowrap;
    font-size: calc(var(--ss-ring-size, 112px) * .082); line-height: 1; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums;
}

/* MiniBarChart */
.ss-minibars { display: flex; align-items: stretch; gap: 8px; }
.ss-minibars__col {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; color: inherit; text-decoration: none;
    border-radius: var(--ss-radius-sm, 10px); padding: 4px 2px; transition: background-color .15s ease;
}
a.ss-minibars__col[href]:hover { background: color-mix(in srgb, var(--ss-tone) 8%, transparent); }
.ss-minibars__value { font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.ss-minibars__track { position: relative; width: min(34px, 78%); height: var(--ss-minibars-height, 120px); display: flex; align-items: flex-end; }
.ss-minibars__bar {
    display: block; width: 100%; border-radius: var(--ss-radius-xs, 8px) var(--ss-radius-xs, 8px) 4px 4px; transform-origin: bottom;
    background: linear-gradient(to top, var(--ss-tone), var(--ss-tone-2));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ss-tone) 30%, transparent);
    animation: ss-minibars-in .7s cubic-bezier(.2, .8, .2, 1) both;
}
.ss-minibars__col:nth-child(2) .ss-minibars__bar { animation-delay: .05s; }
.ss-minibars__col:nth-child(3) .ss-minibars__bar { animation-delay: .1s; }
.ss-minibars__col:nth-child(4) .ss-minibars__bar { animation-delay: .15s; }
.ss-minibars__col:nth-child(5) .ss-minibars__bar { animation-delay: .2s; }
.ss-minibars__col:nth-child(n+6) .ss-minibars__bar { animation-delay: .25s; }
@keyframes ss-minibars-in { from { transform: scaleY(0); } }
.ss-minibars__label {
    width: 100%; min-height: 2.4em; font-size: .7rem; line-height: 1.2; text-align: center; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .ss-ring__value, .ss-ring__overflow, .ss-ring__knob, .ss-minibars__bar { animation: none; }
}

/* BurnUpChart */
.ss-burnup { position: relative; height: var(--ss-burnup-height, 110px); padding-bottom: 18px; --ss-tone: var(--mud-palette-primary); }
.ss-burnup svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ss-burnup__grid { stroke: var(--mud-palette-lines-default); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }
.ss-burnup__stop-from { stop-color: var(--ss-tone); stop-opacity: .35; }
.ss-burnup__stop-to { stop-color: var(--ss-tone); stop-opacity: .02; }
.ss-burnup__actual { fill: none; stroke: var(--ss-tone); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ss-burnup__forecast { fill: none; stroke: var(--ss-tone); stroke-width: 2; stroke-dasharray: 5 5; opacity: .6; vector-effect: non-scaling-stroke; }
.ss-burnup__reference { stroke: var(--mud-palette-text-secondary); stroke-width: 1.5; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.ss-burnup__today {
    position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ss-tone);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ss-tone) 25%, transparent);
}
.ss-burnup__reference-label, .ss-burnup__end-label {
    position: absolute; right: 0; transform: translateY(-120%); font-size: .7rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
    padding: 1px 6px; border-radius: var(--ss-radius-xs, 6px); background: color-mix(in srgb, var(--mud-palette-surface) 85%, transparent);
}
.ss-burnup__reference-label { color: var(--mud-palette-text-secondary); }
.ss-burnup__reference-label.is-left { left: 0; right: auto; }
.ss-burnup__end-label { color: var(--ss-tone); }
.ss-burnup__axis {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: .7rem; color: var(--mud-palette-text-secondary);
}

/* ===== Navádění: pruh cesty (JourneyBar) a zvýraznění další akce (NextAction) ===== */
.ss-journey { overflow-x: auto; scrollbar-width: thin; }
.ss-journey__list { display: flex; list-style: none; margin: 0; padding: 8px 4px 4px; }
.ss-journey__step { flex: 1 1 0; min-width: 72px; position: relative; display: flex; justify-content: center; }
.ss-journey__step + .ss-journey__step::before {
    content: ""; position: absolute; top: 28px; left: calc(-50% + 26px); right: calc(50% + 26px); height: 2px; border-radius: 1px;
    background: var(--mud-palette-lines-default);
}
.ss-journey__step.is-done + .ss-journey__step::before, .ss-journey__step.is-warning + .ss-journey__step::before { background: var(--mud-palette-success); }
.ss-journey__button {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px 4px; border: 0; border-radius: var(--ss-radius-sm, 10px); background: none;
    color: inherit; font: inherit; cursor: pointer;
}
.ss-journey__button:disabled { cursor: default; }
.ss-journey__button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.ss-journey__button:hover:not(:disabled) .ss-journey__dot { transform: scale(1.07); }
.ss-journey__dot {
    position: relative; width: 40px; height: 40px; margin: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); transition: transform .15s ease;
}
.ss-journey__ring { position: absolute; inset: -5px; width: 50px; height: 50px; overflow: visible; }
.ss-journey__ring-track { fill: none; stroke: var(--mud-palette-lines-default); stroke-width: 2.5; }
.ss-journey__ring-fill { fill: none; stroke: var(--mud-palette-primary); stroke-width: 2.5; stroke-linecap: round; }
.ss-journey__badge {
    position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--ss-radius-sm, 9px); display: flex; align-items: center;
    justify-content: center; background: var(--mud-palette-error); color: var(--mud-palette-error-text); font-size: .66rem; font-weight: 700;
    font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--mud-palette-surface);
}
.ss-journey__title { font-size: .74rem; font-weight: 600; line-height: 1.2; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.ss-journey__step.is-done .ss-journey__dot { background: var(--mud-palette-success); color: var(--mud-palette-success-text); }
.ss-journey__step.is-done .ss-journey__title { color: var(--mud-palette-text-primary); }
.ss-journey__step.is-current .ss-journey__dot {
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); animation: ss-journey-pulse 2.2s ease-out infinite;
}
.ss-journey__step.is-current .ss-journey__title { color: var(--mud-palette-primary); font-weight: 700; }
.ss-journey__step.is-warning .ss-journey__dot {
    background: color-mix(in srgb, var(--mud-palette-warning) 22%, transparent); color: var(--mud-palette-warning-darken);
}
.ss-journey__step.is-blocked { opacity: .5; }
@keyframes ss-journey-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-primary) 45%, transparent); }
    70% { box-shadow: 0 0 0 11px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@media (max-width: 700px) {
    .ss-journey__step { min-width: 46px; }
    .ss-journey__step:not(.is-current) .ss-journey__title { display: none; }
}

/* Prázdný seznam s důvodem (DataGridEmptyState): filtr skrývá záznamy / zatím nic není + akce. */
.ss-grid-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 12px; text-align: center; color: var(--mud-palette-text-secondary); }
.ss-grid-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--ss-radius-card, 14px);
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.ss-grid-empty b { color: var(--mud-palette-text-primary); font-weight: 600; }

/* Paleta příkazů / globální hledání (CommandPalette, Ctrl+K). */
.ss-cmdk-backdrop { position: fixed; inset: 0; z-index: 1450; background: color-mix(in srgb, #000 35%, transparent); backdrop-filter: blur(2px); }
.ss-cmdk { position: fixed; z-index: 1451; top: 10vh; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 24px)); max-height: 72vh;
    display: flex; flex-direction: column; overflow: hidden; border-radius: var(--ss-radius-card, 14px); background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); box-shadow: var(--ss-shadow-raised, 0 24px 60px rgba(0, 0, 0, .28)); }
.ss-cmdk__search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary); }
.ss-cmdk__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--mud-palette-text-primary); font: inherit; font-size: 1.05rem; }
.ss-cmdk__kbd { font: 600 .7rem/1 inherit; padding: 3px 6px; border-radius: var(--ss-radius-xs, 5px); border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }
.ss-cmdk__list { overflow-y: auto; padding: 6px; }
.ss-cmdk__group { padding: 8px 10px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.ss-cmdk__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--ss-radius-sm, 9px); color: inherit; text-decoration: none; }
.ss-cmdk__item.is-active { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.ss-cmdk__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--ss-radius-xs, 8px);
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.ss-cmdk__text { min-width: 0; display: flex; flex-direction: column; font-size: .9rem; line-height: 1.3; }
.ss-cmdk__text b, .ss-cmdk__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-cmdk__text small { font-size: .76rem; color: var(--mud-palette-text-secondary); }
.ss-cmdk__empty { padding: 18px 12px; text-align: center; color: var(--mud-palette-text-secondary); font-size: .9rem; }
.ss-cmdk__footer { padding: 7px 14px; border-top: 1px solid var(--mud-palette-lines-default); font-size: .72rem; color: var(--mud-palette-text-secondary); }
@media (max-width: 600px) { .ss-cmdk { top: 8px; max-height: calc(100vh - 16px); } .ss-cmdk__footer { display: none; } }

/* Nadpis sekce formuláře (FormSection): bez mezery pod, pole hned navazují. */
.ss-form-section { padding-bottom: 0 !important; }
.ss-form-section:not(:first-child) { margin-top: 4px; }

/* Záložky mezi příbuznými stránkami (PageTabs): podtržená aktivní záložka, na úzkém displeji vodorovný posun. */
.ss-page-tabs { display: flex; gap: 2px; margin: -4px 0 12px; border-bottom: 1px solid var(--mud-palette-lines-default); overflow-x: auto; scrollbar-width: none; }
.ss-page-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; color: var(--mud-palette-text-secondary); text-decoration: none;
    font-size: .875rem; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: var(--ss-radius-xs, 6px) var(--ss-radius-xs, 6px) 0 0; }
.ss-page-tab:hover { color: var(--mud-palette-text-primary); background: var(--mud-palette-action-default-hover); }
.ss-page-tab.is-active { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-primary); }
/* Souhrn filtru ze zásuvky appbaru (FilterSummary): čipy pod záložkami, klik otevře filtr. */
.ss-filter-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 12px; }

/* Textová hodnota dlaždice (FactTile Text): jméno, číslo dílu — menší písmo než u čísel. */
.ss-fact--text .ss-fact__value { font-size: 1.05rem; line-height: 1.3; letter-spacing: 0; }

/* Detail: sbalitelný panel „Všechny údaje“ (DetailMore) s mřížkou popisek / hodnota (DetailFields, DetailField). */
.ss-detail-more .mud-expand-panel { border: 1px solid var(--mud-palette-lines-default); border-radius: var(--ss-radius-sm, 10px) !important; }
.ss-detail-more .mud-expand-panel-header { padding: 6px 14px; min-height: 0; }
.ss-detail-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; }
.ss-detail-field__label { font-size: .72rem; color: var(--mud-palette-text-secondary); }
.ss-detail-field__value { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }

/* Řádek „na řadě“ pod pruhem cesty (JourneyNow). */
.ss-journey-now { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; padding: 8px 12px; border-radius: var(--ss-radius-sm, 10px);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); font-size: .88rem; }
.ss-journey-now.is-done { background: color-mix(in srgb, var(--mud-palette-success) 7%, transparent); }

/* Obrys je na zvýrazněném prvku samém (outline kopíruje jeho zaoblení — pilulka, kulaté i hranaté tlačítko), dřív pevný obdélník kolem obalu. */
.ss-next { display: inline-flex; }
.ss-next--block { display: flex; }
.ss-next.is-active > :first-child:not(.mud-tooltip-root),
.ss-next.is-active > .mud-tooltip-root > :first-child {
    outline: 2px solid var(--mud-palette-primary); outline-offset: 3px;
    animation: ss-next-pulse 1.8s ease-in-out infinite;
}
@keyframes ss-next-pulse {
    0%, 100% { outline-color: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent); }
    50% { outline-color: var(--mud-palette-primary); }
}
@media (prefers-reduced-motion: reduce) {
    .ss-next.is-active > :first-child, .ss-next.is-active > .mud-tooltip-root > :first-child, .ss-journey__step.is-current .ss-journey__dot { animation: none; }
}
.ss-journey__step.is-warning .ss-journey__badge { background: var(--mud-palette-warning); color: var(--mud-palette-warning-text); }

/* ===== Dlaždice s fakty (FactStrip / FactTile) — vzhled dlaždic nástěnky ===== */
.ss-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
@media (max-width: 600px) { .ss-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.ss-fact {
    --ss-fact-tone: var(--mud-palette-text-secondary);
    position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: var(--ss-radius-card, 14px);
    border: 1px solid color-mix(in srgb, var(--ss-fact-tone) 22%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--ss-fact-tone) 7%, var(--mud-palette-surface)); color: inherit; text-decoration: none;
}
.ss-fact.is-link { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.ss-fact.is-link:hover { transform: translateY(-1px); box-shadow: var(--ss-shadow-raised, 0 4px 14px rgba(0, 0, 0, .08)); }
.ss-fact__icon {
    display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: var(--ss-radius-sm, 9px); margin-bottom: 4px;
    background: color-mix(in srgb, var(--ss-fact-tone) 16%, transparent); color: var(--ss-fact-tone);
}
.ss-fact__label { font-size: .74rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.ss-fact__value { font-size: 1.45rem; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ss-fact__value small { margin-left: 4px; font-size: .78rem; font-weight: 600; color: var(--mud-palette-text-secondary); letter-spacing: 0; }
.ss-fact__sub { font-size: .76rem; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.ss-fact--primary { --ss-fact-tone: var(--mud-palette-primary); }
.ss-fact--secondary { --ss-fact-tone: var(--mud-palette-secondary); }
.ss-fact--tertiary { --ss-fact-tone: var(--mud-palette-tertiary); }
.ss-fact--info { --ss-fact-tone: var(--mud-palette-info); }
.ss-fact--success { --ss-fact-tone: var(--mud-palette-success); }
.ss-fact--warning { --ss-fact-tone: var(--mud-palette-warning); }
.ss-fact--error { --ss-fact-tone: var(--mud-palette-error); }
.ss-fact--error .ss-fact__value { color: var(--mud-palette-error); }

/* ===== Kompaktní pruh cesty do buňky (JourneyDots) ===== */
.ss-dots { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; }
.ss-dots__dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--mud-palette-lines-default); flex: 0 0 auto; }
.ss-dots__dot + .ss-dots__dot { margin-left: 10px; }
.ss-dots__dot + .ss-dots__dot::before { content: ""; position: absolute; right: 12px; top: 5px; width: 10px; height: 2px; background: var(--mud-palette-lines-default); }
.ss-dots__dot.is-done { background: var(--mud-palette-success); }
.ss-dots__dot.is-done + .ss-dots__dot::before, .ss-dots__dot.is-warning + .ss-dots__dot::before { background: var(--mud-palette-success); }
.ss-dots__dot.is-warning { background: var(--mud-palette-warning); }
.ss-dots__dot.is-blocked { background: var(--mud-palette-text-disabled); opacity: .55; }
.ss-dots__dot.is-current { background: var(--mud-palette-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent); animation: ss-dots-pulse 2.2s ease-out infinite; }
@keyframes ss-dots-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-primary) 45%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ss-dots__action { margin-left: 10px; padding: 1px 8px; border-radius: var(--ss-radius-pill, 999px); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary); font-size: .72rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ss-dots__dot.is-current { animation: none; } }

/* ── FlowStrip: pruh procesu s počty (obchod, sklad, servis…) ─────────────────────────────────────────── */
.ss-flow {
    display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: thin; margin-bottom: 12px; padding: 4px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: var(--ss-radius-sm, 12px); background: var(--mud-palette-surface);
}
.ss-flow__arrow { flex: 0 0 auto; color: var(--mud-palette-text-disabled); }
.ss-flow__step {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--ss-radius-sm, 9px);
    color: var(--mud-palette-text-primary); text-decoration: none; white-space: nowrap; font-size: 0.875rem;
}
.ss-flow__step:hover { background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.ss-flow__step.is-current {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
    font-weight: 600;
}
.ss-flow__count {
    display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 8px; border-radius: var(--ss-radius-pill, 999px);
    background: var(--mud-palette-action-default-hover); font-weight: 400;
}
.ss-flow__count b { font-weight: 700; }
.ss-flow__count small { color: var(--mud-palette-text-secondary); font-size: 0.75rem; }
.ss-flow__count.is-critical b { color: var(--mud-palette-error); }
.ss-flow__count.is-warning b { color: var(--mud-palette-warning-darken); }
.ss-flow__count.is-info b { color: var(--mud-palette-info); }
.ss-flow__count.is-ok b { color: var(--mud-palette-success); }
.ss-flow__count.is-zero b, .ss-flow__count.is-neutral b { color: var(--mud-palette-text-secondary); }
@media (max-width: 1560px) { .ss-flow__count small { display: none; } }

/* ── KanbanBoard: nástěnka po stavech ─────────────────────────────────────────────────────────────── */
.ss-kanban { display: grid; grid-template-columns: repeat(var(--ss-kanban-columns), minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.ss-kanban__column {
    display: flex; flex-direction: column; min-height: 180px; border-radius: var(--ss-radius-sm, 12px); padding: 8px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent); border-top: 3px solid var(--ss-kanban-accent, var(--mud-palette-lines-default));
    transition: background-color .15s, box-shadow .15s;
}
.ss-kanban__column.is-drop-ok { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent); }
.ss-kanban__column.is-drop-hover { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.ss-kanban__head { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px 8px; }
.ss-kanban__title { font-weight: 600; }
.ss-kanban__count { color: var(--mud-palette-text-secondary); }
.ss-kanban__summary { margin-left: auto; color: var(--mud-palette-text-secondary); font-size: 0.8125rem; }
.ss-kanban__cards { display: flex; flex-direction: column; gap: 8px; }
.ss-kanban__card {
    display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--ss-radius-sm, 10px);
    background: var(--mud-palette-surface); color: inherit; font: inherit; cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.ss-kanban__card[data-dnd] { touch-action: none; cursor: grab; }
.ss-kanban__card:hover { transform: translateY(-1px); box-shadow: var(--ss-shadow-raised, 0 2px 8px rgba(0, 0, 0, .08)); }
.ss-kanban__card.is-dragging { opacity: .4; }
.ss-dnd-ghost.ss-kanban__card { box-shadow: var(--ss-shadow-raised, 0 8px 24px rgba(0, 0, 0, .18)); transform: rotate(1.5deg); }
.ss-kanban__empty { padding: 16px 4px; color: var(--mud-palette-text-disabled); text-align: center; font-size: 0.875rem; }
.ss-kanban__more {
    padding: 8px; border: 1px dashed var(--mud-palette-lines-default); border-radius: var(--ss-radius-sm, 10px); background: none; color: var(--mud-palette-text-secondary);
    font: inherit; font-size: 0.8125rem; cursor: pointer;
}
@media (max-width: 960px) { .ss-kanban { grid-template-columns: 1fr; overflow-x: visible; } }

/* ── QrScanner: náhled kamery s rámečkem a ruční zadání ───────────────────────────────────────────── */
.ss-qr { display: flex; flex-direction: column; gap: 8px; }
.ss-qr__view { position: relative; overflow: hidden; border-radius: var(--ss-radius-card, 16px); background: #111; aspect-ratio: 4 / 3; max-height: 60vh; }
.ss-qr__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-qr__frame {
    position: absolute; inset: 18% 22%; border: 3px solid rgba(255, 255, 255, .85); border-radius: var(--ss-radius-card, 18px);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35);
}
.ss-qr__frame::after {
    content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: var(--mud-palette-error);
    animation: ss-qr-scan 1.8s ease-in-out infinite alternate;
}
@keyframes ss-qr-scan { from { transform: translateY(-120%) scaleX(.9); opacity: .6; } to { transform: translateY(120%) scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ss-qr__frame::after { animation: none; } }
.ss-qr__torch { position: absolute !important; right: 8px; bottom: 8px; color: #fff !important; background: rgba(0, 0, 0, .4) !important; }
.ss-qr__manual { display: flex; align-items: center; gap: 8px; }

/* ── RowDetailDialog: detail řádku tabulky v dialogu ──────────────────────────────────────────────── */
.ss-row-detail__head { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 32px; }
.ss-row-detail__icon {
    flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ss-radius-sm, 12px);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary);
}
.ss-row-detail__titles { min-width: 0; }
.ss-row-detail__title { line-height: 1.25; overflow-wrap: anywhere; }
.ss-row-detail__subtitle { color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.ss-row-detail__content { min-height: 120px; }
@media (max-width: 600px) {
    .mud-dialog.ss-row-detail { margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}

/* ── Kompaktní řádky gridů (opt-in třídou ss-grid-compact na obalu stránek): buňka na jeden řádek — čísla dílů a zakázek se nelámou
   na pomlčkách, dlouhé názvy a poznámky končí „…“ (celé znění dá při najetí title, secondside-blazor-mudblazor.js). Bloky pod sebou
   (číslo + název, čipy) zůstávají, zkrátí se jen každý řádek. Jen od šířky tabletu — karty na telefonu se nezkracují.
   Strop šířky buňky jde změnit proměnnou --ss-grid-cell-max. ── */
@media (min-width: 600px) {
    .ss-grid-compact .mud-table-body .mud-table-cell {
        white-space: nowrap; max-width: var(--ss-grid-cell-max, 22rem); overflow: hidden; text-overflow: ellipsis;
    }

    .ss-grid-compact .mud-table-body .mud-table-cell :is(p, div).mud-typography,
    .ss-grid-compact .mud-table-body .mud-table-cell .mud-link { overflow: hidden; text-overflow: ellipsis; }
}

/* ── Střídající se řádek textu (TextCarousel): barvy z currentColor, sedí na barevném pruhu i na kartě. ── */
.ss-text-carousel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ss-text-carousel__viewport { overflow: hidden; min-height: 1.6em; }
.ss-text-carousel__item {
    display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; text-decoration: none;
    animation: ss-text-carousel-in .45s ease-out both;
}
a.ss-text-carousel__item:hover .ss-text-carousel__text { text-decoration: underline; text-underline-offset: 3px; }
.ss-text-carousel__label {
    display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 1px 8px; border-radius: var(--ss-radius-pill, 999px);
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    background: color-mix(in srgb, currentColor 16%, transparent);
}
.ss-text-carousel__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ss-text-carousel__go { flex: 0 0 auto; opacity: .75; transition: transform .2s ease; }
a.ss-text-carousel__item:hover .ss-text-carousel__go { transform: translateX(3px); opacity: 1; }
.ss-text-carousel__dots { display: flex; gap: 6px; }
.ss-text-carousel__dot {
    width: 6px; height: 6px; padding: 0; border: 0; border-radius: var(--ss-radius-pill, 999px); cursor: pointer;
    background: color-mix(in srgb, currentColor 35%, transparent); transition: width .25s ease, background-color .25s ease;
}
.ss-text-carousel__dot.is-active { width: 18px; background: currentColor; }
.ss-text-carousel__dot:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Víc řádků: štítek a šipka nahoře, text pod nimi oříznutý na --ss-text-carousel-lines; výška pevná, aby okolí neposkakovalo. */
.ss-text-carousel.is-multiline .ss-text-carousel__viewport { min-height: calc(1.6rem + var(--ss-text-carousel-lines) * 1.45em + 6px); }
.ss-text-carousel.is-multiline .ss-text-carousel__item { flex-wrap: wrap; align-items: center; row-gap: 6px; }
.ss-text-carousel.is-multiline .ss-text-carousel__go { order: 1; margin-left: auto; }
.ss-text-carousel.is-multiline .ss-text-carousel__text {
    order: 2; flex: 1 0 100%; white-space: normal; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--ss-text-carousel-lines); line-clamp: var(--ss-text-carousel-lines);
}
@keyframes ss-text-carousel-in { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .ss-text-carousel__item { animation: none; }
    .ss-text-carousel__dot, .ss-text-carousel__go { transition: none; }
}

/* Odkaz na jiný záznam v buňce tabulky (RelatedLink): barvou textu s jemným tečkovaným podtržením, barva odkazu až při najetí.
   Modré a tučné zůstává jen vlastní číslo řádku; detail řádku otevírá šipka RowOpenButton ve sloupci Akce. */
.ss-related-link {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
}

.ss-related-link:hover,
.ss-related-link:focus-visible {
    color: var(--mud-palette-primary);
    text-decoration-color: currentColor;
}

/* ---- SsChart (grafy 2ndSide.Charts, js/ss-chart.js) ----
   Barvy jen přes proměnné: tmavý režim přepne MudBlazor a graf se nepřekresluje. Paletu sérií (--ss-chart-c0…) nastaví skript. */
.ss-chart {
    position: relative;
    --ss-chart-grid: color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent);
    --ss-chart-axis: color-mix(in srgb, var(--mud-palette-text-primary) 24%, transparent);
    --ss-chart-ink: var(--mud-palette-text-primary);
    --ss-chart-ink2: var(--mud-palette-text-secondary);
    --ss-chart-surf: var(--mud-palette-surface);
    --ss-chart-on: #ffffff;
    /* Zlepšení / zhoršení / pozor: sladěné s paletou grafů (syté barvy MudBlazor by v grafu křičely). */
    --ss-chart-pos: #1f9d6b;
    --ss-chart-neg: #d64545;
    --ss-chart-warn: #e2a90a;
    border-radius: 12px;
    outline: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.ss-chart.ss-dark {
    --ss-chart-pos: #3fd2a8;
    --ss-chart-neg: #ff7a7a;
    --ss-chart-warn: #f6c945;
}

.ss-chart:focus-visible {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

.ss-chart__host {
    position: relative;
    width: 100%;
    height: 100%;
}

.ss-chart__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.ss-chart__svg [data-r] {
    transition: fill .35s ease, stroke .35s ease, opacity .25s ease, filter .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}

.ss-chart__svg .is-interactive {
    cursor: pointer;
}

.ss-chart__svg .is-muted {
    opacity: .45;
}

.ss-chart__svg text.is-muted {
    text-decoration: line-through;
}

.ss-chart__svg .ss-dim {
    opacity: .14;
}

/* Hover: zvýrazněný sloupec se rozsvítí, bod se zvětší, ostatní výseče/body ustoupí. */
.ss-chart__svg [data-r="6"].is-active {
    filter: brightness(1.12) saturate(1.08);
}

.ss-chart__svg [data-r="9"] {
    transform-box: fill-box;
    transform-origin: center;
}

.ss-chart__svg [data-r="9"].is-active {
    transform: scale(1.7);
}

.ss-chart__svg .has-focus [data-r="10"]:not(.is-active),
.ss-chart__svg .has-focus [data-r="9"]:not(.is-active) {
    opacity: .4;
}

.ss-chart__band {
    fill: var(--mud-palette-text-primary);
    opacity: .055;
    pointer-events: none;
}

.ss-chart__cross {
    stroke: var(--ss-chart-axis);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    pointer-events: none;
}

.ss-chart__tip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    min-width: 150px;
    max-width: 340px;
    padding: 9px 11px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    background: color-mix(in srgb, var(--mud-palette-surface) 86%, transparent);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .08);
    color: var(--mud-palette-text-primary);
    font-size: 12px;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    transition: opacity .14s ease, transform .16s cubic-bezier(.2, .8, .2, 1);
    font-variant-numeric: tabular-nums;
}

.ss-chart__tip.is-visible {
    opacity: 1;
}

.ss-chart__tip-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.ss-chart__tip-detail {
    margin: -2px 0 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
}

.ss-chart__tip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 0;
}

.ss-chart__tip-swatch {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--ss-c, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-c, transparent) 22%, transparent);
}

.ss-chart__tip-swatch.is-line {
    height: 3px;
    border-radius: 2px;
}

/* Minulé období: čárkovaná značka v barvě řady, řádek tlumeně. */
.ss-chart__tip-swatch.is-dashed {
    background: repeating-linear-gradient(90deg, var(--ss-c) 0 3px, transparent 3px 5px);
    box-shadow: none;
}

.ss-chart__tip-row.is-shadow {
    opacity: .72;
}

.ss-chart__tip-share {
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    white-space: nowrap;
}

.ss-chart__tip-delta {
    min-width: 52px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.ss-chart__tip-caption {
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 10.5px;
    text-align: right;
}

.ss-chart__tip-swatch.is-empty {
    background: transparent;
}

.ss-chart__tip-name {
    flex: 1 1 auto;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-chart__tip-value {
    font-weight: 600;
    white-space: nowrap;
}

.ss-chart__tip-total {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    text-align: right;
    font-weight: 700;
}

.ss-chart__toolbar {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0;
    opacity: 0;
    transition: opacity .2s ease;
}

.ss-chart:hover .ss-chart__toolbar,
.ss-chart:focus-within .ss-chart__toolbar {
    opacity: 1;
}

@media (hover: none) {
    .ss-chart__toolbar {
        opacity: .8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ss-chart__svg [data-r],
    .ss-chart__tip {
        transition: none;
    }

    .ss-live__ring,
    .ss-chart__loader span {
        animation: none !important;
    }
}

/* Trend: zelená = zlepšení, červená = zhoršení (u „nižší je lepší“ obráceně), šedá = beze změny. */
.ss-chart .is-good {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 13%, transparent);
}

.ss-chart .is-bad {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.ss-chart .is-flat {
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
}

/* Hlavní čáry jemně září ve své barvě; v tmavém režimu víc. */
.ss-chart__svg .ss-glow {
    filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--ss-c) 32%, transparent));
}

.ss-chart.ss-dark .ss-chart__svg .ss-glow {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ss-c) 55%, transparent));
}

/* Najetí na kategorii: ostatní sloupce ustoupí. */
.ss-chart__svg .has-band [data-r="6"]:not(.is-active) {
    opacity: .5;
}

/* Bod „teď“: plný bod a kroužek, který se pomalu rozbíhá. */
.ss-live {
    pointer-events: none;
}

.ss-live__dot {
    stroke: var(--ss-chart-surf);
    stroke-width: 2;
}

.ss-live__ring {
    fill: none;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: ss-live-pulse 2.4s cubic-bezier(.2, .6, .35, 1) infinite;
}

@keyframes ss-live-pulse {
    0% { transform: scale(1); opacity: .65; }
    70%, 100% { transform: scale(3.4); opacity: 0; }
}

/* Hlavička: velké číslo a štítek trendu. */
.ss-chart__head {
    height: 60px;
    padding: 2px 4px 0;
    box-sizing: border-box;
}

.ss-chart__head-label {
    min-height: 16px;
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    line-height: 16px;
}

.ss-chart__head-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.ss-chart__head-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.ss-chart__head-delta {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ss-chart__head-delta.is-empty {
    display: none;
}

/* Vysvětlivka se na úzkém displeji zkrátí — hlavička má pevnou výšku a nesmí přetéct do grafu. */
.ss-chart__head-caption {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
}

/* Posuvné okno přiblížení pod grafem. */
.ss-chart__brush {
    height: 44px;
    padding-top: 8px;
    box-sizing: border-box;
}

.ss-chart__brush-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    touch-action: none;
    cursor: pointer;
}

.ss-chart__brush-shade {
    fill: var(--ss-chart-surf);
    opacity: .7;
}

.ss-chart__brush-window {
    fill: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    stroke: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    stroke-width: 1.2;
    cursor: grab;
}

.ss-chart__brush-window:active {
    cursor: grabbing;
}

.ss-chart__brush-handle {
    fill: var(--mud-palette-primary);
    cursor: ew-resize;
}

/* Výběr úseku tažením přes graf. */
.ss-chart__select {
    fill: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    stroke: color-mix(in srgb, var(--mud-palette-primary) 60%, transparent);
    stroke-dasharray: 4 3;
    pointer-events: none;
}

/* Načítání: animace aplikace (nebo vestavěné sloupce) uprostřed; při obnově přes ztlumený graf. */
.ss-chart__loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: ss-fade-in .25s ease both;
}

.ss-chart.is-loading .ss-chart__host {
    opacity: 0;
    transition: opacity .25s ease;
}

.ss-chart.is-loading.is-ready .ss-chart__host {
    opacity: .3;
}

.ss-chart:not(.is-loading) .ss-chart__host {
    transition: opacity .35s ease;
}

.ss-chart__loader {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 48px;
}

.ss-chart__loader span {
    width: 9px;
    height: 100%;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(var(--mud-palette-primary), color-mix(in srgb, var(--mud-palette-primary) 45%, transparent));
    transform-origin: bottom;
    animation: ss-loader-grow 1.1s cubic-bezier(.5, 0, .3, 1) infinite;
}

.ss-chart__loader span:nth-child(2) { animation-delay: .1s; }
.ss-chart__loader span:nth-child(3) { animation-delay: .2s; }
.ss-chart__loader span:nth-child(4) { animation-delay: .3s; }
.ss-chart__loader span:nth-child(5) { animation-delay: .4s; }

@keyframes ss-loader-grow {
    0%, 100% { transform: scaleY(.25); opacity: .55; }
    50% { transform: scaleY(1); opacity: 1; }
}

@keyframes ss-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Proklik: tlačítko zpět vlevo nahoře, nad grafem má vlastní řádek. */
.ss-chart__back {
    position: absolute;
    top: 0;
    left: -6px;
    z-index: 4;
}

.ss-chart.has-back .ss-chart__host {
    padding-top: 34px;
    box-sizing: border-box;
}

/* Celá obrazovka: plocha s okrajem, graf přes celou výšku. */
.ss-chart:fullscreen {
    box-sizing: border-box;
    padding: 24px;
    border-radius: 0;
    background: var(--mud-palette-surface);
    overflow: auto;
}

.ss-chart:fullscreen .ss-chart__toolbar,
.ss-chart:fullscreen .ss-chart__back {
    top: 12px;
    opacity: 1;
}

.ss-chart:fullscreen .ss-chart__toolbar {
    right: 12px;
}

.ss-chart:fullscreen .ss-chart__back {
    left: 12px;
}


/* ---- SsChart kolo 3: prázdný stav, tabulka, ukotvený tooltip, hodnota při najetí ---- */
.ss-chart__empty,
.ss-chart__table {
    position: absolute;
    inset: 0;
    z-index: 2;
    animation: ss-fade-in .3s ease both;
}

.ss-chart.is-empty .ss-chart__host,
.ss-chart.is-table .ss-chart__host {
    visibility: hidden;
}

.ss-chart__empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ss-chart__table {
    top: 30px;
    overflow: auto;
    border-radius: 10px;
}

.ss-chart__table .ss-chart__table-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ss-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 12px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.ss-chart-empty.is-compact {
    padding: 12px;
}

.ss-chart-empty__ghost {
    width: 132px;
    height: auto;
    margin-bottom: 4px;
}

.ss-chart-empty.is-compact .ss-chart-empty__ghost {
    width: 96px;
}

.ss-chart-empty__ghost rect {
    fill: color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent);
}

.ss-chart-empty__ghost line {
    stroke: color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
    stroke-width: 1;
}

.ss-chart-empty__text {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    font-size: 14px;
}

.ss-chart-empty__hint {
    font-size: 12.5px;
}

/* Na dotyk: tooltip jako lišta přes horní okraj grafu — prst ho nezakrývá. */
.ss-chart__tip.is-docked {
    left: 6px;
    right: 6px;
    top: 4px;
    max-width: none;
    transform: none;
}

.ss-chart__tip.is-docked .ss-chart__tip-row {
    display: inline-flex;
    margin-right: 14px;
}

/* Ručička budíku se otáčí kolem středu (transform nastavuje skript). */
.ss-chart__svg [data-r="21"] {
    transition: none;
}

@media (max-width: 480px) {
    .ss-chart__tip:not(.is-docked) {
        max-width: 240px;
    }
}

/* ── Nastavení přístupu ke stránce a „Zobrazit jako“ (PageAccessDialog, RoleSimulationBanner) ── */
.ss-page-access { display: flex; flex-direction: column; gap: 4px; }
.ss-page-access__path { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ss-page-access__path code { font-size: .8rem; padding: 1px 6px; border-radius: 4px; background: var(--mud-palette-background-gray); }
.ss-page-access__muted { font-size: .75rem; color: var(--mud-palette-text-secondary); font-weight: 400; }
.ss-page-access__rule { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ss-page-access__roles { display: flex; flex-direction: column; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); }
.ss-page-access__role { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 6px; border-top: 1px solid var(--mud-palette-lines-default); }
.ss-page-access__role:first-child { border-top: 0; }
.ss-page-access__rolehead { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 2px; border: 0;
    background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ss-page-access__rolename { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ss-page-access__count { flex: 0 0 auto; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.ss-page-access__users { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 8px 34px; background: var(--mud-palette-background-gray); }
.ss-page-access__user { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .85rem; }

.ss-role-simulation { position: sticky; top: var(--mud-appbar-height, 64px); z-index: 1100; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 6px 16px; color: var(--mud-palette-warning-text); background: var(--mud-palette-warning); font-size: .85rem; }
.ss-role-simulation__text { flex: 1 1 auto; min-width: 0; }
.ss-role-simulation__note { opacity: .85; }
.ss-role-simulation__actions { display: inline-flex; gap: 6px; }