/**
 * Kompakte Kopfleiste (Handy/Tablet, eingeloggte App, Classic und Kompakt).
 *
 * Eine Zeile wie bei WhatsApp: ☰ · Seitentitel · Glocke · Profil. Logo, Sprache, Hilfe,
 * Darstellung, Abmelden und „Profil wechseln“ stehen im Profilmenü (sf_topbar_menu in app.js).
 * Kein Rahmen mehr um die Seite; die Leiste läuft bis hinter die Statusleiste (safe-area).
 */
@media (max-width: 960px) {
  body:not(.sf-guest-shell) {
    --sf-tb-bg: linear-gradient(180deg, #f1f6fc 0%, #f7fafd 100%);
    --sf-tb-line: #dde6f1;
    --sf-tb-title: #0d5a9e;
    --sf-tb-btn: #ffffff;
    --sf-tb-btn-ink: #0f1a2e;
  }

  body[data-theme="dark"]:not(.sf-guest-shell) {
    --sf-tb-bg: linear-gradient(180deg, #14213a 0%, #111c30 100%);
    --sf-tb-line: #2a3d5c;
    --sf-tb-title: #b8d4f0;
    --sf-tb-btn: #1f2f4d;
    --sf-tb-btn-ink: #e8eef6;
  }

  /* Kein Rahmen um die Seite */
  body:not(.sf-guest-shell) .app-shell,
  body.sf-native-app:not(.sf-guest-shell) .app-shell {
    padding: 0 !important;
  }

  body:not(.sf-guest-shell) .content {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 12px 16px !important;
    gap: 12px;
  }

  body:not(.sf-guest-shell) .content::before {
    display: none !important;
  }

  body.sf-ui-mobile-trainer:not(.sf-guest-shell) .content {
    padding-bottom: calc(var(--sf-m-nav-h, 60px) + env(safe-area-inset-bottom, 0px) + 1.25rem) !important;
  }

  /* Kopfleiste: eine Zeile, randlos, bis hinter die Statusleiste */
  body:not(.sf-guest-shell) .topbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 4px;
    grid-template-areas: none;
    min-height: 0;
    width: auto !important;
    max-width: none !important;
    margin: 0 -12px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) max(8px, env(safe-area-inset-right, 0px)) 8px
      max(8px, env(safe-area-inset-left, 0px)) !important;
    background: var(--sf-tb-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sf-tb-line) !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 14px rgba(15, 26, 46, 0.06) !important;
    overflow: visible;
  }

  body:not(.sf-guest-shell) .topbar-left {
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 6px !important;
    min-width: 0;
  }

  body:not(.sf-guest-shell) .topbar-brand-logo,
  body:not(.sf-guest-shell) .topbar-context-pill {
    display: none !important;
  }

  body:not(.sf-guest-shell) .topbar .page-title {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 0 0 4px !important;
    font-size: 1.25rem !important;
    font-weight: 800;
    line-height: 1.2;
    color: var(--sf-tb-title) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body:not(.sf-guest-shell) .topbar-actions {
    display: flex !important;
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 6px !important;
  }

  /* Wandert ins Profilmenü */
  body:not(.sf-guest-shell) .topbar-actions > .sf-lang-switcher-host,
  body:not(.sf-guest-shell) .topbar-actions > #pageHintToggle,
  body:not(.sf-guest-shell) .topbar-actions > #darkModeToggle,
  body:not(.sf-guest-shell) .topbar-actions > #logoutButton,
  body:not(.sf-guest-shell) .topbar .sf-m-head-profile,
  body:not(.sf-guest-shell) #sfNativeClubSwitch,
  body:not(.sf-guest-shell) .sf-native-club-switch {
    display: none !important;
  }

  body:not(.sf-guest-shell) .topbar #notificationButton {
    order: 1;
  }

  body:not(.sf-guest-shell) .topbar .avatar-button {
    order: 2;
  }

  body:not(.sf-guest-shell) .topbar .icon-button,
  body:not(.sf-guest-shell) .topbar .menu-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    background: var(--sf-tb-btn) !important;
    color: var(--sf-tb-btn-ink);
    border: 0 !important;
    box-shadow: 0 2px 8px rgba(15, 26, 46, 0.12) !important;
  }

  body:not(.sf-guest-shell) .topbar .avatar-button {
    background: #1e3a8a !important;
    color: #ffffff !important;
  }

  body:not(.sf-guest-shell) .topbar .avatar-button .avatar-initials {
    color: #ffffff;
    font-weight: 800;
  }

  /* Hilfe-Text der Seite direkt unter der Leiste */
  body:not(.sf-guest-shell) .topbar .help-panel {
    right: 8px;
  }

  /* Chats: der Kopf trägt den Titel — keine zweite Überschrift */
  body:not(.sf-guest-shell) .sfc:not(.is-portal) .sfc-list-head {
    display: none;
  }

  /* Teilnahme: Mannschaft, Terminoptionen, Umfragen und „+ Termin“ in einer Zeile */
  body:not(.sf-guest-shell) .attendance-teilnahme-card-header {
    display: none !important;
  }

  body:not(.sf-guest-shell) .attendance-teilnahme-toolbar {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
  }

  body:not(.sf-guest-shell) .attendance-teilnahme-toolbar .attendance-teilnahme-filters {
    flex: 1 1 0 !important;
    width: auto !important;
    margin: 0 !important;
  }

  body:not(.sf-guest-shell) .attendance-teilnahme-filters__label {
    display: none;
  }

  body:not(.sf-guest-shell) .attendance-teilnahme-filters__select {
    height: 42px;
    font-weight: 700;
  }

  body:not(.sf-guest-shell) .attendance-teilnahme-toolbar .attendance-teilnahme-toolbar__actions {
    width: auto !important;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
    margin-left: 0;
  }

  body:not(.sf-guest-shell) .attendance-teilnahme-toolbar__actions > .cta.ghost {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0 !important;
    border-radius: 50%;
    font-size: 0 !important;
    line-height: 0;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d5a9e' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h9M17 6h3M15 4v4M4 12h3M11 12h9M9 10v4M4 18h11M19 18h1M17 16v4'/%3E%3C/svg%3E");
  }

  body:not(.sf-guest-shell) .attendance-teilnahme-toolbar__actions > #attendanceSurveysBtn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d5a9e' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 20V11M12 20V4M19 20v-7'/%3E%3C/svg%3E");
  }

  body[data-theme="dark"]:not(.sf-guest-shell) .attendance-teilnahme-toolbar__actions > .cta.ghost {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8d4f0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h9M17 6h3M15 4v4M4 12h3M11 12h9M9 10v4M4 18h11M19 18h1M17 16v4'/%3E%3C/svg%3E");
  }

  body[data-theme="dark"]:not(.sf-guest-shell) .attendance-teilnahme-toolbar__actions > #attendanceSurveysBtn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8d4f0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 20V11M12 20V4M19 20v-7'/%3E%3C/svg%3E");
  }

  body:not(.sf-guest-shell) .attendance-teilnahme-toolbar .attendance-teilnahme-new-btn {
    width: auto !important;
    height: 42px;
    padding: 0 16px !important;
  }

  body:not(.sf-guest-shell) .attendance-teilnahme-toolbar .attendance-teilnahme-kind-filter {
    flex: 1 1 100%;
  }

  /* Kalender: Terminoptionen als runder Knopf neben Kalender | Liste, Monatskopf einzeilig */
  body:not(.sf-guest-shell) main.page > section.card:has(> .incoming-cal-card-header) {
    position: relative;
  }

  body:not(.sf-guest-shell) .incoming-cal-card-header {
    position: absolute !important;
    top: 12px;
    right: 12px;
    z-index: 2;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
  }

  body:not(.sf-guest-shell) .incoming-cal-card-header::before,
  body:not(.sf-guest-shell) .incoming-cal-card-header > div {
    display: none !important;
  }

  body:not(.sf-guest-shell) .incoming-cal-card-header > .cta.ghost {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0 !important;
    border-radius: 50%;
    font-size: 0 !important;
    line-height: 0;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d5a9e' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h9M17 6h3M15 4v4M4 12h3M11 12h9M9 10v4M4 18h11M19 18h1M17 16v4'/%3E%3C/svg%3E");
  }

  body[data-theme="dark"]:not(.sf-guest-shell) .incoming-cal-card-header > .cta.ghost {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8d4f0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h9M17 6h3M15 4v4M4 12h3M11 12h9M9 10v4M4 18h11M19 18h1M17 16v4'/%3E%3C/svg%3E");
  }

  body:not(.sf-guest-shell) .incoming-cal-view-tabs {
    min-height: 40px;
    align-items: center;
    padding-right: 52px;
  }

  body:not(.sf-guest-shell) .incoming-fc-mount .fc-header-toolbar {
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.6rem !important;
  }

  body:not(.sf-guest-shell) .incoming-fc-mount .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  body:not(.sf-guest-shell) .incoming-fc-mount .fc-toolbar-title {
    font-size: 1.15rem !important;
    white-space: nowrap;
  }

  body:not(.sf-guest-shell) .incoming-fc-mount .fc-button {
    padding: 0.3rem 0.55rem !important;
    font-size: 0.85rem !important;
  }
}

