.schedule-task-form-card input[type="text"]:focus,
.schedule-task-form-card input[type="date"]:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(123, 75, 222, 0.1);
    outline: none;
}

/* === SchulPilot Design System === */

/* iOS 26 Scroll Fixes - Global */
html {
    /* Prevent iOS 26 bounce scrolling */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* iOS 26 specific fixes for all scrollable containers */
* {
    /* Prevent momentum scrolling issues */
    -webkit-overflow-scrolling: touch;
}

/* 1. Design Tokens & Globale Stile */
:root {
    /* Farbpalette */
    --c-primary: #7B4BDE;
    --c-secondary: #FEF0F5;
    --c-danger: #EA5455;
    --c-bg-main: #edece7;
    --c-bg-card: #FFFFFF;
    --c-text-dark: #333333;
    --c-text-light: #8A8A8A;
    --c-border: #EAEAEA;
    --c-white: #FFFFFF;

    /* Typografie */
    --font-family: 'Poppins', sans-serif;
    --font-xl: 1.5rem;
    --font-l: 1.25rem;
    --font-m: 1rem;
    --font-s: 0.875rem;

    /* Abstände */
    --spacing-s: 0.5rem;   /* 8px */
    --spacing-m: 1rem;     /* 16px */
    --spacing-l: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;    /* 32px */
    --spacing-xxl: 3rem;   /* 48px */

    /* Layout */
    --border-radius: 16px;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    
    /* NavBar */
    --navbar-icon-size: 2.25rem; /* 1.8rem * 1.25 = 2.25rem (25% größer) */
    --navbar-padding-vertical: 10px; /* Abstand oben/unten um Icons */
    --navbar-height: calc(var(--navbar-icon-size) + 2 * var(--navbar-padding-vertical)); /* Icons + 2x10px */
}

body {
    font-family: var(--font-family);
    background-color: var(--c-bg-main);
    color: var(--c-text-dark);
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* iOS 26 Scroll Fixes - weniger restriktiv */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    touch-action: manipulation;
}

/* 2. App Shell & Navigation */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 480px; /* Mobile-First-Container */
    margin: 0 auto;
    background: var(--c-bg-main);
}

.app-header {
    background-color: var(--c-primary);
    color: var(--c-white);
    padding: var(--spacing-m) var(--spacing-m) 12px var(--spacing-m);
    /* iOS Safe Area Support */
    padding-top: calc(var(--spacing-m) + env(safe-area-inset-top));
    padding-left: calc(var(--spacing-m) + env(safe-area-inset-left));
    padding-right: calc(var(--spacing-m) + env(safe-area-inset-right));
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    /* iOS 26 Scroll Fixes */
    overscroll-behavior: none;
    touch-action: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    flex-direction: column;
    justify-content: space-between;
}

/* Safe-Area oben füllen mit Header-Farbe (PWA) - echtes div-Element statt ::before */
.safe-area-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background-color: var(--c-primary);
    z-index: 9;
    /* Max-Breite wie Header für zentrierten Container */
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    /* Sicherstellen, dass das Element auch im Dark-Mode sichtbar ist */
    transition: background-color 0.2s ease;
}
.app-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}
.app-header strong {
    color: white;
    font-size: var(--h2-size);
}
.app-header .icon-button:hover {
    color: var(--c-primary);
    font-weight: bold;
}
.app-header strong .icon-button {
    font-size: 0.8em;
    margin-left: 0.5rem;
    color: rgba(255,255,255,0.8);
}
.app-header strong .icon-button:hover {
    color: white;
}

/* Edit-Button im Header - kreisförmiger weißer Hintergrund */
#edit-child-button {
    font-size: 1.1rem;
    opacity: 1; /* 0% transparent = vollständig sichtbar */
    transition: all 0.2s ease;
    background-color: white; /* Weißer Hintergrund */
    border-radius: 50%; /* Kreisform */
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Tiefe */
    /* Farbe wird durch JavaScript in Kindfarbe gesetzt */
}
#edit-child-button:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    /* Farbe bleibt in Kindfarbe */
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: var(--spacing-s);
    min-height: 50px; /* Feste Mindesthöhe für konsistente Header-Höhe */
}

.header-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
    min-height: 50px; /* Gleiche Höhe wie header-top */
}

.child-avatar {
    width: 44px; /* Vergrößert von 36px */
    height: 44px;
    border-radius: 50%;
    /* Background-Color wird per JavaScript in Kindfarbe gesetzt (40% Opacity) */
    background-color: rgba(123, 75, 222, 0.4); /* Default-Farbe als Fallback */
    color: var(--c-white);
    font-size: 1.3rem; /* Vergrößert von 1.1rem */
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Dünner weißer halb-transparenter Kreis rund um Avatar */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); /* Weißer Ring mit 50% Opacity */
    transition: all 0.2s ease;
}

.header-title-block {
    display: flex;
    flex-direction: column;
    min-height: 42px; /* Feste Mindesthöhe für konsistenten Header */
    justify-content: center;
}

.app-header h1 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--c-white);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.app-header h1:hover {
    opacity: 0.85;
}

.header-title-block small {
    margin: 0;
    margin-top: 2px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
    /* Feste Höhe für maximal 2 Zeilen */
    max-height: calc(0.75rem * 1.2 * 2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
}

.app-header h1 i {
    margin-right: var(--spacing-s);
}

.app-main {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    /* Erhöhtes padding-top für vollständige Sichtbarkeit des Headers */
    /* Header-Komponenten: Safe Area Top (~44px) + padding-top (16px) + header-top (50px) + margin (8px) + header-content (50px) + padding-bottom (12px) + extra Buffer (20px) */
    padding-top: calc(150px + env(safe-area-inset-top, 0px));
    /* Abstand für NavBar-Höhe + ausreichender Abstand + Safe-Area, damit Content nicht überlagert wird und vollständig scrollbar ist */
    padding-bottom: calc(var(--navbar-height) + 2rem + env(safe-area-inset-bottom, 0px)) !important;
    position: relative;
    /* iOS 26 Scroll Fixes - weniger restriktiv */
    overscroll-behavior: auto;
    touch-action: pan-y;
}

.app-footer {
    /* Basiskonfiguration */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    /* WICHTIG: Negativer margin schiebt Footer in die Safe-Area */
    margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px)) !important;
    background: var(--c-bg-main);
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    
    /* Padding-bottom erweitert Footer IN die Safe-Area hinein */
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: var(--navbar-height); /* Höhe dynamisch über CSS-Variable */
    
    /* Performance-Optimierung */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overscroll-behavior: none;
    touch-action: none;
}

/* Navigation Container */
.app-footer nav {
    width: 100%;
    height: 100%; /* Volle Höhe des Footer-Containers */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--navbar-padding-vertical) 0; /* 10px Abstand oben/unten */
    box-sizing: border-box;
}
.app-footer nav ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0; /* Kein zusätzlicher Innenabstand */
    width: 100%;
    height: 100%; /* Volle Höhe des nav-Containers nutzen */
    align-items: center;
}
.app-footer nav li {
    list-style: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-footer nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    font-size: var(--navbar-icon-size); /* Icon-Größe dynamisch über CSS-Variable */
    color: #999999; /* Grau für inaktive Icons */
    line-height: 1;
    transition: color 0.2s ease;
    width: 100%;
    height: 100%;
}
.app-footer nav .nav-link:hover {
    color: var(--c-primary); /* Kinderfarbe beim Hover */
}
.app-footer nav .nav-link.active {
    color: var(--c-primary); /* Kinderfarbe für aktive Icons */
}

/* 3. Core UI Komponenten */

/* Ansichten-Handling */
.view { 
    display: none; 
}
.view.active-view { 
    display: block;
}

#dashboard-view {
    background: var(--c-bg-main); /* Grauer Hintergrund zwischen den Cards */
    /* min-height nicht mehr nötig - View passt sich automatisch an Content an */
}

#calendar-view {
    background: var(--c-bg-main); /* Grauer Hintergrund zwischen den Cards */
    /* min-height nicht mehr nötig - View passt sich automatisch an Content an */
    /* Kein extra Padding - nutzt app-main Padding (1rem) wie Dashboard */
}

/* Calendar Navigation Card */
.calendar-navigation-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-m);
    margin-bottom: var(--spacing-m);
    background: var(--c-bg-card);
}

/* Grade Pills für Kalender */
.calendar-grade-pill {
    border-radius: 12px;
    font-weight: normal; /* Normalschrift für alle Pills */
    text-align: center;
    min-width: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

/* Meeting Pills für Kalender - gleiche Form wie Grade Pills */
.calendar-meeting-pill {
    border-radius: 12px;
    font-weight: normal;
    text-align: center;
    min-width: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

/* Prüfungsart-spezifische Pill-Styles */
/* Hintergrund-Intensität basierend auf Prüfungstyp (wird inline gesetzt): */
/* - Arbeit: 100% Deckkraft (opacity: 1.0) */
/* - Test: 80% Deckkraft (opacity: 0.8) */
/* - Mündlich: 60% Deckkraft (opacity: 0.6) */
/* Alle Pills verwenden Normalschrift (font-weight: normal) */

.calendar-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--c-text-dark);
    cursor: pointer;
    transition: color 0.2s ease;
    flex: 1;
    text-align: center;
}

.calendar-title:hover {
    color: var(--c-primary);
}

.calendar-nav-btn {
    background-color: var(--c-primary);
    border: 2px solid var(--c-primary); /* Gleicher Border wie im Hover für konsistente Größe */
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 20px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Wichtig: Border wird in die Gesamtgröße einbezogen */
}

.calendar-nav-btn:hover {
    background-color: white;
    border: 2px solid var(--c-primary);
    color: var(--c-primary);
    transform: translateY(-1px);
}

/* Calendar Content Card */
.calendar-content-card {
    padding: 0;
    background: var(--c-bg-card);
    box-sizing: border-box;
    /* Entferne alle Card-Styles für nahtloses Aussehen */
    border-radius: var(--border-radius) !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    /* Keine festen Höhen mehr */
    height: auto !important;
    min-height: auto !important;
    overflow: hidden !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1000;
}

/* Stelle sicher, dass der border-radius auch bei .card Klasse angewendet wird */
.calendar-content-card.card {
    border-radius: var(--border-radius) !important;
    z-index: 1000;
}

