/* ACP Ueberstundentool - Farbsystem
   Darkmode ist Standard (html ohne data-theme-Attribut). Mit
   data-theme="light" wird auf das helle ACP-Layout umgeschaltet
   (siehe theme-toggle in base.html). */

:root {
  /* Akzentfarben - im Dark-Modus leicht aufgehellt fuer genug Kontrast.
     --acp-red ist die primaere Interaktionsfarbe (Buttons/Fokus/aktive
     Navigation/Links) - abgestimmt auf das Schwesterportal (ATG
     M365-Multitenant), das dieselbe ACP-Palette so einsetzt. --acp-red-dark
     ist dieselbe CI-Farbfamilie, nur abgedunkelt: reines --acp-red erreicht
     als kleiner Fliesstext auf hellem Grund nur ~4.3:1 (WCAG AA verlangt
     4.5:1 fuer normal grosse Schrift) - Links/Text im Hellmodus nutzen
     daher --acp-red-dark, Flaechen/Icons/Grossformat bleiben bei --acp-red. */
  --acp-red: #F00F40;
  --acp-red-dark: #C10D36;
  --acp-slate: #3D4A52;
  --acp-teal: #33BEDD;
  --acp-amber: #E2A33D;
  --acp-green: #3ECB86;

  /* Flaechen & Text (Dark = Standard) */
  --bg-page: #12171A;
  --bg-surface: #1B2226;
  --bg-surface-hover: #222B30;
  /* Eingabefelder deutlich sichtbar von der (identisch dunklen) Karte
     absetzen - sonst verschwimmt der Feldrahmen komplett mit dem
     Karten-Hintergrund (--bg-surface), siehe Nutzer-Feedback. */
  --bg-input: #232C31;
  --border-input: #4A5960;
  --bg-sidebar: #171D21;
  --text-primary: #E7ECEE;
  --text-muted: #8FA0A6;
  --border: #2C363B;
  /* Linktext/Fokus: dunkel = volles --acp-red (traegt auf dunklem Grund
     problemlos), hell = --acp-red-dark (WCAG-Grund siehe oben). */
  --link-color: var(--acp-red);

  /* Badges / Status (Dark) */
  --badge-gruen-bg: rgba(62, 203, 134, 0.16); --badge-gruen-fg: #3ECB86;
  --badge-gelb-bg: rgba(226, 163, 61, 0.18); --badge-gelb-fg: #E2A33D;
  --badge-rot-bg: rgba(240, 15, 64, 0.18); --badge-rot-fg: #FF6E85;
  --badge-keins-bg: rgba(255, 255, 255, 0.07); --badge-keins-fg: #8FA0A6;

  --status-eingereicht-bg: rgba(51, 190, 221, 0.16); --status-eingereicht-fg: #55D0EC;
  --status-geprueft-bg: rgba(93, 122, 255, 0.2); --status-geprueft-fg: #A2B0FF;
  --status-genehmigt-bg: rgba(62, 203, 134, 0.16); --status-genehmigt-fg: #3ECB86;
  --status-storniert-bg: rgba(240, 15, 64, 0.18); --status-storniert-fg: #FF6E85;
  --status-auszahlung-beantragt-bg: rgba(155, 107, 255, 0.2); --status-auszahlung-beantragt-fg: #B79CFF;
  --status-auszahlung-freigegeben-bg: rgba(226, 163, 61, 0.18); --status-auszahlung-freigegeben-fg: #E2A33D;
  --status-ausgezahlt-bg: rgba(255, 255, 255, 0.09); --status-ausgezahlt-fg: #C7D0D3;

  --alert-ok-bg: rgba(62, 203, 134, 0.12); --alert-ok-fg: #3ECB86; --alert-ok-border: rgba(62, 203, 134, 0.35);
  --alert-info-bg: rgba(51, 190, 221, 0.12); --alert-info-fg: #55D0EC; --alert-info-border: rgba(51, 190, 221, 0.35);
  --alert-warn-bg: rgba(226, 163, 61, 0.14); --alert-warn-fg: #E2A33D; --alert-warn-border: rgba(226, 163, 61, 0.4);

  --status-offen-bg: rgba(51, 190, 221, 0.16); --status-offen-fg: #55D0EC;
  --status-abgelehnt-bg: rgba(240, 15, 64, 0.18); --status-abgelehnt-fg: #FF6E85;

  /* Radius-Stufen wie im Schwesterportal: 8px fuer Buttons/Eingaben/Chips
     (dort "rounded-lg"), 12px fuer groessere Flaechen wie Karten/Tabellen
     (dort "rounded-xl") - deutlich weicher als die vorherige 6px-Stufe. */
  --radius: 8px;
  --radius-lg: 12px;
}