/* ---------- Eltern-/Spieler-Portal (body.sf-ptb-on, gesetzt von 0026-core-portal-topbar.js) ---------- */
body.sf-ptb-on.sf-guest-shell {
  --sf-tb-bg: linear-gradient(180deg, #f1f6fc 0%, #f7fafd 100%);
  --sf-tb-line: #dde6f1;
  --sf-tb-btn: #ffffff;
  --sf-tb-btn-ink: #0f1a2e;
  --sf-ptb-ink: #0f1a2e;
  --sf-ptb-muted: #5a6b82;
}

body.sf-ptb-on.sf-guest-shell[data-theme="dark"] {
  --sf-tb-bg: linear-gradient(180deg, #14213a 0%, #111c30 100%);
  --sf-tb-line: #2a3d5c;
  --sf-tb-btn: #1f2f4d;
  --sf-tb-btn-ink: #e8eef6;
  --sf-ptb-ink: #e8eef6;
  --sf-ptb-muted: #b8c8dc;
}

/* Classic: kein Rahmen um die Seite (Kompakt/Liste regelt Rahmen und Abstand zur unteren Leiste selbst) */
body.sf-ptb-on.sf-guest-shell:not(.sf-ui-mobile-active) .app-shell {
  padding: 0 !important;
}

body.sf-ptb-on.sf-guest-shell:not(.sf-ui-mobile-active) .content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 12px 16px !important;
}

body.sf-ptb-on.sf-guest-shell .topbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 -12px 12px !important;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) max(8px, env(safe-area-inset-right, 0px)) 8px
    max(8px, env(safe-area-inset-left, 0px)) !important;
  background: var(--sf-tb-bg) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sf-tb-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 14px rgba(15, 26, 46, 0.06) !important;
}

