/* Schlanke Overrides oberhalb von CoreUI 5 (static/vendor/coreui/). CoreUI deckt Layout, Komponenten, Buttons, Tabellen und Forms ab; hier liegt nur, was CoreUI nicht ausdrückt oder was an JS/Tests gekoppelt ist: das Sidebar-Layout + Mobile-Toggle, das Material-/Foto-Gitter, die Lightbox sowie die Signatur-/Health-Anzeige im Auftrags-Detail. */ /* --------------------------------------------------------------------- */ /* Layout: Sidebar neben Inhalt. */ /* CoreUI legt die Sidebar als Flex-Geschwister VOR dem Inhalt an und */ /* macht sie ab 992px statisch im Fluss (kein sidebar-fixed!). Dafür */ /* muss der eine Flex-Reihe sein. Darunter wird die Sidebar per */ /* CoreUI-CSS fixed + per .show (admin_nav.js) ein-/ausgeblendet. */ /* --------------------------------------------------------------------- */ body { display: flex; flex-direction: row; align-items: stretch; min-height: 100vh; } .wrapper { flex: 1 1 auto; min-width: 0; /* erlaubt Schrumpfen, verhindert horizontales Überlaufen */ } /* Mobile: Sidebar liegt über dem Inhalt; Backdrop dahinter. CoreUI setzt die Sidebar selbst auf position:fixed und schiebt sie ohne .show per negativem Margin aus dem Bild. */ @media (max-width: 991.98px) { #sidebar { z-index: 1045; } .sidebar-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(0, 0, 0, 0.5); } .sidebar-backdrop[hidden] { display: none; } } /* --------------------------------------------------------------------- */ /* Sidebar-Trenner: dünne Linie zwischen Nav-Gruppen (CoreUI hat hier nur */ /* .nav-title als Label, kein reines Divider). Setzt einen klaren Schnitt */ /* zwischen Auftragsbereich und persönlichen Einträgen. */ /* --------------------------------------------------------------------- */ .sidebar-nav .nav-divider { height: 0; margin: 0.5rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.15); } /* --------------------------------------------------------------------- */ /* Aufträge-Liste: Mobile-Karten ( form, .order-card .mt-2 > form > button, .order-card .mt-2 > button { width: 100%; } /* --------------------------------------------------------------------- */ /* Auftrags-Detail: Health-Antworten + Signatur-Vorschau. */ /* `.item.ja` und `.signature-preview` sind testgekoppelt (siehe */ /* tests/test_consent_detail_ui.py) — Klassennamen bleiben erhalten. */ /* --------------------------------------------------------------------- */ .health-list { display: flex; flex-direction: column; gap: 4px; } .health-list .item { display: flex; gap: 10px; align-items: center; font-size: 0.875rem; padding: 6px 10px; border-radius: 4px; } .health-list .item .ja { font-weight: 700; min-width: 50px; } .health-list .item.ja { background: var(--cui-danger, #e55353); color: #fff; } .signature-preview { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; } .signature-preview .k { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cui-secondary-color, #6c757d); } .signature-preview img { max-width: 280px; max-height: 120px; background: #fff; border: 1px solid var(--cui-border-color, #d8dbe0); padding: 6px; } /* --------------------------------------------------------------------- */ /* Material: Anzeige-Kacheln, Profil-Auswahl, Foto-Vorschau, Lightbox. */ /* Die data-* Hooks (data-zoom, data-lightbox …) bedient order_material.js;*/ /* hier nur das Aussehen. Bild-Hintergrund weiss (Vorlagen/Sticker). */ /* --------------------------------------------------------------------- */ .material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 12px 0; } .material-item { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--cui-border-color, #d8dbe0); border-radius: 8px; padding: 8px; background: var(--cui-card-bg, #fff); } .material-thumb { position: relative; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--cui-border-color, #d8dbe0); border-radius: 5px; overflow: hidden; background: #fff; } .material-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .material-thumb.is-zoomable { cursor: zoom-in; } .material-badge { position: absolute; top: 6px; right: 6px; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px; color: #fff; background: var(--cui-secondary, #6c757d); } .material-badge--foto { background: var(--cui-success, #2eb85c); } .material-item .label { font-size: 0.875rem; font-weight: 500; word-break: break-word; line-height: 1.3; } .material-item .label.is-empty { color: var(--cui-secondary-color, #6c757d); font-weight: 400; } .material-del { align-self: flex-start; background: none; border: none; cursor: pointer; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cui-secondary-color, #6c757d); padding: 2px 0; } .material-del:hover { color: var(--cui-danger, #e55353); } .material-empty { color: var(--cui-secondary-color, #6c757d); font-size: 0.875rem; margin: 8px 0 0; } /* Profil-Auswahl: ganze Kachel antippbar, klarer Selected-State. */ .material-pick { position: relative; cursor: pointer; user-select: none; } .material-pick > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .material-pick .pick-check { position: absolute; top: 6px; left: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--cui-border-color, #d8dbe0); background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; font-size: 14px; color: transparent; line-height: 1; } .material-pick:has(input:checked) { border-color: var(--cui-success, #2eb85c); } .material-pick:has(input:checked) .pick-check { background: var(--cui-success, #2eb85c); border-color: var(--cui-success, #2eb85c); color: #fff; } .material-pick:has(input:checked) .material-thumb { outline: 2px solid var(--cui-success, #2eb85c); } /* Grosser Foto-Aufnahme-Button (verdeckt den nackten file-Input). */ .photo-capture { margin: 6px 0 10px; } .photo-capture input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Vorschau des gewaehlten (noch nicht hochgeladenen) Fotos. */ .material-preview:not([hidden]) { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 8px; border: 1px solid var(--cui-border-color, #d8dbe0); border-radius: 8px; background: var(--cui-card-bg, #fff); } .material-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: 5px; background: #fff; flex: 0 0 auto; } .material-preview .pv-name { font-size: 0.8125rem; color: var(--cui-secondary-color, #6c757d); word-break: break-all; } /* Lightbox (Vollbild-Ansicht eines Material-Bilds), von order_material.js gesteuert. */ .lightbox:not([hidden]) { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.88); cursor: zoom-out; display: flex; align-items: center; justify-content: center; padding: 24px; } .lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; background: #fff; }