/* Pfyl's Office – Custom Styles */

/* ═══════════════════════════════════════════════════════════════════════════
   MARKENFARBEN – Quelle: Skill `pfyls-brand`. Werte nie hier ändern, sondern
   dort; diese Datei ist nur die Übersetzung ins Tool.

   Zwei Kanäle, die sich nie treffen:
     BEREICH (Treuhand/Steuern/Consulting)  → Rahmen: Band, Marker, Badge
     AMPEL   (Frist und SLA)                → Fläche: Zeilenhintergrund
   Weil der Bereich nur den Rahmen färbt, kann eine Ampelfarbe nie mit einer
   Bereichsfarbe kollidieren. Das ist Geometrie, nicht Disziplin.
   Siehe CLAUDE.md §8 und UI_KONVENTIONEN.md §5.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Bereichsfarben – kräftig = weisse Schrift, hell = Schrift --pf-auf-hell */
    --pf-marke:            #142b70;   /* Grundton, 13,05:1 auf Weiss           */
    --pf-marke-dunkel:     #0d1d4d;   /* nur Hover/Active                      */
    --pf-treuhand:         #2947b8;   /* weisse Schrift: 7,81:1                */
    --pf-treuhand-hell:    #dfe6f0;   /* Schrift --pf-auf-hell: 10,39:1        */
    --pf-steuern:          #12702f;   /* weisse Schrift: 6,20:1                */
    --pf-steuern-hell:     #eef7f0;   /* Schrift --pf-auf-hell: 11,93:1        */
    --pf-consulting:       #9d6616;   /* weisse Schrift: 4,83:1                */
    --pf-consulting-hell:  #f6efe0;   /* Schrift --pf-auf-hell: 11,40:1        */
    --pf-auf-hell:         #142b70;   /* Schrift auf jeder hellen Bereichsfläche */

    /* Ampelfarben – bewusst entsättigt, damit das Ampel-Grün nicht mit dem
       Marken-Grün verwechselt wird. Sie unterscheiden sich nicht über den
       Farbton, sondern über die Bauart: Ampel ist immer eine blasse Fläche
       mit dunkler Schrift, Bereich immer eine satte Fläche mit weisser. */
    --pf-ampel-rot-flaeche:     #fdf2f2;
    --pf-ampel-rot-chip:        #f7dcdc;
    --pf-ampel-rot-text:        #8f2727;   /* auf Chip: 6,52:1                 */
    --pf-ampel-gelb-flaeche:    #fdf8ec;
    --pf-ampel-gelb-chip:       #f8eccf;
    --pf-ampel-gelb-text:       #7a5410;   /* auf Chip: 5,77:1                 */
    --pf-ampel-gruen-flaeche:   #f5faf2;
    --pf-ampel-gruen-chip:      #e4efe0;
    --pf-ampel-gruen-text:      #3d5c23;   /* auf Chip: 6,44:1                 */
    --pf-ampel-neutral-flaeche: #f4f5f7;
    --pf-ampel-neutral-chip:    #e6e8ec;
    --pf-ampel-neutral-text:    #4a5160;   /* auf Chip: 6,49:1                 */
}

/* ─── Bootstrap auf die Marke ziehen ────────────────────────────────────────
   Bootstrap 5.3.2 rechnet `.text-primary`, `.bg-primary` und `.border-primary`
   über --bs-primary-rgb. Ein Wert hier ersetzt darum rund 30 Fundstellen im
   Code, ohne eine einzige Klasse umzuschreiben. Die Buttons brauchen einen
   eigenen Block: deren Farben stehen in 5.3 fest in der Klasse. */
:root,
[data-bs-theme="light"] {
    --bs-primary:          #142b70;
    --bs-primary-rgb:      20, 43, 112;
    --bs-link-color:       #142b70;
    --bs-link-color-rgb:   20, 43, 112;
    --bs-link-hover-color: #0d1d4d;
    --bs-focus-ring-color: rgba(20, 43, 112, .25);
}