/* Kinder-Navigation ("Pills") */
#child-nav {
    margin-bottom: 0; /* Überschreiben, da jetzt im Header */
    overflow-x: auto;
    width: 100%;
}
#child-nav ul {
    display: flex;
    gap: 0.5rem;
    padding-left: 0;
    margin-bottom: 0;
    width: max-content;
}
#child-nav li { list-style-type: none; }
#child-nav a {
    display: block;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    text-decoration: none;
    background-color: var(--c-bg-card);
    color: var(--c-text-dark);
    border: 1px solid var(--c-border);
    font-size: 0.95rem; /* Gleiche Schriftgröße für alle */
    font-weight: 500; /* Gleiche Schriftstärke für alle */
    transition: color 0.2s ease; /* Nur Farb-Übergänge */
    box-sizing: border-box; /* Stabile Dimensionen */
}
#child-nav a.active {
    color: white; /* Aktiver Button: Weißer Text */
    border: 2px solid var(--c-white);
    padding: calc(0.4rem - 2px) calc(1rem - 2px);
    font-weight: 600; /* Aktiver Button: Etwas fetter */
}
#child-nav a:not(.active):hover {
    color: var(--c-primary); /* Nur inaktive Buttons: Kinderfarbe beim Hover */
}
#child-nav a[role="button"] {
    border-style: dashed;
    color: var(--c-primary); /* Kindfarbe (Lila) für + Button */
}

#child-nav a[role="button"] i {
    color: var(--c-primary); /* Icon in Kindfarbe */
}

/* Karten (Cards) */
.card {
    background: var(--c-bg-card);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Dashboard Widgets */
.dashboard-widget {
    position: relative;
    transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.dashboard-widget-exit-button {
    position: fixed;
    bottom: clamp(1rem, 5vh, 2.5rem);
    left: 50%;
    transform: translateX(-50%) translateY(28px) scale(0.96);
    padding: 0.85rem 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(36, 48, 90, 0.68);
    color: var(--c-white);
    font-size: 0.96rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 22px 40px rgba(37, 52, 108, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.08);
    cursor: pointer;
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    transition: opacity 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
}

.dashboard-widget-exit-button i {
    font-size: 1.15rem;
}

.dashboard-widget-exit-button::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, rgba(147, 197, 253, 0.35), transparent 65%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.dashboard-widget-exit-button.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

.dashboard-widget-exit-button:hover {
    box-shadow: 0 26px 52px rgba(37, 52, 108, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.16);
    background: rgba(44, 56, 102, 0.72);
}

.dashboard-widget-exit-button.is-visible:hover::before {
    opacity: 1;
}

.dashboard-widget-exit-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.75);
    outline-offset: 4px;
}

.dashboard-widget-toggle {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.08);
    color: var(--c-text-dark);
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.dashboard-widget-toggle i {
    pointer-events: none;
}

.dashboard-widget-toggle:hover {
    background: rgba(15, 23, 42, 0.16);
}

.dashboard-widget-toggle:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

@keyframes dashboard-widget-wiggle {
    0% {
        transform: rotate(-0.7deg);
    }
    50% {
        transform: rotate(0.7deg);
    }
    100% {
        transform: rotate(-0.7deg);
    }
}

.dashboard-widgets-edit-mode .dashboard-widget {
    animation: dashboard-widget-wiggle 0.32s ease-in-out infinite alternate;
    transform-origin: 50% 8%;
    padding-left: 2.75rem;
}

.dashboard-widgets-edit-mode .dashboard-widget-toggle {
    display: inline-flex;
}

.dashboard-widget-hidden {
    opacity: 0.45;
    filter: grayscale(0.25);
}

.dashboard-widgets-edit-mode .dashboard-widget-hidden {
    cursor: default;
}

/* Fach-Karten */
/* Subject Cards - Compact Version */
#subjects-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m); /* Gleicher Abstand wie zwischen KPI und Anstehende Prüfungen */
}

.subject-card-compact {
    border-left: 4px solid var(--c-primary);
    transition: all 0.2s ease;
    padding: var(--spacing-m);
    position: relative;
    margin-bottom: 0 !important; /* Überschreibe .card margin, da gap bereits den Abstand regelt */
}

.subject-card-compact.clickable {
    cursor: pointer;
}

.subject-card-compact:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.subject-card-compact.dragging {
    opacity: 0.5;
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.drag-placeholder {
    background: var(--c-border);
    border: 2px dashed var(--c-primary);
    border-radius: var(--border-radius);
    margin: var(--spacing-xs) 0;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.subject-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-m);
}

.subject-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-m);
    flex: 1;
    min-width: 0;
}

.drag-handle {
    background: none;
    border: none;
    color: var(--c-text-light);
    cursor: grab;
    padding: 0.5rem;
    margin: -0.5rem 0 -0.5rem -0.5rem;
    font-size: 1rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
    touch-action: none;
    user-select: none;
}

.drag-handle:hover {
    color: var(--c-primary);
    transform: scale(1.1);
    font-weight: bold;
}

.drag-handle:active {
    cursor: grabbing;
}

/* Farbiger Punkt wird nicht mehr verwendet - Hintergrund ist jetzt pastellig eingefärbt */

.subject-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.subject-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subject-teacher {
    font-size: 0.85rem;
    color: var(--c-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subject-grade-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-m);
    flex-shrink: 0;
}

.subject-grade {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-primary);
    min-width: 50px;
    text-align: right;
}

.subject-actions {
    display: flex;
    gap: var(--spacing-xs);
    position: relative;
    z-index: 2;
}

.icon-button-small {
    background: transparent;
    border: none;
    color: var(--c-text-light);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.icon-button-small:hover {
    background: var(--c-bg-light);
    color: var(--c-primary);
    font-weight: bold;
}

.current-school-year-btn.active {
    color: var(--c-primary);
}

/* Legacy cards - keep for backwards compatibility */
.subject-card {
    border-left: 5px solid var(--c-primary);
}
.subject-card header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}
.subject-card .title {
    font-size: var(--h2-size);
    font-weight: 600;
}
.subject-card .avg-grade {
    font-weight: 700;
}
.card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    border-top: 1px solid var(--c-border);
    padding-top: 0.75rem;
}

/* Spezielles Dashboard-Layout */
.dashboard-summary-card {
    text-align: center;
    background: var(--c-secondary);
}
.dashboard-summary-card .overall-average {
    font-size: 48px;
    font-weight: 700;
    color: var(--c-primary);
    line-height: 1;
}
.header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 0 1rem 0;
}
.header-with-action h2 {
    margin: 0;
}

.link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    padding: 0;
    line-height: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.link-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.link-icon i {
    font-size: 1.1rem;
}
.btn-primary {
    background-color: var(--c-primary);
    border: 1px solid var(--c-primary);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 20px; /* Rundere Ecken wie andere Buttons */
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Text zentrieren */
    gap: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}


/* Prüfungs-Liste */
.exam-list {
    padding-left: 0;
    list-style: none;
}
.exam-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--c-border);
}
.exam-list li:last-child {
    border-bottom: none;
}
.exam-actions .icon-button {
    margin-left: 0.5rem;
}
.exam-actions .delete-exam:hover {
    color: var(--c-danger);
}

/* Icon-Buttons */
.icon-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem; /* Angepasste Größe */
    color: var(--c-text-light);
    padding: 0.25rem;
    line-height: 1;
}
.icon-button:hover {
    color: var(--c-primary);
    font-weight: bold;
}
.delete-subject:hover {
    color: var(--c-danger);
}

/* Kalender */
#calendar-container .vanilla-calendar {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 0.5rem;
}
.vanilla-calendar-day__btn {
    position: relative;
}
.vanilla-calendar-day__btn_today {
    background-color: var(--c-secondary) !important;
    color: var(--c-primary) !important;
}
.vanilla-calendar-day__btn_selected {
    background-color: var(--c-primary) !important;
    color: white !important;
}

/* FullCalendar Anpassungen */
#calendar-container {
    /* Kein extra Background mehr, da in Card */
    overflow: visible;
    /* Responsive Container - keine feste Höhe, wird dynamisch berechnet */
    width: 100%;
    height: auto;
    min-height: 150px;
    /* Maximale Höhe wird durch JavaScript dynamisch gesetzt */
}

.fc {
    font-family: var(--font-family);
    border-radius: 0;
    overflow: visible;
    width: 100%;
    height: auto !important;
    display: flex;
    flex-direction: column;
    min-height: 150px;
    position: relative;
    z-index: 1001;
    padding: 0;
}

.fc .fc-scrollgrid {
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    z-index: 1002;
}

.fc .fc-view-harness {
    flex: none !important;
    height: auto !important;
}

.fc .fc-daygrid {
    height: auto !important;
}

.fc .fc-scroller {
    overflow: visible !important;
    height: auto !important;
}

.fc .fc-scroller-liquid-absolute {
    position: relative !important;
    height: auto !important;
}

.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
    margin-bottom: 0 !important;
}

/* Stelle sicher, dass der Kalender-Body natürliche Höhe hat */
.fc-daygrid-body {
    height: auto !important;
}

.fc-daygrid-body-unbalanced {
    height: auto !important;
}

.fc-scrollgrid-sync-table {
    height: auto !important;
}

.fc-daygrid-day-frame {
    height: var(--fc-daygrid-day-height, 50px) !important;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto; /* Natürliche Höhe */
}

/* Dynamische Zeilenhöhe für Kalender-Tage */
.fc-daygrid-day {
    min-height: var(--fc-daygrid-day-height, 50px) !important;
    height: var(--fc-daygrid-day-height, 50px) !important;
    max-height: var(--fc-daygrid-day-height, 50px) !important;
}

/* Stelle sicher, dass der Kalender-Body natürliche Höhe hat */
.fc-daygrid-body {
    height: auto !important;
}

.fc-daygrid-body-unbalanced {
    height: auto !important;
}

.fc-scrollgrid-sync-table {
    height: auto !important;
}

