/* Auftragserfassung - eigene Styles */

/* ============================================================
   Globaler Chevron-Animations-Stack für Collapse-Toggles.
   Funktioniert mit allen üblichen Klassen-Konventionen:
     .collapse-chevron, .vac-chevron, .month-chevron,
     .completed-chevron, .kdv-chevron, .holiday-chevron,
     .user-block-chevron, ...
   Voraussetzung: das Toggle-Element hat
     - data-bs-toggle="collapse"
     - aria-expanded="true"/"false"
   Der globale JS-Helper in app.js synct aria-expanded zuverlässig
   auch auf <div>/<span>-Toggles. display:inline-block ist Pflicht,
   sonst greift transform: rotate auf einem <i> nicht.
   ============================================================ */
[data-bs-toggle="collapse"] [class*="-chevron"] {
    display: inline-block;
    transform-origin: center;
    transition: transform .2s ease;
}
[data-bs-toggle="collapse"][aria-expanded="false"] [class*="-chevron"],
[data-bs-toggle="collapse"].collapsed [class*="-chevron"] {
    transform: rotate(-90deg);
}

/* Schriftgrößen-Abstufung Mobile-First */
body {
    font-size: 1rem;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   Persönliche Schriftgrößen-Modi (Profil-Einstellung)
   "normal" ist Default und braucht keine Klasse.
   ============================================================ */
body.font-size-large {
    font-size: 1.25rem;
}
body.font-size-large h1 { font-size: 2.4rem; }
body.font-size-large h2 { font-size: 2.0rem; }
body.font-size-large .h3 { font-size: 1.85rem !important; }
body.font-size-large .small,
body.font-size-large small { font-size: 1.0rem !important; }
body.font-size-large .order-list-item .customer-name { font-size: 1.5rem; }
body.font-size-large .order-list-item .description-preview { font-size: 1.15rem !important; }
body.font-size-large .badge { font-size: 0.95rem; }
body.font-size-large .btn { font-size: 1.15rem; }
body.font-size-large .form-control,
body.font-size-large .form-select { font-size: 1.15rem; }

body.font-size-xlarge {
    font-size: 1.5rem;
    font-weight: 500;
}
body.font-size-xlarge h1,
body.font-size-xlarge h2,
body.font-size-xlarge .h3,
body.font-size-xlarge .h4,
body.font-size-xlarge .h5,
body.font-size-xlarge .h6 { font-weight: 800 !important; }
body.font-size-xlarge h1 { font-size: 2.9rem; }
body.font-size-xlarge h2 { font-size: 2.4rem; }
body.font-size-xlarge .h3 { font-size: 2.2rem !important; }
body.font-size-xlarge .small,
body.font-size-xlarge small { font-size: 1.2rem !important; font-weight: 500; }
body.font-size-xlarge .order-list-item .customer-name {
    font-size: 1.85rem;
    font-weight: 800;
}
body.font-size-xlarge .order-list-item .description-preview {
    font-size: 1.4rem !important;
    color: #333 !important;
    font-weight: 500;
}
body.font-size-xlarge .order-list-item .appointment-block {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 6px 14px;
}
body.font-size-xlarge .order-list-item .meta-footer { font-size: 1rem; }
body.font-size-xlarge .badge { font-size: 1.1rem; font-weight: 700; padding: 0.35em 0.7em; }
body.font-size-xlarge .btn {
    font-size: 1.4rem;
    font-weight: 600;
    padding: 0.6rem 1.1rem;
}
body.font-size-xlarge .form-control,
body.font-size-xlarge .form-select {
    font-size: 1.4rem;
    padding: 0.7rem 0.95rem;
    font-weight: 500;
}
body.font-size-xlarge .form-label { font-weight: 700; font-size: 1.2rem; }
body.font-size-xlarge .navbar { font-size: 1.3rem; font-weight: 600; }
body.font-size-xlarge .nav-link { font-weight: 600; }
body.font-size-xlarge .table { font-size: 1.25rem; }
body.font-size-xlarge .table th { font-weight: 800; }
body.font-size-xlarge .alert { font-size: 1.25rem; font-weight: 500; }

/* Druck soll IMMER normale Größe haben, unabhängig vom Bildschirm-Modus */
@media print {
    body.font-size-large,
    body.font-size-xlarge {
        font-size: 1rem !important;
        font-weight: normal !important;
    }
    body.font-size-large *,
    body.font-size-xlarge * {
        font-size: revert !important;
        font-weight: revert !important;
    }
}

/* Karten-Hover-Effekt für die Dashboard-Kacheln */
a.text-decoration-none .card {
    transition: transform .15s ease, box-shadow .15s ease;
}
a.text-decoration-none:hover .card {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important;
}

/* Cards mit border-0 verschwinden auf weissem/hellem Hintergrund.
   Wir setzen ueberall einen dezenten aber sichtbaren Border, damit
   Container voneinander abgegrenzt sind - auch auf "schwachen" Monitoren. */
.card.border-0 {
    border: 1px solid rgba(0, 0, 0, .12) !important;
}
.card.shadow-sm {
    box-shadow: 0 .125rem .35rem rgba(0, 0, 0, .12) !important;
}

/* ============================================================
   Touch / Mobile Quality-of-Life
   ============================================================ */

/* Tap-Highlight (graues Rechteck beim Antippen) global aus — sieht auf
   Tablets schmuddelig aus und :active-Feedback macht das schon. */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Größere Touch-Ziele auf Mobilgeräten */
@media (max-width: 576px) {
    .btn, .form-control, .form-select {
        min-height: 44px;
    }

    /* iOS zoomed beim Fokussieren in ein Input rein, wenn dessen
       computed font-size < 16px ist. Bootstrap-Defaults sind 1rem,
       aber kleinere Form-Controls (.form-control-sm, Inline-Edit-
       Tabellen) liegen darunter. Pauschale 16px hier verhindert das
       ungewollte Zoom-In auf iPad/iPhone. */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ============================================================
       Auftragslisten-Karten auf Smartphones (~380-430 CSS-Pixel breit):
       
       Default-Layout reserviert per padding-right: 175px die rechte Spalte
       für den absolute-positionierten Action-Stack (Termin/Drucken/Erledigt).
       Das ist auf Desktop schick, aber auf Mobile zwingt es auch die
       Beschreibungs-Box - die UNTER dem Stack steht und daher dort gar
       keinen Platz reservieren müsste - in nur ~60% der Karten-Breite.
       
       Lösung: padding-right der Karte auf normal zurück, dafür die obere
       Zeile (Kundenname + Stack) und die Badge-Zeile selbst mit dem
       padding-right ausstatten - so weichen NUR die oberen Inhalte dem
       absoluten Stack aus, die description-preview unten nutzt die volle
       Karten-Breite.
       
       Wirkt auf:
         - app/Views/orders/index.php (Aufträge-Listen-Ansicht)
         - app/Views/dashboard/_order_row.php (Dashboard-Auftragszeilen,
           5x eingebunden für Heute/Woche/Backlog/Erledigt/Dringend)
       
       Hinweis: Specificity-Trick mit doppeltem Klassen-Selektor
       (.order-list-item.order-list-item) ist nötig, weil der Default-Block
       später in der Datei steht und bei gleicher Spezifität gewinnen würde.
       ============================================================ */
    .order-list-item.order-list-item {
        padding-right: 16px !important;
    }
    /* Obere Zeile (Kundenname links, Action-Stack rechts via absolute):
       padding-right damit der Kundenname-Text nicht UNTER dem Stack landet. */
    .order-list-item.order-list-item > .d-flex.justify-content-between.mb-1 {
        padding-right: 159px;
    }
    /* Badge-Zeile (Auftragsnummer, Status, Priorität, Kategorie, Ort, Monteur):
       ebenfalls am Stack vorbei, weil sie im selben vertikalen Bereich liegt. */
    .order-list-item.order-list-item > .d-flex.align-items-center.flex-wrap.small {
        padding-right: 159px;
    }
    /* description-preview braucht keine spezielle Regel - sie bekommt
       automatisch die volle Karten-Breite (padding-right wurde auf 16px reduziert). */
}

/* Prioritäts-Farbkennzeichnung als linker Balken */
.priority-bar {
    border-left: 5px solid var(--priority-color, #6c757d);
    padding-left: 16px;
}

/* Listenansicht: Kundenname groß als Überschrift */
.order-list-item .customer-name {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Order-Liste: Karten mit kleinem Abstand */
.order-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Dashboard-Gruppen-Header (Heute, Diese Woche, etc.) */
.dashboard-group-header {
    padding: 8px 14px;
    border-radius: 6px;
    margin-bottom: 5px;
    border: 1px solid rgba(0,0,0,0.08);
}

/* Einzelne Karten: weißer Hintergrund, Schatten, abgerundete Ecken */
.order-list-item {
    display: block;
    background: #ffffff;
    color: #212529;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    padding: 14px 16px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s ease, transform 0.05s ease;
}
.order-list-item:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
    text-decoration: none;
    color: #212529;
}
.order-list-item:active {
    transform: translateY(1px);
}

/* Prioritäts-Balken bei List-Items: nur Border, kein eigenes Padding */
.order-list-item.priority-bar {
    border-left: 5px solid var(--priority-color, #6c757d);
    padding-left: 16px !important;
}

/* Termin-Block oben - groß und farblich hervorgehoben */
.order-list-item .appointment-block {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: .95rem;
    font-weight: 600;
    background: var(--priority-color, #6c757d);
    color: var(--priority-text-color, #fff);
}

/* Action-Stack rechts in der Karte: Termin + Drucken + Erledigt.
   Absolut positioniert, damit der Stack die Höhe der Karte nicht beeinflusst -
   die linke Inhalts-Spalte bleibt kompakt, egal wie viele Buttons rechts gestackt sind.
   Die Karte selbst bekommt rechts genug padding, damit kein Inhalt unter dem Stack landet,
   und eine Mindesthöhe, damit der unterste Button bei kurzen Aufträgen nicht überhängt. */
.order-list-item {
    position: relative;
    padding-right: 175px !important;
    min-height: 140px;
}
.order-list-item .order-action-stack {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 150px;
    z-index: 2;
}
.order-list-item .order-action-stack .appointment-block {
    justify-content: center;
}
.order-list-item .order-action-stack .btn {
    text-align: center;
}

/* Beschreibung als clean-typografischer Textblock mit dezentem Border (Card-in-Card),
   ohne eigenen Hintergrund (transparent zur Order-Item-Farbe). Leicht fettere Schrift
   und mehr Abstand zur Badge-Zeile, ergaenzt durch feinen grauen Rahmen + minimalen
   Schatten - sieht aus wie ein in sich geschlossener Notiz-Block. */
.order-list-item .description-preview {
    display: -webkit-box;
    -webkit-line-clamp: var(--description-max-lines, 3);
    line-clamp: var(--description-max-lines, 3);
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    color: #1c1c1c;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 16px 0 0 0 !important;
    padding: 8px 10px !important;
    text-indent: 0 !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Footer-Zeile mit Erstellt-Datum/Benutzer */
.order-list-item .meta-footer {
    margin-top: 8px;
    color: #6c757d;
    font-size: .8rem;
}

/* Druck-Layout */
@media print {
    .navbar, footer, .no-print { display: none !important; }
    body { background: white !important; }
    main { padding: 0 !important; }
}

/* =====================================================
   Leaflet-Popups: Bootstrap-Buttons korrekt darstellen
   =====================================================
   Leaflet definiert .leaflet-container a { color: #0078A8 } mit höherer
   Spezifität als Bootstraps .btn-primary - daher würden Buttons in
   Karten-Popups blau-grau statt weiß angezeigt.
   Die folgenden Overrides stellen die Bootstrap-Standard-Farben wieder
   her und entfernen die Leaflet-Unterstreichung.
   ===================================================== */
.leaflet-container a.btn {
    text-decoration: none;
}
.leaflet-container a.btn-primary,
.leaflet-container a.btn-primary:hover,
.leaflet-container a.btn-primary:focus {
    color: #fff;
}
.leaflet-container a.btn-outline-primary {
    color: var(--bs-primary, #0d6efd);
}
.leaflet-container a.btn-outline-primary:hover,
.leaflet-container a.btn-outline-primary:focus {
    color: #fff;
}
.leaflet-container a.btn-outline-secondary {
    color: #6c757d;
}
.leaflet-container a.btn-outline-secondary:hover,
.leaflet-container a.btn-outline-secondary:focus {
    color: #fff;
}
.leaflet-container a.btn-success,
.leaflet-container a.btn-success:hover,
.leaflet-container a.btn-success:focus,
.leaflet-container a.btn-danger,
.leaflet-container a.btn-danger:hover,
.leaflet-container a.btn-danger:focus,
.leaflet-container a.btn-warning,
.leaflet-container a.btn-warning:hover,
.leaflet-container a.btn-warning:focus {
    color: #fff;
}

/* =====================================================
   Password-Strength-Meter (siehe assets/js/password-strength.js)
   ===================================================== */
.pw-strength-meter .pw-bar {
    transition: width 0.25s ease, background-color 0.25s ease;
}
.pw-strength-meter .pw-checks li {
    transition: color 0.15s ease;
}
.pw-strength-meter .pw-icon {
    display: inline-block;
    width: 1.1em;
    text-align: center;
    font-weight: bold;
}

/* =====================================================
   Hoher Kontrast-Modus
   =====================================================
   Aktiv durch body.high-contrast. Verstärkt Hintergrundfarben,
   verdunkelt Texte und macht Rahmen deutlicher sichtbar -
   bewusst etwas zurückhaltend, damit die Anwendung nicht "hart"
   wirkt, aber dennoch deutlich lesbarer als im Normal-Modus.
   ===================================================== */
body.high-contrast {
    background: #fff !important;
    color: #1a1a1a;
}
body.high-contrast .card,
body.high-contrast .modal-content {
    border: 1px solid #444 !important;
    box-shadow: none !important;
}
body.high-contrast .card-header {
    background: #f0f0f0 !important;
    border-bottom: 1px solid #444 !important;
}
body.high-contrast .table-light,
body.high-contrast thead.table-light tr {
    background-color: #e0e0e0 !important;
    color: #1a1a1a !important;
}
body.high-contrast .table {
    border-color: #555 !important;
}
body.high-contrast .table > :not(caption) > * > * {
    border-bottom-color: #b0b0b0 !important;
}
body.high-contrast .text-muted,
body.high-contrast .small.text-muted {
    color: #555 !important;
}
body.high-contrast .form-control,
body.high-contrast .form-select {
    border: 1.5px solid #444 !important;
    background: #fff !important;
    color: #1a1a1a !important;
}
body.high-contrast .form-control:focus,
body.high-contrast .form-select:focus {
    border-color: #0a44d6 !important;
    box-shadow: 0 0 0 2px rgba(10,68,214,0.25) !important;
}
body.high-contrast .form-label {
    color: #1a1a1a !important;
    font-weight: 600;
}

/* Buttons: kräftigere Border und mehr Kontrast */
body.high-contrast .btn-outline-primary {
    border: 1.5px solid #0a44d6 !important;
    color: #0a44d6 !important;
    background: #fff !important;
}
body.high-contrast .btn-outline-secondary {
    border: 1.5px solid #555 !important;
    color: #1a1a1a !important;
    background: #fff !important;
}
body.high-contrast .btn-outline-success {
    border: 1.5px solid #1a7a36 !important;
    color: #1a7a36 !important;
    background: #fff !important;
}
body.high-contrast .btn-outline-danger {
    border: 1.5px solid #b80000 !important;
    color: #b80000 !important;
    background: #fff !important;
}
/* Ausgewählte btn-check-Toggles (z.B. Monteur-Auswahl beim Kundendienst) müssen
   auch im Kontrast-Modus als GEFÜLLT erkennbar sein. Ohne diese Regeln überschreibt
   die Outline-Regel oben (background:#fff !important) den Auswahl-Zustand, sodass
   ein angehakter Button optisch wie ein nicht angehakter aussieht. */
body.high-contrast .btn-check:checked + .btn-outline-primary {
    background: #0a44d6 !important;
    color: #fff !important;
    border-color: #0a44d6 !important;
}
body.high-contrast .btn-check:checked + .btn-outline-secondary {
    background: #555 !important;
    color: #fff !important;
    border-color: #555 !important;
}
body.high-contrast .btn-check:checked + .btn-outline-success {
    background: #1a7a36 !important;
    color: #fff !important;
    border-color: #1a7a36 !important;
}
body.high-contrast .btn-check:checked + .btn-outline-danger {
    background: #b80000 !important;
    color: #fff !important;
    border-color: #b80000 !important;
}
body.high-contrast .btn-primary,
body.high-contrast .btn-primary:not(:disabled):not(.disabled) {
    background: #0a44d6 !important;
    border-color: #0a44d6 !important;
    color: #fff !important;
}
body.high-contrast .btn-success,
body.high-contrast .btn-success:not(:disabled):not(.disabled) {
    background: #1a7a36 !important;
    border-color: #1a7a36 !important;
    color: #fff !important;
}
body.high-contrast .btn-danger,
body.high-contrast .btn-danger:not(:disabled):not(.disabled) {
    background: #b80000 !important;
    border-color: #b80000 !important;
    color: #fff !important;
}

/* Badges kräftiger */
body.high-contrast .badge {
    border: 1px solid rgba(0,0,0,0.25);
    font-weight: 600;
}
body.high-contrast .badge.bg-light {
    background: #e0e0e0 !important;
    color: #1a1a1a !important;
}
body.high-contrast .badge.bg-secondary {
    background: #444 !important;
    color: #fff !important;
}

/* Auftragslisten-Karten: deutlicher Rahmen + verstärkte Highlight-Farben */
body.high-contrast .order-list-item {
    border: 1px solid #444 !important;
    box-shadow: none !important;
}
body.high-contrast .order-list-item:hover {
    box-shadow: 0 0 0 2px rgba(10,68,214,0.25) !important;
}
body.high-contrast .order-list-item.priority-bar {
    border-left-width: 6px !important;
}

/* Navbar/Modul-Wechsler kräftiger */
body.high-contrast .navbar.bg-primary {
    background-color: #0a2b80 !important;
    border-bottom: 2px solid #1a1a1a !important;
}
body.high-contrast .navbar .nav-link,
body.high-contrast .navbar .navbar-brand,
body.high-contrast .navbar .navbar-text {
    color: #fff !important;
    font-weight: 500;
}

/* Alerts etwas kräftiger umranden */
body.high-contrast .alert {
    border-width: 1.5px !important;
    font-weight: 500;
}
body.high-contrast .alert-success { background: #d3f5dd !important; color: #0e3d1d !important; border-color: #1a7a36 !important; }
body.high-contrast .alert-danger  { background: #fde0e0 !important; color: #6b0000 !important; border-color: #b80000 !important; }
body.high-contrast .alert-warning { background: #fff5b8 !important; color: #503600 !important; border-color: #806600 !important; }
body.high-contrast .alert-info    { background: #d3e0ff !important; color: #0a2b80 !important; border-color: #0a44d6 !important; }

/* Links kräftiger */
body.high-contrast a {
    color: #0a44d6;
}
body.high-contrast a:hover {
    color: #082880;
    text-decoration: underline;
}

/* Tabellen-Highlights (überfällig/heute/zugewiesen/gedruckt) leicht intensivieren */
body.high-contrast .order-list-item[style*="background-color"] {
    border: 1px solid #444 !important;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.08) !important;
}

/* =====================================================
   Article-Search Dropdown - Mobile-Anpassung
   =====================================================
   Auf Mobile-Bildschirmen ist das Eingabefeld oft schmal
   (z.B. in einer Tabelle mit wenig Spaltenbreite). Das
   Dropdown würde dann unleserlich klein werden. Daher
   strecken wir es auf Mobile bis fast zum Viewport-Rand
   und größere Items für Touch-Bedienung.
   ===================================================== */
@media (max-width: 768px) {
    .article-search-dropdown {
        /* left: 0 = relativ zum article-search-wrapper, also zur linken Kante des Inputs.
           min/max-width gewinnt gegen das Bootstrap w-100, der Dropdown wird breiter
           als das Input und ragt nach rechts in den Viewport. */
        left: 0 !important;
        width: auto !important;
        min-width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
    /* Treffer-Items größer/luftiger für Touch-Bedienung */
    .article-search-dropdown .list-group-item {
        padding: 12px 14px;
        font-size: 0.95rem;
        line-height: 1.35;
    }
}

/* =====================================================
   Geteilte Kachel (z.B. "Alle / Meine Aufträge" auf Dashboard)
   =====================================================
   Die ganze Karte hebt sich beim Hover wie die anderen Kacheln,
   und die einzelne Hälfte zeigt zusätzlich einen leichten
   Hintergrund-Highlight, damit klar ist welche Seite geklickt wird.
   ===================================================== */
.split-tile {
    transition: transform .15s ease, box-shadow .15s ease;
}
.split-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important;
}
.split-tile .tile-half {
    transition: background-color .15s ease;
}
.split-tile .tile-half:hover {
    background-color: rgba(13, 110, 253, 0.05);
}