/* SportBoard dizajn systém (design/DESIGN.md "Apex Athletics") - zdieľané prvky pre všetky
   stránky aplikácie. Triedy sú prefixované sb-. Farebné tokeny sú na :root, takže sa dajú
   používať aj v izolovaných CSS komponentov cez var(--sb-...). */

:root {
    --sb-surface: #f8f9ff;
    --sb-surface-dim: #cbdbf5;
    --sb-surface-container-lowest: #ffffff;
    --sb-surface-container-low: #eff4ff;
    --sb-surface-container: #e5eeff;
    --sb-surface-container-high: #dce9ff;
    --sb-surface-container-highest: #d3e4fe;
    --sb-on-surface: #0b1c30;
    --sb-on-surface-variant: #45474c;
    --sb-outline: #75777d;
    --sb-outline-variant: #c5c6cd;
    --sb-primary: #091426;
    --sb-primary-container: #1e293b;
    --sb-on-primary: #ffffff;
    --sb-on-primary-container: #8590a6;
    --sb-inverse-surface: #213145;
    --sb-secondary: #9d4300;
    --sb-secondary-container: #fd761a;
    --sb-on-secondary: #ffffff;
    --sb-tertiary-accent: #0099d9;
    --sb-error: #ba1a1a;
    --sb-font: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Stránka a dekorácie ---------- */

/* Obal obsahu stránky: max šírka podľa DESIGN.md (Box-to-Edge 1440px) + kotva pre dekorácie. */
.sb-page {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    font-family: var(--sb-font);
    color: var(--sb-on-surface);
}

/* Dekoratívne rozostrené kruhy v rohoch (oranžový hore vpravo, navy dole vľavo). */
.sb-bg-accents::before,
.sb-bg-accents::after {
    content: '';
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
}

.sb-bg-accents::before {
    top: -160px;
    right: -160px;
    width: 480px;
    height: 480px;
    background: rgba(253, 118, 26, 0.05);
    filter: blur(90px);
}

.sb-bg-accents::after {
    bottom: -120px;
    left: -120px;
    width: 380px;
    height: 380px;
    background: rgba(9, 20, 38, 0.05);
    filter: blur(80px);
}

.sb-page > * {
    position: relative;
    z-index: 1;
}

/* ---------- Typografia ---------- */

/* FocusOnNavigate (Routes.razor) presúva po navigácii fokus na h1 kvôli čítačkám
   obrazovky - programový fokus nemá kresliť vizuálny rámček okolo nadpisu. */
h1:focus,
h1:focus-visible {
    outline: none;
}

.sb-display {
    margin: 0;
    font-family: var(--sb-font);
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-on-surface);
}

@media (max-width: 700px) {
    .sb-display {
        font-size: 24px;
        line-height: 32px;
    }
}

.sb-subtitle {
    margin: 0;
    font-family: var(--sb-font);
    font-size: 18px;
    line-height: 28px;
    color: var(--sb-on-surface-variant);
    max-width: 42rem;
}

/* ---------- Hlavička sekcie (oranžová zvislá čiarka + titulok + poznámka vpravo) ---------- */

.sb-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.sb-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--sb-font);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-section-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--sb-secondary-container);
    border-radius: 9999px;
}

.sb-section-note {
    font-family: var(--sb-font);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

/* ---------- Karty ---------- */

.sb-card {
    background: var(--sb-surface-container);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    transition: box-shadow 0.2s ease;
}

a.sb-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.sb-card:hover {
    box-shadow: 0 4px 12px rgba(9, 20, 38, 0.10);
}

.sb-card:hover .sb-card-title {
    color: var(--sb-secondary-container);
}

.sb-card:hover .sb-icon-btn {
    background: var(--sb-secondary-container);
    color: var(--sb-on-secondary);
}

.sb-card-title {
    margin: 0;
    font-family: var(--sb-font);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
    transition: color 0.2s ease;
}

.sb-card-dense .sb-card-title {
    font-size: 16px;
    line-height: 22px;
}

.sb-card-dense {
    border-radius: 12px;
    padding: 8px;
}

/* Avatar tímu / entity - štvorec so zaoblením, iniciály alebo obrázok. */
.sb-avatar {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--sb-surface);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-family: var(--sb-font);
    font-weight: 700;
    font-size: 20px;
    color: var(--sb-primary-container);
}

.sb-avatar-sm {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    font-size: 16px;
}

/* Malý informačný chip (rola, šport a pod.). */
.sb-chip {
    display: inline-block;
    width: max-content;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--sb-surface-container-high);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

/* Okrúhle tlačidlo so šípkou / ikonou. */
.sb-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: none;
    background: var(--sb-surface-container-highest);
    color: var(--sb-on-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

/* ---------- CTA banner (navy gradient s oranžovým tlačidlom) ---------- */

.sb-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, var(--sb-primary), var(--sb-inverse-surface));
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 25px -5px rgba(9, 20, 38, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.sb-cta::before {
    content: '';
    position: absolute;
    right: -96px;
    top: -64px;
    width: 256px;
    height: 256px;
    background: rgba(253, 118, 26, 0.2);
    border-radius: 9999px;
    filter: blur(80px);
    pointer-events: none;
}

.sb-cta-text {
    position: relative;
    max-width: 28rem;
}

.sb-cta-text h2 {
    margin: 0 0 8px;
    font-family: var(--sb-font);
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-on-primary);
}

.sb-cta-text p {
    margin: 0;
    font-family: var(--sb-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-primary-container);
}

.sb-btn-accent {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    border: none;
    border-radius: 8px;
    background: var(--sb-secondary-container);
    color: var(--sb-on-secondary);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(9, 20, 38, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.sb-btn-accent:hover {
    background: #e86a15;
    box-shadow: 0 10px 20px -5px rgba(9, 20, 38, 0.35);
    transform: translateY(-2px);
}

/* ---------- Bočný panel ---------- */

.sb-panel {
    background: var(--sb-surface-container);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(197, 198, 205, 0.3);
    font-family: var(--sb-font);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-panel-head .mud-icon-root {
    color: var(--sb-secondary-container);
}

/* ---------- Prázdny stav ---------- */

.sb-empty {
    background: var(--sb-surface-container);
    border: 1px dashed var(--sb-outline-variant);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    font-family: var(--sb-font);
}

.sb-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background: var(--sb-surface-container-highest);
    color: var(--sb-on-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.sb-empty h3 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-empty p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface-variant);
    max-width: 28rem;
}

/* ---------- Mriežky ---------- */

.sb-grid-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1000px) {
    .sb-grid-main {
        grid-template-columns: 1fr;
    }
}

.sb-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 800px) {
    .sb-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ---------- App shell (MudBlazor layout) podľa návrhu Hlavna_nastenka ---------- */

/* Horný toolbar: polopriehľadný povrch s rozostrením a jemným tieňom namiesto tvrdej hrany. */
.mud-layout .mud-appbar {
    background: rgba(248, 249, 255, 0.8);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

/* Ľavé menu: jemný tieň namiesto elevácie. */
.mud-layout .mud-drawer {
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.02);
}

/* Toolbar má 64px na všetkých veľkostiach (MudBlazor ho pod 600px skracuje na 56px) - logo sa
   zobrazuje vždy v štandardnej veľkosti a musí sa doň zmestiť. */
.mud-layout .mud-appbar .mud-toolbar-appbar {
    height: var(--mud-appbar-height);
}

/* Logo v toolbare: štandardná veľkosť 64px (celá výška baru) bez ohľadu na zariadenie. */
.sb-appbar-logo img {
    height: 64px;
}

/* Prepínač tímu: dlhý názov tímu sa skráti výpustkou, nech nevytlačí pravú časť baru. */
.sb-appbar-team {
    min-width: 0;
}

.sb-appbar-team .mud-button-label {
    min-width: 0;
}

.sb-appbar-team-name {
    display: block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Odhlásenie ikonou je len pre malú obrazovku - na širokej je v menu používateľa. */
.sb-appbar-logout {
    display: none;
}

/* Malá obrazovka: menu, [logo | prepínač tímu], odhlásenie.
   Logo ostáva len na Mojich tímoch, kde prepínač nie je; avatar s menom nahrádza ikona. */
@media (max-width: 700px) {
    .sb-appbar-logo {
        margin-left: 4px !important;
    }

    .sb-appbar-logo:not(.sb-appbar-logo-home) {
        display: none !important;
    }

    .sb-appbar-team {
        margin-left: 0 !important;
    }

    .sb-appbar-team-name {
        max-width: calc(100vw - 160px);
    }

    .sb-appbar-user {
        display: none;
    }

    .sb-appbar-logout {
        display: flex;
        align-items: center;
    }
}

/* Obsah drawera: navigácia hore, Podpora prilepená na spodok pre všetky veľkosti obrazovky. */
.sb-nav {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.sb-nav > .mud-navmenu:first-child {
    flex: 1 1 auto;
    overflow-y: auto;
}

.mud-drawer .sb-nav-footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 0;
}

/* Položky menu: pill tvar, label typografia, aktívna voľba na navy podklade. */
.mud-drawer .mud-navmenu {
    padding: 8px 16px;
}

.mud-drawer .mud-navmenu .mud-nav-item {
    margin-bottom: 4px;
}

.mud-drawer .mud-navmenu .mud-nav-link {
    border-radius: 8px;
    padding: 8px 16px;
    color: var(--sb-on-surface-variant);
    transition: background 0.15s ease, color 0.15s ease;
}

.mud-drawer .mud-navmenu .mud-nav-link {
    display: flex;
    align-items: center;
}

.mud-drawer .mud-navmenu .mud-nav-link .mud-nav-link-text {
    font-family: var(--sb-font);
    font-size: 14px;
    line-height: 24px; /* rovnaká výška ako ikona - text je s ňou vertikálne vycentrovaný */
    font-weight: 600;
    letter-spacing: 0.03em;
    align-self: center;
}

.mud-drawer .mud-navmenu .mud-nav-link .mud-icon-root {
    color: inherit;
}

/* :not(...) navyše len kvôli špecificite - MudBlazor default pravidlá majú 4 triedy. */
.mud-layout .mud-drawer .mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background: var(--sb-surface-container-highest);
    color: var(--sb-on-surface);
}

.mud-layout .mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--sb-primary-container);
    color: var(--sb-on-primary-container);
}

.mud-layout .mud-drawer .mud-navmenu .mud-nav-link.active .mud-icon-root {
    color: var(--sb-on-primary-container);
}

.mud-drawer .mud-navmenu .mud-nav-link.active .mud-nav-link-text {
    font-weight: 700;
}

/* Obsah odsadený od toolbaru (64px bar + 24px medzera) a od okrajov podľa DESIGN.md.
   Len .mud-layout - EmptyLayout/AuthLayout stránky appbar nemajú. */
.mud-layout .mud-main-content {
    padding: 88px 32px 32px;
}

@media (max-width: 700px) {
    .mud-layout .mud-main-content {
        padding: 84px 16px 24px;
    }
}

/* ---------- Prehľad tímu (design/Prehlad timu/Team_board.html) ---------- */

.sb-ov {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Uvítací banner: navy plocha s diagonálnym pretlačom a metrikou v kruhu vpravo. */
.sb-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 32px;
    border-radius: 24px;
    background: var(--sb-primary-container);
    box-shadow: 0 20px 25px -5px rgba(9, 20, 38, 0.2), 0 8px 10px -6px rgba(9, 20, 38, 0.2);
}

.sb-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--sb-on-primary-container);
    opacity: 0.1;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    pointer-events: none;
}

.sb-hero-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.sb-hero-text h1 {
    margin: 0;
    font-family: var(--sb-font);
    font-size: 48px;
    line-height: 56px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sb-on-primary);
}

.sb-hero-text p {
    margin: 0;
    font-family: var(--sb-font);
    font-size: 18px;
    line-height: 28px;
    color: rgba(188, 199, 222, 0.8);
    max-width: 42rem;
}

/* Skupina metrík vpravo - väčšia medzera, aby sa popisky pod kruhmi neprekrývali. */
.sb-hero-metrics {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 40px;
}

.sb-hero-metric {
    position: relative;
    flex-shrink: 0;
    width: 128px;
    height: 128px;
    margin-bottom: 24px;
    border-radius: 9999px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(to top right, rgba(157, 67, 0, 0.4), transparent);
    box-shadow: 0 0 40px rgba(157, 67, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-hero-metric::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    border: 4px solid transparent;
    border-top-color: var(--sb-secondary);
    animation: sb-spin 4s linear infinite;
}

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

.sb-hero-metric strong {
    position: relative;
    z-index: 1;
    font-family: var(--sb-font);
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-on-primary);
}

.sb-hero-metric span {
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    width: max-content;
    max-width: 200px;
    text-align: center;
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #bcc7de;
}

/* Malé obrazovky: uvítací text sa skryje, ostanú len tri zmenšené metriky vedľa seba. */
@media (max-width: 900px) {
    .sb-hero { justify-content: center; padding: 24px 16px 28px; }
    .sb-hero-text { display: none; }
    .sb-hero-metrics { gap: 20px; }
    .sb-hero-metric { width: 88px; height: 88px; margin-bottom: 36px; }
    .sb-hero-metric strong { font-size: 24px; line-height: 32px; }
    .sb-hero-metric span { bottom: -38px; max-width: 100px; font-size: 10px; line-height: 14px; letter-spacing: 0.08em; }
}

/* Tri štatistické karty. */
.sb-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 900px) {
    .sb-stats { grid-template-columns: 1fr; }
}

.sb-stat {
    position: relative;
    overflow: hidden;
    display: block;
    padding: 24px;
    border-radius: 20px;
    background: var(--sb-surface-container);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s ease;
}

.sb-stat:hover {
    box-shadow: 0 4px 12px rgba(9, 20, 38, 0.10);
}

.sb-stat::before {
    content: '';
    position: absolute;
    right: -16px;
    top: -16px;
    width: 96px;
    height: 96px;
    border-radius: 9999px;
    background: var(--sb-stat-tint, rgba(9, 20, 38, 0.05));
    transition: transform 0.5s ease;
}

.sb-stat:hover::before {
    transform: scale(1.5);
}

.sb-stat-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sb-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sb-stat-tint, rgba(9, 20, 38, 0.1));
    color: var(--sb-stat-color, var(--sb-primary));
}