/* Kompakt/Liste: Farben der Kompakt-Oberfläche (grünlicher Grund) */
body.sf-ptb-on.sf-guest-shell.sf-ui-mobile-active {
  --sf-tb-bg: linear-gradient(180deg, #f8fbf9 0%, #eef3f0 100%);
  --sf-tb-line: rgba(20, 61, 50, 0.1);
}

body.sf-ptb-on.sf-guest-shell.sf-ui-mobile-active[data-theme="dark"] {
  --sf-tb-bg: #17201d;
  --sf-tb-line: rgba(255, 255, 255, 0.1);
  --sf-tb-btn: #1b2622;
  --sf-tb-btn-ink: #e8f2ee;
  --sf-ptb-ink: #e8f2ee;
  --sf-ptb-muted: rgba(232, 242, 238, 0.65);
}

/* Kompakt/Liste: Inhalt hat 0.85rem Rand */
body.sf-ptb-on.sf-guest-shell.sf-ui-mobile-active .topbar {
  margin: -0.35rem -0.85rem 0.75rem !important;
}

body.sf-ptb-on.sf-guest-shell .topbar-left {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.sf-ptb-on.sf-guest-shell .topbar-brand-logo,
body.sf-ptb-on.sf-guest-shell .topbar-context-pill,
body.sf-ptb-on.sf-guest-shell .topbar .page-title,
body.sf-ptb-on.sf-guest-shell .topbar-actions > .sf-lang-switcher-host,
body.sf-ptb-on.sf-guest-shell .topbar-actions > #pageHintToggle,
body.sf-ptb-on.sf-guest-shell .topbar-actions > #darkModeToggle,
body.sf-ptb-on.sf-guest-shell #sfNativeClubSwitch,
body.sf-ptb-on.sf-guest-shell .sf-native-club-switch,
body.sf-ptb-on.sf-guest-shell main.page > section.card > .card-header:has(#publicLightKidTitle),
body.sf-ptb-on.sf-guest-shell .sf-kid-child-switch,
body.sf-ptb-on.sf-guest-shell .sf-kid-refresh-btn,
body.sf-ptb-on.sf-guest-shell #sfMobileHeadTitle,
body.sf-ptb-on.sf-guest-shell #sfMobileHeadProfile {
  display: none !important;
}

/* Classic: PIN-Knöpfe stehen im ⋮-Menü (Kompakt/Liste: unter „Mehr“) */
body.sf-ptb-on.sf-guest-shell:not(.sf-ui-mobile-active) #publicLightKidRevealPinBtn,
body.sf-ptb-on.sf-guest-shell:not(.sf-ui-mobile-active) #publicLightKidRenewPinBtn,
body.sf-ptb-on.sf-guest-shell:not(.sf-ui-mobile-active) #publicLightKidLogoutBtn,
body.sf-ptb-on.sf-guest-shell:not(.sf-ui-mobile-active) #publicLightKidSetPinDetails:not([open]) {
  display: none !important;
}

body.sf-ptb-on.sf-guest-shell .topbar-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  gap: 6px !important;
}