html[data-theme="light"] {
  --acp-teal: #0091AE;
  --acp-amber: #C77700;
  --acp-green: #1E8E4C;
  --link-color: var(--acp-red-dark);

  --bg-page: #F5F6F7;
  --bg-surface: #FFFFFF;
  --bg-surface-hover: #F5F6F7;
  --bg-input: #FFFFFF;
  --border-input: #B7BDC1;
  --bg-sidebar: #FFFFFF;
  --text-primary: #1F2A30;
  --text-muted: #5C6970;
  --border: #D7DADC;

  --badge-gruen-bg: #E4F5EA; --badge-gruen-fg: #1E8E4C;
  --badge-gelb-bg: #FFF3DA; --badge-gelb-fg: #C77700;
  --badge-rot-bg: #FDE2E7; --badge-rot-fg: #F00F40;
  --badge-keins-bg: #EDEFF0; --badge-keins-fg: #5C6970;

  --status-eingereicht-bg: #E6F5F8; --status-eingereicht-fg: #0091AE;
  --status-geprueft-bg: #EAF0FF; --status-geprueft-fg: #3355CC;
  --status-genehmigt-bg: #E4F5EA; --status-genehmigt-fg: #1E8E4C;
  --status-storniert-bg: #FDE2E7; --status-storniert-fg: #F00F40;
  --status-auszahlung-beantragt-bg: #EFE6FF; --status-auszahlung-beantragt-fg: #6B3FC7;
  --status-auszahlung-freigegeben-bg: #FFF3DA; --status-auszahlung-freigegeben-fg: #C77700;
  --status-ausgezahlt-bg: #EDEFF0; --status-ausgezahlt-fg: #3D4A52;

  --alert-ok-bg: #E4F5EA; --alert-ok-fg: #1E8E4C; --alert-ok-border: #BFE6CC;
  --alert-info-bg: #E6F5F8; --alert-info-fg: #056478; --alert-info-border: #BFE3EB;
  --alert-warn-bg: #FFF3DA; --alert-warn-fg: #C77700; --alert-warn-border: #F0DBA8;

  --status-offen-bg: #E6F5F8; --status-offen-fg: #0091AE;
  --status-abgelehnt-bg: #FDE2E7; --status-abgelehnt-fg: #F00F40;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 15px; line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-page);
}

a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Sichtbarer Tastatur-Fokus (nur bei Tastatur, nicht bei Mausklick) und
   Ruecksicht auf "Bewegung reduzieren". */
a:focus-visible, button:focus-visible, .btn:focus-visible, select:focus-visible {
  outline: 2px solid var(--acp-red); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- Kleine Utilities ------------------------------------------------- */
.nowrap { white-space: nowrap; }
.muted { color: var(--text-muted); }
.small { font-size: 0.8rem; }
/* Zahlen rechtsbuendig mit gleich breiten Ziffern - Stunden/Betraege
   lassen sich so spaltenweise vergleichen. */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.icon { flex-shrink: 0; vertical-align: -0.15em; }

/* Seitenkopf: Titel + Untertitel links, primaere Aktion rechts - eine klar
   erkennbare Hauptaktion pro Seite. */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.page-header h1 { margin: 0 0 4px; }
.page-header .subtitle { margin: 0; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; padding-top: 4px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 12px; }
.back-link:hover { color: var(--link-color); text-decoration: none; }

/* --- Layout -------------------------------------------------------- */
.acp-shell { display: flex; min-height: 100vh; flex-direction: column; }

header.acp-header {
  background: var(--acp-slate);
  color: #fff;
  border-bottom: 4px solid var(--acp-red);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 60px;
  flex-shrink: 0;
}
header.acp-header .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.1rem; flex-shrink: 0; }
/* Logo "Ueberzeit-Kreis" (static/img/logo.svg) - Variante fuer dunklen
   Grund, da die Kopfzeile in beiden Themes slate bleibt. */