.fc-daygrid-day-frame {
    height: var(--fc-daygrid-day-height, 50px) !important;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Optimierung für kompakte Darstellung */
.fc-daygrid-day-number {
    font-size: 14px;
    padding: 2px 4px;
}

.fc-daygrid-day-events {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 4px;
    min-height: 0;
}

/* Kalender-Tage mit Prüfungen - Hintergrundfarben */
.fc-daygrid-day.exam-day {
    /* Basis-Styling für Tage mit Prüfungen */
    position: relative;
}

/* FullCalendar Event Background Styling */
.fc-event {
    border: none !important;
}

.fc-event[data-event] {
    background: transparent !important;
}

/* Spezifische Styling für Exam-Events */
.fc-event.exam-day {
    background: transparent !important;
    border: none !important;
}

/* Styling für Meeting-Events (Lehrertermine) */
.fc-event.meeting-event {
    border-radius: 4px !important;
    padding: 4px 6px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    /* Ensure event is visible with child color */
    opacity: 1 !important;
}

.fc-event.meeting-event .fc-meeting-event {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
}

.fc-event.meeting-event .fc-meeting-event i {
    font-size: 0.85em !important;
    flex-shrink: 0 !important;
}

.fc-event.meeting-event .fc-meeting-event span {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Day cells with meetings - highlight with child color */
/* .fc-daygrid-day.has-meeting {
    background-color wird jetzt dynamisch per JavaScript gesetzt (Fachfarbe)
    background-color: rgba(var(--child-color-rgb, 123, 75, 222), 0.1) !important;
} */

/* Ensure meeting events are always visible */
.fc-daygrid-day.has-meeting .fc-event.meeting-event {
    display: block !important;
    visibility: visible !important;
}

/* Kalender-Tag Hintergrundfarben direkt anwenden */
.fc-daygrid-day[style*="background-color"] {
    /* Stelle sicher, dass die Hintergrundfarbe sichtbar ist */
    opacity: 1 !important;
}

.fc-daygrid-day-frame {
    height: var(--fc-daygrid-day-height, 50px) !important;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.fc-daygrid-day-events {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 4px;
    min-height: 0;
}

/* Fixiere die Höhe des Headers, damit nur der Content-Bereich wächst */
.fc-daygrid-day-top {
    flex-shrink: 0;
    height: auto; /* Natürliche Höhe basierend auf Inhalt */
    min-height: 0;
}

.fc-daygrid-day-number {
    flex-shrink: 0;
    padding: 4px;
    font-weight: 600;
    height: auto; /* Natürliche Höhe - bleibt gleich */
    line-height: 1.2; /* Konsistente Zeilenhöhe */
}

/* Multiple Exam Indicator */
.calendar-multiple-indicator {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-weight: bold;
    font-size: 14px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

.calendar-multiple-indicator:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

/* Exam Status Classes */
.fc-daygrid-day.exam-completed {
    /* Durchgeführte Prüfungen: Kräftigere Farbe */
    opacity: 1;
}

.fc-daygrid-day.exam-planned {
    /* Geplante Prüfungen: Pastellfarbe */
    opacity: 0.8;
}

.fc-daygrid-day.exam-multiple {
    /* Mehrere Prüfungen: Nur die Position, kein Punkt mehr */
    position: relative;
}

/* Grauen Punkt entfernt - nur noch der Pfeil rechts unten wird angezeigt */

/* Calendar Day Details - Liste der Prüfungen eines ausgewählten Tags */
#calendar-day-details {
    margin-top: var(--spacing-m);
}

#calendar-day-details h3 {
    margin: 0 0 1rem 0;
    color: var(--c-text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#calendar-day-details-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.day-exam-item {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}

.day-exam-item:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.day-exam-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.day-exam-subject-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.day-exam-subject-name {
    font-size: 1rem;
}

.day-exam-type {
    font-size: 0.85rem;
    color: var(--c-text-light);
}

.day-exam-grade {
    flex-shrink: 0;
    text-align: right;
}

.day-exam-grade.grade-pending {
    /* Keine Halbtransparenz - "---" zeigt schon an, dass Note fehlt */
    font-style: italic;
}

.fc .fc-view-harness {
    border-radius: 0;
    overflow: visible;
    height: auto !important;
    flex: none !important;
}

.fc table {
    border-radius: var(--border-radius);
    height: auto !important;
    overflow: hidden;
}

/* Kompaktere Kalender-Zellen */
.fc .fc-daygrid-day {
    min-height: 2rem;
    height: auto !important;
    max-height: none !important;
    background-color: var(--c-white);
}

/* Runde die Ecken der ersten und letzten Zellen im Header */
.fc .fc-scrollgrid-section-header .fc-col-header-cell:first-child {
    border-top-left-radius: var(--border-radius);
}

.fc .fc-scrollgrid-section-header .fc-col-header-cell:last-child {
    border-top-right-radius: var(--border-radius);
}

/* Runde die Ecken der ersten und letzten Zellen im Body */
.fc .fc-daygrid-body tr:last-child .fc-daygrid-day:first-child {
    border-bottom-left-radius: var(--border-radius);
}

.fc .fc-daygrid-body tr:last-child .fc-daygrid-day:last-child {
    border-bottom-right-radius: var(--border-radius);
}

.fc .fc-col-header-cell {
    padding: 0.3rem 0.25rem;
    font-size: 0.8rem;
    height: auto !important;
}

.fc .fc-scrollgrid {
    border-radius: var(--border-radius);
    overflow: hidden;
    height: auto !important;
    position: relative;
    z-index: 1002;
}

.fc .fc-toolbar {
    margin-bottom: 0.75rem;
}

.fc .fc-toolbar-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--c-text-dark);
    cursor: pointer;
    transition: color 0.2s ease;
}

.fc .fc-toolbar-title:hover {
    color: var(--c-primary);
}

.fc .fc-button {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: white;
    text-transform: capitalize;
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.fc .fc-button:hover:not(:disabled) {
    background-color: var(--c-primary-dark);
    border-color: var(--c-primary-dark);
}

.fc .fc-button:disabled {
    opacity: 0.5;
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--c-primary-dark);
    border-color: var(--c-primary-dark);
}

.fc-theme-standard td, .fc-theme-standard th {
    border-color: var(--c-border);
}

.fc .fc-daygrid-day-number {
    color: var(--c-text-dark);
    font-weight: 500;
    padding: 0.15rem 0.25rem;
    font-size: 0.8rem;
}

/* .fc-day-today Hintergrundfarbe wird dynamisch per JS in Kinderfarbe gesetzt */

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    font-weight: 700;
}

/* Tage außerhalb des aktuellen Monats - dezent darstellen */
.fc .fc-daygrid-day.fc-day-other {
    background-color: var(--c-bg-main);
    opacity: 0.4;
}

.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
    color: var(--c-text-light);
    opacity: 0.5;
}

/* Events in anderen Monaten ausblenden */
.fc .fc-daygrid-day.fc-day-other .fc-daygrid-bg-harness,
.fc .fc-daygrid-day.fc-day-other .calendar-grade-container {
    display: none;
}

.fc .fc-bg-event {
    opacity: 0.2;
}

.fc .fc-daygrid-block-event {
    opacity: 1 !important;
}

.fc .fc-daygrid-block-event .fc-event-title {
    padding: 2px 4px;
    font-weight: normal; /* Normalschrift */
    text-align: center;
    white-space: nowrap;
}

/* Calendar Day Frame needs relative positioning */
.fc .fc-daygrid-day-frame {
    position: relative;
    height: var(--fc-daygrid-day-height, 50px) !important;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: visible;
}

/* Calendar Grade Labels - Nutzen volle Zellenhöhe */
.calendar-grade-container {
    position: absolute;
    top: 1.5rem;
    bottom: 1px;
    left: 2px;
    right: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    pointer-events: none;
    z-index: 10;
}

.calendar-grade-label {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    line-height: 1.2;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
}

.fc .fc-col-header-cell {
    background-color: var(--c-bg-light);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 0.75rem 0;
}

.fc .fc-event {
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.9rem;
    font-weight: normal; /* Normalschrift für alle Events */
    margin: 1px 0;
    cursor: pointer;
    text-align: center;
}

.fc .fc-event-title {
    font-weight: normal; /* Normalschrift für Event-Titel */
}

.fc .fc-daygrid-event-dot {
    display: none;
}

/* Event Liste */
#event-list-container {
    margin-top: var(--spacing-l);
}

/* Welcome Screen & Empty States - Einheitliches Styling für alle Views */
.welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* flex-start statt center für konsistente Positionierung */
    text-align: center;
    padding: 1rem var(--spacing-xl); /* Reduziertes Padding für mehr Platz */
    min-height: 50vh;
}

.welcome-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-m); /* Reduziert von -xl */
    margin-top: 0; /* Kein extra Margin oben - Icons beginnen auf gleicher Höhe */
}

.welcome-icon i {
    font-size: 5rem; /* Reduziert von 6rem für kompaktere Darstellung */
    color: var(--c-text-light);
}

.welcome-screen h2 {
    font-size: 1.75rem; /* Reduziert von 2rem */
    font-weight: 700;
    color: var(--c-text-dark);
    margin-bottom: 0.5rem; /* Reduziert von var(--spacing-s) */
}

.welcome-screen p {
    font-size: 1rem; /* Reduziert von 1.1rem */
    color: var(--c-text-light);
    margin-bottom: var(--spacing-l); /* Reduziert von -xl für mehr Platz unten */
    max-width: 400px;
}

/* Analytics & Calendar Empty States - Gleiches Styling wie Welcome Screen */
.no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 2rem var(--spacing-xl);
    min-height: 50vh;
}

.no-data i {
    font-size: 6rem;
    color: var(--c-text-light);
    margin-bottom: var(--spacing-xl);
    margin-top: 0;
}

.no-data p {
    font-size: 1.1rem;
    color: var(--c-text-light);
    margin: 0;
}

.btn-large {
    padding: var(--spacing-m) var(--spacing-xl);
    font-size: 1.1rem;
    gap: var(--spacing-s);
}

/* Dashboard KPI Bar */
.dashboard-kpi-bar {
    background: var(--c-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-l);
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: var(--spacing-m);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
}

.kpi-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-s);
    text-align: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* KPI Slide-In Animationen */
