/* ============================================
   SchulPilot UI-Redesign – Dashboard & Alle Prüfungen
   Konsistent zum SubjectAnalysisPanel-Stil (v1.5.0)
   ============================================ */

/* Common: Card-Stil wie sa-card */
.exams-header,
.exams-stats-bar,
.exams-filters,
.exams-list,
.dashboard-section-card{
    background:var(--c-card,#fff);
    border:1px solid var(--c-border,#e5e7eb);
    border-radius:14px;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
}

/* ============================================
   ALLE PRÜFUNGEN
   ============================================ */
/* Wichtig: display nur setzen, wenn die View aktiv ist —
   sonst überschreibt das die globale Regel `.view { display: none; }`
   und `#exams-view` bleibt zwischen Header und allen anderen Views
   sichtbar (nimmt ~88px Platz und drückt z. B. Analytics nach unten). */
#exams-view.active-view{
    padding:0.5rem 0 5rem;
    display:flex;flex-direction:column;gap:0.75rem;
}
.exams-header{
    display:flex;align-items:center;justify-content:space-between;
    gap:0.75rem;padding:0.9rem 1.1rem;
}
.exams-header h2{
    margin:0;font-size:1.05rem;font-weight:700;
    color:var(--c-text-dark,#111);
    display:flex;align-items:center;gap:0.5rem;
}
.exams-header h2 i{
    color:var(--c-primary,#7B4BDE);
}

/* Stats-Streifen */
.exams-stats-bar{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;
    padding:0.75rem 1rem;
}
.exams-stat{
    display:flex;flex-direction:column;align-items:center;gap:0.15rem;
    padding:0.5rem 0.25rem;border-radius:10px;
    background:rgba(123,75,222,0.06);
}
.exams-stat-value{
    font-size:1.4rem;font-weight:800;
    color:var(--c-text-dark,#111);line-height:1.1;
}
.exams-stat-label{
    font-size:0.65rem;letter-spacing:0.04em;text-transform:uppercase;
    color:var(--c-text-light,#6b7280);font-weight:700;
}
@media(max-width:480px){
    .exams-stats-bar{grid-template-columns:repeat(2,1fr)}
    .exams-stat-value{font-size:1.2rem}
}

/* Filter */
.exams-filters{
    display:flex;gap:0.5rem;padding:0.75rem 1rem;flex-wrap:wrap;
}
.exams-filter-select{
    flex:1;min-width:140px;
    padding:0.5rem 0.75rem;border-radius:10px;
    border:1px solid var(--c-border,#e5e7eb);
    background:var(--c-bg-main,#fff);
    color:var(--c-text-dark,#111);
    font-family:inherit;font-size:0.85rem;font-weight:500;
    cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.exams-filter-select:hover{
    border-color:var(--c-primary,#7B4BDE);
}
.exams-filter-select:focus{
    outline:none;
    border-color:var(--c-primary,#7B4BDE);
    box-shadow:0 0 0 3px rgba(123,75,222,0.12);
}

/* Liste */
.exams-list{
    padding:0.5rem;display:flex;flex-direction:column;gap:0.4rem;
}
.exams-list .empty-state{
    text-align:center;color:var(--c-text-light,#6b7280);
    padding:2rem 1rem;font-style:italic;
}

/* Zeile */
.exams-row{
    display:flex;align-items:stretch;gap:0;
    border-radius:10px;overflow:hidden;cursor:pointer;
    border:1px solid var(--c-border,#e5e7eb);
    background:var(--c-card,#fff);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.exams-row:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(0,0,0,.08);
    border-color:transparent;
}
.exams-row-color{
    width:4px;flex:0 0 4px;
}
.exams-row-content{
    flex:1;padding:0.65rem 0.85rem;
}
.exams-row-main{
    display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
}
.exams-row-info{
    display:flex;flex-direction:column;gap:0.15rem;min-width:0;flex:1;
}
.exams-row-type{
    font-size:0.9rem;font-weight:700;color:var(--c-text-dark,#111);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.exams-row-subject{
    font-size:0.75rem;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.exams-row-meta{
    display:flex;align-items:center;gap:0.5rem;flex-shrink:0;
}
.exams-row-date{
    font-size:0.78rem;color:var(--c-text-light,#6b7280);
    font-variant-numeric:tabular-nums;
}

/* Status-Badges (kompakter, klarer) */
.exams-grade-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:48px;padding:0.25rem 0.55rem;
    border-radius:999px;
    font-size:0.78rem;font-weight:800;
    line-height:1;
    text-align:center;
}
.exams-grade-upcoming{
    background:#FEF3C7;color:#92400E;
}
.exams-grade-open{
    background:#FEE2E2;color:#991B1B;
}
.exams-grade-no-date{
    background:#E5E7EB;color:#374151;
}

/* ============================================
   STARTSEITE (DASHBOARD) – sanftes Refresh
   ============================================ */

#dashboard-view{
    /* Bottom-Padding wird zentral über .app-main gesteuert (Floating Navbar).
       Hier nur ein kleiner Puffer, damit das letzte Element nicht direkt am Rand klebt. */
    padding:0.5rem 0 0.5rem;
}
#dashboard-view > * + *{margin-top:0.85rem}

/* Cards angleichen (sanft, ohne Layout zu ändern) */
#dashboard-view .card,
#dashboard-view .upcoming-exams-card,
#dashboard-view .schedule-summary-card,
#dashboard-view .dashboard-widget{
    background:var(--c-card,#fff);
    border:1px solid var(--c-border,#e5e7eb);
    border-radius:14px;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
}

/* Header der Cards moderner */
#dashboard-view .card-header,
#dashboard-view .card-header.with-action{
    padding:0.85rem 1.1rem 0.5rem;
}
#dashboard-view .card-header h3{
    font-size:1rem;font-weight:700;letter-spacing:0;
    display:flex;align-items:center;gap:0.5rem;margin:0;
}

/* Section-Header (z.B. "Fächer") – moderner & kompakter
   Wird sowohl im Dashboard ALS AUCH in der Analytics-View verwendet,
   damit die Sektions-Überschriften visuell konsistent sind.
   Das FA-Icon davor kann pro Überschrift via `data-section-icon`
   gesetzt werden (z.B. "\f02d" für fa-book, "\f201" für fa-chart-line).
   Fallback: fa-book, falls kein Attribut gesetzt ist.

   UI-Anchor (Mittelweg-Lösung, statt Container-Box um die Sektion):
   - Subtile Trennlinie (border-top) + mehr top-padding signalisieren
     "neue Sektion" ohne die Karten in einen weißen Kasten zu kapseln.
   - `:first-child` greift NICHT (border würde direkt unter dem Header
     erscheinen) — daher per `&:not(:first-child)` nur ab der zweiten
     Section. Im Dashboard ist die Fächer-Sektion sowieso nicht das
     erste Element, also bekommt sie die Linie. */
#dashboard-view .header-with-action,
#analytics-view .header-with-action{
    display:flex;align-items:center;justify-content:space-between;
    padding:0 0.25rem;
    /* Vertikale Abstände gehen über Layout-Tokens (siehe design-tokens.css,
       Abschnitt E). Damit lassen sich die Heading-Abstände zentral pro View
       anpassen — ohne magische Werte oder margin-top-Hacks pro Element. */
    margin: var(--view-section-spacing-top, 0.5rem)
            0
            var(--view-section-spacing-bottom, 0.4rem);
}

/* Subtile Trennlinie + extra Atemraum NUR wenn der Section-Header nicht das
   allererste Element der View ist. Trennt Hub-Sektionen (Fächer) optisch von
   Status-Widgets darüber, ohne die Karten in einen Container zu kapseln. */
#dashboard-view .header-with-action:not(:first-child),
#analytics-view .header-with-action:not(:first-child){
    border-top:1px solid var(--c-border, #EAEAEA);
    margin-top: calc(var(--view-section-spacing-top, 0.5rem) + 0.75rem);
    padding-top: 1rem;
}
#dashboard-view .header-with-action h2,
#analytics-view .header-with-action h2{
    font-size:0.95rem;font-weight:700;color:var(--c-text-dark,#111);
    margin:0;display:flex;align-items:center;gap:0.5rem;
    text-transform:uppercase;letter-spacing:0.04em;
}
#dashboard-view .header-with-action h2::before,
#analytics-view .header-with-action h2::before{
    /* `attr()` mit Fallback (Standard CSS) — der zweite Parameter ist der
       Default, falls `data-section-icon` fehlt. Wir nutzen aber JEDE
       Überschrift in beiden Views jetzt explizit mit Attribut. */
    content:attr(data-section-icon);
    /* Fallback: fa-book Glyph als Zeichen (Unicode-Escape). Falls
       `data-section-icon` leer ist, fällt der Browser nicht auf einen
       Default zurück (CSS attr() ohne content fallback). Daher setzen
       wir den Default per `:not([data-section-icon])`-Regel weiter unten. */
    font-family:'Font Awesome 6 Free';font-weight:900;
    color:var(--c-primary,#7B4BDE);font-size:0.85rem;
    text-transform:none;letter-spacing:0;
}
/* Default-Icon (fa-book / \f02d), wenn kein data-section-icon gesetzt ist.
   Damit bleibt der bisherige Look der HomeView-„Fächer"-Sektion erhalten,
   auch wenn das Markup älter ist. */
#dashboard-view .header-with-action h2:not([data-section-icon])::before,
#analytics-view .header-with-action h2:not([data-section-icon])::before{
    content:'\f02d';
}

/* Fach-Karten: moderner kompakter Look mit klarem Farbstreifen */
#dashboard-view .subject-card-compact{
    border:none !important;
    border-left:5px solid var(--subject-accent, var(--c-primary)) !important;
    border-radius:10px !important;
    padding:0.6rem 0.75rem !important;
    box-shadow:0 1px 2px rgba(0,0,0,.04) !important;
    transition:transform .15s ease, box-shadow .15s ease !important;
}
#dashboard-view .subject-card-compact:hover{
    transform:translateY(-1px) !important;
    box-shadow:0 4px 10px rgba(0,0,0,.06) !important;
}
#dashboard-view .subject-card-compact .subject-card-content{
    gap:0.6rem !important;
}
#dashboard-view .subject-card-compact .subject-info{
    gap:0.5rem !important;
}
#dashboard-view .subject-card-compact .drag-handle{
    color:rgba(0,0,0,0.28) !important;
    padding:0.35rem 0.2rem !important;
    margin:-0.35rem 0 -0.35rem -0.25rem !important;
    font-size:0.85rem !important;
}
#dashboard-view .subject-card-compact .subject-name{
    font-size:0.95rem !important;
    font-weight:600 !important;
    line-height:1.2 !important;
}
#dashboard-view .subject-card-compact .subject-teacher{
    font-size:0.75rem !important;
    color:var(--c-text-light,#6b7280) !important;
    line-height:1.2 !important;
    margin-top:1px !important;
}
#dashboard-view .subject-card-compact .subject-grade-actions{
    gap:0.5rem !important;
}
#dashboard-view .subject-card-compact .subject-grade{
    font-size:1.15rem !important;
    font-weight:700 !important;
    min-width:2.4rem !important;
    text-align:right !important;
    letter-spacing:-0.02em !important;
}
#dashboard-view .subject-card-compact .subject-actions{
    gap:0.1rem !important;
}
#dashboard-view .subject-card-compact .subject-actions .icon-button-small{
    width:1.85rem;height:1.85rem;
    padding:0 !important;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:8px !important;
    color:rgba(0,0,0,0.45) !important;
    font-size:0.8rem !important;
    background:transparent !important;
    transition:background .15s ease, color .15s ease, transform .15s ease !important;
}
#dashboard-view .subject-card-compact .subject-actions .icon-button-small:hover{
    background:rgba(0,0,0,0.06) !important;
    color:var(--c-primary,#7B4BDE) !important;
    transform:scale(1.05);
}

/* Bei sehr schmalen Screens: Action-Buttons noch kleiner */
@media (max-width:380px){
    #dashboard-view .subject-card-compact{
        padding:0.55rem 0.6rem !important;
    }
    #dashboard-view .subject-card-compact .subject-grade{
        font-size:1.05rem !important;
        min-width:2.1rem !important;
    }
    #dashboard-view .subject-card-compact .subject-actions .icon-button-small{
        width:1.7rem;height:1.7rem;
        font-size:0.75rem !important;
    }
    #dashboard-view .subject-card-compact .subject-grade-actions{
        gap:0.35rem !important;
    }
}

