/*
 * Theme-Anpassungen auf Basis der Figma-Make-Referenz (Design-Quelle:
 * heruntergeladener Figma-Make-Quellcode, siehe CLAUDE.md, Abschnitt
 * Tech-Stack). Bootstrap 5 wird als vorkompiliertes CSS selbst gehostet
 * (static/vendor/bootstrap/); dessen .btn-primary etc. referenzieren ihre
 * Farben NICHT über --bs-primary (das ist erst mit einem Sass-Rebuild aus
 * den Bootstrap-Quellen möglich), daher hier direkte Komponenten-Overrides
 * statt reiner Custom-Property-Umdefinition.
 */

@import url('../vendor/fonts/fonts.css');

:root {
  --dfr-navy: #112c39;
  --dfr-navy-light: #1a3f4f;
  --dfr-primary: #8999d0;
  --dfr-secondary: #a6b4e4;
  --dfr-accent: #ce8934;
  --dfr-tint: #c0c9eb;
  --dfr-success: #ceebc0;
}

body {
  font-family: 'Quicksand', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand {
  font-family: 'Exo 2', sans-serif;
}

/* Kopfzeile: dunkler Navy-Verlauf mit hellblauem Akzentstrich, wie im
   Figma-Header (Header.tsx) */
.navbar-dfr {
  background: linear-gradient(to right, var(--dfr-navy), var(--dfr-navy-light));
  border-bottom: 4px solid var(--dfr-primary);
  box-shadow: 0 1rem 2rem rgba(17, 44, 57, 0.3);
}

.navbar-dfr .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Pillenförmige Nav-Buttons in der Kopfzeile (Übersicht/Administration/
   Archiv/Verlauf, Design-Referenz: Header.tsx) */
.dfr-nav-pill {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
}

.dfr-nav-pill:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Wiederverwendung von .navbar-dfr als Tabellenkopf (z.B. "Meine
   Mandanten"): Bootstraps Tabellen-CSS setzt auf JEDER Zelle einen
   eigenen (weißen) --bs-table-bg-Hintergrund, der den Verlauf sonst
   komplett überdeckt. Hier auf transparent gesetzt, damit der Verlauf
   des <thead> durchscheint. */
thead.navbar-dfr,
thead.navbar-dfr th {
  --bs-table-bg: transparent;
  color: #fff;
}

/* Primäre Aktionen: dunkles Navy, hellt beim Hover zu Primary auf
   (entspricht dem "in_bearbeitung"-Stil von ActionButton.tsx) */
.btn-primary {
  background-color: var(--dfr-navy);
  border-color: var(--dfr-navy);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--dfr-primary) !important;
  border-color: var(--dfr-primary) !important;
}

/* Hervorgehobene Aktion (z.B. "Entwurf erstellen"): Verlauf von Secondary
   zu Accent, entspricht dem "entwurf_erstellt"-Stil von ActionButton.tsx */
.btn-dfr-cta {
  background: linear-gradient(to right, var(--dfr-secondary), var(--dfr-accent));
  border: none;
  color: #fff;
}

.btn-dfr-cta:hover {
  filter: brightness(0.95);
  color: #fff;
}

.btn-dfr-accent {
  background-color: var(--dfr-accent);
  border-color: var(--dfr-accent);
  color: #fff;
}

.btn-dfr-accent:hover {
  filter: brightness(0.92);
  color: #fff;
}

.text-primary {
  color: var(--dfr-primary) !important;
}

.bg-primary {
  background-color: var(--dfr-primary) !important;
}

/* Abgerundete Ecken und weicherer Schatten, wie durchgängig im Figma-Design
   (rounded-xl / shadow-lg) */
.card,
.btn,
.form-control,
.form-select {
  border-radius: 0.75rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--dfr-primary);
  box-shadow: 0 0 0 0.2rem rgba(137, 153, 208, 0.25);
}

.card {
  box-shadow: 0 0.5rem 1rem rgba(17, 44, 57, 0.08);
  border: 2px solid var(--dfr-tint);
  border-radius: 1rem;
}

/* Bootstraps .card-header rundet ihre eigenen oberen Ecken über die
   Variable --bs-card-inner-border-radius, die weiterhin von Bootstraps
   UNVERÄNDERTEM Standard-Kartenradius abgeleitet wird (5px) — nicht von
   unserem oben gesetzten 1rem. Dadurch schließt z.B. der farbige
   Rahmen der Prioritäts-Karten (HOCH/MITTEL/NIEDRIG auf der
   Monatsabrechnung-Seite) nicht sauber mit der abgerundeten Kartenecke
   ab. Hier explizit auf denselben Radius wie .card gesetzt. */
