/* ============================================================================
   HAPTIK — EXPERIMENT zu PCP-T-2026-1736
   Nicht committen. Zurück mit:
       rm base/static/css/haptics.css
       git checkout base/templates/base/head_body.html

   Eine Regel trägt die ganze Datei:

       Was du drückst, steht hoch.   Was du füllst, liegt tief.

   Buttons wölben sich heraus, Eingabefelder sind Mulden. Das Licht kommt
   immer von oben, also sitzt die helle Kante oben und der Schatten unten —
   nie andersherum. Schatten sind petrolfarben getönt (#002a3a), nicht
   schwarz; das ist der Unterschied zwischen edel und schmuddelig.

   Karten bleiben bewusst flach. Sie sind Fläche, nicht Bedienelement — gäbe
   man ihnen dieselbe Behandlung, blubbert die Seite und der Knopf darin
   verliert seinen Vorrang.
   ============================================================================ */

:root {
    --h-ink: 0, 42, 58;

    --h-edge: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    --h-rest: 0 1px 1px rgba(var(--h-ink), 0.10), 0 2px 5px rgba(var(--h-ink), 0.10);
    --h-hover: 0 2px 3px rgba(var(--h-ink), 0.12), 0 7px 16px rgba(var(--h-ink), 0.16);
    --h-press: inset 0 2px 4px rgba(var(--h-ink), 0.30);
    --h-well: inset 0 2px 3px rgba(var(--h-ink), 0.10);
    --h-sheet: 0 1px 1px rgba(var(--h-ink), 0.10), 0 12px 28px rgba(var(--h-ink), 0.18);

    --h-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.03) 48%,
        rgba(var(--h-ink), 0.07) 100%);

    --h-lift-curve: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Auf dunklem Grund gibt es kein Umgebungslicht, das eine Kante aufhellen
   könnte. Die Lichtkante wird schwächer, die Schatten tiefer und neutral. */
[data-bs-theme=dark] {
    --h-ink: 0, 0, 0;

    --h-edge: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --h-rest: 0 1px 1px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.40);
    --h-hover: 0 2px 4px rgba(0, 0, 0, 0.50), 0 8px 20px rgba(0, 0, 0, 0.50);
    --h-press: inset 0 2px 5px rgba(0, 0, 0, 0.55);
    --h-well: inset 0 2px 4px rgba(0, 0, 0, 0.45);
    --h-sheet: 0 1px 1px rgba(0, 0, 0, 0.5), 0 14px 32px rgba(0, 0, 0, 0.55);

    --h-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.02) 48%,
        rgba(0, 0, 0, 0.16) 100%);
}

/* --- Erhaben: Buttons ------------------------------------------------------ */

.btn {
    background-image: var(--h-sheen);
    box-shadow: var(--h-edge), var(--h-rest);
    transition: transform 0.09s var(--h-lift-curve),
                box-shadow 0.18s ease,
                background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out,
                color 0.15s ease-in-out;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--h-edge), var(--h-hover);
}

.btn:focus-visible {
    box-shadow: var(--h-edge), var(--h-rest), var(--bs-btn-focus-box-shadow);
}

/* Gedrückt heißt: die Fläche sinkt ein und das Licht kommt nicht mehr an sie.
   Gilt auch für ein offenes Dropdown — der Knopf bleibt gedrückt, solange
   das Menü steht. */
.btn:active,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
    transform: translateY(1px);
    box-shadow: var(--h-press);
}

/* Farbige Knöpfe werfen einen Hauch ihrer eigenen Farbe — sie wirken
   beleuchtet statt aufgeklebt. */
.btn-primary {
    box-shadow: var(--h-edge), var(--h-rest), 0 4px 12px rgba(var(--brand-primary-rgb), 0.22);
}

.btn-primary:hover {
    box-shadow: var(--h-edge), var(--h-hover), 0 8px 20px rgba(var(--brand-primary-rgb), 0.28);
}

.btn-awerka {
    box-shadow: var(--h-edge), var(--h-rest), 0 5px 16px rgba(254, 127, 45, 0.38);
}

.btn-awerka:hover,
.btn-awerka:focus {
    box-shadow: var(--h-edge), var(--h-hover), 0 9px 24px rgba(254, 127, 45, 0.45);
}

/* Umriss-Knöpfe sind zweite Wahl und bleiben flach, bis man sie anfasst. */
[class*="btn-outline-"] {
    background-image: none;
    box-shadow: none;
}

[class*="btn-outline-"]:hover {
    background-image: var(--h-sheen);
    box-shadow: var(--h-edge), var(--h-hover);
}

/* Textknöpfe und das Schließkreuz sind kein Material. */
.btn-link,
.btn-close {
    background-image: none;
    box-shadow: none;
}

.btn-link:hover,
.btn-close:hover {
    transform: none;
    box-shadow: none;
}