@keyframes kpi-slide-in-left {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes kpi-slide-in-right {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.kpi-item.kpi-slide-in-left {
    animation: kpi-slide-in-left 0.3s ease-out;
}

.kpi-item.kpi-slide-in-right {
    animation: kpi-slide-in-right 0.3s ease-out;
}

.kpi-separator {
    width: 1px;
    background: var(--c-primary);
    opacity: 0.3;
    margin: 0 var(--spacing-m);
    align-self: stretch;
}

.kpi-icon {
    font-size: 2rem;
    color: var(--c-primary);
}

.kpi-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--c-text-dark);
    line-height: 1;
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.kpi-total {
    font-size: 0.55em;
    font-weight: 600;
    color: var(--c-text-light);
    margin-left: 0.35rem;
}

/* KPI View Indicator */
.kpi-view-indicator {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.kpi-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--c-text-light);
    opacity: 0.3;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.kpi-indicator-dot.active {
    opacity: 1;
    background-color: var(--c-primary);
}

.kpi-label {
    font-size: 0.85rem;
    color: var(--c-text-light);
    font-weight: 500;
    white-space: normal;
}

.kpi-label small {
    font-size: 0.75rem; /* 2pt kleiner als 0.85rem (ca. 2pt bei 16px base) */
    display: block;
}

/* Legacy Dashboard Stats - keep for backwards compatibility */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-m);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: var(--c-bg-card);
    border-radius: var(--border-radius);
    padding: var(--spacing-l);
    display: flex;
    align-items: center;
    gap: var(--spacing-m);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon i {
    font-size: 1.75rem;
    color: white;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--c-text-dark);
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--c-text-light);
    font-weight: 500;
}

/* Upcoming Exams Card */
.upcoming-exams-card {
    margin-bottom: var(--spacing-m);
    background: var(--c-white) !important;
}

.upcoming-exams-card h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-text-dark);
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.upcoming-exams-card h3 i {
    color: var(--c-primary);
}

.upcoming-exams-card .todays-schedule-week {
    margin-top: var(--spacing-s);
}

.upcoming-exams-week .schedule-week-day-slots {
    gap: 0.6rem;
}

.upcoming-exam-slot {
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    justify-content: flex-start;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    padding-right: 0;
}

.todays-schedule-slot-grid.upcoming-exam-slot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 0;
    width: 100%;
}

.todays-schedule-slot-grid.upcoming-exam-slot-grid .todays-schedule-slot-main {
    display: contents;
}

.upcoming-exam-primary-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    width: 100%;
}

.upcoming-exam-subject {
    font-size: 1rem;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upcoming-exam-controls,
.schedule-chip-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    width: 100%;
    flex-wrap: nowrap;
}

.schedule-chip,
.upcoming-exam-badge,
.upcoming-exam-type-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    min-height: 1.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--chip-color, inherit);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.schedule-chip i,
.upcoming-exam-badge i,
.upcoming-exam-type-chip i {
    font-size: 0.85rem;
}

.schedule-chip-text,
.upcoming-exam-badge-text,
.upcoming-exam-type-chip-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.schedule-chip.is-empty,
.upcoming-exam-badge.is-empty,
.upcoming-exam-type-chip.is-empty {
    color: rgba(71, 85, 105, 0.55);
    background: rgba(255, 255, 255, 0.45);
    border-color: rgba(148, 163, 184, 0.25);
}

.schedule-chip.is-empty i,
.upcoming-exam-badge.is-empty i,
.upcoming-exam-type-chip.is-empty i {
    color: rgba(71, 85, 105, 0.45);
}

.schedule-chip--room,
.schedule-chip--indicator,
.upcoming-exam-badge--room,
.upcoming-exam-badge--indicator,
.upcoming-exam-type-chip--room,
.upcoming-exam-type-chip--indicator {
    background: rgba(255, 255, 255, 0.7);
}

.schedule-chip--room:not(.is-empty),
.schedule-chip--indicator:not(.is-empty),
.upcoming-exam-badge:not(.is-empty),
.upcoming-exam-type-chip:not(.is-empty) {
    color: var(--chip-color, inherit);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.7);
}

.schedule-chip--indicator:not(.is-empty) i,
.upcoming-exam-controls i,
.upcoming-exam-badge--indicator i,
.upcoming-exam-type-chip--indicator i {
    color: var(--chip-color, inherit);
}

.schedule-chip--indicator.is-upcoming,
.schedule-chip--indicator.is-overdue,
.schedule-chip--indicator.is-complete,
.schedule-chip--indicator.is-active,
.upcoming-exam-badge--upcoming,
.upcoming-exam-badge--overdue,
.upcoming-exam-badge--complete,
.upcoming-exam-badge--active,
.upcoming-exam-type-chip--upcoming,
.upcoming-exam-type-chip--overdue,
.upcoming-exam-type-chip--complete,
.upcoming-exam-type-chip--active {
    background: rgba(255, 255, 255, 0.7);
    color: var(--chip-color, inherit);
    border-color: rgba(255, 255, 255, 0.5);
}

.upcoming-exam-type-chip {
    text-transform: uppercase;
}

.upcoming-exam-badge {
    letter-spacing: 0.05em;
}

.upcoming-exam-meta-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    min-width: 0;
}

.upcoming-exam-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: rgba(15, 23, 42, 0.65);
    flex-shrink: 0;
    white-space: nowrap;
}

.upcoming-exam-meta:not(:first-of-type)::before {
    content: '•';
    margin-right: 0.35rem;
    color: rgba(15, 23, 42, 0.35);
    font-size: 0.8rem;
}

.upcoming-exam-meta i {
    font-size: 0.85rem;
}

.upcoming-exam-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    color: var(--chip-color, inherit);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.upcoming-exam-badge-text {
    display: none;
}

.upcoming-exam-badge[data-mode="countdown"] .upcoming-exam-badge-countdown,
.upcoming-exam-badge[data-mode="date"] .upcoming-exam-badge-date {
    display: inline;
}

.upcoming-exam-slot:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

.upcoming-exam-slot:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

.upcoming-exam-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.35rem 0.65rem;
    background: var(--c-bg-light);
    border-radius: var(--border-radius-sm);
    margin-bottom: 0.25rem;
}

.upcoming-exam-row:last-child {
    margin-bottom: 0;
}

.upcoming-exam-time {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--child-color, var(--c-primary));
}

.upcoming-exam-info {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--subject-color, var(--c-text-dark));
}

.upcoming-exam-right {
    display: inline-flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0.35rem;
    font-weight: 400;
    font-size: 0.92rem;
    text-align: left;
    color: var(--c-text-light);
    justify-self: start;
}

.upcoming-exam-separator {
    font-size: 0.85rem;
    color: var(--c-text-light);
    font-weight: 400;
    text-align: center;
}

.upcoming-exam-subject {
    color: inherit;
}

.upcoming-exam-type {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--subject-color, var(--c-text-dark));
}

.exam-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.exam-info-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.exam-subject {
    color: var(--c-text-dark);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exam-meta {
    color: var(--c-text-light);
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Legacy styles für Kompatibilität */
.exam-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.exam-info strong {
    color: var(--c-text-dark);
    font-weight: 600;
}

.exam-info small {
    color: var(--c-text-light);
    font-size: 0.85rem;
}

.empty-state {
    color: var(--c-text-light);
    text-align: center;
    padding: var(--spacing-m);
    font-style: italic;
}

/* Exam List Modal */
.exam-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
}

/* Kompakte Exam-Liste */
.exam-list-item-compact {
    background: var(--c-bg-light);
    padding: var(--spacing-s) var(--spacing-m);
    border-radius: var(--border-radius-sm);
    border-left-width: 4px;
    margin-bottom: var(--spacing-s);
    position: relative;
}

.exam-main-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-m);
    flex-wrap: wrap;
    padding-right: 4rem;
}

.exam-actions-compact {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: flex;
    gap: 0.25rem;
}

.exam-type-badge {
    background: var(--c-primary);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.exam-date {
    color: var(--c-text-light);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.exam-grade-display {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-primary);
    margin-left: auto;
    flex-shrink: 0;
}

.exam-grade-display.no-grade {
    color: var(--c-text-light);
    font-style: italic;
    font-weight: normal;
    font-size: 0.9rem;
}

.exam-notes-compact {
    color: var(--c-text-light);
    font-size: 0.85rem;
    margin-top: var(--spacing-xs);
    padding-left: var(--spacing-s);
}

.exam-irrelevant-badge {
    display: inline-block;
    background: #ffc107;
    color: #333;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: var(--spacing-xs);
}

/* Alte Exam-Liste Styles (falls noch verwendet) */
.exam-list-item {
    background: var(--c-bg-light);
    padding: var(--spacing-m);
    border-radius: var(--border-radius-sm);
    border-left-width: 4px;
}

.exam-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-s);
}

.exam-grade {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-text-dark);
    margin-bottom: var(--spacing-xs);
}

.exam-grade.no-grade {
    color: var(--c-text-light);
    font-style: italic;
    font-weight: normal;
}

.exam-notes {
    color: var(--c-text-light);
    font-size: 0.9rem;
    margin-top: var(--spacing-xs);
}

.exam-irrelevant {
    display: inline-block;
    background: #ffc107;
    color: #333;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: var(--spacing-xs);
}

/* Toast Notifications */
.toast-notification {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: white;
    color: var(--c-text-dark);
    padding: 0.75rem 1.25rem;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    font-weight: 500;
    font-size: 0.85rem;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    max-width: 90vw;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    word-wrap: break-word;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast-success {
    border-left: 4px solid #10b981;
}

.toast-error {
    border-left: 4px solid #ef4444;
}

.toast-info {
    border-left: 4px solid var(--c-primary);
}

/* Update Notification für Service Worker */
.update-notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #7B4BDE;
    color: white;
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10002; /* Über Header (z-index: 1000) und Toast-Notifications */
    animation: slideDown 0.3s ease-out;
}

/* Verschiebe Header nach unten, wenn Update-Banner angezeigt wird */
body.update-banner-visible .app-header {
    top: auto !important;
}

/* Safe-Area-Top auch verschieben */
body.update-banner-visible .safe-area-top {
    top: auto !important;
}

.update-notification-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: nowrap;
}

