/* ==========================================================================
   gridBasic_v6.css - alle eigenen Styles des Ligasystems in einer Datei.
   Reihenfolge wie bisher geladen: 1. basic, 2. gridBasic_v5, 3. modern_v1,
   danach 4. Kartenlook (Karten, Status-Pills, Tabellen-Podium, Meldungen ...).
   ========================================================================== */


/* ==========================================================================
   1. Basis (ehemals basic.css)
   ========================================================================== */

/**
 * Own basic CSS-File for the whole site
 */

.spDropdown {
    height: 40px;
}

.navbar
{
    position:relative;
    min-height:50px;
    margin-bottom:10px;
    border:1px solid transparent
}

.infoMessage{
    font-size: 18px !important;
    font-style: inherit !important;
    color: darkred;
    white-space: normal;
    font-weight: bold;
}

.container{
    width: 99%;
}

.w-20 {
    width: 20%;
}

.w-11 {
    width: 11%
}

.w-10 {
    width: 10%
}

.w-5 {
    width: 5%
}

.w-8 {
    width: 8%
}

.w-15 {
    width: 15%
}

.w-40 {
    width: 40%;
}

table {
    table-layout:fixed;/* will switch the table-layout algorythm */
}

.header-right li > a{
    font-size: 14px !important;
    font-style: inherit !important;
    white-space: normal;
    font-weight: bold;
    /*font-size: 22px;*/
    color: #ffffff;
}

.footer {
    bottom: 0;
    margin:0;
    margin-top:50px;
    padding: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    min-height: 100px;
    color: #fff;
    background-color: #1a1a1a; /* Old browsers */
}

.footer-links{
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-bottom:10px;

}
.footer-links li {
    display: inline;
    border-left: 1px solid white;
    padding-left: 10px;
    padding-right: 7px;
}

.footer-links li:first-child {
    display: inline;
    border-left: none;
    padding-left: 10px;
    padding-right: 7px;
}

.footer-links a {
    color: #fff;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-container {
    padding: 10px;
    text-align: center;
}

.spButton {
     border: 2px solid #555555;
     background-color: #555555;
     color: white;
     border-radius: 12px;
     font-size: 24px;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     -webkit-border-radius: 12px;
     -webkit-transition-duration: 0.4s; /* Safari */
     transition-duration: 0.4s;
 }

.spButton:hover {
    border: 2px solid #555555;
    background-color: white;
    color: black;
    border-radius: 12px;
    font-size: 24px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}