header.acp-header .brand .logo-mark { width: 30px; height: 30px; flex-shrink: 0; display: block; }
header.acp-header .brand-text { white-space: nowrap; flex-shrink: 0; }
header.acp-header .brand .subtitle-text { opacity: .55; font-weight: 400; font-size: .8rem; margin-left: 6px; white-space: nowrap; }
header.acp-header .header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 1; min-width: 0; }
header.acp-header .user-info { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; min-width: 0; }
header.acp-header .user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.acp-header .btn-icon { display: none; }
header.acp-header .logout-btn, header.acp-header .theme-toggle { white-space: nowrap; }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.4);
  background: transparent; color: #fff; cursor: pointer; font-size: 1.2rem; line-height: 1;
}
.nav-toggle:hover { background: rgba(255,255,255,0.12); }

.nav-backdrop { display: none; }
header.acp-header .role-badge {
  background: rgba(255,255,255,0.15);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
header.acp-header .logout-btn, header.acp-header .theme-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; line-height: 1;
  color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: var(--radius);
  padding: 0 12px; background: transparent; cursor: pointer; font-size: 0.85rem;
  font-family: inherit; text-decoration: none;
}
header.acp-header .theme-toggle:hover { text-decoration: none; }
header.acp-header .btn-icon { display: inline-flex; align-items: center; }
header.acp-header .logout-btn:hover, header.acp-header .theme-toggle:hover { background: rgba(255,255,255,0.12); }

.acp-body { display: flex; flex: 1; justify-content: center; }

nav.acp-sidebar {
  width: 248px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 20px 0;
  flex-shrink: 0;
}
nav.acp-sidebar a {
  display: flex; align-items: center; gap: 10px;
  margin: 1px 10px;
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 0.9rem;
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  transition: background-color .12s, color .12s;
}
nav.acp-sidebar a .icon { color: var(--text-muted); }
nav.acp-sidebar a:hover .icon, nav.acp-sidebar a.active .icon { color: inherit; }
nav.acp-sidebar a span { min-width: 0; line-height: 1.25; }
/* Wer bin ich, in welcher Rolle - oben in der Sidebar (im Mobile-Drawer
   ersetzt das die Angaben, die im schmalen Header keinen Platz haben). */
.nav-user { display: flex; align-items: center; gap: 10px; margin: 0 10px 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-surface); border: 1px solid var(--border); }
.nav-user .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--acp-red); color: #fff; font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-user .nav-user-name { font-size: 0.88rem; font-weight: 600; line-height: 1.2; }
.nav-user .nav-user-role { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
nav.acp-sidebar a:hover { background: var(--bg-surface-hover); text-decoration: none; }
/* Aktiver Menuepunkt: kraeftige, gefuellte Markierung statt nur eines
   duennen Randstrichs - so wie im Schwesterportal (ATG M365-Multitenant). */
nav.acp-sidebar a.active {
  border-left-color: rgba(255,255,255,0.55);
  background: var(--acp-red);
  font-weight: 600;
  color: #fff;
}
nav.acp-sidebar a.active:hover { background: var(--acp-red); }
nav.acp-sidebar .nav-section {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); padding: 16px 22px 6px;
}

/* Inhaltsspalte waechst stufenlos mit der Fensterbreite mit (statt in
   fixen Sprüngen), damit sich das Layout auf jeder Aufloesung "mitgedacht"
   statt starr anfuehlt; .acp-body zentriert die Spalte zusaetzlich, wenn
   noch Platz neben der max-width uebrig bleibt. */
main.acp-main {
  flex: 1; min-width: 0; width: 100%; max-width: 1480px;
  padding: clamp(20px, 1.6vw + 12px, 36px) clamp(20px, 2.4vw + 10px, 48px);
}

h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 6px; }
h2 { font-size: 1.15rem; color: var(--text-primary); margin: 32px 0 12px; }
.subtitle { color: var(--text-muted); margin: 0 0 24px; font-size: 0.92rem; max-width: 76ch; }