.btn:disabled,
.btn.disabled {
    background-image: none;
    box-shadow: none;
    transform: none;
}

/* --- Vertieft: Eingaben ---------------------------------------------------- */

.form-control,
.form-select {
    box-shadow: var(--h-well);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.form-control:focus,
.form-select:focus {
    box-shadow: var(--h-well), 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.28);
}

/* Das Kästchen ist leer eine Mulde und gefüllt eine erhabene Kachel. */
.form-check-input {
    box-shadow: var(--h-well);
    transition: box-shadow 0.18s ease, background-color 0.15s ease-in-out;
}

.form-check-input:checked {
    background-image: var(--bs-form-check-bg-image), var(--h-sheen);
    box-shadow: var(--h-edge), var(--h-rest);
}

/* Der Schalter ist die Ausnahme: seine Rille bleibt eine Rille, auch wenn er
   an ist — der Knubbel darin fährt nur von links nach rechts. */
.form-switch .form-check-input,
.form-switch .form-check-input:checked {
    background-image: var(--bs-form-switch-bg);
    box-shadow: var(--h-well);
}

.form-range::-webkit-slider-runnable-track {
    box-shadow: var(--h-well);
}

.form-range::-moz-range-track {
    box-shadow: var(--h-well);
}

.form-range::-webkit-slider-thumb {
    box-shadow: var(--h-edge), var(--h-rest);
}

.form-range::-moz-range-thumb {
    box-shadow: var(--h-edge), var(--h-rest);
}

/* --- Schwebend: Menüs ------------------------------------------------------ */

.dropdown-menu {
    box-shadow: var(--h-sheet);
    border-color: rgba(var(--h-ink), 0.10);
}

/* --- Wer keine Bewegung will, bekommt keine -------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn:hover,
    .btn:active,
    .btn.active,
    .btn.show {
        transform: none;
        transition: none;
    }
}

/* --- Die Eingabegruppe ist EINE Mulde ---------------------------------------
   Ein Feld besteht meist aus drei Teilen: Icon-Spalte, Eingabe und manchmal
   einem Knopf. Bisher trug nur die Eingabe die Mulde, die Icon-Spalte stand
   als eigener Kasten daneben und Select2 hatte gar keine — drei zusammen-
   geklebte Kästen mit sichtbaren Nähten statt einer durchgehenden Rinne.

   Jetzt trägt die Gruppe die Mulde, und was darin liegt, wird flach. Die
   eigene Klasse .field-group ist Absicht: .input-group allein träfe auch die
   Kopfzeilen-Suche, Werkzeugleisten und Modals.
   ---------------------------------------------------------------------------- */

.field-group {
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--h-well);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Alles in der Rinne verliert seinen eigenen Kasten. */
.field-group > .input-group-text,
.field-group > .form-floating > .form-control,
.field-group > .form-floating > .form-select,
.field-group > .form-floating > textarea.form-control,
.field-group > .input-group-text.checkbox-container,
.field-group .select2-container--bootstrap-5 .select2-selection {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Die Icon-Spalte ist Teil der Rinne, kein Nachbar. */
.field-group > .input-group-text {
    color: var(--bs-secondary-color);
    padding-right: 0.5rem;
}

/* Der Fokus wandert von der Eingabe auf die ganze Gruppe — sonst leuchtet
   mitten in der Rinne ein einzelnes Teilstück auf. */
.field-group:focus-within {
    border-color: var(--brand-outline);
    box-shadow: var(--h-well), 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.3);
}

.field-group > .form-floating > .form-control:focus,
.field-group > .form-floating > .form-select:focus,
.field-group .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.field-group .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: transparent;
    box-shadow: none;
}

.field-group:has(.is-invalid) {
    border-color: var(--bs-danger);
    box-shadow: var(--h-well), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

/* Knöpfe am Ende der Gruppe bleiben bewusst so, wie Bootstrap sie in einer
   input-group rendert — sie waren nicht das Problem. */

/* --- Schalterzeilen als Einstellungszeile -----------------------------------
   Der Schalter klebte mit seiner Beschriftung im linken Viertel, der Rest der
   Zeile blieb leer. Jetzt steht die Beschriftung links und der Schalter am
   rechten Ende — die Zeile wird als Ganzes zur Schaltfläche und man findet
   alle Schalter untereinander auf einer Linie.
   ---------------------------------------------------------------------------- */

.field-group > .checkbox-container {
    flex: 1 1 auto;
    justify-content: flex-start;
}

.field-group .form-check.form-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: auto;
    padding-left: 0;
    margin-bottom: 0;
}

.field-group .form-check.form-switch > .form-check-input {
    float: none;
    margin: 0;
    flex: 0 0 auto;
}

.field-group .form-check.form-switch > .form-label {
    margin: 0 !important;
}