body.sf-ptb-on.sf-guest-shell .topbar .icon-button,
body.sf-ptb-on.sf-guest-shell .topbar .menu-button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  background: var(--sf-tb-btn) !important;
  color: var(--sf-tb-btn-ink) !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(15, 26, 46, 0.12) !important;
  align-items: center;
  justify-content: center;
}

body.sf-ptb-on.sf-guest-shell .topbar .icon-button {
  display: inline-flex !important;
}

body:not(.sf-ptb-on) #sfPtbKid,
body:not(.sf-ptb-on) #sfPtbMore {
  display: none !important;
}

.sf-ptb-kid {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 0 2px;
  border: 0;
  background: transparent;
  color: var(--sf-ptb-ink, #0f1a2e);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sf-ptb-kid:disabled {
  cursor: default;
  opacity: 1;
}

.sf-ptb-kid__av {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(180deg, #6bc628, #4a9a18);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}

.sf-ptb-kid__txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sf-ptb-kid__name {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-ptb-kid__sub {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sf-ptb-muted, #5a6b82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-ptb-kid__sub:empty {
  display: none;
}

.sf-ptb-kid__chev {
  flex: none;
  display: none;
}

.sf-ptb-kid.can-switch .sf-ptb-kid__chev {
  display: block;
}

body.sf-ptb-on.sf-guest-shell main.page > section.card {
  padding-top: 0.25rem;
}

body.sf-ptb-on.sf-guest-shell #publicLightKidMain {
  margin-top: 0 !important;
}

/* Termine | Auswertung | Formkurve | Messenger als Tabs */
body.sf-ptb-on.sf-guest-shell:not(.sf-ui-mobile-active) #publicLightKidTabBar {
  display: flex !important;
  gap: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--sf-tb-line);
  overflow-x: auto;
  scrollbar-width: none;
}

body.sf-ptb-on.sf-guest-shell:not(.sf-ui-mobile-active) #publicLightKidTabBar .sf-kid-main-tab {
  flex: 1 0 auto;
  min-height: 46px;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--sf-ptb-muted, #5a6b82) !important;
  font-weight: 700;
  font-size: 0.98rem;
}