.sb-stat-navy { --sb-stat-tint: rgba(9, 20, 38, 0.06); --sb-stat-color: var(--sb-primary); }
.sb-stat-blue { --sb-stat-tint: rgba(0, 44, 66, 0.06); --sb-stat-color: #002c42; }
.sb-stat-orange { --sb-stat-tint: rgba(157, 67, 0, 0.08); --sb-stat-color: var(--sb-secondary); }

.sb-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 9999px;
    background: rgba(211, 228, 254, 0.5);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

.sb-stat-chip-accent {
    background: rgba(157, 67, 0, 0.1);
    color: var(--sb-secondary);
}

.sb-stat-chip-error {
    background: #ffdad6;
    color: #93000a;
}

.sb-stat-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sb-stat-label {
    font-family: var(--sb-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-stat-value {
    font-family: var(--sb-font);
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-on-surface);
}

/* Hlavná mriežka: 4/12 vľavo (udalosť + aktivita), 8/12 vpravo (zápasy). */
.sb-ov-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 32px;
    align-items: stretch;
}

@media (max-width: 1200px) {
    .sb-ov-grid { grid-template-columns: 1fr; }
}

.sb-ov-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

/* Veľká karta so zaoblením 24px. */
.sb-ov-card {
    background: var(--sb-surface-container);
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    font-family: var(--sb-font);
    color: var(--sb-on-surface);
}

.sb-ov-card-title {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-ov-card-title-lg {
    font-size: 24px;
    line-height: 32px;
}

.sb-ov-muted {
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-ov-label {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-ov-divider {
    height: 1px;
    width: 100%;
    background: rgba(197, 198, 205, 0.3);
}

/* Najbližšia udalosť: navy hlavička s odznakom, potom telo s účasťou. */
.sb-next {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sb-next-head {
    position: relative;
    height: 128px;
    background:
        linear-gradient(to top, var(--sb-primary-container), rgba(30, 41, 59, 0.2)),
        linear-gradient(115deg, #0b1c30 0%, #1e293b 45%, #3c475a 70%, #9d4300 100%);
}

.sb-next-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, transparent 0 28px, rgba(255, 255, 255, 0.04) 28px 30px);
}

.sb-next-badge {
    position: absolute;
    left: 24px;
    bottom: 16px;
    padding: 4px 8px;
    border-radius: 9999px;
    background: rgba(216, 227, 251, 0.2);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d8e3fb;
}

.sb-next-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-next-body h3 {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-next-time {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface-variant);
}

.sb-avatars {
    display: flex;
    margin-bottom: 16px;
}

.sb-avatars > * {
    position: relative;
    width: 32px;
    height: 32px;
    margin-left: -12px;
    border-radius: 9999px;
    border: 2px solid var(--sb-surface);
    background: var(--sb-surface-container-highest);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    color: var(--sb-on-surface-variant);
}

.sb-avatars > *:first-child {
    margin-left: 0;
}

.sb-avatars img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sb-att-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sb-att-tile {
    padding: 8px;
    border-radius: 12px;
    background: var(--sb-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.sb-att-tile strong {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}

.sb-att-tile span {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
}

.sb-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
}

.sb-dot-sm {
    width: 6px;
    height: 6px;
}

.sb-c-success { color: #059669; }
.sb-c-warning { color: #d97706; }
.sb-c-error { color: var(--sb-error); }
.sb-c-accent { color: var(--sb-secondary); }
.sb-c-info { color: #004c6e; }
.sb-bg-success { background: #10b981; }
.sb-bg-error { background: var(--sb-error); }
.sb-bg-accent { background: var(--sb-secondary); }
.sb-bg-info { background: #0099d9; }
.sb-bg-outline { background: var(--sb-outline); }

/* Kompaktné riadky ďalších udalostí pod účasťou. */
.sb-next-more {
    display: flex;
    flex-direction: column;
}

.sb-next-more a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid rgba(197, 198, 205, 0.3);
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
}

.sb-next-more a:hover {
    color: var(--sb-secondary-container);
}

.sb-next-more a span:last-child {
    white-space: nowrap;
    color: var(--sb-on-surface-variant);
}

/* Tmavé tlačidlo na celú šírku (Manage Roster) + malé plné/svetlé tlačidlá v hlavičkách. */
.sb-btn-dark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    border-radius: 12px;
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.1);
    transition: background 0.2s ease;
}

.sb-btn-dark:hover {
    background: var(--sb-inverse-surface);
    color: var(--sb-on-primary);
}

.sb-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: none;
    border-radius: 12px;
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.1);
    transition: background 0.2s ease, color 0.2s ease;
}

.sb-btn-sm-dark {
    background: var(--sb-primary);
    color: var(--sb-on-primary);
}

.sb-btn-sm-dark:hover {
    background: var(--sb-inverse-surface);
    color: var(--sb-on-primary);
}

.sb-btn-sm-light {
    background: var(--sb-surface);
    color: var(--sb-on-surface-variant);
}

.sb-btn-sm-light:hover {
    background: var(--sb-surface-container-highest);
    color: var(--sb-on-surface);
}

/* Textový odkaz so šípkou (View all activity). */
.sb-link-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 16px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-primary);
    text-decoration: none;
}

.sb-link-more:hover {
    text-decoration: underline;
}

/* Aktivita tímu: časová os s ikonami. */
.sb-feed {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-feed-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sb-feed-list::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: rgba(197, 198, 205, 0.3);
}

.sb-feed-item {
    position: relative;
    display: flex;
    gap: 16px;
    color: inherit;
    text-decoration: none;
}

/* Položka ako odkaz na nástenku (Prehľad): pri hoveri sa zvýrazní ikona aj text. */
a.sb-feed-item:hover .sb-feed-text p { color: var(--sb-secondary); }
a.sb-feed-item:hover .sb-feed-icon { box-shadow: 0 0 0 2px rgba(253, 118, 26, 0.35); }

.sb-feed-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(9, 20, 38, 0.08);
    color: var(--sb-primary);
}

.sb-feed-icon .mud-icon-root {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.sb-feed-icon-accent { background: rgba(157, 67, 0, 0.1); color: var(--sb-secondary); }
.sb-feed-icon-error { background: #ffdad6; color: #93000a; }
.sb-feed-icon-info { background: rgba(0, 44, 66, 0.08); color: #002c42; }

.sb-feed-text {
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sb-feed-text p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-feed-text b {
    font-weight: 600;
    margin-right: 4px;
}

.sb-feed-text time {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
}

/* Zápasy: tabuľka so zaoblenou hlavičkou a chipmi stavu. */
.sb-games {
    height: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.sb-games-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.sb-games-group {
    margin: 8px 16px 4px;
}

.sb-table-wrap {
    overflow-x: auto;
}

.sb-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.sb-table thead tr {
    background: rgba(211, 228, 254, 0.3);
}

.sb-table th {
    padding: 8px 12px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-table th:first-child { border-radius: 8px 0 0 8px; }
.sb-table th:last-child { border-radius: 0 8px 8px 0; text-align: right; }

.sb-table td {
    padding: 12px;
    border-top: 1px solid rgba(197, 198, 205, 0.2);
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
    vertical-align: middle;
}

.sb-table tbody tr:first-child td {
    border-top: none;
}

.sb-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}

.sb-table tbody tr:hover {
    background: rgba(211, 228, 254, 0.1);
}

.sb-table td:last-child {
    text-align: right;
}

/* Riadok s názvom skupiny (najbližšie / odohrané) - bez hover efektu, zarovnaný vľavo. */
.sb-table tr.sb-table-group {
    cursor: default;
}

.sb-table tr.sb-table-group:hover {
    background: none;
}

.sb-table tr.sb-table-group td {
    padding: 12px 12px 4px;
    text-align: left;
}

.sb-game-date {
    white-space: nowrap;
}

.sb-game-teams {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-game-vs {
    font-size: 12px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
}

.sb-squad-badge {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--sb-surface);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    color: var(--sb-primary-container);
}

.sb-score {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--sb-on-surface);
}

.sb-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 9999px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    background: var(--sb-surface-container-highest);
    color: var(--sb-on-surface-variant);
}

.sb-status-completed { background: rgba(16, 185, 129, 0.1); color: #059669; }
.sb-status-ongoing { background: #ffdad6; color: #93000a; }
.sb-status-planned { background: rgba(0, 153, 217, 0.12); color: #004c6e; }
.sb-status-canceled { background: var(--sb-surface-container-highest); color: var(--sb-on-surface-variant); }

.sb-row-btn {
    border: none;
    background: none;
    padding: 0;
    color: var(--sb-primary);
    cursor: pointer;
    transition: color 0.15s ease;
}

.sb-row-btn:hover {
    color: rgba(9, 20, 38, 0.7);
}

.sb-games-empty {
    padding: 24px 16px;
    text-align: center;
}

/* Spodná lišta karty zápasov: číslo + jednoduchý stĺpcový graf. */
.sb-games-foot {
    margin-top: auto;
    padding: 24px 16px 0;
    border-top: 1px solid rgba(197, 198, 205, 0.2);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.sb-games-foot strong {
    display: block;
    margin-top: 4px;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-secondary);
}

.sb-bars {
    flex: 1;
    max-width: 200px;
    height: 48px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 2px;
}

.sb-bars div {
    flex: 1;
    max-width: 24px;
    min-height: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--sb-surface-container-highest);
    transition: background 0.2s ease;
}

.sb-bars div:hover,
.sb-bars div.sb-bar-hi {
    background: var(--sb-secondary);
}

/* ---------- Pokladňa (design/Pokladna/pokladna.html) ---------- */

.sb-bank {
    display: flex;
    flex-direction: column;
    gap: 32px;
    font-family: var(--sb-font);
}

/* Štyri súhrnné karty: zostatok (navy), vklady, výbery, pohľadávky (oranžová). */
.sb-bank-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 1200px) {
    .sb-bank-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .sb-bank-cards { grid-template-columns: 1fr; }
}

.sb-bank-card {
    position: relative;
    overflow: hidden;
    min-height: 128px;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-high);
    color: var(--sb-on-surface);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sb-bank-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px -4px rgba(9, 20, 38, 0.15);
}

.sb-bank-card-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.sb-bank-card-label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-bank-card-icon {
    color: var(--sb-on-surface-variant);
}

.sb-bank-card-value {
    position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.sb-bank-card-value strong {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.sb-bank-card-value span {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(69, 71, 76, 0.7);
}

.sb-bank-card-primary {
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    box-shadow: 0 4px 6px -1px rgba(9, 20, 38, 0.3);
}

.sb-bank-card-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 60%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.sb-bank-card-primary:hover::before {
    opacity: 1;
}

.sb-bank-card-primary .sb-bank-card-label { color: rgba(255, 255, 255, 0.8); }
.sb-bank-card-primary .sb-bank-card-icon { color: rgba(255, 255, 255, 0.6); }

.sb-bank-card-primary .sb-bank-card-value strong {
    font-size: 48px;
    line-height: 56px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.sb-bank-card-primary .sb-bank-card-value span { color: rgba(255, 255, 255, 0.7); }

.sb-bank-card-accent {
    background: var(--sb-secondary-container);
    color: #5c2400;
}

.sb-bank-card-accent::before {
    content: '';
    position: absolute;
    right: -16px;
    top: -16px;
    width: 96px;
    height: 96px;
    border-radius: 9999px;
    background: rgba(157, 67, 0, 0.1);
    filter: blur(24px);
}

.sb-bank-card-accent .sb-bank-card-label,
.sb-bank-card-accent .sb-bank-card-icon { color: #5c2400; }
.sb-bank-card-accent .sb-bank-card-value span { color: rgba(92, 36, 0, 0.8); }

/* Hlavná mriežka: tabuľka 9/12 + bočný panel 3/12. */
.sb-bank-grid {
    display: grid;
    grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 1200px) {
    .sb-bank-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}

@media (max-width: 900px) {
    .sb-bank-grid { grid-template-columns: 1fr; }
}

.sb-bank-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Biela karta s tabuľkou pohybov. */
.sb-bank-table-card {
    background: var(--sb-surface-container-lowest);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sb-bank-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(197, 198, 205, 0.3);
    background: rgba(248, 249, 255, 0.5);
}

.sb-bank-table-head h2 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

/* Pilulkové tlačidlo (Filter, Export). */
.sb-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: none;
    border-radius: 9999px;
    background: var(--sb-surface-container);
    color: var(--sb-on-surface);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sb-btn-pill:hover,
.sb-btn-pill.active {
    background: var(--sb-surface-container-high);
    color: var(--sb-on-surface);
}

.sb-bank-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(197, 198, 205, 0.3);
    background: var(--sb-surface-container-low);
}

.sb-bank-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.sb-bank-table thead tr {
    background: var(--sb-surface-container-low);
}

.sb-bank-table th {
    padding: 8px 16px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-bank-table td {
    padding: 16px;
    border-top: 1px solid rgba(197, 198, 205, 0.2);
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
    vertical-align: middle;
}

.sb-bank-table tbody tr:first-child td { border-top: none; }

.sb-bank-table tbody tr {
    transition: background 0.15s ease;
}

.sb-bank-table tbody tr:hover {
    background: rgba(229, 238, 255, 0.3);
}

.sb-bank-table .sb-col-date {
    white-space: nowrap;
    color: var(--sb-on-surface-variant);
}

.sb-bank-table .sb-col-desc {
    font-weight: 500;
}

.sb-bank-table .sb-col-amount {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

.sb-bank-table .sb-col-status {
    text-align: center;
}

.sb-bank-table .sb-col-actions {
    text-align: right;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 16px;
}

.sb-bank-table .sb-col-actions .mud-button-root {
    opacity: 0.35;
    transition: opacity 0.15s ease;
}

.sb-bank-table tbody tr:hover .sb-col-actions .mud-button-root {
    opacity: 1;
}

.sb-cat-chip {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--sb-surface-container-high);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-amount-credit { color: #059669; }
.sb-amount-debet { color: var(--sb-error); }
.sb-amount-receivable { color: var(--sb-on-surface-variant); }

.sb-state-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 9999px;
    background: rgba(9, 20, 38, 0.1);
    color: var(--sb-primary);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.sb-state-chip i {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--sb-primary);
}

.sb-state-chip-pending {
    background: var(--sb-secondary-container);
    color: #5c2400;
}

.sb-state-chip-pending i {
    background: var(--sb-secondary);
}

.sb-bank-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 24px;
    border-top: 1px solid rgba(197, 198, 205, 0.3);
    background: rgba(248, 249, 255, 0.5);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
}

.sb-bank-empty {
    padding: 32px 24px;
    text-align: center;
    font-size: 16px;
    color: var(--sb-on-surface-variant);
}

/* Bočný panel Neuhradené. */
.sb-bank-panel {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    display: flex;
    flex-direction: column;
}

.sb-bank-panel::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 160px;
    height: 160px;
    border-radius: 9999px;
    background: rgba(255, 218, 214, 0.3);
    filter: blur(40px);
    pointer-events: none;
}

.sb-bank-panel > * {
    position: relative;
    z-index: 1;
}

.sb-bank-panel h3 {
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-badge-error {
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--sb-error);
    color: #ffffff;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
}

.sb-debtors {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-debtor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sb-debtor:hover {
    background: rgba(229, 238, 255, 0.5);
    border-color: rgba(197, 198, 205, 0.3);
}

.sb-debtor-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sb-debtor-avatar {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    overflow: hidden;
    background: #002c42;
    color: #0099d9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}

.sb-debtor-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sb-debtor-name {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sb-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-debtor-amount {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-error);
}

.sb-debtor-count {
    font-weight: 400;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-debtor-go {
    flex-shrink: 0;
    color: var(--sb-on-surface-variant);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sb-debtor:hover .sb-debtor-go {
    opacity: 1;
}

.sb-btn-soft {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: 16px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: var(--sb-surface-container);
    color: var(--sb-on-surface);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sb-btn-soft:hover {
    background: var(--sb-surface-container-high);
}

/* Navy karta rýchlej akcie "Nový pohyb". */
.sb-bank-cta {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: 12px;
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(0, 153, 217, 0.25), transparent 45%),
        var(--sb-primary-container);
    color: var(--sb-on-primary-container);
    box-shadow: 0 4px 6px -1px rgba(9, 20, 38, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sb-bank-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

.sb-bank-cta > * {
    position: relative;
}

.sb-bank-cta .sb-bank-cta-icon {
    color: rgba(133, 144, 166, 0.8);
    margin-bottom: 8px;
    transition: transform 0.5s ease;
}

.sb-bank-cta:hover .sb-bank-cta-icon {
    transform: scale(1.1);
}

.sb-bank-cta h4 {
    margin: 0 0 4px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #d8e3fb;
}

.sb-bank-cta p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(133, 144, 166, 0.9);
}

.sb-btn-light-pill {
    padding: 8px 24px;
    border: none;
    border-radius: 9999px;
    background: var(--sb-on-primary-container);
    color: var(--sb-primary-container);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.sb-btn-light-pill:hover {
    opacity: 0.9;
}

/* ---------- Členovia (design/Clenovia/clenovia.html) ---------- */

.sb-members {
    font-family: var(--sb-font);
}

.sb-members-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.sb-members-head h1 {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-on-surface);
}

.sb-members-head p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface-variant);
}

.sb-members-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Pilulkové tlačidlá: svetlé (export) a tmavé (pozvať). */
.sb-btn-pill-high {
    background: var(--sb-surface-container-high);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.08);
    padding: 8px 16px;
}

.sb-btn-pill-high:hover {
    background: var(--sb-surface-container-highest);
}

.sb-btn-pill-dark {
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    box-shadow: 0 4px 6px -1px rgba(9, 20, 38, 0.3);
    padding: 8px 16px;
}

.sb-btn-pill-dark:hover {
    background: var(--sb-inverse-surface);
    color: var(--sb-on-primary);
}

/* Lišta s hľadaním a filtrami. */
.sb-members-filter {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 16px;
    margin-bottom: 32px;
    border-radius: 12px;
    background: var(--sb-surface-container);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-members-search {
    flex: 1;
    min-width: 220px;
}

.sb-members-filter .mud-input-control .mud-input {
    background: var(--sb-surface);
    border-radius: 8px;
}

.sb-members-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-members-filter-item > span {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

/* Tabuľka členov. */
.sb-members-table-card {
    border-radius: 12px;
    background: var(--sb-surface);
    box-shadow: 0 4px 12px rgba(9, 20, 38, 0.08);
    overflow: hidden;
}

.sb-members-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.sb-members-table thead tr {
    background: var(--sb-surface-container-low);
    border-bottom: 1px solid var(--sb-surface-container-highest);
}

.sb-members-table th {
    padding: 16px 24px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-members-table td {
    padding: 16px 24px;
    border-top: 1px solid var(--sb-surface-container-highest);
    vertical-align: middle;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
}

.sb-members-table tbody tr:first-child td {
    border-top: none;
}

.sb-members-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}

.sb-members-table tbody tr:hover {
    background: var(--sb-surface-container-lowest);
}

.sb-members-table tbody tr.sb-member-inactive {
    opacity: 0.6;
}

.sb-member-name {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.sb-member-avatar {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--sb-surface-container-highest);
    color: var(--sb-on-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}

.sb-member-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sb-member-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
    transition: color 0.15s ease;
}

.sb-members-table tbody tr:hover .sb-member-title {
    color: var(--sb-secondary-container);
}

/* Stĺpec Vek: vek k dnešku z dátumu narodenia; správca členov ho tlačidlom zmení, chýbajúci doplní ikonou torty. */
.sb-member-age-cell { white-space: nowrap; }

.sb-member-age {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--sb-on-surface);
}

.sb-member-age-btn {
    margin: 0;
    padding: 4px 6px 4px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sb-member-age-btn .mud-icon-root { font-size: 16px; width: 16px; height: 16px; color: var(--sb-on-surface-variant); }

.sb-member-age-btn:hover,
.sb-member-age-btn:focus-visible { background: rgba(157, 67, 0, 0.1); color: var(--sb-primary); outline: none; }

.sb-member-age-btn:hover .mud-icon-root { color: var(--sb-primary); }

.sb-member-age-set { color: var(--sb-on-surface-variant); }

.sb-member-sub {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
}

/* Stĺpec Pozvánka (len admin): email a pod ním dátum odoslania. */
.sb-member-invite {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sb-member-invite-email {
    font-size: 13px;
    line-height: 18px;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-role-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--sb-surface-container-highest);
    color: var(--sb-on-surface-variant);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.sb-role-chip-admin {
    background: var(--sb-primary-container);
    color: #d8e3fb;
}

/* Stav členstva pod chipom roly (stĺpec Rola na Členoch). */
.sb-member-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface);
    white-space: nowrap;
}

.sb-members-table .sb-col-actions {
    text-align: right;
    white-space: nowrap;
    padding-left: 8px;
}

.sb-members-table .sb-col-actions .mud-button-root {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sb-members-table tbody tr:hover .sb-col-actions .mud-button-root {
    opacity: 1;
}

.sb-members-table .sb-col-actions .sb-row-chevron {
    color: var(--sb-on-surface-variant);
    vertical-align: middle;
    transition: color 0.15s ease;
}

.sb-members-table tbody tr:hover .sb-row-chevron {
    color: var(--sb-primary);
}

.sb-members-empty {
    padding: 32px 24px;
    text-align: center;
    font-size: 16px;
    color: var(--sb-on-surface-variant);
}

/* ---------- Detail člena tímu (design/Clen timu detail/clen_timu_detail.html) ---------- */

.sb-mp {
    display: flex;
    flex-direction: column;
    gap: 32px;
    font-family: var(--sb-font);
}

/* Hlavička profilu: fotka, rola, meno, popis; vpravo dochádzka. */
.sb-mp-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 48px;
    border-radius: 24px;
    background: var(--sb-surface-container);
    box-shadow: 0 4px 6px -1px rgba(9, 20, 38, 0.1), 0 2px 4px -2px rgba(9, 20, 38, 0.1);
}

.sb-mp-hero::before,
.sb-mp-hero::after {
    content: '';
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
}

.sb-mp-hero::before {
    top: -128px;
    right: -128px;
    width: 256px;
    height: 256px;
    background: rgba(157, 67, 0, 0.1);
    filter: blur(48px);
}

.sb-mp-hero::after {
    bottom: -96px;
    left: -48px;
    width: 192px;
    height: 192px;
    background: rgba(9, 20, 38, 0.1);
    filter: blur(32px);
}

.sb-mp-hero > * {
    position: relative;
    z-index: 1;
}

.sb-mp-photo {
    position: relative;
    flex-shrink: 0;
    width: 192px;
    height: 192px;
    border-radius: 9999px;
    overflow: hidden;
    border: 4px solid var(--sb-surface);
    background: var(--sb-surface-container-highest);
    color: var(--sb-primary-container);
    box-shadow: 0 10px 15px -3px rgba(9, 20, 38, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    font-weight: 700;
}

.sb-mp-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sb-mp-hero-text {
    flex: 1;
    min-width: 0;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sb-mp-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    margin-bottom: 16px;
    border-radius: 9999px;
    background: var(--sb-secondary);
    color: var(--sb-on-secondary);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.1);
}

.sb-mp-role-member {
    background: var(--sb-primary-container);
    color: #d8e3fb;
}

.sb-mp-hero-text h1 {
    margin: 0 0 8px;
    font-size: 60px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-mp-hero-text p {
    margin: 0;
    max-width: 42rem;
    font-size: 18px;
    line-height: 28px;
    color: var(--sb-on-surface-variant);
}

.sb-mp-hero-side {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    align-self: center;
}

.sb-mp-hero-side .sb-mp-ghost {
    font-size: 120px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgba(9, 20, 38, 0.05);
}

.sb-mp-hero-side .sb-mp-side-value {
    margin-top: -60px;
    font-size: 48px;
    line-height: 56px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sb-primary);
}

.sb-mp-hero-side .sb-mp-side-label {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

@media (max-width: 900px) {
    .sb-mp-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 32px;
    }
    .sb-mp-hero-text { align-items: center; padding-top: 0; }
    .sb-mp-hero-text h1 { font-size: 36px; }
    .sb-mp-photo { width: 160px; height: 160px; }
}

/* Štyri štatistické karty s tenkým pruhom. */
.sb-mp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1000px) {
    .sb-mp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sb-mp-stat {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: 16px;
    background: var(--sb-surface-container);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.3s ease;
}

.sb-mp-stat:hover {
    box-shadow: 0 4px 12px rgba(9, 20, 38, 0.10);
}

.sb-mp-stat::before {
    content: '';
    position: absolute;
    top: -48px;
    right: -48px;
    width: 96px;
    height: 96px;
    border-radius: 9999px;
    background: var(--sb-surface-container-high);
    filter: blur(24px);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.sb-mp-stat:hover::before {
    opacity: 1;
}

.sb-mp-stat > * {
    position: relative;
}

.sb-mp-stat-label {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-mp-stat-value {
    font-size: 36px;
    line-height: 40px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sb-on-surface);
}

.sb-mp-stat-accent .sb-mp-stat-value {
    color: var(--sb-secondary);
}

.sb-mp-stat-bar {
    margin-top: 16px;
    height: 4px;
    width: 100%;
    border-radius: 9999px;
    background: var(--sb-surface-container-high);
    overflow: hidden;
}

.sb-mp-stat-bar div {
    height: 100%;
    border-radius: 9999px;
    background: var(--sb-primary);
}

.sb-mp-stat-accent .sb-mp-stat-bar div {
    background: var(--sb-secondary);
}

/* Panel Zápasy je tlačidlo (okno so zápasmi člena) - vzhľad ostáva ako pri ostatných kartách,
   len kurzor a šípka pri popise prezrádzajú preklik; šípka sa pri hoveri zafarbí. */
.sb-mp-stat-btn {
    margin: 0;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.sb-mp-stat-btn:focus-visible {
    outline: 2px solid var(--sb-primary);
    outline-offset: 2px;
}

.sb-mp-stat-btn .sb-mp-stat-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sb-mp-stat-hint {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--sb-on-surface-variant);
    transition: color 0.15s ease, transform 0.15s ease;
}

.sb-mp-stat-btn:hover .sb-mp-stat-hint,
.sb-mp-stat-btn:focus-visible .sb-mp-stat-hint {
    color: var(--sb-primary);
    transform: translateX(2px);
}

/* Spodná mriežka: bilancia 1/3 + momenty kariéry 2/3. */
.sb-mp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 32px;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .sb-mp-grid { grid-template-columns: 1fr; }
}

.sb-mp-card {
    padding: 32px;
    border-radius: 24px;
    background: var(--sb-surface-container);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sb-mp-card h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-mp-card h2 .mud-icon-root {
    color: var(--sb-secondary);
}

.sb-mp-record {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-on-surface);
}

.sb-mp-record-bar {
    display: flex;
    gap: 4px;
    height: 16px;
    width: 100%;
    border-radius: 9999px;
    overflow: hidden;
}

.sb-mp-record-bar div {
    height: 100%;
    transition: width 1s ease-out;
}

.sb-mp-record-bar .win { background: var(--sb-secondary); }
.sb-mp-record-bar .draw { background: #545f73; }
.sb-mp-record-bar .loss { background: var(--sb-primary); }

.sb-mp-legend {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 8px;
}

.sb-mp-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-mp-legend i {
    width: 12px;
    height: 12px;
    border-radius: 9999px;
}

/* Dochádzka v spodnej časti karty bilancie. */
.sb-mp-att {
    margin-top: auto;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-high);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sb-mp-att-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.sb-mp-att-head span:first-child {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-mp-att-head strong {
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: var(--sb-secondary);
}

.sb-mp-att-rows {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

.sb-mp-att-rows .bar {
    height: 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
}

.sb-mp-att-rows .bar div {
    height: 100%;
    border-radius: 9999px;
}

.sb-mp-att-rows strong {
    font-weight: 600;
    color: var(--sb-on-surface);
    text-align: right;
}

/* Momenty kariéry: dva stĺpce - série a míľniky. */
.sb-mp-moments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

@media (max-width: 800px) {
    .sb-mp-moments { grid-template-columns: 1fr; }
}

.sb-mp-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-mp-col h3 {
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sb-surface-container-highest);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-mp-streak {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    background: var(--sb-surface);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    transition: transform 0.2s ease;
}

.sb-mp-streak:hover {
    transform: translateY(-4px);
}

.sb-mp-streak p {
    margin: 0;
}

.sb-mp-streak .label {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-mp-streak .value {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
    white-space: nowrap;
}

.sb-mp-streak-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.sb-mp-streak-range {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    background: var(--sb-surface-container-high);
    color: var(--sb-on-surface-variant);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    text-align: right;
}

.sb-mp-milestone {
    position: relative;
    overflow: hidden;
    min-height: 120px;
    padding: 24px;
    border-radius: 12px;
    background: var(--sb-surface);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: inherit;
    text-decoration: none;
}

a.sb-mp-milestone:hover .sb-mp-milestone-value {
    color: var(--sb-secondary-container);
}

.sb-mp-milestone-ghost {
    position: absolute;
    right: -16px;
    top: -16px;
    font-size: 72px;
    line-height: 1;
    font-weight: 800;
    color: var(--sb-surface-container-high);
    opacity: 0.6;
    pointer-events: none;
}

/* Textový variant pozadia (uplynulý čas) - menší a bez zalomenia, aby sa zmestil do karty. */
.sb-mp-milestone-ghost-text {
    right: 8px;
    top: 4px;
    font-size: 40px;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.sb-mp-milestone > * {
    position: relative;
}

/* Pozadie musí ostať absolútne aj po pravidle vyššie (rovnaká špecifickosť, neskoršie poradie). */
.sb-mp-milestone > .sb-mp-milestone-ghost {
    position: absolute;
}

.sb-mp-milestone p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-mp-milestone-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.sb-mp-milestone-value {
    font-size: 30px;
    line-height: 36px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sb-secondary);
    transition: color 0.15s ease;
}

.sb-mp-milestone-value.plain {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-mp-milestone-row span:last-child:not(.sb-mp-milestone-value) {
    padding-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-mp-empty {
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface);
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

/* Tituly zo Siene slávy v detaile člena - medaily (.sb-hof-medal) a chipy umiestnení
   (.sb-hof-placement) sú zdieľané so stránkou Sieň slávy. */
.sb-mp-medals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.sb-mp-medal-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 4px;
    border-radius: 9999px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sb-on-surface);
}

.sb-mp-titles-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-mp-titles-hint {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-mp-title-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.sb-mp-title-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    border-radius: 12px;
    background: var(--sb-surface);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    text-align: center;
}

.sb-mp-title-count .value {
    font-size: 32px;
    line-height: 40px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--sb-outline);
}

.sb-mp-title-count-1 .value { color: #9a6b00; }
.sb-mp-title-count-2 .value { color: #4a5568; }
.sb-mp-title-count-3 .value { color: #8a4a1b; }

.sb-mp-title-count .label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-mp-placements {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 600px) {
    .sb-mp-title-counts { gap: 8px; }
    .sb-mp-title-count { padding: 16px 8px; }
    .sb-mp-title-count .value { font-size: 24px; line-height: 32px; }
}

/* ---------- Udalosti (design/Udalosti/calendar.html) ---------- */

.sb-ev {
    font-family: var(--sb-font);
}

.sb-ev-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.sb-ev-head h1 {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-primary);
}

.sb-ev-head p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface-variant);
}

.sb-ev-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 384px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .sb-ev-grid { grid-template-columns: 1fr; }
}

.sb-ev-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Filter: hľadanie + dva segmentované prepínače. */
.sb-ev-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
    border-radius: 16px;
    background: var(--sb-surface-container);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-ev-search {
    flex: 1;
    min-width: 220px;
}

.sb-ev-search .mud-input-control .mud-input {
    background: var(--sb-surface);
    border-radius: 12px;
}

.sb-ev-segments {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-segment {
    display: inline-flex;
    padding: 4px;
    border-radius: 12px;
    background: var(--sb-surface);
    border: 1px solid rgba(197, 198, 205, 0.3);
}

.sb-segment button {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--sb-on-surface-variant);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.sb-segment button:hover {
    background: var(--sb-surface-container-high);
    color: var(--sb-on-surface);
}

.sb-segment button.active {
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.1);
}

.sb-segment-soft button.active {
    background: var(--sb-surface-container-high);
    color: var(--sb-on-surface);
    box-shadow: none;
}

.sb-ev-chip-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 12px;
    border-radius: 9999px;
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.sb-ev-chip-filter button {
    display: flex;
    border: none;
    background: none;
    color: inherit;
    padding: 0;
    cursor: pointer;
}

/* Karta udalosti s farebným ľavým okrajom podľa typu. */
.sb-ev-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-ev-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    border-radius: 24px;
    border-left: 4px solid var(--sb-primary);
    background: var(--sb-surface-container);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}

.sb-ev-card:hover {
    background: var(--sb-surface-container-high);
}

.sb-ev-card-training { border-left-color: var(--sb-secondary); }
.sb-ev-card-tournament { border-left-color: #b8860b; }
.sb-ev-card-other { border-left-color: #0099d9; }
.sb-ev-card-canceled { opacity: 0.7; border-left-color: var(--sb-outline); }

.sb-ev-card-main {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sb-ev-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-ev-type {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(9, 20, 38, 0.1);
    color: var(--sb-primary);
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sb-ev-type-training { background: rgba(157, 67, 0, 0.1); color: var(--sb-secondary); }
.sb-ev-type-tournament { background: rgba(184, 134, 11, 0.14); color: #7a5a00; }
.sb-ev-type-other { background: rgba(0, 153, 217, 0.12); color: #004c6e; }
.sb-ev-type-canceled { background: #ffdad6; color: #93000a; }

.sb-ev-date {
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-ev-card h3 {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-ev-card h3.canceled {
    text-decoration: line-through;
}

.sb-ev-place {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-ev-card-side {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

@media (max-width: 700px) {
    .sb-ev-card { flex-wrap: wrap; }
    .sb-ev-card-main { flex-basis: 100%; }
}

.sb-ev-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.sb-ev-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--sb-surface);
    color: var(--sb-on-surface-variant);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.sb-ev-pill .mud-icon-root {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Zvýraznený počet prihlásených: zelená pilulka s väčším číslom. */
.sb-ev-pill-joined {
    padding: 6px 12px;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
}

.sb-ev-pill-joined .mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.sb-ev-pill-joined strong {
    font-size: 18px;
    line-height: 16px;
    font-weight: 800;
}

.sb-ev-pill-joined {
    justify-content: center;
    min-width: 72px;
}

.sb-ev-chevron {
    flex-shrink: 0;
    color: var(--sb-on-surface-variant);
    transition: color 0.15s ease, transform 0.15s ease;
}

.sb-ev-card:hover .sb-ev-chevron {
    color: var(--sb-primary);
    transform: translateX(2px);
}

.sb-ev-empty {
    padding: 32px 24px;
    border-radius: 24px;
    background: var(--sb-surface-container);
    text-align: center;
    font-size: 16px;
    color: var(--sb-on-surface-variant);
}

/* Bočný panel: mini kalendár + rýchly prehľad. */
.sb-ev-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-radius: 24px;
    background: var(--sb-surface-container);
    box-shadow: 0 10px 15px -3px rgba(9, 20, 38, 0.1), 0 4px 6px -4px rgba(9, 20, 38, 0.1);
}

.sb-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sb-cal-head h3 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
    text-transform: capitalize;
}

.sb-cal-nav {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--sb-on-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sb-cal-nav:hover {
    background: var(--sb-surface-container-high);
}

.sb-cal-days,
.sb-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    text-align: center;
}

.sb-cal-days div {
    padding: 4px 0;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
}

.sb-cal-grid button {
    padding: 6px 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--sb-on-surface);
    font-family: var(--sb-font);
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sb-cal-grid button:hover {
    background: var(--sb-surface-container-high);
}

.sb-cal-grid button.outside {
    color: var(--sb-outline);
    opacity: 0.4;
}

.sb-cal-grid button.has-game {
    background: rgba(9, 20, 38, 0.1);
    color: var(--sb-primary);
    font-weight: 600;
}

.sb-cal-grid button.has-training {
    background: rgba(157, 67, 0, 0.1);
    color: var(--sb-secondary);
    font-weight: 600;
}

.sb-cal-grid button.has-other {
    background: rgba(0, 153, 217, 0.12);
    color: #004c6e;
    font-weight: 600;
}

.sb-cal-grid button.today {
    box-shadow: inset 0 0 0 2px var(--sb-primary);
    font-weight: 600;
}

.sb-cal-grid button.selected {
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.2);
}

.sb-ev-quick {
    padding-top: 16px;
    border-top: 1px solid rgba(197, 198, 205, 0.3);
}

.sb-ev-quick h4 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-ev-quick-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: var(--sb-surface);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-ev-quick-row span:last-child {
    color: var(--sb-primary);
    white-space: nowrap;
}

.sb-ev-quick-row span.warn {
    color: var(--sb-secondary);
}

/* ---------- Detail udalosti (design/Detail udalosti/detail_udalosti.html) ---------- */

.sb-c-navy { color: var(--sb-primary); }

.sb-ed {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: var(--sb-font);
}

/* Hlavička s chipmi, názvom, akciami a záložkami. */
.sb-ed-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 24px 0;
    border-radius: 16px;
    background: rgba(239, 244, 255, 0.7);
}

.sb-ed-chips {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-ed-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px;
    border-radius: 9999px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sb-ed-chip .mud-icon-root { font-size: 16px; width: 16px; height: 16px; flex-shrink: 0; }

/* Úzka obrazovka: chipy stavu, typu a pripnutia sú len okrúhle ikony (text nesie title),
   termín ostáva ako text. */
@media (max-width: 700px) {
    .sb-ed-chips-compact { gap: 8px; }
    .sb-ed-chips-compact .sb-ed-chip { padding: 6px; }
    .sb-ed-chips-compact .sb-ed-chip .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }
    .sb-ed-chips-compact .sb-ed-chip-label { display: none; }
}

.sb-ed-chip-planned { background: rgba(16, 185, 129, 0.1); color: #059669; }
.sb-ed-chip-canceled { background: #ffdad6; color: #93000a; }
.sb-ed-chip-ongoing { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.sb-ed-chip-completed { background: rgba(0, 76, 110, 0.12); color: #004c6e; }
.sb-ed-chip-type { background: rgba(253, 118, 26, 0.2); color: var(--sb-secondary); }
/* Sezóna udalosti - chip je odkaz na Štatistiky s filtrom na sezónu. */
a.sb-ed-chip-season { background: rgba(0, 76, 110, 0.12); color: #004c6e; text-decoration: none; }
a.sb-ed-chip-season:hover { background: rgba(0, 76, 110, 0.2); }

.sb-ed-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-ed-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-ed-title-row h1 {
    margin: 0;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-ed-title-row h1.canceled {
    text-decoration: line-through;
    color: var(--sb-on-surface-variant);
}

.sb-ed-title-row p {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface-variant);
}

.sb-ed-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-ed-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border: none;
    border-radius: 12px;
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sb-ed-btn-dark {
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.1);
}

.sb-ed-btn-dark:hover { background: var(--sb-inverse-surface); color: var(--sb-on-primary); }

.sb-ed-btn-light {
    background: var(--sb-surface-container-high);
    color: var(--sb-on-surface);
}

.sb-ed-btn-light:hover { background: var(--sb-surface-container-highest); color: var(--sb-on-surface); }

/* Úzka obrazovka: akcie hlavičky (Upraviť, Bank, Pripomienka, Pripnutie) sú len ikony v jednom
   riadku pod názvom - pozornosť patrí údajom o udalosti a zadaniu účasti. Názov akcie nesie
   title a aria-label, text tlačidla sa skryje. */
@media (max-width: 700px) {
    .sb-ed-title-row-compact {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .sb-ed-actions-compact {
        gap: 8px;
        flex-wrap: nowrap;
    }

    .sb-ed-actions-compact .sb-ed-btn { padding: 10px 12px; }
    .sb-ed-actions-compact .sb-ed-btn-label { display: none; }
}

.sb-ed-tabs {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(197, 198, 205, 0.3);
}

.sb-ed-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0 16px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    font-family: var(--sb-font);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface-variant);
    cursor: pointer;
    transition: color 0.15s ease;
}

.sb-ed-tabs button:hover { color: var(--sb-on-surface); }

.sb-ed-tabs button.active {
    color: var(--sb-primary);
    border-bottom-color: var(--sb-primary);
}

/* Úzka obrazovka: záložky v jednom riadku s vodorovným posunom namiesto zalomenia. Posuvník je
   skrytý, hranu prezradí vodorovný posun prstom; záložky sú o niečo menšie, aby sa ich zmestilo viac. */
@media (max-width: 700px) {
    .sb-ed-tabs-scroll {
        flex-wrap: nowrap;
        gap: 20px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sb-ed-tabs-scroll::-webkit-scrollbar { display: none; }

    .sb-ed-tabs-scroll button {
        flex-shrink: 0;
        white-space: nowrap;
        padding-bottom: 12px;
        font-size: 17px;
        line-height: 24px;
    }
}

.sb-ed-tab-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--sb-surface-container-high);
    color: var(--sb-on-surface);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
}

/* Mriežka 8/4. */
.sb-ed-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

@media (max-width: 1100px) {
    .sb-ed-grid { grid-template-columns: 1fr; }
}

.sb-ed-main,
.sb-ed-side {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.sb-ed-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-ed-card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-ed-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sb-ed-text {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface-variant);
    white-space: pre-wrap;
}

.sb-ed-muted {
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

p.sb-ed-muted { margin: 0; }

.sb-ed-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

/* Panel vlastnej účasti v detaile udalosti - obal komponentu RsvpPanel (pravidlá .sb-rsvp nižšie). */
.sb-ed-rsvp {
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
}

.sb-ed-rsvp .sb-rsvp-note .mud-input { background: var(--sb-surface-container-lowest); }



/* Zhustené fakty udalosti v jednom riadku. */
.sb-ed-facts-inline {
    display: flex;
    align-items: center;
    gap: 8px 24px;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-ed-facts-inline span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sb-ed-facts-inline .mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--sb-on-surface-variant);
}

.sb-ed-rsvp-controls .mud-input-control .mud-input { background: var(--sb-surface-container-lowest); }

/* Skupiny účasti s avatarmi. */
.sb-ed-groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-ed-group h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-ed-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.sb-ed-att-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-ed-att-filter .mud-input-control { max-width: 320px; }

/* Ikona stavu člena: zvolený stav vo farbe stavu, bez odpovede ceruzka. Pre správcu účasti je
   ikona tlačidlom - otvára dialóg so stavom aj poznámkou člena. */
.sb-ed-person-status {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: var(--sb-surface-container-lowest);
}

.sb-ed-person-status .mud-icon-root { font-size: 20px; width: 20px; height: 20px; }

.sb-ed-person-status-btn {
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sb-ed-person-status-btn:hover {
    border-color: currentColor;
    background: var(--sb-surface-container-highest);
}

.sb-ed-person-status-btn:disabled { cursor: default; opacity: 0.6; }

.sb-ed-person {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    background: var(--sb-surface-container-low);
}

.sb-ed-person-name {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-ed-person-note {
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

.sb-ed-avatar {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--sb-surface-container-highest);
    color: var(--sb-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.sb-ed-avatar-sm { width: 32px; height: 32px; font-size: 12px; }

.sb-ed-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Diskusia. */
.sb-ed-composer {
    position: relative;
}

.sb-ed-composer textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 64px 16px 16px;
    border: 1px solid rgba(197, 198, 205, 0.4);
    border-radius: 12px;
    background: var(--sb-surface-container-low);
    color: var(--sb-on-surface);
    font-family: var(--sb-font);
    font-size: 16px;
    line-height: 24px;
    resize: none;
}

.sb-ed-composer textarea:focus {
    outline: none;
    border-color: var(--sb-primary);
}

.sb-ed-send {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: var(--sb-secondary);
    color: var(--sb-on-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.1);
}

.sb-ed-send:disabled { opacity: 0.4; cursor: default; }

.sb-ed-messages {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-ed-message {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(239, 244, 255, 0.6);
}

.sb-ed-message-body { flex: 1; min-width: 0; }

.sb-ed-message-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sb-ed-message-author {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sb-on-surface);
}

.sb-ed-admin {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    font-size: 10px;
    line-height: 12px;
    font-weight: 600;
}

.sb-ed-message-time {
    font-size: 11px;
    line-height: 14px;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-ed-message p {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Kasa. */
.sb-ed-kasa-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.sb-ed-kasa-stats strong {
    display: block;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

.sb-ed-transfers { display: flex; flex-direction: column; }

.sb-ed-transfer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid rgba(197, 198, 205, 0.3);
    font-size: 14px;
    line-height: 20px;
}

/* Riadok Príjmov, na ktorý sa dá kliknúť (zápis alebo úprava platby člena). */
.sb-ed-transfer-click {
    cursor: pointer;
    transition: background 0.15s ease;
}

.sb-ed-transfer-click:hover { background: rgba(239, 244, 255, 0.6); }

/* História zmien a aktivít. */
.sb-ed-history {
    border: 1px solid rgba(197, 198, 205, 0.3);
}

.sb-ed-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(197, 198, 205, 0.2);
}

.sb-ed-history-head h2 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.01em;
    flex-wrap: wrap;
}

.sb-ed-history-head p {
    margin: 4px 0 0;
}

.sb-ed-history-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    background: var(--sb-surface-container-high);
    color: var(--sb-primary);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.sb-ed-history-filter {
    min-width: 200px;
}

.sb-ed-history-filter .mud-input {
    background: var(--sb-surface-container-low);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.sb-ed-history-list {
    display: flex;
    flex-direction: column;
}

/* Panel Zápasy na Prehľade udalosti - zoznam riadkov zápasov a pod ním tlačidlo Pridať zápas. */
.sb-ed-games .sb-rg-list { gap: 8px; }

.sb-ed-games-foot {
    display: flex;
    justify-content: flex-end;
}

.sb-ed-games-foot .sb-btn-pill { padding: 8px 18px 8px 14px; font-size: 13px; }

.sb-ed-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 8px;
    border-radius: 8px;
    border-top: 1px solid rgba(197, 198, 205, 0.2);
    transition: background 0.15s ease;
}

.sb-ed-history-row:first-child { border-top: none; }
.sb-ed-history-row:hover { background: rgba(239, 244, 255, 0.4); }

.sb-ed-history-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Text akcie sa zalomí na viac riadkov - orezanie na tri bodky by na úzkej obrazovke
   nechalo z popisu len pár znakov. Poznámky bez medzier lámu slovo. */
.sb-ed-history-main p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Úzka obrazovka: čas sa presunie pod text (zarovnaný pod neho, nie pod avatar). */
@media (max-width: 700px) {
    .sb-ed-history-row {
        flex-wrap: wrap;
        gap: 4px 16px;
    }

    .sb-ed-history-main { flex: 1 1 100%; }
    .sb-ed-history-time { margin-left: 36px; }
}

.sb-ed-history-author {
    font-weight: 600;
    color: var(--sb-primary);
}

.sb-ed-history-join { color: #059669; font-weight: 500; }
.sb-ed-history-deny { color: var(--sb-error); font-weight: 500; }

.sb-ed-avatar-xs { width: 28px; height: 28px; font-size: 11px; color: var(--sb-primary); }
.sb-ed-avatar-deny { background: rgba(186, 26, 26, 0.1); color: var(--sb-error); }

.sb-ed-history-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-ed-history-time .mud-icon-root {
    font-size: 15px;
    width: 15px;
    height: 15px;
    color: var(--sb-outline);
}

/* Súhrn účasti. */
.sb-ed-summary { display: flex; flex-direction: column; gap: 12px; }

.sb-ed-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-ed-summary-row span { display: inline-flex; align-items: center; gap: 8px; }
.sb-ed-summary-row strong { color: var(--sb-on-surface); }
.sb-ed-summary-row .sb-dot { width: 12px; height: 12px; }

.sb-ed-summary-bar {
    display: flex;
    height: 12px;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--sb-surface-container-high);
}

.sb-ed-hr {
    margin: 0;
    border: none;
    border-top: 1px solid rgba(197, 198, 205, 0.2);
}

.sb-ed-place {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
}

.sb-ed-place-name {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-ed-links { display: flex; flex-direction: column; gap: 8px; }

.sb-ed-links a,
.sb-ed-links button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
    color: var(--sb-on-surface);
    font-family: var(--sb-font);
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sb-ed-links a:hover,
.sb-ed-links button:hover { background: var(--sb-surface-container); }

.sb-ed-links a > span,
.sb-ed-links button > span { display: inline-flex; align-items: center; gap: 16px; }

/* ---------- Súťaže (design/Sutaze/sutaze.html) ---------- */

.sb-comp {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: var(--sb-font);
}

/* Hlavička: chip súťaže + sezóna nad titulkom, vpravo karta aktívneho filtra. */
.sb-comp-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-comp-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

.sb-comp-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(157, 67, 0, 0.1);
    color: var(--sb-secondary);
    text-transform: uppercase;
}

.sb-comp-head h1 {
    margin: 0;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-primary);
}

.sb-comp-head p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface-variant);
}

.sb-comp-active {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-comp-active-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: #ffdbca;
    color: var(--sb-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-comp-active span {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-comp-active p {
    margin: 0;
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: var(--sb-primary);
}

/* Tá istá informácia o filtri dvakrát: na mobile len chip nad titulkom, na širšej obrazovke len karta vpravo. */
.sb-comp-crumbs { display: none; }

@media (max-width: 700px) {
    .sb-comp-crumbs { display: flex; }
    .sb-comp-active { display: none; }
}

/* Filter: zbaliteľný panel - hlavička s tlačidlom, pod ňou prepínač režimu vľavo, akcie vpravo
   a dve polia (label vždy nad poľom). Stav auto = bez kliku: na mobile zbalený, inak rozbalený. */
.sb-comp-filter {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px 24px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-comp-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sb-comp-filter-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-comp-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: var(--sb-surface-container-low);
    color: var(--sb-on-surface-variant);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sb-comp-filter-toggle:hover {
    background: var(--sb-surface-container-high);
    color: var(--sb-primary);
}

.sb-comp-filter-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-comp-filter.collapsed { padding-bottom: 16px; }
.sb-comp-filter.collapsed .sb-comp-filter-body { display: none; }

.sb-comp-only-mobile { display: none; }

@media (max-width: 700px) {
    .sb-comp-filter.auto { padding-bottom: 16px; }
    .sb-comp-filter.auto .sb-comp-filter-body { display: none; }
    .sb-comp-only-mobile { display: inline-flex; }
    .sb-comp-only-wide { display: none; }
}

.sb-comp-filter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-comp-modes {
    border: none;
    background: var(--sb-surface-container-low);
}

.sb-comp-modes button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sb-comp-modes button .mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.sb-comp-modes button.active {
    background: var(--sb-surface-container-lowest);
    color: var(--sb-primary);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.08);
}

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

.sb-comp-btn-ghost {
    background: transparent;
    color: var(--sb-on-surface-variant);
}

.sb-comp-btn-ghost:hover {
    background: var(--sb-surface-container-high);
}

.sb-comp-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 700px) {
    .sb-comp-fields { grid-template-columns: 1fr; }
}

.sb-comp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sb-comp-field label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

.sb-comp-field .mud-input-control .mud-input {
    background: var(--sb-surface-container-low);
    border-radius: 12px;
}

.sb-comp-field .mud-input-outlined-border {
    border-color: rgba(197, 198, 205, 0.3);
}

/* Rýchly výber obdobia - pilulky, aktívna oranžová. */
.sb-comp-quick {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.sb-comp-quick > span {
    margin-right: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

.sb-comp-quick-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 9999px;
    background: var(--sb-surface-container);
    color: var(--sb-on-surface);
    font-family: var(--sb-font);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sb-comp-quick-btn:hover,
.sb-comp-quick-btn.active {
    background: var(--sb-secondary);
    color: var(--sb-on-secondary);
}

/* Záložky s oranžovým podčiarknutím, počet zápasov v pilulke, vpravo posledný zápas. */
.sb-comp-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-comp-tab-list {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-comp-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: none;
    background: none;
    font-family: var(--sb-font);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface-variant);
    cursor: pointer;
    transition: color 0.15s ease;
}

.sb-comp-tab:hover,
.sb-comp-tab.active {
    color: var(--sb-primary);
}

.sb-comp-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    border-radius: 9999px;
    background: var(--sb-secondary);
}

.sb-comp-tab-count {
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--sb-surface-container-high);
    color: var(--sb-on-surface-variant);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.sb-comp-tab:hover .sb-comp-tab-count,
.sb-comp-tab.active .sb-comp-tab-count {
    background: var(--sb-primary);
    color: var(--sb-on-primary);
}

.sb-comp-tab-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

@media (max-width: 700px) {
    .sb-comp-tab-note { display: none; }
}

/* Avatar hráča: iniciálky, fotka profilu navrchu ak existuje. */
.sb-comp-avatar {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--sb-surface-container-highest);
    color: var(--sb-on-surface-variant);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.sb-comp-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lišta nad tabuľkou: výber tabuľky (pilulky), hľadanie a export. */
.sb-comp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-comp-metrics {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.sb-comp-metrics > span {
    margin-right: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

.sb-comp-metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: none;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
    color: var(--sb-on-surface);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sb-comp-metric:hover { background: var(--sb-surface-container-high); }

.sb-comp-metric.active {
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.1);
}

.sb-comp-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-comp-search {
    width: 256px;
    max-width: 100%;
}

.sb-comp-search .mud-input-control .mud-input {
    background: var(--sb-surface-container-low);
    border-radius: 12px;
}

/* Biela karta a tabuľka poradia: posledný stĺpec (metrika) oranžovo podfarbený. */
.sb-comp-card {
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    overflow: hidden;
}

.sb-comp-card-title {
    margin: 0;
    padding: 16px 16px 8px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-primary);
}

.sb-comp-empty {
    margin: 0;
    padding: 32px 24px;
    text-align: center;
    font-size: 16px;
    color: var(--sb-on-surface-variant);
}

.sb-comp-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.sb-comp-table thead tr { background: var(--sb-surface-container-low); }

.sb-comp-table th {
    padding: 16px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-comp-table td {
    padding: 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
    vertical-align: middle;
}

.sb-comp-table tbody tr { transition: background 0.15s ease; }
.sb-comp-table tbody tr:hover { background: rgba(239, 244, 255, 0.6); }

.sb-comp-table .center { text-align: center; }
.sb-comp-table .strong { font-weight: 500; }
.sb-comp-table .muted { color: var(--sb-on-surface-variant); }
.sb-comp-table .mono { font-variant-numeric: tabular-nums; }

.sb-comp-col-rank {
    width: 64px;
    text-align: center;
}

.sb-comp-table .sb-comp-col-metric {
    padding-left: 24px;
    padding-right: 24px;
    text-align: right;
}

.sb-comp-table th.sb-comp-col-metric {
    background: rgba(157, 67, 0, 0.1);
    color: var(--sb-secondary);
    font-weight: 700;
}

.sb-comp-table td.sb-comp-col-metric { background: rgba(157, 67, 0, 0.05); }

.sb-comp-metric-value {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--sb-primary);
}

.sb-comp-metric-value.top { color: var(--sb-secondary); }

.sb-comp-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
}

.sb-comp-rank-1 {
    background: var(--sb-secondary);
    color: var(--sb-on-secondary);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.1);
}

.sb-comp-rank-2 {
    background: var(--sb-surface-container-high);
    color: var(--sb-primary);
}

.sb-comp-rank-3 {
    background: #ffdbca;
    color: var(--sb-secondary);
}

.sb-comp-rank-plain {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

.sb-comp-player {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.sb-comp-player-name {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--sb-primary);
}

.sb-comp-player-sub {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
}

/* Meno a forma vyplnia bunku vedľa avatara, aby forma mala k dispozícii celú šírku stĺpca. */
.sb-comp-player-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Forma hráča: 10 odznakov posledných zápasov (zelená výhra, červená prehra, modrá remíza, sivá nehral),
   najstarší vľavo, najnovší vpravo. Vždy jeden riadok bez zalomenia: keď sa nezmestia, pravý okraj
   (najnovšie zápasy) ostáva viditeľný a najstaršie odznaky sa odrežú vľavo. contain: inline-size
   zabezpečí, že odznaky nerozťahujú stĺpec tabuľky - inak by tabuľka na mobile len rolovala do šírky.
   Hrana orezania má gradientný prechod: ľavý padding (posunutý záporným marginom do medzery za avatarom,
   takže odznaky ostávajú zarovnané s menom) je vnútri orezávanej oblasti a maska ho prekrýva prechodom
   z priehľadnej do plnej. Kým sa odznaky zmestia, padding je prázdny a prechod nič neovplyvní; keď
   pretečú, odrezané odznaky sa v ňom plynulo strácajú. Maska nezávisí od farby pozadia riadku (hover). */
.sb-comp-form {
    --sb-form-fade: 16px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
    margin-left: calc(-1 * var(--sb-form-fade));
    padding-left: var(--sb-form-fade);
    overflow: hidden;
    contain: inline-size;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--sb-form-fade));
    mask-image: linear-gradient(to right, transparent, #000 var(--sb-form-fade));
}

/* Kým je miesta dosť, auto margin za posledným odznakom drží odznaky pri ľavom okraji; pri pretečení
   je auto margin nulový a flex-end zarovnanie prizakotví najnovší odznak k pravému okraju. */
.sb-comp-form-badge:last-child { margin-right: auto; }

.sb-comp-form-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 9999px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    color: #ffffff;
    background: var(--sb-outline);
    cursor: default;
}

.sb-comp-form-badge.win { background: #10b981; }
.sb-comp-form-badge.loss { background: var(--sb-error); }
.sb-comp-form-badge.draw { background: #0099d9; }
.sb-comp-form-badge.none { background: var(--sb-outline-variant); color: var(--sb-on-surface-variant); }

/* Na mobile avatar v tabuľke zaberá miesto - ostane len meno a forma. */
@media (max-width: 700px) {
    .sb-comp-table .sb-comp-avatar { display: none; }
    .sb-comp-table td { padding: 12px 8px; }
    /* Bez avatara je vľavo od mena len 8px padding bunky - prechod formy sa mu prispôsobí. */
    .sb-comp-table .sb-comp-form { --sb-form-fade: 8px; }
}

/* Záložka Zápasy: riadky ako panel Posledné zápasy na Prehľade (.sb-rg-*), v karte s odsadením. */
.sb-comp-card .sb-comp-games { padding: 16px; }

/* Poznámka k sezóne pod tabuľkou. */
.sb-comp-note {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-comp-note-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background: rgba(157, 67, 0, 0.1);
    color: var(--sb-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--sb-surface-container-high);
}

.sb-comp-note-label {
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-secondary);
}

.sb-comp-note h3 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-primary);
}

.sb-comp-note p {
    margin: 0;
    max-width: 42rem;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
    white-space: pre-line;
}

/* Záložka Spoluhráči a súperi: úvod, tri dlaždice "naj" a tabuľka spoločných zápasov. */
.sb-comp-mates-intro {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-comp-mates-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.sb-comp-mate-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-comp-mate-tile-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: rgba(157, 67, 0, 0.1);
    color: var(--sb-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-comp-mate-tile-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sb-comp-mate-tile-label {
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-secondary);
}

.sb-comp-mate-tile-name {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: var(--sb-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-comp-mate-tile-name.muted { color: var(--sb-on-surface-variant); }

.sb-comp-mate-tile-meta {
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
    font-variant-numeric: tabular-nums;
}

/* Bunka V jednom družstve / Proti sebe: počet, bilancia V-R-P a úspešnosť pod sebou. */
.sb-comp-mate-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 16px;
}

.sb-comp-mate-cell strong {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
}

.sb-comp-mate-cell .muted { font-size: 12px; }

.sb-comp-mate-rate {
    padding: 1px 8px;
    border-radius: 9999px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sb-comp-mate-rate.good { background: rgba(16, 185, 129, 0.12); color: #059669; }
.sb-comp-mate-rate.mid { background: rgba(0, 153, 217, 0.12); color: #004c6e; }
.sb-comp-mate-rate.bad { background: rgba(186, 26, 26, 0.1); color: var(--sb-error); }
.sb-comp-mate-rate.none { background: var(--sb-surface-container-low); color: var(--sb-on-surface-variant); }

.sb-comp-mates-more {
    padding: 8px 16px 16px;
    text-align: center;
}

.sb-comp-mates-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

@media (max-width: 700px) {
    .sb-comp-mates-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .sb-comp-mate-tile { padding: 12px; }
}

/* Pavúk play off: kolá vedľa seba, sloty ako svetlé karty. */
.sb-comp-bracket {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 24px;
    overflow-x: auto;
}

.sb-comp-round {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}

.sb-comp-round h4 {
    margin: 0 0 4px;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-comp-slot {
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--sb-surface-container-low);
}

.sb-comp-slot.clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

.sb-comp-slot.clickable:hover { background: var(--sb-surface-container-high); }

.sb-comp-slot-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
}

.sb-comp-slot-row strong { font-weight: 700; }

.sb-comp-slot-meta {
    margin-top: 4px;
    font-size: 11px;
    line-height: 14px;
    color: var(--sb-on-surface-variant);
}

/* ---------- Nová udalosť / úprava udalosti (design/Nova udalost/nova_udalost.html) ---------- */

.sb-ne {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: var(--sb-font);
}

/* Omrvinky (komponent SbCrumbs): šípka späť na nadradenú stránku + aktuálna stránka. */
.sb-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

.sb-crumbs a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.sb-crumbs a:hover { color: var(--sb-primary); }
.sb-crumbs .sep { color: var(--sb-outline-variant); }
.sb-crumbs .current { color: var(--sb-primary); }

/* Hlavička: titulok a podtitulok vľavo, akcie vpravo. */
.sb-ne-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.sb-ne-head h1 {
    margin: 0;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-primary);
}

.sb-ne-head p {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface-variant);
}

.sb-ne-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Tlačidlá-pilulky: svetlá (zrušiť), oranžová (uložiť), obrysové (zrušiť/obnoviť udalosť). */
.sb-ne-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

.sb-ne-btn:disabled { opacity: 0.5; cursor: default; }

.sb-ne-btn-light { background: var(--sb-surface-container-high); color: var(--sb-on-surface); }
.sb-ne-btn-light:hover:not(:disabled) { background: var(--sb-surface-container-highest); }

.sb-ne-btn-accent {
    padding-left: 32px;
    padding-right: 32px;
    background: var(--sb-secondary-container);
    color: var(--sb-on-secondary);
    box-shadow: 0 4px 6px -1px rgba(253, 118, 26, 0.3), 0 2px 4px -2px rgba(253, 118, 26, 0.3);
}

.sb-ne-btn-accent:hover:not(:disabled) { opacity: 0.92; }
.sb-ne-btn-accent:active:not(:disabled) { transform: scale(0.97); }

.sb-ne-btn-danger { color: var(--sb-error); box-shadow: inset 0 0 0 1px rgba(186, 26, 26, 0.4); }
.sb-ne-btn-danger:hover:not(:disabled) { background: #ffdad6; }
.sb-ne-btn-success { color: #059669; box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.4); }
.sb-ne-btn-success:hover:not(:disabled) { background: rgba(16, 185, 129, 0.1); }
.sb-ne-btn-info { color: #004c6e; box-shadow: inset 0 0 0 1px rgba(0, 76, 110, 0.4); }
.sb-ne-btn-info:hover:not(:disabled) { background: rgba(0, 76, 110, 0.12); }
/* Tlačidlá zmeny stavu v spodnej lište editu - na úzkej obrazovke sa zalomia. */
.sb-ne-footer-status { display: flex; flex-wrap: wrap; gap: 8px; }

/* Mriežka: formulár (2/3) + bočný panel s náhľadom (1/3). */
.sb-ne-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.sb-ne-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.sb-ne-side {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

@media (max-width: 1100px) {
    .sb-ne-grid { grid-template-columns: 1fr; }
    .sb-ne-side { position: static; }
}

/* Karta sekcie formulára. */
.sb-ne-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-ne-card-side { gap: 16px; }

.sb-ne-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sb-surface-container);
}

.sb-ne-card-head.plain {
    padding-bottom: 0;
    border-bottom: none;
}

.sb-ne-card-head h2,
.sb-ne-card-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-primary);
}

.sb-ne-card-head h2 .mud-icon-root,
.sb-ne-card-head h3 .mud-icon-root { color: var(--sb-secondary-container); }

.sb-ne-card-head .mud-switch { margin: 0; }

.sb-ne-card-note {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
}

.sb-ne-chip {
    padding: 4px 8px;
    border-radius: 9999px;
    background: var(--sb-surface-container);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(69, 71, 76, 0.8);
}

.sb-ne-desc {
    margin: -8px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

/* Polia formulára: dvojstĺpcová mriežka, popisok nad poľom. */
.sb-ne-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sb-ne-span2 { grid-column: span 2; }

.sb-ne-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 640px) {
    .sb-ne-fields { grid-template-columns: 1fr; }
    .sb-ne-span2 { grid-column: auto; }
}

.sb-ne-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sb-ne-field > label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface);
}

/* Validačná hláška pod poľom formulára udalosti (napr. kapacita pod počtom prihlásených). */
.sb-ne-field-error {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--sb-error);
}

/* MudBlazor vstupy v štýle návrhu: výplň surface-container-low bez rámu, navy rám pri fokuse
   (MudBlazor paleta má Primary oranžovú, preto sa rám prepisuje na --sb-primary). */
.sb-ne-field .mud-input-control .mud-input {
    background: var(--sb-surface-container-low);
    border-radius: 8px;
    font-family: var(--sb-font);
    transition: background 0.15s ease;
}

.sb-ne-field .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: transparent; }

.sb-ne-field .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
    border-color: rgba(197, 198, 205, 0.5);
}

.sb-ne-field .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-color: var(--sb-primary);
}

.sb-ne-field .mud-input-control .mud-input:focus-within { background: var(--sb-surface-container-lowest); }

.sb-ne-field .mud-input-adornment .mud-icon-root { color: rgba(69, 71, 76, 0.6); }
.sb-ne-field-accent .mud-input-adornment .mud-icon-root { color: var(--sb-secondary-container); }

.sb-ne-field .mud-input-adornment-text {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

/* Účasť: riadok s prepínačom kapacity + blok s číslom a vysvetlivkou. */
.sb-ne-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
}

.sb-ne-toggle .mud-switch { margin: 0; }

.sb-ne-toggle-text {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.sb-ne-toggle-text > .mud-icon-root {
    flex-shrink: 0;
    margin-top: 4px;
    color: var(--sb-primary);
}

.sb-ne-toggle-text strong {
    display: block;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-ne-toggle-text span {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-ne-capacity {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 16px;
    align-items: center;
    padding-left: 8px;
    transition: opacity 0.2s ease;
}

.sb-ne-capacity.disabled {
    opacity: 0.4;
    pointer-events: none;
}

@media (max-width: 640px) {
    .sb-ne-capacity { grid-template-columns: 1fr; }
}

.sb-ne-capacity .mud-input-control .mud-input input {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}

.sb-ne-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-radius: 8px;
    background: rgba(229, 238, 255, 0.6);
}

.sb-ne-info > .mud-icon-root {
    flex-shrink: 0;
    color: var(--sb-secondary);
}

.sb-ne-info p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-ne-info strong {
    font-weight: 700;
    color: var(--sb-on-surface);
}

/* Opakovanie: dni v týždni ako štvorcové chipy, súhrn v modrom bloku. */
.sb-ne-days {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sb-ne-day {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: var(--sb-surface-container-low);
    color: var(--sb-on-surface);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sb-ne-day:hover { background: var(--sb-surface-container); }

.sb-ne-day.active {
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.1);
}

.sb-ne-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(220, 233, 255, 0.6);
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
}

.sb-ne-summary > .mud-icon-root {
    flex-shrink: 0;
    color: var(--sb-secondary-container);
}

.sb-ne-summary strong {
    margin-right: 4px;
    font-weight: 600;
    color: var(--sb-primary);
}

.sb-ne-summary b {
    font-weight: 700;
    color: var(--sb-secondary);
}

/* Živý náhľad karty udalosti (ako ju uvidia hráči). */
.sb-ne-preview-label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-ne-pulse {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: var(--sb-secondary-container);
    animation: sb-ne-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes sb-ne-pulse {
    50% { opacity: 0.4; }
}

.sb-ne-preview {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
}

.sb-ne-preview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sb-ne-preview-type {
    padding: 4px 8px;
    border-radius: 9999px;
    background: var(--sb-secondary-container);
    color: var(--sb-on-secondary);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sb-ne-preview-repeat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
}

.sb-ne-preview h3 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sb-primary);
    overflow-wrap: anywhere;
}

.sb-ne-preview h3.placeholder {
    font-weight: 500;
    color: var(--sb-outline);
}

.sb-ne-preview-place {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
    overflow-wrap: anywhere;
}

.sb-ne-preview-place .mud-icon-root {
    flex-shrink: 0;
    color: var(--sb-secondary-container);
}

.sb-ne-preview-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--sb-surface-container-highest);
}

.sb-ne-preview-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-ne-preview-time .mud-icon-root { color: var(--sb-primary); }

.sb-ne-preview-cap {
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(255, 219, 202, 0.5);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--sb-secondary);
}

.sb-ne-preview-note {
    padding: 8px;
    border-radius: 8px;
    background: var(--sb-surface-container);
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

/* Tipy pre plánovanie + mini karta miesta konania. */
.sb-ne-tips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-ne-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-ne-tip strong {
    font-weight: 700;
    color: var(--sb-on-surface);
}

.sb-ne-tip-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    border-radius: 9999px;
    background: var(--sb-surface-container-high);
    font-size: 12px;
    font-weight: 700;
    color: var(--sb-primary);
}

.sb-ne-venue {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
}

.sb-ne-venue-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--sb-primary-container);
    color: var(--sb-on-primary-container);
    font-size: 20px;
    font-weight: 700;
}

.sb-ne-venue-text { min-width: 0; }

.sb-ne-venue-text strong,
.sb-ne-venue-text span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-ne-venue-text strong {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-primary);
}

.sb-ne-venue-text span {
    font-size: 11px;
    line-height: 14px;
    color: var(--sb-on-surface-variant);
}

/* Spodná lišta akcií prilepená k spodku okna. */
.sb-ne-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 16px 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-ne-footer-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

/* ---------- Prehľad: najbližšia udalosť so zadaním účasti (Team_board_v2) ---------- */

.sb-ov-top {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 32px;
    align-items: stretch;
}

@media (max-width: 1200px) {
    .sb-ov-top { grid-template-columns: 1fr; }
}

.sb-ov-top-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-ov-top-side .sb-stat { flex: 1; }

.sb-nx {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(197, 198, 205, 0.2);
}

.sb-nx-body {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 24px;
}

.sb-nx-main {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-nx-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    padding: 4px 8px;
    border-radius: 9999px;
    background: rgba(157, 67, 0, 0.1);
    color: var(--sb-secondary);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sb-nx-chip .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }

.sb-nx-main h2 {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.sb-nx-main h2 a {
    color: var(--sb-on-surface);
    text-decoration: none;
    transition: color 0.15s ease;
}

.sb-nx-main h2 a:hover { color: var(--sb-secondary); }

.sb-nx-main p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-nx-joined {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sb-nx-joined .sb-ov-label { margin: 0; }
.sb-nx-joined .sb-avatars { margin: 0; }
.sb-nx-joined .sb-avatars > * {
    width: 48px;
    height: 48px;
    margin-left: -14px;
    border-width: 3px;
    border-color: var(--sb-surface-container);
    font-size: 14px;
}

.sb-nx-joined .sb-avatars > *:first-child { margin-left: 0; }

/* Pravý info box: dátum, čas, miesto, kapacita. */
.sb-nx-info {
    flex: 0 1 280px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(197, 198, 205, 0.2);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
}

.sb-nx-info > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-nx-info .strong { font-weight: 600; }

.sb-nx-ico {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(157, 67, 0, 0.1);
    color: var(--sb-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-nx-ico .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }
.sb-nx-ico-navy { background: rgba(9, 20, 38, 0.1); color: var(--sb-primary); }

/* Panel vlastnej účasti (komponent RsvpPanel) - Prehľad tímu aj detail udalosti. Bez odpovede:
   poznámka + tri okrúhle tlačidlá v jednom riadku. Obal dodáva stránka: .sb-nx-rsvp (spodok
   panelu udalosti na Prehľade) alebo .sb-ed-rsvp (karta v detaile udalosti). */
.sb-rsvp {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sb-nx-rsvp {
    padding: 16px 24px;
    border-top: 1px solid rgba(197, 198, 205, 0.2);
    background: var(--sb-surface-container-lowest);
}

.sb-rsvp-note { flex: 1; }

.sb-rsvp-note .mud-input {
    background: var(--sb-surface-container-low);
    border-radius: 12px;
}

.sb-rsvp-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Na širokej obrazovke sú tlačidlá len ikonové - popis nesie text stavu vedľa nich. */
.sb-rsvp-btn-label { display: none; }

/* Úzka obrazovka: poznámka je vo vlastnom riadku nad tlačidlami a tlačidlá majú aj text.
   Stav účasti je vtedy zrejmý z vyplneného tlačidla, samostatný popis by riadok len tlačil. */
@media (max-width: 700px) {
    .sb-rsvp {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .sb-nx-rsvp { padding: 16px; }

    .sb-rsvp-buttons {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .sb-rsvp-answer { display: none; }

    .sb-rsvp-btn {
        flex: 1 1 96px;
        width: auto;
        gap: 6px;
        padding: 0 12px;
    }

    .sb-rsvp-btn-label {
        display: inline;
        font-size: 12px;
        line-height: 16px;
        font-weight: 600;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }
}

.sb-rsvp-btn {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(197, 198, 205, 0.6);
    border-radius: 9999px;
    background: var(--sb-surface-container-lowest);
    color: var(--sb-on-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.sb-rsvp-btn .mud-icon-root { font-size: 20px; width: 20px; height: 20px; }
.sb-rsvp-btn:active { transform: scale(0.95); }
.sb-rsvp-btn:disabled { cursor: default; opacity: 0.6; }

/* Neaktívne: biele s farebným rámikom a ikonou; aktívne: vyplnené farbou, biela ikona a svetelný kruh. */
.sb-rsvp-btn-join { border-color: #10b981; color: #047857; }
.sb-rsvp-btn-join:hover { background: rgba(16, 185, 129, 0.15); }
.sb-rsvp-btn-join.active { background: #10b981; border-color: #10b981; color: #ffffff; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25); }
.sb-rsvp-btn-deny { border-color: var(--sb-error); color: #93000a; }
.sb-rsvp-btn-deny:hover { background: #ffdad6; }
.sb-rsvp-btn-deny.active { background: var(--sb-error); border-color: var(--sb-error); color: #ffffff; box-shadow: 0 0 0 4px rgba(186, 26, 26, 0.25); }
.sb-rsvp-btn-substitute { border-color: #0099d9; color: #004c6e; }
.sb-rsvp-btn-substitute:hover { background: rgba(0, 153, 217, 0.15); }
.sb-rsvp-btn-substitute.active { background: #0099d9; border-color: #0099d9; color: #ffffff; box-shadow: 0 0 0 4px rgba(0, 153, 217, 0.25); }
.sb-rsvp-btn-dontknow { border-color: rgba(9, 20, 38, 0.35); color: var(--sb-primary); }
.sb-rsvp-btn-dontknow:hover { background: var(--sb-surface-container-high); }
.sb-rsvp-btn-dontknow.active { background: var(--sb-primary); border-color: var(--sb-primary); color: #ffffff; box-shadow: 0 0 0 4px rgba(9, 20, 38, 0.2); }

/* Už zadaná účasť: uložená poznámka nad stavovým tlačidlom. Tlačidlo je pilulka vo farbe
   odpovede a otvára dialóg zmeny - na širokej obrazovke široké podľa obsahu, na úzkej na celú
   šírku, aby bolo prvým cieľom prsta. */
.sb-rsvp-done {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.sb-rsvp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 200px;
    max-width: 100%;
    padding: 10px 20px;
    border: none;
    border-radius: 9999px;
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.1);
    transition: filter 0.15s ease, transform 0.1s ease;
}

.sb-rsvp-badge:hover { filter: brightness(1.08); }
.sb-rsvp-badge:active { transform: scale(0.98); }
.sb-rsvp-badge:disabled { cursor: default; opacity: 0.6; }
.sb-rsvp-badge .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }
.sb-rsvp-badge .sb-rsvp-badge-edit { opacity: 0.7; }

.sb-rsvp-badge-join { background: #10b981; }
.sb-rsvp-badge-deny { background: var(--sb-error); }
.sb-rsvp-badge-substitute { background: #0099d9; }
.sb-rsvp-badge-dontknow { background: var(--sb-primary); }

/* Poznámka k účasti - jeden riadok, dlhší text sa oreže (celý je v tooltipe). */
.sb-rsvp-my-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-rsvp-my-note .mud-icon-root { font-size: 18px; width: 18px; height: 18px; flex-shrink: 0; }

.sb-rsvp-my-note span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .sb-rsvp-done { align-items: stretch; gap: 8px; }
    .sb-rsvp-badge { width: 100%; padding: 12px 20px; font-size: 13px; }
}

/* V dialógu majú tlačidlá vždy aj text a delia si šírku rovnakým dielom. */
.sb-rsvp-buttons-dialog { flex-wrap: wrap; }
.sb-rsvp-buttons-dialog .sb-rsvp-btn { flex: 1 1 96px; width: auto; gap: 6px; padding: 0 12px; }

.sb-rsvp-buttons-dialog .sb-rsvp-btn-label {
    display: inline;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Popis "Bez odpovede" pred tlačidlami odpovedí (komponent RsvpPanel). */
.sb-rsvp-answer {
    margin-right: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

/* Pätička: diskusia vľavo, detail vpravo. */
.sb-nx-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 24px;
    border-top: 1px solid rgba(197, 198, 205, 0.2);
    background: rgba(239, 244, 255, 0.5);
}

.sb-nx-foot a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: var(--sb-on-surface-variant);
    transition: color 0.15s ease, background 0.15s ease;
}

.sb-nx-foot a:first-child { text-transform: uppercase; }
.sb-nx-foot a:last-child { color: var(--sb-primary); }
.sb-nx-foot a:hover { color: var(--sb-secondary); background: var(--sb-surface-container-high); }
.sb-nx-foot a .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }

/* ---------- Prehľad: posledné zápasy ako zoznam (Team_board_v2) ---------- */

.sb-rg {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(197, 198, 205, 0.2);
    overflow: hidden;
}

.sb-rg-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.sb-rg-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-rg-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-rg-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(9, 20, 38, 0.1);
    color: var(--sb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-rg-ico .mud-icon-root { font-size: 20px; width: 20px; height: 20px; }

.sb-rg-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}

.sb-rg-link:hover { color: var(--sb-secondary); background: var(--sb-surface-container-high); }
.sb-rg-link .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }

.sb-rg-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-rg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(197, 198, 205, 0.2);
    background: var(--sb-surface-container-lowest);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.sb-rg-row:hover { border-color: rgba(197, 198, 205, 0.5); }

.sb-rg-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1 1 260px;
}

/* Výsledok z pohľadu člena: V zelené, R oranžové, P červené, bez účasti sivé, LIVE navy. */
.sb-rg-result {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.sb-rg-result.win { background: rgba(16, 185, 129, 0.15); color: #059669; border-color: rgba(16, 185, 129, 0.3); }
.sb-rg-result.draw { background: rgba(157, 67, 0, 0.15); color: var(--sb-secondary); border-color: rgba(157, 67, 0, 0.3); }
.sb-rg-result.loss { background: rgba(186, 26, 26, 0.15); color: var(--sb-error); border-color: rgba(186, 26, 26, 0.3); }
.sb-rg-result.none { background: var(--sb-surface-container-low); color: var(--sb-on-surface-variant); border-color: rgba(197, 198, 205, 0.3); }
.sb-rg-result.live { background: rgba(9, 20, 38, 0.1); color: var(--sb-primary); border-color: rgba(9, 20, 38, 0.2); }

.sb-rg-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-rg-score {
    padding: 4px 8px;
    border-radius: 9999px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    background: var(--sb-surface-container-high);
    color: var(--sb-on-surface-variant);
}

.sb-rg-score.win { background: rgba(16, 185, 129, 0.1); color: #059669; }
.sb-rg-score.draw { background: rgba(157, 67, 0, 0.1); color: var(--sb-secondary); }
.sb-rg-score.loss { background: #ffdad6; color: var(--sb-error); }

.sb-rg-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-rg-meta .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }
.sb-rg-dot { padding: 0 2px; }

.sb-rg-side {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.sb-rg-points {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 16px;
    border-radius: 12px;
    border: 1px solid rgba(197, 198, 205, 0.2);
    background: var(--sb-surface-container);
}

.sb-rg-points .mud-icon-root { font-size: 18px; width: 18px; height: 18px; color: var(--sb-secondary); }

.sb-rg-points > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.sb-rg-points strong {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface);
}

.sb-rg-points span {
    font-size: 11px;
    line-height: 14px;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-rg-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 16px;
    border-radius: 9999px;
    border: 1px solid rgba(197, 198, 205, 0.3);
    background: rgba(211, 228, 254, 0.5);
    color: var(--sb-on-surface-variant);
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.sb-rg-pill.played {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.3);
}

.sb-rg-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 24px;
    border-top: 1px solid rgba(197, 198, 205, 0.2);
    background: rgba(239, 244, 255, 0.5);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

.sb-rg-foot span { display: inline-flex; align-items: center; gap: 6px; }
.sb-rg-foot strong { font-weight: 700; }
.sb-rg-foot .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }

/* ---------- Prehľad: čerstvý oznam z nástenky (vlastný panel na celú šírku) ---------- */

.sb-ann {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 16px;
    border: 1px solid rgba(253, 118, 26, 0.25);
    border-left: 4px solid var(--sb-secondary-container);
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    font-family: var(--sb-font);
}

.sb-ann-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(157, 67, 0, 0.1);
    color: var(--sb-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-ann-ico .mud-icon-root { font-size: 22px; width: 22px; height: 22px; }

.sb-ann-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-ann-message {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sb-ann-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sb-on-surface-variant);
}

.sb-ann-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sb-on-surface);
}

.sb-ann-avatar {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--sb-surface-container-highest);
    color: var(--sb-primary-container);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.sb-ann-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sb-ann-time,
.sb-ann-comments {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
    text-decoration: none;
}

.sb-ann-comments:hover { color: var(--sb-secondary); }

.sb-ann-time .mud-icon-root,
.sb-ann-comments .mud-icon-root { font-size: 15px; width: 15px; height: 15px; }

/* ---------- Detail zápasu (rozloženie ako Detail udalosti, sb-ed-*) ---------- */

/* Stav zápasu v chipe hlavičky - farby zhodné so stĺpcom Stav v Súťažiach (sb-status-*). */
.sb-gd-chip-planned { background: rgba(0, 153, 217, 0.12); color: #004c6e; }
.sb-gd-chip-ongoing { background: #ffdad6; color: #93000a; }
.sb-gd-chip-completed { background: rgba(16, 185, 129, 0.1); color: #059669; }
.sb-gd-chip-canceled { background: var(--sb-surface-container-highest); color: var(--sb-on-surface-variant); }
.sb-gd-chip-hidden { background: var(--sb-surface-container-highest); color: var(--sb-on-surface-variant); }

.sb-gd-chip-ongoing .sb-gd-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 9999px;
    background: var(--sb-error);
    vertical-align: middle;
    animation: sb-gd-pulse 1.4s ease-in-out infinite;
}

@keyframes sb-gd-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(186, 26, 26, 0.45); }
    50% { box-shadow: 0 0 0 6px rgba(186, 26, 26, 0); }
}

/* Horný riadok detailu zápasu: omrvinky vľavo, chronologické prechádzanie zápasmi vpravo. */
.sb-gd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
}

.sb-gd-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.sb-gd-pager-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 6px 12px;
    border-radius: 12px;
    background: var(--sb-surface-container-high);
    color: var(--sb-on-surface);
    text-decoration: none;
    transition: background 0.15s ease;
}

.sb-gd-pager-btn:hover { background: var(--sb-surface-container-highest); color: var(--sb-on-surface); }
.sb-gd-pager-btn.disabled { opacity: 0.45; pointer-events: none; }
.sb-gd-pager-btn.next .sb-gd-pager-text { text-align: right; }

.sb-gd-pager-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sb-gd-pager-text small {
    font-size: 10px;
    line-height: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sb-on-surface-variant);
}

.sb-gd-pager-text strong {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .sb-gd-pager { width: 100%; margin-left: 0; justify-content: space-between; }
    .sb-gd-pager-btn { max-width: 48%; }
}

.sb-gd-meta {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

/* Spustiť / Ukončiť zápas - farebné varianty tlačidla hlavičky. */
.sb-gd-btn-start { background: #059669; color: #ffffff; box-shadow: 0 1px 2px rgba(9, 20, 38, 0.1); }
.sb-gd-btn-start:hover { background: #047857; color: #ffffff; }
.sb-gd-btn-end { background: var(--sb-error); color: #ffffff; box-shadow: 0 1px 2px rgba(9, 20, 38, 0.1); }
.sb-gd-btn-end:hover { background: #93000a; color: #ffffff; }
.sb-gd-btn-delete, .sb-gd-btn-delete:hover { color: var(--sb-error); }
.sb-ed-btn:disabled { opacity: 0.6; cursor: default; }

/* Výsledková tabuľa: navy plocha s diagonálnym pretlačom ako uvítací banner Prehľadu. */
.sb-gd-board {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    border-radius: 16px;
    background: linear-gradient(120deg, var(--sb-primary), var(--sb-primary-container) 65%, var(--sb-inverse-surface));
    color: var(--sb-on-primary);
    overflow: hidden;
}

.sb-gd-board::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 45%;
    height: 180%;
    background: rgba(255, 255, 255, 0.04);
    transform: rotate(18deg);
    pointer-events: none;
}

.sb-gd-board.live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 1px solid rgba(253, 118, 26, 0.5);
    pointer-events: none;
}

.sb-gd-team {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-align: center;
}

.sb-gd-team-badge {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--sb-on-primary);
}

.sb-gd-team-name {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Zápis gólu pri družstve - oranžové tlačidlo v štýle CTA. */
.sb-gd-goal-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px 6px 10px;
    border: none;
    border-radius: 9999px;
    background: var(--sb-secondary-container);
    color: var(--sb-on-secondary);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.2);
    transition: background 0.15s ease, transform 0.15s ease;
}

.sb-gd-goal-btn .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }
.sb-gd-goal-btn:hover { background: #ff8a3d; transform: translateY(-1px); }
.sb-gd-goal-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.sb-gd-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
}

.sb-gd-score {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-size: 56px;
    line-height: 64px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.sb-gd-score .sep { color: var(--sb-secondary-container); font-weight: 700; }

.sb-gd-center-note {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-primary-container);
}

/* Časomiera (komponent MatchClock) vnútri tabule. */
.sb-gd-clock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.sb-gd-clock-time {
    border: none;
    background: none;
    padding: 0;
    font-family: var(--sb-font);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sb-on-primary);
    cursor: pointer;
}

.sb-gd-clock-time:disabled { cursor: default; }
.sb-gd-clock.paused .sb-gd-clock-time { color: var(--sb-secondary-container); }

.sb-gd-clock-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 9999px;
    background: var(--sb-on-primary);
    color: var(--sb-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sb-gd-clock-btn .mud-icon-root { font-size: 20px; width: 20px; height: 20px; }
.sb-gd-clock-btn:hover { background: var(--sb-surface-container-highest); }
.sb-gd-clock-btn:disabled { opacity: 0.6; cursor: default; }

.sb-gd-clock-state {
    padding-right: 6px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-primary-container);
}

.sb-gd-clock.paused .sb-gd-clock-state { color: var(--sb-secondary-container); }

/* Náhľad času v dialógu opravy odohraného času. */
.sb-gd-clock-preview {
    text-align: center;
    font-size: 40px;
    line-height: 48px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--sb-primary);
}

/* Mimo tabule (svetlé pozadie) sa časomiera prefarbí do navy. */
.sb-ed-card .sb-gd-clock { background: var(--sb-surface-container-low); border-color: rgba(197, 198, 205, 0.4); }
.sb-ed-card .sb-gd-clock-time { color: var(--sb-primary); }

@media (max-width: 760px) {
    .sb-gd-board {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "home away" "center center";
        padding: 20px;
    }

    .sb-gd-team { grid-area: home; }
    .sb-gd-team.away { grid-area: away; }
    .sb-gd-center { grid-area: center; }
    .sb-gd-score { font-size: 44px; line-height: 52px; }
}

/* Zostavy: dve kolóny, hostia zarovnaní doprava. */
.sb-gd-lineups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 640px) {
    .sb-gd-lineups { grid-template-columns: 1fr; }
}

.sb-gd-lineup h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-gd-lineup.away h3 { flex-direction: row-reverse; }

.sb-gd-players {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sb-gd-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--sb-surface-container-low);
}

.sb-gd-lineup.away .sb-gd-player { flex-direction: row-reverse; text-align: right; }

.sb-gd-jersey {
    flex-shrink: 0;
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sb-gd-player-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Góly+asistencie hráča v zápase. */
.sb-gd-ga {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--sb-surface-container-highest);
    color: var(--sb-on-surface-variant);
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Časová os gólov: strelec na strane družstva, v strede minúta, bodka a priebežné skóre. */
.sb-gd-timeline {
    display: flex;
    flex-direction: column;
}

.sb-gd-tl-head,
.sb-gd-tl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
    align-items: center;
}

.sb-gd-tl-head span {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
    padding: 0 8px 8px;
}

.sb-gd-tl-head span:first-child { text-align: right; }

.sb-gd-tl-row {
    position: relative;
    padding: 8px 0;
    border-radius: 12px;
    transition: background 0.15s ease;
}

.sb-gd-tl-row.clickable { cursor: pointer; }
.sb-gd-tl-row.clickable:hover { background: var(--sb-surface-container-low); }

.sb-gd-tl-mid {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    justify-content: center;
    padding: 4px 0;
}

/* Zvislá čiara osi prechádza cez stredný stĺpec všetkých riadkov. */
.sb-gd-tl-mid::before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--sb-surface-container-highest);
}

/* Čiara začína v strede prvého a končí v strede posledného gólu (pred prvým riadkom je hlavička). */
.sb-gd-tl-head + .sb-gd-tl-row .sb-gd-tl-mid::before { top: 50%; }
.sb-gd-tl-row:last-child .sb-gd-tl-mid::before { bottom: 50%; }

.sb-gd-tl-mid .min {
    position: relative;
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    color: var(--sb-on-surface-variant);
    background: var(--sb-surface-container-lowest);
    padding: 0 4px;
}

.sb-gd-tl-mid .dot {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background: var(--sb-secondary-container);
    border: 2px solid var(--sb-surface-container-lowest);
    box-shadow: 0 0 0 2px var(--sb-secondary-container);
}

.sb-gd-tl-mid strong {
    position: relative;
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sb-on-surface);
    background: var(--sb-surface-container-lowest);
    padding: 0 4px;
}

.sb-gd-tl-side { min-width: 0; }

.sb-gd-tl-scorer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--sb-surface-container-low);
}

.sb-gd-tl-row.home .sb-gd-tl-scorer {
    flex-direction: row-reverse;
    text-align: right;
    margin-left: auto;
}

.sb-gd-tl-row.away .sb-gd-tl-scorer { margin-right: auto; }

.sb-gd-tl-scorer > .mud-icon-root {
    flex-shrink: 0;
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--sb-primary);
}

.sb-gd-tl-scorer > div { min-width: 0; display: flex; flex-direction: column; }

.sb-gd-tl-scorer strong {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-gd-tl-scorer span {
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

.sb-gd-tl-del {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--sb-on-surface-variant);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.sb-gd-tl-del .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }
.sb-gd-tl-row:hover .sb-gd-tl-del { opacity: 1; }
.sb-gd-tl-del:hover { color: var(--sb-error); background: #ffdad6; }

.sb-gd-tl-team { display: none; }

/* Mobil: os v jednom stĺpci - minúta a skóre vľavo, strelec vpravo, družstvo v riadku gólu. */
@media (max-width: 640px) {
    .sb-gd-tl-head { display: none; }
    .sb-gd-tl-row { grid-template-columns: 64px minmax(0, 1fr); }
    .sb-gd-tl-side.empty { display: none; }
    .sb-gd-tl-mid { grid-column: 1; grid-row: 1; }
    .sb-gd-tl-side { grid-column: 2; grid-row: 1; }
    .sb-gd-tl-row.home .sb-gd-tl-scorer { flex-direction: row; text-align: left; margin-left: 0; }
    .sb-gd-tl-row.home .sb-gd-tl-scorer { border-left: 3px solid var(--sb-primary); }
    .sb-gd-tl-row.away .sb-gd-tl-scorer { border-left: 3px solid var(--sb-tertiary-accent); }

    .sb-gd-tl-team {
        display: block;
        font-style: normal;
        font-size: 11px;
        line-height: 14px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--sb-on-surface-variant);
    }
}

.sb-gd-tl-missing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border-radius: 12px;
    border: 1px dashed var(--sb-outline-variant);
    text-align: center;
}

/* Informácie o zápase a štatistika v bočnom stĺpci. */
.sb-gd-facts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-gd-facts .sb-ed-label { margin-bottom: 2px; }

.sb-gd-facts strong {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

/* Editor zostavy: predvyplnenie zo súpisiek, hľadanie a riadky člen + prepínač družstva. */
.sb-gd-le-fill {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sb-gd-le-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.sb-gd-le-group h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-gd-le-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 10px;
}

.sb-gd-le-row:hover { background: var(--sb-surface-container-low); }

.sb-gd-le-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-gd-le-seg { flex-shrink: 0; }
.sb-gd-le-seg button { padding: 6px 12px; }

/* ---------- Nástenka (podstránka Prehľadu; karty ako oznam na Prehľade + diskusia ako v Detaile udalosti) ---------- */

.sb-bd {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: var(--sb-font);
}

.sb-bd-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-bd-head h1 {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-primary);
}

.sb-bd-head p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface-variant);
}

/* Nový oznam: karta s textovým poľom, prepínačom e-mailu a tmavým tlačidlom. */
.sb-bd-compose { gap: 16px; }

.sb-bd-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid rgba(197, 198, 205, 0.4);
    border-radius: 12px;
    background: var(--sb-surface-container-low);
    color: var(--sb-on-surface);
    font-family: var(--sb-font);
    font-size: 16px;
    line-height: 24px;
    resize: vertical;
}

.sb-bd-textarea:focus {
    outline: none;
    border-color: var(--sb-primary);
}

.sb-bd-compose-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-bd-compose-foot .mud-switch { margin: 0; }

.sb-bd-compose-foot .sb-btn-pill:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

/* Zoznam položiek. */
.sb-bd-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sb-bd-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 16px;
    border: 1px solid rgba(197, 198, 205, 0.4);
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Oznam má rovnaký oranžový ľavý pruh ako na Prehľade (.sb-ann). */
.sb-bd-item-ann {
    border-color: rgba(253, 118, 26, 0.25);
    border-left: 4px solid var(--sb-secondary-container);
}

/* Zvýraznená položka z Prehľadu (?item=): oranžový prstenec, ktorý sa po chvíli stlmí. */
.sb-bd-item-hi {
    border-color: var(--sb-secondary-container);
    box-shadow: 0 0 0 3px rgba(253, 118, 26, 0.25), 0 8px 24px -8px rgba(157, 67, 0, 0.35);
    animation: sb-bd-pulse 1.6s ease-out 1;
}

@keyframes sb-bd-pulse {
    0% { box-shadow: 0 0 0 0 rgba(253, 118, 26, 0.6); }
    100% { box-shadow: 0 0 0 3px rgba(253, 118, 26, 0.25), 0 8px 24px -8px rgba(157, 67, 0, 0.35); }
}

.sb-bd-item > .sb-feed-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.sb-bd-item > .sb-feed-icon .mud-icon-root { font-size: 22px; width: 22px; height: 22px; }

.sb-bd-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-bd-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sb-on-surface-variant);
}

.sb-bd-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sb-on-surface);
}

.sb-bd-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-weight: 500;
    white-space: nowrap;
}

.sb-bd-time .mud-icon-root { font-size: 15px; width: 15px; height: 15px; }

.sb-bd-message {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Odkaz na udalosť pri položkách "pridal(a)/upravil(a) udalosť". */
.sb-bd-event {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    background: var(--sb-surface-container);
    color: var(--sb-primary);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: background 0.15s ease;
}

.sb-bd-event:hover { background: var(--sb-surface-container-high); }
.sb-bd-event .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }

/* S načítanou udalosťou je odkaz karta: ikona, názov + dátum konania, šípka. */
.sb-bd-event-card {
    align-self: stretch;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
    border: 1px solid rgba(197, 198, 205, 0.3);
    text-transform: none;
    letter-spacing: 0;
}

.sb-bd-event-card:hover {
    background: var(--sb-surface-container);
    border-color: rgba(197, 198, 205, 0.6);
}

.sb-bd-event-card > .mud-icon-root:first-child {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 10px;
    background: rgba(9, 20, 38, 0.08);
}

.sb-bd-event-card > .mud-icon-root:last-child { margin-left: auto; color: var(--sb-on-surface-variant); }

.sb-bd-event-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sb-bd-event-text strong {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-bd-event-text span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
}

.sb-bd-event-text span .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }

.sb-bd-event-card.canceled strong { text-decoration: line-through; color: var(--sb-on-surface-variant); }

.sb-bd-item-foot {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Prepínač komentárov: textové tlačidlo, otvorené v navy. */
.sb-bd-comments-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: -8px;
    padding: 6px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--sb-on-surface-variant);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sb-bd-comments-btn:hover {
    background: var(--sb-surface-container);
    color: var(--sb-on-surface);
}

.sb-bd-comments-btn.open { color: var(--sb-primary); }
.sb-bd-comments-btn .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }

/* Rozbalené komentáre: správy + pole na nový komentár (prvky sb-ed-* z Detailu udalosti). */
.sb-bd-comments {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(197, 198, 205, 0.3);
}

.sb-bd-more {
    display: flex;
    justify-content: center;
}

/* Akcie admina pri ozname (upraviť / zmazať) - malé okrúhle ikonové tlačidlá vpravo v hlavičke. */
.sb-bd-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: -6px -8px -6px 0;
}

.sb-bd-action {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--sb-on-surface-variant);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sb-bd-action .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }

.sb-bd-action:hover {
    background: var(--sb-surface-container);
    color: var(--sb-primary);
}

.sb-bd-action-danger:hover {
    background: rgba(186, 26, 26, 0.08);
    color: var(--sb-error);
}

