/*
 * Erscheinungsbild der Zeiterfassung, abgestimmt auf die Webseite der RealConsult
 * Software GmbH. Farben, Radien, Schatten und die Schriftfamilie sind von dort
 * uebernommen.
 *
 * Eine Abweichung: die Grundschrift ist 15px statt 17px. Die Webseite ist eine
 * Lesestrecke, das hier ist eine Maske mit dichten Tabellen - 17px waeren zu gross.
 */

:root {
    --rc-brand: #14567d;
    --rc-brand-strong: #0e3f5c;
    --rc-brand-tint: #e8f1f7;
    --rc-accent: #b4802a;
    --rc-bg: #ffffff;
    --rc-bg-soft: #f6f8fa;
    --rc-bg-deep: #10202f;
    --rc-ink: #16202c;
    --rc-ink-soft: #47586b;
    --rc-ink-faint: #7b8b9c;
    --rc-line: #dfe6ed;
    --rc-line-soft: #eef2f6;
    --rc-radius: 10px;
    --rc-radius-lg: 16px;
    --rc-shadow: 0 1px 2px rgb(16 32 47 / 6%), 0 8px 24px -12px rgb(16 32 47 / 18%);
    --rc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --rc-navigation: 250px;

    /* Bootstrap auf die Hausfarben umstellen. */
    --bs-primary: #14567d;
    --bs-primary-rgb: 20, 86, 125;
    --bs-link-color: #14567d;
    --bs-link-color-rgb: 20, 86, 125;
    --bs-link-hover-color: #0e3f5c;
    --bs-border-color: #dfe6ed;
    --bs-body-color: #16202c;
    --bs-body-font-family: var(--rc-font);
}

body {
    font-family: var(--rc-font);
    font-size: 15px;
    color: var(--rc-ink);
    background: var(--rc-bg-soft);
}

/* ---------------------------------------------------------------- Navigation */

.rc-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--rc-navigation);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--rc-bg-deep);
    color: #cddae5;
    z-index: 1030;
}

.rc-marke {
    display: block;
    padding: 1.35rem 1.25rem 1.1rem;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.rc-marke__name {
    display: block;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    font-weight: 550;
}

.rc-marke__name b {
    font-weight: 700;
}

.rc-marke__zusatz {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #7fb6d8;
}

.rc-navigation__punkte {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem 0.7rem;
}

.rc-navigation__punkte ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rc-navigation__punkte li + li {
    margin-top: 2px;
}

.rc-navigation__bereich {
    margin: 1rem 0 0.35rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7fb6d8;
}

.rc-navigation__bereich:first-child {
    margin-top: 0;
}

.rc-punkt {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--rc-radius);
    color: #cddae5;
    text-decoration: none;
    font-weight: 550;
    line-height: 1.25;
}

.rc-punkt:hover {
    background: rgb(255 255 255 / 7%);
    color: #fff;
}

.rc-punkt--aktiv {
    background: var(--rc-brand);
    color: #fff;
}

.rc-punkt svg {
    flex: none;
    width: 18px;
    height: 18px;
    opacity: 0.85;
}

.rc-navigation__fuss {
    padding: 0.85rem 1rem 1.1rem;
    border-top: 1px solid rgb(255 255 255 / 8%);
    font-size: 0.82rem;
}

.rc-benutzer {
    display: block;
    color: #fff;
    font-weight: 550;
}

.rc-benutzer__rolle {
    display: block;
    color: var(--rc-ink-faint);
    font-size: 0.75rem;
}

.rc-abmelden {
    display: inline-block;
    margin-top: 0.6rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: var(--rc-radius);
    color: #cddae5;
    text-decoration: none;
    font-size: 0.8rem;
}

.rc-abmelden:hover {
    background: rgb(255 255 255 / 8%);
    color: #fff;
}

/* ------------------------------------------------------------------ Inhalt */

.rc-inhalt {
    margin-left: var(--rc-navigation);
    min-height: 100vh;
    padding: 1.5rem 1.75rem 3rem;
}

.rc-inhalt > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.rc-inhalt h1,
.rc-inhalt h2 {
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--rc-ink);
}

.rc-inhalt h2 {
    font-size: 1.5rem;
}

/* Die Reiter und ihr Inhalt bilden eine Karte. */
.rc-inhalt .nav-tabs {
    border-bottom: 1px solid var(--rc-line);
    gap: 2px;
}

.rc-inhalt .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: var(--rc-radius) var(--rc-radius) 0 0;
    color: var(--rc-ink-soft);
    font-weight: 550;
    padding: 0.5rem 0.85rem;
}

.rc-inhalt .nav-tabs .nav-link:hover {
    background: var(--rc-brand-tint);
    border-color: transparent;
    color: var(--rc-brand-strong);
}