.update-notification i {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.update-notification span {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.update-notification .btn-group {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.update-notification .btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

.update-notification .btn-primary {
    background: white;
    color: #7B4BDE;
    border: none;
}

.update-notification .btn-primary:hover {
    background: #f0f0f0;
}

.update-notification .btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.update-notification .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Anpassung für Safe Area (iOS Notch) */
@supports (padding-top: env(safe-area-inset-top)) {
    .update-notification {
        padding-top: calc(1rem + env(safe-area-inset-top));
    }
}

/* --- Modals & Forms --- */

/* Backdrop - für Fullscreen transparent */
dialog::backdrop {
    background: transparent;
}

/* Modal container - Fullscreen */
dialog {
    border: none;
    background: var(--c-bg-main);
    padding: 0;
    max-width: 100%;
    max-height: 100vh;
    max-height: 100dvh; /* Dynamic viewport height für bessere Mobile-Unterstützung */
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    inset: 0;
}

dialog article {
    border-radius: 0;
    padding: 0; /* Kein Padding - Elemente haben eigenes Padding */
    box-shadow: none;
    background: var(--c-bg-main);
    height: 100%;
    /* Article scrollt NICHT - nur Content scrollt */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

dialog article > header,
dialog article > footer {
    flex-shrink: 0; /* Header und Footer schrumpfen nicht */
}

dialog article > #modal-content {
    flex: 1; /* Content nimmt verfügbaren Platz */
    overflow-y: auto;
}

/* Modal Content - scrollbarer Bereich */
#modal-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 1rem 1rem 1rem; /* Gleich wie Header und Footer */
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    padding-bottom: 1rem; /* Minimaler Abstand für Footer-Content */
    /* iOS PWA Scroll Fixes */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    min-height: 0; /* Wichtig für Scroll-Funktionalität */
}

/* Forms im Modal-Content nehmen volle Breite */
dialog article form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

dialog header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1rem 1rem 1rem;
    padding-top: calc(1.5rem + env(safe-area-inset-top));
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    margin-bottom: 0.5rem;
    border-bottom: none;
    position: relative;
}

dialog header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(1rem + env(safe-area-inset-left, 0px));
    right: calc(1rem + env(safe-area-inset-right, 0px));
    height: 1px;
    background-color: var(--header-divider-color, var(--c-primary));
    box-shadow: 0 1px 2px var(--header-divider-shadow, rgba(123, 75, 222, 0.3));
}

dialog header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

dialog header .close {
    font-size: 1.5rem;
    text-decoration: none;
    line-height: 1;
    color: var(--c-text-light);
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

/* General button styles for modals */
dialog footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem; /* Reduzierter Gap für mehr Platz */
    padding: 1rem; /* Gleichmäßiges Padding auf allen Seiten */
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    /* Padding-Bottom für Safe Area */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--c-border);
    background: var(--c-bg-main);
    /* Footer als Flex-Child - bleibt am unteren Rand */
    flex-shrink: 0;
    margin-top: auto;
    /* Footer ist immer sichtbar - scrollt NICHT mit */
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    /* Verhindere Overflow */
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.btn-secondary {
    padding: 0.6rem 1.2rem;
    border-radius: 20px; /* Rundere Ecken wie andere Buttons */
    font-weight: 600;
    border: 2px solid var(--c-border); /* Default-Border */
    cursor: pointer;
    text-align: center;
    background-color: white; /* Weißer Hintergrund */
    color: var(--c-text-dark);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-secondary:hover {
    background-color: var(--c-bg-hover); /* Leichter Hover-Effekt */
    transform: translateY(-1px);
}

/* Modal Cancel-Button mit Kindfarbe als Border */
dialog footer .btn-secondary.cancel {
    background-color: white;
    border-color: var(--c-primary); /* Fallback: Default-Kindfarbe */
    color: var(--c-primary); /* Fallback: Default-Kindfarbe */
    /* Border und Farbe werden dynamisch per JavaScript mit aktueller Kindfarbe überschrieben */
    /* Hover-Effekt wird ebenfalls per JavaScript gesetzt */
}

/* Cancel-Button Hover wird per JavaScript gesteuert - überschreibe Standard-Hover */
dialog footer .btn-secondary.cancel:hover {
    transform: translateY(-1px);
    /* Farben werden per JavaScript gesetzt */
}

/* Buttons im Modal-Footer - nehmen volle Grid-Breite */
dialog footer button {
    width: 100%;
    min-width: 0; /* Verhindere Overflow */
    box-sizing: border-box;
}

dialog footer .btn-primary,
dialog footer .btn-secondary {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Form specific styles */
.modal-form, .settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.settings-section {
    background: var(--c-white);
    padding: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--c-border);
}

.settings-section h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: var(--c-text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-section h3 i {
    color: var(--c-primary);
}

.settings-description {
    font-size: 0.85rem;
    color: var(--c-text-light);
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

.settings-url {
    font-size: 0.75rem;
    color: var(--c-text-light);
    text-align: center;
    margin: 0.5rem 0 0 0;
    word-break: break-all;
    background: var(--c-bg-main);
    padding: 0.5rem;
    border-radius: 6px;
    font-family: monospace;
}

#qrcode {
    padding: 1rem;
    background: white;
    border-radius: var(--border-radius);
    display: inline-block;
}

#qrcode img {
    display: block;
}

/* Compact Form Styles */
.modal-form-compact {
    gap: 1rem;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 70px;
    gap: 0.5rem;
    align-items: end;
}

.form-label-compact {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.form-label-compact .label-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-text-dark);
}

.form-label-compact input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
}

.school-year-system-row {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
}

.school-year-system-row .flag-select select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg-light);
    cursor: not-allowed;
    text-align: center;
    font-size: 1.2rem;
}

.school-year-system-row .system-select select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: 8px;
}

.school-year-current-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--c-primary);
    background: rgba(123, 75, 222, 0.12);
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.form-label-color {
    flex-shrink: 0;
    width: 70px;
}

.form-label-color input[type="color"] {
    height: 44px;
    width: 100%;
    cursor: pointer;
    padding: 0.25rem;
}

.checkbox-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    height: 20px;
    cursor: pointer;
}

/* Details/Summary for collapsible sections */
.weighting-details {
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 0;
    margin-top: 0.5rem;
}

.weighting-details summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--c-text-dark);
    user-select: none;
    background: var(--c-bg-light);
    border-radius: 8px;
}

.weighting-details[open] summary {
    border-bottom: 1px solid var(--c-border);
    border-radius: 8px 8px 0 0;
}

.weighting-details summary:hover {
    background: var(--c-border);
}

.weighting-details .form-section {
    padding: 1rem;
}

/* Compact Weighting Categories */
.weighting-category-compact {
    padding: 0.75rem;
    background: var(--c-bg-light);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.weighting-category-compact:last-child {
    margin-bottom: 0;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.category-header strong {
    font-size: 0.95rem;
    color: var(--c-text-dark);
}

.cat-weight-input {
    width: 60px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
}

/* Chip Toggles */
.exam-type-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chip-toggle {
    position: relative;
    cursor: pointer;
}

.chip-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chip-toggle span {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background: white;
    border: 2px solid var(--c-border);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--c-text-light);
    transition: all 0.2s ease;
}

.chip-toggle.active span,
.chip-toggle input:checked + span {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: white;
}

.chip-toggle:hover span {
    border-color: var(--c-primary);
}

.modal-form label, .settings-form label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-weight: 600;
    font-size: var(--small-size);
    color: var(--c-text-dark);
}

.modal-form input,
.modal-form select,
.settings-form input {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 0.75rem;
    font-size: var(--body-size);
    font-family: var(--font-family);
    width: 100%;
    box-sizing: border-box;
}

textarea {
    font-family: var(--font-family);
    font-size: var(--body-size);
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

textarea::placeholder {
    color: var(--c-text-light);
    opacity: 1;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    border-radius: 16px;
}

.modal-form input:focus,
.modal-form select:focus {
    border-color: var(--c-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 75, 222, 0.1);
}

.modal-form input[type="color"] {
    padding: 0.25rem;
    height: 48px;
}
.modal-form fieldset .grid {
    gap: 0.75rem;
}
.modal-form fieldset input[type="number"] {
    padding: 0.75rem;
    text-align: center;
}

/* Spezifische Stile für das neue Gewichtungssystem */
.weighting-category {
    padding: 1rem;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    margin-top: 1rem;
}
.weighting-category p {
    font-size: var(--small-size);
    color: var(--c-text-light);
    margin-bottom: 0.5rem;
}
.exam-type-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.exam-type-toggles label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    background: var(--c-bg-main);
    padding: 0.5rem;
    border-radius: 6px;
    font-size: var(--small-size);
}
.exam-type-toggles input[type="checkbox"] {
    width: auto;
}

/* === Premium-Features CSS === */

/* Premium-Badges */
.premium-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: white;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.premium-badge-small {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: white;
    border-radius: 10px;
    font-size: 0.7rem;
    margin-left: 0.5rem;
}

.test-mode-badge {
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-size: 0.75rem;
}

/* Deaktivierter Add-Child-Button (Free-Version) */
.child-nav a.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #E0E0E0 !important;
    color: #999 !important;
}

.child-nav a.disabled:hover {
    background: #E0E0E0 !important;
    transform: none;
}

/* Gesperrte Settings-Sektion (Free-Version) */
.settings-section.premium-locked-section {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

.settings-section.premium-locked-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    border-radius: var(--border-radius);
}

/* Analytics-View */
.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Analytics KPI Bar verwendet jetzt die gleiche Klasse wie Dashboard (.dashboard-kpi-bar) */

.overall-chart-container {
    margin-bottom: 2rem;
    padding: 1rem;
    background: white;
    border-radius: var(--border-radius);
    border: 1px solid var(--c-border);
    width: 100%;
    max-width: 100%;
    aspect-ratio: 3 / 2; /* Höhe = 2/3 der Breite */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    overflow: hidden; /* Verhindert, dass der Graph über den Container hinausgeht */
    position: relative;
}

.overall-chart {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.overall-chart svg {
    max-width: 100%;
    height: auto;
    min-height: 250px; /* Mindesthöhe für X-Achsen-Labels */
}

.analytics-subjects-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Kompakterer Abstand */
}

/* Kompakte Fach-Karte */
.analytics-subject-card-compact {
    padding: 1rem;
}

.analytics-subject-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.subject-name-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0; /* Für Ellipsis */
}

.subject-name-analytics {
    font-size: 1rem;
    font-weight: 600;
}

.subject-quick-stats {
    font-size: 0.75rem;
    color: var(--c-text-light);
    white-space: nowrap;
}

