/* ============================================================================
   Burgermenü (#sidemenu) — Dossier-Redesign
   Fest in index.html eingebunden (nach index.css) -> überschreibt die alten
   #sidemenu-Regeln. Slide-Mechanik (#sidemenu translateX / .sidemenu_open)
   bleibt unangetastet. !important auf layout-kritischen Props (globale
   index.css-Regeln tragen teils selbst !important). Mechanik/IDs unverändert.
   ============================================================================ */

#sidemenu_content {
    background: linear-gradient(180deg, #0c0c18 0%, #1c0c30 45%, var(--bg-second-dark) 100%) !important;
    color: var(--app-text, #fff) !important;
    width: 82% !important;
    height: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 14px 0 30px rgba(0,0,0,0.5) !important;
}

/* ---- Header: Logo + Schließen ---- */
#sidemenu_header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: calc(env(safe-area-inset-top) + 12px) 16px 10px !important;
    flex: 0 0 auto;
}
#sidemenu_header img:first-child { height: 21px; width: auto; }
#sidemenu_header .headerCloseButton {
    width: 22px !important; height: 22px !important;
    padding: 8px !important;
    box-sizing: content-box !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    filter: none !important;
    flex: 0 0 auto !important;
    cursor: pointer;
}

/* ---- Scroll-Bereich ---- */
.sidemenu__area {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 0 14px calc(env(safe-area-inset-bottom) + 12px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto;
}
.sidemenu__area::-webkit-scrollbar { display: none; }
.border-bottom { display: none !important; }

/* ---- Dossier-Karte (Basis) ---- */
#wappenArea, #sidemenu_cash, .nextGame__area, #launeScore {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 16px !important;
    margin: 0 !important;
}

/* ---- Verein-Karte ---- */
#wappenArea {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px !important;
}
#sidemenu_wappen { flex: 0 0 auto; width: 46px; height: 46px; }
#sidemenu_wappen .svg, #sidemenu_wappen svg, #sidemenu_wappen img,
#sidemenu_wappen > .wappen_div { width: 46px !important; height: 46px !important; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
#sidemenu_rightSide { min-width: 0; flex: 1; }
#sidemenu_teamname {
    color: var(--app-text, #fff) !important;
    font-family: "MADEOuterSans" !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#sidemenu_liga {
    display: inline-block !important;
    margin-top: 4px !important;
    font-size: 10px !important;
    color: var(--buttongreen) !important;
    background: rgba(99,255,159,0.12) !important;
    padding: 2px 9px !important;
    border-radius: 20px !important;
}

