volle Browser-Breite, kein Padding
Bestehende Klassen (.dashboard-container, .customers-container,
.page-container-wide, .ticket-container) bleiben separat — sind
aber jetzt ebenfalls auf die Tokens migriert. RM-49b kann Module
bei Bedarf auf die generischen Helper umstellen.
----------------------------------------------------------- */
.container,
.container-wide,
.container-narrow,
.container-fluid {
width: 100%;
margin-inline: auto;
padding-inline: var(--container-padding-inline);
box-sizing: border-box;
}
.container { max-width: var(--container-max-default); }
.container-wide { max-width: var(--container-max-wide); }
.container-narrow { max-width: var(--container-max-narrow); }
.container-fluid { max-width: 100%; padding-inline: 0; }
/* ---------- Responsive Grid-Helper (RM-49a, 02.05.2026) ----------
Generische 2-/3-Spalten-Grids, die auf schmalen Viewports auf
weniger Spalten schalten. RM-49b kann diese Klassen modulweit
einsetzen, statt jede Page eigene Media-Queries zu schreiben.
Breakpoints folgen --bp-s (600) und --bp-m (960) aus
design-tokens.css Sektion 11 (siehe auch _context/redesign/
09_responsive_audit.md Sektion 4).
----------------------------------------------------------------- */
.grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.grid-3col {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--space-lg);
}
@media (max-width: 959px) {
.grid-2col { grid-template-columns: 1fr; }
.grid-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
.grid-3col { grid-template-columns: 1fr; }
}
.customers-container {
max-width: var(--container-max-xwide);
margin: var(--space-xl) auto;
padding-inline: var(--container-padding-inline);
box-sizing: border-box;
}
.dashboard-container {
max-width: var(--container-max-wide);
margin: var(--space-xl) auto;
padding-inline: var(--container-padding-inline);
box-sizing: border-box;
}
.page-container-wide {
max-width: var(--container-max-wide);
margin: var(--space-xl) auto;
}
.content-box {
background: var(--bg-card);
padding: var(--space-sm-plus) var(--space-sm-plus);
border-radius: var(--radius-lg);
margin-bottom: var(--space-sm-plus);
box-shadow: var(--shadow-sm);
}
.content-box.p-0 {
padding: 0;
}
.content-box--airy {
padding: var(--space-lg) var(--space-lg);
}
.content-box h3 {
margin-top: var(--space-xs);
}
/* =========================
DASHBOARD-Block ausgelagert nach pages/dashboard.css (28.04.2026).
.dashboard-container bleibt hier (auch profile/index.php nutzt sie).
========================= */
/* -------------------------------------------------------
UNIVERSAL COLLAPSIBLE — wiederverwendbar auf allen Seiten
Wrapper: .collapsible | Header: .collapsible-header
Body: .collapsible-body | Icon: .collapse-toggle
Zustand: .collapsed auf dem Wrapper klappt den Body zu.
------------------------------------------------------- */
.collapsible-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-sm-plus) var(--space-md-plus);
background: var(--bg-nav);
color: var(--color-light);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
cursor: pointer;
user-select: none;
}
.collapsible-header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
color: inherit;
}
.collapse-toggle {
font-size: 18px;
font-weight: 700;
line-height: 1;
width: 24px;
text-align: center;
}
.collapsible-body {
max-height: 4000px;
overflow: hidden;
transition: max-height var(--transition-base), padding var(--transition-base);
}
.collapsed .collapsible-body {
max-height: 0;
}
.collapsed .collapsible-header {
border-radius: var(--radius-lg);
}
/* Flush-Fix: Collapsible bündig in content-box.p-0 */
.content-box.p-0 {
overflow: hidden;
}
.widget-count {
background: rgba(255,255,255,0.2);
padding: var(--space-2xs) var(--space-sm);
border-radius: var(--radius-xl);
font-size: 13px;
font-weight: 500;
}
/* WIDGET TICKET-ROWS + wt-* + Sneak-Preview + widget-empty/birthday/footer
ausgelagert nach pages/dashboard.css (28.04.2026). */
/* Upload-Overlay — zentraler Spinner + Fortschritt, Seite abgedunkelt */
.upload-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-tooltip);
}
.upload-overlay.hidden {
display: none;
}
.upload-overlay-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-lg);
}
.upload-overlay-text {
color: var(--color-light);
font-size: 15px;
font-weight: 500;
}
.upload-overlay-progress {
color: var(--color-light);
font-size: 22px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Schritt-fuer-Schritt-Anleitungen (Admin-Pages mit nummerierter Liste). */
.anleitung-list {
line-height: 1.8;
padding-left: var(--space-lg);
}
/* Konditions-Tabelle in customers/view.php Konditions-Tab:
- td vertical-align top, damit bei mehrzeiligen Werten
(Sub-Liste pro Anschrift) die Buttons + Datum nicht in der
vertikalen Mitte schweben
- max-width-Cap der globalen .data-table.compact-Wert-Spalte
(400px) wird aufgehoben — die Wert-Spalte soll den Platz
fuellen, der durch den .customers-container (xwide) frei wird.
Spalten 1/3/4 haben feste Breiten (180/120/180), der Rest
gehoert Spalte 2.
- Spalte 1 (Kondition) ein bisschen mehr Padding-Top, damit
der Label-Text optisch auf Hoehe der ersten Sub-Listen-Zeile
bleibt (kompensiert die Sub-Listen-Border-Top). */
.conditions-table td {
vertical-align: top;
}
/* Globale .data-table.compact-Regel hat width:auto — fuer die
Konditions-Tabelle wollen wir 100% Container-Breite. Plus margin
linksbuendig statt zentriert. */
.conditions-table.data-table.compact {
width: 100%;
min-width: 0;
margin-left: 0;
margin-right: 0;
}
.conditions-table.data-table.compact td:nth-child(2),
.conditions-table.data-table.compact th:nth-child(2) {
max-width: none;
}
/* Konditions-Tabelle in customers/view.php Konditions-Tab:
Inline-Detail-Liste pro Anschrift bei Anfahrts-Kondition. */
.condition-sub-list {
list-style: none;
margin: var(--space-xs) 0 0 0;
padding: var(--space-xs) 0 0 0;
border-top: 1px dashed var(--border-light);
font-size: 12px;
line-height: 1.5;
}
.condition-sub-list li {
padding: 2px 0;
}
.condition-sub-label {
color: var(--text-secondary);
font-weight: 500;
margin-right: var(--space-xs-plus);
}
/* Travel-Pauschale-Tabelle im Anfahrts-Konditions-Dialog
(customers/view.php, RM-47-Folge 02.05.2026): Liste aller
Anschriften mit Inline-Eingabe der Pauschale. */
.travel-flat-table {
width: 100%;
border-collapse: collapse;
margin-top: var(--space-xs);
}
.travel-flat-table th,
.travel-flat-table td {
padding: var(--space-xs) var(--space-sm);
text-align: left;
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
}
.travel-flat-table th {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-table-stripe);
}
.travel-flat-table tbody tr:last-child td {
border-bottom: none;
}
.travel-flat-amount-col {
width: 140px;
}
.travel-flat-input {
width: 100%;
box-sizing: border-box;
padding: var(--space-xs) var(--space-sm);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-size: 13px;
background: var(--bg-input);
color: var(--text-primary);
}
.travel-flat-input:focus {
border-color: var(--color-accent);
outline: none;
}
/* Progress-Bar (schmaler, gebrandeter Fortschrittsbalken) +
Live-Log-Pre (gescrollte Status-Box) — wiederverwendbar fuer
Bulk-Operationen mit Frontend-Schleife (RM-47 Backfill etc.). */
.progress-track {
height: 8px;
background: var(--surface-soft);
border-radius: var(--radius-sm);
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 0%;
background: var(--color-success);
transition: width .3s;
}
.log-pre {
max-height: 240px;
overflow: auto;
background: var(--surface-soft);
padding: var(--space-sm);
border-radius: var(--radius-sm);
margin: 0;
scroll-behavior: smooth;
}
/* Inline-Spinner (kleiner Dual-Ring) — passt in Button-Beschriftung
und neben Form-Felder. Nutzt dieselben Tokens wie .loader. */
.spinner-inline {
display: inline-block;
width: 14px;
height: 14px;
border-radius: var(--radius-full);
border: 2px solid;
border-color: var(--color-loader-track) var(--color-loader-track) var(--color-primary) var(--color-primary);
box-sizing: border-box;
animation: rotation 0.8s linear infinite;
vertical-align: -2px;
flex: 0 0 auto;
}
/* Loader — globaler Spinner (Dual-Ring, gebrandet)
Außen + innen: hellgrau (statt #FFF, weil unsichtbar auf hellem Overlay)
Mitte: brand-blau (statt #FF3D00) */
.loader {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
display: inline-block;
position: relative;
border: 3px solid;
border-color: var(--color-loader-track) var(--color-loader-track) transparent transparent;
box-sizing: border-box;
animation: rotation 1s linear infinite;
flex: 0 0 auto;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid;
border-color: transparent transparent var(--color-primary) var(--color-primary);
width: 40px;
height: 40px;
border-radius: var(--radius-full);
animation: rotationBack 0.5s linear infinite;
transform-origin: center center;
}
.loader::before {
width: 32px;
height: 32px;
border-color: var(--color-loader-track) var(--color-loader-track) transparent transparent;
animation: rotation 1.5s linear infinite;
}
@keyframes rotationBack {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Fullscreen-Overlay — Seiten-Loader (z.B. Test-Tools, Imports) */
.fullscreen-overlay {
position: fixed;
inset: 0;
background: var(--bg-overlay-light);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-tooltip);
}
.fullscreen-overlay-inner {
text-align: center;
}
.fullscreen-overlay .loader {
transform: scale(1.5625);
}
/* =========================
ADMIN / WIDGET-KATALOG
========================= */
.widget-admin-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
}
.widget-admin-col h3 {
margin: 0 0 var(--space-md) 0;
font-size: 15px;
font-weight: 600;
color: var(--color-primary);
}
/* =========================
PROFIL / WIDGET-CONFIG
========================= */
.widget-config-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
}
/* Profile-Widget-Config 2col -> 1col Schwelle (RM-49b, 02.05.2026).
Bei < --bp-m (960) klappt die System-/User-Widgets-Doppelspalte um.
Auf Surface @ 200% (1440) bleibt 2-spaltig. */
@media (max-width: 959px) {
.widget-config-grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
}
.widget-config-col h4 {
margin: 0 0 var(--space-md) 0;
font-size: 14px;
font-weight: 600;
color: var(--color-primary);
}
.widget-config-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-bottom: var(--space-sm-plus);
}
.widget-config-item {
display: flex;
gap: var(--space-sm);
align-items: center;
}
.widget-config-item select {
flex: 1;
padding: var(--space-sm) var(--space-sm-plus);
font-size: 14px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: var(--bg-card);
color: var(--text-primary);
outline: none;
}
/* Native-Picker-Items explizit faerben — Browser-Default ist
schwarz auf weiss und bleibt es auch im Dark-Mode wenn man
nichts setzt. */
.widget-config-item select option {
background: var(--bg-card);
color: var(--text-primary);
}
.widget-config-item select option:disabled {
color: var(--text-subtle);
}
.widget-config-item select:focus {
border-color: var(--color-accent);
box-shadow: var(--shadow-focus);
}
/* .btn-remove-slot wird im Markup IMMER mit .btn-danger kombiniert.
Der Doppelklassen-Selector erhoeht die Spezifitaet, sodass das
Square-Layout (32x32, padding 0, flex-center) das spaeter im File
stehende .btn-danger (padding/display/line-height fuer Standard-
Buttons) ueberschreibt. */
.btn-remove-slot,
.btn-remove-slot.btn-danger {
flex-shrink: 0;
width: var(--space-3xl);
height: var(--space-3xl);
font-size: var(--font-size-lg);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.btn-remove-slot:hover {
border-color: var(--color-error);
color: var(--color-error);
}
.btn-add-slot {
background: none;
border: 1px dashed var(--border-strong);
border-radius: var(--radius-md);
color: var(--text-muted);
font-size: 13px;
padding: var(--space-xs-plus) var(--space-md);
cursor: pointer;
width: 100%;
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.btn-add-slot:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
/* =========================
OVERLAY
========================= */
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* z-index: var(--z-modal) — sonst kann ein gehoverter Trigger
(z.B. Status-Badge mit data-tooltip → z-index: --z-dropdown beim
Hover) durch das offene Overlay durchscheinen, bis die Maus den
Hover-State verlässt. */
z-index: var(--z-modal);
background: var(--bg-overlay);
display: flex;
justify-content: center;
align-items: center;
padding: var(--space-xl);
}
.hidden {
display: none;
}
/* =========================
INFO BOXES
========================= */
.info-box {
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md);
border-left: 4px solid;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.5;
}
/* info-box-Familie — Naming-Refactor 02.05.2026 (vorheriger Stand:
info-box-info war historisch gruen, was den Klassennamen widersprach;
info-box-danger und -error waren Aliase). Jetzt sauber:
- info-box-info → Pastell-Blau (Hinweis, Erklaer-Box)
- info-box-success → Pastell-Gruen (Erfolgsmeldung)
- info-box-warning → Pastell-Gelb (Achtung, vorsichtige Aktion)
- info-box-error → Pastell-Rot (Fehler, Stoerung)
info-box-danger ist ABGESCHAFFT — die einzige Live-Verwendung
(twofa_settings.php) wurde semantisch korrekt auf -warning migriert. */
.info-box-info {
background: var(--color-info-soft);
border-color: var(--color-info-soft-border);
}
.info-box-success {
background: var(--color-success-soft);
border-color: var(--color-success);
}
.info-box-warning {
background: var(--color-warning-soft);
border-color: var(--color-warning);
}
.info-box-error {
background: var(--color-error-soft);
border-color: var(--color-error);
}
/* =========================
UTILITY
========================= */
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.form-actions {
text-align: right;
}
/* Modifier fuer Form-Action-Zeilen, die direkt unter einem Grid/List stehen
und visuellen Abstand brauchen (ersetzt bisherige style="margin-top:var(--space-md-plus)"). */
.form-actions-spaced {
margin-top: var(--space-md-plus);
}
.site-footer {
text-align: center;
font-size: 12px;
color: var(--text-muted);
padding-bottom: var(--space-xs);
}
.text-muted {
color: var(--text-muted);
}
.overlay-box {
background: var(--bg-card);
padding: var(--space-3xl-minus);
border-radius: var(--radius-xl);
min-width: 300px;
max-height: calc(100vh - 40px);
overflow-y: auto;
}
.overlay-box input[type="text"] {
box-sizing: border-box;
padding: var(--space-sm);
font-size: 14px;
}
.clickable {
cursor: pointer;
transition: all var(--transition-fast);
}
.clickable:hover {
filter: brightness(1.1);
}
/* .status-overlay-box ausgelagert nach pages/tickets.css. */
.overlay-field {
margin-top: var(--space-lg);
}
.overlay-label {
display: block;
margin-bottom: var(--space-sm);
font-size: 14px;
color: var(--text-muted);
text-align: left;
}
.overlay-select {
width: 100%;
box-sizing: border-box;
padding: var(--space-sm-plus) var(--space-md);
font-size: 14px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: var(--bg-card);
color: var(--text-secondary);
outline: none;
}
.overlay-select:focus {
border-color: var(--color-accent);
box-shadow: var(--shadow-focus);
}
/* RM-53: Faelligkeits-Zeile im Properties-Overlay — Datum-Input
schmaler + Reset-Button rechts daneben (X-Icon zum Leeren). */
.overlay-due-row {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.overlay-due-row .overlay-due-input {
width: auto;
flex: 1 1 auto;
min-width: 0;
max-width: 220px;
}
.overlay-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-sm-plus);
margin-top: var(--space-lg-plus);
}
/* TICKET — DETAIL (Ticket-Header/Meta/Status/QuickStatus/Contact/Title/Desc)
ausgelagert nach pages/tickets.css (28.04.2026).
Generische .is-loading-Regel fuer button/btn-save/btn-action bleibt hier. */
button.is-loading,
.btn-save.is-loading,
.btn-action.is-loading {
opacity: 0.5;
pointer-events: none;
cursor: wait;
}
.clickable-value,
.clickable-value:visited {
color: inherit;
cursor: pointer;
text-decoration: none;
border-bottom: 1px dashed var(--border-strong);
}
.clickable-value:hover,
.clickable-value:visited:hover {
text-decoration: none;
border-bottom-color: var(--color-primary);
color: var(--color-primary);
}
/* .ticket-title*, .ticket-desc-*, .internal-notes-box ausgelagert
nach pages/tickets.css. */
@keyframes tooltip-fade-right {
from { opacity: 0; transform: translateY(-3px); }
to { opacity: 1; transform: translateY(0); }
}
/* .ticket-description, #descText ausgelagert nach pages/tickets.css. */
/* #descText.is-expanded, .desc-expand-toggle*
ausgelagert nach pages/tickets.css. */
/* opacity sitzt bewusst auf dem SVG-Child, NICHT auf dem .edit-icon-
Container — sonst legt das Container-Element einen opacity-Stacking-
Context an, in dem auch das Tooltip-Pseudo-Element ::after gerendert
wird. Im Default-State (60%) waere das Tooltip dann mit-gedimmt; auch
beim Hover-Wechsel auf 100% kann es subtile Render-Verzoegerungen
geben. Mit opacity nur auf dem SVG ist das Tooltip immer voll sichtbar. */
.edit-icon,
.edit-icon:visited {
position: absolute;
top: 0;
right: 0;
min-width: 32px;
min-height: 32px;
cursor: pointer;
margin-left: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
}
.edit-icon svg {
opacity: 0.6;
transition: opacity var(--transition-fast);
}
.edit-icon:hover svg {
opacity: 1;
}
.table-edit-icon,
.table-edit-icon:visited {
text-decoration: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
min-height: 32px;
color: var(--text-secondary);
}
.table-edit-icon svg {
opacity: 0.6;
transition: opacity var(--transition-fast);
}
.table-edit-icon:hover svg {
opacity: 1;
}
button.table-delete-icon {
background: none;
border: none;
padding: 0;
}
.table-delete-icon:hover {
color: var(--color-error);
}
.editable {
cursor: pointer;
transition: background var(--transition-fast);
}
.editable:hover {
background: rgba(0,0,0,0.05);
}
.inline-input {
width: 100%;
padding: var(--space-sm);
font-size: 18px;
border-radius: var(--radius-md);
border: 1px solid var(--border-strong);
}
.inline-textarea {
width: 100%;
min-height: 150px;
padding: var(--space-sm-plus);
font-size: 14px;
border-radius: var(--radius-md);
border: 1px solid var(--border-strong);
resize: vertical;
line-height: 1.5;
}
.inline-actions {
margin-top: var(--space-sm);
display: flex;
justify-content: flex-end;
gap: var(--space-sm-plus);
}
/* =========================
STATUS BADGE
========================= */
.status-badge {
display: inline-block;
padding: var(--space-xs) var(--space-sm-plus);
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 500;
line-height: 1;
background: var(--status-color);
/* Subtiler Border, damit helle Status-Farben auf weissem Card-BG
als Element erkennbar bleiben (3:1 non-text contrast). 15% Alpha
wirkt nicht hart, gibt aber die Konturen. Token --border-status-badge
handhabt Light/Dark-Wechsel automatisch (RM-45 Phase 2). */
border: 1px solid var(--border-status-badge);
}
.status-badge-success { background: var(--color-success); color: var(--color-light); }
.status-badge-danger { background: var(--color-error); color: var(--color-light); }
.status-badge-warning { background: var(--color-warning-soft); color: var(--color-warning-dark); }
/* KOMMENTARE, TICKET-TABS-BAR, DOKUMENTE/ATTACHMENTS, UPLOADS
ausgelagert nach pages/tickets.css (28.04.2026). */
/* =========================
KUNDEN
========================= */
.customer-item {
padding: var(--space-sm);
border-bottom: 1px solid var(--border-light);
cursor: pointer;
text-align: left;
}
.customer-item:hover {
background: var(--bg-hover);
}
.customer-item.is-active {
background: var(--color-success-soft);
}
.customer-item.is-active:hover {
background: var(--color-success-soft-border);
}
/* Customer/Contact-Such-Overlay — Such-Input und Hint-Zeilen */
.overlay-search-input {
padding: var(--space-sm);
margin-bottom: var(--space-sm-plus);
width: 100%;
box-sizing: border-box;
background: var(--bg-input);
color: var(--text-primary);
}
.overlay-result-list {
max-height: 360px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background: var(--bg-card);
}
.overlay-actions {
margin-top: var(--space-sm-plus);
display: flex;
gap: var(--space-sm);
}
.customer-search-hint {
padding: var(--space-sm);
color: var(--text-muted);
font-style: italic;
}
.customer-search-noresult {
padding: var(--space-sm);
color: var(--text-muted);
}
/* Customer-Typeahead (Ticket-Create) */
.customer-typeahead {
position: relative;
}
/* Hinweis: Kein Dropdown-Pfeil mehr — das Feld ist ein Typeahead, kein Select.
Beim Tippen öffnet sich der Ergebnis-Dropdown automatisch. */
.customer-typeahead-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-top: none;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
max-height: 250px;
overflow-y: auto;
z-index: var(--z-sticky);
box-shadow: var(--shadow-md);
}
.customer-typeahead-dropdown.is-open {
display: block;
}
.customer-typeahead-dropdown .customer-search-hint {
padding: var(--space-sm-plus) var(--space-md);
background: var(--color-info-soft);
color: var(--color-info-dark);
font-style: normal;
font-size: 13px;
}
.input-error {
border-color: var(--color-error) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error) 20%, transparent);
}
/* .customer-header*, .btn-context-set, .ccb-active-indicator
ausgelagert nach pages/customers.css (28.04.2026). */
/* Aktions-Bereich oberhalb von Listen (z.B. customers/index.php) */
.list-actions {
display: flex;
justify-content: flex-end;
margin-bottom: var(--space-md);
}
.list-actions:last-child {
margin-bottom: 0;
}
/* =========================
FILTER-SYSTEM (tickets/list.php, customers/index.php)
========================= */
.filter-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-bottom: var(--space-md);
align-items: center;
}
.filter-chip {
display: inline-flex;
align-items: center;
background: var(--bg-hover);
color: var(--text-secondary);
padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm-plus);
border-radius: var(--radius-xl);
font-size: 12px;
font-weight: 500;
border: 1px solid var(--border-color);
}
.filter-chip-remove {
margin-left: var(--space-xs-plus);
color: var(--text-muted);
text-decoration: none;
font-weight: 700;
font-size: 14px;
line-height: 1;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
transition: background var(--transition-fast), color var(--transition-fast);
}
.filter-chip-remove:hover {
background: var(--color-error);
color: var(--color-light);
}
/* Filter-Bar (immer offen, kompakt) */
.filter-bar-open {
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--bg-card);
padding: var(--space-md) var(--space-md-plus);
margin-bottom: var(--space-md);
}
.filter-form {
/* leerer Hook — Form selber hat keine zusätzliche Padding */
}
/* Top-Row: Zeitraum + Volltextsuche prominent */
.filter-top-row {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-lg);
align-items: start;
margin-bottom: var(--space-md);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--border-light);
}
/* Filter-Top-Row responsive (RM-49b, 02.05.2026): bei < --bp-s (600)
Zeitraum + Volltextsuche untereinander statt nebeneinander, sonst
quetscht das Datumsfeld die Suche zu eng. */
@media (max-width: 599px) {
.filter-top-row {
grid-template-columns: 1fr;
}
}
.filter-top-field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.filter-top-search input[type="text"] {
width: 100%;
}
.filter-search-row {
display: flex;
gap: var(--space-xs-plus);
align-items: center;
}
.filter-search-row input {
flex: 1;
min-width: 0;
}
.filter-search-btn {
background: var(--color-primary);
color: var(--color-light);
border: none;
border-radius: var(--radius-md);
padding: var(--space-xs-plus) var(--space-sm-plus);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
min-height: 32px;
}
.filter-search-btn:hover {
background: var(--color-primary-hover);
}
/* Granulares Filter-Grid (kompakt, label links, input rechts) */
.filter-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm) var(--space-2xl);
margin-bottom: var(--space-md);
}
/* Filter-Grid responsive (RM-49b, 02.05.2026): bei < --bp-m (960)
klappt die 2-Spalten-Filterleiste auf 1-spaltig. Auf Surface @
1440 bleibt 2-spaltig. */
@media (max-width: 959px) {
.filter-grid {
grid-template-columns: 1fr;
}
}
.filter-col {
display: flex;
flex-direction: column;
gap: var(--space-xs-plus);
}
.filter-row {
display: grid;
grid-template-columns: 130px 1fr;
gap: var(--space-sm-plus);
align-items: center;
}
.filter-label {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
}
.filter-row .filter-label {
margin: 0;
text-align: right;
}
.filter-row select,
.filter-row input {
width: 100%;
box-sizing: border-box;
padding: var(--space-xs) var(--space-sm);
font-size: 13px;
}
.filter-date-range {
display: flex;
align-items: center;
gap: var(--space-xs-plus);
}
.filter-date-range input[type="date"] {
width: auto;
flex: 0 0 auto;
padding: var(--space-sm) var(--space-sm-plus);
font-size: 16px;
box-sizing: border-box;
}
.filter-date-range span {
font-size: 14px;
color: var(--text-muted);
}
.filter-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-sm-plus);
align-items: center;
padding-top: var(--space-xs-plus);
}
/* .ticket-row-ap + .ap-link ausgelagert nach pages/tickets.css. */
/* .ap-link:hover + .ap-popover* ausgelagert nach pages/tickets.css. */
/* Sortier-Links in Tabellen-Headern
Permanent sichtbarer ↕-Pfeil via ::after signalisiert: Spalte ist sortierbar.
Bei aktiver Sortierung wird das Icon zu ↑ oder ↓ und farbig hervorgehoben. */
.sort-link {
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-xs-plus);
cursor: pointer;
padding: var(--space-2xs) var(--space-xs-plus);
margin: calc(var(--space-2xs) * -1) calc(var(--space-xs-plus) * -1);
border-radius: var(--radius-sm);
transition: background var(--transition-fast), color var(--transition-fast);
user-select: none;
}
.sort-link::after {
content: '↕';
font-size: 11px;
opacity: 0.35;
font-weight: 400;
line-height: 1;
}
.sort-link:hover {
background: var(--bg-hover);
color: var(--color-primary);
}
.sort-link:hover::after {
opacity: 0.7;
}
.sort-link.active {
color: var(--color-primary);
font-weight: 700;
}
.sort-link.active::after {
opacity: 1;
color: var(--color-primary);
}
.sort-link.active.asc::after { content: '↑'; }
.sort-link.active.desc::after { content: '↓'; }
.empty-list {
text-align: center;
color: var(--text-muted);
padding: var(--space-2xl);
font-style: italic;
}
/* .customer-details-2col + .customer-grid ausgelagert nach pages/customers.css. */
#contactList {
max-height: 250px;
overflow-y: auto;
}
.data-table {
width: 100%;
border-collapse: collapse;
margin-top: var(--space-sm-plus);
}
.data-table th {
text-align: left;
border-bottom: 2px solid var(--border-color);
padding: var(--space-sm);
}
.data-table td {
text-align: left;
padding: var(--space-sm);
border-bottom: 1px solid var(--border-light);
}
.data-table tr.male td:first-child {
color: var(--color-primary);
}
.data-table tr.female td:first-child {
color: var(--color-error);
}
.data-table tr.row-inactive td {
opacity: 0.55;
}
.data-table tbody tr:nth-child(even) {
background-color: var(--bg-table-stripe);
}
.data-table tbody tr:hover {
background: var(--bg-hover);
}
/* Kompakte Tabellenvariante — z.B. admin/pools.php */
.data-table.compact {
width: auto;
min-width: 480px;
margin: var(--space-sm-plus) auto 0;
}
/* Modifier: Tabelle nimmt die volle Containerbreite (erbt aus .data-table).
table-layout:fixed sorgt dafür, dass w-XXX strikt eingehalten werden
(im Auto-Layout würden die Spalten über ihre Nennbreite hinaus wachsen).
Die Spalte OHNE w-XXX bekommt im fixed-Layout den gesamten Rest — das
ist die Flex-Spalte. Wichtig: Jede Nicht-Flex-Spalte MUSS eine w-XXX
auf dem TH haben, sonst teilen sich mehrere Nicht-Flex-Spalten den Rest
gleichmäßig (Symptom: Flex-Spalte zu schmal). */
.data-table.table-full {
width: 100%;
margin: var(--space-sm-plus) 0 0;
table-layout: fixed;
}
/* Inputs in .table-full füllen die Zelle sauber aus.
min-width:0 ist essenziell: ohne das kann der Browser die intrinsische
Input-Breite (Browser-Default ~180px) gegen das fixed-Layout ausspielen
und die Zelle sprengen. Padding/Margin/Font-Size werden bewusst
feiner als .user-form-control gesetzt (kompakter Tabellen-Look). */
.data-table.table-full input[type="text"],
.data-table.table-full input[type="number"] {
box-sizing: border-box;
width: 100%;
min-width: 0;
margin: 0;
padding: var(--space-xs-plus) var(--space-sm);
font-size: 14px;
}
.data-table.compact td:nth-child(2),
.data-table.compact th:nth-child(2) {
min-width: 200px;
max-width: 400px;
}
.data-table.compact input[type="text"] {
width: 220px;
box-sizing: border-box;
}
.statuses-box {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
/* Statuses-Tabelle (admin/statuses.php) — eigene Override-Klasse */
.statuses-table .col-farbe { width: 80px; }
.statuses-table .col-tickets { width: 90px; text-align: right; }
.statuses-table .col-sort { width: 80px; text-align: center; }
.statuses-table .col-actions { width: 50px; }
.statuses-table .statuses-col-tickets {
text-align: right;
font-variant-numeric: tabular-nums;
}
.statuses-table .statuses-col-sort {
text-align: center;
white-space: nowrap;
}
.statuses-table .statuses-col-muted { color: var(--text-subtle); }
/* Nach ID-Spalte-Entfernung: Name ist erste Spalte — Override der allgemeinen
.data-table.compact-Regel die auf nth-child(2) zielt */
.statuses-table td:first-child,
.statuses-table th:first-child {
min-width: 200px;
max-width: 400px;
}
.statuses-table .status-name.is-readonly {
background: var(--bg-hover);
color: var(--text-secondary);
cursor: not-allowed;
}
.statuses-save-row { margin-top: var(--space-md-plus); }
/* =========================
ADMIN
========================= */
/* Admin Top-Nav: .admin-topnav* CSS-Block geloescht am 13.05.2026 abends.
Admin nutzt jetzt das gemeinsame .workspace-subnav-Pattern (siehe Z. ~600)
mit den Modifiern .is-end und .is-danger fuer den Test-Tools-Sonderfall.
Markup-Aenderung in app/includes/admin_nav.php. */
/* Admin Layout: Sidebar links angeklebt, Content browser-mittig.
3-Spalten-Grid: linker Spacer enthaelt die Sidebar (220px, justify-self: start),
mittlere Spalte ist der Content (max 1380px), rechter Spacer.
Beide Spacer sind 1fr — symmetrisch, also Content zentriert relativ zum Browser.
Bei Breiten <~1820px wird Content zwangslaeufig gegen die Sidebar gedrueckt
(linke Spalte clamped auf min 220), bei <1600px schrumpft Content mit. */
.admin-layout {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(0, var(--container-max-admin)) minmax(0, 1fr);
min-height: calc(100vh - 200px);
}
.admin-layout.no-sidebar {
grid-template-columns: 1fr;
max-width: var(--container-max-wide);
margin: 0 auto;
}
/* Admin Sidebar — klebt am linken Browserrand */
.admin-sidebar {
width: 220px;
justify-self: start;
border-right: 1px solid var(--border-color);
background: var(--bg-table-head);
padding: var(--space-lg) 0;
}
.admin-sidebar nav {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
padding: 0 var(--space-sm-plus);
}
.admin-sidebar nav a {
display: block;
padding: var(--space-sm-plus) var(--space-md-plus);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--text-secondary);
font-size: 14px;
transition: background var(--transition-fast), color var(--transition-fast);
}
.admin-sidebar nav a:hover {
background: var(--bg-hover);
color: var(--text-secondary);
text-decoration: none;
}
.admin-sidebar nav a.active {
background: var(--color-primary);
color: var(--color-light);
font-weight: 500;
}
/* Eingerueckte Sub-Eintraege (z.B. Mapping pro Monitoring-Quelle).
Visueller Indikator: linker Border + erhoehtes Padding-Left. */
.admin-sidebar nav a.indented {
margin-left: var(--space-md);
padding-left: var(--space-md);
border-left: 2px solid var(--border-color);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
font-size: 13px;
color: var(--text-muted);
}
.admin-sidebar nav a.indented:hover {
color: var(--text-secondary);
}
.admin-sidebar nav a.indented.active {
color: var(--color-light);
border-left-color: var(--color-primary);
}
/* Admin Content (innerhalb des Layouts) */
.admin-content,
.contracts-content,
.articles-content,
.timetracking-content {
padding: var(--space-xl) 30px;
min-width: 0;
}
/* Admin: .content-box-Untergrenze fuer Lesefluss.
Unter dieser Box-Breite lieber horizontalen Scroll als unlesbares
Layout. Nur fuer Admin-Bereich, globale .content-box-Verwendung
(Tickets, Kunden, Dashboard) bleibt unangetastet. */
.admin-content .content-box {
min-width: 1100px;
}
/* Admin-Content responsive (RM-49b, 02.05.2026): bei < --bp-m (960)
wird die min-width-Bremse aufgehoben — Admin auf schmalem
Tablet/Smartphone ist Notfall-Use-Case, lieber lesbares 1-spaltiges
Layout als horizontales Scrollen ueberm gesamten Admin-Bereich.
Ueber 960 (Surface @ 1440 etc.) bleibt die 1100er-Untergrenze. */
@media (max-width: 959px) {
.admin-content .content-box {
min-width: 0;
}
}
/* =========================
COLOR PICKER
========================= */
.color-wrapper {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.color-preview {
width: 32px;
height: 24px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
cursor: pointer;
}
/* =========================
COLOR PICKER (neu)
========================= */
.color-picker-box {
width: 320px;
padding: 0;
overflow: hidden;
}
.color-picker-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-md-plus) var(--space-lg-plus);
border-bottom: 1px solid var(--border-light);
}
.color-picker-header h3 {
margin: 0;
font-size: 16px;
}
.color-picker-body {
padding: var(--space-lg) var(--space-lg-plus);
}
.color-picker-footer {
display: flex;
justify-content: flex-end;
gap: var(--space-sm-plus);
padding: var(--space-md) var(--space-lg-plus);
border-top: 1px solid var(--border-light);
background: var(--bg-table-stripe);
}
/* Saturation/Value-Quadrat */
.picker-sv {
position: relative;
width: 100%;
height: 180px;
border-radius: var(--radius-md);
cursor: crosshair;
user-select: none;
background: red;
}
.picker-sv-indicator {
position: absolute;
width: 14px;
height: 14px;
border: 2px solid var(--bg-card);
border-radius: var(--radius-full);
box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
transform: translate(-50%, -50%);
pointer-events: none;
}
/* Hue-Slider */
.picker-hue {
position: relative;
margin-top: var(--space-md);
height: 14px;
border-radius: var(--radius-md);
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
cursor: pointer;
user-select: none;
}
.picker-hue-indicator {
position: absolute;
top: 50%;
width: 14px;
height: 18px;
border: 2px solid var(--bg-card);
border-radius: var(--radius-sm);
box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
transform: translate(-50%, -50%);
pointer-events: none;
}
/* Vorschau + HEX */
.picker-preview-row {
display: flex;
align-items: center;
gap: var(--space-md);
margin-top: var(--space-md-plus);
}
.picker-preview {
width: 56px;
height: 36px;
border-radius: var(--radius-md);
border: 1px solid var(--border-strong);
flex: 0 0 auto;
}
.picker-preview-meta {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: var(--space-2xs);
}
.picker-preview-meta label {
font-size: 11px;
color: var(--text-muted);
}
.color-picker-box .picker-preview-meta input[type="text"] {
width: 100%;
padding: var(--space-xs-plus) var(--space-sm);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
font-family: monospace;
font-size: 14px;
text-transform: lowercase;
box-sizing: border-box;
}
/* RGB-Felder */
.picker-rgb-row {
display: flex;
gap: var(--space-sm);
margin-top: var(--space-sm-plus);
}
.picker-rgb-field {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: var(--space-2xs);
}
.picker-rgb-field label {
font-size: 11px;
color: var(--text-muted);
text-align: center;
}
.picker-rgb-field input {
padding: var(--space-xs-plus) var(--space-xs);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
font-size: 14px;
text-align: center;
box-sizing: border-box;
min-width: 0;
}
/* Presets */
.picker-presets {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--space-xs-plus);
margin-top: var(--space-md-plus);
}
.picker-preset {
width: 100%;
aspect-ratio: 1;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
padding: 0;
cursor: pointer;
transition: transform var(--transition-fast);
}
.picker-preset:hover {
transform: scale(1.1);
border-color: var(--color-primary);
}
/* Sortier-Pfeile in Status-Tabelle */
.btn-sort {
display: inline-block;
width: 26px;
height: 24px;
padding: 0;
border: 1px solid var(--border-strong);
background: var(--bg-card);
color: var(--text-secondary);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 11px;
line-height: 1;
/* 1px horizontaler Margin bewusst — Micro-Spacing zwischen
inline-block-Buttons in Status-Tabellen-Sortier-Reihen. */
margin: 0 1px;
}
.btn-sort:hover:not(:disabled) {
background: var(--bg-hover);
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn-sort:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* =========================
BUTTONS
========================= */
.btn-action,
.btn-action:visited {
display: inline-flex;
align-items: center;
gap: var(--space-xs-plus);
background: var(--color-primary);
color: var(--color-light);
border: none;
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
box-sizing: border-box;
font-family: inherit;
text-decoration: none;
cursor: pointer;
transition: background var(--transition-fast);
}
.btn-action:hover,
.btn-action:visited:hover,
a.btn-action:hover,
a.btn-action:visited:hover {
background: var(--color-primary-hover);
color: var(--color-light);
text-decoration: none;
}
.btn-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
background: var(--bg-card);
color: var(--text-muted);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
padding: 0;
}
.btn-icon:hover { background: var(--bg-hover); }
/* btn-disabled: Optik-Dimming auf SVG/Inhalt setzen, NICHT auf den Button
selbst — sonst erben die ::after/::before-Pseudos (z.B. Tooltips) die
Opacity und werden unlesbar. */
.btn-icon.btn-disabled { cursor: not-allowed; opacity: 1; }
.btn-icon.btn-disabled > * { opacity: 0.35; }
.btn-icon-warning { color: var(--color-warning); border-color: var(--color-warning); }
.btn-icon-warning:hover { background: var(--color-warning-soft); }
.btn-icon-danger { color: var(--color-error); border-color: var(--color-error); }
.btn-icon-danger:hover { background: var(--color-error-soft); }
.btn-icon-success { color: var(--color-success); border-color: var(--color-success); }
.btn-icon-success:hover { background: var(--color-success-soft); }
/* btn-icon-lg: groessere Variante (40x40 mit 20px-Icon) fuer Card-Layouts,
wo der Standard-32x32-Button neben prominentem Card-Inhalt zu klein wirkt.
SVG-Sizing per CSS, damit das width/height-Attribut im SVG nicht
geaendert werden muss. */
.btn-icon-lg { width: 40px; height: 40px; }
.btn-icon-lg > svg { width: 20px; height: 20px; }
/* btn-action-warning: Pastell-Warning-Variante, Geometrie 1:1 wie
btn-save / btn-cancel / btn-danger (selbe Hoehe, selber radius,
selbes padding). Theme-aware via warning-soft / -soft-border /
-dark Tokens. Verwendet z.B. fuer 'Test-Mail senden' — eine
neutrale Probe-Action, weder neutral-grau (btn-secondary) noch
destruktiv (btn-danger). */
.btn-action-warning,
.btn-action-warning:visited {
background: var(--color-warning-soft);
border: 1px solid var(--color-warning-soft-border);
padding: var(--space-xs-plus) var(--space-md);
border-radius: var(--radius-sm);
color: var(--color-warning-dark);
cursor: pointer;
display: inline-block;
text-decoration: none;
font: inherit;
line-height: 1.5;
box-sizing: border-box;
}
.btn-action-warning:hover:not(:disabled),
.btn-action-warning:visited:hover:not(:disabled) {
background: var(--color-warning-soft-border);
color: var(--color-warning-dark);
text-decoration: none;
}
.btn-action-warning:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Mail-Settings-spezifisches Side-by-Side-Layout fuer SMTP + Absender.
Flex statt Grid, damit die Boxen bei schmaler Container-Breite
sauber umbrechen statt aus dem Container zu ragen (war Bug
02.05.2026 mit form-grid-2col + verschachtelter user-form-grid). */
.mail-settings-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.mail-settings-row > .content-box {
flex: 1 1 460px;
min-width: 0;
margin-bottom: 0;
}
/* Innen-Form-Grid kompakter (140 statt 200 Label-Spalte, kleinere
Min-Wert), damit zwei Boxen nebeneinander passen ohne Ueberlauf. */
.mail-settings-row .user-form-grid {
grid-template-columns: 140px minmax(0, 1fr);
column-gap: var(--space-md);
}
.btn-action-light,
.btn-action-light:visited {
display: inline-flex;
align-items: center;
gap: var(--space-xs-plus);
background: rgba(255,255,255,0.15);
color: var(--color-light);
border: 1px solid rgba(255,255,255,0.4);
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background var(--transition-fast);
}
.btn-action-light:hover,
.btn-action-light:visited:hover {
background: rgba(255,255,255,0.3);
color: var(--color-light);
text-decoration: none;
}
.btn-action-light.btn-active {
background: rgba(255,255,255,0.9);
color: var(--color-primary);
border-color: rgba(255,255,255,0.9);
font-weight: 600;
}
/* -------------------------------------------------------
SCROLL-TO-TOP BUTTON
------------------------------------------------------- */
.scroll-to-top {
position: fixed;
bottom: var(--space-2xl);
right: var(--space-2xl);
width: 40px;
height: 40px;
padding: 0;
border-radius: var(--radius-full);
background: var(--bg-nav);
color: var(--color-light);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-base), visibility var(--transition-base);
z-index: var(--z-sticky);
}
.scroll-to-top svg {
fill: var(--color-light);
}
.scroll-to-top.visible {
opacity: 1;
visibility: visible;
}
.scroll-to-top:hover {
background: var(--color-accent);
}
/* -------------------------------------------------------
TOGGLE SWITCH — Aktiv/Inaktiv Pill
------------------------------------------------------- */
.toggle-switch {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
vertical-align: middle;
}
.toggle-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle-track {
position: relative;
width: 76px;
height: 28px;
background: var(--text-subtle);
border-radius: var(--radius-xl);
transition: background var(--transition-base);
}
.toggle-knob {
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
background: var(--bg-card);
border-radius: var(--radius-full);
transition: transform var(--transition-base);
box-shadow: var(--shadow-sm);
}
.toggle-label-on,
.toggle-label-off {
position: absolute;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
top: 50%;
transform: translateY(-50%);
transition: opacity var(--transition-fast);
pointer-events: none;
line-height: 1;
}
.toggle-label-on {
left: var(--space-sm);
color: var(--color-light);
opacity: 0;
}
.toggle-label-off {
left: var(--space-3xl-minus);
color: var(--color-light);
opacity: 1;
}
.toggle-switch input:checked + .toggle-track {
background: var(--color-success);
}
.toggle-switch input:checked + .toggle-track .toggle-knob {
transform: translateX(48px);
}
.toggle-switch input:checked + .toggle-track .toggle-label-on {
opacity: 1;
}
.toggle-switch input:checked + .toggle-track .toggle-label-off {
opacity: 0;
}
/* Toolbar-Variante eines Selects mit gleicher Höhe/Padding wie .btn-save —
für Toolbars, in denen Select + Button nebeneinander stehen sollen
(z.B. Year-Picker + "neu laden"-Button auf /timetracking/holidays.php).
Höhen-Match dadurch dass Padding + line-height identisch zu .btn-save sind. */
.toolbar-select {
padding: var(--space-xs-plus) var(--space-md);
line-height: 1.5;
width: auto;
}
/* Outline-Style: heller Hintergrund + etwas dunklere Outline; bei Hover
wechselt der Hintergrund komplett auf die Outline-Farbe.
Text-Farbe success-dark (#2d6e0f) liefert auf success-soft (#d4edda)
~9:1 Kontrast und auf der Hover-Outline (#a3d3ad) ~5:1 — beides gut
lesbar. */
.btn-save,
.btn-save:visited {
background: var(--color-success-soft);
border: 1px solid var(--color-success-soft-border);
padding: var(--space-xs-plus) var(--space-md);
border-radius: var(--radius-sm);
color: var(--color-success-dark);
cursor: pointer;
display: inline-block;
text-decoration: none;
font: inherit;
line-height: 1.5;
box-sizing: border-box;
}
.btn-save:hover,
.btn-save:visited:hover {
background: var(--color-success-soft-border);
color: var(--color-success-dark);
text-decoration: none;
}
/* btn-cancel + btn-danger: Pastell-Rot, dezent — gleiches Pattern wie
.btn-save, nur in der Error-Farbpalette. Stand 01.05.2026 (vorher
Vollton-Rot mit weißer Schrift, vor allem im Dark-Mode zu grell).
Die Farbe rot bleibt als „Achtung, vorsichtige Aktion".
Geometrie 1:1 wie .btn-save.
Beide Klassen sind aktuell visuell identisch — geteilte Regel statt
Code-Duplikation. Semantisch unterschiedlich verwendet:
- btn-cancel: Eingaben verwerfen / Dialog abbrechen (neben btn-save).
- btn-danger: destruktive Aktion (Löschen, Archivieren), oft mit
data-confirm-Bestätigung.
Wenn eine Variante später divergieren soll (z.B. btn-danger mit
Mülleimer-Icon), gezielt nachdefinieren — die geteilte Basis bleibt. */
.btn-cancel,
.btn-cancel:visited,
.btn-danger,
.btn-danger:visited {
background: var(--color-error-soft);
border: 1px solid var(--color-error-soft-border);
padding: var(--space-xs-plus) var(--space-md);
border-radius: var(--radius-sm);
color: var(--color-error);
cursor: pointer;
/* Damit Anchor und Button identisch aussehen */
display: inline-block;
text-decoration: none;
font: inherit;
line-height: 1.5;
box-sizing: border-box;
}
.btn-cancel:hover:not(:disabled),
.btn-cancel:visited:hover:not(:disabled),
.btn-danger:hover:not(:disabled),
.btn-danger:visited:hover:not(:disabled) {
background: var(--color-error-soft-border);
color: var(--color-error);
text-decoration: none;
}
.btn-cancel:disabled,
.btn-danger:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-disabled {
background: var(--bg-hover);
color: var(--text-muted);
border: 1px solid var(--border-color);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
cursor: not-allowed;
}
.btn-disabled:hover {
background: var(--bg-hover);
}
.btn-secondary,
.btn-secondary:visited {
background: var(--bg-hover);
color: var(--text-secondary);
border: 1px solid var(--border-color);
padding: var(--space-xs-plus) var(--space-md);
border-radius: var(--radius-sm);
cursor: pointer;
text-decoration: none;
display: inline-block;
font: inherit;
line-height: 1.5;
box-sizing: border-box;
}
.btn-secondary:hover,
.btn-secondary:visited:hover {
background: var(--bg-table-stripe);
text-decoration: none;
}
.btn-edit-members {
background: var(--bg-hover);
color: var(--color-primary);
border: 1px solid var(--border-color);
padding: var(--space-xs) var(--space-sm-plus);
border-radius: var(--radius-md);
cursor: pointer;
font-size: 13px;
}
.btn-edit-members:hover {
background: var(--bg-table-stripe);
}
/* Pool-Overlay Tabs */
/* View-Tabs — Kartei-Reiter die auf der content-box aufsitzen */
.view-tabs-bar {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.view-tabs-bar .view-tabs {
border-bottom: none;
}
.view-tabs-bar + .view-tab-content {
border-top: 1px solid var(--border-color);
}
/* Input mit Textbaustein-Button inline (visoma-Pattern) */
.input-wrap-snippet {
position: relative;
display: flex;
}
.input-wrap-snippet input,
.input-wrap-snippet textarea {
flex: 1 1 auto;
min-width: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-snippet-inline {
flex: 0 0 auto;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--color-primary);
border-left: none;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: var(--bg-card);
color: var(--color-primary);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-snippet-inline:hover:not(:disabled) {
background: var(--color-primary);
color: var(--color-light);
}
.btn-snippet-inline:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.view-tabs-actions {
display: flex;
gap: var(--space-sm);
padding-bottom: var(--space-xs-plus);
}
.required-star {
color: var(--color-error);
font-weight: 700;
}
/* Kunden-Tickets-Box in ticket_create (Kunde-Tab) */
.customer-tickets-box {
margin-top: var(--space-lg);
padding: var(--space-md-plus) var(--space-lg);
background: var(--bg-hover);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
}
.customer-tickets-list {
max-height: 220px;
overflow-y: auto;
}
.badge-primary {
display: inline-block;
font-size: 11px;
font-weight: 600;
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
padding: var(--space-2xs) var(--space-sm);
border-radius: var(--radius-sm);
margin-left: var(--space-xs-plus);
}
.view-tabs {
display: flex;
gap: 0;
padding: 0;
border-bottom: 1px solid var(--border-color);
}
/* View-Tabs auf schmalen Viewports (RM-49b, 02.05.2026): bei < --bp-s
(600) horizontaler Scroll statt Wrap, Tabs bleiben in einer Zeile.
Industrie-Pattern fuer mobile Tab-Bars. Auf Surface @ 1440 (oder
1024 Tablet) bleibt alles wie heute. */
@media (max-width: 599px) {
.view-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
}
}
.view-tab-btn,
.view-tab-btn:visited {
padding: var(--space-sm-plus) var(--space-2xl);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
box-sizing: border-box;
color: var(--text-muted);
text-decoration: none;
background: var(--bg-hover);
border: 1px solid var(--border-color);
/* border-bottom bleibt bewusst drin (keine Ueberschreibung mit none).
Damit hat jeder inaktive Tab seine eigene sichtbare Unterkante —
Hintergrund #e9ecef kann sie nicht ueberdecken, weil die Border
ausserhalb der Background-Area liegt. Der aktive Tab setzt
border-bottom: 1px solid var(--bg-card) (siehe .view-tab-btn.active) und
wirkt dadurch weiterhin "nach unten offen" zum Content-Bereich. */
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
margin-right: var(--space-xs);
/* -1px bewusst — zieht inaktive Tabs auf die Oberkante des aktiven
Tabs (Border-Bottom-Alignment fuer Kartei-Reiter-Effekt). */
margin-bottom: -1px;
cursor: pointer;
font-family: inherit;
transition: color var(--transition-fast), background var(--transition-fast);
}
.view-tab-btn:hover {
color: var(--text-secondary);
background: var(--bg-hover);
text-decoration: none;
}
.view-tab-btn.active,
.view-tab-btn.active:visited {
color: var(--color-primary);
font-weight: 600;
background: var(--bg-card);
border-bottom: 1px solid var(--bg-card);
}
/* Layout-Shift-Schutz: das ::before-Pseudo-Element reserviert dauerhaft
die Breite der bold-Variante (active state). Container-Breite ist damit
konstant — kein "Ruckeln" der Nachbar-Tabs beim Aktivieren, weil der
font-weight-Wechsel von 500 (inactive) auf 600 (active) sonst die
Tab-Breite minimal aendert.
data-label wird per JS aus dem Text-Content gefuellt (siehe app.js). */
.view-tab-btn::before {
content: attr(data-label);
display: block;
font-weight: 600;
height: 0;
overflow: hidden;
visibility: hidden;
}
.view-tab-content {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-top: none;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: visible;
}
.view-tab-section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-sm-plus) var(--space-lg);
min-height: 27px;
background: var(--color-primary);
color: var(--color-light);
}
.view-tab-section-header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
color: inherit;
}
.view-tab-section-header .widget-count {
color: var(--color-text-on-nav-soft);
}
.view-tab-body {
padding: var(--space-xl);
}
.view-tab-panel.hidden {
display: none;
}
/* ============================================================
COMPACT VIEW-TABS — kleinere/schmalere Variante
Nutzung:
Mechanik (data-tab / data-tab-panel / .active / .hidden) bleibt
identisch zu .view-tabs — der bestehende JS-Handler greift weiter.
Nur Geometrie ist kompakter (kleineres Padding, kleinere Schrift,
kleinere obere Rundung) — sinnvoll bei vielen Tabs in einer Bar
(z.B. Berechtigungs-Kategorien in admin/group_edit + user_edit).
============================================================ */
.view-tabs-compact .view-tab-btn {
padding: var(--space-xs-plus) var(--space-md);
font-size: 13px;
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
/* 2-Spalten Formular-Grid (Ticket-Create, etc.) */
.form-grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 var(--space-2xl);
}
/* Form-Grid-2col responsive (RM-49b, 02.05.2026): generisches
2-Spalten-Form-Grid (tickets/create.php Typ+Prio, Pool+
Bearbeiter). Bei < --bp-s (600) auf 1-spaltig — sonst
quetschen sich Selects unter 280 px Spaltenbreite. */
@media (max-width: 599px) {
.form-grid-2col {
grid-template-columns: 1fr;
gap: var(--space-md) 0;
}
}
.pool-overlay-tabs {
display: flex;
border-bottom: 2px solid var(--border-light);
margin-bottom: var(--space-md-plus);
gap: 0;
}
.pool-tab-btn {
padding: var(--space-sm) var(--space-lg-plus);
font-size: 13px;
font-weight: 500;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: calc(var(--space-2xs) * -1);
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.pool-tab-btn:hover {
color: var(--text-secondary);
}
.pool-tab-btn.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
font-weight: 600;
}
.pool-tab-content {
min-height: 80px;
}
.members-checkbox-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-xs);
border-bottom: 1px solid var(--border-light);
font-size: 14px;
cursor: pointer;
}
.members-checkbox-row:last-child {
border-bottom: none;
}
.members-checkbox-row input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--color-primary);
}
/* =========================
MESSAGES (Fallback — wird per JS zu Toast konvertiert)
========================= */
.msg {
display: none;
}
/* =========================
TOAST NOTIFICATIONS
========================= */
#toast-container {
position: fixed;
top: 64px;
left: 50%;
transform: translateX(-50%);
z-index: var(--z-tooltip);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm-plus);
pointer-events: none;
width: max-content;
max-width: 90vw;
}
.toast {
pointer-events: all;
min-width: 280px;
max-width: 520px;
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-lg);
font-size: 14px;
display: flex;
align-items: center;
gap: var(--space-sm-plus);
box-shadow: var(--shadow-md);
animation: toast-slide-in 0.3s ease forwards;
}
.toast.toast-hiding {
animation: toast-slide-out 0.3s ease forwards;
}
@keyframes toast-slide-in {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-slide-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-16px); }
}
/* ============== B7 Stacked-Notification-Toasts ==============
Container oben rechts, max 3 Toasts visuell sichtbar mit dezentem
Tiefen-Effekt (Y-Offset, Scale-Down, Opacity-Reduktion fuer hintere
Karten). Hover faechert auf — alle Karten in voller Hoehe sichtbar.
Klick = Ticket oeffnen + mark-as-read. Auto-Dismiss 5s, pausiert
waehrend Hover. */
#notif-toast-stack {
position: fixed;
top: var(--space-lg);
right: var(--space-lg);
width: 360px;
/* Hoehe wird per CSS-State bestimmt — collapsed reicht der vorderste
Toast + leichter Stack-Offset, expanded faechert auf ~380px auf.
Container ist nur sichtbar wenn mind. 1 Toast drin (.has-toasts). */
min-height: 0;
z-index: var(--z-toast, 11000);
pointer-events: none;
}
#notif-toast-stack.has-toasts {
pointer-events: auto;
min-height: 110px; /* Hover-Area fuer den gestackten Zustand */
}
.notif-toast {
position: absolute;
top: 0;
left: 0;
right: 0;
box-sizing: border-box;
padding: var(--space-md) var(--space-md-plus);
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
color: var(--text-primary);
text-decoration: none;
display: flex;
align-items: flex-start;
gap: var(--space-sm-plus);
pointer-events: all;
cursor: pointer;
transform-origin: top center;
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.28s ease,
box-shadow 0.2s ease;
}
/* Slide-In: neuer Toast kommt von rechts rein. */
.notif-toast.is-entering {
transform: translateX(120%);
opacity: 0;
}
/* Verlassens-Animation. */
.notif-toast.is-hiding {
transform: translateX(120%) !important;
opacity: 0 !important;
}
/* Stack-Positionen — collapsed (default).
pos-0 = vorderster Toast, voll sichtbar. pos-1/2 = hinten, leicht
nach hinten/oben und kleiner skaliert (Tiefen-Andeutung). */
.notif-toast.is-pos-0 { transform: translateY(0) scale(1); opacity: 1; z-index: 3; }
.notif-toast.is-pos-1 { transform: translateY(8px) scale(0.96); opacity: 0.85; z-index: 2; }
.notif-toast.is-pos-2 { transform: translateY(16px) scale(0.92); opacity: 0.7; z-index: 1; }
.notif-toast.is-pos-hidden { opacity: 0; pointer-events: none; transform: translateY(20px) scale(0.9); z-index: 0; }
/* Hover: Stack faechert auf — Toasts liegen untereinander, voll lesbar. */
#notif-toast-stack.is-expanded .notif-toast.is-pos-0 { transform: translateY(0) scale(1); opacity: 1; }
#notif-toast-stack.is-expanded .notif-toast.is-pos-1 { transform: translateY(94px) scale(1); opacity: 1; }
#notif-toast-stack.is-expanded .notif-toast.is-pos-2 { transform: translateY(188px) scale(1); opacity: 1; }
#notif-toast-stack.is-expanded .notif-toast.is-pos-hidden { transform: translateY(282px) scale(0.96); opacity: 0.5; }
/* Hover: leichtes Heben des direkten Items unter Maus. */
.notif-toast:hover { box-shadow: var(--shadow-xl, 0 10px 30px rgba(0,0,0,0.15)); }
/* Aggregator-Toast ("+N weitere") — etwas dezenter visuell. */
.notif-toast-aggregator {
background: var(--bg-table-stripe, var(--bg-card));
color: var(--text-secondary);
}
.notif-toast-aggregator .notif-line {
font-weight: 500;
color: var(--text-primary);
}
.notif-toast-hint {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
/* Inhaltliche Stile reuse aus dem Notification-Center, hier kompakt. */
.notif-toast .notif-icon {
width: 28px;
height: 28px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--color-info-soft);
color: var(--color-primary);
}
.notif-toast .notif-body { flex: 1; min-width: 0; line-height: 1.4; }
.notif-toast .notif-line { font-size: 13px; color: var(--text-primary); }
.notif-toast .notif-line strong { color: var(--text-primary); }
.notif-toast .notif-ticket {
margin-top: 2px;
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Höhe des Containers fuer Hover-Auffaecher-Modus etwas schaetzen,
damit der Mouse-Hover-Bereich sich nicht fuehlt wie ein Sprung. */
#notif-toast-stack.is-expanded { min-height: 380px; }
/* ============== /B7 ============== */
.toast-icon {
font-size: 15px;
flex-shrink: 0;
font-weight: bold;
}
.toast-text {
flex: 1;
line-height: 1.4;
}
.toast-close {
background: none;
border: none;
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 0 0 0 var(--space-sm);
flex-shrink: 0;
opacity: 0.5;
}
.toast-close:hover {
opacity: 1;
}
.toast-success {
background: var(--color-success-soft);
color: var(--color-success-dark);
border-left: 4px solid var(--color-success);
}
.toast-success .toast-close { color: var(--color-success-dark); }
.toast-error {
background: var(--color-error-soft);
color: var(--color-error);
border-left: 4px solid var(--color-error);
}
.toast-error .toast-close { color: var(--color-error); }
.toast-warning {
background: var(--color-warning-soft);
color: var(--color-warning-dark);
border-left: 4px solid var(--color-warning);
}
.toast-warning .toast-close { color: var(--color-warning-dark); }
.toast-info {
background: var(--color-info-soft);
color: var(--color-info-dark);
border-left: 4px solid var(--color-primary);
}
.toast-info .toast-close { color: var(--color-info-dark); }
/* =========================
PAGINIERUNG
========================= */
.pagination-wrap {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-xs-plus) 0;
font-size: 12px;
}
.pagination-info {
color: var(--text-muted);
font-size: 12px;
}
.pagination {
display: flex;
gap: var(--space-xs);
align-items: center;
}
.page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding: 0 var(--space-xs);
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
background: var(--bg-card);
color: var(--text-primary);
text-decoration: none;
font-size: 12px;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.page-btn:hover {
background: var(--bg-hover);
border-color: var(--text-subtle);
text-decoration: none;
}
.page-btn.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-light);
font-weight: 600;
pointer-events: none;
}
.page-btn.disabled {
color: var(--text-subtle);
pointer-events: none;
background: var(--bg-table-stripe);
}
.page-btn-all {
margin-left: var(--space-xs);
font-size: 11px;
font-weight: 500;
}
.page-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
color: var(--text-muted);
font-size: 12px;
}
/* GRUPPEN & BERECHTIGUNGEN + PERMISSION OVERRIDE TOGGLE
ausgelagert nach pages/admin.css (28.04.2026). */
/* Bool-Toggle — 2-State-Variante (aktiv/inaktiv) für system_settings */
.bool-toggle {
display: inline-flex;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
position: relative;
background: var(--bg-hover);
transition: border-color var(--transition-fast);
}
.bool-slider {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
pointer-events: none;
transition: transform 0.25s var(--ease-standard), background-color var(--transition-base);
z-index: 0;
}
.bool-toggle[data-state="1"] .bool-slider {
transform: translateX(0%);
background-color: var(--color-success);
}
.bool-toggle[data-state="0"] .bool-slider {
transform: translateX(100%);
background-color: var(--text-subtle);
}
.bool-toggle-btn {
flex: 1 1 0;
padding: var(--space-xs) var(--space-lg-plus);
font-size: 13px;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
border-right: 1px solid var(--border-color);
transition: color var(--transition-fast), border-color var(--transition-base);
white-space: nowrap;
text-align: center;
position: relative;
z-index: var(--z-base);
}
.bool-toggle-btn:last-of-type {
border-right: none;
}
.bool-toggle-btn:hover {
color: var(--text-secondary);
}
.bool-toggle-btn.active {
color: var(--color-light);
font-weight: 600;
border-right-color: transparent;
}
.bool-toggle-btn:has(+ .active) {
border-right-color: transparent;
}
/* perm-group-indicator + content-box.perm-box ausgelagert nach pages/admin.css. */
/* =========================
BENUTZER-FORMULAR
========================= */
.input-valid {
border: 1px solid var(--color-success) !important;
border-radius: var(--radius-md);
}
.input-invalid {
border: 1px solid var(--color-error) !important;
border-radius: var(--radius-md);
}
.user-form-grid {
display: grid;
/* Min 420px für den Content-Bereich wie bisher, wächst aber bis zur
Container-Breite mit — verhindert ungewolltes Umbrechen bei langen
Beschreibungs-Texten neben Inputs (admin/security.php etc.).
Inputs mit .user-form-control bleiben durch deren max-width:400px
optisch gleich, auch wenn die Zelle breiter wird. */
grid-template-columns: 200px minmax(420px, 1fr);
column-gap: var(--space-xl);
row-gap: var(--space-md-plus);
align-items: center;
}
/* Responsive Schwelle (RM-49b, 02.05.2026): unter --bp-s (600) klappt
das 200+420-Grid (= 620 Mindestbreite) zwangslaeufig — das ganze
Form auf 1-spaltig stellen, Label kommt ueber den Input. Reicht fuer
Smartphone-Quer und schmale Tablets. */
@media (max-width: 599px) {
.user-form-grid {
grid-template-columns: 1fr;
row-gap: var(--space-xs);
align-items: start;
}
.user-form-grid .user-form-label {
margin-top: var(--space-sm);
}
}
.user-form-label {
color: var(--text-muted);
text-align: left;
margin: 0;
}
.user-form-control,
.user-form-grid select,
.user-form-grid input[type="text"],
.user-form-grid input[type="password"] {
width: 100%;
max-width: 420px;
box-sizing: border-box;
margin: 0;
padding: var(--space-sm) var(--space-sm-plus);
font-size: 16px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
}
.user-form-grid select {
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: var(--bg-card);
color: var(--text-secondary);
outline: none;
}
.user-form-grid select:focus {
border-color: var(--color-accent);
box-shadow: var(--shadow-focus);
}
.user-form-checkbox-wrap {
display: flex;
align-items: center;
gap: var(--space-sm);
height: 100%;
}
.user-form-checkbox-wrap input[type="checkbox"] {
margin: 0;
}
.profile-field-readonly {
background: var(--bg-hover);
color: var(--text-muted);
border-color: var(--border-color);
cursor: not-allowed;
}
.password-input-wrap {
position: relative;
width: 420px;
}
.password-input-wrap input[type="password"] {
width: 100% !important;
box-sizing: border-box;
margin: 0;
padding: var(--space-sm) 36px var(--space-sm) var(--space-sm-plus);
font-size: 16px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: var(--bg-input);
color: var(--text-primary);
}
.password-input-wrap .password-toggle {
position: absolute;
top: 50%;
right: var(--space-sm);
transform: translateY(-50%);
width: 22px;
height: 22px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
opacity: 0.65;
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-base);
}
.password-input-wrap .password-toggle:hover {
opacity: 1;
}
.password-toggle svg {
width: 18px;
height: 18px;
stroke: var(--text-muted);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.toggle-password {
cursor: pointer;
font-size: 16px;
opacity: 0.6;
}
.toggle-password:hover {
opacity: 1;
}
/* =========================
HTML5 DIALOG
========================= */
dialog {
border: none;
border-radius: var(--radius-xl);
padding: 0;
max-width: 680px;
width: 95vw;
max-height: calc(100vh - 40px);
overflow: hidden;
box-shadow: var(--shadow-lg);
background: var(--bg-card);
color: var(--text-primary);
}
/* Dialog als Flex-Container — Header und Footer fixiert oben/unten,
Body füllt den verbleibenden Platz und scrollt selbst. So sind die
Buttons IMMER sichtbar, auch auf kleinen Screens (Surface, iPad). */
dialog[open] {
display: flex;
flex-direction: column;
}
/* Form innerhalb Dialog ist nur Wrapper für Submit — soll Layout
nicht beeinflussen, damit body+footer direkte Flex-Kinder bleiben. */
dialog[open] form {
display: contents;
}
/* Body-Scroll sperren wenn ein Dialog offen ist — verhindert das
Mit-Scrollen der Hintergrundseite (wirkt sonst unruhig). */
html:has(dialog[open]) body {
overflow: hidden;
}
dialog::backdrop {
background: var(--bg-overlay);
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-lg-plus) var(--space-2xl);
border-bottom: 1px solid var(--border-light);
flex: 0 0 auto;
}
.dialog-close-btn {
background: none;
border: none;
font-size: 22px;
cursor: pointer;
color: var(--text-muted);
line-height: 1;
padding: 0 var(--space-xs);
}
.dialog-close-btn:hover {
color: var(--text-primary);
}
/* Browser fokussiert nach