/* Inline úprava oznamu. */
.sb-bd-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-bd-edit-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.sb-bd-edit-foot .sb-btn-pill:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

/* Vlákno komentára: koreň, tlačidlo Odpovedať a odsadené odpovede s ľavou linkou. */
.sb-bd-thread {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sb-bd-thread-foot {
    display: flex;
    padding-left: 56px;
}

.sb-bd-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: -8px;
    padding: 4px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--sb-on-surface-variant);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sb-bd-reply-btn:hover {
    background: var(--sb-surface-container);
    color: var(--sb-on-surface);
}

.sb-bd-reply-btn.open { color: var(--sb-primary); }
.sb-bd-reply-btn .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }

.sb-bd-replies {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 40px;
    padding-left: 16px;
    border-left: 2px solid var(--sb-surface-container-highest);
}

.sb-bd-reply { padding: 12px; }

.sb-bd-reply .sb-ed-avatar { width: 28px; height: 28px; font-size: 11px; }

.sb-bd-reply-composer textarea {
    padding: 12px 60px 12px 12px;
    font-size: 14px;
    line-height: 20px;
}

.sb-bd-reply-composer .sb-ed-send { right: 8px; bottom: 8px; width: 32px; height: 32px; }

@media (max-width: 700px) {
    .sb-bd-thread-foot { padding-left: 44px; }
    .sb-bd-replies { margin-left: 16px; padding-left: 12px; }
}