.btn-primary {
    --bs-btn-bg:                   #142b70;
    --bs-btn-border-color:         #142b70;
    --bs-btn-hover-bg:             #0f2158;
    --bs-btn-hover-border-color:   #0d1d4d;
    --bs-btn-active-bg:            #0d1d4d;
    --bs-btn-active-border-color:  #0b1840;
    --bs-btn-disabled-bg:          #142b70;
    --bs-btn-disabled-border-color:#142b70;
    --bs-btn-focus-shadow-rgb:     41, 71, 184;
}

.btn-outline-primary {
    --bs-btn-color:                #142b70;
    --bs-btn-border-color:         #142b70;
    --bs-btn-hover-bg:             #142b70;
    --bs-btn-hover-border-color:   #142b70;
    --bs-btn-active-bg:            #142b70;
    --bs-btn-active-border-color:  #142b70;
    --bs-btn-focus-shadow-rgb:     41, 71, 184;
}

body {
    background-color: #f0f2f7;
    font-size: 0.92rem;
}

/* Sidebar / Navbar */
.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Markenband unter der Navigation – die ganze Identität in einer Zeile.
   Die Navbar bleibt bewusst weiss: das Tool ist stundenlang offen. */
.navbar.bg-white {
    border-bottom: 3px solid var(--pf-marke) !important;
}

/* Aktive Seite: Unterstreichung per inset-Schatten, damit die Zeile beim
   Wechsel nicht springt (ein border-bottom würde 2px Höhe hinzufügen). */
.navbar .nav-link.active {
    color: var(--pf-marke);
    font-weight: 500;
    box-shadow: inset 0 -2px 0 var(--pf-treuhand);
}

/* Cards */
.card {
    border-radius: 0.5rem;
}

/* ═══ BEREICH – färbt ausschliesslich den Rahmen ════════════════════════════
   Drei Bauformen je Bereich:
     .bereich-<x>        satte Fläche, weisse Schrift   → Badge, Kachel, Balken
     .bereich-<x>-hell   helle Fläche, Schrift #142b70  → Karte, Hinterlegung
     .bereich-band-<x>   4px-Streifen links             → Listenblock, Karte

   Consulting ist vollständig definiert, aber noch nirgends verwendet: das
   Tool kennt heute nur die Module `treuhand` und `steuern`, weil Consulting
   fachlich innerhalb der Treuhand läuft (FACHLOGIK.md). Sobald eine eigene
   Seite kommt, ist die Farbe da – und stimmt mit der Website überein. */
