/* =============================================================================
   app.css - Eigenes CSS des Systems mein-zeitkonto
   Angelegt mit PROJ-50. Vorher standen diese Regeln in <style>-Bloecken
   von 20 Seiten.

   AUFBAU
     1  Global .............. gilt auf jeder Seite, ohne Seitenkennung
     2  Bausteine ........... mehrfach verwendet (Stempeluhr)
     3  Seitenspezifisch .... alphabetisch nach Seitenkennung
     4  Druck ............... @media print

   REGEL: Ohne Seitenkennung steht hier nur, was wirklich ueberall gelten soll.
   Alles andere wird mit der Kennung am <body> qualifiziert, die
   includes/head.php setzt (Schema: page-<dateiname>, Unterstrich zu Bindestrich).
   Grund: Mehrere Seiten benutzen dieselben Klassennamen fuer Verschiedenes
   (.holiday, .weekend, .card) und nackte Element-Selektoren (body, h2/h3).
   ============================================================================= */


/* =============================================================================
   1  GLOBAL
   ============================================================================= */

/* Wurde bis PROJ-50 nur in my_time_days.php definiert, aber auch in
   footer.php und my_time_months.php benutzt - dort blieb sie wirkungslos. */
@media print {
    .no-print { display: none !important; }
}

/* Mobile Optimierung fuer Tabellen und Ueberschriften.
   Stand bis PROJ-50 wortgleich auf 6 Seiten; gilt seither systemweit. */
@media (max-width: 768px) {
    .table-sm td, .table-sm th { padding: 0.25rem; font-size: 0.85rem; }
    h2, h3 { font-size: 1.5rem; }
}

/* Schriftstufen unterhalb von Bootstraps Skala - .fs-1 bis .fs-6 beginnen bei
   1rem, darunter gibt es nur .small (0.875em). Mit PROJ-74 aus 25 Inline-Angaben
   in sechs verschiedenen Werten auf zwei Stufen zusammengezogen. */
.fs-xs { font-size: 0.7rem; }   /* war 0.6em, 0.6rem, 0.65rem, 0.7rem */
.fs-sm { font-size: 0.8rem; }   /* war 0.75rem, 0.8rem */

/* Ein <button class="dropdown-item"> zeigt sonst den Standard-Zeiger statt der
   Hand. Global, weil navbar.php als Include keine Seitenkennung tragen kann. */
.dropdown-item { cursor: pointer; }


/* =============================================================================
   2  BAUSTEINE
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Stempeluhr - benutzt von dashboard.php (kompakt) und time_tracking.php (gross).
   Zwei vorgesehene Groessen desselben Bausteins: Auf dem Dashboard ist die Uhr
   eine Kachel neben Widgets, auf der Stempelseite fuellt sie die Seite allein.
   Farbe, Typografie und Zustaende sind mit PROJ-50 vereinheitlicht.
   -------------------------------------------------------------------------- */
.stamp-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stamp-container--sm { width: 260px; height: 260px; margin: 0 auto; }
.stamp-container--lg { width: 320px; height: 320px; }

