/* ========== DESIGN TOKENS ========== */
/* Single source of truth for colors. Accent (--accent-h/s/l) is user-overridable
   via the profile picker; everything else flows from these tokens. */
:root {
    /* Warm off-white surfaces (light mode) */
    --background: #faf8f5;
    --card: #ffffff;
    --muted: #f1ede6;
    --secondary: #ede8df;
    --border: #e4ddd0;
    --foreground: #1c1917;
    --muted-foreground: #6b6357;

    /* Accent — avocloud coral default. User can pick: red/orange/yellow/green/blue/purple/mono. */
    --accent-h: 10;
    --accent-s: 72%;
    --accent-l: 45%;
    --primary: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
    --primary-foreground: #ffffff;
    --primary-soft: hsl(var(--accent-h) var(--accent-s) 92%);
    --primary-soft-strong: hsl(var(--accent-h) var(--accent-s) 85%);
    --ring: hsl(var(--accent-h) var(--accent-s) 55% / 0.4);

    /* Semantic (fixed — grade scale & status) */
    --success: #15803d;
    --warning: #b45309;
    --destructive: #b91c1c;
    --destructive-foreground: #ffffff;

    /* Background dot pattern */
    --dot-color: rgba(0, 0, 0, 0.05);
}

html.dark {
    --background: #1a1815;
    --card: #221f1b;
    --muted: #2a2622;
    --secondary: #2a2622;
    --border: #3a342d;
    --foreground: #f5f0e8;
    --muted-foreground: #9c948a;

    --primary: hsl(var(--accent-h) var(--accent-s) 60%);
    --primary-soft: hsl(var(--accent-h) var(--accent-s) 25% / 0.4);
    --primary-soft-strong: hsl(var(--accent-h) var(--accent-s) 30% / 0.55);
    --ring: hsl(var(--accent-h) var(--accent-s) 65% / 0.5);

    --destructive: #ef4444;
    --dot-color: rgba(255, 255, 255, 0.04);
}

.lucide {
    width: 1.2rem;
    height: 1.2rem;
    transition: transform 0.15s ease;
}

/* ========== ICON-HOVER-ANIMATIONEN (Motive von lucide-animated.com,
   als reines CSS statt React/Motion.js portiert - passend zu unseren
   Lucide-Icons) ========== */

/* Stift-Icons (rename): kurzes Wackeln der Stiftspitze beim Hover */
@keyframes iconPenWiggle {
    0% {
        transform: rotate(0deg) translate(0, 0);
    }

    25% {
        transform: rotate(-4deg) translate(-1px, 1px);
    }

    50% {
        transform: rotate(4deg) translate(1px, -1px);
    }

    75% {
        transform: rotate(-2deg) translate(0, 0);
    }

    100% {
        transform: rotate(0deg) translate(0, 0);
    }
}

[class*="btn-"]:hover .lucide-user-pen path:last-of-type,
[class*="btn-"]:hover .lucide-folder-pen path:last-of-type,
[class*="btn-"]:hover .lucide-notebook-pen path:last-of-type {
    animation: iconPenWiggle 0.5s ease-in-out;
    transform-origin: center;
}

/* Plus-Icon (Note/Schüler hinzufügen): dreht sich beim Hover einmal um 180° */
.lucide-plus {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[class*="btn-"]:hover .lucide-plus {
    transform: rotate(180deg);
}

/* Auge-Icon (Details ansehen): "blinzelt" beim Hover */
@keyframes iconEyeBlink {

    0%,
    100% {
        transform: scaleY(1);
        opacity: 1;
    }

    50% {
        transform: scaleY(0.1);
        opacity: 0.4;
    }
}

@keyframes iconPupilShrink {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.3);
        opacity: 0.4;
    }
}

[class*="btn-"]:hover .lucide-eye path {
    animation: iconEyeBlink 0.4s ease-in-out;
    transform-origin: center;
}

[class*="btn-"]:hover .lucide-eye circle {
    animation: iconPupilShrink 0.4s ease-in-out;
    transform-origin: center;
}

/* Papierkorb-Icon (löschen): Deckel hebt+kippt sich kurz beim Hover */
.lucide-trash path:nth-child(2),
.lucide-trash path:nth-child(3) {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: 3px 6px;
}

[class*="btn-"]:hover .lucide-trash path:nth-child(2),
[class*="btn-"]:hover .lucide-trash path:nth-child(3) {
    transform: translateY(-2.5px) rotate(-6deg);
}

/* Dokument-Icon (Klassenarbeit): Icon skaliert leicht, Textzeilen
   "schreiben sich neu" (löschen sich und zeichnen sich nach) nacheinander.
   Braucht pathLength="100" auf den 3 Linien-Pfaden (siehe index.html), damit
   stroke-dasharray/-dashoffset unabhängig von der tatsächlichen Pfadlänge in
   0-100 gerechnet werden kann. */
.lucide-file-text {
    transition: transform 0.3s ease-out;
}

[class*="btn-"]:hover .lucide-file-text {
    transform: scale(1.05);
}

.lucide-file-text path:nth-child(3),
.lucide-file-text path:nth-child(4),
.lucide-file-text path:nth-child(5) {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}

@keyframes fileLineRewrite {

    0%,
    100% {
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dashoffset: 100;
    }
}

[class*="btn-"]:hover .lucide-file-text path:nth-child(3) {
    animation: fileLineRewrite 0.7s ease 0.3s;
}

[class*="btn-"]:hover .lucide-file-text path:nth-child(4) {
    animation: fileLineRewrite 0.7s ease 0.5s;
}

[class*="btn-"]:hover .lucide-file-text path:nth-child(5) {
    animation: fileLineRewrite 0.7s ease 0.7s;
}

/* Anwesenheit-Icon (Person mit Häkchen): Häkchen poppt beim Hover */
@keyframes userCheckPop {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

[class*="btn-"]:hover .lucide-user-round-check path:last-of-type {
    animation: userCheckPop 0.35s ease-out;
    transform-origin: center;
}

/* Upload-Icon (Import): Pfeil hüpft nach oben beim Hover */
@keyframes uploadBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

[class*="btn-"]:hover .lucide-upload path:nth-child(1),
[class*="btn-"]:hover .lucide-upload path:nth-child(2) {
    animation: uploadBounce 0.4s ease-in-out;
}

/* Link-Icon (Schüler-Zugang): Kettenglieder ziehen sich kurz auseinander */
@keyframes linkPullA {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-1.5px, 1.5px);
    }
}

@keyframes linkPullB {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(1.5px, -1.5px);
    }
}

[class*="btn-"]:hover .lucide-link path:nth-child(1) {
    animation: linkPullA 0.4s ease-in-out;
}

[class*="btn-"]:hover .lucide-link path:nth-child(2) {
    animation: linkPullB 0.4s ease-in-out;
}

/* X-Icon (Schließen): beide Linien zeichnen sich nacheinander ein.
   Braucht pathLength="100" auf den beiden <line>-Elementen. */
.lucide-x line {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}

