/*
 * =============================================================================
 * The Roster — Akzente im Adminbereich von Perfex CRM
 * =============================================================================
 *
 * Ziel: aus dem Adminbereich soll KEIN zweiter Kundenbereich werden.
 *
 * Der Kundenbereich ist ein Schaufenster, den sieht der Kunde einmal am Tag.
 * Der Adminbereich ist ein Werkzeug, darin wird gearbeitet. Ihn komplett
 * dunkel umzufaerben hiesse, Hunderte Bausteine nachzuziehen — jede Tabelle,
 * jedes Modul, jedes Diagramm, jeden Kalender, jeden Rich-Text-Editor. Bei
 * jedem Perfex-Update braeche davon etwas, und was bricht, faellt erst mitten
 * in der Arbeit auf.
 *
 * Deshalb bleibt der Adminbereich hell, und diese Datei setzt nur das, was die
 * Marke sichtbar macht und nichts kaputtmachen kann:
 *
 *   1. dieselben Schriften wie Webseite und Kundenbereich
 *   2. Markenfarben auf Hauptknopf, Links und aktivem Menuepunkt
 *   3. ein paar Kanten und Rundungen, damit es nicht nach Bootstrap 3 aussieht
 *   4. sichtbaren Tastaturfokus
 *
 * Einbau: nach `assets/css/custom.css` kopieren. Perfex laedt die Datei von
 * selbst, sobald sie da ist.
 *
 * --------------------------------------------------------------------------
 * Warum jede Regel mit `body:not(.roster)` beginnt
 * --------------------------------------------------------------------------
 * Perfex laedt diese Datei nicht nur im Adminbereich, sondern auch im
 * Kundenbereich — und dort **nach** dem Theme-CSS. Ohne den Ausschluss wuerde
 * `a { color: Navy }` von hier die Links im dunklen Kundenbereich einfaerben:
 * Navy auf #0d1017 ist ein Kontrast von 1,9:1, also praktisch unlesbar. Und
 * der weisse Hauptknopf der Anmeldeseite waere plötzlich petrol.
 *
 * `body.roster` setzt das Theme des Kundenbereichs. Alles hier gilt also
 * ueberall dort, wo dieses Theme *nicht* laeuft: Adminbereich,
 * Mitarbeiter-Anmeldung, und der Kundenbereich, falls jemand auf das
 * Standardtheme zurueckschaltet.
 *
 * Passt dazu: Setup -> Einstellungen -> Anpassen -> dunkle Seitenleiste. Die
 * bringt Perfex selbst mit und sie steht der Marke gut.
 */

@import url('../themes/roster/css/fonts.css');

:root {
    --r-navy: #204659;
    --r-petrol: #3e6f70;
    --r-salbei: #6f9682;
    --r-creme: #ebdeb9;

    --r-schrift: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --r-schrift-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

/* ---------- 1. Schriften ---------- */

body:not(.roster),
body:not(.roster) .form-control,
body:not(.roster) .btn,
body:not(.roster) .table,
body:not(.roster) input,
body:not(.roster) select,
body:not(.roster) textarea,
body:not(.roster) button {
    font-family: var(--r-schrift);
}

/* Beschriftungen und Etiketten in der Monospace der Marke — dieselbe
   Handschrift wie auf der Webseite */
body:not(.roster) .label,
body:not(.roster) .badge {
    font-family: var(--r-schrift-mono);
    letter-spacing: 0.03em;
    font-weight: 500;
}

/* Ziffern gleicher Breite in Betragsspalten: sonst wackeln die Summen beim
   Sortieren und Nachladen */
body:not(.roster) td.text-right,
body:not(.roster) .invoice-totals,
body:not(.roster) #total,
body:not(.roster) #subtotal {
    font-variant-numeric: tabular-nums;
}

/* ---------- 2. Markenfarben ---------- */

/*
 * Der Hauptknopf. Perfex setzt ihn ueber tailwind.css auf Anthrazit; Petrol
 * ist dunkel genug fuer weisse Schrift (Kontrast 6,4:1) und traegt die Marke.
 */
body:not(.roster) .btn-primary,
body:not(.roster) .btn-primary:focus,
body:not(.roster) .btn-primary.focus {
    background-color: var(--r-petrol);
    border-color: var(--r-petrol);
    color: #fff;
}

body:not(.roster) .btn-primary:hover,
body:not(.roster) .btn-primary:active,
body:not(.roster) .btn-primary.active,
body:not(.roster) .open > .dropdown-toggle.btn-primary {
    background-color: var(--r-navy);
    border-color: var(--r-navy);
    color: #fff;
}

/*
 * Links. Perfex nutzt ein kraeftiges Blau; Navy ist die ruhigere Fassung
 * derselben Rolle und gegen Weiss bei 9,3:1.
 */
body:not(.roster) a {
    color: var(--r-navy);
}

body:not(.roster) a:hover,
body:not(.roster) a:focus {
    color: var(--r-petrol);
}

/* Aktiver Menuepunkt in der Seitenleiste */
body:not(.roster) .sidebar .nav > li.active > a,
body:not(.roster) .sidebar .nav > li.active > a:hover {
    border-left: 2px solid var(--r-salbei);
}

body:not(.roster) .sidebar .nav .nav-second-level > li.active > a {
    color: var(--r-petrol);
}

/* Reiter */
body:not(.roster) .nav-tabs > li.active > a,
body:not(.roster) .nav-tabs > li.active > a:hover,
body:not(.roster) .nav-tabs > li.active > a:focus {
    border-bottom-color: var(--r-petrol);
    color: var(--r-navy);
}

/* Fortschritt und Textauswahl */
body:not(.roster) .progress-bar {
    background-color: var(--r-salbei);
}

body:not(.roster) ::selection {
    background: var(--r-creme);
    color: #11141d;
}

/* ---------- 3. Kanten ---------- */

body:not(.roster) .btn {
    border-radius: 6px;
    font-weight: 500;
}

body:not(.roster) .panel,
body:not(.roster) .panel_s,
body:not(.roster) .modal-content,
body:not(.roster) .dropdown-menu {
    border-radius: 10px;
}

body:not(.roster) .form-control {
    border-radius: 6px;
}

body:not(.roster) .label,
body:not(.roster) .badge {
    border-radius: 999px;
}

/* ---------- 4. Tastaturfokus ---------- */

/*
 * tailwind.css setzt `a { outline: none !important }` fuer die ganze
 * Anwendung. Wer mit der Tabulatortaste arbeitet, sieht sonst nicht, wo er
 * steht. Das Gegen-!important ist hier nicht vermeidbar.
 */
body:not(.roster) a:focus-visible,
body:not(.roster) button:focus-visible,
body:not(.roster) .btn:focus-visible,
body:not(.roster) input:focus-visible,
body:not(.roster) select:focus-visible,
body:not(.roster) textarea:focus-visible {
    outline: 2px solid var(--r-petrol) !important;
    outline-offset: 2px !important;
}