/* ===========================================================================
   Gemeinsames Stylesheet des Reservierungstools
   ---------------------------------------------------------------------------
   Bis hierher hatte jede Seite ihren eigenen <style>-Block. Dieselbe Farbe
   stand dadurch an mehreren Stellen im Quelltext – das Grün eines freien
   Tisches im Tischplan, das Grün eines bestätigten Status in den Listen und
   das Grün der Kapazitäts-Ampel waren drei unabhängige Hexwerte.

   Hier stehen sie einmal, als Variablen. Zwei Gründe:

   1. Änderungen wirken überall. Wer „besetzt" von Rot auf Orange stellen
      will, ändert eine Zeile.
   2. MEHRMANDANTENFÄHIGKEIT: Die Akzentfarbe eines Betriebs lässt sich über
      --rt-akzent setzen, ohne eine einzige Regel anzufassen. Dafür genügt ein
      style-Attribut am <html>-Element aus config/betrieb.php – der Code bleibt
      für alle Betriebe derselbe.

   Eingebunden in header.php, gilt also auf allen Seiten.
   =========================================================================== */

:root {
    /* ── Marke ──────────────────────────────────────────────────────────── */
    /* Grundton des Hauses. Bootstrap-Grün als Vorgabe, je Betrieb ersetzbar. */
    --rt-akzent:        #198754;
    --rt-akzent-dunkel: #14532d;

    /* ── Belegungszustände (grafischer Tischplan) ───────────────────────── */
    --rt-frei-bg:        #d1fae5;
    --rt-frei-rand:      #6ee7b7;
    --rt-frei-text:      #065f46;

    --rt-besetzt-bg:     #fee2e2;
    --rt-besetzt-rand:   #fca5a5;
    --rt-besetzt-text:   #991b1b;

    --rt-vorschlag-bg:   #fffbeb;
    --rt-vorschlag-rand: #f59e0b;
    --rt-vorschlag-text: #7c4b00;

    --rt-gesperrt-bg:    #e5e7eb;
    --rt-gesperrt-rand:  #9ca3af;
    --rt-gesperrt-text:  #4b5563;

    /* ── Zeilenfarben in Listen ─────────────────────────────────────────── */
    /* Bewusst sehr blass: Die Zeile soll lesbar bleiben, die Farbe nur grob
       einordnen. Die genaue Aussage steht im Statusabzeichen. */
    --rt-zeile-neu:       #e6f7e6;  /* frisch eingegangen (Status 4) */
    --rt-zeile-aenderung: #fff8d9;  /* offener Änderungswunsch */
    --rt-zeile-blass:     .6;       /* storniert: durchgestrichen und blass */

    /* ── Statusfarben ───────────────────────────────────────────────────────
       Für Flächen, die keine Bootstrap-Klasse tragen können – vor allem die
       Balken der Zeitachse in der Kapazitätsrechnung. Die Werte entsprechen
       den Bootstrap-Farben, die funktionen/status_text.php für die Abzeichen
       vergibt; so bedeutet dieselbe Farbe überall dasselbe. */
    --rt-status-0:  #dc3545;   /* storniert            */
    --rt-status-1:  #dc3545;   /* abgelehnt            */
    --rt-status-2:  #dc3545;   /* Storno-Wunsch        */
    --rt-status-3:  #dc3545;   /* Änderung verweigert  */
    --rt-status-4:  #ffc107;   /* unbestätigt          */
    --rt-status-5:  #0dcaf0;   /* Änderungswunsch      */
    --rt-status-6:  #198754;   /* bestätigt            */
    --rt-status-7:  #198754;   /* Änderung bestätigt   */
    --rt-status-8:  #0d6efd;   /* platziert            */
    --rt-status-9:  #0d6efd;   /* umplatziert          */
    --rt-status-14: #6c757d;   /* Warteliste           */

    /* ── Hervorhebungen in Eingabefeldern ───────────────────────────────── */
    --rt-vorschlag-feld-bg:   #fffbeb;
    --rt-vorschlag-feld-rand: #f59e0b;
    --rt-geaendert-bg:        #e7f1ff;
    --rt-geaendert-rand:      #0d6efd;

    /* ── Flächen ────────────────────────────────────────────────────────── */
    /* Zurückhaltend hinterlegte Zeilen und Felder: geschlossene Tage,
       automatisch erzeugte Protokolleinträge, leere Plätze im Tischplan. */
    --rt-flaeche-blass: #f8f9fa;

    /* Hinweiskästen („Achtung, das wirkt sofort") */
    --rt-hinweis-bg:   #fffbeb;
    --rt-hinweis-rand: #f59e0b;

    /* Suchtreffer im Text */
    --rt-treffer-bg:   #fff3cd;
    --rt-treffer-text: #212529;

    /* Tisch ohne Belegungsangabe (grafischer Plan, Verwaltung) */
    --rt-tisch-bg:   #f1f5f9;
    --rt-tisch-rand: #cbd5e1;

    /* ── Kopfleiste ─────────────────────────────────────────────────────── */
    --rt-nav-hoehe: 3.25rem;
}

