/**
 * Swiss Floorball API Public/Frontend Styles
 * Modern, responsive design inspired by Swiss Unihockey
 * Mobile-first approach with emphasis on responsiveness
 */

/* Color Scheme - Swiss Unihockey Branding */
:root {
    --sfa-primary: #0066cc;
    --sfa-primary-dark: #004c99;
    --sfa-primary-light: #3385d6;
    --sfa-secondary: #ff6600;
    --sfa-secondary-dark: #cc5200;
    --sfa-light-bg: #f8f9fa;
    --sfa-border: #e0e0e0;
    --sfa-text: #2c3e50;
    --sfa-text-light: #7f8c8d;
    --sfa-success: #27ae60;
    --sfa-warning: #f39c12;
    --sfa-danger: #e74c3c;
}

/* Design tokens (--sfa-sys-*). Defined in the plugin scope only; :root and dark mode stay untouched.
   Tokens with a legacy counterpart reference the --sfa-* variable so :root overrides keep working. */
.swiss-floorball-plugin {
    /* Color */
    --sfa-sys-color-primary: var(--sfa-primary, #0066cc);
    --sfa-sys-color-on-primary: #ffffff;
    --sfa-sys-color-primary-container: #d6e6f7;
    --sfa-sys-color-on-primary-container: #00294d;
    --sfa-sys-color-secondary: var(--sfa-secondary, #ff6600);
    --sfa-sys-color-on-secondary: #ffffff;
    --sfa-sys-color-secondary-container: #ffe0cc;
    --sfa-sys-color-on-secondary-container: #4d1f00;
    --sfa-sys-color-tertiary: #7a5900;
    --sfa-sys-color-on-tertiary: #ffffff;
    --sfa-sys-color-tertiary-container: #ffe4a8;
    --sfa-sys-color-on-tertiary-container: #261a00;
    --sfa-sys-color-error: var(--sfa-danger, #e74c3c);
    --sfa-sys-color-on-error: #ffffff;
    --sfa-sys-color-surface: var(--sfa-light-bg, #f8f9fa);
    --sfa-sys-color-on-surface: var(--sfa-text, #2c3e50);
    --sfa-sys-color-on-surface-variant: var(--sfa-text-light, #7f8c8d);
    --sfa-sys-color-surface-container: #eef1f4;
    --sfa-sys-color-outline: var(--sfa-border, #e0e0e0);
    --sfa-sys-color-error-container: #fbe3df;
    --sfa-sys-color-on-error-container: #5c110a;
    --sfa-sys-color-success: var(--sfa-success, #27ae60);
    --sfa-sys-color-success-container: #d9f2e3;
    --sfa-sys-color-on-success-container: #0b3a1f;
    --sfa-sys-color-warning: var(--sfa-warning, #f39c12);
    --sfa-sys-color-warning-container: #fdebc8;
    --sfa-sys-color-on-warning-container: #3d2700;
    --sfa-sys-color-focus-ring: #00509e;

    /* State layers */
    --sfa-sys-state-hover-opacity: 0.08;
    --sfa-sys-state-focus-opacity: 0.1;
    --sfa-sys-state-pressed-opacity: 0.1;

    /* Motion */
    --sfa-sys-motion-duration-short: 150ms;
    --sfa-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);

    /* Typography */
    --sfa-sys-font-family: 'SFA Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sfa-sys-font-weight-regular: 400;
    --sfa-sys-font-weight-medium: 500;
    --sfa-sys-font-weight-bold: 700;
    --sfa-sys-font-size-label: 0.75rem;
    --sfa-sys-font-size-body: 0.875rem;
    --sfa-sys-font-size-title: 1rem;
    --sfa-sys-font-size-headline: 1.5rem;
    --sfa-sys-font-size-display: 2rem;
    --sfa-sys-line-height-tight: 1.25;
    --sfa-sys-line-height-body: 1.5;

    /* Shape */
    --sfa-sys-shape-corner-none: 0;
    --sfa-sys-shape-corner-xs: 4px;
    --sfa-sys-shape-corner-sm: 8px;
    --sfa-sys-shape-corner-md: 12px;
    --sfa-sys-shape-corner-lg: 16px;
    --sfa-sys-shape-corner-xl: 28px;
    --sfa-sys-shape-corner-full: 9999px;

    /* Elevation */
    --sfa-sys-elevation-0: none;
    --sfa-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --sfa-sys-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
    --sfa-sys-elevation-3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
    --sfa-sys-elevation-4: 0 2px 3px rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
    --sfa-sys-elevation-5: 0 4px 4px rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
    font-family: 'SFA Roboto', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --swfl-icon-size: 1em;
    --swfl-icon-color: currentColor;
    scroll-behavior: smooth;
}

/* Self-hosted Roboto (variable font, Latin + Latin Extended) — no request to Google at runtime */
@font-face {
    font-family: 'SFA Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/roboto-v51-latin-ext.woff2') format('woff2-variations'), url('../../fonts/roboto-v51-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'SFA Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/roboto-v51-latin.woff2') format('woff2-variations'), url('../../fonts/roboto-v51-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inline SVG icons (Material Symbols) */
.swiss-floorball-plugin .swfl-icon {
    display: inline-block;
    vertical-align: -0.125em;
    width: var(--swfl-icon-size);
    height: var(--swfl-icon-size);
    fill: var(--swfl-icon-color);
}

.swiss-floorball-plugin .sfa-icon {
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

/* Reset and Base Styles */
.swiss-floorball-plugin .swiss-floorball-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Responsive Typography */
.swiss-floorball-plugin .swiss-floorball-container h1,
.swiss-floorball-plugin .swiss-floorball-container h2,
.swiss-floorball-plugin .swiss-floorball-container h3,
.swiss-floorball-plugin .swiss-floorball-container h4,
.swiss-floorball-plugin .swiss-floorball-container h5 {
    color: var(--sfa-text);
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.swiss-floorball-plugin .swiss-floorball-container h1 {
    font-size: clamp(24px, 5vw, 32px);
}

.swiss-floorball-plugin .swiss-floorball-container h2 {
    font-size: clamp(20px, 4vw, 26px);
}

.swiss-floorball-plugin .swiss-floorball-container h3 {
    font-size: clamp(18px, 3.5vw, 22px);
}

.swiss-floorball-plugin .swiss-floorball-container h4 {
    font-size: clamp(16px, 3vw, 20px);
}

.swiss-floorball-plugin .swiss-floorball-container h5 {
    font-size: clamp(14px, 2.5vw, 18px);
}

/* Enhanced Card Styling - Fully Responsive */
.swiss-floorball-plugin .card {
    background: white;
    border: 1px solid var(--sfa-border);
    border-radius: 12px;
    padding: clamp(16px, 3vw, 24px);
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.swiss-floorball-plugin .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--sfa-primary) 0%, var(--sfa-secondary) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.swiss-floorball-plugin .card:hover {
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.12);
    transform: translateY(-4px);
    border-color: var(--sfa-primary-light);
}

.swiss-floorball-plugin .card:hover::before {
    opacity: 1;
}

.swiss-floorball-plugin .card-body {
    padding: clamp(12px, 2vw, 20px);
}

.swiss-floorball-plugin .card-title {
    font-size: clamp(16px, 3vw, 20px);
    font-weight: 600;
    color: var(--sfa-text);
    margin-bottom: 12px;
}

.swiss-floorball-plugin .card-text {
    font-size: clamp(13px, 2.5vw, 15px);
    color: var(--sfa-text-light);
    line-height: 1.6;
}

/* Visually hidden text (table captions) — own class because .screen-reader-text depends on the theme */
.swiss-floorball-plugin .sfa-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Data tables (Material 3 look, tokens only).
   The table keeps its native table semantics; narrow viewports scroll horizontally in the
   plugin container (see the max-width: 768px block) instead of restructuring the rows. */
.swiss-floorball-plugin .table,
.swiss-floorball-plugin .sfa-data-table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--sfa-sys-color-surface-container);
    color: var(--sfa-sys-color-on-surface);
    font-family: var(--sfa-sys-font-family);
    line-height: var(--sfa-sys-line-height-body);
    border-radius: var(--sfa-sys-shape-corner-md);
    border: 1px solid var(--sfa-sys-color-outline);
    margin-bottom: 20px;
}

.swiss-floorball-plugin .table thead,
.swiss-floorball-plugin .sfa-data-table thead {
    background: var(--sfa-sys-color-surface-container);
}

.swiss-floorball-plugin .table th,
.swiss-floorball-plugin .sfa-data-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 16px;
    text-align: left;
    white-space: nowrap;
    background: var(--sfa-sys-color-surface-container);
    color: var(--sfa-sys-color-on-surface);
    font-size: var(--sfa-sys-font-size-label);
    font-weight: var(--sfa-sys-font-weight-medium);
    line-height: var(--sfa-sys-line-height-tight);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--sfa-sys-color-outline);
}

/* Row headers (key/value tables) are not part of the sticky header row. */
.swiss-floorball-plugin .table tbody th,
.swiss-floorball-plugin .sfa-data-table tbody th {
    position: static;
}

.swiss-floorball-plugin .table td,
.swiss-floorball-plugin .sfa-data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sfa-sys-color-outline);
    color: var(--sfa-sys-color-on-surface);
    font-size: var(--sfa-sys-font-size-body);
    line-height: var(--sfa-sys-line-height-body);
}

.swiss-floorball-plugin .table tbody tr,
.swiss-floorball-plugin .sfa-data-table tbody tr {
    transition: background-color 150ms ease;
}

/* State layer: on-surface at 8 % (hover) / 12 % (focus). The solid fallback is for browsers without color-mix(). */
.swiss-floorball-plugin .table tbody tr:hover,
.swiss-floorball-plugin .sfa-data-table tbody tr:hover,
.swiss-floorball-plugin .table tbody tr:focus-within,
.swiss-floorball-plugin .sfa-data-table tbody tr:focus-within {
    background-color: var(--sfa-sys-color-outline);
}

@supports (background-color: color-mix(in srgb, red 8%, transparent)) {

    .swiss-floorball-plugin .table tbody tr:hover,
    .swiss-floorball-plugin .sfa-data-table tbody tr:hover {
        background-color: color-mix(in srgb, var(--sfa-sys-color-on-surface) 8%, transparent);
    }

    .swiss-floorball-plugin .table tbody tr:focus-within,
    .swiss-floorball-plugin .sfa-data-table tbody tr:focus-within {
        background-color: color-mix(in srgb, var(--sfa-sys-color-on-surface) 12%, transparent);
    }
}

.swiss-floorball-plugin .table tbody tr:last-child td,
.swiss-floorball-plugin .sfa-data-table tbody tr:last-child td {
    border-bottom: none;
}

.swiss-floorball-plugin .table img,
.swiss-floorball-plugin .sfa-data-table img {
    max-width: 28px;
    height: auto;
    vertical-align: middle;
}

/* Links in tables and cards: 48 px touch target and a visible focus ring. */
.swiss-floorball-plugin .table a,
.swiss-floorball-plugin .sfa-data-table a,
.swiss-floorball-plugin .sfa-card a {
    display: inline-flex;
    align-items: center;
    min-width: 48px;
    min-height: 48px;
    color: var(--sfa-sys-color-primary);
    font-weight: var(--sfa-sys-font-weight-medium);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 150ms ease;
}

.swiss-floorball-plugin .table a:hover,
.swiss-floorball-plugin .sfa-data-table a:hover,
.swiss-floorball-plugin .sfa-card a:hover {
    border-bottom-color: var(--sfa-sys-color-primary);
}

.swiss-floorball-plugin .table a:focus-visible,
.swiss-floorball-plugin .sfa-data-table a:focus-visible,
.swiss-floorball-plugin .sfa-card a:focus-visible,
.swiss-floorball-plugin .sfa-card button:focus-visible {
    outline: 2px solid var(--sfa-sys-color-primary);
    outline-offset: 2px;
}

.swiss-floorball-plugin .sfa-card button {
    min-width: 48px;
    min-height: 48px;
}

/* Cards: elevated (default), filled and outlined variants. */
.swiss-floorball-plugin .sfa-card {
    box-sizing: border-box;
    padding: 16px;
    margin-bottom: 20px;
    background: var(--sfa-sys-color-surface-container);
    color: var(--sfa-sys-color-on-surface);
    border: 1px solid transparent;
    border-radius: var(--sfa-sys-shape-corner-md);
    box-shadow: var(--sfa-sys-elevation-1);
}

.swiss-floorball-plugin .sfa-card--elevated {
    background: var(--sfa-sys-color-surface-container);
    box-shadow: var(--sfa-sys-elevation-1);
}

.swiss-floorball-plugin .sfa-card--filled {
    background: var(--sfa-sys-color-surface-container);
    box-shadow: var(--sfa-sys-elevation-0);
}

.swiss-floorball-plugin .sfa-card--outlined {
    background: var(--sfa-sys-color-surface);
    border-color: var(--sfa-sys-color-outline);
    box-shadow: var(--sfa-sys-elevation-0);
}

/* Responsive Grid for Cards */
.swiss-floorball-plugin .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(12px, 3vw, 20px);
}

.swiss-floorball-plugin .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.swiss-floorball-plugin .col,
.swiss-floorball-plugin .col-6,
.swiss-floorball-plugin .col-sm-6,
.swiss-floorball-plugin .col-md-4,
.swiss-floorball-plugin .col-lg-3 {
    padding: 0 12px;
    margin-bottom: 20px;
}

/* Mobile First Column Sizing */
.swiss-floorball-plugin .col {
    flex: 0 0 100%;
    max-width: 100%;
}

.swiss-floorball-plugin .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

/* Tablet */
@media screen and (min-width: 576px) {
    .swiss-floorball-plugin .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Desktop */
@media screen and (min-width: 768px) {
    .swiss-floorball-plugin .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media screen and (min-width: 992px) {
    .swiss-floorball-plugin .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Responsive Images */
.swiss-floorball-plugin .img-fluid {
    max-width: 100%;
    height: auto;
    display: block;
}

.swiss-floorball-plugin .rounded-start {
    border-radius: 8px;
}

/* Button Styling - Fully Responsive */
.swiss-floorball-plugin .button,
.swiss-floorball-plugin .btn,
.swiss-floorball-plugin .sfa-button,
.swiss-floorball-plugin .sfa-calendar-subscribe {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 48px;
    min-height: 48px;
    padding: 0 clamp(16px, 3vw, 24px);
    background: var(--sfa-sys-color-primary);
    color: var(--sfa-sys-color-on-primary);
    text-decoration: none;
    border-radius: var(--sfa-sys-shape-corner-full);
    font-family: var(--sfa-sys-font-family);
    font-weight: var(--sfa-sys-font-weight-medium);
    font-size: var(--sfa-sys-font-size-body);
    line-height: var(--sfa-sys-line-height-tight);
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    box-shadow: var(--sfa-sys-elevation-0);
    transition: box-shadow var(--sfa-sys-motion-duration-short) var(--sfa-sys-motion-easing-standard);
    text-align: center;
}

/* State layer: currentColor overlay so every variant shares one hover/focus/pressed rule. */
.swiss-floorball-plugin .button::before,
.swiss-floorball-plugin .btn::before,
.swiss-floorball-plugin .sfa-button::before,
.swiss-floorball-plugin .sfa-calendar-subscribe::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sfa-sys-motion-duration-short) var(--sfa-sys-motion-easing-standard);
}

.swiss-floorball-plugin .button:hover,
.swiss-floorball-plugin .btn:hover,
.swiss-floorball-plugin .sfa-button:hover,
.swiss-floorball-plugin .sfa-calendar-subscribe:hover {
    color: var(--sfa-sys-color-on-primary);
    text-decoration: none;
}

.swiss-floorball-plugin .button:hover::before,
.swiss-floorball-plugin .btn:hover::before,
.swiss-floorball-plugin .sfa-button:hover::before,
.swiss-floorball-plugin .sfa-calendar-subscribe:hover::before {
    opacity: var(--sfa-sys-state-hover-opacity);
}

.swiss-floorball-plugin .button:focus-visible::before,
.swiss-floorball-plugin .btn:focus-visible::before,
.swiss-floorball-plugin .sfa-button:focus-visible::before,
.swiss-floorball-plugin .sfa-calendar-subscribe:focus-visible::before {
    opacity: var(--sfa-sys-state-focus-opacity);
}

.swiss-floorball-plugin .button:active::before,
.swiss-floorball-plugin .btn:active::before,
.swiss-floorball-plugin .sfa-button:active::before,
.swiss-floorball-plugin .sfa-calendar-subscribe:active::before {
    opacity: var(--sfa-sys-state-pressed-opacity);
}

.swiss-floorball-plugin .button:focus-visible,
.swiss-floorball-plugin .btn:focus-visible,
.swiss-floorball-plugin .sfa-button:focus-visible,
.swiss-floorball-plugin .sfa-calendar-subscribe:focus-visible,
.swiss-floorball-plugin a:focus-visible {
    outline: 2px solid var(--sfa-sys-color-focus-ring);
    outline-offset: 2px;
}

/* Button variants (filled is the default above). */
.swiss-floorball-plugin .sfa-button--tonal,
.swiss-floorball-plugin .sfa-button--tonal:hover {
    background: var(--sfa-sys-color-primary-container);
    color: var(--sfa-sys-color-on-primary-container);
}

.swiss-floorball-plugin .sfa-button--outlined,
.swiss-floorball-plugin .sfa-button--outlined:hover {
    background: transparent;
    color: var(--sfa-sys-color-primary);
    border-color: var(--sfa-sys-color-outline);
}

.swiss-floorball-plugin .sfa-button--text,
.swiss-floorball-plugin .sfa-button--text:hover,
.swiss-floorball-plugin .sfa-calendar-subscribe,
.swiss-floorball-plugin .sfa-calendar-subscribe:hover {
    background: transparent;
    color: var(--sfa-sys-color-primary);
}

/* Text Utilities - Responsive */
.swiss-floorball-plugin .text-center {
    text-align: center;
}

.swiss-floorball-plugin .text-left {
    text-align: left;
}

.swiss-floorball-plugin .text-right {
    text-align: right;
}

/* Margin/Padding Utilities */
.swiss-floorball-plugin .mb-3 {
    margin-bottom: clamp(16px, 3vw, 24px);
}

.swiss-floorball-plugin .mt-3 {
    margin-top: clamp(16px, 3vw, 24px);
}

.swiss-floorball-plugin .p-3 {
    padding: clamp(16px, 3vw, 24px);
}

/* Game Score Display - Enhanced & Responsive */
.swiss-floorball-plugin .game-score-card {
    background: white;
    border: 1px solid var(--sfa-border);
    border-radius: 12px;
    padding: clamp(16px, 3vw, 24px);
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.swiss-floorball-plugin .game-score-card:hover {
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.15);
    transform: translateY(-4px);
}

.swiss-floorball-plugin .game-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 2vw, 12px);
}

.swiss-floorball-plugin .game-team img {
    max-width: clamp(40px, 10vw, 80px);
    height: auto;
}

.swiss-floorball-plugin .game-score {
    font-size: clamp(24px, 6vw, 36px);
    font-weight: 700;
    color: var(--sfa-primary);
}

.swiss-floorball-plugin .game-info {
    text-align: center;
    padding: clamp(12px, 2vw, 16px);
}

.swiss-floorball-plugin .game-info p {
    margin: clamp(4px, 1vw, 8px) 0;
    font-size: clamp(12px, 2.5vw, 14px);
    color: var(--sfa-text-light);
}

/* Loading State */
.swiss-floorball-plugin .loading {
    text-align: center;
    padding: clamp(30px, 5vw, 50px);
    color: var(--sfa-text-light);
}

.swiss-floorball-plugin .loading::before {
    content: "";
    display: inline-block;
    width: clamp(30px, 6vw, 40px);
    height: clamp(30px, 6vw, 40px);
    border: 4px solid var(--sfa-light-bg);
    border-top-color: var(--sfa-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Info boxes (banners) */
.swiss-floorball-plugin .sfa-info-box {
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: var(--sfa-sys-shape-corner-md);
    background: var(--sfa-sys-color-primary-container);
    color: var(--sfa-sys-color-on-primary-container);
    font-size: var(--sfa-sys-font-size-body);
    line-height: var(--sfa-sys-line-height-body);
}

.swiss-floorball-plugin .sfa-info-box > p {
    margin: 0;
}

.swiss-floorball-plugin .sfa-info-box--success {
    background: var(--sfa-sys-color-success-container);
    color: var(--sfa-sys-color-on-success-container);
}

.swiss-floorball-plugin .sfa-info-box--warning {
    background: var(--sfa-sys-color-warning-container);
    color: var(--sfa-sys-color-on-warning-container);
}

.swiss-floorball-plugin .sfa-info-box--danger {
    background: var(--sfa-sys-color-error-container);
    color: var(--sfa-sys-color-on-error-container);
}

/* Outlined text field (search). Styling only; the frontend renders no search input yet. */
.swiss-floorball-plugin .sfa-search-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    background: transparent;
    color: var(--sfa-sys-color-on-surface);
    border: 1px solid var(--sfa-sys-color-on-surface-variant);
    border-radius: var(--sfa-sys-shape-corner-xs);
    font-family: var(--sfa-sys-font-family);
    font-size: var(--sfa-sys-font-size-title);
    transition: border-color var(--sfa-sys-motion-duration-short) var(--sfa-sys-motion-easing-standard);
}

.swiss-floorball-plugin .sfa-search-input:hover {
    border-color: var(--sfa-sys-color-on-surface);
}

.swiss-floorball-plugin .sfa-search-input:focus {
    outline: none;
    border-color: var(--sfa-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--sfa-sys-color-primary);
}

.swiss-floorball-plugin .sfa-search-input[aria-invalid="true"] {
    border-color: var(--sfa-sys-color-error);
    box-shadow: inset 0 0 0 1px var(--sfa-sys-color-error);
}

/* Empty State */
.swiss-floorball-plugin .sfa-empty-state,
.swiss-floorball-plugin .empty-state {
    text-align: center;
    padding: clamp(40px, 8vw, 70px) clamp(16px, 3vw, 24px);
    color: var(--sfa-text-light);
    background: var(--sfa-light-bg);
    border-radius: 12px;
    border: 2px dashed var(--sfa-border);
}

.swiss-floorball-plugin .empty-state-icon {
    font-size: clamp(40px, 8vw, 56px);
    margin-bottom: clamp(12px, 2vw, 16px);
    opacity: 0.4;
}

.swiss-floorball-plugin .sfa-empty-state-text,
.swiss-floorball-plugin .empty-state-text {
    font-size: clamp(14px, 3vw, 16px);
    font-weight: 500;
}

/* Tablet Optimizations */
@media screen and (min-width: 576px) and (max-width: 991px) {
    .swiss-floorball-plugin .swiss-floorball-container {
        padding: 24px;
    }

    .swiss-floorball-plugin .card {
        padding: 20px;
    }
}

/* Desktop Optimizations */
@media screen and (min-width: 992px) {
    .swiss-floorball-plugin .swiss-floorball-container {
        padding: 30px;
    }

    .swiss-floorball-plugin .row {
        margin: 0 -16px;
    }

    .swiss-floorball-plugin .col,
    .swiss-floorball-plugin .col-6,
    .swiss-floorball-plugin .col-sm-6,
    .swiss-floorball-plugin .col-md-4,
    .swiss-floorball-plugin .col-lg-3 {
        padding: 0 16px;
    }
}

/* Print Styles */
@media print {

    .swiss-floorball-plugin .card,
    .swiss-floorball-plugin .table {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .swiss-floorball-plugin .card:hover,
    .swiss-floorball-plugin .table tbody tr:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {

    .swiss-floorball-plugin *,
    .swiss-floorball-plugin *::before,
    .swiss-floorball-plugin *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .swiss-floorball-plugin .sfa-data-table tbody tr,
    .swiss-floorball-plugin .sfa-data-table a,
    .swiss-floorball-plugin .sfa-card a {
        transition: none;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {

    .swiss-floorball-plugin .card,
    .swiss-floorball-plugin .table {
        border-width: 2px;
    }

    .swiss-floorball-plugin .button,
    .swiss-floorball-plugin .btn {
        border: 2px solid currentColor;
    }
}

/* Dark mode. Auto follows the system setting; data-sfa-theme="light" opts out, "dark" forces it.
   The two blocks below are intentionally identical: CSS cannot share selectors across a media query. */
@media (prefers-color-scheme: dark) {
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) {
        --sfa-sys-color-primary: #8ab4f8;
        --sfa-sys-color-on-primary: #00315c;
        --sfa-sys-color-primary-container: #1f4a7a;
        --sfa-sys-color-on-primary-container: #d6e6f7;
        --sfa-sys-color-secondary: #ffb27a;
        --sfa-sys-color-on-secondary: #4d1f00;
        --sfa-sys-color-secondary-container: #7a3300;
        --sfa-sys-color-on-secondary-container: #ffe0cc;
        --sfa-sys-color-tertiary: #f2c14e;
        --sfa-sys-color-on-tertiary: #261a00;
        --sfa-sys-color-tertiary-container: #5c4300;
        --sfa-sys-color-on-tertiary-container: #ffe4a8;
        --sfa-sys-color-error: #ff8a80;
        --sfa-sys-color-on-error: #5c0a04;
        --sfa-sys-color-error-container: #7a1f17;
        --sfa-sys-color-on-error-container: #fbe3df;
        --sfa-sys-color-success: #6fcf97;
        --sfa-sys-color-success-container: #1b4d31;
        --sfa-sys-color-on-success-container: #d9f2e3;
        --sfa-sys-color-warning: #f5b942;
        --sfa-sys-color-warning-container: #5c3f00;
        --sfa-sys-color-on-warning-container: #fdebc8;
        --sfa-sys-color-surface: #121417;
        --sfa-sys-color-on-surface: #e3e6ea;
        --sfa-sys-color-on-surface-variant: #b0b7bf;
        --sfa-sys-color-surface-container: #1c2024;
        --sfa-sys-color-outline: #3a4048;
        --sfa-sys-color-focus-ring: #8ab4f8;
        --sfa-light-bg: #1c2024;
        --sfa-border: #3a4048;
        --sfa-text: #e3e6ea;
        --sfa-text-light: #b0b7bf;
        background: var(--sfa-sys-color-surface);
        color: var(--sfa-sys-color-on-surface);
        border-radius: 12px;
        padding: 16px;
    }

    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .card,
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .table,
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .sfa-data-table,
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .game-score-card,
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .empty-state {
        background: var(--sfa-sys-color-surface-container);
        border-color: var(--sfa-sys-color-outline);
    }

    /* Dark surface for the sticky header cells (th carries its own background) and cards. */
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .table thead,
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .sfa-data-table thead,
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .table th,
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .sfa-data-table th,
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .sfa-card {
        background: var(--sfa-sys-color-surface-container);
    }

    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .table td,
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .sfa-data-table td {
        color: var(--sfa-sys-color-on-surface);
        border-bottom-color: var(--sfa-sys-color-outline);
    }

    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .table th,
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .sfa-data-table th,
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .card-title,
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .sfa-card {
        color: var(--sfa-sys-color-on-surface);
    }

    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .card-text {
        color: var(--sfa-sys-color-on-surface-variant);
    }

    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .game-score,
    .swiss-floorball-plugin:not([data-sfa-theme="light"]) .sfa-section-title {
        color: var(--sfa-sys-color-primary);
    }
}

.swiss-floorball-plugin[data-sfa-theme="dark"] {
    --sfa-sys-color-primary: #8ab4f8;
    --sfa-sys-color-on-primary: #00315c;
    --sfa-sys-color-primary-container: #1f4a7a;
    --sfa-sys-color-on-primary-container: #d6e6f7;
    --sfa-sys-color-secondary: #ffb27a;
    --sfa-sys-color-on-secondary: #4d1f00;
    --sfa-sys-color-secondary-container: #7a3300;
    --sfa-sys-color-on-secondary-container: #ffe0cc;
    --sfa-sys-color-tertiary: #f2c14e;
    --sfa-sys-color-on-tertiary: #261a00;
    --sfa-sys-color-tertiary-container: #5c4300;
    --sfa-sys-color-on-tertiary-container: #ffe4a8;
    --sfa-sys-color-error: #ff8a80;
    --sfa-sys-color-on-error: #5c0a04;
    --sfa-sys-color-error-container: #7a1f17;
    --sfa-sys-color-on-error-container: #fbe3df;
    --sfa-sys-color-success: #6fcf97;
    --sfa-sys-color-success-container: #1b4d31;
    --sfa-sys-color-on-success-container: #d9f2e3;
    --sfa-sys-color-warning: #f5b942;
    --sfa-sys-color-warning-container: #5c3f00;
    --sfa-sys-color-on-warning-container: #fdebc8;
    --sfa-sys-color-surface: #121417;
    --sfa-sys-color-on-surface: #e3e6ea;
    --sfa-sys-color-on-surface-variant: #b0b7bf;
    --sfa-sys-color-surface-container: #1c2024;
    --sfa-sys-color-outline: #3a4048;
    --sfa-sys-color-focus-ring: #8ab4f8;
    --sfa-light-bg: #1c2024;
    --sfa-border: #3a4048;
    --sfa-text: #e3e6ea;
    --sfa-text-light: #b0b7bf;
    background: var(--sfa-sys-color-surface);
    color: var(--sfa-sys-color-on-surface);
    border-radius: 12px;
    padding: 16px;
}

.swiss-floorball-plugin[data-sfa-theme="dark"] .card,
.swiss-floorball-plugin[data-sfa-theme="dark"] .table,
.swiss-floorball-plugin[data-sfa-theme="dark"] .sfa-data-table,
.swiss-floorball-plugin[data-sfa-theme="dark"] .game-score-card,
.swiss-floorball-plugin[data-sfa-theme="dark"] .empty-state {
    background: var(--sfa-sys-color-surface-container);
    border-color: var(--sfa-sys-color-outline);
}

.swiss-floorball-plugin[data-sfa-theme="dark"] .table thead,
.swiss-floorball-plugin[data-sfa-theme="dark"] .sfa-data-table thead,
.swiss-floorball-plugin[data-sfa-theme="dark"] .table th,
.swiss-floorball-plugin[data-sfa-theme="dark"] .sfa-data-table th,
.swiss-floorball-plugin[data-sfa-theme="dark"] .sfa-card {
    background: var(--sfa-sys-color-surface-container);
}

.swiss-floorball-plugin[data-sfa-theme="dark"] .table td,
.swiss-floorball-plugin[data-sfa-theme="dark"] .sfa-data-table td {
    color: var(--sfa-sys-color-on-surface);
    border-bottom-color: var(--sfa-sys-color-outline);
}

.swiss-floorball-plugin[data-sfa-theme="dark"] .table th,
.swiss-floorball-plugin[data-sfa-theme="dark"] .sfa-data-table th,
.swiss-floorball-plugin[data-sfa-theme="dark"] .card-title,
.swiss-floorball-plugin[data-sfa-theme="dark"] .sfa-card {
    color: var(--sfa-sys-color-on-surface);
}

.swiss-floorball-plugin[data-sfa-theme="dark"] .card-text {
    color: var(--sfa-sys-color-on-surface-variant);
}

.swiss-floorball-plugin[data-sfa-theme="dark"] .game-score,
.swiss-floorball-plugin[data-sfa-theme="dark"] .sfa-section-title {
    color: var(--sfa-sys-color-primary);
}

/* Additional Mobile Enhancements */
@media screen and (max-width: 768px) {

    .swiss-floorball-plugin {
        overflow-x: auto;
    }

    .swiss-floorball-plugin .table,
    .swiss-floorball-plugin .sfa-data-table {
        min-width: max-content;
    }

    /* Add breathing room, plus safe area padding for notched devices */
    .swiss-floorball-plugin .swiss-floorball-container {
        padding: 16px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    /* Optimize card spacing */
    .swiss-floorball-plugin .card {
        margin-bottom: 16px;
    }

    /* Make headings more compact */
    .swiss-floorball-plugin h1,
    .swiss-floorball-plugin h2,
    .swiss-floorball-plugin h3,
    .swiss-floorball-plugin h4,
    .swiss-floorball-plugin h5 {
        margin-bottom: 12px;
    }

    /* Better spacing for table sections */
    .swiss-floorball-plugin .sfa-table-container {
        margin-bottom: 24px;
    }

    /* Improve heading hierarchy */
    .swiss-floorball-plugin .sfa-table-container h2,
    .swiss-floorball-plugin .sfa-table-container h3 {
        padding-bottom: 8px;
        border-bottom: 2px solid var(--sfa-sys-color-primary);
        margin-bottom: 16px;
    }

    /* Improve calendar link styling */
    .swiss-floorball-plugin .sfa-calendar-link {
        display: block;
        padding: 12px 16px;
        background: linear-gradient(135deg, var(--sfa-primary) 0%, var(--sfa-primary-dark) 100%);
        color: white !important;
        text-align: center;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
        transition: all 0.3s ease;
    }

    .swiss-floorball-plugin .sfa-calendar-link:hover,
    .swiss-floorball-plugin .sfa-calendar-link:active {
        box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
        transform: translateY(-2px);
    }

    /* Better empty state on mobile */
    .swiss-floorball-plugin .empty-state {
        padding: 32px 16px;
    }

    /* Improve card layout for game scores */
    .swiss-floorball-plugin .card .row {
        gap: 12px;
    }

    /* Better button styling on mobile */
    .swiss-floorball-plugin .button,
    .swiss-floorball-plugin .btn {
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        justify-content: center;
    }

}

/* Smooth scroll for better UX - scoped to plugin container */

/* Section title used in display templates */
.sfa-section-title {
    margin: 0 0 20px 0;
    font-size: 20px;
    color: var(--sfa-primary);
}

/* Inline team logo in calendar/game rows */
.sfa-logo-inline {
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

/* Calendar link wrapper — desktop base styles */
.swiss-floorball-plugin .sfa-calendar-link {
    display: inline-block;
    margin-top: 16px;
}

/* Calendar subscribe link: text-button look comes from the shared button rules above. */
.sfa-calendar-subscribe {
    font-size: 0.9em;
}

/* Flat table container (no shadow/border) */
.sfa-table-container-flat {
    box-shadow: none;
    padding: 0;
    border: none;
}

/* Image inside a table cell */
.sfa-cell-image {
    max-width: 50px;
    height: auto;
}

/* Logo in game cards */
.sfa-card-logo {
    max-height: 75px;
    height: auto;
}
/* Widgets modelled on the official Swiss Unihockey web components (games, ranking, topscorers). */
.swiss-floorball-plugin .sfa-widget {
    margin-bottom: 24px;
    font-family: var(--sfa-sys-font-family);
    color: var(--sfa-sys-color-on-surface);
    container: sfa-widget / inline-size;
}

.swiss-floorball-plugin .sfa-widget [hidden] {
    display: none;
}

.swiss-floorball-plugin .sfa-widget__subtitle {
    margin: 0 0 12px;
    color: var(--sfa-sys-color-on-surface-variant);
}

.swiss-floorball-plugin .sfa-widget__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 16px;
}

.swiss-floorball-plugin .sfa-widget__label {
    flex: 1;
    text-align: center;
    font-size: var(--sfa-sys-font-size-body);
    font-weight: var(--sfa-sys-font-weight-medium);
    color: var(--sfa-sys-color-on-surface-variant);
}

.swiss-floorball-plugin .sfa-btn {
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--sfa-sys-shape-corner-xs);
    background: var(--sfa-sys-color-primary);
    color: var(--sfa-sys-color-on-primary);
    font: inherit;
    font-weight: var(--sfa-sys-font-weight-bold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    line-height: var(--sfa-sys-line-height-tight);
    text-align: center;
}

.swiss-floorball-plugin .sfa-btn:focus-visible,
.swiss-floorball-plugin .sfa-widget__select:focus-visible {
    outline: 2px solid var(--sfa-sys-color-focus-ring);
    outline-offset: 2px;
}

.swiss-floorball-plugin a.sfa-btn {
    text-decoration: none;
}

.swiss-floorball-plugin .sfa-btn:disabled,
.swiss-floorball-plugin .sfa-btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.swiss-floorball-plugin .sfa-widget__field {
    display: block;
    margin-bottom: 16px;
}

.swiss-floorball-plugin .sfa-widget__field > span {
    display: block;
    margin-bottom: 4px;
    font-size: var(--sfa-sys-font-size-label);
    font-weight: var(--sfa-sys-font-weight-medium);
    color: var(--sfa-sys-color-on-surface-variant);
}

.swiss-floorball-plugin .sfa-widget__select {
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--sfa-sys-color-outline);
    border-radius: var(--sfa-sys-shape-corner-xs);
    background: var(--sfa-sys-color-surface);
    color: var(--sfa-sys-color-on-surface);
    font: inherit;
}

.swiss-floorball-plugin .sfa-table-wrap {
    overflow-x: auto;
    container: sfa-table / inline-size;
}

.swiss-floorball-plugin .sfa-data-table td.is-highlight,
.swiss-floorball-plugin .sfa-data-table tr.is-highlight td {
    font-weight: var(--sfa-sys-font-weight-bold);
}

.swiss-floorball-plugin .sfa-align-right {
    text-align: right;
}

.swiss-floorball-plugin .sfa-club-logo {
    display: block;
    max-width: 28px;
    height: auto;
}

.swiss-floorball-plugin .sfa-data-table a {
    color: var(--sfa-sys-color-primary);
    font-weight: var(--sfa-sys-font-weight-bold);
    text-decoration: none;
}

.swiss-floorball-plugin .sfa-empty {
    padding: 16px 0;
    color: var(--sfa-sys-color-on-surface-variant);
}

/* Shown by the widget script when a reload was refused (rate limit, upstream budget) or failed. */
.swiss-floorball-plugin .sfa-widget-notice {
    margin: 0 0 8px;
    color: var(--sfa-sys-color-on-surface-variant);
}

/* Playoff series of the league games widget. */
.swiss-floorball-plugin .sfa-playoff-group {
    margin-bottom: 12px;
    border: 1px solid var(--sfa-sys-color-outline);
    border-radius: var(--sfa-sys-shape-corner-md);
}

.swiss-floorball-plugin .sfa-playoff-group > summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: var(--sfa-sys-font-weight-bold);
}

.swiss-floorball-plugin .sfa-playoff-group .sfa-data-table {
    margin-bottom: 0;
}

/* Mobiliar topscorer cards. */
.swiss-floorball-plugin .sfa-topscorers__headline {
    padding: 28px 16px;
    margin-bottom: 16px;
    background: var(--sfa-sys-color-primary);
    color: var(--sfa-sys-color-on-primary);
    font-size: var(--sfa-sys-font-size-headline);
    font-weight: var(--sfa-sys-font-weight-bold);
    text-align: center;
}

.swiss-floorball-plugin .sfa-topscorers__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.swiss-floorball-plugin .sfa-topscorers__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-left: 4px solid var(--sfa-sys-color-primary);
    border-radius: var(--sfa-sys-shape-corner-xs);
    background: var(--sfa-sys-color-surface-container);
}

.swiss-floorball-plugin .sfa-topscorers__image {
    flex: 0 0 72px;
    height: 72px;
    overflow: hidden;
    border-radius: var(--sfa-sys-shape-corner-xs);
}

.swiss-floorball-plugin .sfa-topscorers__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiss-floorball-plugin .sfa-topscorers__info {
    flex: 1;
    min-width: 0;
}

.swiss-floorball-plugin .sfa-topscorers__info h3 {
    margin: 0;
    font-size: var(--sfa-sys-font-size-title);
}

.swiss-floorball-plugin .sfa-topscorers__info p {
    margin: 4px 0 0;
    color: var(--sfa-sys-color-on-surface-variant);
}

.swiss-floorball-plugin .sfa-topscorers__points {
    text-align: center;
}

.swiss-floorball-plugin .sfa-topscorers__points strong {
    display: block;
    color: var(--sfa-sys-color-primary);
    font-size: var(--sfa-sys-font-size-display);
    line-height: 1;
}

.swiss-floorball-plugin .sfa-topscorers__points span {
    font-size: var(--sfa-sys-font-size-label);
    text-transform: uppercase;
}

/* Flat table style (default). Kept at the end of the file so it wins over the boxed and dark-mode table rules
   above at equal specificity. Colours come from the --sfa-table-* tokens, which the backend settings override
   through inline CSS; the fallbacks derive from the --sfa-sys-* tokens. */
.swiss-floorball-plugin.sfa-table--flat .table,
.swiss-floorball-plugin.sfa-table--flat .sfa-data-table {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.swiss-floorball-plugin.sfa-table--flat .table thead,
.swiss-floorball-plugin.sfa-table--flat .sfa-data-table thead,
.swiss-floorball-plugin.sfa-table--flat .table th,
.swiss-floorball-plugin.sfa-table--flat .sfa-data-table th {
    background: transparent;
}

.swiss-floorball-plugin.sfa-table--flat .table th,
.swiss-floorball-plugin.sfa-table--flat .sfa-data-table th {
    position: static;
    padding: 12px 16px;
    color: var(--sfa-table-header-color, var(--sfa-sys-color-on-surface));
    font-size: var(--sfa-sys-font-size-body);
    font-weight: var(--sfa-sys-font-weight-bold);
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 2px solid var(--sfa-table-accent, var(--sfa-sys-color-primary));
}

.swiss-floorball-plugin.sfa-table--flat .table td,
.swiss-floorball-plugin.sfa-table--flat .sfa-data-table td {
    border-bottom: 1px solid var(--sfa-table-divider, var(--sfa-sys-color-outline));
}

.swiss-floorball-plugin.sfa-table--flat .table tbody tr:last-child td,
.swiss-floorball-plugin.sfa-table--flat .sfa-data-table tbody tr:last-child td {
    border-bottom: none;
}

.swiss-floorball-plugin.sfa-table--flat.sfa-table--striped .sfa-data-table tbody tr:nth-child(even),
.swiss-floorball-plugin.sfa-table--flat.sfa-table--striped .table tbody tr:nth-child(even) {
    background-color: var(--sfa-sys-color-outline);
}

@supports (background-color: color-mix(in srgb, red 8%, transparent)) {

    .swiss-floorball-plugin.sfa-table--flat.sfa-table--striped .sfa-data-table tbody tr:nth-child(even),
    .swiss-floorball-plugin.sfa-table--flat.sfa-table--striped .table tbody tr:nth-child(even) {
        background-color: color-mix(in srgb, var(--sfa-sys-color-on-surface) 4%, transparent);
    }
}

.swiss-floorball-plugin.sfa-table--flat .table tbody tr:hover,
.swiss-floorball-plugin.sfa-table--flat .sfa-data-table tbody tr:hover,
.swiss-floorball-plugin.sfa-table--flat .table tbody tr:focus-within,
.swiss-floorball-plugin.sfa-table--flat .sfa-data-table tbody tr:focus-within {
    background-color: var(--sfa-table-highlight, var(--sfa-sys-color-outline));
}

@supports (background-color: color-mix(in srgb, red 8%, transparent)) {

    .swiss-floorball-plugin.sfa-table--flat .table tbody tr:hover,
    .swiss-floorball-plugin.sfa-table--flat .sfa-data-table tbody tr:hover,
    .swiss-floorball-plugin.sfa-table--flat .table tbody tr:focus-within,
    .swiss-floorball-plugin.sfa-table--flat .sfa-data-table tbody tr:focus-within {
        background-color: var(--sfa-table-highlight, color-mix(in srgb, var(--sfa-table-accent, var(--sfa-sys-color-primary)) 12%, transparent));
    }
}

/* Frontend icons (shown when "Show icons" is on). */
.swiss-floorball-plugin .sfa-section-title .sfa-icon,
.swiss-floorball-plugin .sfa-calendar-title .sfa-icon {
    margin-right: 0.35em;
    vertical-align: -0.15em;
    color: var(--sfa-table-accent, var(--sfa-sys-color-primary));
}

.swiss-floorball-plugin .sfa-calendar-subscribe .sfa-icon,
.swiss-floorball-plugin .sfa-info-box .sfa-icon {
    margin-right: 0.35em;
    vertical-align: -0.15em;
}

/* Venue link: compact, no 48 px touch target inflating the row. */
.swiss-floorball-plugin .sfa-data-table a.sfa-map-link {
    min-width: 0;
    min-height: 0;
    gap: 4px;
}

/* Responsive widgets. The page column of a theme is often much narrower than the viewport, so the layout
   reacts to the width of the widget itself (container queries) instead of the screen width. Tables get
   compact cells and wrapping text first, then lose their minor columns, so they fit without a scrollbar. */

.swiss-floorball-plugin .sfa-btn .sfa-icon {
    flex-shrink: 0;
}

@container sfa-widget (max-width: 520px) {

    .swiss-floorball-plugin .sfa-widget__controls {
        flex-wrap: wrap;
    }

    .swiss-floorball-plugin .sfa-widget__label {
        flex: 1 1 100%;
        order: -1;
    }

    .swiss-floorball-plugin .sfa-widget__controls .sfa-btn {
        flex: 1 1 0;
        padding: 0 12px;
        font-size: var(--sfa-sys-font-size-body);
    }
}

@container sfa-table (max-width: 720px) {

    .swiss-floorball-plugin .sfa-table-wrap .sfa-data-table {
        min-width: 0;
        font-size: var(--sfa-sys-font-size-label);
    }

    .swiss-floorball-plugin .sfa-table-wrap .sfa-data-table th,
    .swiss-floorball-plugin .sfa-table-wrap .sfa-data-table td {
        padding: 8px;
        font-size: inherit;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .swiss-floorball-plugin .sfa-table-wrap .sfa-data-table .sfa-club-logo {
        max-width: 22px;
    }

    .swiss-floorball-plugin .sfa-table-wrap .sfa-data-table a {
        min-width: 0;
    }
}

@container sfa-table (max-width: 520px) {

    .swiss-floorball-plugin .sfa-table-wrap .sfa-data-table th,
    .swiss-floorball-plugin .sfa-table-wrap .sfa-data-table td {
        padding: 8px 4px;
    }

    .swiss-floorball-plugin .sfa-table-wrap .sfa-data-table .sfa-col-minor {
        display: none;
    }

    .swiss-floorball-plugin .sfa-table-wrap .sfa-data-table .sfa-club-logo {
        max-width: 18px;
    }
}

@container sfa-table (max-width: 380px) {

    .swiss-floorball-plugin .sfa-table-wrap .sfa-data-table .sfa-col-tiny {
        display: none;
    }
}

@container sfa-table (max-width: 280px) {

    .swiss-floorball-plugin .sfa-table-wrap .sfa-data-table {
        font-size: 0.6875rem;
    }
}

/* The dark wrapper keeps a smaller inner padding on phones so the tables get more width. */
@media screen and (max-width: 480px) {

    .swiss-floorball-plugin[data-sfa-theme="dark"] {
        padding: 8px;
    }
}

@media screen and (max-width: 480px) and (prefers-color-scheme: dark) {

    .swiss-floorball-plugin:not([data-sfa-theme="light"]) {
        padding: 8px;
    }
}