.spButtonMedium {
    margin: 0px 0px 0px 2px;
    border: 2px solid #555555;
    background-color: #555555;
    color: white;
    border-radius: 12px;
    font-size: 16px;
    padding: 13px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.spButtonMedium:hover {
    border: 2px solid #555555;
    background-color: white;
    color: black;
    border-radius: 12px;
    font-size: 16px;
    padding: 13px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.spButtonMediumSuccess {
    margin: 0px 0px 0px 2px;
    border: 2px solid #008800;
    background-color: #008800;
    color: white;
    border-radius: 12px;
    font-size: 16px;
    padding: 13px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.spButtonMediumSuccess:hover {
    border: 2px solid #555555;
    background-color: white;
    color: black;
    border-radius: 12px;
    font-size: 16px;
    padding: 13px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.spButtonSmall {
    border: 2px solid #555555;
    background-color: #555555;
    color: white;
    border-radius: 8px;
    font-size: 12px;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 5px 5px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.spButtonSmall:hover {
    border: 2px solid #555555;
    background-color: white;
    color: black;
    border-radius: 8px;
    font-size: 12px;
    padding: 8px 12px;
    margin: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.spButtonSmallRed {
    border: 2px solid #8b0000;
    background-color: #8b0000;
    color: white;
    border-radius: 8px;
    font-size: 12px;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 5px 5px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.spButtonSmallRed:hover {
    border: 2px solid #8b0000;
    background-color: #ea0909;
    color: white;
    border-radius: 8px;
    font-size: 12px;
    padding: 8px 12px;
    margin: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.spButtonSmallTable {
    border: 2px solid #555555;
    background-color: green;
    color: white;
    border-radius: 4px;
    font-size: 8px;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: -3px 0px 0px 0px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.spButtonSmallTable:hover {
    border: 2px solid #555555;
    background-color: white;
    color: green;
    border-radius: 4px;
    font-size: 8px;
    padding: 8px 12px;
    text-align: center;
    margin: -3px 0px 0px 0px;
    text-decoration: none;
    display: inline-block;
}

th.rotate > div {
    transform: rotate(305deg);
    width: 100px;
    height: 55px;
}
th.rotate > div > span {
    padding: 0px 5px;
}

.pointsSel {
    width: 95%;
    padding: 0px 6px;
}

.pointsCol {
    width: 13%;
    padding: 0.5625rem 3px;
 }

th.rotateDia > div {
    transform: rotate(305deg);
    width: 80px;
    height: 40px;
}

th.rotateDia > div > span {
    padding: 0px 5px;
}

.mainLogoLine{
    padding-top: 20px;
    display: flex;
    flex-direction:row;
    justify-content: center;
}

.mainLogoLine > div > img{
    width: 100%;
    max-height: 304px;
}

.mainLogoLine > div {
    display:flex;
    flex-direction:column;
    padding-left: 5px;
    padding-right: 5px;
}

.playDaySearch > label {
    float: left;
    vertical-align: center;
    margin-top: 7px;
    margin-bottom: 0px;
}
.playDaySearch > span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}

.btn-main-page {
    display: flex;
    flex-direction:row;
    justify-content: center;
}

.btn-main-page > div {
    display:flex;
    flex-direction:column;
    padding-left: 5px;
    padding-right: 5px;
}

fieldset {
    overflow: hidden
}

.radio-btn-field {
    float: left;
    clear: none;
}

radio-btn-field > label {
    float: left;
    clear: none;
    display: block;
    padding: 2px 1em 0 0;
}

input[type=radio],
input.radio {
    float: left;
    clear: none;
    margin: 2px 0 0 2px;
}

/* calc(0.6em + 0.6vw) */


/* ==========================================================================
   2. Raster, Tabs, Dashboard (ehemals gridBasic_v5.css)
   ========================================================================== */

/**
 * Own basic CSS-File for the whole site
 */

html {
    font-size: calc(0.6em + 0.6vw)
}

tr > td > input {
    width: 100%;
}

.redBackImage {
    max-height: 32px;
}

.rightButtonLine{
    float: right;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table
{
    padding-top: 10px;
    table-layout: auto;
    width: 100%;
}

.table
{
    padding-top: 10px;
    table-layout: auto;
    width: 100%;
}

.table-live-games
{
    padding-top: 10px;
    table-layout: fixed;
    width: 100%;
}

.actions > img
{
    padding-top: 10px;
}

.col-id {
    width: 2%;
    white-space: nowrap;
    text-align: center;
}

/**
 * Division Tables
 */
.openRounds{
    text-align: center;
    color: red;
}
.openRoundsGuest{
    text-align: center;
    color: darkgoldenrod;
}
.openRounds > p{
    font-size: calc(0.5em + 0.4vw);
    margin-bottom: 0px;
}

.divisionPlayersTable table tbody tr td {
    font-size: calc(0.5em + 0.4vw)
}


/**
 * Own basic CSS-File for the whole site
 */

tr > td > a {
    width: 100%;
}

.icon{
    margin-top: 4px;
    max-height: 32px;
}

.insideDiv{
    padding: 5px;
}

.card{
    min-height: 170px;
    margin-bottom: 20px;
}

.messageTextbox{
    height: 500px;
}

.row-success{
    background-color:#9FF781 !important;
}
.row-warning{
    background-color:#f7eb81 !important;
}
.row-error{
    background-color:#ff6961 !important;
}

/**
 * Tabs
 */
.tabs { display: flex; border-bottom: 2px solid #ccc; }
.tab {
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ccc;
    border-bottom: none;
    margin-right: 5px;
    border-radius: 6px 6px 0 0;
    background: #f5f5f5;
}
.tab.active {
    background: white;
    font-weight: bold;
    border-bottom: 2px solid white;
}
.tabcontent {
    border: 1px solid #ccc;
    padding: 20px;
    background: white;
    border-radius: 0 6px 6px 6px;
}

th, td { border: 1px solid #ddd; padding: 8px; }
th { background: #eee; }

/* The dots/bullets/indicators */
.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}


.dot.active {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 5.9s;
    animation-name: fade;
    animation-duration: 5.9s;
}


@-webkit-keyframes fade {
    from {opacity: .8}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .8}
    to {opacity: 1}
}

/* On smaller screens, decrease text size
@media only screen and (max-width: 300px) {
    .text {font-size: 11px}
}*/

/* Slideshow container */
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* The dots/bullets/indicators */
.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}


.dot.active {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 5.9s;
    animation-name: fade;
    animation-duration: 5.9s;
}


@-webkit-keyframes fade {
    from {opacity: .8}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .8}
    to {opacity: 1}
}

/* On smaller screens, decrease text size
@media only screen and (max-width: 300px) {
    .text {font-size: 11px}
}*/


/* ===========================
   Dashboard Cards
   =========================== */

.dashboard-card {
    border: 0;
    border-radius: 12px;
    height: 170px;
    margin-bottom: 20px;
    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    transition: all .2s ease-in-out;
}

.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.dashboard-card .card-body {
    text-align: center;
    padding: 20px;
}

.dashboard-card .card-title {
    margin-top: 0;
    margin-bottom: 10px;

    font-size: 20px;
    font-weight: 600;
}

.dashboard-card .card-text {
    margin-top: 12px;

    font-size: 14px;
    color: #555;
}

.dashboard-card .icon {
    width: 52px;
    height: 52px;

    margin: 8px auto;
    display: block;
}

.dashboard-section-title {
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
	clear: both;
}

.dashboard-section {
    margin-bottom: 35px;
}

.admin-open-tasks {
    background: #f8f9fa;
    margin-bottom: 20px;
    border-radius: 8px;
}


/* ===========================
   Dashboard Farben
   =========================== */

.dashboard-green {
    background: #dff5e4;
}

.dashboard-blue {
    background: #dceefc;
}

.dashboard-yellow {
    background: #fff6d8;
}

.dashboard-red {
    background: #fde4e4;
}


/* ===========================
   Links
   =========================== */

.dashboard-card a,
.dashboard-card a:hover,
.dashboard-card a:focus {
    color: inherit;
    text-decoration: none;
}


/* ===========================
   Mobile
   =========================== */

@media (max-width: 767px) {

    .dashboard-card {
        height: auto;
    }

    .dashboard-card .card-body {
        padding: 15px;
    }

    .dashboard-card .icon {
        width: 42px;
        height: 42px;
    }

    .dashboard-card .card-title {
        font-size: 18px;
    }
}


/* ==========================================================================
   3. Modernes Bootstrap-3-Theme (ehemals modern_v1.css)
   ========================================================================== */

/* ==========================================================
   Modern Bootstrap 3 Theme
   ========================================================== */


/* ----------------------------------------------------------
   Allgemein
---------------------------------------------------------- */

body{

    background:#f6f7f9;

    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color:#333;
}


/* Desktop nicht verändern */

.container{

    padding-left:15px;
    padding-right:15px;

}


/* ----------------------------------------------------------
   Links
---------------------------------------------------------- */

a{

    transition:.15s;

}

a:hover{

    text-decoration:none;

}


/* ----------------------------------------------------------
   Navbar
---------------------------------------------------------- */
.navbar{
    border-radius:0;
    border:none;
    box-shadow:0 1px 4px rgba(0,0,0,.08);
}

.navbar-brand{
    font-weight:600;
}


/* ----------------------------------------------------------
   Panels
---------------------------------------------------------- */

.panel{
    border-radius:8px;
    border:1px solid #e8e8e8;
    box-shadow:0 1px 4px rgba(0,0,0,.05);
}

.panel-heading{
    background:#fafafa !important;
    border-bottom:1px solid #ececec !important;
    font-weight:600;
}

.panel-body{
    padding:15px;
}


/* ----------------------------------------------------------
   Buttons
---------------------------------------------------------- */
.btn{
    border-radius:5px;
    transition:.15s;
}

.btn:hover{
    transform:translateY(-1px);
}


/* ----------------------------------------------------------
   Tabellen
---------------------------------------------------------- */

.table{
    background:#fff;
}

.table>thead>tr>th{
    background:#f7f7f7;
    font-weight:600;
}

.table>thead>tr>th,
.table>tbody>tr>td{
    vertical-align:middle;
}

.table-hover tbody tr:hover{
    background:#fafafa;
}


/* ----------------------------------------------------------
   Inputs
---------------------------------------------------------- */

.form-control{
    border-radius:5px;
    border:1px solid #d7d7d7;
    box-shadow:none;
}

.form-control:focus{
    box-shadow:none;
}


/* eigene Selects */

.spDropdown{
    border-radius:5px;
    border:1px solid #d7d7d7;
    background:#fff;
}


/* ----------------------------------------------------------
   Wells
---------------------------------------------------------- */

.well{
    background:#fff;
    border:1px solid #ececec;
}


/* ----------------------------------------------------------
   Mobile Optimierungen
---------------------------------------------------------- */

@media (max-width:768px){

    /* Fast gesamte Breite nutzen */
    .container{
        width:100%;
        padding-left:6px;
        padding-right:6px;
    }

    .row{

        margin-left:-6px;

        margin-right:-6px;

    }

    [class*='col-']{

        padding-left:6px;

        padding-right:6px;

    }


    /* Navbar kompakter */

    .navbar{

        margin-bottom:8px;

    }

    .navbar-brand{

        font-size:18px;

    }


    /* Panels */

    .panel{

        margin-bottom:10px;

    }

    .panel-heading{

        padding:8px 10px;

        font-size:15px;

    }

    .panel-body{

        padding:10px;

    }


    /* Tabellen */

    .table>thead>tr>th,
    .table>tbody>tr>td{

        padding:4px;

        font-size:12px;

    }


    /* Buttons */

    .btn{

        padding:5px 8px;

        font-size:12px;

    }


    /* Formulare */

    .form-control,
    .spDropdown{

        height:34px;

        font-size:13px;

    }

}


/* ----------------------------------------------------------
   Kleine Animationen
---------------------------------------------------------- */

.panel,
.btn,
.form-control{

    transition:all .15s ease;

}


/* =====================================================
   Navigation
===================================================== */

/* Navbar Grunddesign */
.navbar.navbar-inverse {

    background:#ffffff;
    border:none;
    border-radius:0;
    min-height:58px;
    margin-bottom:15px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.08);

}




/* Hauptmenü */
.navbar-inverse .navbar-nav > li > a {

    color:#444;
    font-weight:500;
    transition:.15s;

}


/* Hauptmenü Hover */
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {

    color:#c62828;
    background:#f5f5f5;

}


/* Aktiver Menüpunkt */
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover {

    background:none;
    color:#c62828;

    border-bottom:3px solid #c62828;

}


/* =====================================================
   Dropdown Menü
===================================================== */


/* Dropdown Hintergrund */
.navbar-inverse .navbar-nav .dropdown-menu {

    background:#ffffff;

    border:1px solid #ddd;

    box-shadow:
        0 4px 12px rgba(0,0,0,.12);

}


/* Dropdown Links */
.navbar-inverse .navbar-nav .dropdown-menu > li > a {

    color:#333;

    padding:10px 20px;

}


/* Dropdown Hover */
.navbar-inverse .navbar-nav .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .dropdown-menu > li > a:focus {

    color:#c62828;

    background:#f5f5f5;

}


/* Dropdown Trennlinie */
.navbar-inverse .navbar-nav .dropdown-menu .divider {

    background:#e5e5e5;

}


/* =====================================================
   Desktop Hover Dropdown
===================================================== */

@media (min-width:768px) {


    /* Dropdown ohne Klick öffnen */
    .navbar-nav > li.dropdown:hover > .dropdown-menu {

        display:block;

    }


    /* Hauptpunkt bei geöffnetem Dropdown */
    .navbar-inverse .navbar-nav > li.dropdown:hover > a,
    .navbar-inverse .navbar-nav > li.dropdown.open > a {

        background:#eeeeee;

        color:#c62828 !important;

    }

	/* Logo vertikal zentrieren */
	.navbar-header {
		height:58px;
		display:flex;
		align-items:center;
	}


	/* Logo Link */
	.navbar-header > a {
		display:flex;
		align-items:center;
	}


	/* Logo */
	.navbar-logo {
		height:46px;
		width:auto;
		display:block;
	}


}


/* Cursor */
.navbar-nav > li.dropdown > a {

    cursor:pointer;

}


/* =====================================================
   Hamburger
===================================================== */

.navbar-toggle {

    margin-top:11px;
    border:none;

}


.navbar-toggle .icon-bar {

    background:#444 !important;

}


.navbar-toggle:hover {

    background:#f4f4f4 !important;

}
.navbar-brand-area {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.navbar-brand-area a {
    display: flex;
    align-items: center;
}
#installBtn {
    margin-left: 12px;
    flex-shrink: 0;
}

/* =====================================================
   Mobile
===================================================== */
@media(max-width:768px) {
    .navbar {
        min-height:54px;
        margin-bottom:10px;
    }
    .navbar-header {
        height:54px;
        display:block;
    }

    .navbar-header > a {
        display:block;
    }

    .navbar-brand {
        padding:4px 10px;
    }

    .navbar-logo {
        height:42px;
    }

    .navbar-collapse {
        background:#fff;
        border-top:1px solid #ececec;
    }

    .navbar-nav {
        margin:0;
    }

    .navbar-nav > li {
        border-bottom:1px solid #f0f0f0;
    }

    .navbar-nav > li > a {
        padding:14px 18px;
    }
}

/* =====================================================
   Mobile Navbar Farben
===================================================== */

@media (max-width:768px) {


    /* Mobile Hauptmenü */
    .navbar-inverse .navbar-nav > li > a {

        color:#333 !important;
        background:#ffffff;

    }


    /* Mobile Hover / Fokus */
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {

        color:#c62828 !important;
        background:#f5f5f5;

    }


    /* Mobile Dropdown geöffnet */
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {

        color:#333 !important;

        background:#ffffff;

    }


    /* Mobile Dropdown Hover */
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {

        color:#c62828 !important;

        background:#f5f5f5;

    }


    /* Dropdown Pfeil */
    .navbar-inverse .navbar-nav .dropdown-toggle .caret {

        border-top-color:#333;

    }

}


/* ==========================================================================
   4. Kartenlook (Kartensprache wie in der Saukarln-App)
   ========================================================================== */

/* ----------------------------------------------------------
   4.1 Farben und Status
   Sechs Zustaende, die ueberall gleich aussehen: als Balken links an einer
   Karte (.sp-card-*), als Pill (.sp-pill-*) oder als Punkt (.sp-dot-*).
     done = abgeschlossen, late = ueberfaellig, warn = Aufmerksamkeit
     (Gast fehlt, Verlegung beantragt), info = laeuft/heute,
     open = geplant, stop = Strafe/Problem
---------------------------------------------------------- */
:root {
    --sp-accent: #c62828;
    --sp-text: #222;
    --sp-muted: #6b7280;
    --sp-border: #e3e3e3;
    --sp-divider: #eeeeee;
    --sp-card: #ffffff;
    --sp-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    --sp-radius: 12px;

    --sp-done: #5cb85c;  --sp-done-bg: #dff5e4;  --sp-done-ink: #2f6b32;
    --sp-late: #f0864b;  --sp-late-bg: #ffe8db;  --sp-late-ink: #8a3d14;
    --sp-warn: #f0c419;  --sp-warn-bg: #fff6d8;  --sp-warn-ink: #7a5c00;
    --sp-info: #5bc0de;  --sp-info-bg: #e3f4fa;  --sp-info-ink: #1e6a80;
    --sp-open: #c9ced6;  --sp-open-bg: #eef0f3;  --sp-open-ink: #4b5563;
    --sp-stop: #d9534f;  --sp-stop-bg: #fde4e4;  --sp-stop-ink: #8f2421;

    --sp-gold: #c99a06;   --sp-gold-bg: #fdf4d3;   --sp-gold-ink: #6b5200;
    --sp-silver: #9aa3ad; --sp-silver-bg: #eef1f4; --sp-silver-ink: #46505c;
    --sp-bronze: #b5703a; --sp-bronze-bg: #f9eadf; --sp-bronze-ink: #6e3d17;
}

/* ----------------------------------------------------------
   4.2 Karte mit Statusbalken
---------------------------------------------------------- */
.sp-card {
    background: var(--sp-card);
    border: 1px solid var(--sp-border);
    border-left: 6px solid var(--sp-open);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    padding: 12px 18px;
    margin-bottom: 16px;
}
.sp-card-done { border-left-color: var(--sp-done); }
.sp-card-late { border-left-color: var(--sp-late); }
.sp-card-warn { border-left-color: var(--sp-warn); }
.sp-card-info { border-left-color: var(--sp-info); }
.sp-card-open { border-left-color: var(--sp-open); }
.sp-card-stop { border-left-color: var(--sp-stop); }
.sp-card-plain { border-left-width: 1px; }
.sp-card-highlight { background: #f4fafd; }
.sp-card-compact { padding: 6px 14px; margin-bottom: 8px; }

.sp-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px 12px;
    border-bottom: 1px solid var(--sp-divider);
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.sp-card-title { margin: 0; font-size: 16px; font-weight: 600; }
.sp-card-sub { color: var(--sp-muted); font-size: 13px; }
.sp-card > :last-child { margin-bottom: 0; }

/* Zuklappbare Karte (abgeschlossene Wochen) */
details.sp-card > summary { cursor: pointer; list-style: none; display: block; }
details.sp-card > summary::-webkit-details-marker { display: none; }
details.sp-card > summary .sp-card-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
details.sp-card[open] > summary .sp-card-head { border-bottom: 1px solid var(--sp-divider); padding-bottom: 8px; margin-bottom: 8px; }
details.sp-card > summary .sp-card-title::before { content: "\25B8"; display: inline-block; width: 16px; color: var(--sp-muted); transition: transform .15s; }
details.sp-card[open] > summary .sp-card-title::before { transform: rotate(90deg); }

/* Abschnittsueberschrift zwischen Karten */
.sp-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sp-muted);
    margin: 22px 0 8px;
}

/* ----------------------------------------------------------
   4.3 Pills und Punkte
---------------------------------------------------------- */
.sp-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    padding: 2px 10px;
    border-radius: 12px;
    white-space: nowrap;
    background: var(--sp-open-bg);
    color: var(--sp-open-ink);
}
.sp-pill-done { background: var(--sp-done-bg); color: var(--sp-done-ink); }
.sp-pill-late { background: var(--sp-late-bg); color: var(--sp-late-ink); }
.sp-pill-warn { background: var(--sp-warn-bg); color: var(--sp-warn-ink); }
.sp-pill-info { background: var(--sp-info-bg); color: var(--sp-info-ink); }
.sp-pill-open { background: var(--sp-open-bg); color: var(--sp-open-ink); }
.sp-pill-stop { background: var(--sp-stop-bg); color: var(--sp-stop-ink); }

.sp-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sp-open);
    margin-right: 6px;
    vertical-align: 1px;
}
.sp-dot-done { background: var(--sp-done); }
.sp-dot-late { background: var(--sp-late); }
.sp-dot-warn { background: var(--sp-warn); }
.sp-dot-info { background: var(--sp-info); }
.sp-dot-stop { background: var(--sp-stop); }

/* ----------------------------------------------------------
   4.4 Spielzeilen in Karten
---------------------------------------------------------- */
.sp-game-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
}
.sp-game-row + .sp-game-row { border-top: 1px dashed var(--sp-divider); }
.sp-game-row-wide { grid-template-columns: minmax(0, 1fr) auto; }
.sp-game-date { color: var(--sp-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.sp-game-teams { min-width: 0; }
.sp-game-meta { display: block; color: var(--sp-muted); font-size: 12.5px; }
.sp-game-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.sp-actions-start { justify-content: flex-start; }
.sp-score {
    display: inline-block;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: #f1f3f5;
    border-radius: 6px;
    padding: 1px 9px;
    white-space: nowrap;
}

/* Bearbeitbare Spielzeile im Spielplan der Verwaltung */
.sp-edit-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr) 150px minmax(170px, auto);
    gap: 8px 12px;
    align-items: center;
    padding: 8px 0;
}
.sp-edit-row + .sp-edit-row { border-top: 1px dashed var(--sp-divider); }
.sp-edit-row select, .sp-edit-row input[type=date] { width: 100%; }
.sp-edit-row form { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: flex-end; margin: 0; }
.sp-edit-row label { font-weight: normal; margin: 0; }

@media (max-width: 767px) {
    .sp-game-row { grid-template-columns: minmax(0, 1fr) auto; }
    .sp-game-row .sp-game-date { grid-column: 1 / -1; }
    .sp-edit-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .sp-edit-row > :first-child, .sp-edit-row > :last-child { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------
   4.5 Fortschritt, Anzeigetafel, klebende Leiste
---------------------------------------------------------- */
.sp-progress { height: 6px; background: #eceef1; border-radius: 99px; overflow: hidden; margin: 6px 0 16px; }
.sp-progress > span { display: block; height: 100%; background: var(--sp-done); border-radius: 99px; }

.sp-board {
    background: #1f2329;
    color: #fff;
    border-radius: var(--sp-radius);
    padding: 14px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.sp-board-side { min-width: 0; }
.sp-board-side small { display: block; color: #b9c0cb; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.sp-board-side b { font-size: 16px; font-weight: 600; }
.sp-board-right { text-align: right; }
.sp-board-score { font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
.sp-board-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--sp-muted); font-size: 13px; }
@media (max-width: 767px) {
    .sp-board { padding: 12px; }
    .sp-board-score { font-size: 30px; }
    .sp-board-side b { font-size: 14px; }
}

.sp-sticky-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
    padding: 8px 15px;
    margin: 16px 0 20px;
}
.sp-sticky-bar .sp-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Spielbericht: Aufstellung und Teilspiele in Karten (ohne die globalen Tabellenrahmen) */
table.sp-lineup, table.sp-subgames { width: 100%; padding-top: 0; margin: 0; }
table.sp-lineup td, table.sp-subgames td { border: 0; border-bottom: 1px dashed var(--sp-divider); padding: 7px 4px; vertical-align: middle; word-break: normal; overflow-wrap: break-word; }
table.sp-lineup tr:last-child td, table.sp-subgames tr:last-child td { border-bottom: 0; }
.sp-lineup-checks { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--sp-muted); width: 70px; }
.sp-swap { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.sp-swap select { flex: 1 1 auto; min-width: 0; }
.sp-lineup-select { display: grid; gap: 8px; }
.sp-subgame-player { font-size: 13.5px; }
.sp-subgame-guest { text-align: right; }
.sp-won { font-weight: 700; }
.sp-subgame-score { text-align: center; white-space: nowrap; width: 30%; }
.sp-subgame-score .sp-game-meta { display: block; }
.sp-subgame-action { width: 1%; white-space: nowrap; text-align: right; }
.sp-subgame-action .sp-link-button { padding: 2px 6px; min-height: 28px; }
table.sp-subgames .pointsCol { width: 16%; padding: 4px 3px; }
table.sp-subgames .pointsSel { width: 100%; }
@media (max-width: 767px) {
    .sp-subgame-player { font-size: 12.5px; }
    .sp-subgame-score .sp-game-meta { font-size: 11px; }
    .sp-card { padding: 10px 12px; }
}
.sp-sticky-bar .sp-actions form { display: inline; margin: 0; }

/* ----------------------------------------------------------
   4.6 Kacheln (Mein Bereich) und leere Zustaende
---------------------------------------------------------- */
.sp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.sp-tile {
    display: grid;
    gap: 4px;
    align-content: start;
    background: var(--sp-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    padding: 14px 16px;
    color: var(--sp-text);
    transition: transform .15s ease, box-shadow .15s ease;
}
a.sp-tile:hover, a.sp-tile:focus { color: var(--sp-text); text-decoration: none; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, .14); }
.sp-tile small { color: var(--sp-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.sp-tile-value { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sp-tile-warn { background: #fff8ec; border-color: #f3d9a8; }

.sp-empty { background: #fafbfc; border: 1px dashed #d5d9df; border-radius: var(--sp-radius); padding: 16px 18px; color: var(--sp-muted); margin-bottom: 16px; }
.sp-empty b { display: block; color: var(--sp-text); font-weight: 600; margin-bottom: 2px; }

/* Werbe-Slider unter den Karten von "Mein Bereich" (Hochformat-Bilder, daher schmal und mittig) */
.sp-ads { max-width: 480px; margin: 24px auto 8px; }
.sp-ads .slideshow-container img { border-radius: var(--sp-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* ----------------------------------------------------------
   4.7 Tabellen: Platz 1-3 in Gold, Silber, Bronze
---------------------------------------------------------- */
.sp-rank {
    display: inline-block;
    min-width: 26px;
    height: 26px;
    line-height: 26px;
    padding: 0 4px;
    border-radius: 13px;
    text-align: center;
    font-weight: 700;
    font-size: 12.5px;
    background: #f1f3f5;
    color: var(--sp-muted);
}
/* Feste Breite der Platz-Spalte, sonst ragt der Kreis am Handy in die Namen (Prozentbreite zu schmal) */
th.sp-rank-col, td.sp-rank-col {
    width: 52px;
    min-width: 52px;
    padding-left: 12px !important;
    padding-right: 10px !important;
    white-space: nowrap;
}
/* Namen nicht mitten im Wort trennen (cake.css: word-break: break-all) */
table.sp-standings { table-layout: auto; }
table.sp-standings td { word-break: normal; overflow-wrap: break-word; }
/* Rueckfall: falls die Tabelle doch breiter als der Bildschirm ist, seitlich scrollen statt abschneiden
   (.container hat overflow: hidden) */
.sp-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-nowrap { white-space: nowrap; }
@media (max-width: 767px) {
    .table.sp-standings > thead > tr > th, .table.sp-standings > tbody > tr > td { padding-left: 4px; padding-right: 4px; font-size: 12.5px; }
    /* Am Handy passt die Tabelle auf 100 % Breite: keine festen Prozentbreiten, lange Namen duerfen umbrechen */
    .table.sp-standings > thead > tr > th:not(.sp-rank-col) { width: auto; white-space: normal; }
    .table.sp-standings > tbody > tr > td { overflow-wrap: anywhere; }
    .table.sp-standings > thead > tr > th, .table.sp-standings > tbody > tr > td { padding-left: 3px; padding-right: 3px; font-size: 12px; }
    .table.sp-standings > tbody > tr > td.sp-nowrap { overflow-wrap: normal; }
    th.sp-rank-col, td.sp-rank-col { width: 32px; min-width: 32px; padding-left: 5px !important; padding-right: 3px !important; }
    .sp-standings .sp-rank { min-width: 22px; height: 22px; line-height: 22px; padding: 0 3px; border-radius: 11px; font-size: 11.5px; }
}
tr.sp-podium-1 > td { background: var(--sp-gold-bg) !important; }
tr.sp-podium-2 > td { background: var(--sp-silver-bg) !important; }
tr.sp-podium-3 > td { background: var(--sp-bronze-bg) !important; }
tr.sp-podium-1 > td:first-child { box-shadow: inset 6px 0 0 var(--sp-gold); }
tr.sp-podium-2 > td:first-child { box-shadow: inset 6px 0 0 var(--sp-silver); }
tr.sp-podium-3 > td:first-child { box-shadow: inset 6px 0 0 var(--sp-bronze); }
tr.sp-podium-1 .sp-rank { background: var(--sp-gold); color: #fff; }
tr.sp-podium-2 .sp-rank { background: var(--sp-silver); color: #fff; }
tr.sp-podium-3 .sp-rank { background: var(--sp-bronze); color: #fff; }
.sp-points { font-weight: 700; }
/* Eigener Spieler und Teamkollegen in der Spielertabelle */
tr.sp-row-me > td { background: #e7f6ea !important; }
tr.sp-row-team > td { background: #e8f2fd !important; }
tr.sp-podium-1 .sp-points { color: var(--sp-gold-ink); }
tr.sp-podium-2 .sp-points { color: var(--sp-silver-ink); }
tr.sp-podium-3 .sp-points { color: var(--sp-bronze-ink); }

/* ----------------------------------------------------------
   4.8 Meldungen (Flash)
   cake.css kennt nur Info (blau) und Fehler; Erfolg und Warnung fehlten.
---------------------------------------------------------- */
.sp-flash-area:empty { display: none; }
.sp-flash-area { margin-bottom: 12px; }
div.message {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 10px 16px;
    margin-bottom: 8px;
    border: 1px solid #b6dcef;
    border-radius: 10px;
    background: #e8f4fb;
    color: #1e5a78;
    font-weight: 500;
    cursor: pointer;
}
div.message:before {
    content: "i";
    position: static;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    padding: 0;
    border-radius: 50%;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    background: #1e5a78;
    color: #fff;
}
div.message.success { background: #e7f6ea; border-color: #b7e2bf; color: #24612b; }
div.message.success:before { content: "\2713"; background: #2f8a3a; color: #fff; }
div.message.warning { background: #fff6d8; border-color: #f0dc95; color: #6f5600; }
div.message.warning:before { content: "!"; background: #b38a00; color: #fff; }
div.message.error { background: #fde8e7; border-color: #f2b8b5; color: #8f2421; }
div.message.error:before { content: "\2715"; background: #c3232d; color: #fff; padding: 0; }
div.message.hidden { display: none; }

/* ----------------------------------------------------------
   4.9 Buttons, Tabs, Formular-Details
---------------------------------------------------------- */
.spButton, .spButtonMedium, .spButtonSmall, .spButtonSmallTable,
.spButtonMediumSuccess, .spButtonSmallRed {
    display: inline-block;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.spButton, .spButtonMedium, .spButtonSmall, .spButtonSmallTable {
    background-color: #3d434b;
    border-color: #3d434b;
    color: #fff;
}
.spButton:hover, .spButtonMedium:hover, .spButtonSmall:hover, .spButtonSmallTable:hover,
.spButton:focus, .spButtonMedium:focus, .spButtonSmall:focus, .spButtonSmallTable:focus {
    background-color: #565d67;
    border-color: #565d67;
    color: #fff;
    text-decoration: none;
}
.spButtonMediumSuccess { background-color: #2f8a3a; border-color: #2f8a3a; color: #fff; }
.spButtonMediumSuccess:hover, .spButtonMediumSuccess:focus { background-color: #3a9f46; border-color: #3a9f46; color: #fff; text-decoration: none; }
.spButtonSmallRed { background-color: #a61f1f; border-color: #a61f1f; color: #fff; }
.spButtonSmallRed:hover, .spButtonSmallRed:focus { background-color: #c62828; border-color: #c62828; color: #fff; text-decoration: none; }

/* Zweitrangiger Text-Button mit Icon (Details, Verlegen ...) */
.sp-link-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 10px;
    min-height: 30px;
    border: 1px solid #d5d9df;
    border-radius: 8px;
    background: #f7f8fa;
    color: #333;
    white-space: nowrap;
}
.sp-link-button:hover, .sp-link-button:focus { background: #eceff3; color: #111; text-decoration: none; }
.sp-link-button img { width: 16px; height: 16px; }
.sp-table-actions { white-space: nowrap; }
.sp-table-actions .sp-link-button { width: 32px; height: 30px; min-height: 0; padding: 0; margin: 1px 0; justify-content: center; }
.sp-table-actions .sp-link-button img { width: 16px !important; height: 16px !important; max-width: none; padding: 0; }

.spCheckbox { width: 18px; height: 18px; vertical-align: middle; margin: 0 6px 0 0; }

/* Tabs als Unterstreichung statt Karteireiter */
.tabs { border-bottom: 1px solid var(--sp-border); gap: 4px; flex-wrap: wrap; margin-bottom: 0; }
.tab {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #555;
    margin: 0 4px -1px 0;
    padding: 10px 14px;
    font-weight: 500;
}
.tab:hover, .tab:focus { color: var(--sp-accent); text-decoration: none; background: transparent; }
.tab.active { background: transparent; border-bottom: 3px solid var(--sp-accent); color: var(--sp-text); font-weight: 600; }
.tabcontent { border: 1px solid var(--sp-border); border-top: 0; border-radius: 0 0 var(--sp-radius) var(--sp-radius); background: #fff; box-shadow: var(--sp-shadow); }

/* Auswahlleiste ueber Listen (Saison, Team, Division) */
.sp-filter-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 14px; }
.sp-filter-bar .spDropdown { margin: 0; }
.sp-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin: 4px 0 12px; }
.sp-page-head h3 { margin: 0; }

/* ----------------------------------------------------------
   4.10 LIVE-Seite: kompakte Liste, eine Zeile pro Spiel
   (Heim und Gast untereinander, damit am Handy die Namen Platz haben)
---------------------------------------------------------- */
.sp-live-updated { color: var(--sp-muted); font-size: 12px; }
.sp-live-summary { color: var(--sp-muted); font-size: 13px; margin: 0 0 4px; }
.sp-live-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; }
.sp-chip {
    border: 1px solid var(--sp-border);
    background: var(--sp-card);
    color: var(--sp-text);
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.sp-chip[aria-pressed="true"] { background: #3d434b; border-color: #3d434b; color: #fff; }
.sp-live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sp-accent);
    margin-right: 4px;
    vertical-align: 1px;
    animation: sp-live-pulse 1.6s infinite;
}
@keyframes sp-live-pulse { 50% { opacity: .25; } }
.sp-live-list {
    background: var(--sp-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    overflow: hidden;
}
.sp-live-row {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding: 8px 14px;
    color: var(--sp-text);
    font-size: 15px;
}
.sp-live-row + .sp-live-row { border-top: 1px solid var(--sp-divider); }
.sp-live-row:hover, .sp-live-row:focus { background: #f7f8fa; color: var(--sp-text); text-decoration: none; }
.sp-live-row[hidden], .sp-live-group[hidden] { display: none; }
.sp-live-state { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-align: center; line-height: 1.3; }
.sp-live-state small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--sp-muted); font-variant-numeric: tabular-nums; }
.sp-live-running { color: var(--sp-accent); }
.sp-live-finished { color: var(--sp-done-ink); }
.sp-live-not_started { color: var(--sp-muted); }
.sp-live-teams, .sp-live-score { display: grid; gap: 2px; }
.sp-live-teams > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-live-teams small { color: var(--sp-muted); font-size: 12px; }
.sp-live-score > span {
    min-width: 24px;
    padding: 0 3px;
    border-radius: 4px;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background-color .6s ease;
}
.sp-live-lead { font-weight: 700; }
.sp-live-trail { color: var(--sp-muted); }
.sp-live-score > .sp-live-flash { background: var(--sp-warn-bg); }
.sp-live-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--sp-accent); }

/* ----------------------------------------------------------
   4.11 Spiele verwalten: Filterfelder im Raster, eine Zeile pro Spiel
   (am Handy umgebrochen: Kopfzeile, Teams + Ergebnis, Status + Aktionen)
---------------------------------------------------------- */
.sp-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; align-items: end; }
.sp-field { display: grid; gap: 4px; margin: 0; font-weight: normal; min-width: 0; }
.sp-field > span { color: var(--sp-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.sp-field select, .sp-field input[type=number] { width: 100%; min-width: 0; height: 40px; margin: 0; padding: 0 8px; border: 1px solid #d7d7d7; border-radius: 5px; background: #fff; }
.sp-field-check { display: flex; align-items: center; gap: 4px; min-height: 40px; cursor: pointer; }
.sp-filter-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.sp-filter-actions .spButtonSmall { margin: 0; min-height: 40px; }

.sp-admin-games {
    background: var(--sp-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    margin-bottom: 16px;
}
.sp-admin-game {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 90px 150px auto;
    gap: 6px 12px;
    align-items: center;
    padding: 8px 14px;
}
.sp-admin-game + .sp-admin-game { border-top: 1px solid var(--sp-divider); }
.sp-admin-game-key { font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-admin-game-key small { display: block; color: var(--sp-muted); font-size: 12px; font-weight: 500; }
.sp-admin-game-result { display: grid; justify-items: end; gap: 2px; }
.sp-admin-game-result small { color: var(--sp-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-admin-game .sp-game-teams { overflow-wrap: break-word; }
.sp-admin-game .sp-game-actions { flex-wrap: nowrap; gap: 4px; }

@media (max-width: 767px) {
    .sp-filter-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; }
    .sp-filter-actions .spButtonSmall { width: 100%; }

    .sp-admin-game { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; }
    .sp-admin-game-key { grid-column: 1 / -1; font-size: 12px; color: var(--sp-muted); }
    .sp-admin-game-key small { display: inline; margin-left: 4px; }
    .sp-admin-game .sp-game-teams { font-weight: 600; }
    .sp-admin-game .sp-game-meta { font-weight: normal; }
    .sp-admin-game .sp-table-actions .sp-link-button { width: 40px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-live-dot { animation: none; }
    .sp-live-score > span { transition: none; }
}