.bereich-treuhand,
.bereich-steuern,
.bereich-consulting        { color: #fff !important; }
.bereich-treuhand          { background-color: var(--pf-treuhand) !important; }
.bereich-steuern           { background-color: var(--pf-steuern) !important; }
.bereich-consulting        { background-color: var(--pf-consulting) !important; }

.bereich-treuhand-hell,
.bereich-steuern-hell,
.bereich-consulting-hell   { color: var(--pf-auf-hell) !important; }
.bereich-treuhand-hell     { background-color: var(--pf-treuhand-hell) !important; }
.bereich-steuern-hell      { background-color: var(--pf-steuern-hell) !important; }
.bereich-consulting-hell   { background-color: var(--pf-consulting-hell) !important; }

/* Band: einseitiger Rand – darum ohne runde Ecken, sonst bricht die Kante. */
.bereich-band-treuhand,
.bereich-band-steuern,
.bereich-band-consulting   { border-radius: 0 !important; }
.bereich-band-treuhand     { border-left: 4px solid var(--pf-treuhand) !important; }
.bereich-band-steuern      { border-left: 4px solid var(--pf-steuern) !important; }
.bereich-band-consulting   { border-left: 4px solid var(--pf-consulting) !important; }

/* Abschnitt auf dem Dashboard: Band plus Einzug, damit der Streifen nicht am
   Inhalt klebt. Zusammen mit .bereich-band-<x> verwenden.
   ⚠️ Nur dort einsetzen, wo **mehrere Bereiche untereinander** stehen. Auf einer
   Seite, die ohnehin nur einen Bereich zeigt, sagt das Band nichts – dann ist es
   Dekoration, und Dekoration im Arbeitsbereich stört. Entscheid Samuel 07.08.2026. */
.bereich-abschnitt { padding-left: .7rem; }

/* Abschnitts-Titel in Bereichsfarbe.
   ⚠️ Bewusste Ausnahme von «Markenfarben sind Hintergrundfarben, keine
   Schriftfarben» (Skill pfyls-brand §1). Gilt **nur** für die kleine
   Abschnitts-Überschrift im Dashboard: bei 0.7rem Grossbuchstaben verschwindet
   Grau neben dem farbigen Band. Kontrast gemessen auf Weiss – Treuhand 7,81:1,
   Steuern 6,20:1, Consulting 4,83:1, alle über WCAG AA 4,5:1.
   Nicht für Fliesstext verwenden. */
.bereich-titel-treuhand   { color: var(--pf-treuhand) !important; }
.bereich-titel-steuern    { color: var(--pf-steuern) !important; }
.bereich-titel-consulting { color: var(--pf-consulting) !important; }

/* Aktionsknopf in Bereichsfarbe – der lauteste Punkt eines Abschnitts.
   Vorher trugen «Alle Treuhand-Aufgaben» und «Alle Steuern-Aufgaben» dieselbe
   Farbe, obwohl sie in zwei verschiedene Welten führen. */
.btn-bereich-treuhand {
    --bs-btn-color: #fff;             --bs-btn-bg: #2947b8;
    --bs-btn-border-color: #2947b8;   --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #223c9b;       --bs-btn-hover-border-color: #1e358a;
    --bs-btn-active-color: #fff;      --bs-btn-active-bg: #1e358a;
    --bs-btn-active-border-color: #1a2e77;
    --bs-btn-focus-shadow-rgb: 41, 71, 184;
}
.btn-bereich-steuern {
    --bs-btn-color: #fff;             --bs-btn-bg: #12702f;
    --bs-btn-border-color: #12702f;   --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0f5e28;       --bs-btn-hover-border-color: #0d5222;
    --bs-btn-active-color: #fff;      --bs-btn-active-bg: #0d5222;
    --bs-btn-active-border-color: #0b471e;
    --bs-btn-focus-shadow-rgb: 18, 112, 47;
}
.btn-bereich-consulting {
    --bs-btn-color: #fff;             --bs-btn-bg: #9d6616;
    --bs-btn-border-color: #9d6616;   --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #855613;       --bs-btn-hover-border-color: #744b10;
    --bs-btn-active-color: #fff;      --bs-btn-active-bg: #744b10;
    --bs-btn-active-border-color: #63400e;
    --bs-btn-focus-shadow-rgb: 157, 102, 22;
}

/* Marker vor einer Überschrift – ersetzt das eingefärbte Icon. */
.bereich-marker {
    display: inline-block;
    width: 8px;
    height: 1.05em;
    border-radius: 2px;
    vertical-align: -1px;
    margin-right: .45rem;
}
.bereich-marker-treuhand   { background-color: var(--pf-treuhand); }
.bereich-marker-steuern    { background-color: var(--pf-steuern); }
.bereich-marker-consulting { background-color: var(--pf-consulting); }

/* ═══ AMPEL – färbt ausschliesslich die Fläche in der Zeile ═════════════════
   Entsättigt gegenüber vorher. Grund: knalliges Bootstrap-Grün direkt neben
   dem Marken-Grün sieht aus wie ein Fehler. Bedeutung der Farben unverändert –
   die rechnet weiterhin allein includes/steuern_status.php. */
.table-danger td  { background-color: var(--pf-ampel-rot-flaeche) !important; }
.table-warning td { background-color: var(--pf-ampel-gelb-flaeche) !important; }
.table-success td { background-color: var(--pf-ampel-gruen-flaeche) !important; }

/* Ampel-Chips: bereitgestellt, heute noch nicht angewendet – die Seiten
   nutzen dafür weiterhin die Bootstrap-Badges. Wer eine Ampel neu baut,
   nimmt diese hier, nicht bg-success und Co. */
.ampel-rot     { background-color: var(--pf-ampel-rot-chip);     color: var(--pf-ampel-rot-text);     }
.ampel-gelb    { background-color: var(--pf-ampel-gelb-chip);    color: var(--pf-ampel-gelb-text);    }
.ampel-gruen   { background-color: var(--pf-ampel-gruen-chip);   color: var(--pf-ampel-gruen-text);   }
.ampel-neutral { background-color: var(--pf-ampel-neutral-chip); color: var(--pf-ampel-neutral-text); }

/* Individuelle Aufgaben-Zeile */
.indiv-row { border-left: 3px solid #6f42c1 !important; }
.indiv-form-row input[type="text"]:focus { border-color: #6f42c1; box-shadow: 0 0 0 .15rem rgba(111,66,193,.2); }

/* Status-Badge Klickbar */
.status-toggle {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}
.status-toggle:hover {
    opacity: 0.8;
}

/* Stat-Karte Zahlen */
.stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}

/* Tabellen kompakter */
.table-sm td, .table-sm th {
    padding: 0.35rem 0.5rem;
}

/* Kleine Hilfsklasse */
.cursor-pointer { cursor: pointer; }

/* Footer Abstand */
.main-content {
    padding-bottom: 3rem;
}

/* Login Box */
.login-box {
    max-width: 430px;
    margin: 80px auto;
}

/* ─── Mobile (≤ 767px) ──────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Weniger Body-Schriftgrösse auf kleinen Screens */
  body { font-size: 0.88rem; }

  /* Stat-Zahlen kleiner */
  .stat-number { font-size: 1.4rem; }
  .fs-2 { font-size: 1.35rem !important; }
  .fs-3 { font-size: 1.1rem !important; }

  /* Dashboard KPI-Kacheln: 2 Spalten bleiben, etwas kompakter */
  .card-body.py-2 { padding-top: .3rem !important; padding-bottom: .3rem !important; }

  /* Treuhand: Kunden-Header Wrap */
  .kunde-header { flex-wrap: wrap; gap: .4rem; }
  .kunde-header .btn-settings { font-size: .72rem; padding: .2rem .5rem; }

  /* Treuhand: Task-Tabelle scrollbar */
  .task-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .task-table { min-width: 520px; }

  /* Alle Tabellen scrollbar */
  .table-responsive { font-size: 0.8rem; }

  /* Navigation: Abstand oben/unten zwischen Items */
  .navbar-nav .nav-link { padding: .45rem .75rem; }
  .navbar-collapse { border-top: 1px solid #e9ecef; margin-top: .3rem; padding-top: .3rem; }

  /* Legende in Treuhand: umbrechen */
  .d-flex.gap-3 { gap: .5rem !important; flex-wrap: wrap; }

  /* Modals: volle Breite */
  .modal-dialog { margin: .5rem; }

  /* Kalender: nur 1 Monat auf Mobile */
  .cal-container .mini-cal:nth-child(n+2) { display: none; }

  /* Kalender-Legende: umbrechen */
  .cal-container + div { gap: .4rem !important; }

  /* Buttons: etwas grösser für Touch */
  .btn-sm { padding: .3rem .6rem; font-size: .8rem; }

  /* Login Box */
  .login-box { margin: 30px auto; }
}

/* ─── Kleine Smartphones (≤ 575px) ─────────────────────────────── */
@media (max-width: 575px) {
  .stat-number { font-size: 1.2rem; }
  .fs-2 { font-size: 1.15rem !important; }

  /* Steuern/Kunden Tabellen: noch kleiner */
  .table-responsive { font-size: 0.75rem; }
  .table-sm td, .table-sm th { padding: .25rem .3rem; }
}