@keyframes xDraw {
    from {
        stroke-dashoffset: 100;
        opacity: 0;
    }

    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

[class*="btn-"]:hover .lucide-x line:nth-child(1) {
    animation: xDraw 0.3s ease-out both;
}

[class*="btn-"]:hover .lucide-x line:nth-child(2) {
    animation: xDraw 0.3s ease-out 0.2s both;
}

/* Direkter Hover-Fallback: manche Icons sitzen nicht in einem Button
   (z.B. das Plus-Badge im Empty-State), sondern in einem einfachen <div>.
   Ein Hover direkt auf dem Icon selbst löst die Animation dann trotzdem aus. */
.lucide-plus:hover {
    transform: rotate(180deg);
}

.lucide-trash:hover path:nth-child(2),
.lucide-trash:hover path:nth-child(3) {
    transform: translateY(-2.5px) rotate(-6deg);
}

.lucide-eye:hover path {
    animation: iconEyeBlink 0.4s ease-in-out;
    transform-origin: center;
}

.lucide-eye:hover circle {
    animation: iconPupilShrink 0.4s ease-in-out;
    transform-origin: center;
}

.lucide-user-pen:hover path:last-of-type,
.lucide-folder-pen:hover path:last-of-type,
.lucide-notebook-pen:hover path:last-of-type {
    animation: iconPenWiggle 0.5s ease-in-out;
    transform-origin: center;
}

/* Häkchen-Icon (Erfolgs-Feedback): zeichnet sich beim Erscheinen.
   Nur stroke-dasharray hier (keine eigene "animation") - der Draw-Effekt
   wird in iconMorphIn/actionPopupIconPop mitanimiert (unten), weil ein
   Element pro Property nur EINE animation-Regel gewinnen kann und
   .icon-swap-in/.action-popup-icon dort ohnehin schon die animation
   setzen (gleiche Falle wie bei dialog-closing/row-removing weiter oben). */
.lucide-check {
    stroke-dasharray: 24;
}

/* ========== ACCENT COLOR SWATCH PICKER ========== */
.accent-swatch {
    appearance: none;
    border: 2px solid var(--border);
    background: var(--sw, #888);
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    padding: 0;
    position: relative;
}
.accent-swatch:hover {
    transform: scale(1.06);
}
.accent-swatch.is-active {
    border-color: var(--foreground);
    box-shadow: 0 0 0 3px var(--background), 0 0 0 5px var(--sw);
}

/* Welcome ticker banner */
.welcome-ticker {
    overflow: hidden;
    white-space: nowrap;
    background: transparent;
    color: var(--color-foreground, currentColor);
    height: 2.25rem;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    user-select: none;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 38%, black 62%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 38%, black 62%, transparent 100%);
}

.welcome-ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 0;
    animation: ticker-scroll 30s linear infinite !important;
    animation-play-state: running !important;
    will-change: transform;
}

.welcome-ticker-track span {
    padding: 0 0.6rem;
}