/* Diskusia na detaile udalosti používa väčší avatar (40px), preto sa odpovede a tlačidlo
   Odpovedať odsadzujú viac než na Nástenke. */
.sb-ed-discussion .sb-bd-thread-foot { padding-left: 72px; }
.sb-ed-discussion .sb-bd-replies { margin-left: 56px; }
.sb-ed-discussion .sb-bd-reply .sb-ed-avatar { width: 32px; height: 32px; font-size: 12px; }

@media (max-width: 700px) {
    .sb-ed-discussion .sb-bd-thread-foot { padding-left: 56px; }
    .sb-ed-discussion .sb-bd-replies { margin-left: 16px; }
}

@media (max-width: 700px) {
    .sb-bd-head h1 {
        font-size: 24px;
        line-height: 32px;
    }

    .sb-bd-item {
        padding: 16px;
        gap: 12px;
    }

    .sb-bd-item > .sb-feed-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .sb-bd-item > .sb-feed-icon .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }
}

/* ---------- Absencie (podstránka Udalostí, rovnaký jazyk ako design/Udalosti/calendar.html) ---------- */

.sb-ab {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: var(--sb-font);
}

/* Hlavička: titulok a podtitulok vľavo, akcie vpravo (ako .sb-ev-head, medzery dáva flex gap obalu). */
.sb-ab-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-ab-head h1 {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-primary);
}

.sb-ab-head p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface-variant);
}

.sb-ab-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Filter: hľadanie + prepínač Aktuálne/Všetky + počet záznamov. */
.sb-ab-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
    border-radius: 16px;
    background: var(--sb-surface-container);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-ab-search {
    flex: 1;
    min-width: 220px;
}

.sb-ab-search .mud-input-control .mud-input {
    background: var(--sb-surface);
    border-radius: 12px;
}

.sb-ab-filter-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sb-ab-count {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

/* Karta absencie: ľavý okraj podľa stavu - prebiehajúca oranžová, nadchádzajúca navy, skončená šedá. */
.sb-ab-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-ab-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 24px;
    border-left: 4px solid var(--sb-primary);
    background: var(--sb-surface-container);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    transition: background 0.15s ease;
}

.sb-ab-card:hover {
    background: var(--sb-surface-container-high);
}

.sb-ab-card-ongoing { border-left-color: var(--sb-secondary-container); }
.sb-ab-card-expired { border-left-color: var(--sb-outline); opacity: 0.75; }

.sb-ab-avatar {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--sb-surface-container-highest);
    color: var(--sb-on-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}

.sb-ab-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sb-ab-card-main {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sb-ab-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-ab-state {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(9, 20, 38, 0.1);
    color: var(--sb-primary);
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sb-ab-state-ongoing { background: rgba(253, 118, 26, 0.14); color: var(--sb-secondary); }
.sb-ab-state-expired { background: var(--sb-surface-container-highest); color: var(--sb-on-surface-variant); }

.sb-ab-range {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-ab-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-ab-reason {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
    overflow-wrap: anywhere;
}

.sb-ab-card-side {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.sb-ab-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 9999px;
    background: var(--sb-surface);
    color: var(--sb-on-surface-variant);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.sb-ab-pill .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }

/* Mazanie vlastnej absencie - ikona, pri hoveri červená (ako .sb-bd-action-danger). */
.sb-ab-delete {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--sb-on-surface-variant);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sb-ab-delete .mud-icon-root { font-size: 20px; width: 20px; height: 20px; }

.sb-ab-delete:hover {
    background: rgba(186, 26, 26, 0.08);
    color: var(--sb-error);
}

.sb-ab-delete:disabled { opacity: 0.4; cursor: default; }

.sb-ab-nomatch {
    margin: 0;
    padding: 32px 24px;
    border-radius: 24px;
    background: var(--sb-surface-container);
    text-align: center;
    font-size: 16px;
    color: var(--sb-on-surface-variant);
}

@media (max-width: 700px) {
    .sb-ab-head h1 {
        font-size: 24px;
        line-height: 32px;
    }

    .sb-ab-card {
        flex-wrap: wrap;
        padding: 16px;
        gap: 12px;
    }

    .sb-ab-card-main { flex-basis: calc(100% - 60px); }

    /* Na mobile ide trvanie a kôš do samostatného riadku pod textom. */
    .sb-ab-card-side {
        flex-basis: 100%;
        justify-content: space-between;
        margin-left: 0;
    }
}

/* ---------- Administrácia (design/Administracia/administracia.html) ---------- */

/* Rozcestník aj podstránky: zvislý tok sekcií. */
.sb-adm {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: var(--sb-font);
}

.sb-adm-hub { gap: 32px; }

/* Hlavička rozcestníka: oranžový nadtitul s bodkou, titulok, podtitulok; vpravo stavové pilulky. */
.sb-adm-hub-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.sb-adm-hub-head > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 42rem;
}

.sb-adm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-secondary);
}

.sb-adm-eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--sb-secondary);
}

.sb-adm-hub-head h1,
.sb-adm-head h1 {
    margin: 0;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-on-surface);
}

.sb-adm-hub-head p {
    margin: 0;
    font-size: 18px;
    line-height: 28px;
    color: var(--sb-on-surface-variant);
}

.sb-adm-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-adm-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 9999px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-adm-pill strong {
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-adm-pill-high {
    background: var(--sb-surface-container-high);
    box-shadow: none;
    color: var(--sb-on-surface);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.sb-adm-pill .mud-icon-root { font-size: 16px; width: 16px; height: 16px; color: var(--sb-on-surface-variant); }

/* Bodka stavu API: zelená pulzuje, červená stojí. */
.sb-adm-pill-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: #10b981;
    flex-shrink: 0;
}

.sb-adm-pill-dot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: inherit;
    opacity: 0.75;
    animation: sb-adm-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.sb-adm-pill-dot-error { background: var(--sb-error); }
.sb-adm-pill-dot-error::before { animation: none; }
.sb-adm-pill-dot-muted { background: var(--sb-outline); }
.sb-adm-pill-dot-muted::before { animation: none; }

@keyframes sb-adm-ping {
    75%, 100% { transform: scale(2.2); opacity: 0; }
}

/* Vyhľadávanie modulov: biela pilulka s ikonou, poľom a počtom vpravo. */
.sb-adm-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 4px 4px 16px;
    border-radius: 9999px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-adm-search > .mud-icon-root { color: var(--sb-outline); flex-shrink: 0; }

.sb-adm-search input {
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    border: none;
    background: transparent;
    font-family: var(--sb-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface);
}

.sb-adm-search input::placeholder { color: var(--sb-outline); }
.sb-adm-search input:focus { outline: none; }

.sb-adm-search-count {
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

/* Mriežka modulov: 3 stĺpce, na tablete 2, na mobile 1. */
.sb-adm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1100px) {
    .sb-adm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .sb-adm-grid { grid-template-columns: 1fr; }
}

/* Karta modulu: ikona + odznak, titulok, popis a spodná lišta s metrikou a odkazom. */
.sb-adm-mod {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.sb-adm-mod:hover { box-shadow: 0 4px 12px rgba(9, 20, 38, 0.10); }

.sb-adm-mod-top {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px;
}

.sb-adm-mod-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.sb-adm-mod-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.08);
    background: var(--sb-surface-container-highest);
    color: var(--sb-primary);
    transition: transform 0.2s ease;
}

.sb-adm-mod:hover .sb-adm-mod-icon { transform: scale(1.05); }

.sb-adm-mod-icon .mud-icon-root { font-size: 26px; width: 26px; height: 26px; }