/* --- Cards / KPI -----------------------------------------------------
   Raster mit gleich breiten Karten: fuenf Kennzahlen stehen in einer Reihe
   oder brechen gleichmaessig um - statt dass die letzte Karte als
   bildschirmbreiter Balken allein in der zweiten Zeile haengt. */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi-card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 18px; min-width: 0;
  border-top: 3px solid var(--acp-teal);
}
.kpi-card .kpi-label { font-size: 0.74rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-card .kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-card.warn { border-top-color: var(--acp-amber); }
.kpi-card.danger { border-top-color: var(--acp-red); }

.card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; margin-bottom: 20px;
}

/* Formular-Karten (Eintragen/Antrag/Erstbefuellung/Einstellungen): wachsen
   stufenlos mit der verfuegbaren Breite mit statt eine fest verdrahtete
   640px-Box zu sein, bleiben aber gut lesbar und werden auf sehr breiten
   Bildschirmen nicht endlos lang. */
.card-form { max-width: clamp(320px, 92vw, 640px); }
@media (min-width: 1440px) {
  .card-form { max-width: clamp(320px, 46vw, 760px); }
}

/* --- Table ------------------------------------------------------------ */
table.acp-table { width: 100%; border-collapse: collapse; background: var(--bg-surface); }
table.acp-table th {
  text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  color: var(--text-muted); border-bottom: 2px solid var(--border); padding: 11px 14px;
}
table.acp-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 0.9rem; line-height: 1.4; vertical-align: middle; color: var(--text-primary); }
table.acp-table tbody tr:last-child td { border-bottom: none; }
/* Aktionsspalte rechtsbuendig, Buttons bleiben einzeilig */
table.acp-table td.actions, table.acp-table th.actions { text-align: right; white-space: nowrap; }
table.acp-table td.actions form { display: inline; }
table.acp-table tr:hover td { background: var(--bg-surface-hover); }
table.acp-table tfoot td {
  padding: 10px 12px; font-size: 0.92rem; font-weight: 700; color: var(--text-primary);
  border-top: 2px solid var(--border); background: var(--bg-surface-hover);
}
table.acp-table tfoot tr:hover td { background: var(--bg-surface-hover); }
.table-wrap { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; }

/* --- Badges / Status -------------------------------------------------- */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
a.badge { text-decoration: none; cursor: pointer; }
a.badge:hover { text-decoration: none; filter: brightness(1.15); }
/* Ticketnummer als Link ins (Mock-)ServiceNow, immer neuer Tab - nur wenn
   beim Pruefen ein Ticket gefunden wurde (entry.ticket_id). */
.ticket-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--link-color); text-decoration: none; border-bottom: 1px solid transparent; }
.ticket-link:hover { border-bottom-color: currentColor; }
.ticket-link .icon { width: 13px; height: 13px; opacity: 0.7; }
/* "Geprueft durch"-Zeilen in Tabellen (wer hat welchen Schritt gemacht). */
.pruefer { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; line-height: 1.3; }
.pruefer .muted { font-weight: 500; }
/* Kurzes Kommentarfeld direkt neben einem Aktions-Button in Tabellenzeilen
   (z. B. HR: Auszahlung bestaetigen). */
