html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: #f5f6f8;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* verhindert Scrollen der gesamten Seite - nur der Inhaltsbereich scrollt */
}

/* Nav und Footer behalten ihre natürliche Höhe, main füllt den Rest und scrollt selbst */
body > nav {
    flex: 0 0 auto;
}

body > main {
    flex: 1 1 auto;
    min-height: 0; /* nötig, damit Flex-Kinder tatsächlich schrumpfen/scrollen können */
    overflow-y: auto;
}

body > footer {
    flex: 0 0 auto;
}

.login-body {
    background: linear-gradient(135deg, #1f2933 0%, #3b4a59 100%);
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background-color: rgba(13, 110, 253, 0.08) !important;
}

.pe-none-inputs input,
.pe-none-inputs select,
.pe-none-inputs textarea {
    background-color: #f0f0f0;
}

.nav-tabs .nav-link.disabled {
    cursor: not-allowed;
}

.card {
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Menüpunkte, die als Popup geöffnet werden (Suche, Logbuch, Fehlerprotokoll),
   sind technisch Buttons, sollen aber wie normale Nav-Links aussehen */
.navbar-nav .nav-link.btn {
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
    box-shadow: none !important;
}
.navbar-nav .nav-link.btn:hover {
    color: #fff;
}
footer .btn-link {
    text-decoration: underline;
    font-size: inherit;
    box-shadow: none !important;
}

/* Logo im Menüband: Höhe richtet sich nach der Zeilenhöhe der Markenschrift
   daneben. Doppelt abgesichert (Bild UND umgebender Link bekommen eine
   harte max-height), damit ein Logo mit beliebigem Seitenverhältnis oder
   beliebiger Originalgröße das Menüband niemals aufblähen kann - das Band
   gibt die maximale Höhe vor, nicht das Bild. */
.navbar-brand {
    max-height: 2.5rem;
    overflow: hidden;
}
.navbar-logo {
    height: 1.875rem !important;
    max-height: 1.875rem !important;
    width: auto !important;
    max-width: 12rem;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

/* Ziehbare Popup-Modals (Suche, Logbuch, Fehlerprotokoll) */
.modal-draggable-header {
    cursor: move;
}

/* "Karteikarte" für die Kunden-Stammdaten - angelehnt an eine physische
   Patienten-/Kundenkarteikarte: warmes Gelb mit Papierstruktur, dicke rote
   Trennlinie, etwas kräftigerer Schatten für einen haptischen Eindruck. */
.karteikarte {
    background-color: #f1e5ba;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.15  0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.04));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.karteikarte .form-label {
    color: #5a4a1f;
    margin-bottom: 0.05rem !important;
}

/* Eingabefelder innerhalb der Karteikarte: transparent (Papierstruktur scheint
   durch), kein Innenabstand nach links (Inhalt steht bündig unter der
   Überschrift), reduzierte Höhe über weniger vertikales Padding - die
   Schriftgröße bleibt dabei unverändert (rem-Wert wird nicht angefasst). */
.karteikarte .form-control,
.karteikarte .form-select {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 0;
    padding: 0.05rem 0.25rem 0.05rem 0;
    box-shadow: none;
}
.karteikarte .form-select {
    padding-right: 1.25rem; /* Platz für den Dropdown-Pfeil */
}
.karteikarte .form-control:focus,
.karteikarte .form-select:focus {
    background-color: rgba(255, 255, 255, 0.35);
    border-bottom-color: #b8362c;
    box-shadow: none;
}
.karteikarte .form-control:disabled,
.karteikarte .form-select:disabled {
    background-color: transparent;
    opacity: 0.75;
}

.karteikarte-trenner {
    border: none;
    border-top: 3px solid #b8362c;
    opacity: 0.85;
    margin: 0.35rem 0;
}

/* Notizen als Post-its - bewusst kräftigere/gesättigtere Gelb-/Orangetöne
   als die gedeckte Karteikarten-Farbe nebenan, damit sich beide Bereiche
   klar voneinander abheben statt zu verschwimmen. */

/* Notizen-Karte: transparenter Hintergrund (kein weißes Kartenfeld mehr
   sichtbar). Die exakte Höhenangleichung an die Karteikarte (weiter unten
   in der Media Query) ergibt nur Sinn, wenn beide Karten nebeneinander
   stehen (ab Bootstraps lg-Breakpoint, 992px) - auf schmalen Bildschirmen
   (Karten stehen untereinander) würde eine erzwungene Höhe hier sonst dazu
   führen, dass der Bereich auf einen winzigen Bruchteil zusammenschrumpft,
   da die Höhenberechnung dann auf sich selbst zurückverweist. */
.notizen-karte {
    background: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .notizen-karte {
        height: 100%;
    }
    .notizen-karte .card-body {
        height: 100%;
        min-height: 0;
    }
}

/* Rezepte/Belege-Karte: kein Innenabstand mehr (weder Bootstraps
   Standard-Padding noch p-2), Hintergrund bleibt weiß. overflow:hidden
   verhindert, dass die eckige Tab-Leiste (die jetzt direkt am Rand liegt)
   über die abgerundete Kartenecke hinaussteht. */
.rezepte-belege-karte {
    background: #fff;
    overflow: hidden;
}
/* Kleiner Abstand links im Tab-Inhalt, damit Buttons nicht direkt an der
   Rahmenlinie der Tableiste kleben - lässt die Trennlinie der Tableiste
   optisch sauber in den Inhaltsbereich "weiterlaufen", statt abrupt an
   einem gemeinsamen Punkt mit dem Button-Rand zusammenzutreffen. */
.rezepte-belege-karte .tab-content {
    padding-left: 3px;
    border: 1px solid rgb(222, 226, 230);
    border-top: none;
}
.rezepte-belege-karte .card-body {
    padding: 0;
}

/* Der Tab-Inhalt-Bereich bekommt ab 992px eine garantierte, definierte Höhe
   (der Rest der Karte nach Abzug der Tab-Leiste) und wird zum Bezugsrahmen
   für die absolut positionierten Tab-Inhalte darin - das umgeht zuverlässig
   jede Unschärfe, die reines Flex-Stretching bei Bootstraps eigenem
   .tab-pane-Verhalten (display:none/block) verursachen kann. Unterhalb von
   992px (Karten stehen untereinander) fließt der Inhalt stattdessen ganz
   normal, mit einer sinnvollen Mindesthöhe über die Textarea selbst. */
@media (min-width: 992px) {
    .notizen-tab-content {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
    }
    .notizen-tab-content .tab-pane {
        position: absolute;
        inset: 0;
    }
    .notizen-tab-content .postit {
        height: 100%;
    }
}

.postit-tabs {
    border: none;
    gap: 6px;
    margin-bottom: 0;
}
.postit-tabs .nav-link {
    border: none;
    border-radius: 3px 3px 0 0;
    font-size: 0.85rem;
    padding: 6px 14px 5px;
    color: rgba(0, 0, 0, 0.55);
    position: relative;
    top: 3px;
    box-shadow: 1px -1px 3px rgba(0, 0, 0, 0.12);
    transition: top 0.1s ease;
}
.postit-tabs .nav-link.postit-tab-1 { background: #f7ed9f; }
.postit-tabs .nav-link.postit-tab-2 { background: #f5d4a3; }
.postit-tabs .nav-link.postit-tab-3 { background: #f6e1a5; }
.postit-tabs .nav-link.active {
    top: 0;
    color: #4a3b00;
    font-weight: 600;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.15);
}

.postit {
    position: relative;
    padding: 14px;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.2);
    transform: rotate(-0.5deg);
    box-sizing: border-box;
}
.postit-1 { background: #f7ed9f; }
.postit-2 { background: #f5d4a3; }
.postit-3 { background: #f6e1a5; }

.postit::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 16px 0;
    border-color: transparent #f5f6f8 transparent transparent;
    filter: drop-shadow(-1px 1px 1px rgba(0, 0, 0, 0.15));
}

.postit textarea {
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    height: 100%;
    min-height: 120px; /* Mindesthöhe als Absicherung, falls die Karte aus irgendeinem Grund keine definierte Höhe hat */
    resize: none;
    font-size: 0.95rem;
    color: #3a2f00;
    box-sizing: border-box;
}
.postit textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
}
.postit textarea::placeholder {
    color: rgba(58, 47, 0, 0.4);
}

/* Navbar: Verlauf von Weiß zum bisherigen Dunkel (#212529, Bootstraps
   .bg-dark), abgeschlossen im ersten Drittel der Leiste - danach
   durchgehend die bisherige dunkle Farbe. .bg-dark nutzt !important,
   daher hier ebenfalls nötig, um die Regel zu überschreiben. */
nav.navbar.bg-dark {
    background: linear-gradient(to right, #ffffff 0%, #b8362c 33%, #b8362c 100%) !important;
}

/* Mobil (aufgeklapptes Menü unterhalb des Bootstrap-lg-Breakpoints):
   Der horizontale Verlauf bezieht sich auf die gesamte Navbar-Breite und
   wiederholt sich dadurch in jeder Menüzeile identisch von links nach
   rechts - der helle Bereich landet so in jeder Zeile genau dort, wo
   auch der helle Menütext beginnt, was die Lesbarkeit beeinträchtigt.
   Der aufgeklappte Menübereich bekommt daher eine durchgehende,
   einfarbige Hintergrundfarbe (der rote Endpunkt des Verlaufs) - die
   oberste Zeile (Logo/Hamburger-Button, außerhalb von .navbar-collapse)
   zeigt den Verlauf weiterhin unverändert. */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #b8362c;
        /* Bis zum linken/rechten Rand der Navbar ausdehnen - .container-fluid
           hat einen eigenen Innenabstand (12px), wodurch der Hintergrund
           sonst nicht bis zum Rand reicht und dort der Verlauf durchscheint.
           Negative Margins gleichen das aus, das gleich große Padding hält
           den sichtbaren Inhalt (Menüpunkte) optisch an derselben Stelle. */
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
        /* Kleiner Abstand zur Unterkante des Hamburger-Buttons, damit der
           Farbblock nicht bündig an dessen abgerundete Ecken stößt (wirkte
           sonst wie ein Anschneiden des Buttons). */
        margin-top: 8px;
        padding-bottom: 12px;
    }
}

/* Navbar-Überschrift ("BTM-Verwaltung") im selben Rot wie das Logo
   (#df091d) statt der Bootstrap-Standardfarbe. */
.navbar-brand {
    color: #df091d;
}
.navbar-brand:hover,
.navbar-brand:focus {
    color: #df091d;
}

/* Menüpunkte kräftiger als Bootstraps blasser Standardwert (nur 55%
   Deckkraft) - für besseren Kontrast auf dem roten Verlauf-Hintergrund.
   Aktiver Zustand bleibt bei vollem Weiß (Bootstrap-Standard). */
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #fff;
}

/* Seitenkopf (Überschrift links, Schaltflächen rechts): Auf schmalen
   Bildschirmen rutschen die Schaltflächen unter die Überschrift, statt sie
   zu überlagern oder seitliches Scrollen zu erzwingen. */
@media (max-width: 767.98px) {
    .d-flex.justify-content-between:has(> h1) {
        flex-wrap: wrap;
        gap: .5rem;
    }
    .d-flex.justify-content-between > h1 + .btn-group {
        width: 100%;
        flex-wrap: wrap;
        gap: .375rem;
    }
    .d-flex.justify-content-between > h1 + .btn-group > .btn {
        flex: 1 1 auto;
        margin-left: 0;
        border-radius: var(--bs-btn-border-radius);
    }
}