.sb-adm-mod-icon-navy { background: var(--sb-primary); color: var(--sb-on-primary); }
.sb-adm-mod-icon-orange { background: #ffdbca; color: #341100; }
.sb-adm-mod-icon-container { background: var(--sb-primary-container); color: #d8e3fb; }
.sb-adm-mod-icon-blue { background: #c9e6ff; color: #001624; }
.sb-adm-mod-icon-high { background: var(--sb-surface-container-high); color: var(--sb-on-surface); }
.sb-adm-mod-icon-accent { background: var(--sb-secondary); color: var(--sb-on-secondary); }
.sb-adm-mod-icon-teal { background: var(--sb-surface-container-highest); color: #001624; }

.sb-adm-mod-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 9999px;
    background: var(--sb-surface-container);
    color: var(--sb-on-surface-variant);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.sb-adm-mod-badge-accent { background: #ffdbca; color: #341100; }
.sb-adm-mod-badge-error { background: #ffdad6; color: #93000a; }
.sb-adm-mod-badge-high { background: var(--sb-surface-container-high); color: var(--sb-on-surface); }

.sb-adm-mod-badge i {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--sb-secondary);
}

.sb-adm-mod h2 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
    transition: color 0.2s ease;
}

.sb-adm-mod:hover h2 { color: var(--sb-secondary); }

.sb-adm-mod p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sb-adm-mod-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding: 16px 24px 24px;
    background: rgba(239, 244, 255, 0.4);
}

.sb-adm-mod-foot > div { min-width: 0; }

.sb-adm-mod-value {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--sb-on-surface);
}

.sb-adm-mod-sub {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-adm-mod-go {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-secondary);
    transition: transform 0.2s ease;
}

.sb-adm-mod-go .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }

.sb-adm-mod:hover .sb-adm-mod-go { transform: translateX(4px); }

.sb-adm-nomatch {
    margin: 0;
    padding: 32px 24px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    text-align: center;
    font-size: 16px;
    color: var(--sb-on-surface-variant);
}

/* Spodná časť: posledná aktivita vľavo, navy karta stavu systému vpravo. */
.sb-adm-bottom {
    display: flex;
    align-items: stretch;
    gap: 24px;
}

@media (max-width: 1000px) {
    .sb-adm-bottom { flex-direction: column; }
}

.sb-adm-audit {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-adm-audit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
}

.sb-adm-audit-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-adm-audit-head h3 .mud-icon-root { color: var(--sb-secondary); }

.sb-adm-link {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.sb-adm-link:hover { text-decoration: underline; }

.sb-adm-audit-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sb-adm-audit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.sb-adm-audit-row:hover { background: var(--sb-surface-container-low); }

.sb-adm-audit-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.sb-adm-audit-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--sb-surface-container-high);
    color: var(--sb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-adm-audit-icon .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }

.sb-adm-audit-text { min-width: 0; }

.sb-adm-audit-text p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-adm-audit-text p span { color: var(--sb-secondary); }

.sb-adm-audit-text small {
    display: block;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-adm-audit-time {
    flex-shrink: 0;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-adm-audit-empty {
    margin: 0;
    padding: 16px 8px;
    font-size: 14px;
    color: var(--sb-on-surface-variant);
}

.sb-adm-status {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    width: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    border-radius: 12px;
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

@media (max-width: 1000px) {
    .sb-adm-status { width: auto; }
}

.sb-adm-status::after {
    content: '';
    position: absolute;
    right: -32px;
    bottom: -32px;
    width: 160px;
    height: 160px;
    border-radius: 9999px;
    background: rgba(253, 118, 26, 0.12);
    filter: blur(32px);
    pointer-events: none;
}

.sb-adm-status > * { position: relative; z-index: 1; }

.sb-adm-status-label {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #bcc7de;
}

.sb-adm-status h4 {
    margin: 4px 0 8px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-primary);
}

.sb-adm-status p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 20px;
    color: #bcc7de;
}

.sb-adm-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #ffdbca;
}

.sb-adm-status-row + .sb-adm-status-row { margin-top: 6px; }

.sb-adm-status-row .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }

.sb-adm-status-row-error { color: #ffb4ab; }

.sb-adm-status-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: var(--sb-secondary);
    color: var(--sb-on-secondary);
    font-family: var(--sb-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.2);
    transition: background 0.15s ease;
}

.sb-adm-status-btn:hover { background: #8a3a00; color: var(--sb-on-secondary); }

.sb-adm-status-btn .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }

/* ----- Podstránky administrácie ----- */

/* Hlavička podstránky (komponent AdminPageHead): titulok + podtitulok vľavo, akcie vpravo. */
.sb-adm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-adm-head h1 { color: var(--sb-primary); margin-bottom: 8px; }

.sb-adm-head p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface-variant);
    max-width: 42rem;
}

.sb-adm-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Lišta s hľadaním a filtrami (ako .sb-ab-filter). */
.sb-adm-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
    border-radius: 16px;
    background: var(--sb-surface-container);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-adm-filter-search {
    flex: 1;
    min-width: 220px;
}

.sb-adm-filter .mud-input-control .mud-input {
    background: var(--sb-surface);
    border-radius: 12px;
}

.sb-adm-filter-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sb-adm-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-adm-filter-item > span {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-adm-count {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

/* Biela karta s tabuľkou (ako .sb-members-table-card), riadky bez kliku, akcie vždy viditeľné. */
.sb-adm-table-card {
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 4px 12px rgba(9, 20, 38, 0.08);
    overflow: hidden;
}

.sb-adm-table-card > .sb-adm-card-head { padding: 16px 24px; }

.sb-adm-table-wrap { overflow-x: auto; }

.sb-adm-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.sb-adm-table thead tr {
    background: var(--sb-surface-container-low);
    border-bottom: 1px solid var(--sb-surface-container-highest);
}

.sb-adm-table th {
    padding: 14px 24px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-adm-table td {
    padding: 12px 24px;
    border-top: 1px solid var(--sb-surface-container-highest);
    vertical-align: middle;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
}

.sb-adm-table tbody tr:first-child td { border-top: none; }

.sb-adm-table tbody tr { transition: background 0.15s ease; }
.sb-adm-table tbody tr:hover { background: var(--sb-surface-container-low); }

.sb-adm-table tr.sb-adm-row-muted td { opacity: 0.6; }

.sb-adm-table .sb-adm-col-actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
    padding-left: 8px;
}

.sb-adm-table .sb-adm-col-num { text-align: right; white-space: nowrap; }

.sb-adm-cell-main {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-adm-cell-sub {
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
    overflow-wrap: anywhere;
}

.sb-adm-cell-nowrap { white-space: nowrap; }

.sb-adm-cell-url {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sb-on-surface-variant);
}

/* Kódový chip (kľúče nastavení, jazyk, kód krajiny). */
.sb-adm-code {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--sb-surface-container);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 18px;
    color: var(--sb-primary);
    white-space: nowrap;
}

/* Malý chip stavu (ako .sb-role-chip) s farebnými variantmi. */
.sb-adm-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--sb-surface-container-highest);
    color: var(--sb-on-surface-variant);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.sb-adm-chip-navy { background: var(--sb-primary-container); color: #d8e3fb; }
.sb-adm-chip-accent { background: rgba(157, 67, 0, 0.1); color: var(--sb-secondary); }
.sb-adm-chip-warning { background: rgba(217, 119, 6, 0.12); color: #b45309; }
.sb-adm-chip-error { background: #ffdad6; color: #93000a; }
.sb-adm-chip-success { background: rgba(16, 185, 129, 0.12); color: #059669; }
.sb-adm-chip-info { background: rgba(0, 153, 217, 0.12); color: #004c6e; }

.sb-adm-table-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-top: 1px solid var(--sb-surface-container-highest);
    background: var(--sb-surface-container-low);
}

.sb-adm-empty {
    margin: 0;
    padding: 32px 24px;
    text-align: center;
    font-size: 16px;
    color: var(--sb-on-surface-variant);
}

/* Ikonové tlačidlá v riadkoch: sivé, pri hoveri navy; variant danger červený. */
.sb-adm-icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--sb-on-surface-variant);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s ease, color 0.15s ease;
}

.sb-adm-icon-btn .mud-icon-root { font-size: 20px; width: 20px; height: 20px; }

.sb-adm-icon-btn:hover {
    background: var(--sb-surface-container-high);
    color: var(--sb-primary);
}

.sb-adm-icon-btn-danger:hover {
    background: rgba(186, 26, 26, 0.08);
    color: var(--sb-error);
}

.sb-adm-icon-btn:disabled { opacity: 0.4; cursor: default; }

/* Číselný údaj v tabuľke (počet tímov / členov), ktorý otvára dialóg so zoznamom. */
.sb-adm-link-btn {
    padding: 2px 8px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--sb-primary);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: background 0.15s ease, text-decoration-color 0.15s ease;
}

.sb-adm-link-btn:hover {
    background: var(--sb-surface-container-high);
    text-decoration-color: currentColor;
}

/* Zoznamy v dialógoch administrácie (tímy používateľa, členovia a udalosti tímu). */
.sb-adm-dialog-list { display: flex; flex-direction: column; gap: 12px; min-height: 120px; }
.sb-adm-dialog-list .sb-adm-table-wrap { border: 1px solid var(--sb-surface-container-highest); border-radius: 12px; }
.sb-adm-dialog-list .sb-adm-empty { padding: 24px 16px; }

.sb-adm-dialog-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Zoznam kariet (oznamy, hlásenia podpory) - karta s farebným ľavým okrajom ako .sb-ab-card. */
.sb-adm-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-adm-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 20px;
    border-left: 4px solid var(--sb-primary);
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    transition: box-shadow 0.15s ease;
}

.sb-adm-item:hover { box-shadow: 0 4px 12px rgba(9, 20, 38, 0.10); }

.sb-adm-item-accent { border-left-color: var(--sb-secondary-container); }
.sb-adm-item-error { border-left-color: var(--sb-error); }
.sb-adm-item-info { border-left-color: var(--sb-tertiary-accent); }
.sb-adm-item-success { border-left-color: #10b981; }
.sb-adm-item-muted { border-left-color: var(--sb-outline); opacity: 0.75; }

.sb-adm-item-main {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sb-adm-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

.sb-adm-item-meta .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }

.sb-adm-item h3 {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-adm-item p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.sb-adm-item-side {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.sb-adm-state {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(9, 20, 38, 0.1);
    color: var(--sb-primary);
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sb-adm-state-accent { background: rgba(253, 118, 26, 0.14); color: var(--sb-secondary); }
.sb-adm-state-error { background: #ffdad6; color: #93000a; }
.sb-adm-state-info { background: rgba(0, 153, 217, 0.12); color: #004c6e; }
.sb-adm-state-success { background: rgba(16, 185, 129, 0.12); color: #059669; }
.sb-adm-state-muted { background: var(--sb-surface-container-highest); color: var(--sb-on-surface-variant); }

/* Biela karta s hlavičkou (formulár nastavení, stĺpce geo). */
.sb-adm-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-adm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-adm-card-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-primary);
}

.sb-adm-card-head h2 .mud-icon-root { color: var(--sb-secondary-container); }

.sb-adm-card-head .sb-adm-count { text-transform: none; letter-spacing: 0.02em; }

/* Riadok formulára: polia s labelom nad poľom (.sb-ne-field) + tlačidlo zarovnané dole. */
.sb-adm-form-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.sb-adm-form-row .sb-ne-field { flex: 1 1 200px; }
.sb-adm-form-row .sb-ne-field-wide { flex: 2 1 280px; }
.sb-adm-form-row .sb-btn-pill { margin-bottom: 4px; }

/* Geo: krajiny 4/12 + mestá 8/12. */
.sb-adm-two {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 1000px) {
    .sb-adm-two { grid-template-columns: 1fr; }
}

.sb-adm-table-card .sb-adm-card-head { border-bottom: 1px solid var(--sb-surface-container-highest); }

.sb-adm-inline-search { min-width: 200px; }
.sb-adm-inline-search .mud-input-control .mud-input { background: var(--sb-surface-container-low); border-radius: 8px; }

/* Dialóg podpory: správy vlákna. */
.sb-adm-msg {
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
}

.sb-adm-msg-internal { background: rgba(157, 67, 0, 0.08); }

.sb-adm-msg small {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
}

.sb-adm-msg p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .sb-adm-hub-head h1,
    .sb-adm-head h1 {
        font-size: 24px;
        line-height: 32px;
    }

    .sb-adm-hub-head p { font-size: 16px; line-height: 24px; }

    .sb-adm-search-count { display: none; }

    .sb-adm-item {
        flex-wrap: wrap;
        padding: 16px;
        gap: 12px;
    }

    .sb-adm-item-side {
        flex-basis: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }

    .sb-adm-table th,
    .sb-adm-table td { padding-left: 16px; padding-right: 16px; }

    .sb-adm-audit-time { display: none; }
}

/* Chip vedľa názvu v bunke (MasterAdmin, Vypnuté) - medzera od textu. */
.sb-adm-cell-main .sb-adm-chip { margin-left: 8px; vertical-align: middle; }

/* Dlhý text hlásenia podpory: v zozname len prvé 3 riadky, celý je v dialógu. */
.sb-adm-item-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Diagnostika: fakty o behu (stav API, režim vykresľovania) vedľa seba v karte. */
.sb-adm-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 700px) {
    .sb-adm-facts { grid-template-columns: 1fr; }
}

.sb-adm-fact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
}

.sb-adm-fact-label {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-adm-fact-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-adm-fact-value .mud-icon-root { color: var(--sb-on-surface-variant); }

.sb-adm-fact-note {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
    overflow-wrap: anywhere;
}

/* ---------- Profil používateľa (design/Profil pouzivatela/profil_pouzivatela.html) ---------- */

.sb-pf {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: var(--sb-font);
}

/* Hlavička: titulok a podtitulok vľavo, akcie (zrušiť / uložiť) vpravo. */
.sb-pf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-pf-head h1 {
    margin: 0;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-primary);
}

.sb-pf-head > div:first-child {
    flex: 1 1 320px;
    min-width: 0;
}

.sb-pf-head p {
    margin: 4px 0 0;
    max-width: 42rem;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface-variant);
}

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

/* Súhrnná karta s fotkou: biela plocha s rozostreným kruhom v pravom hornom rohu. */
.sb-pf-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 24px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-pf-hero::before {
    content: '';
    position: absolute;
    top: -64px;
    right: -64px;
    width: 256px;
    height: 256px;
    border-radius: 9999px;
    background: rgba(220, 233, 255, 0.6);
    filter: blur(48px);
    pointer-events: none;
}

.sb-pf-hero > * { position: relative; }

.sb-pf-ident {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

/* Fotka: pod ňou ostávajú iniciálky, ak endpoint vráti 404 (rovnaký vzor ako detail člena). */
.sb-pf-photo {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sb-surface-container-highest);
    color: var(--sb-primary-container);
    box-shadow: 0 0 0 4px var(--sb-surface-container);
    font-size: 36px;
    font-weight: 700;
}

.sb-pf-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sb-pf-hero-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sb-pf-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-pf-name {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--sb-primary);
    overflow-wrap: anywhere;
}

.sb-pf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 9999px;
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.sb-pf-badge .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }

/* Fakty pod menom oddelené bodkami. */
.sb-pf-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-pf-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow-wrap: anywhere;
}

.sb-pf-meta .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }

.sb-pf-meta i {
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: var(--sb-outline-variant);
}

.sb-pf-hint {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: rgba(69, 71, 76, 0.8);
}

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

/* Ikonové tlačidlo (odstrániť fotku). */
.sb-pf-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--sb-error);
    cursor: pointer;
    transition: background 0.15s ease;
}

.sb-pf-icon-btn:hover:not(:disabled) { background: rgba(255, 218, 214, 0.4); }
.sb-pf-icon-btn:disabled { opacity: 0.5; cursor: default; }

/* Mriežka: údaje a heslo 2/3, predvoľby a účet 1/3. */
.sb-pf-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.sb-pf-main,
.sb-pf-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

@media (max-width: 1100px) {
    .sb-pf-grid { grid-template-columns: 1fr; }
}

/* Hlavička karty: ikona v štvorčeku, titulok s popisom, vpravo číslo sekcie. */
.sb-pf-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.sb-pf-card-title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.sb-pf-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--sb-surface-container);
    color: var(--sb-primary);
}

.sb-pf-card-title h2 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-primary);
}

.sb-pf-card-title p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-pf-sec {
    flex-shrink: 0;
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(69, 71, 76, 0.7);
    white-space: nowrap;
}

/* Riadok nad poľom: popisok vľavo, odkaz / poznámka vpravo. */
.sb-pf-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sb-pf-label-row a {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-secondary);
    text-decoration: none;
}

.sb-pf-label-row a:hover { text-decoration: underline; }

/* Sila hesla: štyri segmenty a pod nimi splnené / nesplnené odporúčania. */
.sb-pf-strength {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
}

.sb-pf-strength-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
}

.sb-pf-strength-head strong {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.sb-pf-strength-bar {
    display: flex;
    gap: 4px;
}

.sb-pf-strength-bar span {
    flex: 1 1 0;
    height: 6px;
    border-radius: 9999px;
    background: var(--sb-surface-container-high);
    transition: background 0.2s ease;
}

.sb-pf-strength-weak span.on { background: var(--sb-error); }
.sb-pf-strength-fair span.on { background: var(--sb-secondary-container); }
.sb-pf-strength-good span.on { background: #10b981; }

.sb-pf-reqs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding-top: 4px;
}

.sb-pf-req {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: var(--sb-on-surface-variant);
}

.sb-pf-req .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }
.sb-pf-req-ok { color: #059669; }

@media (max-width: 640px) {
    .sb-pf-reqs { grid-template-columns: 1fr; }
}

.sb-pf-card-foot {
    display: flex;
    justify-content: flex-end;
}

.sb-pf-btn-dark {
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.2);
}

.sb-pf-btn-dark:hover:not(:disabled) { background: var(--sb-inverse-surface); }

/* Bočné karty sú úzke: prepínač notifikácií ide pod text, nie vedľa neho. */
.sb-pf-side .sb-ne-toggle {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.sb-pf-side .sb-ne-toggle .mud-switch { align-self: flex-start; }

/* Účet: riadky popisok - hodnota v jemnom paneli. */
.sb-pf-facts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
}

.sb-pf-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-pf-fact span {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

.sb-pf-fact strong {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-pf-note {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

/* Spodná lišta na malých obrazovkách - tlačidlá z hlavičky ostávajú po ruke. */
.sb-pf-savebar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-pf-savebar span {
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

@media (max-width: 700px) {
    .sb-pf-head h1 { font-size: 24px; line-height: 32px; }
    .sb-pf-head > .sb-pf-actions { display: none; }
    .sb-pf-savebar { display: flex; }
    .sb-pf-ident { gap: 16px; }
    .sb-pf-photo { width: 88px; height: 88px; font-size: 28px; }
    .sb-pf-photo-actions { width: 100%; }
    .sb-pf-photo-actions .sb-ne-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Správa sezóny (Súťaže → Správa sezóny) - karty ako Nová udalosť / Profil ---------- */

/* Banner nad titulkom: súťaž › sezóna, ktoré stránka spravuje (dizajn karty aktívneho filtra
   na Štatistikách). */
.sb-sm-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-sm-banner-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: #ffdbca;
    color: var(--sb-secondary);
}

.sb-sm-banner-icon .mud-icon-root { font-size: 22px; width: 22px; height: 22px; }

.sb-sm-banner-fact { min-width: 0; }

.sb-sm-banner-fact span {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-sm-banner-fact p {
    margin: 0;
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: var(--sb-primary);
    overflow-wrap: anywhere;
}

.sb-sm-banner-sep { display: inline-flex; color: var(--sb-outline); }

@media (max-width: 700px) {
    .sb-sm-banner { gap: 10px; padding: 10px 12px; }
    .sb-sm-banner-fact p { font-size: 16px; line-height: 20px; }
}

/* Štítky v hlavičke: názov sezóny + stav (rozpracovaná / uzamknutá po vygenerovaní rozpisu). */
.sb-sm-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-sm-tag,
.sb-sm-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    background: var(--sb-surface-container);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--sb-on-surface);
}

.sb-sm-tag .mud-icon-root,
.sb-sm-status .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }
.sb-sm-tag .mud-icon-root { color: var(--sb-secondary); }
.sb-sm-status.draft { background: rgba(0, 153, 217, 0.12); color: #004c6e; }
.sb-sm-status.locked { background: rgba(16, 185, 129, 0.1); color: #059669; }

.sb-sm-lock > .mud-icon-root { color: var(--sb-primary); }

/* Poznámka pod poľom (zámok typu formátu pri evidovaných zápasoch). */
.sb-sm-field-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

.sb-sm-field-hint .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }

/* Trojica / štvorica polí v jednom riadku (bodovanie, časy) - na mobile po dvoch. */
.sb-sm-row3,
.sb-sm-row4 {
    display: grid;
    gap: 16px;
    grid-column: span 2;
}

.sb-sm-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-sm-row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 640px) {
    .sb-sm-row3,
    .sb-sm-row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: auto; }
}

/* Zoznam družstiev / členov súpisky: riadok s checkboxom, názvom a akciou vpravo. */
.sb-sm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-sm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.sb-sm-item.active {
    background: var(--sb-surface-container-lowest);
    box-shadow: inset 0 0 0 1px rgba(253, 118, 26, 0.35);
}

.sb-sm-item .mud-checkbox { margin: 0; }
.sb-sm-item > .sb-squad-badge { margin-left: 4px; }

.sb-sm-item-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-sm-item-main strong {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-sm-item-meta {
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
    white-space: nowrap;
}

.sb-sm-item .sb-btn-pill { flex-shrink: 0; }
.sb-sm-item .sb-btn-pill .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }

/* Výber skupiny / číslo dresu vpravo v riadku - úzke pole na bielom podklade. */
.sb-sm-item-select {
    flex: 0 0 auto;
    width: 120px;
}

.sb-sm-item-select .mud-input-control .mud-input { background: var(--sb-surface-container); }
.sb-sm-item.active .sb-sm-item-select .mud-input-control .mud-input { background: var(--sb-surface-container-low); }

/* Spodná lišta karty: poznámka vľavo, tlačidlá vpravo. */
.sb-sm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-sm-foot > .sb-ne-actions { gap: 8px; }

/* Rozpis: akcie hneď pod hlavičkou, prázdny stav kompaktnejší než na stránkach so zoznamom. */
.sb-sm-schedule-actions { margin-top: -8px; }

.sb-sm-empty { padding: 24px; }
.sb-sm-empty .sb-empty-icon { width: 56px; height: 56px; }
.sb-sm-empty h3 { font-size: 16px; line-height: 24px; }
.sb-sm-empty p { font-size: 14px; line-height: 20px; }

.sb-sm-table th:first-child,
.sb-sm-table td.sb-sm-num { width: 48px; }

.sb-sm-num {
    color: var(--sb-on-surface-variant);
    font-variant-numeric: tabular-nums;
}

.sb-sm-teams {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
}

.sb-sm-score {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--sb-primary);
}

.sb-sm-score.muted { color: var(--sb-outline-variant); font-weight: 500; }

/* Viditeľnosť štatistík v bočnej karte: polia pod sebou. */
.sb-sm-vis-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Súpiska v dialógu: fulltext nad zoznamom, riadky členov s číslom dresu vpravo. */
.sb-sm-roster-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sb-sm-roster-count { white-space: nowrap; }

.sb-sm-roster-search { margin-bottom: 8px; }

/* Vypnutý člen ostáva v zozname (mohol byť v súpiske skôr), len tlmený. */
.sb-sm-roster-off { color: var(--sb-outline); }

/* Hráč už v súpiske iného družstva tejto sezóny. */
.sb-sm-roster-other { color: var(--sb-error); }

.sb-sm-roster {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.sb-sm-roster-empty {
    margin: 0;
    padding: 12px 8px;
    font-size: 13px;
    line-height: 18px;
    color: var(--sb-on-surface-variant);
    text-align: center;
}

@media (max-width: 700px) {
    .sb-sm .sb-ne-head h1 { font-size: 24px; line-height: 32px; }
    .sb-sm-item-select { width: 104px; }
}

/* ---------- Nastavenia tímu - karty ako Profil / Správa sezóny, zoznam družstiev ako sb-sm-item ---------- */

/* Vyradené družstvo: názov tlmený, chip "Vyradené" vedľa neho. */
.sb-ts-item-off .sb-sm-item-main strong { color: var(--sb-on-surface-variant); }
.sb-ts-item-off > .sb-squad-badge { color: var(--sb-outline); }

/* Popis družstva pod názvom - môže sa zalomiť, nie je to jednoriadkový údaj. */
.sb-ts-item-desc {
    flex-basis: 100%;
    white-space: normal;
}

/* Súťaže: každá súťaž je riadok sb-sm-item, jej sezóny pod ním odsadené menšie riadky. */
.sb-ts-comp {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sb-ts-comp-row > .sb-squad-badge { color: var(--sb-secondary); }

.sb-ts-seasons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 20px;
}

.sb-ts-season {
    padding: 4px 10px 4px 8px;
    background: var(--sb-surface-container-lowest);
    box-shadow: inset 0 0 0 1px var(--sb-surface-container);
}

.sb-ts-season-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--sb-surface-container-low);
    color: var(--sb-on-surface-variant);
}

