/* ==========================================================================
   Spindelvisor Portal - Login & Dashboard-Schale
   Eigenstaendiges, schlankes Layout fuer den regulaeren Benutzername/
   Passwort-Login im Hauptprojekt (kein Plugin, erreichbar unter
   api.spindelvisor.de) - optisch angelehnt an den Split-Screen-Login des
   BdeProduction-Plugins (Sichtbereich + Formular), aber bewusst
   eigenstaendig (kein Abhaengigkeit zum Plugin-CSS).
   ========================================================================== */

/* --svp-primary/--svp-primary-dark/--svp-hover-bg/--bs-primary/--bs-link-*
   kommen jetzt aus webroot/css/theme.css (geteiltes Marken-Theme fuer
   ALLE Layouts, siehe dortiger Kommentar - Nutzerkorrektur "werden hier
   etwa manche css styles doppelt gespeichert?") - theme.css wird VOR
   dieser Datei geladen (siehe templates/layout/portal.php), die Variablen
   sind hier also bereits verfuegbar, ohne sie nochmal zu definieren. */

.svp-login__form-side .btn-primary,
.svp-app-body .btn-primary {
    background-color: var(--svp-primary);
    border-color: var(--svp-primary);
}

.svp-login__form-side .btn-primary:hover,
.svp-app-body .btn-primary:hover {
    background-color: var(--svp-primary-dark);
    border-color: var(--svp-primary-dark);
}

/* ---- Login (Split-Screen) ---- */

body.svp-login-body {
    height: 100vh;
    overflow: hidden;
}

.svp-login__visual {
    flex: 1 1 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(120, 10, 20, 0.75) 0%, rgba(20, 5, 8, 0.88) 100%),
        url('/images/login/hero-spindel-schleifen.jpg') center/cover;
}

.svp-login__logo-wrap {
    margin-top: 24px;
    margin-bottom: 32px;
}

.svp-login__logo {
    height: 56px;
    width: auto;
}

.svp-login__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
}

.svp-login__visual h1 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.15;
    border-left: 4px solid #fff;
    padding-left: 24px;
    margin: 24px 0 0;
}

.svp-login__visual-footer {
    font-size: .78rem;
    opacity: .85;
}

.svp-login__divider {
    flex: 0 0 6px;
    background: linear-gradient(180deg, var(--svp-primary) 0%, var(--svp-primary-dark) 100%);
}

.svp-login__form-side {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: #f8f9fa;
    overflow-y: auto;
}

.svp-login__form-inner {
    width: 100%;
    max-width: 420px;
}

.svp-no-focus-ring:focus {
    box-shadow: none;
    border-color: transparent;
}

@media (max-width: 991.98px) {
    .svp-login__visual,
    .svp-login__divider {
        display: none;
    }
}

/* ---- Dashboard-Schale (Topbar + Sidebar), Stil analog BdeProduction ---- */

body.svp-app-body {
    height: 100vh;
    overflow: hidden;
}

:root {
    --svp-sidebar-width: 240px;
}

/* Eingeklappt (nur Icons, mehr Platz fuer den Inhalt rechts) - Klasse
   wird per JS auf <html> gesetzt/entfernt, siehe templates/layout/
   portal.php (Toggle-Button + localStorage). Auf <html> statt <body>,
   damit der Zustand schon im <head>-Script (vor dem ersten Rendern)
   gesetzt werden kann - verhindert ein kurzes Aufklappen beim Laden. */
html.svp-sidebar-collapsed {
    --svp-sidebar-width: 64px;
}

.svp-brand-col,
.svp-app-sidebar {
    width: var(--svp-sidebar-width);
    flex-shrink: 0;
    transition: width .15s ease;
    overflow: hidden;
}

.svp-app-main {
    min-width: 0;
    overflow-y: auto;
}

.svp-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #495057;
    border-radius: .375rem;
    padding: .5rem .75rem;
    white-space: nowrap;
}

.svp-nav-link.active {
    background-color: var(--svp-primary);
    color: #fff !important;
}

