/*
 * Schulfunk Theme for Element Web — v3 (clean rebuild)
 * Empennage UG
 *
 * Farben:
 *   Navy:  #1e304c  (Sidebar, Header, Text auf hellem Grund)
 *   Gruen: #7ab329  (Buttons, Badges, Akzent)
 *   Weiss: #ffffff  (Chat-Bereich)
 *   Grau:  #f5f5f7  (Canvas-Hintergrund)
 */

/* ── Montserrat Font (selbst gehostet) ─────────────────── */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/montserrat-v31-latin_latin-ext-regular.woff2') format('woff2'),
       url('/fonts/montserrat-v31-latin_latin-ext-regular.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/montserrat-v31-latin_latin-ext-500.woff2') format('woff2'),
       url('/fonts/montserrat-v31-latin_latin-ext-500.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/montserrat-v31-latin_latin-ext-600.woff2') format('woff2'),
       url('/fonts/montserrat-v31-latin_latin-ext-600.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/montserrat-v31-latin_latin-ext-700.woff2') format('woff2'),
       url('/fonts/montserrat-v31-latin_latin-ext-700.woff') format('woff');
}

/* ── Compound Font-System Override ─────────────────────── */
/* Element's @layer compound > @media screen > @layer cpd-base
   definiert Inter + "Inter Fallback: *" Fonts mit size-adjust
   Overrides, die das Wort-Spacing kaputt machen.

   Fix: Unlayered CSS schlägt layered CSS in der Kaskade.
   Wir überschreiben ALLE font-bezogenen Compound-Tokens. */
@media screen {
  :root, [class*="cpd-theme-"] {
    --cpd-font-family-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cpd-font-letter-spacing-body-md: 0;
    --cpd-font-letter-spacing-body-sm: 0;
    --cpd-font-letter-spacing-body-lg: 0;
    --cpd-font-letter-spacing-heading-xl: 0;
    --cpd-font-letter-spacing-heading-lg: 0;
    --cpd-font-letter-spacing-heading-md: 0;
    --cpd-font-letter-spacing-heading-sm: 0;
    --cpd-letter-spacing-body-md: 0;
    --cpd-font-body-md-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-body-md)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
    --cpd-font-body-md-medium: var(--cpd-font-weight-medium) var(--cpd-font-size-body-md)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
    --cpd-font-body-md-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-body-md)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);

    /* ── Schulfunk-Grün statt Element-Teal ──────────────── */
    --cpd-color-text-action-accent: #7ab329;
    --cpd-color-icon-accent-tertiary: #7ab329;
    --cpd-color-bg-action-primary-rest: #7ab329;
    --cpd-color-bg-action-primary-hovered: #6a9a22;
    --cpd-color-bg-action-primary-pressed: #5a8319;
    --cpd-color-text-link-external: #7ab329;
    --cpd-color-icon-on-solid-primary: #ffffff;

    /* Grün-Palette ersetzen (die meistgenutzten Stufen) */
    --cpd-color-green-800: #7ab329;
    --cpd-color-green-900: #6a9a22;
    --cpd-color-green-1000: #5a8319;
    --cpd-color-green-1100: #4a6c14;
    --cpd-color-green-700: #8cc43e;
    --cpd-color-green-600: #9dd353;
    --cpd-color-green-500: #aee068;
    --cpd-color-green-400: #c5e99a;
    --cpd-color-green-300: #ddf2c4;
    --cpd-color-green-200: #eef8e2;
    --cpd-color-green-100: #f7fcf0;
  }
}

/* ── Compound Design Tokens überschreiben ──────────────── */
:root {
  --cpd-color-bg-canvas-default: #f5f5f7 !important;
  --cpd-color-bg-subtle-primary: #1e304c !important;
  --cpd-color-bg-subtle-secondary: #1e304c !important;
  --cpd-color-text-primary: #1e304c !important;
  --cpd-color-action-primary: #7ab329 !important;
  --cpd-color-action-primary-hovered: #6a9a22 !important;
}

/* ── Space-Leiste (ganz links) ─────────────────────────── */
.mx_SpacePanel {
  background-color: #1e304c !important;
}