.subject-grade-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 60px;
}

.subject-avg-analytics-compact {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-text-dark);
}

.analytics-actions-compact {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.target-indicator {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.target-indicator.target-excellent {
    background: #E8F5E9;
    color: #2E7D32;
}

.target-indicator.target-good {
    background: #E3F2FD;
    color: #1976D2;
}

.target-indicator.target-close {
    background: #FFF8E1;
    color: #F57C00;
}

.target-indicator.target-needs_work {
    background: #FFEBEE;
    color: #C62828;
}

.target-label {
    font-size: 0.75rem;
    opacity: 0.8;
}

.target-diff {
    font-weight: 700;
    font-size: 1rem;
}

/* Kompakter Target-Indikator */
.target-indicator-compact {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
}

.target-indicator-compact.target-excellent {
    background: #E8F5E9;
    color: #2E7D32;
}

.target-indicator-compact.target-good {
    background: #E3F2FD;
    color: #1976D2;
}

.target-indicator-compact.target-close {
    background: #FFF8E1;
    color: #F57C00;
}

.target-indicator-compact.target-needs_work {
    background: #FFEBEE;
    color: #C62828;
}

/* Inline target-diff für Quick-Stats-Zeile */
.target-diff-inline {
    font-weight: 700;
    font-size: 0.75rem;
}

.target-diff-inline.target-excellent {
    color: #2E7D32;
}

.target-diff-inline.target-good {
    color: #1976D2;
}

.target-diff-inline.target-close {
    color: #F57C00;
}

.target-diff-inline.target-needs_work {
    color: #C62828;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.analytics-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.analytics-label {
    font-size: 0.8rem;
    color: var(--c-text-light);
    margin-bottom: 0.25rem;
}

.analytics-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--c-text-dark);
}

.analytics-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.btn-small {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border: none;
    border-radius: 8px;
    background: var(--c-bg-main);
    color: var(--c-text-dark);
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-small:hover {
    background: var(--c-primary);
    color: white;
}

.btn-small i {
    margin-right: 0.25rem;
}

/* Analytics-Buttons mit Kindfarbe (Badge-Style) */
.btn-analytics {
    flex: 1;
    padding: 0.6rem 0.5rem;
    font-size: 0.75rem;
    border: 2px solid;
    border-radius: 50px; /* Starke Rundung wie Badges */
    background: white;
    color: var(--c-text-dark);
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-analytics:hover {
    background: var(--c-bg-main);
    /* Keine Positionsverschiebung mehr */
}

.btn-analytics i {
    margin-right: 0.3rem;
    font-size: 0.7rem;
}

/* Premium Locked Screen */
.premium-locked-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    min-height: 60vh;
}

.premium-icon {
    font-size: 4rem;
    color: #FFD700;
    margin-bottom: 1rem;
}

.premium-icon i {
    filter: drop-shadow(0 4px 6px rgba(255, 215, 0, 0.3));
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    margin-top: 1rem;
}

/* Premium Modals */
.premium-activation-info,
.pin-info,
.target-grade-info {
    text-align: center;
    margin-bottom: 1.5rem;
}

.premium-icon-large {
    font-size: 3rem;
    color: var(--c-primary);
    display: block;
    margin-bottom: 1rem;
}

.target-calc-info {
    background: var(--c-bg-main);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--c-border);
}

.info-row:last-child {
    border-bottom: none;
}

.result-box {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--c-bg-main);
    border-radius: 12px;
    text-align: center;
}

.result-box h4 {
    margin: 0 0 0.5rem 0;
    color: var(--c-text-light);
}

.required-grade-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--c-primary);
    margin: 1rem 0;
}

.required-grade-message {
    font-size: 1rem;
    font-weight: 500;
}

/* Trend Table */
.trend-analysis {
    overflow-x: auto;
}

.trend-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.trend-table thead {
    background: var(--c-bg-main);
}

.trend-table th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--c-text-dark);
    border-bottom: 2px solid var(--c-border);
}

.trend-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--c-border);
}

.trend-table tr:last-child td {
    border-bottom: none;
}

/* PIN-Schutz */
.pin-prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.pin-prompt-content {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    max-width: 400px;
    width: 90%;
}

.pin-lock-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--c-bg-main);
}

.pin-lock-content {
    text-align: center;
    padding: 2rem;
}

/* Premium Settings Section */
.settings-section.premium-active {
    background: linear-gradient(135deg, #F3E8FF 0%, #E8F5FF 100%);
    border: 2px solid var(--c-primary);
}

.premium-status-active {
    text-align: center;
}

.premium-status-active i {
    color: #4CAF50;
    margin-right: 0.5rem;
}

/* Premium Field im Formular */
.premium-field {
    position: relative;
}

.premium-field::before {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 50%;
}

/* Footer mit dynamischen Buttons (3 oder 4) */
.app-footer nav ul {
    display: flex;
    gap: 0;
}

.app-footer nav ul li {
    flex: 1;
}

/* Header Premium Badge */
.header-premium-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 50%;
    font-size: 0.85rem;
    margin-left: 0.5rem;
    animation: premium-glow 2s ease-in-out infinite;
}

@keyframes premium-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    }
}

/* Responsive Anpassungen */
@media (max-width: 480px) {
    .analytics-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .analytics-subject-row {
        flex-wrap: wrap;
    }
    
    .analytics-actions-compact {
        width: 100%;
        justify-content: stretch;
    }
    
    .btn-analytics {
        flex: 1;
    }
}

@media (max-width: 360px) {
    .btn-analytics {
        font-size: 0.7rem;
        padding: 0.5rem 0.3rem;
    }
    
    .btn-analytics i {
        display: none; /* Icons auf sehr kleinen Screens ausblenden */
    }
    
    .subject-quick-stats {
        font-size: 0.7rem;
    }
    
    /* Kalender responsive Anpassungen */
    #calendar-container {
        min-height: 150px;
    }
    
    .calendar-content-card {
        min-height: 150px;
    }
    
    .fc-daygrid-day {
        min-height: var(--fc-daygrid-day-height, 50px);
        height: var(--fc-daygrid-day-height, 50px);
    }
}

/* === iOS 26 Specific Scroll Fixes === */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Target iOS devices specifically */
    
    /* Fix for iOS 26 bounce scrolling issues */
    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Fix for scrollable containers */
    .app-main,
    dialog article,
    dialog article form,
    .modal-content {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Prevent elastic scrolling on fixed elements */
    .app-header,
    .app-footer {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* iOS 26 Safe Area - Keine zusätzlichen Anpassungen nötig */
    /* padding-bottom: calc(0.4rem + env(safe-area-inset-bottom)) funktioniert bereits */
    
    /* Fix for viewport units on iOS 26 */
    .app-shell {
        height: 100vh;
        height: -webkit-fill-available;
    }
}

/* Additional iOS 26 fixes for scroll momentum */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific - weniger restriktiv */
    body {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: contain;
    }
    
    .app-main {
        position: relative;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: auto;
    }
}

/* Zusätzliche Sicherheitsregeln für Footer-Positionierung */
.app-footer {
    /* Überschreibe alle möglichen margin-bottom Werte */
    margin-bottom: 0 !important;
    /* Performance-Optimierung: Verhindere Layout-Shift */
    will-change: transform;
}

/* PWA (Standalone Mode) - Keine zusätzlichen Anpassungen nötig */
/* Die Safe Area wird bereits in der Basis-Konfiguration berücksichtigt */
@media (display-mode: standalone) {
    /* Alle Regeln sind bereits in .app-footer und .app-main definiert */
}

/* iOS PWA spezifisch (zusätzlich zum standalone mode) */
@supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
        /* iOS Safe Area muss im PWA Modus korrekt behandelt werden */
        
        /* App-Shell nutzt volle Höhe */
        .app-shell {
            height: 100vh;
            height: -webkit-fill-available;
            min-height: -webkit-fill-available;
        }
        
        /* iOS PWA Safe Area - Keine zusätzlichen Anpassungen nötig */
        /* padding-bottom mit env(safe-area-inset-bottom) funktioniert im PWA Modus */
    }
}

/* Stundenplan & Aufgaben */
.schedule-week-view {
    display: block;
}

.schedule-navigation-card {
    margin-bottom: 1rem;
}

.schedule-week-card {
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.schedule-week-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.3fr) repeat(5, minmax(0, 1fr));
    gap: 0.3rem;
}

.schedule-week-column {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
}

.schedule-week-label {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-text-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.schedule-week-column--index .schedule-week-label {
    visibility: hidden;
}

.schedule-week-day {
    border: 1px solid var(--c-border);
    border-radius: var(--border-radius);
    background: var(--c-white);
    padding: 0.3rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.schedule-week-day:hover:not(.is-selected) {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

.schedule-week-day.is-selected {
    border-color: var(--c-primary);
    box-shadow: 0 12px 24px rgba(123, 75, 222, 0.15);
}

.schedule-week-day:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

.schedule-week-day--index {
    padding: 0.3rem 0;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    background: transparent;
    cursor: default;
}

.schedule-week-day--index:focus-visible {
    outline: none;
}

.schedule-week-day-slots {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: none;
}

.schedule-week-day--index .schedule-week-day-slots {
    gap: 0.6rem;
}

.schedule-week-overview-slot {
    width: 100%;
    min-height: 1.1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.25rem 0.2rem;
    box-sizing: border-box;
}

.schedule-week-overview-slot--empty {
    background: rgba(148, 163, 184, 0.18);
    border: 1px dashed rgba(148, 163, 184, 0.6);
}

.schedule-week-overview-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.6rem;
}

.schedule-week-overview-icons i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.schedule-week-index {
    width: 100%;
    height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.82rem;
    color: rgba(71, 85, 105, 0.75);
    padding-left: 0;
    line-height: 1.1rem;
    transform: translateY(0);
}

.schedule-day-detail {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.schedule-day-detail .header-with-action {
    margin: 1.75rem 0 0;
}

.schedule-day-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.schedule-detail-add {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.schedule-slot-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.schedule-slot-card {
    margin-bottom: 0 !important;
    cursor: pointer;
}

.schedule-slot-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.schedule-slot-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.schedule-slot-card-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--c-text-dark);
}

.schedule-slot-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--c-text-light);
}

