/* okto-druck.css — wie OktoWise auf Papier aussieht
 * ===========================================================================
 * WOZU: Schulen drucken. Klassenlisten für die Vertretung, den Stundenplan
 * fürs schwarze Brett, die Anwesenheitsliste für den Ausflug, die
 * Elternsprechtag-Einteilung für den Empfang. Bis zum 27.09.2026 gab es im
 * ganzen Projekt DREI Druckansichten (Zeugnis, Datenexport, eine Indexseite).
 * Alles andere druckte man mit dunklem Hintergrund, Seitenleiste und
 * Schaltflächen — oder tippte es ab.
 *
 * WIE: Diese Datei wird vom gemeinsamen Seitenrahmen (page_shell.php) auf
 * JEDER Seite geladen. Sie wirkt ausschließlich in @media print und ändert am
 * Bildschirm nichts. Dadurch druckt jede Ansicht brauchbar, auch die, an die
 * beim Schreiben niemand gedacht hat.
 *
 * GRUNDSÄTZE
 *   1. Papier ist weiß. Der dunkle Hintergrund wird nicht gedruckt — das
 *      spart Toner und ist lesbarer.
 *   2. Bedienelemente verschwinden. Ein Knopf auf Papier ist sinnlos.
 *   3. Nichts wird abgeschnitten. Tabellen dürfen umbrechen, Karten nicht
 *      mitten durch.
 *   4. Wer es später in der Hand hält, muss wissen, was er hat: Schulname,
 *      Titel und Datum stehen oben (siehe okto_druckbereich() in
 *      includes/components/page_shell.php).
 *
 * RECHTLICHER RAHMEN: Wie okto-darstellung.css — für Schulen als öffentliche
 * Stellen gelten BITV 2.0 und EN 301 549. Ein Ausdruck ist für manche die
 * einzige nutzbare Form; WCAG 1.4.3 (Kontrast) gilt auch auf Papier.
 * =========================================================================== */

/* Nur beim Drucken sichtbar — am Bildschirm weg. */
.nur-druck { display: none; }

@media print {

/* ---------------------------------------------------------------------------
 * 1. GRUNDFLÄCHE
 *
 * Browser drucken Hintergrundfarben standardmäßig nicht. Die Schrift bleibt
 * aber hell, wenn man sie nicht umstellt — das Ergebnis ist weiß auf weiß.
 * Deshalb wird hier alles ausdrücklich auf Schwarz-auf-Weiß gezogen.
 * ------------------------------------------------------------------------- */
:root {
    --text-muted: #444;
    --text-secondary: #333;
    --steam-border: #bbb;
}

html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    /* Auf Papier liest sich eine Serifenlose in kleiner Größe schlechter;
       die Systemschrift bleibt trotzdem, um Umbrüche nicht zu verschieben. */
}

body * {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: inherit;
}

/* Hellgraue Nebentexte sind auf dunklem Grund angenehm - auf weißem Papier
   verschwinden sie. Hier stehen die Klassen, die im Projekt dafür benutzt
   werden, ausdrücklich auf einem druckbaren Grau. (Beim ersten Blick auf das
   Druckbild war der Erklärsatz unter jeder Überschrift praktisch unsichtbar.)
   WCAG 1.4.3 gilt auch für den Ausdruck. */
.admin-hinweis, .text-muted, .muted, .hinweis, .form-hint, .help-text,
small, figcaption, .stat-label, .druck-schule, .druck-datum {
    color: #333 !important;
}

/* Flächen, die am Bildschirm dunkel sind, werden weiß. Bewusst breit
   gefasst: Neue Karten sollen ohne Nacharbeit richtig drucken. */
.admin-card, .ok-card, .card, .panel, .data-item, .stat-card,
.admin-content, .admin-layout, main, section, article {
    background: #fff !important;
    border-color: #ccc !important;
    color: #000 !important;
}

@page {
    margin: 16mm 14mm 18mm 14mm;
}

/* ---------------------------------------------------------------------------
 * 2. WAS NICHT AUFS PAPIER GEHÖRT
 *
 * Alles, was man anklicken würde. Die Liste nennt die Bausteine des Projekts
 * beim Namen; `.kein-druck` ist der Haken für alles Weitere.
 * ------------------------------------------------------------------------- */
.kein-druck,
.admin-sidebar, .sidebar-backdrop, .sidebar-toggle-btn, .mobile-menu-btn,
.app-header, .mobile-nav, .okto-suche, .nav-suche, .nav-leer,
.schnellzugriffe, .lage-aktion, .stat-pfeil,
button, .btn, .btn-primary, .btn-outline, .btn-secondary, .btn-danger,
input[type="button"], input[type="submit"], input[type="reset"],
.modal, .modal-backdrop, .okto-sheet, .toast, .okto-toast,
.bulk-actions-panel, .read-aloud-bar, .tab-nav, .pagination {
    display: none !important;
}