.sb-ts-season-icon .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }

/* Odstrániť sezónu: červená pilulka, pri sezóne so zápasmi vypnutá (dôvod v title). */
.sb-ts-season-delete { color: var(--sb-error); }
.sb-ts-season-delete:hover:not(:disabled) { background: #ffdad6; }
.sb-ts-season-delete:disabled { opacity: 0.5; cursor: default; }

.sb-ts-season-empty {
    margin: 0;
    padding: 2px 0 2px 20px;
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

/* Stav sezóny ako chip: prebiehajúca zelená, plánovaná modrá, ukončená neutrálna, skrytá tlmená. */
.sb-ts-season-status.ongoing { background: rgba(16, 185, 129, 0.12); color: #047857; }
.sb-ts-season-status.planned { background: rgba(0, 153, 217, 0.12); color: #004c6e; }
.sb-ts-season-status.completed { background: var(--sb-surface-container-high); color: var(--sb-on-surface); }
.sb-ts-season-status.hidden { background: var(--sb-surface-container); color: var(--sb-outline); }

@media (max-width: 700px) {
    /* Na mobile sa tlačidlá riadku zalomia pod názov a roztiahnu na celú šírku. */
    .sb-ts-comp-row,
    .sb-ts-season { flex-wrap: wrap; }
    .sb-ts-comp-row .sb-btn-pill,
    .sb-ts-season .sb-btn-pill { flex: 1 1 calc(50% - 4px); justify-content: center; }
    .sb-ts-seasons { padding-left: 12px; }
    .sb-ts-season-empty { padding-left: 12px; }
}

/* Bočná karta s vysvetlením družstiev: text + odkaz na Štatistiky. */
.sb-ts-note {
    font-size: 14px;
    line-height: 20px;
}

.sb-ts-link {
    align-self: flex-start;
}

.sb-ts-link .mud-icon-root { font-size: 16px; width: 16px; height: 16px; color: var(--sb-secondary); }

/* Dialóg družstva: polia pod sebou, prepínač aktívnosti ako v Profile. */
.sb-ts-dialog {
    grid-template-columns: 1fr;
    padding-top: 4px;
}

.sb-ts-dialog .sb-ne-toggle { padding: 12px 16px; }

@media (max-width: 700px) {
    .sb-ts .sb-ne-head h1 { font-size: 24px; line-height: 32px; }
    .sb-ts .sb-sm-foot > .sb-ne-actions { width: 100%; }
    .sb-ts .sb-sm-foot > .sb-ne-actions .sb-ne-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Hľadám tím - karty ako Profil / Nastavenia tímu, inzeráty ako riadky sb-sm-item ---------- */

/* Zrušený / uzavretý inzerát: názov aj odznak športu tlmené. */
.sb-fmt-item-off .sb-sm-item-main strong { color: var(--sb-on-surface-variant); }
.sb-fmt-item-off > .sb-squad-badge { color: var(--sb-outline); }

/* Poznámka inzerátu pod hlavným riadkom - zalamuje sa, nie je to jednoriadkový údaj. */
.sb-fmt-item-note {
    flex-basis: 100%;
    white-space: normal;
}

/* Chip stavu vedľa názvu športu - zarovnaný na účaří textu. */
.sb-fmt .sb-sm-item-main .sb-adm-chip { align-self: center; }

/* Zrušenie inzerátu: pri hoveri červené ako ostatné deštruktívne akcie. */
.sb-fmt-cancel:hover {
    background: #ffdad6;
    color: #93000a;
}

.sb-fmt-cancel:disabled { opacity: 0.5; cursor: default; }

/* Ako to funguje: očíslované kroky s titulkom a popisom. */
.sb-fmt-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sb-fmt-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sb-fmt-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
}

.sb-fmt-step > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sb-fmt-step strong {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-fmt-step span {
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

@media (max-width: 700px) {
    .sb-fmt .sb-ne-head h1 { font-size: 24px; line-height: 32px; }
    .sb-fmt .sb-sm-foot > .sb-ne-btn { width: 100%; justify-content: center; }
    /* Riadok inzerátu sa zalomí: text ostáva vedľa odznaku (základ 0, nie šírka obsahu),
       tlačidlo Zrušiť ide pod ne na celú šírku, zarovnané s textom (odznak 32px + medzery). */
    .sb-fmt .sb-sm-item,
    .sb-lft .sb-sm-item { flex-wrap: wrap; }
    .sb-fmt .sb-sm-item-main,
    .sb-lft .sb-sm-item-main { flex: 1 1 0; }
    .sb-fmt .sb-sm-item .sb-fmt-cancel,
    .sb-lft .sb-sm-item .sb-lft-action { flex: 1 1 100%; margin-left: 44px; justify-content: center; }
}

/* ---------- Hľadajú tím (kandidáti pre admina) - rovnaké karty a riadky ako Hľadám tím ---------- */

/* Kandidát s odoslanou pozvánkou: riadok na bielom podklade so zeleným rámom, chip namiesto tlačidla. */
.sb-lft-item-invited {
    background: var(--sb-surface-container-lowest);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.35);
}

.sb-lft-action { flex-shrink: 0; }
.sb-lft-action .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }
.sb-lft-action.sb-adm-chip { padding: 8px 12px; }
.sb-lft-action.sb-btn-pill:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 700px) {
    .sb-lft .sb-ne-head h1 { font-size: 24px; line-height: 32px; }
}

/* ===== Sieň slávy (HallOfFame.razor) - stavia na sb-comp-* zo Súťaží ===== */
.sb-hof-table th .sb-hof-medal { vertical-align: middle; }

.sb-hof-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    font-family: var(--sb-font);
}

.sb-hof-medal-1 { background: #f2c14e; color: #4a3200; box-shadow: 0 1px 2px rgba(9, 20, 38, 0.15); }
.sb-hof-medal-2 { background: #d9dee7; color: #2f3a4c; }
.sb-hof-medal-3 { background: #e0a074; color: #4a2300; }

.sb-hof-count {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sb-outline);
}

.sb-hof-count-1 { color: #9a6b00; }
.sb-hof-count-2 { color: #4a5568; }
.sb-hof-count-3 { color: #8a4a1b; }

.sb-hof-row { cursor: pointer; }
.sb-hof-row.expanded td { border-bottom: none; }

.sb-hof-col-toggle {
    width: 40px;
    text-align: center;
    color: var(--sb-on-surface-variant);
}

.sb-hof-player-sub {
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

.sb-hof-detail td {
    padding: 0 16px 16px 80px;
    background: var(--sb-surface-container-low);
}

.sb-hof-placements {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
}

.sb-hof-placement {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 9999px;
    background: var(--sb-surface-container-lowest);
    color: var(--sb-on-surface);
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-hof-placement:hover { background: var(--sb-surface-container-high); }
.sb-hof-placement-season { font-weight: 600; color: var(--sb-primary); }
.sb-hof-placement-cat { color: var(--sb-on-surface-variant); }
.sb-hof-placement-value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sb-secondary); }

.sb-hof-seasons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.sb-hof-season { display: flex; flex-direction: column; }

.sb-hof-season-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 8px;
}

.sb-hof-season-comp {
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-hof-season-name {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--sb-primary);
    text-decoration: none;
}

.sb-hof-season-name:hover { text-decoration: underline; }

.sb-hof-podiums {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 16px;
    padding: 0 16px 16px;
}

.sb-hof-podium-title {
    margin: 8px 0 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-hof-podium-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 14px;
    line-height: 20px;
}

.sb-hof-podium-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sb-on-surface);
}

.sb-hof-podium-value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sb-secondary); }

/* Kategória Družstvá: umiestnenie družstva nemá metriku - v čipe je názov družstva, v pódiu sezóny
   riadok družstva a pod ním celá súpiska, ktorá titul dostala. */
.sb-hof-placement-squad { font-weight: 700; color: var(--sb-secondary); }
.sb-hof-podium-squad .sb-hof-podium-name { font-weight: 600; }
.sb-hof-podium-players {
    margin: -2px 0 6px 32px;
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}
.sb-hof-squads-hint { margin: 0 0 12px; }

.sb-hof-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--sb-on-surface-variant);
}

.sb-hof-empty p { margin: 0; max-width: 480px; font-size: 16px; line-height: 24px; }

.sb-hof-unclosed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(157, 67, 0, 0.25);
    background: rgba(255, 219, 202, 0.35);
}

.sb-hof-unclosed-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--sb-secondary);
}

.sb-hof-unclosed-head strong { display: block; font-size: 14px; line-height: 20px; color: var(--sb-primary); }
.sb-hof-unclosed-head p { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--sb-on-surface-variant); }
.sb-hof-unclosed-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Série (výhry, bez prehry, s gólom) - tri karty na skupinu, prepínač čítania ako sb-comp-metric. */
.sb-hof-streaks { display: flex; flex-direction: column; gap: 12px; }

.sb-hof-streaks-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
}

.sb-hof-streaks-hint {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--sb-on-surface-variant);
}

.sb-hof-streak-modes { flex-shrink: 0; }

.sb-hof-streak-group {
    margin: 8px 0 -4px;
    font-family: var(--sb-font);
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-hof-streak-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.sb-hof-streak-card { display: flex; flex-direction: column; padding: 12px 16px 6px; }

.sb-hof-streak-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-primary);
}

.sb-hof-streak-none {
    margin: 0;
    padding: 10px 0 12px;
    font-size: 13px;
    line-height: 18px;
    color: var(--sb-on-surface-variant);
}

.sb-hof-streak-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--sb-outline-variant);
}

.sb-hof-streak-row .sb-comp-avatar { flex-shrink: 0; }

.sb-hof-streak-player { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.sb-hof-streak-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--sb-on-surface);
    text-decoration: none;
}

.sb-hof-streak-name:hover { color: var(--sb-primary); text-decoration: underline; }

.sb-hof-streak-range {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

.sb-hof-streak-live { padding: 1px 6px; background: rgba(157, 67, 0, 0.12); color: var(--sb-secondary); }

.sb-hof-streak-value {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--sb-secondary);
}

.sb-hof-streak-fire { color: #d97706; }

/* Dĺžka série je tlačidlo - otvára okno so zápasmi série. */
.sb-hof-streak-games-btn {
    margin: 0;
    padding: 4px 2px 4px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sb-hof-streak-games-btn:hover,
.sb-hof-streak-games-btn:focus-visible { background: rgba(157, 67, 0, 0.1); color: var(--sb-primary); outline: none; }

.sb-hof-streak-games-icon { color: var(--sb-on-surface-variant); }

.sb-hof-streak-games-btn:hover .sb-hof-streak-games-icon { color: var(--sb-primary); }

.sb-hof-streak-dialog-head { display: flex; flex-direction: column; gap: 4px; }

.sb-hof-streak-dialog-title { display: flex; align-items: center; gap: 8px; color: var(--sb-on-surface); }

.sb-hof-streak-dialog-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: var(--sb-on-surface-variant);
}

.sb-hof-streak-dialog-sub a { color: var(--sb-on-surface); font-weight: 600; text-decoration: none; }

.sb-hof-streak-dialog-sub a:hover { color: var(--sb-primary); text-decoration: underline; }

.sb-hof-streak-dialog-mode { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--sb-on-surface-variant); }

.sb-hof-streak-games { padding: 4px 0; }

/* Vekové rekordy (docs/hall-of-fame.md, kapitola 13): karty a riadky zdieľajú štýl sérií
   (.sb-hof-streak-*), vek je tlačidlo na okno zápasu ako dĺžka série. */
.sb-hof-ages { display: flex; flex-direction: column; gap: 12px; }

.sb-hof-age-game { font-variant-numeric: tabular-nums; }

.sb-hof-age-row .sb-hof-streak-name em { font-style: normal; font-weight: 600; color: var(--sb-secondary); }

.sb-hof-age-gap-squads { display: flex; flex-wrap: wrap; gap: 2px 12px; }

/* Okno zápasu: dve zostavy vedľa seba, zvýraznené družstvo alebo hráč rekordu. */
.sb-hof-age-squads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 4px 0;
}

.sb-hof-age-squad {
    padding: 10px 12px;
    border: 1px solid var(--sb-outline-variant);
    border-radius: 12px;
}

.sb-hof-age-squad.highlight { border-color: var(--sb-primary); box-shadow: inset 0 0 0 1px var(--sb-primary); }

.sb-hof-age-squad-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
}

.sb-hof-age-squad-head .sb-comp-avatar { flex-shrink: 0; }

.sb-hof-age-squad-name { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--sb-on-surface); }

.sb-hof-age-squad-avg {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--sb-secondary);
}

.sb-hof-age-squad-avg.unknown { font-weight: 400; color: var(--sb-on-surface-variant); }

.sb-hof-age-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--sb-outline-variant);
    font-size: 13px;
    line-height: 18px;
}

.sb-hof-age-player .sb-comp-avatar { flex-shrink: 0; }

.sb-hof-age-player .sb-hof-streak-name { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; }

.sb-hof-age-player.highlight {
    margin: 0 -8px;
    padding: 6px 8px;
    border-top-color: transparent;
    border-radius: 8px;
    background: rgba(157, 67, 0, 0.1);
}

.sb-hof-age-player.highlight .sb-hof-streak-name { color: var(--sb-primary); }

.sb-hof-age-player-age {
    flex-shrink: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--sb-on-surface);
}

.sb-hof-age-player-age.unknown { font-weight: 400; color: var(--sb-on-surface-variant); }

.sb-hof-age-goals {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--sb-on-surface-variant);
}

.sb-hof-age-goals .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }

.sb-hof-age-extra { padding: 1px 6px; font-size: 11px; }

@media (max-width: 700px) {
    .sb-hof-detail td { padding-left: 16px; }
    .sb-hof-seasons { grid-template-columns: 1fr; }
    .sb-hof-streak-grid { grid-template-columns: 1fr; }
    .sb-hof-streak-modes { width: 100%; }
    .sb-hof-age-squads { grid-template-columns: 1fr; }
}

/* Moje tímy - sekcia Pozvánky do tímov (karta pozvánky s tlačidlami Prijať / Odmietnuť). */
.sb-inv .sb-section-title .mud-icon-root {
    color: var(--sb-primary);
}

.sb-inv-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 4px solid var(--sb-primary);
}

.sb-inv-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-family: var(--sb-font);
    font-size: 13px;
    line-height: 18px;
    color: var(--sb-on-surface-variant);
}

.sb-inv-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sb-inv-meta .mud-icon-root {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.sb-inv-message {
    margin: 0;
    padding: 8px 12px;
    border-left: 2px solid var(--sb-surface-container-high);
    background: var(--sb-surface-container-high);
    border-radius: 0 8px 8px 0;
    font-family: var(--sb-font);
    font-size: 14px;
    line-height: 20px;
    font-style: italic;
    color: var(--sb-on-surface);
    white-space: pre-line;
}

.sb-inv-description {
    margin: 0;
    font-family: var(--sb-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface-variant);
}

.sb-inv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

.sb-inv-actions .mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.sb-inv-actions .sb-btn-pill:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ==========================================================================
   Zrušenie tímu (docs/zrusenie-timu.md): banner v tíme, sekcia v nastaveniach
   a zoznam čakajúcich žiadostí v administrácii.
   ========================================================================== */

.sb-del-banner-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sb-del-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sb-del-banner-text strong { font-size: 14px; }
.sb-del-banner-text span { font-size: 13px; opacity: 0.9; }
.sb-del-banner-hint { font-size: 13px; opacity: 0.9; }

/* Sekcia "Zrušenie tímu" v nastaveniach - odlíšená červeným lemom, aby sa neprehliadla. */
.sb-ts-danger { box-shadow: inset 0 0 0 1px rgba(186, 26, 26, 0.35); }

/* Záložky Tímy / Tímy určené na odstránenie - tab bar detailu udalosti v menšom písme
   (odstup od obsahu dáva gap v .sb-adm). */
.sb-adm-tabs button {
    padding-bottom: 12px;
    font-size: 16px;
    line-height: 24px;
}

/* Počet tímov na odstránenie - farby ako .sb-adm-chip-error. */
.sb-adm-tabs .sb-ed-tab-badge { background: #ffdad6; color: #93000a; }

/* Tabuľka s mnohými stĺpcami (tímy na odstránenie): užšie odsadenie buniek a názov tímu
   s minimálnou šírkou - overflow-wrap: anywhere v .sb-adm-cell-main by inak stĺpec zúžil
   a názov lámal po písmenách. */
.sb-adm-table-dense th,
.sb-adm-table-dense td { padding-left: 12px; padding-right: 12px; }

.sb-adm-table-dense th:first-child,
.sb-adm-table-dense td:first-child { padding-left: 24px; }

.sb-adm-table .sb-adm-col-team { min-width: 140px; }

/* Upratovanie mŕtvych tímov: filter podľa neaktivity, výber riadkov a lišta hromadnej akcie. */

.sb-adm-filter-inactive,
.sb-adm-filter-account,
.sb-adm-filter-role { min-width: 200px; }

/* Zaškrtávacie políčko nepotrebuje plné odsadenie buniek - to len zbytočne rozťahuje tabuľku. */
.sb-adm-table th.sb-adm-col-check,
.sb-adm-table td.sb-adm-col-check {
    width: 36px;
    padding-left: 12px;
    padding-right: 0;
}

.sb-adm-col-check input { width: 16px; height: 16px; cursor: pointer; }

.sb-adm-bulkbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--sb-surface-container);
    box-shadow: inset 0 0 0 1px rgba(186, 26, 26, 0.35);
    font-family: var(--sb-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

.sb-adm-bulkbar > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sb-adm-bulk-list {
    margin: 0;
    padding-left: 20px;
    max-height: 160px;
    overflow-y: auto;
    font-family: var(--sb-font);
    font-size: 13px;
    color: var(--sb-on-surface-variant);
}

.sb-del-banner-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.sb-del-banner-export {
    font-family: var(--sb-font);
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
}

.sb-adm-icon-btn-danger { color: var(--sb-error); }

/* Zoraditeľné hlavičky tabuliek v administrácii. */

/* Odsadenie nesie tlačidlo, aby bola klikateľná celá hlavička, nielen text v nej.
   Dlhý názov stĺpca sa smie zalomiť: nezalomený by roztiahol celú tabuľku (merané na
   Administrácia -> Tímy je rozdiel cez 90 px) a pribudol by vodorovný posuvník. */
.sb-adm-table th.sb-adm-th-sort {
    padding: 0;
    white-space: normal;
}

.sb-adm-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    cursor: pointer;
}

.sb-adm-table th.sb-adm-col-num .sb-adm-sort-btn,
.sb-adm-table th.sb-adm-col-actions .sb-adm-sort-btn { justify-content: flex-end; }

.sb-adm-sort-btn:hover { color: var(--sb-on-surface); }

.sb-adm-sort-btn:focus-visible {
    outline: 2px solid var(--sb-primary);
    outline-offset: -2px;
}

.sb-adm-sort-icon {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 auto;
}

/* Neaktívny stĺpec ukazuje, že sa dá zoradiť, ale nekričí to. */
.sb-adm-sort-icon-idle { opacity: 0.35; }

/* Minimálne šírky stĺpcov denníka aktivity - predtým boli inline na <th>. */
.sb-adm-table th.sb-adm-col-user { min-width: 200px; }
.sb-adm-table th.sb-adm-col-device { min-width: 240px; }

/* Náhľad šablóny notifikácie (Administrácia / Šablóny): izolovaný iframe s vyrenderovaným emailom. */
.sb-tpl-preview-frame {
    width: 100%;
    height: 460px;
    border: 1px solid var(--sb-outline-variant);
    border-radius: 8px;
    background: #fff;
}

.sb-tpl-preview-sms {
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid var(--sb-outline-variant);
    border-radius: 8px;
    background: var(--sb-surface-container);
    white-space: pre-wrap;
    word-break: break-word;
}

.sb-tpl-placeholders {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sb-tpl-placeholder {
    cursor: pointer;
    border: 0;
}

.sb-tpl-placeholder:hover {
    background: var(--sb-surface-container-highest);
}

/* ---------- Ankety (docs/ankety.md): karta ankety na Nástenke a Prehľade ---------- */

/* Hlavička nástenky s dvoma akciami (Nová anketa + Pridať oznam). */
.sb-bd-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-bd-head-actions a.sb-btn-pill { text-decoration: none; }

/* Karta ankety - rovnaký tvar ako čerstvý oznam (sb-ann), oranžová ľavá linka. */
.sb-poll {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 16px;
    border: 1px solid rgba(253, 118, 26, 0.25);
    border-left: 4px solid var(--sb-secondary-container);
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    font-family: var(--sb-font);
}

.sb-poll-closed { border-color: rgba(197, 198, 205, 0.6); border-left-color: var(--sb-outline-variant); }
.sb-poll-scheduled { border-left-color: var(--sb-tertiary-accent); }

/* V položke nástenky je karta vnorená do tela položky - bez vlastného rámu a ikony. */
.sb-bd-item-body .sb-poll {
    padding: 12px 0 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.sb-bd-item-body .sb-poll-ico { display: none; }

.sb-poll-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(157, 67, 0, 0.1);
    color: var(--sb-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-poll-ico .mud-icon-root { font-size: 22px; width: 22px; height: 22px; }

.sb-poll-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sb-poll-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sb-poll-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Admin akcie v hlavičke karty (Upraviť, Zmazať) - vedľa seba, nezalamujú sa. */
.sb-poll-admin-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* Dialóg úpravy základných údajov - polia ako na stránke Nová anketa (sb-ne-*). */
.sb-poll-edit-dialog .mud-dialog-content { display: flex; flex-direction: column; gap: 16px; }
.sb-poll-edit-dialog .sb-ne-toggle { padding: 12px 16px; }
/* Dátum a čas na celý riadok (3:2) - v úzkom dialógu by sa popisky termínov zalamovali. */
.sb-poll-edit-dialog .sb-ne-split {
    grid-column: span 2;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

@media (max-width: 640px) {
    .sb-poll-edit-dialog .sb-ne-split { grid-column: auto; }
}

.sb-poll-title h3 {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--sb-on-surface);
    overflow-wrap: anywhere;
}

.sb-poll-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sb-poll-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: var(--sb-surface-container);
    color: var(--sb-on-surface-variant);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.sb-poll-chip .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }
.sb-poll-chip-active { background: rgba(16, 185, 129, 0.12); color: #059669; }
.sb-poll-chip-scheduled { background: rgba(0, 153, 217, 0.12); color: #004c6e; }
.sb-poll-chip-closed { background: var(--sb-surface-container-highest); color: var(--sb-on-surface-variant); }
.sb-poll-chip-event:hover { background: var(--sb-surface-container-high); color: var(--sb-on-surface); }

.sb-poll-desc {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--sb-on-surface-variant);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sb-poll-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sb-poll-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sb-on-surface-variant);
}

.sb-poll-count .mud-icon-root { font-size: 15px; width: 15px; height: 15px; }

.sb-poll-results,
.sb-poll-form-q {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-poll-q {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-poll-q strong {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--sb-on-surface);
}

/* Listovanie otázok na karte: šípky okolo "otázka X z Y". */
.sb-poll-q-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.sb-poll-q-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--sb-on-surface-variant);
    cursor: pointer;
}

.sb-poll-q-arrow:hover:not(:disabled) { background: var(--sb-surface-container-high); color: var(--sb-on-surface); }
.sb-poll-q-arrow:disabled { opacity: 0.3; cursor: default; }
.sb-poll-q-arrow .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }

/* Mená hlasujúcich pod textom možnosti (neanonymná anketa, tlačidlo Zobraziť mená). */
.sb-poll-bar-text { display: flex; flex-direction: column; gap: 2px; }
.sb-poll-bar-voters {
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

.sb-poll-q-hint,
.sb-poll-q-more {
    font-size: 12px;
    line-height: 16px;
    color: var(--sb-on-surface-variant);
}

/* Stĺpce výsledkov: výplň podľa percenta, text nad ňou. */
.sb-poll-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sb-poll-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--sb-surface-container-low);
    overflow: hidden;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
}