.rc-inhalt .nav-tabs .nav-link.active {
    background: var(--rc-bg);
    border-color: var(--rc-line) var(--rc-line) var(--rc-bg);
    color: var(--rc-brand);
}

.rc-inhalt .tab-content {
    background: var(--rc-bg);
    border: 1px solid var(--rc-line);
    border-top: none;
    border-radius: 0 0 var(--rc-radius-lg) var(--rc-radius-lg);
    box-shadow: var(--rc-shadow);
    padding: 1.25rem;
    margin-top: 0 !important;
}

/* ------------------------------------------------------------- Filterzeile */

/*
    Eine Zeile mit Filterfeldern, die die verfuegbare Breite ausfuellt.

    Mit "col-auto" schrumpfen die Spalten auf ihren Inhalt und lassen den Rest
    der Zeile leer stehen - auf breiten Bildschirmen ein halbes Fenster. Hier
    wachsen die Felder stattdessen mit: jede Spalte mit "col" nimmt sich einen
    gleichen Anteil an dem, was uebrig bleibt, nachdem die festen Felder
    (Datum, Ja/Nein) ihr Mass genommen haben.

    Die Grenzen: unter 8rem wird nicht gestaucht, dann scrollt die Seite lieber
    waagerecht - gedacht fuer Full HD, wo elf Felder nun einmal nicht
    nebeneinander passen. Ueber 16rem wird nicht gewachsen, sonst stehen bei
    wenigen Filtern ein paar sehr breite, fast leere Felder da.
*/

.rc-filterzeile {
    flex-wrap: nowrap;
}

.rc-filterzeile > .col {
    min-width: 8rem;
    max-width: 16rem;
}

/* --------------------------------------------------------------- Bausteine */

.rc-karte {
    background: var(--rc-bg);
    border: 1px solid var(--rc-line);
    border-radius: var(--rc-radius-lg);
    box-shadow: var(--rc-shadow);
    padding: 1.25rem;
}

.rc-augenbraue {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--rc-brand);
}

.btn {
    border-radius: var(--rc-radius);
    font-weight: 600;
}

.btn-primary {
    background-color: var(--rc-brand);
    border-color: var(--rc-brand);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--rc-brand-strong);
    border-color: var(--rc-brand-strong);
}

.btn-outline-primary {
    color: var(--rc-brand);
    border-color: var(--rc-brand);
}

.btn-outline-primary:hover {
    background-color: var(--rc-brand);
    border-color: var(--rc-brand);
}

.form-control,
.form-select {
    border-color: var(--rc-line);
    border-radius: var(--rc-radius);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--rc-brand);
    box-shadow: 0 0 0 3px rgb(20 86 125 / 12%);
}

.form-check-input:checked {
    background-color: var(--rc-brand);
    border-color: var(--rc-brand);
}

.table {
    --bs-table-border-color: var(--rc-line-soft);
}

.table > thead {
    background: var(--rc-bg-soft);
}

.table > thead th {
    color: var(--rc-ink-soft);
    font-weight: 600;
    border-bottom-color: var(--rc-line);
}

.table > tfoot td {
    background: var(--rc-bg-soft);
    border-top: 1px solid var(--rc-line);
}

/*
    Der Kopf bleibt stehen, gescrollt werden nur die Zeilen.

    Dafuer braucht es beides: einen Rahmen, der selbst scrollt (sonst scrollt die
    ganze Seite und der Kopf wandert mit), und ein "sticky" am Kopf. Der Rahmen ist
    .table-responsive - den gab es schon fuer das seitliche Scrollen, er bekommt jetzt
    zusaetzlich eine Hoehe.

    Die Hoehe ist am Fenster ausgerichtet: ueber der Tabelle stehen je nach Maske
    Ueberschrift, Filter und Reiter, darunter soll nichts abgeschnitten sein. 20rem
    sind dafuer gemessen reichlich; die Untergrenze verhindert, dass auf einem kleinen
    Fenster ein Guckloch bleibt.

    Der Kopf braucht einen eigenen Hintergrund - sonst scheinen die Zeilen durch -
    und seine Linie als Schatten statt als Rahmen: bei border-collapse wandert ein
    Rahmen beim Scrollen weg, ein Schatten bleibt.
*/

.table-responsive {
    max-height: max(22rem, calc(100vh - 20rem));
    overflow: auto;
}

.table-responsive > .table > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--rc-bg-soft);
    box-shadow: inset 0 -1px 0 var(--rc-line);
}

/*
    Die Zeile zum Erfassen bleibt unten stehen.

    Sie gehoert nicht zu den Daten, sondern zur Bedienung - sie soll deshalb
    nicht mit wegscrollen. Angeheftet werden kann sie nicht: position: sticky
    greift bei Tabellenzellen am unteren Rand nicht, auch nicht im tfoot
    (nachgestellt und gemessen). Deshalb steht sie in einer eigenen Tabelle
    unter dem Scrollrahmen, und js/tabellenhoehe.js zieht ihre Spaltenbreiten
    von der Tabelle darueber nach.

    Grau hinterlegt wie der Kopf, damit sie sich von den Daten abhebt.
*/

