/* 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);
}

/* 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: var(--sb-secondary); }
.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);
}

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

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

.sb-member-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    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);
}

/* 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);
}

/* ---------- 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-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-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-block;
    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-planned { background: rgba(16, 185, 129, 0.1); color: #059669; }
.sb-ed-chip-canceled { background: #ffdad6; color: #93000a; }
.sb-ed-chip-type { background: rgba(253, 118, 26, 0.2); color: var(--sb-secondary); }

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

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

.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 Vaša účasť: poznámka hore, pod ňou tlačidlá na celú šírku s rovnakou veľkosťou. */
.sb-ed-rsvp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: var(--sb-surface-container-low);
}

/* Poznámka: bez rámika, pozadie panela, len spodná linka. */
.sb-ed-rsvp-note .mud-input {
    background: transparent;
}

.sb-ed-rsvp-note .mud-input.mud-input-underline:before {
    border-bottom: 1px solid rgba(197, 198, 205, 0.6);
}

.sb-ed-rsvp-note .mud-input.mud-input-underline:after {
    border-bottom: 2px solid var(--sb-primary);
}

.sb-ed-segment {
    display: flex;
    width: 100%;
    background: var(--sb-surface-container-highest);
    border: none;
}

.sb-ed-segment button {
    flex: 1 1 0;
    text-align: center;
}

.sb-ed-segment button:disabled { cursor: default; opacity: 0.6; }

/* Farby odpovedí: Prídem zelená, Neprídem červená, Náhradník modrá, Ešte neviem navy. */
.sb-ed-segment button.rsvp-join { color: #047857; }
.sb-ed-segment button.rsvp-deny { color: #93000a; }
.sb-ed-segment button.rsvp-substitute { color: #004c6e; }
.sb-ed-segment button.rsvp-join.active { background: #059669; color: #ffffff; }
.sb-ed-segment button.rsvp-deny.active { background: var(--sb-error); color: #ffffff; }
.sb-ed-segment button.rsvp-substitute.active { background: #0099d9; color: #ffffff; }

/* 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;
}

/* So správou účasti sú karty širšie, aby sa vošli tlačidlá stavu. */
.sb-ed-people-wide {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}

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

.sb-ed-person-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.sb-ed-person-actions button {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--sb-surface-container-lowest);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.sb-ed-person-actions button .mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.sb-ed-person-actions button:hover { opacity: 1; }
.sb-ed-person-actions button:disabled { cursor: default; }

.sb-ed-person-actions button.sb-ed-note-btn {
    margin-right: 4px;
    color: var(--sb-on-surface-variant);
}

.sb-ed-person-actions button.active {
    opacity: 1;
    border-color: currentColor;
    background: var(--sb-surface-container-highest);
}

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

.sb-ed-history-main p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--sb-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* Forma hráča: 10 odznakov posledných zápasov (zelená výhra, červená prehra, modrá remíza, sivá nehral);
   na úzkej obrazovke sa zalomia do dvoch riadkov. */
.sb-comp-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    max-width: 240px;
}

.sb-comp-form-badge {
    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; }
}

/* 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;
}

/* 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); }

/* 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); }

/* Lišta so zadaním účasti: poznámka + tri okrúhle tlačidlá. */
.sb-nx-rsvp {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid rgba(197, 198, 205, 0.2);
    background: var(--sb-surface-container-lowest);
}

.sb-nx-note { flex: 1; }

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

.sb-nx-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-nx-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-nx-rsvp {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .sb-nx-buttons {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .sb-nx-answer { display: none; }

    .sb-nx-btn {
        flex: 1 1 96px;
        width: auto;
        gap: 6px;
        padding: 0 12px;
    }

    .sb-nx-btn-label {
        display: inline;
        font-size: 12px;
        line-height: 16px;
        font-weight: 600;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }
}

.sb-nx-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-nx-btn .mud-icon-root { font-size: 20px; width: 20px; height: 20px; }
.sb-nx-btn:active { transform: scale(0.95); }
.sb-nx-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-nx-btn-join { border-color: #10b981; color: #047857; }
.sb-nx-btn-join:hover { background: rgba(16, 185, 129, 0.15); }
.sb-nx-btn-join.active { background: #10b981; border-color: #10b981; color: #ffffff; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25); }
.sb-nx-btn-deny { border-color: var(--sb-error); color: #93000a; }
.sb-nx-btn-deny:hover { background: #ffdad6; }
.sb-nx-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-nx-btn-substitute { border-color: #0099d9; color: #004c6e; }
.sb-nx-btn-substitute:hover { background: rgba(0, 153, 217, 0.15); }
.sb-nx-btn-substitute.active { background: #0099d9; border-color: #0099d9; color: #ffffff; box-shadow: 0 0 0 4px rgba(0, 153, 217, 0.25); }
.sb-nx-btn-dontknow { border-color: rgba(9, 20, 38, 0.35); color: var(--sb-primary); }
.sb-nx-btn-dontknow:hover { background: var(--sb-surface-container-high); }
.sb-nx-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); }

/* Text aktuálnej odpovede pred tlačidlami vo farbe stavu. */
.sb-nx-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;
}

.sb-nx-answer-join { color: #047857; }
.sb-nx-answer-deny { color: #93000a; }
.sb-nx-answer-substitute { color: #004c6e; }
.sb-nx-answer-dontknow { color: var(--sb-primary); }

/* 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); }
}

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

/* 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 ---------- */

/* Š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: riadky členov s číslom dresu vpravo. */
.sb-sm-roster {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

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

/* Bočná karta s vysvetlením družstiev: text + odkaz na Súťaže. */
.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; }
}