.welcome-ticker-track span.separator {
    display: none;
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Kritischer Reset für Mobile */
html {
    width: 100%;
}

body {
    margin: 0;
    padding: 1.5rem;
    width: 100%;
    max-width: 100%;
    /* `clip` instead of `hidden` so we don't accidentally establish a scroll
       container, which would break `position: sticky` on descendants.
       `hidden` is kept as a fallback for browsers that don't yet support
       `clip`; both prevent the page from scrolling sideways. */
    overflow-x: hidden;
    overflow-x: clip;
    box-sizing: border-box;
    background-color: var(--background);
    background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
    background-size: 24px 24px;
    color: var(--foreground);
}

/* Globales Box-Sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* App-Container beschränken */
#app {
    max-width: 100%;
    /* `clip` keeps horizontal overflow contained without creating a scroll
       container, so `position: sticky` keeps working inside #app. `hidden`
       fallback for browsers without `clip` support. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* Sidebar nav fills full height; class list section grows and scrolls */
.sidebar nav {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sidebar nav > section:first-of-type {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Profile section: shrink to fit, don't share flex space, popover must escape clip */
.sidebar nav > section:last-of-type {
    flex: 0 0 auto;
    overflow: visible;
}

/* Sidebar auf Mobile ausblenden */
@media (max-width: 768px) {
    aside.sidebar {
        transform: translateX(-100%);
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        /* Above the sticky topbar (z-index: 40) so the off-canvas sidebar
           covers the topbar instead of slipping behind it on mobile. */
        z-index: 60;
        box-shadow: none !important;
    }

    aside.sidebar[aria-hidden="false"] {
        transform: translateX(0);
    }

    body {
        padding: 0.75rem !important;
    }

    .overflow-x-auto {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: auto;
    }

    .card {
        width: 100%;
        margin: 0.75rem 0;
        padding: 0.75rem;
    }

    main>div:first-child {
        flex-direction: column;
        align-items: stretch;
    }

    /* NEUES LAYOUT FÜR CARD HEADER AUF MOBILE */
    .card>header.flex.justify-between.items-center.mb-4 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        text-align: left !important;
    }

    /* Klassenname volle Breite */
    .card>header.flex.justify-between.items-center.mb-4 h2 {
        width: 100% !important;
        margin-bottom: 0 !important;
        font-size: 1.25rem !important;
    }

    /* Button-Container: volle Breite, Buttons nebeneinander */
    .card>header.flex.justify-between.items-center.mb-4>div.flex.gap-2 {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        margin: 0 !important;
    }

    /* Jeder Button nimmt exakt 50% der Breite */
    .card>header.flex.justify-between.items-center.mb-4>div.flex.gap-2 button {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: 0.875rem !important;
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Optional: Bei sehr kleinen Screens Text kürzen */
    @media (max-width: 360px) {
        .card>header.flex.justify-between.items-center.mb-4>div.flex.gap-2 button span {
            display: none;
        }

        .card>header.flex.justify-between.items-center.mb-4>div.flex.gap-2 button svg {
            margin: 0 auto !important;
        }
    }

    /* Class view: action buttons in 2x2 grid on mobile */
    #class-view .card > header .flex.flex-wrap.gap-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem !important;
    }

    /* Year selector: horizontally scrollable */
    #year-selector {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #year-selector::-webkit-scrollbar {
        display: none;
    }

    /* Truncate long year names */
    #year-selector [data-year-id] {
        max-width: 7rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* ========== TUTORIAL STYLES ========== */

/* Tutorial Container - höchster z-index */
.tutorial-container,
.tutorial-prompt {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}

/* Tutorial Overlay - dunkler Hintergrund */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    pointer-events: none;
    /* Klicks durchlassen */
}

/* Hervorgehobenes Element - MUSS klickbar sein */
.tutorial-spotlight,
button.tutorial-spotlight,
[data-add-grade].tutorial-spotlight,
[data-edit-grade].tutorial-spotlight,
#manage-categories.tutorial-spotlight,
#add-category.tutorial-spotlight,
#add-student.tutorial-spotlight,
#tab-percentage.tutorial-spotlight,
#tab-categories.tutorial-spotlight,
#tab-plusminus.tutorial-spotlight,
#tab-grade-direct.tutorial-spotlight,
#tab-grade-percent.tutorial-spotlight,
[role="tab"].tutorial-spotlight {
    position: relative !important;
    z-index: 10001 !important;
    border-radius: 8px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    outline: 4px solid #3b82f6 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 40px rgba(59, 130, 246, 0.5), 0 0 60px rgba(59, 130, 246, 0.3) !important;
    animation: tutorial-pulse 1s ease-in-out infinite !important;
}

/* Pulsierende Animation für Spotlight */
@keyframes tutorial-pulse {

    0%,
    100% {
        outline-width: 4px;
        outline-color: #3b82f6;
    }

    50% {
        outline-width: 6px;
        outline-color: #60a5fa;
    }
}

/* Dialoge während Tutorial müssen auch klickbar sein */
dialog[open] {
    z-index: 10001 !important;
}

/* Tutorial Dialog (für Prompt) */
.tutorial-dialog {
    z-index: 10002;
    background: var(--card, #1e1e2e);
    border: 1px solid var(--border, #2d2d3d);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 380px;
    width: calc(100vw - 2rem);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

/* Tutorial Floating Box - schwebt über allem, blockiert aber nichts */
.tutorial-floating-box {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 99999;
    max-width: 400px;
    width: calc(100vw - 3rem);
    pointer-events: none;
}

.tutorial-floating-box .tutorial-dialog-content {
    pointer-events: auto;
    background: var(--card, #1e1e2e);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px rgba(59, 130, 246, 0.2);
}

/* Legacy: Natives Tutorial Dialog (falls noch verwendet) */
.tutorial-native-dialog {
    position: fixed;
    top: auto;
    bottom: 1.5rem;
    right: 1.5rem;
    left: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    max-width: 400px;
    width: calc(100vw - 3rem);
}

.tutorial-native-dialog::backdrop {
    background: transparent;
    pointer-events: none;
}

.tutorial-native-dialog {
    pointer-events: none;
}

.tutorial-native-dialog .tutorial-dialog-content {
    pointer-events: auto;
}

.tutorial-native-dialog .tutorial-dialog-content {
    background: var(--card, #1e1e2e);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px rgba(59, 130, 246, 0.2);
}

/* Während Tutorial aktiv: Alle anderen Dialog-Backdrops transparent machen */
body.tutorial-active dialog:not(.tutorial-native-dialog)::backdrop {
    background: transparent !important;
}

.tutorial-step-dialog {
    z-index: 10002;
    pointer-events: auto;
}

/* Tutorial Progress Dots */
.tutorial-progress {
    display: flex;
    gap: 0.5rem;
}

.tutorial-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: oklch(.708 0 0 / 0.3);
    transition: background 0.2s ease;
}

.tutorial-progress-dot.active {
    background: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.tutorial-progress-dot.completed {
    background: #22c55e;
}

/* Dialoge während des Tutorials - mit .show() statt .showModal() geöffnet */
dialog.tutorial-open {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    margin: 0;
    border: 1px solid var(--border, #2d2d3d);
    border-radius: 12px;
    background: var(--card, #1e1e2e);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .tutorial-dialog {
        max-width: calc(100vw - 2rem);
        left: 1rem !important;
        right: 1rem !important;
    }

    .tutorial-native-dialog,
    .tutorial-floating-box {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        max-width: none;
    }

    .tutorial-spotlight {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.6) !important;
    }

    dialog.tutorial-open {
        width: calc(100vw - 2rem);
        max-width: none;
    }
}

/* ========== GRADE COLOR BADGES ========== */

/* Base grade badge styling */
.grade-badge {
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

/* Note 1 - Sehr Gut - Grün */
.grade-1 {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #22c55e !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.grade-1:hover {
    background-color: rgba(34, 197, 94, 0.25) !important;
}

/* Note 2 - Gut - Smaragdgrün */
.grade-2 {
    background-color: rgba(52, 211, 153, 0.12) !important;
    color: #34d399 !important;
    border-color: rgba(52, 211, 153, 0.25) !important;
}

.grade-2:hover {
    background-color: rgba(52, 211, 153, 0.22) !important;
}

/* Note 3 - Befriedigend - Gelb */
.grade-3 {
    background-color: rgba(234, 179, 8, 0.12) !important;
    color: #eab308 !important;
    border-color: rgba(234, 179, 8, 0.25) !important;
}

.grade-3:hover {
    background-color: rgba(234, 179, 8, 0.22) !important;
}

/* Note 4 - Genügend - Orange */
.grade-4 {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: #f97316 !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

.grade-4:hover {
    background-color: rgba(249, 115, 22, 0.25) !important;
}

/* Note 5 - Nicht Genügend - Rot */
.grade-5 {
    background-color: rgba(239, 68, 68, 0.18) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

.grade-5:hover {
    background-color: rgba(239, 68, 68, 0.28) !important;
}

/* Plus - Grün */
.grade-plus {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #22c55e !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.grade-plus:hover {
    background-color: rgba(34, 197, 94, 0.25) !important;
}

/* Neutral - Gelb/Orange */
.grade-neutral {
    background-color: rgba(234, 179, 8, 0.15) !important;
    color: #eab308 !important;
    border-color: rgba(234, 179, 8, 0.3) !important;
}

.grade-neutral:hover {
    background-color: rgba(234, 179, 8, 0.25) !important;
}

/* Minus - Rot */
.grade-minus {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.grade-minus:hover {
    background-color: rgba(239, 68, 68, 0.25) !important;
}

/* Light Mode Anpassungen */
html:not(.dark) .grade-1 {
    color: #16a34a !important;
}

html:not(.dark) .grade-2 {
    color: #059669 !important;
}

html:not(.dark) .grade-3 {
    color: #ca8a04 !important;
}

html:not(.dark) .grade-4 {
    color: #ea580c !important;
}

html:not(.dark) .grade-5 {
    color: #dc2626 !important;
}

html:not(.dark) .grade-plus {
    color: #16a34a !important;
}

html:not(.dark) .grade-neutral {
    color: #ca8a04 !important;
}

html:not(.dark) .grade-minus {
    color: #dc2626 !important;
}

/* ========== VIEW TRANSITION ANIMATIONS ========== */

/* Basis-Animation für Views */
#home-view,
#class-view {
    animation: viewFadeIn 0.3s ease-out;
}

@keyframes viewFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation beim Ausblenden (wird via JS hinzugefügt) */
.view-fade-out {
    animation: viewFadeOut 0.2s ease-in forwards;
}

@keyframes viewFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ========== TAB PANEL ANIMATIONS ========== */

/* Tab Panel Basis */
[role="tabpanel"] {
    animation: tabFadeIn 0.2s ease-out;
}

[role="tabpanel"]:not([hidden]) {
    animation: tabFadeIn 0.2s ease-out;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab-Button Übergang */
[role="tab"] {
    transition: all 0.2s ease;
    position: relative;
}

[role="tab"][aria-selected="true"] {
    transition: all 0.2s ease;
}

/* Tab-Indikator Animation */
.tabs nav {
    position: relative;
}

/* Sanfter Hover-Effekt für Tabs */
[role="tab"]:hover:not([aria-selected="true"]) {
    background-color: rgba(255, 255, 255, 0.05);
}

html:not(.dark) [role="tab"]:hover:not([aria-selected="true"]) {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Tab aktiv Animation */
[role="tab"][aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    animation: tabIndicator 0.2s ease-out;
}

@keyframes tabIndicator {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* ========== DIALOG ANIMATIONS ========== */

/* Dialog öffnen Animation */
dialog[open] {
    animation: dialogOpen 0.25s ease-out;
}

dialog[open]::backdrop {
    animation: backdropFadeIn 0.25s ease-out;
}

@keyframes dialogOpen {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes backdropFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ========== CARD & LIST ANIMATIONS ========== */

/* Klassen-Liste Animation */
#class-list>div {
    animation: listItemFadeIn 0.2s ease-out;
    animation-fill-mode: both;
}

#class-list>div:nth-child(1) {
    animation-delay: 0.02s;
}

#class-list>div:nth-child(2) {
    animation-delay: 0.04s;
}

#class-list>div:nth-child(3) {
    animation-delay: 0.06s;
}

#class-list>div:nth-child(4) {
    animation-delay: 0.08s;
}

#class-list>div:nth-child(5) {
    animation-delay: 0.1s;
}

@keyframes listItemFadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Tabellen-Zeilen Animation */
#students-table tr {
    animation: tableRowFadeIn 0.2s ease-out;
    animation-fill-mode: both;
}

#students-table tr:nth-child(1) {
    animation-delay: 0.02s;
}

#students-table tr:nth-child(2) {
    animation-delay: 0.04s;
}

#students-table tr:nth-child(3) {
    animation-delay: 0.06s;
}

#students-table tr:nth-child(4) {
    animation-delay: 0.08s;
}

#students-table tr:nth-child(5) {
    animation-delay: 0.1s;
}

#students-table tr:nth-child(6) {
    animation-delay: 0.12s;
}