.schedule-slot-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.schedule-slot-card-meta-separator {
    color: var(--c-text-light);
}

.schedule-slot-card-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.schedule-slot-card-note {
    margin: 0;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--c-text-light);
}

.schedule-slot-empty {
    font-size: 0.85rem;
    color: var(--c-text-light);
    font-style: italic;
}

.schedule-slot-form .schedule-slot-row {
    display: grid;
    width: 100%;
    gap: 0.75rem;
}

.schedule-slot-form .schedule-slot-row:nth-of-type(1) {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.3fr) minmax(0, 0.2fr);
}

.schedule-slot-form .schedule-slot-row:nth-of-type(2) {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.3fr);
}

.schedule-slot-form .schedule-slot-row .form-label-compact {
    min-width: 0;
}

.form-checkbox-pill {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-self: stretch;
}

.form-checkbox-pill .checkbox-pill {
    width: auto;
    min-width: 4.5rem;
    height: 100%;
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.checkbox-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    background: var(--c-white);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    font-weight: 600;
    color: var(--c-text-dark);
    position: relative;
    user-select: none;
}

.checkbox-pill input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.checkbox-pill-indicator {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, 0.7);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.checkbox-pill-indicator::after {
    content: '';
    width: 0.35rem;
    height: 0.65rem;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(45deg);
    transition: border-color 0.2s ease;
}

.checkbox-pill-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-text-dark);
    pointer-events: none;
}
.checkbox-pill:not(.is-disabled):hover {
    border-color: var(--c-primary);
}

.checkbox-pill.is-active {
    border-color: var(--c-primary);
    background: rgba(123, 75, 222, 0.12);
    color: var(--c-primary);
}

.checkbox-pill.is-active .checkbox-pill-indicator {
    border-color: var(--c-primary);
    background: var(--c-primary);
}

.checkbox-pill.is-active .checkbox-pill-indicator::after {
    border-color: var(--c-white);
}

.checkbox-pill.is-active .checkbox-pill-text {
    color: var(--c-primary);
}

.checkbox-pill.is-disabled {
    border-color: rgba(148, 163, 184, 0.4);
    color: rgba(148, 163, 184, 0.7);
    background: rgba(148, 163, 184, 0.08);
    cursor: not-allowed;
}

.checkbox-pill.is-disabled:hover {
    border-color: rgba(148, 163, 184, 0.4);
}

.checkbox-pill.is-disabled .checkbox-pill-indicator {
    border-color: rgba(148, 163, 184, 0.5);
    background: rgba(148, 163, 184, 0.15);
}

.checkbox-pill.is-disabled input {
    cursor: not-allowed;
}

.checkbox-pill {
    height: 100%;
}

.schedule-slot-row.schedule-slot-row--compact {
    display: flex;
    gap: 0.75rem;
}

.schedule-slot-form .form-section {
    margin-bottom: 1.25rem;
}

.schedule-slot-form .full-width {
    width: 100%;
}

.schedule-slot-form .form-actions.align-right {
    display: flex;
    justify-content: flex-end;
}

.schedule-slot-form .form-label-compact input[type="text"],
.schedule-slot-form .form-label-compact input[type="time"],
.schedule-slot-form .form-label-compact select,
.schedule-slot-form .form-label-compact textarea {
    border-radius: 16px;
}

.schedule-slot-note-field {
    width: 100%;
    margin-top: 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 0.75rem;
    font-family: var(--font-family);
    font-size: var(--body-size);
    resize: vertical;
    min-height: 4.5rem;
    box-sizing: border-box;
}

.schedule-slot-section {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1rem;
    background: var(--c-bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.schedule-slot-section:first-of-type {
    margin-top: 0;
}

.schedule-slot-add-task-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    margin-bottom: 0.625rem; /* Halbiert: 1.25rem / 2 = 0.625rem */
}

.schedule-slot-add-task-bar .btn-primary {
    background-color: var(--child-color, var(--c-primary));
    border-color: var(--child-color, var(--c-primary));
}

.schedule-task-form-card {
    margin-top: 0;
    margin-bottom: 1.25rem;
    background: var(--c-white);
    border-radius: 16px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(15, 23, 42, 0.06);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-family: inherit;
}

.schedule-task-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.6fr) minmax(180px, 0.4fr);
    gap: 0.75rem;
    align-items: stretch;
}

@media (max-width: 720px) {
    .schedule-task-form-grid {
        grid-template-columns: 1fr;
    }
}

.schedule-task-form-card label {
    font-family: inherit;
}

.schedule-task-form-card input[type="date"] {
    font-size: 0.85rem;
    color: rgba(71, 85, 105, 0.85);
    border: 1px solid var(--c-border);
    background: var(--c-white);
    box-shadow: none;
}

.schedule-task-form-card input[type="text"] {
    border: 1px solid var(--c-border);
    background: var(--c-white);
    box-shadow: none;
    color: var(--c-text-dark);
}

.schedule-task-form-card input[type="text"]:focus,
.schedule-task-form-card input[type="date"]:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(123, 75, 222, 0.1);
    outline: none;
}

.schedule-task-form-card input[type="date"]::-webkit-datetime-edit-text,
.schedule-task-form-card input[type="date"]::-webkit-datetime-edit-month-field,
.schedule-task-form-card input[type="date"]::-webkit-datetime-edit-day-field,
.schedule-task-form-card input[type="date"]::-webkit-datetime-edit-year-field {
    color: inherit;
    font-size: inherit;
}

@media (max-width: 720px) {
    .schedule-task-form-grid label:first-child,
    .schedule-task-form-grid label:first-child input[type="text"] {
        width: 100%;
    }
}

.schedule-task-form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .schedule-task-form-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.schedule-slot-task-section {
    gap: 1.5rem;
    margin-top: 1.25rem;
}

/* Spezifische Anpassung für Lehrer-Modal: Abstände wie "Neues Fach" Button in HomeView */
/* .header-with-action hat margin: 2rem 0 1rem 0 (oben: 2rem, unten: 1rem) */
/* Problem: .modal-form-compact hat gap: 1rem, was automatisch Abstände zwischen Kindern erzeugt */
/* Lösung: gap auf 0 setzen und Abstände manuell mit margin steuern */
.teacher-sidepanel #teacher-panel-form.modal-form-compact {
    gap: 0 !important; /* Entferne automatischen gap, damit wir die Abstände manuell kontrollieren können */
}

.teacher-sidepanel .panel-section {
    margin-bottom: 0 !important; /* Kein margin-bottom, damit der Abstand nur durch margin-top des Buttons bestimmt wird */
}

.teacher-sidepanel .schedule-slot-add-task-bar {
    margin-top: 2rem !important; /* Wie margin-top bei header-with-action (2rem) */
    margin-bottom: 1rem !important; /* Wie margin-bottom bei header-with-action (1rem) */
}

.teacher-sidepanel .schedule-slot-section.schedule-slot-task-section {
    margin-top: 0 !important; /* Kein zusätzlicher Abstand, da margin-bottom des Buttons bereits 1rem ist */
}

/* Überschreibe auch die Standard margin-top von .schedule-slot-section */
.teacher-sidepanel .schedule-slot-section {
    margin-top: 0 !important;
}

/* Überschreibe auch die margin-top von .schedule-slot-task-section (1.25rem) */
.teacher-sidepanel .schedule-slot-task-section {
    margin-top: 0 !important;
}

.schedule-slot-task-list {
    width: 100%;
}

.subject-details-exam-list {
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
}

.subject-section-action {
    margin-left: auto;
}

.schedule-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.schedule-section-header h4 {
    margin: 0;
}

.section-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--c-text-light);
}

.schedule-inline-form {
    border: 1px dashed var(--c-border);
    border-radius: 12px;
    background: var(--c-bg-light);
    box-shadow: none;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.schedule-inline-form .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.is-hidden {
    display: none !important;
}

.schedule-note-container .empty-state {
    margin: 0;
}

.note-card {
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 0.75rem;
    background: var(--c-bg-light);
    box-shadow: none;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.note-card p {
    margin: 0;
    white-space: pre-wrap;
    flex: 1;
    color: var(--c-text-dark);
}

.note-card .action-toolbar {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.schedule-action-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.schedule-action-item {
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 0.65rem;
    background: var(--c-bg-light);
    box-shadow: none;
}

.schedule-action-item .action-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.schedule-action-checkbox {
    display: flex;
    align-items: center;
}

.schedule-action-checkbox input {
    width: 1rem;
    height: 1rem;
}

.schedule-action-status {
    font-size: 0.95rem;
    color: var(--c-text-light);
}

.schedule-action-status.completed {
    color: #22C55E;
}

.schedule-action-item .action-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.schedule-action-item .action-text.completed {
    text-decoration: line-through;
    color: var(--c-text-light);
}

.schedule-slot-delete {
    margin-top: 1.25rem;
}

.schedule-slot-delete-btn {
    width: 100%;
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-white);
}

.action-toolbar {
    display: flex;
    gap: 0.45rem;
}

.action-toolbar .delete-task-btn {
    color: rgba(71, 85, 105, 0.65);
    transition: color 0.2s ease;
}

.action-toolbar .delete-task-btn:hover,
.action-toolbar .delete-task-btn:focus {
    color: var(--c-danger);
}

.action-toolbar .danger {
    color: var(--c-danger);
}

.action-due {
    font-size: 0.8rem;
    color: var(--c-text-light);
}

.action-due.overdue {
    color: var(--c-danger);
    font-weight: 600;
}

.action-due.upcoming {
    color: inherit;
    font-weight: 600;
}

.dashboard-schedule-entry {
    border: none;
    background: var(--c-bg-light);
    width: 100%;
    padding: 0.35rem 0.65rem;
    text-align: left;
    cursor: pointer;
    transition: none;
    appearance: none;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.92rem;
}

.dashboard-schedule-entry:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

.dashboard-schedule-line1,
.dashboard-schedule-line2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    line-height: 1.4;
}

.dashboard-schedule-line1 {
    font-weight: 600;
    color: var(--c-text-dark);
    font-size: inherit;
}

.dashboard-schedule-time {
    color: var(--c-primary);
    font-weight: 600;
    font-size: inherit;
}

.dashboard-schedule-subject {
    font-size: inherit;
    font-weight: 600;
    color: var(--subject-color, var(--c-text-dark));
}

.dashboard-schedule-line2 {
    font-size: 0.85rem;
    color: var(--c-text-light);
    margin-top: 0.25rem;
    font-size: 0.85rem;
}

.dashboard-schedule-room {
    font-size: 0.85rem;
    color: var(--c-text-light);
}

.dashboard-schedule-icons-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--c-text-light);
    font-size: inherit;
    justify-content: flex-end;
}