/* Suchtreffer – gleiche Hervorhebung in Suche und Protokoll */
mark.treffer {
    background: var(--rt-treffer-bg);
    color: var(--rt-treffer-text);
    padding: 0 .1rem;
}

/* ===========================================================================
   Kopfleiste
   ---------------------------------------------------------------------------
   Ersetzt den 300 Pixel breiten Logoblock, der bisher auf jeder Seite den
   ersten Bildschirm belegte. Das Logo sitzt jetzt darin und führt zum
   Dashboard.
   =========================================================================== */

.rt-nav {
    /* Hintergrund folgt dem Bootstrap-Thema (siehe Dunkelmodus weiter unten) */
    background: var(--bs-body-bg);
    border-bottom: 3px solid var(--rt-akzent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.rt-nav .navbar-brand img {
    height: 2.8rem;
    width: auto;
}

/* Die aktive Seite deutlich markieren – sonst weiß man nach drei Klicks
   nicht mehr, wo man ist. */
.rt-nav .nav-link.aktiv {
    color: var(--rt-akzent) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--rt-akzent);
}

.rt-nav .nav-link {
    border-bottom: 2px solid transparent;
}

/* Zeile unter dem Logo der Gastseiten: klein, mittig, zurückhaltend – sie
   ordnet den Betrieb ein und soll dem Inhalt darunter nicht den Rang ablaufen.
   Der Text kommt aus config/betrieb.php (seiten_untertitel) und ist damit je
   Gaststätte ein anderer. */
.rt-seiten-untertitel {
    text-align: center;
    font-size: 0.92rem;
    /* Folgt dem Thema: index.php zeigt angemeldeten Benutzern auch den
       dunklen Modus, ein fester Grauwert wäre dort schlecht lesbar. */
    color: var(--bs-secondary-color);
    margin: -0.25rem 0 1.25rem;
}

/* ===========================================================================
   Seitenkopf
   ---------------------------------------------------------------------------
   Einheitlicher Titel je Seite, dort wo bisher das Logo stand.
   =========================================================================== */

.rt-seitenkopf {
    margin: 1.25rem 0 1rem;
}

.rt-seitenkopf h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.rt-seitenkopf .rt-unterzeile {
    color: #6c757d;
    font-size: .92rem;
    margin: .15rem 0 0;
}

/* ===========================================================================
   Listen
   =========================================================================== */

/* Storniert oder abgelehnt */
.striked td {
    text-decoration: line-through;
    opacity: var(--rt-zeile-blass);
}

/* Offener Änderungswunsch des Gastes */
.res-yellow td { background-color: var(--rt-zeile-aenderung) !important; }

/* Frisch eingegangen, noch unbestätigt */
.res-green td  { background-color: var(--rt-zeile-neu) !important; }

/* Vergangene Treffer in der Suche */
.such-vergangen { opacity: .62; }

/* Algorithmus-Vorschlag im Tischfeld – bitte bestätigen */
.tisch-vorschlag {
    border-color: var(--rt-vorschlag-feld-rand);
    background-color: var(--rt-vorschlag-feld-bg);
}
.tisch-vorschlag:focus {
    border-color: #d97706;
    box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .25);
}

/* Ungespeicherte, geänderte Eingabe */
.tisch-geaendert {
    border-color: var(--rt-geaendert-rand) !important;
    background-color: var(--rt-geaendert-bg);
}

/* ===========================================================================
   Karten mit Zähler
   ---------------------------------------------------------------------------
   Überwachende Karten (Rückruf, Doppelbuchungen, Protokoll) sind eingeklappt.
   Die Zahl im Kopf sagt, ob sich das Aufklappen lohnt – ohne zu scrollen.
   =========================================================================== */