.stamp-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}
.progress-ring__circle {
    transition: stroke-dashoffset 0.35s;
    transform-origin: 50% 50%;
    fill: transparent;
    stroke-width: 10;
}
.ring-bg   { stroke: #e9ecef; }
.ring-fill { stroke: #0d6efd; stroke-linecap: round; }

/* Gelb, nicht rot: Rot bleibt im System dem ArbZG-Verstoss ab zehn Stunden,
   dem negativen Saldo und der Krankmeldung vorbehalten. Das Erreichen des
   Tagessolls ist kein Problemzustand. Bis PROJ-50 war der Ring auf
   time_tracking.php rot und auf dashboard.php gelb. */
.ring-fill.overtime { stroke: #ffc107 !important; }

.btn-stamp-circle {
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    border: none;
}
.btn-stamp-circle--sm { width: 220px; height: 220px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.btn-stamp-circle--lg { width: 270px; height: 270px; box-shadow: 0 15px 35px rgba(0,0,0,0.15); }

.btn-stamp-circle:hover  { transform: scale(1.02); box-shadow: 0 15px 40px rgba(0,0,0,0.15); }
.btn-stamp-circle:active { transform: scale(0.95); }

/* Sperr-Zustand */
.btn-disabled {
    background-color: #f8f9fa;
    border: 4px solid #dee2e6;
    color: #6c757d;
    cursor: not-allowed;
    box-shadow: none;
}
.btn-disabled:hover,
.btn-disabled:active { transform: none; box-shadow: none; }

.timer-main {
    font-weight: 700;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.timer-main--sm { font-size: 2.2rem; line-height: 1.2; }
.timer-main--lg { font-size: 3rem;   line-height: 1.1; }

.timer-sub    { font-size: 1rem; opacity: 0.7; margin-top: 5px; font-weight: 500; }
.timer-status { text-transform: uppercase; margin-bottom: 5px; }
.timer-status--sm { font-size: 0.85rem; letter-spacing: 1px; }
.timer-status--lg { font-size: 0.9rem;  letter-spacing: 2px; }

/* -----------------------------------------------------------------------------
   Scrollende Tabelle mit klebendem Kopf - admin_reports.php, admin_email_log.php.
   Bis PROJ-74 stand dieselbe Regel zweimal: seitengebunden fuer admin_reports und
   wortgleich inline in admin_email_log.
   -------------------------------------------------------------------------- */
.table-sticky { max-height: 70vh; }
.table-sticky thead th { position: sticky; top: 0; z-index: 1; }

/* -----------------------------------------------------------------------------
   Schmaler Fortschrittsbalken - dashboard.php, includes/recalc_modal.php.
   Baustein und nicht seitengebunden, weil recalc_modal.php ein Include ohne
   eigene Seitenkennung ist.
   -------------------------------------------------------------------------- */
.progress-thin { height: 8px; }

/* -----------------------------------------------------------------------------
   Kennzahlenkarte der Kopfzeile - my_time_days.php, my_time_months.php.
   Heisst bewusst nicht .stat-card: den Namen belegt dashboard.php bereits fuer
   etwas anderes (Abschnitt 3).
   -------------------------------------------------------------------------- */
.metric-card  { min-width: 140px; }
.metric-label { display: block; line-height: 1.2; }

/* -----------------------------------------------------------------------------
   Zugangskarte - forgot_password.php, reset_password.php.
   -------------------------------------------------------------------------- */
.card-auth { max-width: 400px; width: 100%; }


/* =============================================================================
   3  SEITENSPEZIFISCH
   ============================================================================= */

/* -----------------------------------------------------------------------------
   admin_audit.php - Aenderungsprotokoll
   -------------------------------------------------------------------------- */
.page-admin-audit .json-box {
    font-family: monospace;
    font-size: 0.8rem;
    max-height: 100px;
    overflow-y: auto;
    background: #f8f9fa;
    padding: 5px;
    border-radius: 4px;
}
.page-admin-audit .diff-added {
    color: #198754;
    font-weight: bold;
    background-color: #d1e7dd;
    padding: 0 2px;
    border-radius: 2px;
}
.page-admin-audit .diff-removed { color: #dc3545; text-decoration: line-through; opacity: 0.8; }
.page-admin-audit .diff-row     { border-bottom: 1px solid #eee; padding: 2px 0; }

/* Breite der Aenderungsspalte. Der Wert stammt aus PROJ-48 und bleibt hier
   unveraendert - ob 300px richtig sind, entscheidet PROJ-69. */
.page-admin-audit .col-change { min-width: 300px; }

/* -----------------------------------------------------------------------------
   admin_cleanup.php - Aufraeumen
   -------------------------------------------------------------------------- */
.page-admin-cleanup .table-responsive { max-height: 400px; }

/* -----------------------------------------------------------------------------
   admin_dashboard.php - System-Cockpit
   -------------------------------------------------------------------------- */
body.page-admin-dashboard { background: #f0f2f5; }

.page-admin-dashboard .kpi-card { border: none; border-radius: 12px; transition: transform 0.15s; overflow: hidden; }
.page-admin-dashboard .kpi-card:hover { transform: translateY(-2px); }
.page-admin-dashboard .kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.page-admin-dashboard .kpi-value { font-size: 1.8rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.page-admin-dashboard .kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    font-weight: 600;
}
.page-admin-dashboard .kpi-sub { font-size: 0.8rem; color: #6c757d; }

.page-admin-dashboard .tool-card { border: none; border-radius: 12px; border-left: 4px solid transparent; }
.page-admin-dashboard .tool-card.tool-mail   { border-left-color: #0d6efd; }
.page-admin-dashboard .tool-card.tool-recalc { border-left-color: #198754; }
.page-admin-dashboard .tool-card.tool-db     { border-left-color: #ffc107; }
.page-admin-dashboard .tool-card.tool-pw     { border-left-color: #dc3545; }
.page-admin-dashboard .tool-card.tool-lock   { border-left-color: #6c757d; } /* PROJ-46 */

.page-admin-dashboard .tool-header {
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.page-admin-dashboard .log-row { font-size: 0.82rem; border-bottom: 1px solid #f0f0f0; padding: 8px 0; }
.page-admin-dashboard .log-row:last-child { border-bottom: none; }
.page-admin-dashboard .log-time   { font-family: monospace; color: #6c757d; font-size: 0.75rem; }
.page-admin-dashboard .log-action {
    font-weight: 700;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.page-admin-dashboard .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.page-admin-dashboard .status-dot.green  { background: #198754; box-shadow: 0 0 6px rgba(25,135,84,0.4); }
.page-admin-dashboard .status-dot.yellow { background: #ffc107; box-shadow: 0 0 6px rgba(255,193,7,0.4); }
.page-admin-dashboard .status-dot.red    { background: #dc3545; box-shadow: 0 0 6px rgba(220,53,69,0.4); animation: pulse-dot 1.5s infinite; }

@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* PROJ-78: Editor der System-Mail. pre-wrap, damit Leerzeichen und Umbrueche so im DOM
   stehen, wie sie zu sehen sind; Schrift und Farbe wie im Mailrahmen. */
.page-admin-dashboard .mail-editor {
    position: relative;
    min-height: 7.5rem;
    max-height: 22rem;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}
.page-admin-dashboard .mail-editor.is-empty::before {
    content: attr(data-placeholder);
    position: absolute;
    color: #6c757d;
    pointer-events: none;
}
.page-admin-dashboard .mail-swatch-dot {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    vertical-align: -0.1rem;
}
.page-admin-dashboard .mail-frame {
    width: 100%;
    height: 55vh;
    min-height: 260px;
    border: 0;
    background: #fff;
}

@media (max-width: 768px) {
    .page-admin-dashboard .kpi-value { font-size: 1.4rem; }
    .page-admin-dashboard .tool-card { margin-bottom: 12px; }
}

/* -----------------------------------------------------------------------------
   admin_departments.php - Abteilungsverwaltung
   -------------------------------------------------------------------------- */
.page-admin-departments .dept-card { transition: transform 0.2s, box-shadow 0.2s; border-left: 5px solid #0d6efd; }
.page-admin-departments .dept-card:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }
.page-admin-departments .dept-card.is-test { border-left-color: #6c757d; opacity: 0.85; }

/* Bootstraps .sticky-top klebt bei top:0; hier soll ein Abstand bleiben. */
.page-admin-departments .sticky-top { top: 20px; }

/* Minutenfeld im Wochenplan-Raster. */
.page-admin-departments .input-mins { width: 60px; margin: 0 auto; }

/* -----------------------------------------------------------------------------
   admin_email_log.php - E-Mail-Protokoll
   Eigener Zellabstand, unabhaengig von der Breite. Hoehere Spezifitaet als der
   globale Mobil-Block, gewinnt deshalb auch unter 768 px - so wie bisher.
   -------------------------------------------------------------------------- */
.page-admin-email-log .table-sm td,
.page-admin-email-log .table-sm th { padding: 0.5rem; font-size: 0.85rem; vertical-align: middle; }

/* Rahmen der Mail-Vorschau. Die Vorschau selbst bringt ihr eigenes Mail-HTML
   mit - hier wird nur der Rahmen gestaltet, in dem sie steht. */
.page-admin-email-log .mail-frame {
    width: 100%;
    min-height: 200px;
    max-height: 50vh;
    border: 0;
    background: #fff;
}

/* -----------------------------------------------------------------------------
   admin_reports.php - Berichte
   Die scrollende Tabelle mit klebendem Kopf ist seit PROJ-74 der Baustein
   .table-sticky aus Abschnitt 2, geteilt mit admin_email_log.php.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   admin_requests.php - Antragsverwaltung
   -------------------------------------------------------------------------- */
.page-admin-requests .col-check  { width: 40px; }
.page-admin-requests .col-wide   { min-width: 230px; }
.page-admin-requests .col-reason { max-width: 200px; white-space: normal; }

/* -----------------------------------------------------------------------------
   admin_users.php - Mitarbeiterverwaltung
   -------------------------------------------------------------------------- */
.page-admin-users .calc-output { font-weight: bold; color: #0d6efd; font-size: 0.9rem; }
.page-admin-users .calc-total  { font-size: 1.1rem; font-weight: bold; color: #198754; }

/* Spaltenbreiten des Wochenplan-Rasters. */
.page-admin-users .col-day    { width: 120px; }
.page-admin-users .col-calc   { width: 80px; }
.page-admin-users .input-hours { width: 70px; margin: 0 auto; }

/* -----------------------------------------------------------------------------
   approve_corrections.php - Zeitkorrekturen genehmigen
   -------------------------------------------------------------------------- */
.page-approve-corrections .cell-times { line-height: 1.4; }
.page-approve-corrections .col-reason { max-width: 230px; white-space: normal; }

/* -----------------------------------------------------------------------------
   attendance.php - Live-Anwesenheit
   -------------------------------------------------------------------------- */
.page-attendance .dept-filter { min-width: 200px; }

/* -----------------------------------------------------------------------------
   calendar.php - Teamkalender
   -------------------------------------------------------------------------- */
body.page-calendar { background-color: #f8f9fa; }

.page-calendar .calendar-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border: none;
}
.page-calendar .calendar-header { background: #fff; padding: 20px; border-bottom: 1px solid #eee; }

.page-calendar .table-calendar { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; }
.page-calendar .table-calendar th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: #6c757d;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    background: #fff;
    text-align: center;
}

.page-calendar .calendar-day {
    height: 130px;
    vertical-align: top;
    background: #fff;
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 8px;
    transition: background 0.2s;
    position: relative;
}
.page-calendar .calendar-day:hover { background-color: #fafafa; }

.page-calendar .day-number { font-weight: 600; font-size: 0.9rem; color: #495057; display: block; margin-bottom: 5px; }
.page-calendar .today { background-color: #e8f4ff !important; position: relative; }
.page-calendar .today .day-number { color: #0d6efd; font-weight: 800; }

/* Hintergruende fuer spezielle Tage */
.page-calendar .bg-holiday { background-color: #fff8f8; }
.page-calendar .bg-blocked {
    background-color: #f8f9fa;
    background-image: radial-gradient(#e9ecef 1px, transparent 1px);
    background-size: 10px 10px;
}

.page-calendar .event-badge {
    display: block;
    margin-bottom: 3px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 3px solid transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.page-calendar .evt-urlaub    { background-color: #d1e7dd; color: #0f5132; border-left-color: #198754; }
.page-calendar .evt-krank     { background-color: #f8d7da; color: #842029; border-left-color: #dc3545; }
.page-calendar .evt-schule    { background-color: #cfe2ff; color: #084298; border-left-color: #0d6efd; }
.page-calendar .evt-sonstiges { background-color: #e2e3e5; color: #41464b; border-left-color: #6c757d; }
/* PROJ-85: geplanter Dienst - Anwesenheit, deshalb bewusst keine Abwesenheitsfarbe */
.page-calendar .evt-dienst    { background-color: #fff3cd; color: #664d03; border-left-color: #ffc107; }
.page-calendar .legend-dienst { background-color: #ffc107; }
/* PROJ-79: noch nicht entschiedener Betriebsurlaub - gestrichelt und ungefuellt = vorlaeufig */
.page-calendar .evt-geplant {
    background-color: #fff;
    color: #41464b;
    border: 1px dashed #6c757d;
    box-shadow: none;
}
.page-calendar .evt-geplant > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.page-calendar .legend-geplant { background-color: #fff; border: 1px dashed #6c757d; }

.page-calendar .holiday-name { font-size: 0.75rem; color: #dc3545; font-weight: bold; display: block; margin-top: 2px; }
.page-calendar .blocked-reason {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: bold;
    background: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid #dee2e6;
    display: inline-block;
}

.page-calendar .add-block-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #dee2e6;
    cursor: pointer;
    transition: color 0.2s;
}
.page-calendar .calendar-day:hover .add-block-btn { color: #adb5bd; }
.page-calendar .add-block-btn:hover { color: #0d6efd !important; }

.page-calendar .legend-dot { width: 10px; height: 10px; display: inline-block; border-radius: 50%; margin-right: 5px; }

/* Die vier Legendenfarben trugen bis PROJ-74 die Bootstrap-Farbwerte hart inline
   (#198754, #dc3545, #0d6efd, #6c757d). Sie stehen jetzt als .bg-success,
   .bg-danger, .bg-primary und .bg-secondary am Element - gleiche Werte. */

/* Monatsauswahl soll sich an ihrem Inhalt ausrichten, nicht die Spalte fuellen. */
.page-calendar .month-select { width: auto; }

@media (max-width: 768px) {
    .page-calendar .calendar-day   { height: 100px; padding: 2px; }
    .page-calendar .event-badge    { font-size: 0.65rem; padding: 2px 4px; }
    .page-calendar .day-number     { font-size: 0.8rem; }
    .page-calendar .calendar-card  { overflow-x: auto; }   /* Scrollbar erlauben */
    .page-calendar .table-calendar { min-width: 800px; }   /* Zwingt zum Scrollen statt Quetschen */
}

/* -----------------------------------------------------------------------------
   change_password.php - Passwort aendern
   .forced-bg wird als body-Klasse gesetzt, wenn der Wechsel erzwungen ist.
   -------------------------------------------------------------------------- */
.page-change-password.forced-bg {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-change-password .modern-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background: #fff;
    overflow: hidden;
}
.page-change-password .modern-header {
    background: #0d6efd;
    padding: 2rem 1.5rem;
    text-align: center;
    color: white;
}
.page-change-password .modern-icon { font-size: 3rem; margin-bottom: 0.5rem; opacity: 0.9; }
.page-change-password .form-floating > label { color: #6c757d; }

/* -----------------------------------------------------------------------------
   dashboard.php - Mitarbeiter-Dashboard
   -------------------------------------------------------------------------- */
.page-dashboard .stat-card { transition: transform 0.2s; height: 100%; }
.page-dashboard .stat-card:hover { transform: translateY(-3px); }
.page-dashboard .icon-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.page-dashboard .badge-pending {
    font-size: 0.7rem;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
}
.page-dashboard .badge-pending:hover { opacity: 0.8; }

/* Hinweiskarte soll nicht ueber die halbe Seite laufen. */
.page-dashboard .alert-narrow { max-width: 400px; }

/* -----------------------------------------------------------------------------
   dashboard_gf.php - Strategie-Cockpit
   -------------------------------------------------------------------------- */
body.page-dashboard-gf { background-color: #f8f9fa; }

.page-dashboard-gf .card { border: none; border-radius: 12px; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); }

.page-dashboard-gf .chart-container { position: relative; width: 100px; height: 100px; margin: 0 auto; }
.page-dashboard-gf .chart-ring       { transform: rotate(-90deg); transform-origin: 50% 50%; }
.page-dashboard-gf .chart-circle-bg  { fill: none; stroke: #eee; stroke-width: 8; }
.page-dashboard-gf .chart-circle-val { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
.page-dashboard-gf .chart-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}
.page-dashboard-gf .chart-abs { font-size: 1.2rem; font-weight: bold; line-height: 1; display: block; }
.page-dashboard-gf .chart-pct { font-size: 0.7rem; color: #666; }

.page-dashboard-gf .quicklink {
    font-size: 0.85rem;
    color: #666;
    text-decoration: none;
    padding: 0 8px;
    border-right: 1px solid #ddd;
}
.page-dashboard-gf .quicklink:last-child { border-right: none; }
.page-dashboard-gf .quicklink:hover { color: #0d6efd; text-decoration: underline; }

.page-dashboard-gf .standort-header {
    background-color: #f1f4f9;
    font-size: 0.8rem;
    font-weight: bold;
    color: #444;
    border-radius: 8px 8px 0 0;
}
.page-dashboard-gf .badge-count { font-size: 0.8rem; border-radius: 20px; padding: 4px 10px; }

/* Sperrung der Ueberschriften. Die Schriftgroessen daneben sind seit PROJ-74
   Bootstrap-Klassen (.fs-xs bzw. .small). */
.page-dashboard-gf .kpi-caption   { letter-spacing: 0.5px; }
.page-dashboard-gf .section-title { letter-spacing: 1px; }

/* Symbolspalte der Standort-Tabelle. */
.page-dashboard-gf .col-icon { width: 60px; }

/* -----------------------------------------------------------------------------
   duty_roster.php - Dienstplaner (PROJ-85)
   Jeder Wochenblock ist eine eigene Tabelle. Ohne festes Raster verteilt der
   Browser die Breiten nach Inhalt, und Bloecke mit Urlaub oder Nachbarmonat
   springen gegenueber den anderen. Die Mindestbreite haelt die Zeitfelder auf
   dem Handy lesbar; .table-responsive scrollt dann seitlich.
   -------------------------------------------------------------------------- */
.page-duty-roster .roster-table          { table-layout: fixed; min-width: 66rem; }
.page-duty-roster .roster-table .roster-col-name { width: 12rem; }

/* -----------------------------------------------------------------------------
   help.php - Hilfe und Support
   -------------------------------------------------------------------------- */
.page-help .accordion-button:not(.collapsed) { background-color: #e7f1ff; color: #0c63e4; font-weight: 600; }
.page-help .faq-section-title {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #495057;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 1px;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 5px;
}
.page-help .mgmt-header { color: #dc3545; border-bottom-color: #dc3545; }
.page-help .faq-icon {
    width: 25px;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
    color: #0d6efd;
}
.page-help .faq-text ul li { margin-bottom: 5px; }

/* Grosses Symbol ueber dem Abschlussblock. 3rem ist im System das Mass fuer
   solche Symbole - siehe .page-change-password .modern-icon und
   .page-index .login-header i. Bootstraps .fs-1 waere 2.5rem und damit kleiner. */
.page-help .faq-hero-icon { font-size: 3rem; }

/* -----------------------------------------------------------------------------
   index.php - Anmeldung
   -------------------------------------------------------------------------- */
body.page-index {
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.page-index .login-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    border-radius: 10px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.page-index .login-header { text-align: center; margin-bottom: 2rem; }
.page-index .login-header i { font-size: 3rem; color: #0d6efd; }

/* -----------------------------------------------------------------------------
   my_time_days.php - Meine Tage
   Druckregeln stehen in Abschnitt 4.
   -------------------------------------------------------------------------- */
/* PROJ-81: Statuszeile unter dem Datum. Die Groesse stand bis dahin als style=""
   in my_time_days.php - einer der sieben Reste aus PROJ-74. */
.page-my-time-days .day-status  { font-size: 0.75rem; line-height: 1.1; }
.page-my-time-days tr.weekend   { background-color: #f8f9fa; }
.page-my-time-days tr.holiday   { background-color: #fff3cd; }
.page-my-time-days tr.today-row { border-left: 4px solid #0d6efd; background-color: #f0f8ff; }
.page-my-time-days .text-decoration-line-through .btn { text-decoration: none !important; }
.page-my-time-days .print-header    { display: none; }
.page-my-time-days .signature-block { display: none; }

/* Spaltenbreiten des Stundenzettels. Werte unveraendert aus dem Bestand -
   ueber die Aufteilung selbst entscheidet PROJ-69. */
.page-my-time-days .col-date { width: 12%; }
.page-my-time-days .col-times { width: 20%; }
.page-my-time-days .col-break { width: 8%; }
.page-my-time-days .col-note  { width: 20%; }

.page-my-time-days .cell-note { line-height: 1.2; }
.page-my-time-days .row-sum   { background-color: #e2e3e5; }

/* -----------------------------------------------------------------------------
   my_time_months.php - Meine Monate
   -------------------------------------------------------------------------- */
.page-my-time-months .hover-row:hover { background-color: #f8f9fa; cursor: pointer; transition: background 0.2s; }

/* -----------------------------------------------------------------------------
   privacy_consent.php - Datenschutzeinwilligung
   -------------------------------------------------------------------------- */
body.page-privacy-consent { background-color: #f8f9fa; }

.page-privacy-consent .legal-text {
    height: 400px;
    overflow-y: auto;
    background: #fff;
    padding: 20px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
}
.page-privacy-consent .legal-text h5 { margin-top: 15px; font-weight: bold; color: #495057; }
.page-privacy-consent .legal-text ul { padding-left: 20px; }
/* Die Zustimmungs-Beschriftung ist anklickbar und soll das auch zeigen. */
.page-privacy-consent .form-check-label { cursor: pointer; }

.page-privacy-consent .action-bar {
    background: #fff;
    padding: 20px;
    border-top: 1px solid #dee2e6;
    border-radius: 0 0 5px 5px;
}

/* -----------------------------------------------------------------------------
   requests.php - Antraege
   -------------------------------------------------------------------------- */
.page-requests .btn-year { width: 80px; }

/* -----------------------------------------------------------------------------
   school_planning.php - Schulplaner
   -------------------------------------------------------------------------- */
.page-school-planning .btn-year { width: 80px; }

.page-school-planning .year-grid {
    display: grid;
    grid-template-columns: 40px repeat(12, 1fr);
    gap: 1px;
    background: #dee2e6;
    border: 1px solid #dee2e6;
    overflow-x: auto;
    min-width: 800px;
}
.page-school-planning .grid-header {
    background: #212529;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 8px 0;
    font-size: 0.85rem;
    min-width: 40px;
}
.page-school-planning .grid-cell {
    background: white;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    position: relative;
    transition: background 0.1s;
}
.page-school-planning .day-cell:hover:not(.blocked):not(.holiday):not(.weekend) { background-color: #e9ecef; }

/* Zustaende */
.page-school-planning .weekend  { background-color: #f8f9fa; color: #adb5bd; }
.page-school-planning .holiday  { background-color: #ffcccc; color: #842029; cursor: not-allowed; }
.page-school-planning .selected { background-color: #0d6efd !important; color: white !important; }

/* Blockierte Tage (Urlaub, Arbeit usw.) */
.page-school-planning .blocked {
    background-color: #e2e3e5;
    color: #6c757d;
    cursor: not-allowed;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.03) 5px, rgba(0,0,0,0.03) 10px);
}
.page-school-planning .blocked:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 10;
}

.page-school-planning .day-label {
    font-weight: bold;
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    cursor: default;
}
.page-school-planning .legend-box {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    vertical-align: middle;
}

/* Legendenfarben. "Schule (Aktiv)" traegt Bootstraps .bg-primary/.border-primary
   am Element - der Wert war ohnehin #0d6efd. Fuer die drei uebrigen gibt es
   keine Bootstrap-Entsprechung; die Werte sind dieselben wie bei den Zellen
   .weekend, .holiday und dem belegten Tag weiter oben. Voll qualifiziert, damit
   sie die Grundregel darueber sicher ueberschreiben. */
.page-school-planning .legend-box.is-busy    { background: #e2e3e5; }
.page-school-planning .legend-box.is-holiday { background: #ffcccc; border-color: #ffcccc; }
.page-school-planning .legend-box.is-weekend { background: #f8f9fa; }

/* -----------------------------------------------------------------------------
   team_holidays.php - Betriebsurlaub und Sperrtage
   -------------------------------------------------------------------------- */
.page-team-holidays .list-scroll { max-height: 300px; overflow-y: auto; }

/* -----------------------------------------------------------------------------
   team_time.php - Teamzeiten
   -------------------------------------------------------------------------- */
.page-team-time .dept-filter   { max-width: 200px; }
.page-team-time .avatar-circle { width: 40px; height: 40px; }

/* -----------------------------------------------------------------------------
   time_tracking.php - Stempeluhr
   Die Uhr selbst ist der Baustein aus Abschnitt 2; hier steht nur die
   Breitenbegrenzung der Bloecke darunter.
   -------------------------------------------------------------------------- */
.page-time-tracking .block-narrow { max-width: 500px; }

/* -----------------------------------------------------------------------------
   user_history.php - Verlauf eines Mitarbeiters
   -------------------------------------------------------------------------- */
.page-user-history .col-day { width: 30px; }


/* =============================================================================
   4  DRUCK
   ============================================================================= */

/* my_time_days.php - Stundennachweis zum Unterschreiben.
   Bewusst auf die Seite begrenzt: body, .container, .card, .table und .badge
   wuerden sonst das Druckbild jeder Seite veraendern. */
@media print {
    @page { size: A4; margin: 10mm 15mm; }

    body.page-my-time-days {
        background-color: white !important;
        font-size: 10px;
        color: #000;
        font-family: Arial, sans-serif;
    }
    .page-my-time-days .print-header {
        display: block !important;
        margin-bottom: 10px;
        border-bottom: 2px solid #000;
        padding-bottom: 5px;
    }
    .page-my-time-days .container { max-width: 100% !important; padding: 0 !important; width: 100% !important; }
    .page-my-time-days .card  { border: none !important; box-shadow: none !important; }
    .page-my-time-days .table { width: 100% !important; margin-bottom: 0; border: 1px solid #000; }
    .page-my-time-days .table td,
    .page-my-time-days .table th {
        padding: 2px 4px !important;
        height: auto !important;
        vertical-align: middle !important;
        border: 1px solid #666 !important;
    }
    .page-my-time-days .badge { border: none !important; padding: 0 !important; color: #000 !important; font-weight: normal; }
    .page-my-time-days tr.weekend { background-color: #eee !important; -webkit-print-color-adjust: exact; }
    .page-my-time-days tr.holiday { background-color: #ddd !important; -webkit-print-color-adjust: exact; }
    .page-my-time-days .text-success,
    .page-my-time-days .text-danger,
    .page-my-time-days .text-primary { color: #000 !important; }
    .page-my-time-days .signature-block { display: block !important; margin-top: 15px; page-break-inside: avoid; }
    .page-my-time-days .signature-line  { border-top: 1px solid #000; margin-top: 35px; width: 90%; }
}