.inline-comment-form { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.inline-comment-form input[type="text"] { width: 220px; max-width: 100%; min-height: 30px; padding: 4px 10px; font-size: 0.85rem; }
/* Pruefverlauf (Detailseite): schlichte vertikale Liste mit Zeitpunkt, Person, Aktion */
.verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.verlauf li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.verlauf li:last-child { border-bottom: none; }
.verlauf .verlauf-zeit { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.verlauf .verlauf-aktion { font-weight: 600; }
.verlauf .verlauf-detail { color: var(--text-muted); font-size: 0.82rem; margin-top: 2px; word-break: break-word; }
@media (max-width: 560px) { .verlauf li { grid-template-columns: 1fr; gap: 2px; } }
.badge-gruen { background: var(--badge-gruen-bg); color: var(--badge-gruen-fg); }
.badge-gelb { background: var(--badge-gelb-bg); color: var(--badge-gelb-fg); }
.badge-rot { background: var(--badge-rot-bg); color: var(--badge-rot-fg); }
.badge-keins { background: var(--badge-keins-bg); color: var(--badge-keins-fg); }
.zuschlag-badges { display: flex; flex-wrap: wrap; gap: 4px; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.status-eingereicht { background: var(--status-eingereicht-bg); color: var(--status-eingereicht-fg); }
.status-geprueft { background: var(--status-geprueft-bg); color: var(--status-geprueft-fg); }
.status-genehmigt { background: var(--status-genehmigt-bg); color: var(--status-genehmigt-fg); }
.status-storniert { background: var(--status-storniert-bg); color: var(--status-storniert-fg); }
.status-auszahlung_beantragt { background: var(--status-auszahlung-beantragt-bg); color: var(--status-auszahlung-beantragt-fg); }
.status-auszahlung_freigegeben { background: var(--status-auszahlung-freigegeben-bg); color: var(--status-auszahlung-freigegeben-fg); }
.status-ausgezahlt { background: var(--status-ausgezahlt-bg); color: var(--status-ausgezahlt-fg); }
.status-offen { background: var(--status-offen-bg); color: var(--status-offen-fg); }
.status-abgelehnt { background: var(--status-abgelehnt-bg); color: var(--status-abgelehnt-fg); }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-gruen { background: var(--acp-green); }
.dot-gelb { background: var(--acp-amber); }
.dot-rot { background: var(--acp-red); }
.dot-keins { background: var(--text-muted); }

/* --- Balkendiagramm (Meine Teams) --------------------------------------- */
.chart-card { padding: 16px 20px 4px; }
.chart-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; }
.chart-legend .legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.chart-scroll { overflow-x: auto; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-baseline { stroke: var(--text-muted); stroke-width: 1.2; }
.chart-threshold { stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart-axis-label { font-size: 10px; fill: var(--text-muted); }
.chart-threshold-label { font-size: 10.5px; font-weight: 700; }
.chart-value-label { font-size: 11px; font-weight: 700; fill: var(--text-primary); }
.chart-bar-label { font-size: 11px; fill: var(--text-muted); }

/* --- Forms -------------------------------------------------------------- */
label { display: block; font-size: 0.85rem; color: var(--text-primary); margin: 14px 0 5px; font-weight: 600; }
input[type=text], input[type=number], input[type=date], input[type=time], input[type=file], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border-input); border-radius: var(--radius);
  font-size: 0.92rem; font-family: inherit; background: var(--bg-input); color: var(--text-primary);
}
input[type=text]:focus, input[type=number]:focus, input[type=date]:focus, input[type=time]:focus,
input[type=file]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acp-red); box-shadow: 0 0 0 3px rgba(240, 15, 64, 0.22);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
textarea { min-height: 80px; resize: vertical; }

/* Chrome/Edge zeichnen das Kalender-/Uhr-Icon von type=date/time standardmaessig
   schwarz - auf dem dunklen --bg-input (Standardmodus) ist es dadurch praktisch
   unsichtbar. Im Hellmodus (helles Eingabefeld) bleibt das Original-Icon. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
}
html[data-theme="light"] input[type=date]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type=time]::-webkit-calendar-picker-indicator {
  filter: none;
}
.form-hint { color: var(--text-muted); font-size: 0.8rem; margin-top: 4px; }
.form-hint.snow-warn { color: var(--acp-amber); font-weight: 600; }
.checkbox-row {
  display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 0.92rem;
  margin: 14px 0 5px; cursor: pointer;
}
.checkbox-row input[type=checkbox] { width: auto; margin: 0; }
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row > div { flex: 1; min-width: 180px; }
/* Feldbreite signalisiert die erwartete Eingabelaenge: eine Stundenzahl
   oder ein Datum braucht keine 640px breite Box (nur fuer einzeln stehende
   Felder - in .form-row-Spalten bleibt die Spaltenbreite). */
.card-form > form > input[type=number], .card-form > form > input[type=date], .card-form > form > input[type=time],
.card-form > form > select { max-width: 260px; }
.card-form > form > input[type=text] { max-width: 480px; }

/* Freitext-Suche + Export (macros.search_form) ueber den Listen bei
   Controlling/HR/Technikleitung/Mitarbeitersuche - Suche links, Export-
   Button rechtsbuendig in derselben Zeile statt gedraengt im Pager. */
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.search-bar { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 240px; align-items: center; }
.search-bar input { flex: 1; min-width: 200px; max-width: 420px; }
/* Ein Filter-Dropdown darf nicht die ganze Zeile fuellen. */
.search-bar select { width: auto; min-width: 200px; max-width: 280px; flex: 0 1 auto; }
.export-btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex-shrink: 0; }
.export-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* CSV-Import Erstbefuellung: Datei-Auswahl + Vorschau-Tabelle. */
.upload-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.upload-row input[type=file] { flex: 1; min-width: 220px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 16px; border-radius: var(--radius); border: none;
  font-size: 0.9rem; font-weight: 600; font-family: inherit; line-height: 1.2; cursor: pointer; text-align: center;
  transition: background-color .12s, filter .12s, box-shadow .12s;
}
.btn .icon { width: 16px; height: 16px; }
.btn-sm .icon { width: 14px; height: 14px; }
/* Primaerfarbe Rot (statt vorher Teal) - abgestimmt auf das Schwesterportal
   (ATG M365-Multitenant), das dieselbe ACP-Rot als durchgaengige
   Interaktionsfarbe fuehrt; dezenter Leuchtschatten wie dort ("shadow-lg
   shadow-indigo-600/20") statt eines schlichten flachen Buttons. */