table.rc-eingabe {
    /* Die Breiten kommen vom Skript und sollen genau so gelten. */
    table-layout: fixed;
    margin-top: -1px;
}

table.rc-eingabe > tbody > tr > td {
    background: var(--rc-bg-soft);
}

/*
    Ist die Tabelle breiter als ihr Platz, scrollt der Rahmen darueber zur
    Seite. Die Eingabezeile steht ausserhalb und bliebe stehen - die Spalten
    liefen auseinander. Sie bekommt deshalb eine Huelle, die das Skript
    waagerecht mitfuehrt; einen eigenen Balken braucht sie nicht, gescrollt
    wird oben.
*/
.rc-eingabe-huelle {
    overflow: hidden;
}

/*
    Beim Drucken gibt es kein Scrollen: dort muss die Tabelle in voller Laenge auf
    das Papier, sonst fehlt der Rest.
*/
@media print {
    .table-responsive {
        max-height: none;
        overflow: visible;
    }

    .table-responsive > .table > thead th {
        position: static;
    }
}

/* ------------------------------------------------------------ Anmeldemaske */

.rc-anmeldung {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1200px 600px at 20% -10%, #1b4a6b 0%, transparent 60%),
        var(--rc-bg-deep);
}

.rc-anmeldung__karte {
    width: 100%;
    max-width: 24rem;
    background: var(--rc-bg);
    border-radius: var(--rc-radius-lg);
    box-shadow: 0 2px 4px rgb(16 32 47 / 6%), 0 24px 48px -24px rgb(16 32 47 / 55%);
    padding: 1.75rem;
}

.rc-anmeldung .rc-marke {
    padding: 0;
    border: none;
    color: var(--rc-ink);
    margin-bottom: 1.5rem;
}

.rc-anmeldung .rc-marke__zusatz {
    color: var(--rc-brand);
}

@media (max-width: 900px) {
    .rc-navigation {
        position: static;
        width: auto;
        height: auto;
    }

    .rc-navigation__punkte {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
    }

    .rc-navigation__punkte li + li {
        margin-top: 0;
    }

    .rc-inhalt {
        margin-left: 0;
        padding: 1rem;
    }
}

/*
    Der Reiter "Dokumente".

    Das Kuerzel links ist ein graues Quadrat mit der Endung darin - dieselbe Rolle
    wie ein Symbol, nur ohne Bilddatei, und es sagt mehr: PDF oder DOCX steht da,
    nicht "Datei".
*/
.rc-dok-kuerzel {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background: var(--rc-bg-soft);
    color: var(--rc-text-muted, #6c757d);
    font-size: 0.75rem;
    font-weight: 600;
}

/*
    Das Feld zum Ablegen. Gestrichelt, damit es als Ziel zu erkennen ist und nicht
    als Karte mit Inhalt; beim Darueberziehen faerbt es sich.
*/
.rc-dok-ablage {
    border: 2px dashed var(--rc-line, #d0d7de);
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
}

.rc-dok-ablage.rc-dok-bereit {
    border-color: var(--bs-primary);
    background: var(--rc-bg-soft);
}

.rc-dok-pfeil {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--rc-text-muted, #6c757d);
}

/*
    Eine Zeile der Dokumentenliste.

    Sie steht an zwei sehr verschiedenen Stellen: breit im Reiter der Zeiterfassung
    und schmal in der Mitarbeitersicht, die fuer das Telefon gebaut ist. Deshalb
    darf sie umbrechen - reicht der Platz nicht, rutschen die Knoepfe unter den
    Namen, statt aus der Karte zu laufen.
*/
.rc-dok-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/*
    Der Name nimmt den freien Platz. min-width: 0 ist dabei das Entscheidende:
    ohne das waere ein Flex-Element nie schmaler als sein Inhalt, und ein langer
    Dateiname schoebe alles andere hinaus, statt gekuerzt zu werden.

    Die Mindestbreite entscheidet zugleich, wann umbrochen wird: passt sie neben
    die Knoepfe nicht mehr, wandern die in die naechste Zeile.
*/
.rc-dok-name {
    flex: 1 1 12rem;
    min-width: 0;
}

/*
    Die Knoepfe bleiben zusammen und rechts - auch dann, wenn sie in die naechste
    Zeile rutschen. So steht der Loeschknopf nie direkt neben dem Namen, egal wie
    breit die Karte gerade ist.
*/
.rc-dok-knoepfe {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

/* Der Vermerk ist kein Dokument mehr, das hier liegt - er tritt zurueck. */
.rc-dok-vermerk {
    background: var(--rc-bg-soft);
}