/* ============================================================================
   modern-theme.css  ·  schoolAIssistant — visuelle Modernisierung
   ----------------------------------------------------------------------------
   Globaler Drop-in, in App.razor NACH app.css eingebunden. Greift ausschließlich
   auf bestehende Bootstrap-/App-Klassen und die Tokens aus _colors.css. Keine
   Markup-Änderungen nötig. Sidebar/Topbar/Nav sind Blazor-scoped und liegen
   daher in MainLayout.razor.css + NavMenu.razor.css.
   ============================================================================ */

/* 1) Schrift — Plus Jakarta Sans (selbst gehostet, siehe fonts.css).
      Brand-Titel (App-Logo) bleibt Monospace und wird hier nicht angefasst. */
body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* 2) Buttons — weichere Radien, dezente Tiefe auf Primary, ruhiger Hover-Lift */
.btn {
    border-radius: var(--radius-md);
    font-weight: 600;
}

.btn-primary {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 4px 14px -6px rgba(var(--primary-rgb), 0.45);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12), 0 8px 22px -6px rgba(var(--primary-rgb), 0.5);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-group > .btn:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.btn-group > .btn:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/* 3) Badges — Pillenform (Zähler, +N, Status) */
.badge {
    border-radius: var(--radius-pill);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* 4) Form-Controls — ruhigerer Rahmen, weicher Fokus-Ring in Markenfarbe */
.form-control,
.form-select {
    border-radius: var(--radius-md);
    border-color: var(--gray-border-light);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem var(--primary-light);
}

/* 5) Cards — größerer Radius + abgestimmte Elevation */
.card {
    border-radius: var(--radius-lg);
    border-color: var(--gray-border-light);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: var(--surface-subtle);
    border-bottom-color: var(--gray-border-light);
    font-weight: 600;
}

/* 6) Modals — Karten-Look statt harter Kanten */
.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: var(--gray-border-light);
}

/* 7) Tabellen — größter Frische-Effekt für alle Listenseiten.
      Zebra raus, feine Zeilentrenner, großzügige Höhe, Versal-Köpfe,
      Hover in Markenfarbe. Kein Markup nötig; optional .table-surface für
      den vollen Karten-Rahmen. */
.table {
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--selected-bg);
}

.table > thead > tr > th {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--gray-text-secondary);
    background-color: var(--surface-subtle);
    border-bottom: 1px solid var(--gray-border-light);
}

.table > :not(caption) > * > * {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    border-color: var(--row-divider);
}

.table-surface {
    border: 1px solid var(--gray-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.table-surface > .table {
    margin-bottom: 0;
}

.table-surface > .table > thead > tr > th:first-child,
.table-surface > .table > tbody > tr > *:first-child {
    padding-left: 1.1rem;
}

/* 8) Seitentitel — etwas mehr Gewicht & engeres Tracking */
.page-title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* 9) KPI-Kacheln (Ergebnis-Übersicht) — weicher Rahmen, große Zahl in
      Markendunkel, kleines Versal-Label */
.kpi-tile {
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    background-color: var(--white);
}

.kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nav-section-label);
}

.kpi-value {
    font-weight: 800;
    color: var(--primary-dark);
    font-size: 2.25rem;
    line-height: 1.1;
    margin-top: 0.25rem;
}

/* 10) Gauge-Balken — kleine Lücken zwischen den Segmenten, leicht runder */
.gauge-segments {
    gap: 3px;
}

.gauge-segment {
    border-radius: var(--radius-sm);
}

/* 11) Auswählbare Karten (Setup-Wizard) — größerer Radius + dezente Ruhe-Elevation */
.card-selectable {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* 12) Onboarding/Login — weiße Karte auf dem Markenverlauf statt weißer Schrift
   direkt auf Grün. Opt-in über .fullpage-card am .fullpage-body der Formularseiten
   (Home bleibt Hero ohne Karte). Die inneren Overrides drehen die in app.css für den
   Verlauf gesetzten Hell-auf-Dunkel-Stile auf Dunkel-auf-Weiß zurück. */
.fullpage-card {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 2rem;
}

.fullpage-card .form-label,
.fullpage-card .form-check-label {
    color: var(--gray-dark);
}

.fullpage-card .form-control {
    background-color: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    color: var(--gray-dark);
}

.fullpage-card .form-control::placeholder {
    color: var(--gray-text-secondary);
}

.fullpage-card .form-control:focus {
    background-color: var(--white);
    color: var(--gray-dark);
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem var(--primary-light);
}

.fullpage-card .input-group .btn-outline-secondary {
    background-color: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    color: var(--gray-text-secondary);
}

.fullpage-card .input-group .btn-outline-secondary:hover {
    background-color: var(--nav-hover-bg);
    color: var(--primary-dark);
}

.fullpage-card .form-check-input {
    background-color: var(--white);
    border-color: var(--gray-border-light);
}

.fullpage-card .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    /* Weißer Schalter-Knopf auf grünem Track (SVG kann keine CSS-Variablen, siehe 4.4) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.fullpage-card .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.fullpage-card .btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
}

.fullpage-card .fullpage-hint,
.fullpage-card .form-text {
    color: var(--gray-text-secondary);
}

.fullpage-card .fullpage-link {
    color: var(--primary);
}

.fullpage-card .progress {
    background-color: var(--primary-light);
}

.fullpage-card .progress-bar {
    background-color: var(--primary);
}