#students-table tr:nth-child(7) {
    animation-delay: 0.14s;
}

#students-table tr:nth-child(8) {
    animation-delay: 0.16s;
}

#students-table tr:nth-child(9) {
    animation-delay: 0.18s;
}

#students-table tr:nth-child(10) {
    animation-delay: 0.2s;
}

@keyframes tableRowFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Grade Badge Animation */
.grade-badge {
    transition: all 0.15s ease;
}

.grade-badge:hover {
    transform: scale(1.05);
}

/* Button Hover Animationen */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-destructive,
.btn-icon {
    transition: all 0.15s ease;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.btn-destructive:hover {
    transform: translateY(-1px);
}

.btn-icon:hover {
    transform: scale(1.1);
}

/* Card Hover Animation */
[data-goto-class] {
    transition: all 0.2s ease;
}

[data-goto-class]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========== ANIMATION FOUNDATION (Dialog close, Wizard, Icons, Rows) ========== */

/* Dialog schließen (Gegenstück zu dialogOpen/backdropFadeIn)
   Braucht "dialog[open]" im Selektor, sonst gewinnt die gleich/höher
   spezifische dialog[open]-Regel (Zeile ~742) den Cascade-Kampf um die
   animation-Property und unsere Schließen-Animation greift nie. */
dialog[open].dialog-closing {
    animation: dialogClose 0.15s ease-in forwards;
}

dialog[open].dialog-closing::backdrop {
    animation: backdropFadeOut 0.15s ease-in forwards;
}

@keyframes dialogClose {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
}

@keyframes backdropFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Wizard-Schritt Übergang (edit-dialog Formular-Inhalt) */
.wizard-step-out {
    animation: wizardSlideOut 0.12s ease-in forwards;
}

.wizard-step-in {
    animation: wizardSlideIn 0.15s ease-out;
}

@keyframes wizardSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-16px);
    }
}

@keyframes wizardSlideIn {
    from {
        opacity: 0;
        transform: translateX(16px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Wizard Live-Vorschau (Text-Crossfade statt Icon-Morph) */
.wizard-preview-update {
    animation: previewFade 0.15s ease-out;
}

@keyframes previewFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Zeile entfernen (vor tatsächlichem Löschen aus den Daten)
   Braucht die #students-table/#class-list Präfixe, sonst gewinnt die
   bestehende ID-Regel (Zeile ~813/775) den Cascade-Kampf um die
   animation-Property und die Animation greift nie. */
.row-removing,
#students-table tr.row-removing,
#class-list>div.row-removing {
    /* Kein max-height/padding-Collapse: <tr>-Elemente respektieren das
       unzuverlässig über Browser hinweg - reine Fade+Slide-Animation
       funktioniert gleich gut für <tr> und <div>-Karten. */
    animation: rowFadeOut 0.2s ease-in forwards;
}

@keyframes rowFadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-8px);
    }
}

/* Neue Zeile hervorheben (gleiches Spezifitäts-Problem wie oben) */
.row-added,
#students-table tr.row-added,
#class-list>div.row-added {
    animation: rowHighlightIn 0.9s ease-out;
}

@keyframes rowHighlightIn {
    from {
        background-color: color-mix(in srgb, var(--primary) 15%, transparent);
    }

    to {
        background-color: transparent;
    }
}

/* Icon-Morph (z.B. Stift -> Häkchen bei erfolgreichem Speichern) */
.icon-swap-out {
    animation: iconMorphOut 0.25s ease-in forwards;
}

.icon-swap-in {
    animation: iconMorphIn 0.35s ease-out;
}

@keyframes iconMorphOut {
    from {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    to {
        opacity: 0;
        transform: scale(0.5) rotate(-15deg);
    }
}

@keyframes iconMorphIn {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(15deg);
        stroke-dashoffset: 24; /* no-op unless stroke-dasharray is set, e.g. .lucide-check */
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        stroke-dashoffset: 0;
    }
}

/* Icon-Shake (destruktive Aktion bestätigt, z.B. Löschen-Klick) */
.icon-shake {
    animation: iconShake 0.35s ease-in-out;
}

@keyframes iconShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-2px);
    }

    40%,
    80% {
        transform: translateX(2px);
    }
}

/* Button-Press Feedback (delegiert via eventListeners.js) */
.btn-press {
    animation: btnPress 0.15s ease-out;
}

@keyframes btnPress {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.92);
    }

    100% {
        transform: scale(1);
    }
}

/* Aktions-Erfolgs-Popup (ersetzt Basecoat-Toast) - zentrierte Karte mit
   animiertem Icon + Label, ersetzt sich selbst bei schnell aufeinander
   folgenden Aktionen statt zu stapeln. */
#action-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    min-width: 10rem;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    text-align: center;
}

.action-popup-label {
    color: var(--foreground);
    font-size: 0.95rem;
    font-weight: 500;
}

.action-popup-in {
    animation: actionPopupIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.action-popup-out {
    animation: actionPopupOut 0.25s ease-in forwards;
}

.action-popup-icon {
    /* Overrides .lucide's 1.2rem default - this icon is the popup's focal point */
    width: 40px;
    height: 40px;
    animation: actionPopupIconPop 0.4s ease-out;
}

@keyframes actionPopupIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.85);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes actionPopupOut {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
}

@keyframes actionPopupIconPop {
    0% {
        transform: scale(0);
        stroke-dashoffset: 24; /* no-op unless stroke-dasharray is set, e.g. .lucide-check */
    }

    60% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
        stroke-dashoffset: 0;
    }
}

/* ========== REDUCED MOTION ========== */
/* Respektiere Benutzer-Präferenz für reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== STUDENT DETAIL VIEW STYLES ========== */

/* Klickbarer Schüler-Name */
.student-name-link {
    cursor: pointer;
    color: inherit;
    transition: all 0.15s ease;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    border-radius: 0.375rem;
    display: inline-block;
}

.student-name-link:hover {
    color: var(--primary);
    background-color: var(--primary-soft);
}

/* Stat Cards im Student Detail View */
.stat-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

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

/* Category Stat Cards */
.category-stat-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.category-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Chart Container */
.chart-container {
    background-color: var(--card);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border);
}

/* Student Detail View Animation */
#student-detail-view {
    animation: viewFadeIn 0.3s ease-out;
}