/* Schaltfläche ist NUR die Überschrift, nicht die ganze Kopfzeile: Läge sie
   um alles, wären die Knöpfe („Aktualisieren", „Vollständiges Protokoll")
   darin enthalten und jeder Klick darauf würde die Karte zuklappen. */
.rt-klapp-kopf {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: .1rem;
}

.rt-klapp-kopf:focus-visible {
    outline: 2px solid var(--rt-akzent);
    outline-offset: 3px;
    border-radius: .2rem;
}

.rt-klapp-kopf .rt-pfeil {
    transition: transform .15s ease;
}

.rt-klapp-kopf[aria-expanded="true"] .rt-pfeil {
    transform: rotate(90deg);
}

/* Zähler: ohne Befund unauffällig, mit Befund deutlich. */
.rt-zaehler {
    min-width: 1.6rem;
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   Meldungen (Toasts)
   ---------------------------------------------------------------------------
   Ersetzen die blockierenden alert()-Dialoge. Unten rechts, verschwinden von
   selbst, unterbrechen die Arbeit nicht.
   =========================================================================== */

.rt-meldungen {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1090;          /* über Modals-Backdrop, unter Modal-Inhalt */
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(24rem, calc(100vw - 2rem));
}

.rt-meldung {
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .18);
    border-left: .3rem solid var(--rt-akzent);
    animation: rt-einblenden .18s ease-out;
}

.rt-meldung.rt-fehler   { border-left-color: #dc3545; }
.rt-meldung.rt-warnung  { border-left-color: #ffc107; }
.rt-meldung.rt-erfolg   { border-left-color: var(--rt-akzent); }
.rt-meldung.rt-info     { border-left-color: #0d6efd; }

@keyframes rt-einblenden {
    from { opacity: 0; transform: translateY(.5rem); }
    to   { opacity: 1; transform: none; }
}

/* Wer Bewegung reduziert haben möchte, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
    .rt-meldung { animation: none; }
    .rt-klapp-kopf .rt-pfeil { transition: none; }
}

/* ===========================================================================
   Tabellen auf schmalen Bildschirmen
   ---------------------------------------------------------------------------
   Die Listen haben acht bis zwölf Spalten. Auf dem Tablet quer geht das, auf
   dem Handy führt es zu waagerechtem Scrollen – und wer waagerecht scrollt,
   verliert die erste Spalte mit dem Namen aus dem Blick.

   Unterhalb von 768 Pixeln wird deshalb jede Zeile zu einer Karte: Die
   Spaltenüberschrift steht links, der Wert rechts. Die Beschriftung kommt aus
   data-label, das funktionen/tabellen_mobil.php aus <thead> überträgt.

   Bewusst ohne die Responsive-Erweiterung von DataTables: Die liegt nicht im
   mitgelieferten Bündel, und eine weitere Fremdbibliothek für eine reine
   Darstellungsfrage wäre unverhältnismäßig.
   =========================================================================== */

@media (max-width: 767.98px) {

    .rt-mobil-karten thead {
        display: none;
    }

    .rt-mobil-karten,
    .rt-mobil-karten tbody,
    .rt-mobil-karten tr,
    .rt-mobil-karten td {
        display: block;
        width: 100%;
    }

    .rt-mobil-karten tbody tr {
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .25rem .5rem;
        background: var(--bs-body-bg);
    }

    /* Zebrastreifen ergeben als Karte keinen Sinn mehr */
    .rt-mobil-karten.table-striped > tbody > tr:nth-of-type(odd) > td {
        background: transparent;
    }

    .rt-mobil-karten tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        border: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .06);
        padding: .35rem .25rem;
        text-align: right;
    }

    .rt-mobil-karten tbody td:last-child {
        border-bottom: 0;
    }

    .rt-mobil-karten tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        text-align: left;
        flex: 0 0 auto;
        max-width: 45%;
    }

    /* Zellen ohne Beschriftung (Aktionsspalten) brauchen keine leere Spalte */
    .rt-mobil-karten tbody td[data-label=""]::before {
        content: none;
    }

    /* Eingabefelder in Zellen dürfen die Breite nutzen */
    .rt-mobil-karten tbody td .form-control {
        max-width: 60%;
    }
}