/* Neutraler grauer Hover (NICHT rot/blau) - gleiches Verhalten wie die
   bereits bestehende BdeProduction-Sidebar (.bdep-app-sidebar__link:hover,
   siehe bde_production.css) - nur die aktive Seite (.active oben) ist
   rot gefuellt. Ohne diese Regel griff Bootstraps eigenes .nav-link:hover
   (blau), da .svp-nav-link IMMER zusaetzlich die Bootstrap-Klasse
   .nav-link traegt. */
.svp-nav-link:hover,
.svp-nav-link:focus {
    background-color: var(--svp-hover-bg);
    color: #495057;
}

.svp-nav-link.active:hover {
    background-color: var(--svp-primary);
    color: #fff;
}

/* Eingeklappt: nur noch die Icons (fa-fw-Icon vor dem Label bleibt
   stehen, Text wird ausgeblendet), zentriert statt linksbuendig. */
html.svp-sidebar-collapsed .svp-nav-label {
    display: none;
}

html.svp-sidebar-collapsed .svp-nav-link {
    justify-content: center;
    padding-left: .25rem;
    padding-right: .25rem;
}

/* Aufklappbare Menuegruppe (aktuell "Fertigung", siehe portal.php) - der
   Gruppen-Header sieht aus wie ein normaler .svp-nav-link, ist aber ein
   <button> statt <a> (klappt nur auf/zu, navigiert selbst nirgendwo hin).
   Auf/zu-Zustand je Gruppe wird in localStorage gemerkt (Script am
   Seitenende von portal.php). */
.svp-nav-group__toggle {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.svp-nav-group__chevron {
    font-size: .65rem;
    color: #adb5bd;
    transition: transform .15s ease;
}

/* Direkt-Kind-Kombinator (">"), NICHT Nachfahren-Kombinator - sonst
   "leckt" der offene Zustand einer AEUSSEREN Gruppe (z. B. "Stammdaten")
   in eine VERSCHACHTELTE innere Gruppe (z. B. "Produktion") hinein: die
   waere dann IMMER sichtbar/aufgeklappt, sobald die aeussere Gruppe offen
   ist, unabhaengig vom eigenen Auf/zu-Zustand - macht das Auf-/Zuklappen
   der zweiten Ebene wirkungslos (Nutzerkorrektur, siehe portal_nav_items.php). */
.svp-nav-group--open > .svp-nav-group__toggle .svp-nav-group__chevron {
    transform: rotate(180deg);
}

.svp-nav-group__items {
    display: none;
    flex-direction: column;
    gap: 1px;
    margin-top: 1px;
}

.svp-nav-group--open > .svp-nav-group__items {
    display: flex;
}

.svp-nav-sublink {
    padding-left: 2.35rem;
    font-size: .92rem;
}

/* Ebene 3 (verschachtelte Untergruppe, z. B. "Stammdaten" > "Produktion" >
   "Maschinenpark") - Nutzeranfrage "das menu bitte optional 2 oder
   3-stufig", siehe templates/element/portal_nav_items.php. Nochmals
   eingerueckt gegenueber .svp-nav-sublink. */
.svp-nav-subsublink {
    padding-left: 3.6rem;
}

/* Verschachtelte Untergruppe selbst (z. B. "Produktion") - ihr eigener
   Toggle-Button liegt auf Ebene 2, bekommt daher zusaetzlich
   .svp-nav-sublink (Einrueckung), ihre Kind-Links (Ebene 3) bekommen
   zusaetzlich .svp-nav-subsublink oben. */
.svp-nav-group--nested .svp-nav-group__items {
    margin-top: 0;
}

/* Eingeklappte Sidebar (nur Icons, siehe oben): Untermenue + Pfeil
   ebenfalls ausblenden, wie die Labels der Top-Level-Links. */
html.svp-sidebar-collapsed .svp-nav-group__items,
html.svp-sidebar-collapsed .svp-nav-group__chevron {
    display: none;
}

/* ---- Select2 wie ein normales Bootstrap-Formularfeld aussehen lassen
   (Nutzeranfrage) - bewusst HIER statt in einem Plugin-CSS, damit jedes
   Select2 in der ganzen Portal-Shell automatisch gleich aussieht, nicht
   nur das aktuell einzige (ProductionManager-Reklamationsformular,
   "Verantwortlicher Mitarbeiter"). Ueberschreibt select2.min.css'
   eigenes, dunkleres Standard-Grau (#aaa) + knapperes Padding.
   !important ist hier noetig (nicht nur Bequemlichkeit): select2.min.css
   wird ueber der Seite eigenen css-Block IMMER NACH portal.css geladen
   (siehe templates/layout/portal.php, <?= $this->fetch('css') ?> kommt
   nach dem portal.css-Link) - bei gleicher Selektor-Spezifitaet wie hier
   gewinnt sonst schlicht die spaeter geladene Vendor-Regel. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #dee2e6 !important;
    border-radius: .375rem !important;
    /* select2.min.css setzt an anderer Stelle (.select2-container
       .select2-selection--multiple, gleiche Spezifitaet) ebenfalls eine
       min-height (32px) - laedt ebenfalls nach dieser Regel, braucht also
       auch hier !important. */
    min-height: calc(1.5em + .75rem + 2px) !important;
}