/* Mobile Responsive für Student Detail */
@media (max-width: 768px) {
    #student-detail-view .grid.grid-cols-2.md\\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }

    #student-detail-view .stat-card {
        padding: 0.75rem;
    }

    #student-detail-view .stat-card p.text-2xl {
        font-size: 1.25rem;
    }

    .chart-container {
        height: 250px !important;
    }

    #student-detail-view header.flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    #student-detail-view header .flex.items-center.gap-3 {
        width: 100%;
        flex-wrap: wrap;
    }

    #student-detail-view #student-detail-name {
        font-size: 1.125rem;
    }

    /* Category Breakdown auf Mobile */
    #category-breakdown {
        grid-template-columns: 1fr !important;
    }

    /* Grades Table auf Mobile - horizontal scrollbar */
    #student-detail-view .overflow-x-auto {
        margin: 0 -0.75rem;
        padding: 0 0.75rem;
    }
}

/* Kleine Bildschirme - 5. Stat-Karte auf volle Breite */
@media (max-width: 640px) {
    #student-detail-view .grid.grid-cols-2.md\\:grid-cols-5>div:nth-child(5) {
        grid-column: span 2;
    }
}

/* ========== TABLE ROW HOVER EFFECTS ========== */

/* Students table row hover - Dark Mode */
#students-table tr {
    transition: all 0.15s ease;
    cursor: pointer;
}

#students-table tr:hover {
    background-color: var(--primary-soft) !important;
    transform: translateX(2px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Grade table row hover in student detail view */
#student-grades-table tr {
    transition: all 0.15s ease;
}

#student-grades-table tr:hover {
    background-color: var(--primary-soft) !important;
}

/* Alternating row colors for better readability */
#students-table tr:nth-child(even) {
    background-color: var(--muted);
}

#students-table tr:nth-child(even):hover {
    background-color: var(--primary-soft) !important;
}

/* Highlight student name link on row hover */
#students-table tr:hover .student-name-link {
    color: var(--primary);
    font-weight: 500;
}

/* ========== LIGHT MODE COLOR ADJUSTMENTS ========== */

/* ========== TOKENIZED BUTTON STYLES ========== */
/* Outline-first design: .btn-primary defaults to a tonal/soft look so colored
   buttons don't shout in dense table rows. Use .btn-primary.is-cta for the
   single primary CTA per dialog/view. */

.btn-primary {
    background-color: var(--primary-soft) !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary-soft-strong) !important;
}

.btn-primary:hover {
    background-color: var(--primary-soft-strong) !important;
    border-color: var(--primary) !important;
}

.btn-primary:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Solid filled variant — reserved for the dominant CTA per screen. */
.btn-primary.is-cta,
.btn-cta {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border: 1px solid var(--primary) !important;
}

.btn-primary.is-cta:hover,
.btn-cta:hover {
    filter: brightness(0.95);
}

/* Destructive — softened tonal in both modes */
.btn-destructive {
    background-color: color-mix(in srgb, var(--destructive) 10%, transparent) !important;
    color: var(--destructive) !important;
    border: 1px solid color-mix(in srgb, var(--destructive) 25%, transparent) !important;
}

.btn-destructive:hover {
    background-color: color-mix(in srgb, var(--destructive) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--destructive) 40%, transparent) !important;
}

/* .btn-icon.btn-destructive — matches edit icon style; see DELETE ICON BUTTONS below */

/* Secondary & outline tonal */
.btn-secondary {
    background-color: var(--muted) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--border) !important;
}

.btn-secondary:hover {
    background-color: var(--secondary) !important;
    border-color: var(--muted-foreground) !important;
}

.btn-outline {
    background-color: transparent !important;
    color: var(--foreground) !important;
    border: 1px solid var(--border) !important;
}

.btn-outline:hover {
    background-color: var(--muted) !important;
    border-color: var(--muted-foreground) !important;
}

/* Pending grade styling */
.pending-grade {
    background-color: rgba(251, 191, 36, 0.1);
    border-left: 3px solid rgba(251, 191, 36, 0.5);
}

html.dark .pending-grade {
    background-color: rgba(251, 191, 36, 0.05);
    border-left: 3px solid rgba(251, 191, 36, 0.3);
}

/* ============ Anwesenheits-Dialog ============ */

.attendance-student-card {
  position: relative;
}

.attendance-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.attendance-initials {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.attendance-status-btn {
  min-width: 40px;
  min-height: 40px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark Mode Avatar */
html.dark .attendance-avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Attendance Warning/Critical Row Styles */
.attendance-critical-row {
  background-color: rgba(239, 68, 68, 0.08) !important;
  border-left: 3px solid #ef4444;
}

.attendance-warning-row {
  background-color: rgba(245, 158, 11, 0.06) !important;
  border-left: 3px solid #f59e0b;
}

html.dark .attendance-critical-row {
  background-color: rgba(239, 68, 68, 0.12) !important;
}

html.dark .attendance-warning-row {
  background-color: rgba(245, 158, 11, 0.1) !important;
}
/* ===== STUDENTS TABLE HEADER ===== */
table:has(#students-table) thead tr {
    background-color: oklch(.95 0 0) !important;
}
html.dark table:has(#students-table) thead tr {
    background-color: oklch(.28 0 0) !important;
}

/* ===== ADAPTIVE COLUMN VISIBILITY ===== */
/* Class view: hide average + weighted when category filter is active */
table.category-filtered th:nth-child(6),
table.category-filtered td:nth-child(6),
table.category-filtered th:nth-child(7),
table.category-filtered td:nth-child(7) {
    display: none;
}
/* Student detail grades table: hide category column when all grades share the same category */
table.single-category th:nth-child(2),
table.single-category td:nth-child(2) {
    display: none;
}

/* ===== SORTABLE TABLE HEADERS ===== */
.sortable-header:hover {
    background-color: oklch(.708 0 0 / 0.05);
}
.sort-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.sortable-header.sort-asc .sort-icon,
.sortable-header.sort-desc .sort-icon { opacity: 1 !important; }

/* Settings tabs: keep all four on one horizontal row on small screens.
   `flex-nowrap` plus a horizontal scroll fallback ensures the tab strip
   never breaks into a second line, which looks broken on phones. */
.settings-tabs-nav {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
@media (max-width: 768px) {
    .settings-tabs-nav button[role="tab"] {
        flex: 0 0 auto;
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
    }
}

/* On mobile we always compact the student table: only the essentials fit on
   a 360px viewport. The user can still toggle compact off, but the *minimum*
   compaction kicks in automatically below 768px so the table never forces a
   horizontal scroll wider than the surrounding card. */
@media (max-width: 768px) {
    table.table .compact-hide {
        display: none !important;
    }
    table.table tbody td,
    table.table thead th {
        padding: 0.25rem 0.4rem !important;
        font-size: 0.78rem !important;
        line-height: 1.15rem !important;
    }
    /* Year-overview column is purely informational — drop it entirely on
       narrow screens; users can still see it in the student detail view. */
    table.table thead th:nth-last-child(2),
    table.table tbody tr td:nth-last-child(2) {
        display: none;
    }
    /* Section wrapping the table must scroll on its own, not the whole page,
       so swiping horizontally on the table doesn't shove the layout. */
    section.overflow-x-auto {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .card {
        min-width: 0;
        max-width: 100%;
    }
}

/* ===== COMPACT TABLE MODE ===== */
.compact-table tbody td,
.compact-table thead th {
    padding: 0.1rem 0.4rem !important;
    font-size: 0.8rem !important;
    line-height: 1.2rem !important;
}
.compact-table .compact-hide {
    display: none;
}
/* Also hide compact-hide cells in tbody when compact mode is on */
.compact-table tbody tr td:nth-child(4) {
    display: none;
}
/* Shrink action buttons in compact mode */
.compact-table .btn-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    padding: 0.1rem !important;
}
.compact-table .btn-icon svg {
    width: 13px !important;
    height: 13px !important;
}

/* ===== COMPACT DETAIL VIEW ===== */
#student-detail-view.compact-detail > .card > section {
    padding: 0.75rem !important;
}
#student-detail-view.compact-detail .stat-card {
    padding: 0.375rem 0.625rem !important;
}
#student-detail-view.compact-detail .stat-card .text-2xl {
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
}
#student-detail-view.compact-detail .stat-card p:first-child {
    font-size: 0.65rem !important;
    margin-bottom: 0 !important;
}
#student-detail-view.compact-detail .grid.gap-4 {
    gap: 0.375rem !important;
}
#student-detail-view.compact-detail .mb-6 {
    margin-bottom: 0.5rem !important;
}
#student-detail-view.compact-detail .collapsible-content {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* ===== ATTENDANCE VIEW ===== */
.att-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.att-calendar-panel {
    flex-shrink: 0;
    width: 288px;
}
.att-students-panel {
    flex: 1;
    min-width: 0;
}
@media (max-width: 768px) {
    .att-layout { flex-direction: column; }
    .att-calendar-panel { width: 100%; }
}