/* KPI-Bar
   Hinweis: Die KPI-Bar im Dashboard nutzt jetzt dieselbe Optik wie in der
   Analytics-View (= Standard aus style.css → .dashboard-kpi-bar).
   Die früheren #dashboard-view-spezifischen Overrides (kompakteres Padding,
   andere Schriftstärke / Label-Größe) wurden entfernt, damit beide Views
   visuell identisch sind. */

/* Indicator-Dots (KPI-Slider) */
#dashboard-view .kpi-view-indicator{
    display:flex;justify-content:center;gap:0.4rem;margin-top:0.5rem;
}
#dashboard-view .kpi-indicator-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--c-border,#e5e7eb);
    transition:background .2s ease, transform .2s ease;
    cursor:pointer;
}
#dashboard-view .kpi-indicator-dot.active{
    background:var(--c-primary,#7B4BDE);
    transform:scale(1.3);
}

/* Anstehende Prüfungen – Listen-Items */
#dashboard-view .upcoming-exams-card .exam-list-item,
#dashboard-view .upcoming-exam-item{
    border-radius:10px;
    transition:transform .15s ease, box-shadow .15s ease;
}
#dashboard-view .upcoming-exams-card .exam-list-item:hover,
#dashboard-view .upcoming-exam-item:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(0,0,0,.06);
}