/* ===========================================================================
   Dunkelmodus
   ---------------------------------------------------------------------------
   Bootstrap 5.3 bringt ihn über data-bs-theme="dark" mit; um Schrift, Karten,
   Tabellen und Formulare kümmert es sich selbst. Hier stehen nur die eigenen
   Farben, die sonst weiterhin für den hellen Hintergrund gedacht wären –
   pastellige Zeilenfarben etwa sind auf Dunkel blendend hell und unlesbar.

   Abends am Tresen ist ein gleißend weißer Bildschirm unangenehm; die
   Einstellung merkt sich der Browser je Gerät (localStorage).
   =========================================================================== */

[data-bs-theme="dark"] {
    /* Belegungszustände: dieselbe Bedeutung, gedämpfte Flächen */
    --rt-frei-bg:        #14432f;
    --rt-frei-rand:      #2f7d5b;
    --rt-frei-text:      #a7f3d0;

    --rt-besetzt-bg:     #4a1d21;
    --rt-besetzt-rand:   #a34a52;
    --rt-besetzt-text:   #fecaca;

    --rt-vorschlag-bg:   #453212;
    --rt-vorschlag-rand: #b3801f;
    --rt-vorschlag-text: #fde68a;

    --rt-gesperrt-bg:    #2b2f36;
    --rt-gesperrt-rand:  #565d68;
    --rt-gesperrt-text:  #c3c8d0;

    /* Zeilenfarben: nur noch angedeutet, sonst überstrahlen sie die Schrift */
    --rt-zeile-neu:       #16321f;
    --rt-zeile-aenderung: #3a3212;

    --rt-vorschlag-feld-bg:   #3a2f12;
    --rt-vorschlag-feld-rand: #b3801f;
    --rt-geaendert-bg:        #16283f;
    --rt-geaendert-rand:      #4c8bf5;

    --rt-flaeche-blass: #23262b;

    --rt-hinweis-bg:   #3b2f10;
    --rt-hinweis-rand: #b3801f;

    --rt-treffer-bg:   #6b5510;
    --rt-treffer-text: #ffe9a8;

    --rt-tisch-bg:   #2a2e34;
    --rt-tisch-rand: #4b5259;

    /* Statusfarben: die kräftigen Töne bleiben, nur Gelb und Hellblau werden
       auf dunklem Grund sonst zu grell für die schmalen Balken. */
    --rt-status-4:  #d9a406;
    --rt-status-5:  #0aa5c4;
}

[data-bs-theme="dark"] .rt-mobil-karten tbody tr {
    border-color: rgba(255, 255, 255, .18);
}

[data-bs-theme="dark"] .rt-mobil-karten tbody td {
    border-bottom-color: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .rt-mobil-karten tbody td::before {
    color: #9aa2ad;
}

[data-bs-theme="dark"] .rt-meldung {
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .5);
}

/* Von Bootstrap fest hell gedachte Bausteine ---------------------------------
   .bg-light und .table-light bleiben auch im dunklen Thema hell – Bootstrap
   meint damit „die helle Themenfarbe", nicht „hell im Verhältnis zum
   Hintergrund". Auf dunklem Grund stünde dort helle Schrift auf heller
   Fläche. Hier bekommen sie stattdessen die gedämpfte Themenfläche.
   Abzeichen sind ausgenommen: die bringen mit .text-dark ihre eigene
   Schriftfarbe mit und sind so lesbar. */

[data-bs-theme="dark"] .bg-light:not(.badge) {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-color:          var(--bs-body-color);
    --bs-table-bg:             #2b2f36;
    --bs-table-border-color:   #454b53;
    --bs-table-striped-color:  var(--bs-body-color);
    --bs-table-hover-color:    var(--bs-body-color);
}

/* DataTables bringt eigene, fest dunkle Schriftfarben für Blätter- und
   Sortierschaltflächen mit (color: #333 !important). Auf dunklem Grund sind
   sie unlesbar. */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_processing,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--bs-secondary-color) !important;
}

/* Das Logo ist ein Schriftzug in dunkler Farbe auf durchsichtigem Grund – auf
   dunklem Untergrund verschwindet er. Statt es zu invertieren (das verfälscht
   die Hausfarben) bekommt es eine helle Unterlage. */
[data-bs-theme="dark"] .rt-nav .navbar-brand img {
    background: #fff;
    border-radius: .35rem;
    padding: .15rem .35rem;
}