/* Calendar */
.att-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.att-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: oklch(.556 0 0);
    margin-bottom: 0.25rem;
    letter-spacing: 0.03em;
}
.att-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.att-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 2px 3px;
    border-radius: 6px;
    cursor: pointer;
    min-height: 42px;
    border: 1.5px solid transparent;
    transition: background-color 0.1s;
    font-size: 0.8rem;
    user-select: none;
}
.att-day:hover:not(.att-day-other) {
    background-color: oklch(.708 0 0 / 0.12);
}
.att-day.att-day-other {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}
.att-day.att-day-today {
    border-color: oklch(.585 .217 258.1);
    font-weight: 700;
}
.att-day.att-day-selected {
    background-color: oklch(.585 .217 258.1);
    color: white;
    font-weight: 700;
    border-color: transparent;
}
.att-day.att-day-selected:hover {
    background-color: oklch(.5 .2 258.1);
}
.att-day-num { line-height: 1.1; }
.att-day-dots {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2px;
}
.att-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.att-dot-present { background-color: #10b981; }
.att-dot-late    { background-color: #f59e0b; }
.att-dot-absent  { background-color: #ef4444; }
.att-dot-grade   { background-color: #ffffff; box-shadow: 0 0 0 1px oklch(.708 0 0 / 0.3); }

.att-legend {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid oklch(.708 0 0 / 0.15);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.att-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: oklch(.556 0 0);
}

/* Student rows */
.att-student-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.att-date-label {
    font-size: 0.875rem;
    font-weight: 600;
}
.att-date-sub {
    font-size: 0.7rem;
    color: oklch(.556 0 0);
    margin-top: 1px;
}
.att-quick-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.att-quick-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid oklch(.708 0 0 / 0.2);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    color: inherit;
    transition: background-color 0.1s;
}
.att-quick-btn:hover { background-color: oklch(.708 0 0 / 0.1); }
.att-quick-btn.all-present:hover { background-color: #10b98120; border-color: #10b981; color: #10b981; }
.att-quick-btn.all-absent:hover  { background-color: #ef444420; border-color: #ef4444; color: #ef4444; }

.att-students-panel > .card {
    max-height: calc(100vh - 220px);
    display: flex;
    flex-direction: column;
}
.att-students-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* critical: allows flex child to scroll instead of expanding */
}
.att-student-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    transition: background-color 0.1s;
}
.att-student-row:hover { background-color: oklch(.708 0 0 / 0.06); }
.att-initials-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: oklch(.585 .217 258.1 / 0.15);
    color: oklch(.585 .217 258.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}
.att-student-name {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.att-seg {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid oklch(.708 0 0 / 0.2);
    flex-shrink: 0;
}
.att-seg-btn {
    padding: 7px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    background: transparent;
    cursor: pointer;
    color: oklch(.556 0 0);
    display: flex;
    align-items: center;
    gap: 3px;
    transition: background-color 0.1s, color 0.1s;
    white-space: nowrap;
    min-height: 34px;
}
.att-seg-btn:not(:last-child) { border-right: 1px solid oklch(.708 0 0 / 0.2); }
.att-seg-btn.sel-present { background: #10b981; color: #fff; }
.att-seg-btn.sel-late    { background: #f59e0b; color: #fff; }
.att-seg-btn.sel-absent  { background: #ef4444; color: #fff; }

.att-note-inline {
    flex: 1;
    min-width: 80px;
    max-width: 220px;
    font-size: 0.75rem;
    padding: 0 8px;
    height: 34px;
    border-radius: 5px;
    border: 1px solid oklch(.708 0 0 / 0.15);
    background: transparent;
    color: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.att-note-inline:focus {
    border-color: oklch(.585 .217 258.1 / 0.5);
}
.att-note-inline:not(:placeholder-shown) {
    border-color: oklch(.708 0 0 / 0.3);
}
.att-no-date-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: oklch(.556 0 0);
    gap: 0.5rem;
    padding: 3rem 1rem;
    text-align: center;
}
.att-save-footer {
    flex-shrink: 0;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid oklch(.708 0 0 / 0.15);
    background: var(--card);
    position: sticky;
    bottom: 0;
    z-index: 1;
}

/* ===== TREND BADGE ===== */
.trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 9999px;
    margin-left: 0.25rem;
    vertical-align: middle;
}
.trend-badge.declining {
    background: rgba(239,68,68,0.12);
    color: #dc2626;
    border: 1px solid rgba(239,68,68,0.25);
}
html.dark .trend-badge.declining {
    background: rgba(239,68,68,0.18);
    color: #f87171;
}

/* ===== OFFLINE INDICATOR ===== */
html.dark #offline-indicator {
    background: rgba(161,107,7,0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(251,191,36,0.25) !important;
}

/* ===== COMPACT TOGGLE ACTIVE STATE ===== */
#compact-view-toggle.active {
    background-color: oklch(.708 0 0 / 0.1);
}

/* ===== DELETE ICON BUTTONS ===== */
/* Match neighbor edit/icon buttons exactly — only the icon color is red. */
.btn-icon.btn-destructive {
    background-color: var(--muted) !important;
    border: 1px solid var(--border) !important;
    color: var(--destructive) !important;
    opacity: 1 !important;
}
.btn-icon.btn-destructive:hover {
    background-color: color-mix(in srgb, var(--destructive) 12%, var(--muted)) !important;
    border-color: color-mix(in srgb, var(--destructive) 30%, var(--border)) !important;
    color: var(--destructive) !important;
}

/* ===== HOME VIEW: CLASS CARD CLICK AFFORDANCE ===== */
[data-goto-class] {
    transition: all 0.2s ease, box-shadow 0.2s ease;
}
[data-goto-class]:hover .class-card-chevron {
    transform: translateX(3px);
    opacity: 1;
}
.class-card-chevron {
    opacity: 0.4;
    transition: transform 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}

/* ===== QUICK STUDENT SIDEBAR ===== */
:root {
    --qsb-width: 28rem;
}

.qsb-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: var(--qsb-width);
    background: var(--card);
    border-left: 1px solid var(--border);
    box-shadow: -6px 0 32px rgba(0,0,0,0.10);
    z-index: 100;
    display: none;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.qsb-panel.open {
    transform: translateX(0);
}

.qsb-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.qsb-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

main {
    transition: margin-right 0.3s ease;
}

main.qsb-open {
    margin-right: var(--qsb-width);
}

.qsb-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.qsb-stat-card {
    background: var(--muted);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
}

.qsb-stat-label {
    font-size: 0.72rem;
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.qsb-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

.qsb-section-title {
    font-size: 0.72rem;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 1rem 0 0.4rem;
}

@media (max-width: 768px) {
    .qsb-panel {
        width: 100%;
    }
    main.qsb-open {
        margin-right: 0;
    }
}

/* ===== MOBILE FIXES ===== */
@media (max-width: 768px) {

    /* 0. Fixed top bar on mobile (below sidebar z-index:40) */
    #main-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        background: var(--background);
        padding: 0.75rem 0.75rem 0.5rem;
    }

    /* Offset main content so fixed topbar doesn't cover it */
    main {
        padding-top: 3.75rem;
    }

    /* 1. Class-view action buttons: prevent overflow, hide kbd shortcuts */
    #class-view .card > header .flex.flex-wrap.gap-2 button {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }
    #class-view .card > header kbd,
    #back-to-class kbd {
        display: none;
    }

    /* 2. Filter bar: search on own row, selects share second row */
    section:has(#search-students) {
        flex-wrap: wrap;
    }
    #search-students {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    #filter-category,
    #filter-attendance {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* 3. Hide "Powered by" footer on mobile */
    footer.fixed.bottom-0 {
        display: none !important;
    }

    /* 4. Student detail header: wrap action row, icon-only print button */
    #student-detail-view header > .flex.gap-2.items-center {
        flex-wrap: wrap;
    }
    #student-detail-print span,
    #student-detail-view header kbd {
        display: none;
    }
    #student-detail-print {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    #student-detail-view section.p-7 {
        padding: 1rem !important;
    }

    /* 5. Grade history table: ensure scroll container works inside collapsible */
    #student-detail-view .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #student-grades-table,
    #student-detail-view .overflow-x-auto table {
        min-width: 480px;
    }

    /* 6. Mobile: show only last name, first name, actions — hide all other columns */
    #students-table td:nth-child(1),
    #students-table td:nth-child(4),
    #students-table td:nth-child(5),
    #students-table td:nth-child(6),
    #students-table td:nth-child(7),
    #students-table td:nth-child(8),
    table:has(#students-table) thead th:nth-child(1),
    table:has(#students-table) thead th:nth-child(4),
    table:has(#students-table) thead th:nth-child(5),
    table:has(#students-table) thead th:nth-child(6),
    table:has(#students-table) thead th:nth-child(7),
    table:has(#students-table) thead th:nth-child(8) {
        display: none;
    }

    /* Mobile: smaller row height */
    table:has(#students-table) thead th,
    #students-table td {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }

    /* 7. Mobile: smaller action buttons */
    #students-table td:last-child {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.15rem;
        align-items: center;
    }
    #students-table td:last-child .btn-icon {
        width: 1.75rem !important;
        height: 1.75rem !important;
        padding: 0.2rem !important;
    }
    #students-table td:last-child .btn-icon svg {
        width: 14px !important;
        height: 14px !important;
    }
    #students-table td:last-child [data-add-grade] { order: 1; }
    #students-table td:last-child [data-view-student] { order: 2; }
    #students-table td:last-child [data-edit-student] { order: 3; }
    #students-table td:last-child [data-delete-student] { order: 4; }
}

/* Class Exam Mode overlay */
#class-exam-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--background, #0f0f1a);
    display: none;
    flex-direction: column;
    overflow: hidden;
}
#class-exam-overlay.active { display: flex; animation: backdropFadeIn 0.2s ease-out; }

/* Mobile: leave room for bottom nav (always visible) */
@media (max-width: 768px) {
    #class-exam-overlay {
        bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }
    #mobile-bottom-nav {
        z-index: 110 !important;
    }
}