.schedule-entry-icon {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 1em;
    color: var(--subject-color, var(--c-primary));
}

.schedule-entry-icon .icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: var(--subject-color, var(--c-primary));
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 6px;
}

.schedule-entry-icon.muted {
    color: rgba(15, 23, 42, 0.18);
    font-size: 1em;
    gap: 0.25rem;
    align-items: baseline;
}

.schedule-action-edit-form {
    display: grid;
    gap: 0.6rem;
}

.schedule-action-edit-form .inline {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.link-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--c-primary);
    text-decoration: none;
    font-weight: 600;
}

.link-button i {
    font-size: 0.85rem;
}

/* Heutiger Stundenplan Card */
.todays-schedule-card {
    margin-bottom: 1rem;
    font-family: inherit;
    color: var(--c-text-dark);
    line-height: 1.5;
}

.todays-schedule-card .card-header.with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.todays-schedule-card .card-header.with-action h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
}

.todays-schedule-card .card-header.with-action h3 i {
    color: inherit;
}

.todays-schedule-content {
    margin-top: 0.5rem;
}

.todays-schedule-week {
    width: 100%;
}

.schedule-week-grid--single {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.schedule-week-column--single {
    width: 100%;
}

.schedule-week-day--static {
    cursor: default;
    border-color: var(--c-border);
    box-shadow: none;
    transform: none !important;
}

.schedule-week-day--static:hover {
    box-shadow: none;
    transform: none;
}

.todays-schedule-slot {
    display: block;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    color: inherit;
}

.todays-schedule-slot-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    gap: 0.4rem;
}

.todays-schedule-slot-grid--chips {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0;
}

.todays-schedule-slot-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.todays-schedule-slot-subject,
.todays-schedule-slot-main--chips .todays-schedule-slot-subject {
    flex: 1 1 auto;
    font-weight: 600;
    color: inherit;
    font-size: 0.95rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.todays-schedule-slot-icons {
    display: inline-flex;
    justify-content: flex-end;
    gap: 0.4rem;
    align-items: center;
}

.todays-schedule-slot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    color: rgba(15, 23, 42, 0.28);
    background: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.todays-schedule-slot-icon.is-active {
    color: var(--subject-color, var(--c-primary));
    background: rgba(255, 255, 255, 0.72);
}

.todays-schedule-slot-icon.overdue {
    color: #dc2626;
}

.todays-schedule-slot-icon.upcoming {
    color: #f59e0b;
}

.todays-schedule-slot-grid--chips {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0;
}

.todays-schedule-slot-main--chips {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.todays-schedule-slot-info {
    display: contents;
}

.todays-schedule-slot-meta {
    display: contents;
}

.todays-schedule-slot-meta span {
    display: contents;
}

.todays-schedule-slot-subject,
.todays-schedule-slot-main--chips .todays-schedule-slot-subject {
    flex: 1 1 auto;
    font-weight: 600;
    color: inherit;
    font-size: 0.95rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.todays-schedule-slot-icons {
    display: inline-flex;
    justify-content: flex-end;
    gap: 0.4rem;
    align-items: center;
}

.todays-schedule-slot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    color: rgba(15, 23, 42, 0.28);
    background: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.todays-schedule-slot-icon.is-active {
    color: var(--subject-color, var(--c-primary));
    background: rgba(255, 255, 255, 0.72);
}

.todays-schedule-slot-icon.overdue {
    color: #dc2626;
}

.todays-schedule-slot-icon.upcoming {
    color: #f59e0b;
}

.todays-schedule-slot-grid--chips {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0;
}

.todays-schedule-slot-main--chips {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.todays-schedule-slot-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.todays-schedule-slot-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: rgba(71, 85, 105, 0.72);
}

.todays-schedule-slot-meta span {
    display: inline-flex;
    align-items: center;
}

.schedule-chip-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    width: 100%;
    flex-wrap: nowrap;
}

.schedule-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    min-height: 1.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--chip-color, inherit);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.schedule-chip i {
    font-size: 0.85rem;
}

.schedule-chip-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.schedule-chip.is-empty {
    color: rgba(71, 85, 105, 0.55);
    background: rgba(255, 255, 255, 0.45);
    border-color: rgba(148, 163, 184, 0.25);
}

.schedule-chip.is-empty i {
    color: rgba(71, 85, 105, 0.45);
}

.schedule-chip--room,
.schedule-chip--indicator {
    background: rgba(255, 255, 255, 0.7);
}

.schedule-chip--room:not(.is-empty),
.schedule-chip--indicator:not(.is-empty),
.upcoming-exam-badge {
    color: var(--chip-color, inherit);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.7);
}

.schedule-chip--indicator:not(.is-empty) i,
.upcoming-exam-controls i {
    color: var(--chip-color, inherit);
}

.schedule-chip--indicator.is-upcoming,
.schedule-chip--indicator.is-overdue,
.schedule-chip--indicator.is-complete,
.schedule-chip--indicator.is-active {
    background: rgba(255, 255, 255, 0.7);
    color: var(--chip-color, inherit);
    border-color: rgba(255, 255, 255, 0.5);
}

.schedule-chip--indicator.is-upcoming,
.schedule-chip--indicator.is-overdue,
.schedule-chip--indicator.is-complete,
.schedule-chip--indicator.is-active {
    background: rgba(255, 255, 255, 0.7);
    color: var(--chip-color, inherit);
    border-color: rgba(255, 255, 255, 0.5);
}

.todays-schedule-slot:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.todays-schedule-slot:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

.todays-schedule-slot--empty {
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}

.todays-schedule-empty-hint {
    margin-top: 0.75rem;
}

.todays-schedule-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.todays-schedule-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 100%;
}

.todays-schedule-col-subject {
    width: 33%;
}

.todays-schedule-col-room {
    width: 30%;
}

.todays-schedule-col-icons {
    width: 1%;
}

.todays-schedule-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-light);
    padding: 0.32rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}

.todays-schedule-row {
    cursor: pointer;
}

.todays-schedule-table tbody tr td {
    border-bottom: 1px solid var(--subject-row-border, var(--c-border));
}

.todays-schedule-table tbody tr:last-of-type td {
    border-bottom: none;
}

.todays-schedule-row td {
    background: var(--subject-row-bg, rgba(123, 75, 222, 0.08));
    transition: background-color 0.2s ease;
}

.todays-schedule-table tbody tr:first-of-type td:first-of-type {
    border-top-left-radius: var(--border-radius);
}

.todays-schedule-table tbody tr:first-of-type td:last-of-type {
    border-top-right-radius: var(--border-radius);
}

.todays-schedule-table tbody tr:last-of-type td:first-of-type {
    border-bottom-left-radius: var(--border-radius);
}

.todays-schedule-table tbody tr:last-of-type td:last-of-type {
    border-bottom-right-radius: var(--border-radius);
}

.todays-schedule-row:hover td {
    background: var(--subject-row-bg-hover, rgba(123, 75, 222, 0.16));
}

.todays-schedule-cell {
    padding: 0.32rem 0.6rem;
    font-size: 0.92rem;
    color: var(--c-text-dark);
    vertical-align: middle;
}

.todays-schedule-cell-time {
    color: var(--c-primary);
    font-weight: 600;
    white-space: nowrap;
}

.todays-schedule-cell-subject {
    font-weight: 600;
    min-width: 6.5rem;
    color: var(--subject-color, var(--c-text-dark));
    width: 33%;
}

.todays-schedule-cell-room {
    color: var(--c-text-light);
    white-space: nowrap;
    width: 30%;
}

.todays-schedule-cell-icons {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}

.todays-schedule-icons {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

.schedule-task-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.schedule-task-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--c-text-dark);
}

.schedule-task-item i {
    font-size: 0.85rem;
}

.schedule-task-item .task-text {
    flex: 1;
}

.schedule-task-item .task-due {
    font-size: 0.8rem;
    font-weight: 600;
}

.schedule-task-item.overdue {
    color: var(--c-danger);
}

.schedule-task-item.overdue .task-due {
    color: inherit;
}

.schedule-task-item.upcoming {
    color: #F97316;
}

.schedule-task-item.upcoming .task-due {
    color: inherit;
}

.schedule-task-empty {
    font-size: 0.85rem;
    color: var(--c-text-light);
    margin: 0;
}

.badge.note {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(37,99,235,0.12);
    color: #2563EB;
}

.card-header.with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.btn-secondary.link-icon {
    border-color: var(--subject-color, var(--c-primary));
    color: var(--subject-color, var(--c-primary));
    background-color: white;
    transition: transform 0.2s ease;
}

.btn-secondary.link-icon:hover {
    background: white;
    color: var(--subject-color, var(--c-primary));
    transform: scale(1.05);
}

.dashboard-schedule-separator {
    color: var(--c-text-light);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}

.dashboard-schedule-info {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.dashboard-schedule-icons-col {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.35rem;
    justify-self: start;
}

.dashboard-schedule-time {
    color: var(--c-primary);
    font-weight: 600;
    font-size: inherit;
}

.dashboard-schedule-subject {
    font-size: inherit;
    font-weight: 600;
    color: var(--subject-color, var(--c-text-dark));
}

.dashboard-schedule-separator {
    text-align: center;
    color: var(--c-text-light);
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.4;
}

.dashboard-schedule-room-inline {
    font-size: 0.85rem;
    color: var(--subject-color, var(--c-text-dark));
}

.todays-schedule-slot-info,
.todays-schedule-slot-meta,
.todays-schedule-slot-meta span {
    display: contents;
    gap: 0;
}

.schedule-chip--indicator.is-upcoming,
.schedule-chip--indicator.is-overdue,
.schedule-chip--indicator.is-complete,
.schedule-chip--indicator.is-active {
    background: rgba(255, 255, 255, 0.7);
    color: var(--chip-color, inherit);
    border-color: rgba(255, 255, 255, 0.5);
}

.schedule-chip--time {
    text-transform: none;
}