.card > .card-header:first-child {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

/* Derselbe Radius-Versatz wie oben bei .card-header, nur am unteren
   Ende: die letzte Zeile einer .list-group-flush (z.B. die
   Aufgaben-Listen in den Prioritäts-Karten) rundet ihre unteren Ecken
   ebenfalls über Bootstraps unveränderten Standardradius (5px statt
   1rem). Fällt bei leeren Listen ("Keine Aufgaben") kaum auf, weil kein
   Hintergrund/Rahmen den Versatz zeigt — bei befüllten Zeilen (z.B.
   "MITTEL" mit einer echten Aufgabe) sichtbar. */
.card > .list-group.list-group-flush:last-child,
.card > .list-group.list-group-flush:last-child > .list-group-item:last-child {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

/* Status-Punkte in Tabellenübersichten (Design-Referenz: ClientOverview.tsx) */
.dfr-dot-blue { background-color: #3b82f6; }
.dfr-dot-orange { background-color: #f97316; }
.dfr-dot-purple { background-color: var(--dfr-secondary); }
.dfr-dot-red { background-color: #ef4444; }
.dfr-dot-green { background-color: #22c55e; }
.dfr-dot-gray { background-color: #94a3b8; }

/* Zähl-Badge (z.B. offene Aufgaben) in Tabellenübersichten — exakt
   bg-orange-100/text-orange-700 laut App-Beschreibung */
.badge-dfr-warn {
  background-color: #ffedd5;
  color: #c2410c;
}

/* Nachrichten-Badge — exakt bg-[#8999d0]/20 + border-[#8999d0] laut
   App-Beschreibung */
.badge-dfr-info {
  background-color: rgba(137, 153, 208, 0.2);
  border: 1px solid var(--dfr-primary);
  color: var(--dfr-navy);
}

/* "Öffnen"-Aktion in Tabellenzeilen: heller Verlauf, kompaktere Pille
   (Design-Referenz: ClientOverview.tsx, unterscheidet sich bewusst vom
   kräftigeren btn-dfr-cta) */
.btn-dfr-open {
  background: linear-gradient(to right, var(--dfr-secondary), var(--dfr-primary));
  border: none;
  color: #fff;
}

.btn-dfr-open:hover {
  filter: brightness(0.95);
  color: #fff;
}

/* Prioritäts-Badges auf der Monatsabrechnung-Seite (Design-Referenz:
   SachbearbeiterDashboard.tsx-Prioritätsfarben) */
.badge-pastel-blue { background-color: #dbeafe; color: #1e40af; }
.badge-pastel-yellow { background-color: #fef9c3; color: #854d0e; }
.badge-pastel-red { background-color: #fee2e2; color: #991b1b; }

/* Workflow-Status-Badge in der Kopfzeile der Monatsabrechnung — exakte
   Marken-Töne laut App-Beschreibung ("Design-System, niemals abweichen"),
   NICHT die generischen Tailwind-Pastelle aus StatusBadge.tsx */
.badge-status-primary { background-color: var(--dfr-primary); color: #fff; }
.badge-status-secondary { background-color: var(--dfr-secondary); color: var(--dfr-navy); }
.badge-status-success { background-color: var(--dfr-success); color: var(--dfr-navy); }
.badge-status-warning { background-color: #fed7aa; color: #9a3412; }
.badge-status-gray { background-color: #e2e8f0; color: #334155; }

/* Gesamtfortschritt-Karte auf der Monatsabrechnung-Seite
   (Design-Referenz: MonthView.tsx) */
@keyframes dfr-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.dfr-pulse-dot {
  animation: dfr-pulse 2s ease-in-out infinite;
}

.dfr-progress-percent {
  background: linear-gradient(to right, var(--dfr-primary), var(--dfr-navy));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dfr-progress-card .progress-bar {
  background-color: var(--dfr-success);
}

/* Unterstrich-Tabs (Design-Referenz: ClientDetailView.tsx) — z.B.
   "Abrechnungsläufe"/"Chat-Verlauf" auf der Mandanten-Detailseite */
.dfr-tabs {
  border-bottom: 1px solid var(--dfr-tint);
}

.dfr-tabs .nav-link {
  border: none;
  border-radius: 0;
  color: #64748b;
  font-weight: 500;
  padding: 0.5rem 0.25rem;
  margin-right: 1.5rem;
  border-bottom: 2px solid transparent;
}

.dfr-tabs .nav-link:hover {
  color: var(--dfr-navy);
}

.dfr-tabs .nav-link.active {
  color: var(--dfr-navy);
  font-weight: 700;
  border-bottom-color: var(--dfr-navy);
  background: none;
}

/* Logo-/Avatar-Kachel in der Kopfzeile */
.dfr-logo-tile {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--dfr-secondary), var(--dfr-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  color: #fff;
  flex-shrink: 0;
}

/* Farbvarianten für die Mandanten-Logo-Kacheln in der Admin-
   Mandantenverwaltung (Design-Referenz: Gaelles Prototyp zeigt dort
   unterschiedlich eingefärbte Kacheln je Mandant) */
.dfr-logo-tile-a { background: linear-gradient(135deg, var(--dfr-secondary), var(--dfr-accent)); }
.dfr-logo-tile-b { background: linear-gradient(135deg, #7dd3c0, #3f8f80); }
.dfr-logo-tile-c { background: linear-gradient(135deg, var(--dfr-accent), #a85a1c); }
.dfr-logo-tile-d { background: linear-gradient(135deg, var(--dfr-primary), var(--dfr-navy)); }

/* Kopfzeilen-Verläufe der Formulare-Kategorie-Karten (Design-Referenz:
   Gaelles Figma-Prototyp, /app/forms — vier Kategorien, jeweils eigener
   Verlauf: Arbeitsvertrag blau-lila, Zeugnis blau, Kündigung orange-lila,
   Vertragsanpassung dunkelblau) */
.dfr-form-card-header {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  color: #fff;
}

.dfr-form-card-arbeitsvertrag { background: linear-gradient(to right, var(--dfr-primary), var(--dfr-secondary)); }
.dfr-form-card-zeugnis { background: linear-gradient(to right, #3b82f6, var(--dfr-primary)); }
.dfr-form-card-kuendigung { background: linear-gradient(to right, var(--dfr-accent), var(--dfr-secondary)); }
.dfr-form-card-vertragsanpassung { background: linear-gradient(to right, var(--dfr-navy), var(--dfr-navy-light)); }

/* Formularantrag-Modal (Klick auf "+" im Formulare-Modul, Design-Referenz:
   Screenshot von Jonas, 2026-09-21 — Verlauf-Kopf mit Icon-Kachel,
   in Sektionen gruppierte weiße Karten auf leicht getöntem Hintergrund,
   Großbuchstaben-Feldlabels). Nutzt dieselben Verlauf-Klassen wie die
   Kategorie-Karten oben (.dfr-form-card-*), damit Kachel und Modal
   farblich zusammengehören. */
.dfr-formular-modal-body {
  background-color: #f4f5fb;
  /* Bewusst NICHT auf Bootstraps .modal-dialog-scrollable-Mechanik
     verlassen (Flex-Shrink von .modal-body innerhalb von .modal-content)
     — beobachtet 2026-09-21, dass diese bei zwei Sektionen + Wochentage-
     Auswahl zuverlässig versagte: .modal-body behielt seine volle
     Inhaltshöhe, der Footer rutschte dadurch unsichtbar aus dem Modal
     heraus (auch mit explizitem min-height:0 und sogar einer fest
     gesetzten Höhe auf .modal-content reproduzierbar — vermutlich eine
     Eigenheit des Rendering in dieser Umgebung, nicht nur ein simpler
     CSS-Fehler). Stattdessen ein direktes, von Flexbox-Berechnungen
     unabhängiges max-height + eigener Scrollbereich. */
  max-height: 65vh;
  overflow-y: auto;
}

.dfr-formular-icon-box {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.dfr-formular-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.8);
}

.dfr-formular-sektion {
  background-color: #fff;
  border: 1px solid var(--dfr-tint);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.dfr-formular-sektion-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--dfr-navy);
  margin-bottom: 1rem;
}

.dfr-formular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.dfr-formular-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.dfr-formular-required {
  color: var(--dfr-accent);
  margin-left: 0.15rem;
}

/* Aufgaben-Karten auf der Monatsabrechnung (Design-Referenz: TaskManager.tsx
   aus dem Figma-Export + Screenshot von Jonas, 2026-10-03). Jede Aufgabe ist
   eine eigene, abgesetzte Karte (lavendel getönt, 2px Rand, Schatten) statt
   einer Zeile in einer gemeinsamen Box; die Prioritäts-Spalte ist nur noch
   der weiße Container darum. */
.dfr-task-column {
  background-color: #fff;
  border-radius: 0.75rem;
  padding: 1rem;
  height: 100%;
}

.dfr-task-column-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid;
}

.dfr-task-column-hoch .dfr-task-column-header { border-color: #fca5a5; color: #dc2626; }
.dfr-task-column-mittel .dfr-task-column-header { border-color: #fdba74; color: #ea580c; }
.dfr-task-column-niedrig .dfr-task-column-header { border-color: #93c5fd; color: #2563eb; }

.dfr-task-column-title {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
  color: inherit;
}

.dfr-task-count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  background-color: var(--dfr-primary);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

/* Innenabstand, damit der Kartenschatten im scrollenden Container nicht
   an den Rändern abgeschnitten wird. */
.dfr-task-column-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 600px;
  overflow-y: auto;
  padding: 0.25rem 0.5rem 0.75rem 0.25rem;
}

.dfr-task-card {
  padding: 0.75rem;
  border: 2px solid rgba(192, 201, 235, 0.4);
  border-radius: 0.75rem;
  background-color: rgba(192, 201, 235, 0.2);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  font-size: 0.875rem;
  transition: box-shadow 0.15s ease;
}

.dfr-task-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.dfr-task-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.dfr-task-badge-hoch { color: #b91c1c; background-color: #fee2e2; border-color: #fecaca; }
.dfr-task-badge-mittel { color: #c2410c; background-color: #ffedd5; border-color: #fed7aa; }
.dfr-task-badge-niedrig { color: #1d4ed8; background-color: #dbeafe; border-color: #bfdbfe; }
.dfr-task-badge-rueckfrage { color: #854d0e; background-color: #fef9c3; border-color: #fde68a; }
.dfr-task-badge-erledigt { color: var(--dfr-navy); background-color: var(--dfr-tint); border-color: var(--dfr-tint); }

.dfr-task-title {
  display: block;
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
}

.dfr-task-title:hover { color: var(--dfr-navy); text-decoration: underline; }

.dfr-task-desc {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: #475569;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dfr-task-meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #475569;
}

.dfr-task-footer {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e2e8f0;
}

.dfr-task-files {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #475569;
}

.dfr-task-plus {
  margin-left: auto;
  padding: 0 0.375rem;
  border-radius: 0.375rem;
  background-color: #f1f5f9;
  color: #334155;
  font-weight: 500;
  text-decoration: none;
}

.dfr-task-plus:hover { background-color: var(--dfr-tint); color: var(--dfr-navy); }

.dfr-task-dropzone {
  display: block;
  margin-top: 0.25rem;
  padding: 0.5rem 0;
  border: 1px dashed #94a3b8;
  border-radius: 0.375rem;
  background-color: #e2e8f0;
  font-size: 0.75rem;
  color: #475569;
  text-align: center;
  text-decoration: none;
}

.dfr-task-dropzone:hover { background-color: var(--dfr-tint); color: var(--dfr-navy); }

.dfr-task-empty {
  padding: 1rem 0;
  font-size: 0.75rem;
  color: #94a3b8;
  text-align: center;
}

.dfr-task-done-section {
  padding-top: 1.5rem;
  border-top: 2px solid #e2e8f0;
}

.dfr-task-done-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--dfr-primary);
}

.dfr-task-done {
  padding: 0.75rem;
  border-left: 4px solid var(--dfr-primary);
  border-radius: 0.5rem;
  background-color: var(--dfr-success);
}

.dfr-task-done-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  text-decoration: line-through;
}

.dfr-task-done-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: #64748b;
}

/* Schieberegler (z.B. Mitarbeiter-Status im Aufgaben-Pop-up) in der Markenfarbe statt
   im Bootstrap-Standardblau. Bewusst nur für .form-switch: normale Checkboxen der
   Anwendung behalten vorerst ihr bisheriges Aussehen. */
.form-switch .form-check-input:checked {
  background-color: var(--dfr-primary);
  border-color: var(--dfr-primary);
}

.form-switch .form-check-input:focus {
  border-color: var(--dfr-primary);
  box-shadow: 0 0 0 0.2rem rgba(137, 153, 208, 0.25);
}

/* Klick auf eine Aufgabe (Karte bzw. erledigte Zeile) öffnet deren Pop-up. */
.dfr-task-card[data-aufgabe-url],
.dfr-task-done[data-aufgabe-url] { cursor: pointer; }