/* ---- Finanzen: zwei Kacheln ---- */
#sidemenu_cash {
    display: flex !important;
    gap: 0 !important;
    padding: 0 !important;
    min-height: 58px !important;
    overflow: hidden;
}
.sidemenu_kasse, .sidemenu_schwarzekasse {
    flex: 1 1 0 !important;
    width: auto !important;
    padding: 11px 13px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    min-width: 0 !important;
}
.sidemenu_schwarzekasse { border-left: 1px solid rgba(255,255,255,0.09) !important; }
.kasse_label, .schwarzekasse_label, #sidemenu .sidebar__subtitle {
    font-size: 10px !important;
    color: var(--app-text, rgba(255,255,255,0.85)) !important;
    margin-bottom: 4px !important;
    font-family: "Inter" !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    background: none !important;
}
.kasse_stand, .schwarzekasse_stand {
    font-family: "MADEOuterSans" !important;
    font-size: 16px !important;
    background: none !important;
    background-color: transparent !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kasse_stand { color: var(--buttongreen) !important; }
.schwarzekasse_stand { color: #F0B23A !important; }

/* ---- Nächstes Spiel ---- */
.nextGame__area { padding: 11px 13px !important; }
.nextGameLabel {
    font-size: 10px !important; color: var(--app-text, rgba(255,255,255,0.85)) !important;
    margin-bottom: 9px !important; font-family: "Inter" !important; text-transform: none !important;
}
/* Eine Zeile: Wappen-Heim · Name-Heim · VS · Name-Gast · Wappen-Gast */
#nextGame {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}
#nextGame .spielerHeim, #nextGame .spielerGast,
.nextGame__area .spielerHeim, .nextGame__area .spielerGast,
.nextGame__area .wappen_div { width: 24px !important; height: 24px !important; flex: 0 0 auto !important; }
#nextGame .spielerHeim .svg, #nextGame .spielerGast .svg,
#nextGame .spielerHeim svg, #nextGame .spielerGast svg,
.nextGame__area .wappen_div .svg, .nextGame__area .wappen_div svg { width: 24px !important; height: 24px !important; }
.spielerNamen { display: contents !important; }
.spielerHeim { order: 1 !important; }
.heimSpieler { order: 2 !important; text-align: right !important; }
.VS {
    order: 3 !important;
    flex: 0 0 auto !important;
    color: var(--app-text, rgba(255,255,255,0.85)) !important;
    font-family: "Inter" !important;
    font-size: 11px !important; font-weight: 500 !important;
    background: none !important; padding: 0 2px !important;
    height: auto !important; width: auto !important;
}
.gastSpieler { order: 4 !important; text-align: left !important; }
.spielerGast { order: 5 !important; }
.heimSpieler, .gastSpieler {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 92px !important;
    color: var(--app-text, #fff) !important;
    font-family: "Inter" !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    background: none !important;
}
.heimSpieler { grid-column: 1; text-align: left; }
.gastSpieler { grid-column: 3; text-align: right; }

/* ---- Stimmung: drei Donut-Ringe ---- */
#launeScore {
    display: flex !important;
    gap: 0 !important;
    padding: 0 !important;
    min-height: 86px !important;
    overflow: hidden;
}
.laune-item {
    flex: 1 1 0 !important;
    width: auto !important;
    text-align: center !important;
    padding: 12px 4px !important;
    background: transparent !important;
    border: none !important;
    min-width: 0 !important;
}
.laune-item + .laune-item { border-left: 1px solid rgba(255,255,255,0.09) !important; }
.laune-ring {
    width: 50px !important; height: 50px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    background: conic-gradient(var(--buttongreen) 0%, rgba(255,255,255,0.1) 0%);
    display: flex !important; align-items: center; justify-content: center;
    line-height: normal !important;
}
.laune-ring .laune-val {
    width: 41px !important; height: 41px !important;
    border-radius: 50% !important;
    background: #1a1228 !important;
    display: flex !important; align-items: center; justify-content: center;
    color: var(--app-text, #fff) !important;
    font-family: "MADEOuterSans" !important;
    font-size: 11px !important;
    line-height: 1 !important;
}
.laune-label {
    font-size: 10px !important;
    color: var(--app-text, rgba(255,255,255,0.85)) !important;
    margin-top: 7px !important;
    font-family: "Inter" !important;
}

/* ---- Menü-Items ---- */
#sidemenu_items {
    margin: 4px 0 0 !important;
    padding: 0 !important;
    border: none !important;
}
.sm-item {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    padding: 10px 4px !important;
    margin: 0 !important;
    color: var(--app-text, #fff) !important;
    font-family: "MADEOuterSans" !important;
    font-size: 14px !important;
    position: relative;
    background: none !important;
    border: none !important;
}
.sm-item + .sm-item::before {
    content: "";
    position: absolute;
    top: 0; left: 35px; right: 0;
    height: 1px;
    background: rgba(255,255,255,0.07);
}
.sm-item .sm-icon {
    width: 22px !important; height: 22px !important;
    flex: 0 0 auto;
    color: var(--buttongreen) !important;
}
.sm-item .sm-icon svg, .sm-item .sm-icon path { stroke: var(--buttongreen) !important; }
.sm-item span { flex: 1; }
.sm-item::after {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid rgba(255,255,255,0.3);
    transform: rotate(45deg);
    flex: 0 0 auto;
    margin-left: auto;
}
.sm-item--news::after { display: none; }
.sm-item--news .signal__main--news {
    margin-left: auto !important;
    margin-right: 10px !important;
    background: var(--buttongreen) !important;
    color: #073d22 !important;
    font-family: "MADEOuterSans" !important;
    font-size: 10px !important;
    min-width: 18px; height: 18px;
    border-radius: 9px !important;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px !important;
    line-height: 1 !important;
}

/* ---- Freunde einladen: grüner Button ---- */
#freunde_einladen_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 6px 0 4px !important;
    padding: 13px !important;
    background: var(--buttongreen) !important;
    color: #073d22 !important;
    border-radius: 26px !important;
    font-family: "MADEOuterSans" !important;
    font-size: 14px !important;
}
#freunde_einladen_button .svg, #freunde_einladen_button svg, #freunde_einladen_button img { width: 20px !important; height: 20px !important; }
#freunde_einladen_button svg path { stroke: #073d22 !important; }

/* ---- Footer: Konto ---- */
#sidemenu_footer {
    margin: 4px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}
#sidemenu_footer .sidebar__subtitle {
    font-size: 10px !important; letter-spacing: 0.5px !important;
    color: var(--app-text, rgba(255,255,255,0.85)) !important; margin-bottom: 10px !important;
    text-transform: uppercase !important;
}
#sidemenu_footer .footerContent {
    display: flex !important;
    flex-wrap: wrap !important;
    column-gap: 18px; row-gap: 11px;
}
#sidemenu_footer .footerItem {
    font-family: "Inter" !important;
    font-size: 13px !important;
    color: var(--app-text, rgba(255,255,255,0.85)) !important;
    margin: 0 !important;
}
#sidemenu_footer .delete-account { color: #F75555 !important; text-decoration: none; }
#sidemenu_version {
    font-size: 10px !important;
    color: var(--app-text, rgba(255,255,255,0.25)) !important;
    margin: 14px 0 0 !important;
    padding: 0 14px !important;
    flex: 0 0 auto;
}

/* iOS: padding-top übernimmt der Header (safe-area), Content-Box selbst ohne */
.iOS_shift #sidemenu_content { padding: 0 !important; }