/* Formularfelder sind auf Papier meist Datenträger, keine Eingabe: Rahmen
   weg, Wert lesbar lassen. Kontrollkästchen bleiben — sie sagen etwas aus. */
input[type="text"], input[type="number"], input[type="date"], input[type="search"],
select, textarea {
    border: none !important;
    background: transparent !important;
    color: #000 !important;
    padding: 0 !important;
    appearance: none;
}

/* ---------------------------------------------------------------------------
 * 3. REITER: NUR DER OFFENE
 *
 * Das Admin-Dashboard liefert alle 30 Bereiche im HTML aus und blendet sie
 * mit .tab-content/.active um. Ohne diese Regel druckte der Browser je nach
 * Fassung entweder nichts oder ALLE dreißig.
 * ------------------------------------------------------------------------- */
.tab-content { display: none !important; }
.tab-content.active { display: block !important; }

/* Der Inhaltsbereich scrollt am Bildschirm in einem eigenen Kasten. Auf
   Papier muss er sich über beliebig viele Seiten ausdehnen dürfen. */
.admin-content, .admin-layout, .app-shell, .content-scroll {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    display: block !important;
}

/* ---------------------------------------------------------------------------
 * 4. UMBRÜCHE
 *
 * Eine Karte, die mitten durchgeschnitten wird, ist der häufigste Ärger beim
 * Drucken. Tabellen dürfen dagegen umbrechen — nur die Kopfzeile muss auf
 * jeder Seite wiederkommen, sonst weiß man auf Seite 3 nicht mehr, was die
 * Spalten bedeuten.
 * ------------------------------------------------------------------------- */
.admin-card, .ok-card, .card, .data-item, .stat-card, figure, tr, li {
    break-inside: avoid;
    page-break-inside: avoid;
}

table { break-inside: auto; page-break-inside: auto; width: 100% !important; border-collapse: collapse; }
thead { display: table-header-group; }          /* Kopfzeile auf jeder Seite */
tfoot { display: table-footer-group; }

th, td {
    border: 1px solid #bbb !important;
    padding: 4px 6px !important;
    color: #000 !important;
    background: #fff !important;
}
th { background: #eee !important; font-weight: 700; text-align: left; }
/* Zebrastreifen am Bildschirm werden auf Papier zu grauem Matsch. */
tbody tr:nth-child(even) td { background: #fff !important; }

h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; color: #000 !important; }
h1 { font-size: 16pt; } h2 { font-size: 14pt; } h3 { font-size: 12pt; }

/* ---------------------------------------------------------------------------
 * 5. RASTER
 *
 * Mehrspaltige Raster sind für Bildschirmbreite gedacht. Auf A4 hochkant
 * werden daraus gequetschte Säulen — zwei Spalten sind das Maximum.
 * ------------------------------------------------------------------------- */
.stats-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8mm !important; }
.admin-content > div[style*="grid-template-columns"] { display: block !important; }

/* ---------------------------------------------------------------------------
 * 6. KOPFZEILE DES AUSDRUCKS
 *
 * Ein Blatt ohne Herkunft ist in der Schule wertlos: Wer eine Klassenliste
 * findet, muss sehen, von welcher Schule, welche Liste und von wann sie ist.
 * Das Markup dazu liefert okto_druckbereich().
 * ------------------------------------------------------------------------- */
.nur-druck { display: block; }

.druck-kopf {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10mm;
    border-bottom: 1.5pt solid #000;
    padding-bottom: 2mm;
    margin-bottom: 5mm;
}
.druck-kopf .druck-titel  { font-size: 14pt; font-weight: 700; }
.druck-kopf .druck-schule { font-size: 10pt; color: #333; }
.druck-kopf .druck-datum  { font-size: 9pt; color: #333; white-space: nowrap; }

/* Links: Die Adresse anzuhängen hilft nur bei Verweisen nach außen. Bei den
   internen Sprungmarken (#tab-users) stünde überall derselbe Klammerzusatz. */
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
a { color: #000 !important; text-decoration: none; }

/* Ampeln und Status-Punkte tragen Bedeutung — sie dürfen nicht verschwinden,
   nur weil sie über Hintergrundfarbe arbeiten. */
.badge, .badge-warning, .badge-success, .badge-danger, .ampel, .status-punkt {
    border: 1px solid #666 !important;
    color: #000 !important;
    padding: 1px 5px !important;
}

} /* @media print */