.btn-primary { background: var(--acp-red); color: #fff; box-shadow: 0 4px 14px -4px rgba(240, 15, 64, 0.45); }
.btn-primary:hover { filter: brightness(1.08); text-decoration: none; }
.btn-danger { background: transparent; color: var(--acp-red); border: 1px solid var(--acp-red); }
.btn-danger:hover { background: var(--badge-rot-bg); text-decoration: none; }
/* Kleine destruktive Aktionen in Tabellen (z. B. "Zurückziehen") als ruhige
   Textbuttons - rot, aber ohne Rahmen, damit die Zeile nicht "schreit". */
.btn-danger.btn-sm { border-color: transparent; }
.btn-danger.btn-sm:hover { border-color: var(--acp-red); }
.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-input); }
.btn-secondary:hover { background: var(--bg-surface-hover); text-decoration: none; }
.btn-sm { min-height: 30px; padding: 0 12px; font-size: 0.8rem; gap: 6px; }
.btn-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; font-size: 0.9rem; border: 1px solid; border-left-width: 4px; }
.alert-ok { background: var(--alert-ok-bg); color: var(--alert-ok-fg); border-color: var(--alert-ok-border); border-left-color: var(--acp-green); }
.alert-info { background: var(--alert-info-bg); color: var(--alert-info-fg); border-color: var(--alert-info-border); border-left-color: var(--acp-teal); }
.alert-warn { background: var(--alert-warn-bg); color: var(--alert-warn-fg); border-color: var(--alert-warn-border); border-left-color: var(--acp-amber); }

.empty-state { color: var(--text-muted); padding: 26px 12px; text-align: center; }
.empty-state a { font-weight: 600; }
td.empty-state { text-align: center; }

/* --- Monatskalender (Meine Übersicht -> Monatskalender) ------------------ */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-nav-title { font-weight: 700; font-size: 1.05rem; }
.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 12px; }
.cal-legend .legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.cal-scroll { min-width: 0; }
/* Immer 7 gleich breite, fluide Spalten - auch auf schmalen Screens ein
   echtes Monatsraster statt einer seitlich wegscrollenden Liste. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-weekday { text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); padding: 4px 0; }
.cal-day {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  min-height: 74px; padding: 6px; display: flex; flex-direction: column; gap: 3px;
}
.cal-day-out { opacity: 0.35; }
.cal-day-today { border-color: var(--acp-teal); border-width: 2px; }
/* Kraeftige, direkt scanbare Einfaerbung ganzer Tageszellen statt nur
   kleiner Chips - gruen = Ueberstunden (aufgebaut), gelb = Zeitausgleich
   (abgebaut), teal = beides am selben Tag. */