/* Space-Avatare: rund wie in der Element-App */
.mx_SpaceButton .mx_BaseAvatar,
.mx_SpaceButton .mx_BaseAvatar img,
.mx_SpaceButton .mx_BaseAvatar span {
  border-radius: 50% !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Eingeklappt: grüner Rand um den Avatar des aktiven Spaces */
.mx_SpaceButton_selectionWrapper {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Eingeklappt (narrow): runder Rand um Icon */
.mx_SpaceButton_narrow.mx_SpaceButton_active .mx_SpaceButton_selectionWrapper {
  border: 2px solid #7ab329 !important;
  border-radius: 50% !important;
  padding: 2px !important;
}
/* Ausgeklappt: grüne Hintergrund-Akzentfarbe statt Rand */
.mx_SpaceButton_active:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
  background: rgba(122, 179, 41, 0.2) !important;
  border-radius: 8px !important;
}

/* Aktiver Indikator-Balken (grüne Pill links) ausblenden,
   aber Aufklapp-Toggle beibehalten */
.mx_SpacePanel .mx_SpaceButton::before,
.mx_SpacePanel .mx_SpaceButton::after {
  display: none !important;
}

.mx_SpacePanel svg,
.mx_SpacePanel .mx_SpaceButton_name {
  color: rgba(255, 255, 255, 0.8) !important;
  fill: rgba(255, 255, 255, 0.8) !important;
}

/* ── Home-Button ─────────────────────────────────────── */
/* Deaktiviert via element-config.json:
   Spaces.enabledMetaSpaces.home = false
   Das Schulfunk-Logo im Header dient als Home-Link. */

/* ── User-Info oben in der Space-Leiste ──────────────── */
/* Username + Avatar: kein weißer Kasten, transparent auf Navy */
.mx_SpacePanel .mx_UserMenu_Avatar,
.mx_SpacePanel .mx_BaseAvatar {
  border: none !important;
  box-shadow: none !important;
}
/* UserMenu-Button: weißen Hintergrund/Kasten entfernen */
.mx_SpacePanel .mx_UserMenu,
.mx_SpacePanel .mx_UserMenu > button,
.mx_SpacePanel [class*="mx_UserMenu"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Username gut lesbar */
.mx_SpacePanel .mx_UserMenu_name,
.mx_SpacePanel .mx_UserMenu button span,
.mx_SpacePanel [class*="mx_UserMenu"] span {
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  background: transparent !important;
}

/* ── Raumliste / Sidebar ───────────────────────────────── */
.mx_LeftPanel_wrapper,
.mx_LeftPanel_actualWrapper,
.mx_LeftPanel {
  background-color: #1e304c !important;
}

/* Raum-Avatare: kein weißer Rand, sauber auf dunklem Grund */
.mx_RoomTile .mx_BaseAvatar,
.mx_RoomTile .mx_DecoratedRoomAvatar .mx_BaseAvatar {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.mx_RoomTile .mx_BaseAvatar img,
.mx_RoomTile .mx_BaseAvatar span {
  border: none !important;
  box-shadow: none !important;
}
/* Compound Avatar Ring entfernen */
.mx_DecoratedRoomAvatar::before,
.mx_DecoratedRoomAvatar::after {
  border: none !important;
  box-shadow: none !important;
}

.mx_RoomTile_name {
  color: rgba(255, 255, 255, 0.9) !important;
}
.mx_RoomTile_messagePreview {
  color: rgba(255, 255, 255, 0.5) !important;
}
.mx_RoomSublist_headerText,
.mx_RoomListHeader_name {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}
.mx_RoomTile {
  background: transparent !important;
  border-radius: 8px !important;
}
.mx_RoomTile:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
.mx_RoomTile_selected {
  background: rgba(122, 179, 41, 0.2) !important;
}
.mx_RoomTile_selected .mx_RoomTile_name {
  color: white !important;
  font-weight: 600 !important;
}

/* Suchfeld */
.mx_RoomSearch {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.mx_RoomSearch input {
  color: white !important;
}
.mx_RoomSearch input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
.mx_RoomSearch svg {
  fill: rgba(255, 255, 255, 0.5) !important;
}

/* User-Menü */
.mx_UserMenu {
  background: #1e304c !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.mx_UserMenu_userInfo_displayName {
  color: white !important;
}
.mx_UserMenu_userInfo_subtitle {
  color: rgba(255, 255, 255, 0.5) !important;
}
.mx_UserMenu svg {
  fill: rgba(255, 255, 255, 0.7) !important;
}

/* ── Globale Avatar-Bereinigung ──────────────────────── */
/* Kein weißer Ring/Border um Avatare auf dunklem Grund */
.mx_BaseAvatar {
  border: none !important;
  outline: none !important;
}
/* Compound-Avatar Ring-Indikatoren entfernen */
[class*="cpd-avatar"],
[data-type="round"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Presence-Ring um User-Avatar dezenter */
.mx_BaseAvatar::before,
.mx_BaseAvatar::after {
  border-color: transparent !important;
}

/* ── Room Header (hell) ────────────────────────────────── */
.mx_RoomHeader {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.mx_RoomHeader_name {
  color: #1e304c !important;
  font-weight: 600 !important;
}
.mx_RoomHeader_topic {
  color: #64748b !important;
  font-size: 12px !important;
}
.mx_RoomHeader button svg {
  fill: #64748b !important;
}
.mx_RoomHeader button:hover svg {
  fill: #1e304c !important;
}

/* ── Buttons ───────────────────────────────────────────── */
.mx_AccessibleButton_kind_primary {
  background-color: #7ab329 !important;
  color: white !important;
  border: none !important;
}
.mx_AccessibleButton_kind_primary:hover {
  background-color: #6a9a22 !important;
}

/* Badges */
.mx_NotificationBadge {
  background-color: #7ab329 !important;
  color: white !important;
}

/* ── Chat-Bereich ──────────────────────────────────────── */
.mx_RoomView_body,
.mx_RoomView {
  background: #f5f5f7 !important;
}
.mx_ScrollPanel {
  background: white !important;
}
.mx_EventTile_body,
.mx_EventTile_content {
  color: #1e304c !important;
}
.mx_EventTile_senderDetails .mx_DisplayName {
  font-weight: 600 !important;
}
.mx_EventTile_info .mx_TextualEvent {
  color: #94a3b8 !important;
  font-size: 12px !important;
}
.mx_MessageTimestamp {
  color: #94a3b8 !important;
}

/* Eingabefeld */
.mx_MessageComposer {
  background: white !important;
  border-top: 1px solid #e2e8f0 !important;
}
.mx_MessageComposer_sendMessage {
  background: #7ab329 !important;
}
.mx_MessageComposer_sendMessage svg {
  fill: white !important;
}

/* ── System-Events ausblenden ──────────────────────────── */
.mx_MRoomAvatarEvent {
  display: none !important;
}
.mx_EventTile_info .mx_MRoomCreateEvent {
  display: none !important;
}

/* ── Welcome / Login ───────────────────────────────────── */
.mx_ButtonSignIn {
  background-color: #1e304c !important;
}
.mx_ButtonCreateAccount {
  background-color: #7ab329 !important;
}