.sb-poll-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: rgba(253, 118, 26, 0.18);
    transition: width 0.3s ease;
}

.sb-poll-bar-lead .sb-poll-bar-fill { background: rgba(253, 118, 26, 0.38); }

.sb-poll-bar-text,
.sb-poll-bar-num {
    position: relative;
    overflow-wrap: anywhere;
}

.sb-poll-bar-num {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--sb-secondary);
}

.sb-poll-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-poll-foot .sb-poll-count { margin-right: auto; }

/* Dialógy: hlasovací lístok a výsledky. */
.sb-poll-dialog .mud-dialog-content { display: flex; flex-direction: column; gap: 16px; }

.sb-poll-vote-for { color: var(--sb-secondary); font-weight: 600; }
.sb-poll-proxy-select { margin-bottom: 4px; }

.sb-poll-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sb-poll-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sb-poll-option {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
}

/* Label MudBlazoru (zabalený v .mud-input-control) vyplní celý riadok, aby sa dalo kliknúť
   kdekoľvek v ňom; rádiá idú pod seba, nie vedľa seba. */
.sb-poll-option .mud-input-control,
.sb-poll-option .mud-input-control-input-container { width: 100%; }
.sb-poll-option .mud-checkbox,
.sb-poll-option .mud-radio { display: flex; width: 100%; margin: 0; }
.sb-poll-options .mud-radio-group { display: flex; flex-direction: column; gap: 4px; }
.sb-poll-options > .mud-input-control { width: 100%; }

.sb-poll-option:hover { background: var(--sb-surface-container-low); }
.sb-poll-option.selected { background: rgba(253, 118, 26, 0.1); }

.sb-poll-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sb-poll-members {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-poll-member {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
}

.sb-poll-member-pending { opacity: 0.85; }

.sb-poll-member-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sb-poll-member-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-right: auto;
}

.sb-poll-member-name strong { font-size: 14px; line-height: 20px; color: var(--sb-on-surface); }
.sb-poll-member-name span { font-size: 12px; line-height: 16px; color: var(--sb-on-surface-variant); }

.sb-poll-member-answers {
    margin: 0;
    padding: 0 0 0 52px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-poll-member-answers li {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    line-height: 18px;
}

.sb-poll-member-answers li span { color: var(--sb-on-surface-variant); }
.sb-poll-member-answers li span::after { content: ":"; }
.sb-poll-member-answers li strong { color: var(--sb-on-surface); font-weight: 600; }

/* ---------- Nová anketa (PollEdit.razor) - otázky a odpovede ---------- */

.sb-pe-questions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-pe-question {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
}

.sb-pe-question-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sb-pe-question-text { flex: 1; }

.sb-pe-question-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.sb-pe-multi {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    line-height: 18px;
    color: var(--sb-on-surface-variant);
}

.sb-pe-multi .mud-switch { margin: 0; }

.sb-pe-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 44px;
}

.sb-pe-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-pe-option .mud-input-control { flex: 1; }
.sb-pe-option-ico { color: var(--sb-outline); font-size: 20px; width: 20px; height: 20px; flex-shrink: 0; }

.sb-pe-question-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-left: 44px;
}

@media (max-width: 700px) {
    .sb-poll { padding: 16px; }
    .sb-pe-options,
    .sb-pe-question-foot { padding-left: 0; }
    .sb-poll-member-answers { padding-left: 0; }
}

/* Dôležitá udalosť pripnutá adminom na vrch Prehľadu - rozloženie karty najbližšej udalosti
   (.sb-nx), zvýraznený rám a plný chip s pripináčikom. */
.sb-pin {
    border-color: rgba(253, 118, 26, 0.35);
    border-left: 4px solid var(--sb-secondary);
}

.sb-pin .sb-nx-chip {
    background: var(--sb-secondary);
    color: #ffffff;
}

.sb-pin-canceled h2 a {
    text-decoration: line-through;
    color: var(--sb-on-surface-variant);
}

.sb-pin .sb-nx-main p.sb-pin-status {
    font-weight: 600;
    color: #93000a;
}

/* Chip "Pripnutá do ..." v hlavičke detailu udalosti. */
.sb-ed-chip-pinned {
    background: rgba(253, 118, 26, 0.2);
    color: var(--sb-secondary);
}

/* ---------------------------------------------------------------------------
   Galéria tímu (docs/galeria.md): hlavička, mesiace, mriežka dlaždíc, lightbox,
   výber členov v nastaveniach. Prefix sb-gal-.
   --------------------------------------------------------------------------- */
.sb-gal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.sb-gal-head h1 {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sb-primary);
}

.sb-gal-head p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sb-on-surface-variant);
}

.sb-gal-restricted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    padding: 6px 12px;
    border-radius: 9999px;
    background: var(--sb-surface-container);
    font-size: 13px;
    line-height: 18px;
    color: var(--sb-on-surface-variant);
}

.sb-gal-empty {
    margin-top: 8px;
}

.sb-gal-month {
    margin-bottom: 28px;
}

.sb-gal-month h2 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--sb-primary);
}

.sb-gal-month-count {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-on-surface-variant);
}

.sb-gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.sb-gal-tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sb-surface-container);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sb-gal-tile:hover,
.sb-gal-tile:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(9, 20, 38, 0.18);
    outline: none;
}

.sb-gal-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sb-gal-tile-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    background: rgba(9, 20, 38, 0.7);
    color: #fff;
}

.sb-gal-tile-badge .mud-icon-root {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.sb-gal-tile-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 10px 8px;
    background: linear-gradient(to top, rgba(9, 20, 38, 0.75), rgba(9, 20, 38, 0));
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lightbox */
.sb-gal-lightbox .mud-dialog-title {
    padding-bottom: 0;
}

.sb-gal-lb-counter {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-on-surface-variant);
}

.sb-gal-lb {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sb-gal-lb-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sb-primary);
    border-radius: 16px;
    overflow: hidden;
    min-height: 200px;
}

.sb-gal-lb-stage img {
    display: block;
    max-width: 100%;
    max-height: 72vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sb-gal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--sb-primary);
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.sb-gal-nav:hover { background: #fff; }
.sb-gal-nav:disabled { opacity: 0.25; cursor: default; }
.sb-gal-nav-prev { left: 12px; }
.sb-gal-nav-next { right: 12px; }

.sb-gal-lb-caption {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 24px;
}

.sb-gal-lb-caption > .mud-input-control { flex: 1; }

.sb-gal-lb-caption p {
    flex: 1;
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--sb-on-surface);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sb-gal-lb-caption-actions {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.sb-gal-lb-caption-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: none;
    background: transparent;
    color: var(--sb-on-surface-variant);
    font-family: var(--sb-font);
    font-size: 14px;
    cursor: pointer;
}

.sb-gal-lb-caption-add:hover { color: var(--sb-on-surface); text-decoration: underline; }

.sb-gal-lb-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    line-height: 18px;
    color: var(--sb-on-surface-variant);
}

.sb-gal-lb-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sb-gal-lb-meta .mud-icon-root {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.sb-gal-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: var(--sb-surface-container);
    color: var(--sb-on-surface-variant);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    text-decoration: none;
}

.sb-gal-chip:hover { background: var(--sb-surface-container-high); color: var(--sb-on-surface); }

.sb-gal-lb-delete {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 4px 10px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--sb-error);
    font-family: var(--sb-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.sb-gal-lb-delete:hover { background: rgba(186, 26, 26, 0.08); }

/* Riadok ikon (info, popis, zmazať) - len na mobile, na desktope sú akcie textové. */
.sb-gal-lb-tools { display: none; }

/* Lightbox na mobile: bez karty dialógu - fotka na celú šírku zariadenia, zvyšok plochy stmavený.
   Akcie sú len ikony pod fotkou; autor a dátum sa ukážu až po kliknutí na ikonu Info
   (.sb-gal-lb-info-open), popis sa upravuje v samostatnom dialógu (.sb-gal-caption-dialog). */
@media (max-width: 700px) {
    .mud-overlay.sb-gal-lb-backdrop .mud-overlay-scrim {
        border-color: rgba(0, 0, 0, 0.85);
        background-color: rgba(0, 0, 0, 0.85);
    }

    .mud-dialog.sb-gal-lightbox {
        width: 100%;
        max-width: 100%;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: #fff;
    }

    .sb-gal-lightbox .mud-dialog-title {
        padding: 12px 16px 8px;
    }

    .sb-gal-lightbox .mud-dialog-title .mud-button-close {
        color: #fff;
    }

    .sb-gal-lightbox .mud-dialog-content {
        padding: 0 0 16px;
    }

    .sb-gal-lightbox .sb-gal-lb-counter {
        color: rgba(255, 255, 255, 0.8);
    }

    .sb-gal-lb-stage {
        background: transparent;
        border-radius: 0;
        margin: 0;
    }

    .sb-gal-lb-stage img {
        width: 100%;
        max-height: 80dvh;
    }

    .sb-gal-nav {
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.7);
    }

    .sb-gal-nav-prev { left: 8px; }
    .sb-gal-nav-next { right: 8px; }

    .sb-gal-lb { gap: 8px; }

    .sb-gal-lb-tools {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: -4px;
        padding: 0 8px 0 16px;
    }

    .sb-gal-lb-tools-spacer { flex: 1 1 auto; }

    /* Dlhý názov udalosti sa skráti, ikony ostanú celé. */
    .sb-gal-lb-tools .sb-gal-chip { min-width: 0; flex: 0 1 auto; }
    .sb-gal-lb-tools .sb-gal-chip .mud-icon-root { flex: none; font-size: 16px; width: 16px; height: 16px; }
    .sb-gal-lb-tools .sb-gal-chip-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .sb-gal-lb-tools .mud-icon-button { flex: none; }
    .sb-gal-lb-meta .sb-gal-chip { display: none; }

    .sb-gal-lb-tools .mud-icon-button { color: rgba(255, 255, 255, 0.85); }
    .sb-gal-lb-tools .mud-icon-button.sb-gal-lb-tool-active { color: #fff; background: rgba(255, 255, 255, 0.15); }
    .sb-gal-lb-tools .mud-icon-button.sb-gal-lb-tool-delete { color: #ffb4ab; }

    .sb-gal-lb-caption,
    .sb-gal-lb-meta {
        padding: 0 16px;
    }

    .sb-gal-lb-caption { min-height: 0; }
    .sb-gal-lb-caption:empty { display: none; }
    .sb-gal-lb-caption p { color: #fff; }

    /* Úprava popisu a mazanie idú cez ikony vyššie. */
    .sb-gal-lb-caption .mud-icon-button,
    .sb-gal-lb-caption-add,
    .sb-gal-lb-delete {
        display: none;
    }

    .sb-gal-lb-meta { color: rgba(255, 255, 255, 0.75); }
    .sb-gal-lb-meta > span { display: none; }
    .sb-gal-lb-info-open .sb-gal-lb-meta > span { display: inline-flex; }

    .sb-gal-lightbox .sb-gal-chip {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }
}

/* Nastavenia tímu → Galéria */
.sb-ts-gallery-policy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.sb-ts-gallery-uploaders {
    padding: 12px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
    margin-bottom: 16px;
}

.sb-ts-gallery-uploaders-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.sb-gal-uploaders {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sb-gal-uploader-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 10px;
    border-radius: 9999px;
    background: var(--sb-surface-container-high);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: var(--sb-on-surface);
}

.sb-gal-uploader-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--sb-on-surface-variant);
    cursor: pointer;
}

.sb-gal-uploader-chip button:hover { background: rgba(9, 20, 38, 0.08); color: var(--sb-on-surface); }

@media (max-width: 700px) {
    .sb-gal-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 6px;
    }

    .sb-gal-head h1 {
        font-size: 26px;
        line-height: 32px;
    }

    .sb-gal-lb-stage img { max-height: 60vh; }
}

/* ---------- Verejné zdieľanie: karta ShareLinkBox (docs/zdielanie.md) ---------- */

.sb-share {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    font-family: var(--sb-font);
}

.sb-share-on {
    border-color: rgba(0, 153, 217, 0.35);
    background: linear-gradient(180deg, rgba(0, 153, 217, 0.07), transparent 70%), var(--sb-surface-container-lowest);
}

.sb-share-head { display: flex; align-items: flex-start; gap: 12px; }

.sb-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 153, 217, 0.12);
    color: var(--sb-tertiary-accent);
}

.sb-share-head h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--sb-on-surface); }
.sb-share-head p { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--sb-on-surface-variant); }

.sb-share-url { display: flex; gap: 8px; }

.sb-share-url input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--sb-outline-variant);
    background: var(--sb-surface-container-low);
    font: 500 13px/20px var(--sb-font);
    color: var(--sb-on-surface);
}

.sb-share-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: var(--sb-primary-container);
    color: var(--sb-on-primary);
    cursor: pointer;
}

.sb-share-copy:hover { background: var(--sb-inverse-surface); }
.sb-share-copy .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }
.sb-share-qr-btn { background: var(--sb-surface-container-high); color: var(--sb-on-surface); }
.sb-share-qr-btn:hover { background: var(--sb-surface-container-highest); }

/* Dialóg s QR kódom verejnej adresy: biely štvorec s okrajom, pod ním vysvetlenie a adresa. */
.sb-share-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 320px; }
.sb-share-qr-code { width: min(240px, 70vw); padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--sb-outline-variant); }
.sb-share-qr-code svg { display: block; width: 100%; height: auto; }
.sb-share-qr-text { margin: 0; font-size: 14px; line-height: 20px; text-align: center; color: var(--sb-on-surface-variant); }
.sb-share-qr-url { font-size: 12px; line-height: 16px; word-break: break-all; text-align: center; color: var(--sb-tertiary-accent); text-decoration: none; }
.sb-share-qr-url:hover { text-decoration: underline; }
.sb-share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-share-off { color: var(--sb-error); }

.sb-share-team {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sb-tertiary-accent);
    text-decoration: none;
}

.sb-share-team .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }
.sb-share-team .mud-icon-root:last-child { margin-left: auto; }
.sb-comp-share { margin-top: 24px; }
.sb-ed-chip-shared { background: rgba(0, 153, 217, 0.12); color: #0077b6; }

/* ---------- Verejné stránky zdieľaných položiek (/shared/team/…, SSR bez prihlásenia) ---------- */

.sb-sh-body {
    min-height: 100vh;
    background: var(--sb-surface);
    font-family: var(--sb-font);
    color: var(--sb-on-surface);
}

.sb-sh-top {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 24px;
    background: var(--sb-surface-container-lowest);
    border-bottom: 1px solid var(--sb-outline-variant);
}

.sb-sh-top img { display: block; height: 34px; }

.sb-sh-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--sb-primary-container);
    color: var(--sb-on-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.sb-sh-login:hover { background: var(--sb-inverse-surface); }

.sb-sh-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.sb-sh-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--sb-on-surface-variant); }
.sb-sh-crumbs a { color: var(--sb-tertiary-accent); font-weight: 600; text-decoration: none; }
.sb-sh-crumbs a:hover { text-decoration: underline; }

.sb-sh-hero {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border-radius: 16px;
    background: var(--sb-primary-container);
    color: var(--sb-on-primary);
}

.sb-sh-hero h1 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -0.01em; }
.sb-sh-hero h1:focus { outline: none; }
.sb-sh-hero .sb-sh-sub { font-size: 14px; color: var(--sb-on-primary-container); }
.sb-sh-hero p { margin: 0; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, 0.85); white-space: pre-line; }
.sb-sh-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.sb-sh-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.sb-sh-chip .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }
.sb-sh-chip.accent { background: var(--sb-secondary-container); }
.sb-sh-chip.danger { background: #ffdad6; color: #93000a; }
/* Chip-odkaz (sezóna udalosti) - rovnaký vzhľad, na hover zosvetlie. */
a.sb-sh-chip-link { text-decoration: none; }
a.sb-sh-chip-link:hover { background: rgba(255, 255, 255, 0.28); }
.sb-sh-hero-date { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.sb-sh-hero-date .mud-icon-root { font-size: 20px; width: 20px; height: 20px; }

.sb-sh-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 900px) { .sb-sh-grid { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }
.sb-sh-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.sb-sh-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
}

.sb-sh-card h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; }
.sb-sh-card h2 .mud-icon-root { color: var(--sb-secondary-container); }
.sb-sh-card h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--sb-on-surface-variant); text-transform: uppercase; letter-spacing: 0.04em; }
.sb-sh-card p { margin: 0; font-size: 15px; line-height: 22px; white-space: pre-line; }
.sb-sh-empty { color: var(--sb-on-surface-variant); font-size: 14px; }

.sb-sh-facts { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
.sb-sh-fact { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--sb-surface-container-low); font-size: 14px; }
.sb-sh-fact dt { margin: 0; color: var(--sb-on-surface-variant); }
.sb-sh-fact dd { margin: 0; font-weight: 700; text-align: right; }
.sb-sh-fact dd a { color: var(--sb-tertiary-accent); text-decoration: none; }
.sb-sh-fact dd a:hover { text-decoration: underline; }

.sb-sh-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--sb-surface-container-high); }
.sb-sh-summary { display: flex; flex-direction: column; gap: 8px; }
.sb-sh-summary-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.sb-sh-summary-row span { display: inline-flex; align-items: center; gap: 8px; }
.sb-sh-summary-row strong { font-weight: 700; }
.sb-sh-dot { width: 12px; height: 12px; border-radius: 999px; flex-shrink: 0; }
.sb-sh-join { background: #059669; }
.sb-sh-substitute { background: var(--sb-secondary-container); }
.sb-sh-dontknow { background: var(--sb-tertiary-accent); }
.sb-sh-deny { background: #ba1a1a; }

.sb-sh-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }

.sb-sh-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--sb-surface-container-low);
    font-size: 14px;
    font-weight: 500;
}

.sb-sh-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--sb-primary-container);
    color: var(--sb-on-primary);
    font-size: 12px;
    font-weight: 700;
}

.sb-sh-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

.sb-sh-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(9, 20, 38, 0.05);
    color: var(--sb-on-surface);
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.sb-sh-item:hover { box-shadow: 0 6px 16px rgba(9, 20, 38, 0.12); transform: translateY(-1px); }
.sb-sh-item-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sb-secondary); }
.sb-sh-item-kind .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }
.sb-sh-item-title { font-size: 17px; font-weight: 700; line-height: 22px; }
.sb-sh-item-sub { font-size: 13px; color: var(--sb-on-surface-variant); }
.sb-sh-item-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.sb-sh-item-date .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }

.sb-sh-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sb-sh-photo { position: relative; display: block; overflow: hidden; border-radius: 8px; background: var(--sb-surface-container-high); min-height: 90px; max-height: 260px; }
.sb-sh-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-sh-photo-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 6px; background: linear-gradient(transparent, rgba(9, 20, 38, 0.7)); color: #fff; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-sh-games { display: flex; flex-direction: column; }
.sb-sh-game-x > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.sb-sh-game-x > summary::-webkit-details-marker { display: none; }
.sb-sh-game-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-sh-game-chev { display: inline-flex; color: var(--sb-on-surface-variant); transition: transform 0.15s ease; }
.sb-sh-game-x[open] > summary .sb-sh-game-chev { transform: rotate(180deg); }
.sb-sh-game-x > summary:hover .sb-sh-game-chev { color: var(--sb-tertiary-accent); }
.sb-sh-game-detail { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 12px; padding: 12px; border-radius: 8px; background: var(--sb-surface-container-low); }
@media (min-width: 720px) { .sb-sh-game-detail { grid-template-columns: 3fr 2fr; } }
.sb-sh-lineups { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sb-sh-lineup h4, .sb-sh-goals h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sb-on-surface-variant); }
.sb-sh-lineup ul, .sb-sh-goals ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sb-sh-lineup li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sb-sh-jersey { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--sb-primary-container); color: var(--sb-on-primary); font-size: 12px; font-weight: 700; }
.sb-sh-ga { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: rgba(253, 118, 26, 0.18); color: var(--sb-secondary); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sb-sh-tl { display: flex; flex-direction: column; }
.sb-sh-tl-head { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sb-on-surface-variant); }
.sb-sh-tl-head span:first-child { text-align: right; }
.sb-sh-tl-row { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 8px; align-items: center; position: relative; padding: 8px 0; }
.sb-sh-tl-row::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--sb-outline-variant); z-index: 0; }
.sb-sh-tl-row:first-of-type::before { top: 50%; }
.sb-sh-tl-row:last-of-type::before { bottom: 50%; }
.sb-sh-tl-cell { min-width: 0; font-size: 14px; line-height: 18px; }
.sb-sh-tl-row.home .sb-sh-tl-cell:first-child { text-align: right; }
.sb-sh-tl-assist { display: block; font-size: 12px; }
.sb-sh-tl-mid { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; background: var(--sb-surface-container-low); }
.sb-sh-tl-tally { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.sb-sh-tl-tally ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.sb-sh-tl-tally ul.home { text-align: right; }
.sb-sh-tl-tally ul.home li { justify-content: flex-end; }
.sb-sh-tl-minute { font-size: 11px; font-weight: 600; color: var(--sb-on-surface-variant); }
.sb-sh-tl-score { min-width: 44px; padding: 2px 6px; border-radius: 999px; background: var(--sb-primary-container); color: var(--sb-on-primary); font-size: 12px; font-weight: 700; text-align: center; }
.sb-sh-goals li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.sb-sh-minute { min-width: 32px; font-weight: 700; color: var(--sb-secondary); }
.sb-sh-goal-text { flex: 1; min-width: 0; }
.sb-sh-goal-squad { font-size: 12px; color: var(--sb-on-surface-variant); white-space: nowrap; }
/* Záložky verejnej sezóny - vzhľad zo Súťaží (.sb-comp-tab), ale ako odkazy s ?tab=. */
.sb-sh-tabs { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--sb-outline-variant); margin-bottom: -4px; }
.sb-sh-tabs a { text-decoration: none; white-space: nowrap; font-size: 17px; line-height: 24px; }
.sb-sh-pane[hidden] { display: none; }
.sb-sh-game { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--sb-surface-container-high); }
.sb-sh-game:last-child { border-bottom: none; }
.sb-sh-game-meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--sb-on-surface-variant); }
.sb-sh-game-main { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 500; }
.sb-sh-score { font-weight: 700; white-space: nowrap; }
/* Pavúk je široký ako počet kôl - na telefóne sa posúva vodorovne v rámci karty, nie celá stránka. */
.sb-sh-scroll { overflow-x: auto; min-width: 0; max-width: 100%; margin: 0 -8px; padding: 0 8px; }
.sb-sh-card > * { min-width: 0; }
.sb-sh-muted { color: var(--sb-on-surface-variant); }

.sb-sh-foot {
    padding: 24px 16px 32px;
    text-align: center;
    font-size: 13px;
    color: var(--sb-on-surface-variant);
}

.sb-sh-foot a { color: var(--sb-tertiary-accent); font-weight: 600; text-decoration: none; }

.sb-sh-notfound { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; text-align: center; }
.sb-sh-notfound .mud-icon-root { font-size: 56px; width: 56px; height: 56px; color: var(--sb-outline); }
.sb-sh-notfound h1 { margin: 0; font-size: 24px; }
.sb-sh-notfound p { margin: 0; color: var(--sb-on-surface-variant); max-width: 420px; }

/* Verejné stránky používajú tabuľky a pavúk zo Súťaží; tu len drobné odchýlky pre statické SSR. */
.sb-sh-card .sb-comp-slot { cursor: default; }
.sb-sh-card .sb-table-wrap { margin: 0 -8px; }

/* Nastavenia tímu - sekcia Zdieľania (docs/zdielanie.md). */
.sb-ts-share-badge { color: var(--sb-tertiary-accent); background: rgba(0, 153, 217, 0.12); }
.sb-ts-share-badge .mud-icon-root { font-size: 20px; width: 20px; height: 20px; }
.sb-ts-share-row > .sb-sm-item-main { min-width: 0; }
.sb-ts-share-url { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sb-tertiary-accent); text-decoration: none; }
.sb-ts-share-url:hover { text-decoration: underline; }
.sb-ts-share-actions { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 8px; justify-content: flex-end; }
.sb-ts-share-off { color: var(--sb-error); }
@media (max-width: 600px) {
    .sb-ts-share-row { flex-wrap: wrap; }
    .sb-ts-share-actions { width: 100%; justify-content: flex-start; }
}