/* Fächer-Container */
#dashboard-view #subjects-container{
    display:flex;flex-direction:column;gap:0.6rem;
}

/* Empty-State im Dashboard */
#dashboard-view .empty-state{
    text-align:center;color:var(--c-text-light,#6b7280);
    padding:1.5rem 1rem;font-style:italic;
    background:var(--c-card,#fff);
    border:1px dashed var(--c-border,#e5e7eb);
    border-radius:14px;
}

/* Welcome-Screen */
#dashboard-view .welcome-screen,
#exams-view .welcome-screen{
    background:var(--c-card,#fff);
    border:1px solid var(--c-border,#e5e7eb);
    border-radius:14px;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
    padding:2.5rem 1.5rem;
    text-align:center;
}
#dashboard-view .welcome-screen .welcome-icon i,
#exams-view .welcome-screen .welcome-icon i{
    color:var(--c-primary,#7B4BDE);
    font-size:2.5rem;
}
#dashboard-view .welcome-screen h2,
#exams-view .welcome-screen h2{
    margin:0.5rem 0 0.25rem;
    font-size:1.25rem;font-weight:700;
    color:var(--c-text-dark,#111);
}
#dashboard-view .welcome-screen p,
#exams-view .welcome-screen p{
    color:var(--c-text-light,#6b7280);
    font-size:0.9rem;line-height:1.5;
}

/* Dark-Mode-Anpassungen */
@media (prefers-color-scheme: dark){
    .exams-stat{background:rgba(123,75,222,0.15)}
    .exams-grade-upcoming{background:rgba(245,158,11,0.18);color:#FCD34D}
    .exams-grade-open{background:rgba(239,68,68,0.18);color:#FCA5A5}
    .exams-grade-no-date{background:rgba(255,255,255,0.08);color:#D1D5DB}
}
[data-theme="dark"] .exams-stat{background:rgba(123,75,222,0.15)}
[data-theme="dark"] .exams-grade-upcoming{background:rgba(245,158,11,0.18);color:#FCD34D}
[data-theme="dark"] .exams-grade-open{background:rgba(239,68,68,0.18);color:#FCA5A5}
[data-theme="dark"] .exams-grade-no-date{background:rgba(255,255,255,0.08);color:#D1D5DB}