/* Desktop: dialog window with backdrop */
@media (min-width: 768px) {
    #class-exam-overlay {
        background: rgba(0, 0, 0, 0.55);
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }
    #class-exam-overlay > div {
        background: var(--background, #0f0f1a);
        border: 1px solid var(--border, #2d2d3d);
        border-radius: 1rem;
        max-width: 640px;
        width: 100%;
        max-height: 85vh;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
        overflow: hidden;
    }
}

/* ── Generic swipe-row (iOS Mail style) ──────────────────────────────── */
.swipe-row {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    isolation: isolate;
}
.swipe-action {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    z-index: 1;
    transition: filter 0.15s;
}
.swipe-action svg { width: 22px; height: 22px; }
.swipe-action-left  { left: 0;  background: #3b82f6; border-radius: 0.75rem 0 0 0.75rem; }
.swipe-action-right { right: 0; background: #ef4444; border-radius: 0 0.75rem 0.75rem 0; }
.swipe-action:active,
.swipe-action:hover { filter: brightness(1.1); }

.swipe-content {
    position: relative;
    z-index: 2;
    background: var(--card, #1e1e2e);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    touch-action: pan-y;
    user-select: none;
}
.swipe-content.dragging {
    transition: none;
}

/* Exam overview card-specific tweaks */
.class-exam-overview-card {
    transition: border-color 0.15s;
}
.class-exam-overview-card:hover,
.class-exam-overview-card:focus-visible {
    border-color: var(--primary, #6366f1) !important;
    outline: none;
}

/* When a btn-block is wrapped in a swipe-row, ensure radius + spacing */
.swipe-row .btn-block {
    border-radius: 0.75rem !important;
    margin: 0 !important;
    touch-action: pan-y;
}
.swipe-row + .swipe-row { margin-top: 0; }

/* Empty state for overview */
.class-exam-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1rem;
    gap: 0.75rem;
    color: var(--muted-foreground, #9ca3af);
}
.class-exam-empty-plus {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    border: 2px dashed var(--border, #2d2d3d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary, #6366f1);
    margin-bottom: 0.5rem;
}

.class-exam-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border, #2d2d3d);
    flex-shrink: 0;
}
.class-exam-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.class-exam-progress {
    font-size: 0.875rem;
    color: oklch(.556 0 0);
}
.class-exam-progress-bar {
    height: 4px;
    background: var(--border, #2d2d3d);
    border-radius: 2px;
    overflow: hidden;
    flex: 1;
}
.class-exam-progress-bar-fill {
    height: 100%;
    background: var(--primary, #6d28d9);
    border-radius: 2px;
    transition: width 0.2s ease;
}
.class-exam-student-name {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem 0;
}
.class-exam-grade-btns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}
.class-exam-grade-btn {
    aspect-ratio: 1;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 0.75rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.class-exam-grade-btn:active { transform: scale(0.93); }
.class-exam-grade-btn.g1 { background: rgba(34,197,94,0.15); color: #22c55e; border-color: rgba(34,197,94,0.3); }
.class-exam-grade-btn.g2 { background: rgba(59,130,246,0.15); color: #3b82f6; border-color: rgba(59,130,246,0.3); }
.class-exam-grade-btn.g3 { background: rgba(234,179,8,0.15); color: #eab308; border-color: rgba(234,179,8,0.3); }
.class-exam-grade-btn.g4 { background: rgba(249,115,22,0.15); color: #f97316; border-color: rgba(249,115,22,0.3); }
.class-exam-grade-btn.g5 { background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.3); }
.class-exam-setup-inner {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.class-exam-entry-controls {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.class-exam-absent-btn {
    width: 100%;
    padding: 0.875rem;
    font-size: 1rem;
    border-radius: 0.75rem;
    border: 2px dashed var(--border, #2d2d3d);
    background: transparent;
    color: oklch(.556 0 0);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.class-exam-absent-btn:hover { background: var(--muted, #1e1e2e); color: var(--foreground); }
.class-exam-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border, #2d2d3d);
    font-size: 0.9rem;
}
.class-exam-summary-row:last-child { border-bottom: none; }
.exam-grade-badge {
    display: inline-block;
    min-width: 2rem;
    text-align: center;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}
.exam-absent-label {
    color: oklch(.556 0 0);
    font-style: italic;
    font-size: 0.85rem;
}
.class-exam-note-field {
    resize: none;
    font-size: 0.9rem;
    background: var(--input, #1e1e2e);
    border: 1px solid var(--border, #2d2d3d);
    border-radius: 0.5rem;
    color: var(--foreground, #e2e8f0);
    padding: 0.5rem 0.75rem;
    width: 100%;
    font-family: inherit;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.15s;
}
.class-exam-note-field:focus {
    border-color: var(--primary, #6d28d9);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #6d28d9) 20%, transparent);
}
.class-exam-note-field::placeholder {
    color: oklch(.556 0 0);
}
.exam-summary-note {
    display: block;
    font-size: 0.75rem;
    color: oklch(.556 0 0);
    margin-top: 0.15rem;
    font-style: italic;
}

/* ── Recovery key dialog – theme-aware boxes ──────────────────────── */
.recovery-key-box {
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.75rem;
}

.recovery-warning-box {
    background: oklch(0.95 0.05 75);
    border: 1px solid oklch(0.78 0.1 75);
    border-radius: 0.375rem;
    padding: 0.75rem;
}
.recovery-warning-box p {
    color: oklch(0.42 0.1 55);
}
html.dark .recovery-warning-box {
    background: oklch(0.35 0.1 55 / 0.2);
    border-color: oklch(0.55 0.1 55);
}
html.dark .recovery-warning-box p {
    color: oklch(0.85 0.1 75);
}

.recovery-danger-box {
    background: oklch(0.95 0.03 20);
    border: 1px solid oklch(0.75 0.1 20);
    border-radius: 0.375rem;
    padding: 0.75rem;
}
.recovery-danger-box p {
    color: oklch(0.38 0.15 20);
}
html.dark .recovery-danger-box {
    background: oklch(0.25 0.08 20 / 0.5);
    border-color: oklch(0.55 0.15 20);
}
html.dark .recovery-danger-box p {
    color: oklch(0.9 0.12 20);
}

/* ========== VERHALTENSPROTOKOLL ========== */
.behavior-positive { --behavior-color: #16a34a; --behavior-bg: rgba(34, 197, 94, 0.12); }
.behavior-neutral  { --behavior-color: #64748b; --behavior-bg: rgba(100, 116, 139, 0.14); }
.behavior-negative { --behavior-color: #dc2626; --behavior-bg: rgba(239, 68, 68, 0.12); }
html.dark .behavior-positive { --behavior-color: #4ade80; --behavior-bg: rgba(34, 197, 94, 0.16); }
html.dark .behavior-neutral  { --behavior-color: #cbd5e1; --behavior-bg: rgba(148, 163, 184, 0.16); }
html.dark .behavior-negative { --behavior-color: #f87171; --behavior-bg: rgba(239, 68, 68, 0.16); }

.behavior-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.behavior-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.125rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--behavior-color);
    background: var(--behavior-bg);
}
.behavior-badge .lucide {
    width: 0.9rem;
    height: 0.9rem;
}

.behavior-list {
    display: flex;
    flex-direction: column;
}
.behavior-entry {
    padding: 0.6rem 0;
    border-top: 1px solid var(--border);
}
.behavior-entry:first-child {
    border-top: 0;
}
.behavior-entry-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.behavior-entry-when {
    font-size: 0.8rem;
    color: var(--muted-foreground);
}
.behavior-entry-actions {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.behavior-note {
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Typ-Auswahl im Dialog: Radio-Buttons als farbige Kacheln */
.behavior-type-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
.behavior-type-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.5rem;
    border: 2px solid var(--border);
    border-radius: 0.6rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.behavior-type-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.behavior-type-option:has(input:checked) {
    border-color: var(--behavior-color);
    background: var(--behavior-bg);
    color: var(--behavior-color);
}
.behavior-type-option:has(input:focus-visible) {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}
/* Schmale Dialoge: Icon über dem Text, sonst passt "Negativ" nicht in die Kachel */
@media (max-width: 480px) {
    .behavior-type-option {
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.45rem 0.25rem;
        font-size: 0.8rem;
    }
}

/* ========== APP-DOWNLOAD-DIALOG ========== */
.app-dl-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.app-dl-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 0.75rem;
    border: 2px solid var(--border);
    border-radius: 0.75rem;
    background: transparent;
    color: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.app-dl-option:hover {
    border-color: var(--primary);
}
.app-dl-option[aria-pressed="true"] {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.app-dl-option .lucide {
    width: 1.75rem;
    height: 1.75rem;
}
.app-dl-option-name {
    font-weight: 700;
}
.app-dl-option-sub {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}
/* iOS: ausgegraut + Schloss, bleibt aber klickbar (zeigt den Spendenlink) */
.app-dl-option.is-locked {
    border-style: dashed;
    opacity: 0.55;
    filter: grayscale(1);
}
.app-dl-option.is-locked:hover,
.app-dl-option.is-locked[aria-pressed="true"] {
    border-color: var(--muted-foreground);
    background: var(--muted);
    opacity: 0.8;
}

.app-dl-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    text-align: center;
}
.app-dl-panel[hidden] {
    display: none;
}
/* QR-Codes brauchen hellen Hintergrund, auch im Dark Mode */
.app-dl-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 216px;
    height: 216px;
    padding: 8px;
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid var(--border);
}
.app-dl-qr img {
    width: 200px;
    height: 200px;
}

/* ========== SPENDEN-HINWEIS ========== */
.donate-prompt-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}
.donate-prompt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.14);
}
.donate-prompt-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: center;
    line-height: 1.55;
}

/* ---- Developer announcements (announcement.js) ---- */
#announcement-dialog { --ann: #3b82f6; }
#announcement-dialog[data-level="alert"] { --ann: #f59e0b; }
#announcement-dialog[data-level="danger"] { --ann: #ef4444; }
#announcement-dialog > div { border-top: 4px solid var(--ann); }
.announcement-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}
.announcement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    color: var(--ann);
    background: color-mix(in srgb, var(--ann) 15%, transparent);
}
.announcement-body {
    text-align: center;
    white-space: pre-line;   /* keep the line breaks typed in announce.py */
    overflow-wrap: anywhere;
}
.btn-primary.announcement-ok { min-width: 8rem; }
#announcement-dialog[data-level="danger"] .announcement-ok { background: var(--ann); border-color: var(--ann); }