@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* ════════════════════════════════════════
   SCHULFUNK DESIGN-REGELN:
   - Dunkler Hintergrund → weiße Schrift
   - Heller Hintergrund  → #1a2f5e Schrift
   - Buttons/Interaktion → #7ab329 grün, weiße Schrift
   - Sidebar             → #1a2f5e Navy
   - Space-Leiste        → #142447 dunkleres Navy
   - Header              → #1a2f5e Navy
   - Chat-Bereich        → weiß
════════════════════════════════════════ */

body { font-family: 'Montserrat', sans-serif !important; }

/* ── Space-Leiste ganz links ── */
.mx_SpacePanel { background-color: #142447 !important; }
.mx_SpacePanel .mx_SpaceButton_selectionWrapper {
    border: none !important;
    outline: none !important;
}
.mx_SpacePanel .mx_SpaceButton_active .mx_SpaceButton_selectionWrapper {
    background: rgba(122,179,41,0.3) !important;
    border: 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; }

/* ── Raumliste (Navy) ── */
.mx_LeftPanel_wrapper,
.mx_LeftPanel_actualWrapper,
.mx_LeftPanel { background-color: #1a2f5e !important; }

/* Alle Texte in Sidebar → weiß */
.mx_LeftPanel_wrapper .mx_RoomTile_name { color: rgba(255,255,255,0.9) !important; }
.mx_LeftPanel_wrapper .mx_RoomTile_messagePreview { color: rgba(255,255,255,0.5) !important; }
.mx_LeftPanel_wrapper .mx_RoomSublist_headerText,
.mx_LeftPanel_wrapper .mx_RoomListHeader_name { color: rgba(255,255,255,0.4) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; }

/* Raum-Tiles */
.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ü unten links (dunkel → weiß) */
.mx_UserMenu { background: #142447 !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; }

/* ── Header oben (Navy → weiße Schrift) ── */
.mx_RoomHeader {
    background: #1a2f5e !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.mx_RoomHeader_name { color: white !important; font-weight: 600 !important; }
.mx_RoomHeader_topic { color: rgba(255,255,255,0.6) !important; }
.mx_RoomHeader button svg { fill: rgba(255,255,255,0.7) !important; }
.mx_RoomHeader_chevron { fill: rgba(255,255,255,0.5) !important; }

/* ── Buttons → Grün mit weißer Schrift ── */
.mx_AccessibleButton_kind_primary {
    background-color: #7ab329 !important;
    color: white !important;
    font-weight: 600 !important;
    border: none !important;
}
.mx_AccessibleButton_kind_primary:hover { background-color: #6a9a22 !important; }
.mx_AccessibleButton_kind_primary svg { fill: white !important; }

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

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

/* Eingabefeld (hell → dunkle Schrift) */
.mx_MessageComposer {
    background: white !important;
    border-top: 1px solid #e2e8f0 !important;
}
.mx_MessageComposer .mx_BasicMessageComposer { color: #1a2f5e !important; }
.mx_MessageComposer svg { fill: #1a2f5e !important; }
.mx_MessageComposer_sendMessage { background: #7ab329 !important; }
.mx_MessageComposer_sendMessage svg { fill: white !important; }

/* Space-Button — kein schwarzer Rahmen, korrekte Position */
.mx_SpaceButton_selectionWrapper {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.mx_SpaceButton_active .mx_SpaceButton_selectionWrapper {
    background: rgba(122,179,41,0.3) !important;
    border: none !important;
    outline: none !important;
}
/* Space-Icon zentriert */
.mx_SpaceButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Header-Schrift — weiß auf Navy */
.mx_RoomHeader,
.mx_RoomHeader * { color: white !important; }
.mx_RoomHeader svg,
.mx_RoomHeader button svg { fill: rgba(255,255,255,0.8) !important; }

/* Ausgewählter Raum — Schulfunk-Grün statt Dunkelgrün */
.mx_RoomTile_selected {
    background: rgba(122,179,41,0.25) !important;
}
.mx_RoomTile_selected::before {
    background: #7ab329 !important;
    border-color: #7ab329 !important;
}