.cal-day-auf { background: var(--badge-gruen-bg); border-left: 3px solid var(--acp-green); }
.cal-day-ab { background: var(--badge-gelb-bg); border-left: 3px solid var(--acp-amber); }
.cal-day-beide { background: linear-gradient(135deg, var(--badge-gruen-bg) 0%, var(--badge-gruen-bg) 50%, var(--badge-gelb-bg) 50%, var(--badge-gelb-bg) 100%); border-left: 3px solid var(--acp-teal); }
.cal-day-num { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.cal-chip { font-size: 0.72rem; font-weight: 600; border-radius: 4px; padding: 2px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip-auf { background: var(--badge-gruen-bg); color: var(--badge-gruen-fg); }
.cal-chip-ab { background: var(--badge-gelb-bg); color: var(--badge-gelb-fg); }
@media (max-width: 700px) {
  .cal-grid { gap: 3px; }
  .cal-day { min-height: 46px; padding: 4px; gap: 2px; border-radius: 6px; }
  .cal-day-num { font-size: 0.72rem; }
  /* Auf dem Handy werden die Chips zu farbigen Balken - der Text steckt im
     Tooltip, das Raster bleibt lesbar. */
  .cal-chip { height: 6px; padding: 0; }
  .cal-chip-text { display: none; }
  .cal-chip-auf { background: var(--acp-green); }
  .cal-chip-ab { background: var(--acp-amber); }
}

/* --- Login (Rollen-Switcher) --------------------------------------------- */
.login-wrap { max-width: 760px; margin: 60px auto; padding: 0 20px; }
.login-header { text-align: center; margin-bottom: 32px; }
.login-header .logo { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); }
.login-header .logo { display: inline-flex; align-items: center; gap: 12px; }
/* Auf der hellen Login-Seite steht das Logo auf einer dunklen Kachel, damit
   der helle Zifferblatt-Ring in beiden Themes traegt. */
.login-header .logo .logo-mark {
  width: 44px; height: 44px; padding: 6px; border-radius: 12px; background: #1B2226; box-sizing: content-box;
}
.role-group { margin-bottom: 26px; }
.role-group h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.user-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.user-tile {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 16px; cursor: pointer; min-width: 190px; flex: 1;
  transition: border-color .15s;
}
.user-tile:hover { border-color: var(--acp-red); transform: translateY(-1px); box-shadow: 0 6px 18px -10px rgba(0,0,0,0.5); }
.user-tile { transition: border-color .15s, transform .15s, box-shadow .15s; }
.user-tile button { all: unset; cursor: pointer; display: block; width: 100%; }
.user-tile .name { font-weight: 600; color: var(--text-primary); }
.user-tile .meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

/* --- Footer (ACP-Standard) ----------------------------------------------- */
footer.acp-footer {
  background: var(--acp-slate); color: #C9D0D4; padding: 20px 32px; font-size: 0.8rem;
  margin-top: auto;
}
footer.acp-footer .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
footer.acp-footer a { color: #C9D0D4; }
footer.acp-footer .tagline { font-style: italic; margin-top: 4px; color: #9FAAB0; }

.mail-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; }
.mail-hint a { color: var(--link-color); }

/* --- Pager (macros.pager) --------------------------------------------
   Ruhige, klar getrennte Zeile unter der Tabelle: Ergebniszahl links,
   Seitengroesse + Seiten-Navigation rechts mit deutlichem Abstand
   zueinander (kein Nebeneinander-Gedraenge mehr). */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 18px 0 28px; }
.pager-info { font-size: 0.82rem; color: var(--text-muted); }
.pager-controls { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.pager-size { display: inline-flex; border: 1px solid var(--border-input); border-radius: var(--radius); overflow: hidden; }
.pager-size-btn {
  padding: 6px 11px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
  background: var(--bg-input); border-right: 1px solid var(--border-input); text-decoration: none; line-height: 1.3;
}
.pager-size-btn:last-child { border-right: none; }
.pager-size-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); text-decoration: none; }
.pager-size-btn.active { background: var(--acp-red); color: #fff; }

.pager-nav { display: inline-flex; align-items: center; gap: 10px; }
.pager-nav-current { font-size: 0.82rem; color: var(--text-muted); min-width: 3.5em; text-align: center; }
.pager-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid var(--border-input);
  background: var(--bg-input); color: var(--text-primary); font-size: 1.15rem; line-height: 1;
  text-decoration: none;
}
.pager-nav-btn:hover { background: var(--bg-surface-hover); border-color: var(--acp-red); text-decoration: none; }