.select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    padding: 0 .75rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: normal;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + .75rem);
    right: .5rem;
}

.select2-container--default .select2-selection--multiple {
    padding: .3125rem .5rem !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
    margin: 0;
    padding: .1rem .25rem;
}

/* select2.min.css reserviert per padding-left:20px Platz fuer den "x"-
   Button (.select2-selection__choice__remove, absolut positioniert auf
   left:0) - unser pauschales "padding: .05rem .5rem" hatte das mit
   ueberschrieben, wodurch das "x" hinter dem ersten Buchstaben lag
   (Nutzerkorrektur). Links deshalb eigener, groesserer Wert statt
   Shorthand. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0 !important;
    background: #f1f3f5 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: .25rem !important;
    padding: .05rem .5rem .05rem 1.3rem !important;
}

/* Fokus-Ring 1:1 wie Bootstraps eigenes .form-control:focus/.form-select:focus,
   damit sich Select2 beim Klicken nicht anders anfuehlt als die uebrigen
   Felder. */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

/* Select2 setzt selbst KEINE responsive Breite (Nutzeranfrage: "bitte
   grundsaetzlich responsive beruecksichtigen") - width:'100%' wird zwar
   schon beim Initialisieren übergeben (siehe ProductionOrders/index.php),
   das erzeugt aber nur ein Inline-style mit dem zum Init-Zeitpunkt
   berechneten Pixelwert, der bei einer spaeteren Fenstergroessenaenderung
   NICHT nachgefuehrt wird - hier deshalb zusaetzlich hart auf 100% der
   Spalte erzwungen. */
.select2-container {
    width: 100% !important;
}

/* Schriftgröße-Umschalter "klein"/"groß" (Nutzeranfrage) - siehe
   element/font_size_toggle.php. Aktiver Zustand bewusst nur dezent
   markiert (Nutzeranfrage "unscheinbar"), kein kraeftiger Farbwechsel. */
.svp-font-size-toggle {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    padding: 0 .25rem;
}

.svp-font-size-toggle__btn {
    border: none;
    background: none;
    padding: 0;
    font-size: .7rem;
    font-weight: 600;
    color: #adb5bd;
    line-height: 1;
    cursor: pointer;
}

.svp-font-size-toggle__btn--lg {
    font-size: 1rem;
}

.svp-font-size-toggle__btn--active {
    color: #495057;
}

.svp-font-size-toggle__btn:hover {
    color: #212529;
}

/* Pagination-Styling (.bdep-pagination) kommt jetzt aus webroot/css/
   theme.css (geteiltes Marken-Theme fuer ALLE Layouts) statt hier
   nochmal definiert zu sein. */