body.sf-ptb-on.sf-guest-shell:not(.sf-ui-mobile-active) #publicLightKidTabBar .sf-kid-main-tab.is-active {
  color: #0d5a9e !important;
  border-bottom-color: #1a7fd4 !important;
  font-weight: 800;
}

body.sf-ptb-on.sf-guest-shell:not(.sf-ui-mobile-active)[data-theme="dark"] #publicLightKidTabBar .sf-kid-main-tab.is-active {
  color: #b8d4f0 !important;
  border-bottom-color: #4da3e8 !important;
}

body.sf-ptb-on.sf-guest-shell .sfc.is-portal .sfc-list-head {
  display: none;
}

/* ---------- Profilmenü ---------- */
.sf-tb-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 12040;
  background: rgba(15, 26, 46, 0.4);
  animation: sf-tb-fade 0.15s ease-out;
}

.sf-tb-menu {
  position: fixed;
  z-index: 12041;
  top: calc(env(safe-area-inset-top, 0px) + 60px);
  right: max(10px, env(safe-area-inset-right, 0px));
  width: min(300px, calc(100vw - 20px));
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 80px);
  overflow-y: auto;
  background: #ffffff;
  color: #0f1a2e;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 26, 46, 0.25);
  animation: sf-tb-pop 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sf-tb-menu__who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #f4f7fb;
}

.sf-tb-menu__av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1e3a8a;
  color: #fff;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex: none;
}

.sf-tb-menu__name {
  font-weight: 800;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-tb-menu__sub {
  font-size: 0.82rem;
  color: #5a6b82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-tb-menu__item {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 50px;
  padding: 0 18px;
  border: 0;
  border-top: 1px solid #e3e9f2;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sf-tb-menu__item:hover,
.sf-tb-menu__item:focus-visible {
  background: #f4f7fb;
}

.sf-tb-menu__item svg {
  flex: none;
}

.sf-tb-menu__item .sf-tb-menu__val {
  margin-left: auto;
  color: #5a6b82;
  font-size: 0.88rem;
  font-weight: 600;
}

.sf-tb-menu__item.is-danger {
  color: #c0392b;
}

.sf-tb-menu__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 18px 12px 54px;
}

.sf-tb-menu__lang {
  appearance: none;
  border: 1.5px solid #cfdbe9;
  background: #fff;
  color: #0f1a2e;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.sf-tb-menu__lang.is-active {
  border-color: #0d5a9e;
  background: #eaf3fc;
  color: #0d5a9e;
}

body[data-theme="dark"] .sf-tb-menu {
  background: #1a2744;
  color: #e8eef6;
}

body[data-theme="dark"] .sf-tb-menu__who,
body[data-theme="dark"] .sf-tb-menu__item:hover,
body[data-theme="dark"] .sf-tb-menu__item:focus-visible {
  background: #14213a;
}

body[data-theme="dark"] .sf-tb-menu__item {
  border-top-color: #2a3d5c;
}

body[data-theme="dark"] .sf-tb-menu__sub,
body[data-theme="dark"] .sf-tb-menu__item .sf-tb-menu__val {
  color: #b8c8dc;
}

body[data-theme="dark"] .sf-tb-menu__item.is-danger {
  color: #ff8a80;
}

body[data-theme="dark"] .sf-tb-menu__lang {
  background: #14213a;
  border-color: #2a3d5c;
  color: #e8eef6;
}

body[data-theme="dark"] .sf-tb-menu__lang.is-active {
  border-color: #4da3e8;
  color: #b8d4f0;
}

@keyframes sf-tb-fade {
  from {
    opacity: 0;
  }
}

@keyframes sf-tb-pop {
  from {
    transform: translateY(-6px) scale(0.98);
    opacity: 0;
  }
}