/* --- Export / Drucken (macros.pager "Exportieren") ---------------------
   Die exportierte Seite ist die echte, ACP-gestaltete Portalseite selbst -
   kein separates Template. Beim Drucken/"Als PDF speichern" werden Nav,
   Header, Footer und Aktions-Elemente ausgeblendet und Farben fest auf ein
   helles, gut lesbares Layout gesetzt (unabhaengig vom aktuell aktiven
   Dark-/Hellmodus). #}
@media print {
  header.acp-header, nav.acp-sidebar, .nav-backdrop, footer.acp-footer,
  .list-toolbar, .pager, .btn-row, .cal-nav, .kpi-row .form-hint,
  a.btn, button, form:has(button) { display: none !important; }
  body { background: #fff !important; }
  main.acp-main { max-width: 100% !important; padding: 0 !important; }
  .acp-shell::before {
    content: "ACP IT Solutions AG · Überstundentool"; display: block;
    font-weight: 700; font-size: 1.15rem; color: #1F2A30;
    border-bottom: 3px solid #F00F40; padding-bottom: 10px; margin-bottom: 18px;
  }
  h1, h2, .subtitle, .kpi-label, .form-hint { color: #1F2A30 !important; }
  .kpi-card, .card, .table-wrap { background: #fff !important; border-color: #D7DADC !important; }
  table.acp-table { background: #fff !important; }
  table.acp-table th { color: #5C6970 !important; border-bottom-color: #D7DADC !important; }
  table.acp-table td { color: #1F2A30 !important; border-bottom-color: #D7DADC !important; }
  .badge-gruen, .status-genehmigt, .status-ausgezahlt { background: #E4F5EA !important; color: #1E8E4C !important; }
  .badge-gelb, .status-auszahlung_freigegeben { background: #FFF3DA !important; color: #C77700 !important; }
  .badge-rot, .status-storniert, .status-abgelehnt { background: #FDE2E7 !important; color: #F00F40 !important; }
  .badge-keins, .status-eingereicht, .status-offen { background: #EDEFF0 !important; color: #5C6970 !important; }
  .status-geprueft, .status-auszahlung_beantragt { background: #EAF0FF !important; color: #3355CC !important; }
}

/* --- Responsiv / mobile --------------------------------------------------
   Sidebar wird ab 900px Breite zur Off-Canvas-Schublade (Hamburger-Menue),
   Tabellen scrollen horizontal statt Inhalte zu stauchen, KPI-Karten und
   Formularzeilen ruecken enger zusammen. Desktop-Verhalten oberhalb der
   Breakpoints bleibt unveraendert. */
@media (max-width: 900px) {
  header.acp-header { padding: 0 14px; }
  header.acp-header .brand .subtitle-text { display: none; }
  /* Name/Rolle stehen im Drawer (.nav-user) - im schmalen Header nur die
     Aktions-Buttons, damit nichts ueberlappt. */
  header.acp-header .user-info .user-name, header.acp-header .role-badge { display: none; }
  .nav-toggle { display: inline-flex; }

  .acp-body { position: relative; }

  nav.acp-sidebar {
    position: fixed;
    top: 60px; left: 0; bottom: 0;
    width: 260px; max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 50;
    overflow-y: auto;
    box-shadow: 3px 0 24px rgba(0,0,0,0.4);
  }
  nav.acp-sidebar.open { transform: translateX(0); }

  .nav-backdrop {
    display: block;
    position: fixed; top: 60px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 40;
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }

  main.acp-main { padding: 18px 16px; width: 100%; }

  .kpi-row { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .kpi-card { padding: 12px 14px; }
  .kpi-card .kpi-value { font-size: 1.4rem; }

  table.acp-table th, table.acp-table td { padding: 8px 9px; font-size: 0.85rem; }

  .form-row { flex-direction: column; gap: 0; }
  .form-row > div { min-width: 0; }

  .login-wrap { margin: 28px auto; padding: 0 14px; }
}

@media (max-width: 560px) {
  header.acp-header .user-info .user-name { display: none; }
  header.acp-header .role-badge { font-size: 0.68rem; padding: 3px 7px; }
  header.acp-header .btn-text-full { display: none; }
  header.acp-header .btn-icon { display: inline; font-size: 1rem; }
  header.acp-header .logout-btn, header.acp-header .theme-toggle { padding: 6px 9px; }
  header.acp-header .user-info { gap: 6px; }
  header.acp-header .header-right { gap: 6px; }
  h1 { font-size: 1.3rem; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-actions .btn { width: 100%; }
  .user-grid { flex-direction: column; }
  .user-tile { min-width: 0; }
  .chart-legend { font-size: 0.74rem; gap: 10px; }
}