/* ==========================================================================
   RepCMS Design-System  (public/css/repaircms-ui.css)
   --------------------------------------------------------------------------
   EINE zentrale Quelle fuer alle Seiten. Eingebunden in:
     - app/views/layouts/header.php        (alle internen Seiten)
     - app/views/layouts/auth.php          (Login, 2FA, Einrichtung)
     - wizard/customerintake/portal-Layouts (Kunden-/Partnerseiten, mit
       body.theme-brand fuer die Markenfarbe)

   Aufbau:
     1. Tokens            (:root, --rc-*, plus Aliase --we-* / --accent)
     2. Basis              (Body, Typo, Links, Formular-Defaults)
     3. Komponenten we-*   (Seite, Kopf, Karten, Buttons, Tabellen,
                            Status, Formulare, Flash, Fortschritt, ...)
     4. Kompatibilitaet    (.btn, .card, .table, .form-control, .alert,
                            .badge, .page ... aus aelteren Views - sehen
                            damit automatisch aus wie we-*)
     5. Hilfsklassen       (Abstaende, Flex, Text)

   Regel fuer neue Views: nur we-* Klassen + Tokens verwenden, keine
   eigenen Farben/Schriften. Seitenspezifisches CSS nur fuer Layout.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root{
    /* Farben */
    --rc-accent:#2563eb;
    --rc-accent-2:#3b82f6;
    --rc-accent-ink:#1d4ed8;
    --rc-accent-soft:#eff6ff;
    --rc-danger:#ef4444;
    --rc-danger-ink:#b91c1c;
    --rc-danger-soft:#fef2f2;
    --rc-success:#16a34a;
    --rc-success-ink:#15803d;
    --rc-success-soft:#f0fdf4;
    --rc-warn:#d97706;
    --rc-warn-ink:#b45309;
    --rc-warn-soft:#fffbeb;
    --rc-info:#0891b2;
    --rc-info-soft:#ecfeff;

    --rc-ink:#0f172a;
    --rc-ink-2:#334155;
    --rc-muted:#64748b;
    --rc-subtle:#94a3b8;
    --rc-border:#e2e8f0;
    --rc-border-strong:#cbd5e1;
    --rc-bg:#f1f5f9;
    --rc-surface:#ffffff;
    --rc-surface-2:#f8fafc;

    /* Form */
    --rc-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    --rc-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --rc-radius:10px;
    --rc-radius-sm:8px;
    --rc-radius-lg:14px;
    --rc-shadow:0 1px 2px rgba(15,23,42,.04);
    --rc-shadow-md:0 4px 14px rgba(15,23,42,.08);
    --rc-shadow-lg:0 12px 32px rgba(15,23,42,.14);
    --rc-ring:0 0 0 3px rgba(37,99,235,.15);

    /* Aliase: bestehende _styles.php / Header-Variablen bleiben gueltig */
    --accent:var(--rc-accent);
    --accent-2:var(--rc-accent-2);
    --danger:var(--rc-danger);

    --we-accent:var(--rc-accent);
    --we-accent-2:var(--rc-accent-2);
    --we-danger:var(--rc-danger);
    --we-success:var(--rc-success);
    --we-warn:var(--rc-warn);
    --we-ink:var(--rc-ink);
    --we-muted:var(--rc-muted);
    --we-border:var(--rc-border);
    --we-card:var(--rc-surface);
    --we-radius:var(--rc-radius);
}

/* Kunden-/Partnerseiten: Markenfarbe Dr. SmartPHONE statt Blau */
.theme-brand{
    --rc-accent:#931a91;
    --rc-accent-2:#a8329f;
    --rc-accent-ink:#7a1478;
    --rc-accent-soft:#f8ecf8;
    --rc-ring:0 0 0 3px rgba(147,26,145,.15);
}

/* ==========================================================================
   2. BASIS
   ========================================================================== */

html{ -webkit-text-size-adjust:100%; }

body{
    margin:0;
    background:var(--rc-bg);
    color:var(--rc-ink);
    font-family:var(--rc-font);
    font-size:15px;
    line-height:1.5;
}

:where(.rc-app, .we-page) h1{ font-size:1.5rem;  font-weight:700; letter-spacing:-.01em; line-height:1.25; }
:where(.rc-app, .we-page) h2{ font-size:1.15rem; font-weight:700; line-height:1.3; }
:where(.rc-app, .we-page) h3{ font-size:1rem;    font-weight:700; line-height:1.35; }

:where(.rc-app) a{ color:var(--rc-accent); }
:where(.rc-app) a:hover{ color:var(--rc-accent-ink); }

:where(.rc-app) code, :where(.rc-app) kbd{
    font-family:var(--rc-mono);
    font-size:.88em;
    background:var(--rc-surface-2);
    border:1px solid var(--rc-border);
    border-radius:5px;
    padding:1px 5px;
}

:where(.rc-app) hr{ border:0; border-top:1px solid var(--rc-border); margin:20px 0; }

/* Formular-Grundstil fuer ALLE Felder ohne eigene Klasse.
   :where() = Spezifitaet 0 -> jede Seiten-Regel gewinnt weiterhin. */
:where(.rc-app) :where(
    input[type=text], input[type=search], input[type=email], input[type=tel],
    input[type=url], input[type=password], input[type=number], input[type=date],
    input[type=datetime-local], input[type=time], input[type=month], input:not([type]),
    select, textarea
){
    font-family:inherit;
    font-size:.9rem;
    color:var(--rc-ink);
    background:#fff;
    border:1px solid var(--rc-border-strong);
    border-radius:var(--rc-radius-sm);
    padding:8px 11px;
    line-height:1.4;
    max-width:100%;
    box-sizing:border-box;
    transition:border-color .15s ease, box-shadow .15s ease;
}

:where(.rc-app) :where(input, select, textarea):focus{
    outline:none;
    border-color:var(--rc-accent);
    box-shadow:var(--rc-ring);
}

:where(.rc-app) :where(input[type=checkbox], input[type=radio]){
    accent-color:var(--rc-accent);
    width:16px;
    height:16px;
    vertical-align:middle;
}

:where(.rc-app) :where(label){ font-size:.85rem; }

:where(.rc-app) :where(button:not([class])){
    font-family:inherit;
    font-size:.88rem;
    font-weight:600;
    padding:9px 16px;
    border-radius:var(--rc-radius-sm);
    border:1px solid transparent;
    background:var(--rc-accent);
    color:#fff;
    cursor:pointer;
}
:where(.rc-app) :where(button:not([class])):hover{ background:var(--rc-accent-2); }

/* Tabellen ohne Klasse */
:where(.rc-app) :where(table:not([class])){
    border-collapse:collapse;
    width:100%;
    font-size:.89rem;
}
:where(.rc-app) :where(table:not([class])) :where(th, td){
    padding:10px 12px;
    border-bottom:1px solid var(--rc-border);
    text-align:left;
}

@media (prefers-reduced-motion:reduce){
    *, *::before, *::after{
        transition-duration:0ms !important;
        animation-duration:0ms !important;
    }
}

/* ==========================================================================
   3. KOMPONENTEN (we-*)
   ========================================================================== */

/* ---------- Inhaltsbereich (layouts/header.php -> footer.php) ----------
   Gibt JEDER Seite denselben Rand. Seiten mit eigenem Container
   (.we-page, .page, .container ...) uebernehmen nur Breite/Zentrierung,
   der Rand kommt einmal von hier. */

.rc-main{
    display:block;
    padding:24px 28px 64px;
    box-sizing:border-box;
}
@media (max-width:720px){
    .rc-main{ padding:16px 16px 48px; }
}

.rc-main > .we-page,
.rc-main > .page,
.rc-main > .container,
.rc-main > .container-fluid,
.rc-main > .content,
.rc-main > .content-wrapper,
.rc-main > .todo-page,
.rc-main > .dev-page,
.rc-main > .user-create,
.rc-main > .user-edit,
.rc-main > .slm-wrap{
    padding-top:0;
    padding-left:0;
    padding-right:0;
    margin-top:0;
}

/* ---------- Seite ---------- */

.we-page{
    max-width:1180px;
    margin:0 auto;
    padding:24px 28px 64px;
    font-family:var(--rc-font);
    color:var(--rc-ink);
    box-sizing:border-box;
}
.we-page *{ box-sizing:border-box; }

.we-page-wide{ max-width:1480px; }
.we-page-full{ max-width:none; }
.we-page-narrow{ max-width:760px; }

@media (max-width:720px){
    .we-page{ padding:16px 16px 48px; }
}

/* ---------- Seitenkopf ---------- */

.we-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
    flex-wrap:wrap;
}
.we-head h1{
    font-size:1.5rem;
    font-weight:700;
    margin:0;
    letter-spacing:-.01em;
}
.we-head .we-sub,
.we-sub{
    color:var(--rc-muted);
    font-size:.9rem;
    margin-top:2px;
}
.we-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.we-back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--rc-muted);
    text-decoration:none;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:8px;
}
.we-back:hover{ color:var(--rc-accent); }

/* ---------- Buttons ---------- */

.we-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:9px 16px;
    border-radius:var(--rc-radius-sm);
    border:1px solid transparent;
    background:var(--rc-accent);
    color:#fff;
    font-family:inherit;
    font-size:.88rem;
    font-weight:600;
    line-height:1.3;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.we-btn:hover{ background:var(--rc-accent-2); color:#fff; }
.we-btn:active{ transform:translateY(1px); }
.we-btn:focus-visible{ outline:2px solid var(--rc-accent); outline-offset:2px; }

.we-btn.we-btn-ghost{
    background:#fff;
    color:var(--rc-ink);
    border-color:var(--rc-border-strong);
}
.we-btn.we-btn-ghost:hover{ background:var(--rc-surface-2); color:var(--rc-ink); }

.we-btn.we-btn-danger{ background:var(--rc-danger); color:#fff; }
.we-btn.we-btn-danger:hover{ background:#dc2626; }

.we-btn.we-btn-danger-ghost{
    background:#fff;
    color:var(--rc-danger);
    border-color:#fecaca;
}
.we-btn.we-btn-danger-ghost:hover{ background:var(--rc-danger-soft); }

.we-btn.we-btn-success{ background:var(--rc-success); color:#fff; }
.we-btn.we-btn-success:hover{ background:var(--rc-success-ink); }

.we-btn.we-btn-warn{ background:var(--rc-warn); color:#fff; }
.we-btn.we-btn-warn:hover{ background:var(--rc-warn-ink); }

.we-btn.we-btn-link{
    background:none;
    border-color:transparent;
    color:var(--rc-accent);
    padding-left:4px;
    padding-right:4px;
}
.we-btn.we-btn-link:hover{ background:none; text-decoration:underline; color:var(--rc-accent-ink); }

.we-btn[disabled], .we-btn.we-btn-disabled{
    opacity:.5;
    cursor:not-allowed;
    pointer-events:none;
}

.we-btn-sm{ padding:6px 12px; font-size:.8rem; }
.we-btn-lg{ padding:12px 22px; font-size:.95rem; }
.we-btn-block{ display:flex; width:100%; }

/* ---------- Karten ---------- */

.we-card{
    background:var(--rc-surface);
    border:1px solid var(--rc-border);
    border-radius:var(--rc-radius);
    padding:20px 22px;
    margin-bottom:20px;
    box-shadow:var(--rc-shadow);
}
.we-card h2{
    font-size:1.05rem;
    font-weight:700;
    margin:0 0 14px;
}
.we-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin:-20px -22px 16px;
    padding:14px 22px;
    border-bottom:1px solid var(--rc-border);
}
.we-card-head h2{ margin:0; }
.we-card-flush{ padding:0; }
.we-card-flush > .we-card-head{ margin:0; }
.we-card-flush .we-table th:first-child,
.we-card-flush .we-table td:first-child{ padding-left:22px; }

/* ---------- Kennzahlen-Kacheln ---------- */

.we-kpis{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:14px;
    margin-bottom:20px;
}
.we-kpi{
    background:var(--rc-surface);
    border:1px solid var(--rc-border);
    border-radius:var(--rc-radius);
    padding:14px 16px;
    box-shadow:var(--rc-shadow);
}
.we-kpi-label{
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--rc-muted);
}
.we-kpi-value{
    font-size:1.5rem;
    font-weight:700;
    margin-top:4px;
    font-variant-numeric:tabular-nums;
}

/* ---------- Status-Badges ---------- */

.we-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 11px;
    border-radius:999px;
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    white-space:nowrap;
    background:var(--rc-surface-2);
    color:var(--rc-muted);
}
.we-status::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
}
.we-status-open,     .we-status-info   { background:var(--rc-accent-soft);  color:var(--rc-accent); }
.we-status-putaway,  .we-status-warn   { background:var(--rc-warn-soft);    color:var(--rc-warn); }
.we-status-closed,   .we-status-success{ background:var(--rc-success-soft); color:var(--rc-success); }
.we-status-cancelled,.we-status-danger { background:var(--rc-danger-soft);  color:var(--rc-danger); }
.we-status-muted{ background:#f1f5f9; color:var(--rc-muted); }

/* kleine, neutrale Markierung (Zaehler, Tags) */
.we-tag{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 8px;
    border-radius:6px;
    font-size:.75rem;
    font-weight:600;
    background:#f1f5f9;
    color:var(--rc-ink-2);
    white-space:nowrap;
}

/* ---------- Tabellen ---------- */

.we-table-wrap{ overflow-x:auto; }

.we-table{
    width:100%;
    min-width:760px;
    table-layout:fixed;
    border-collapse:collapse;
    font-size:.89rem;
}
/* Variante fuer Tabellen mit Fliesstext: Spalten nach Inhalt, Umbruch */
.we-table.we-table-auto{ table-layout:auto; min-width:0; }
.we-table th{
    text-align:left;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--rc-muted);
    font-weight:700;
    padding:14px 16px;
    border-bottom:1px solid var(--rc-border);
    white-space:nowrap;
    background:transparent;
}
.we-table td{
    padding:15px 16px;
    border-bottom:1px solid var(--rc-border);
    vertical-align:middle;
}
.we-table td{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.we-table th{ overflow:hidden; text-overflow:ellipsis; }
.we-table.we-table-auto td{ white-space:normal; overflow:visible; }
@media (max-width:720px){
    /* Auf dem Handy lieber horizontal scrollen als Spalten zerquetschen */
    .we-table-wrap > .we-table.we-table-auto{ min-width:640px; }
}
.we-table tbody tr{ transition:background .1s ease; }
.we-table tbody tr:hover{ background:var(--rc-surface-2); }
.we-table tbody tr:last-child td{ border-bottom:none; }
.we-table .we-num, .we-table th.we-num{ text-align:right; font-variant-numeric:tabular-nums; }
.we-table-compact td{ padding:8px 12px; }
.we-table-compact th{ padding:9px 12px; }

.we-table-link{
    color:var(--rc-ink);
    text-decoration:none;
    font-weight:600;
}
.we-table-link:hover{ color:var(--rc-accent); text-decoration:underline; }

/* ---------- Leerzustand ---------- */

.we-empty{
    text-align:center;
    padding:56px 20px;
    color:var(--rc-muted);
}
.we-empty p{ margin:6px 0 18px; }

/* ---------- Formulare ---------- */

.we-field{ margin-bottom:16px; }
.we-field label,
.we-label{
    display:block;
    font-size:.82rem;
    font-weight:600;
    margin-bottom:6px;
    color:var(--rc-ink);
}
.we-field .we-hint,
.we-hint{
    font-size:.76rem;
    color:var(--rc-muted);
    margin-top:4px;
}
.we-field input[type=text],
.we-field input[type=search],
.we-field input[type=email],
.we-field input[type=tel],
.we-field input[type=password],
.we-field input[type=number],
.we-field input[type=date],
.we-field input[type=datetime-local],
.we-field input[type=time],
.we-field select,
.we-field textarea,
.we-input{
    width:100%;
    padding:9px 11px;
    border:1px solid var(--rc-border-strong);
    border-radius:var(--rc-radius-sm);
    font-size:.9rem;
    font-family:inherit;
    color:var(--rc-ink);
    background:#fff;
    box-sizing:border-box;
}
.we-field input:focus,
.we-field select:focus,
.we-field textarea:focus,
.we-input:focus{
    outline:none;
    border-color:var(--rc-accent);
    box-shadow:var(--rc-ring);
}
.we-field textarea{ resize:vertical; min-height:70px; }

.we-check{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.88rem;
    cursor:pointer;
}

.we-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.we-grid-3{ display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:12px; align-items:end; }
.we-grid-auto{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }

@media (max-width:720px){
    .we-grid-2, .we-grid-3{ grid-template-columns:1fr; }
}

/* Filterleiste ueber Tabellen */
.we-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:flex-end;
    margin-bottom:16px;
}
.we-toolbar .we-field{ margin-bottom:0; }

/* Schluessel/Wert-Liste (Detailseiten) */
.we-dl{
    display:grid;
    grid-template-columns:minmax(120px, max-content) 1fr;
    gap:8px 18px;
    margin:0;
    font-size:.9rem;
}
.we-dl dt{ color:var(--rc-muted); font-weight:600; }
.we-dl dd{ margin:0; }

/* ---------- Artikel-Suche (Combobox) ---------- */

.we-combobox{ position:relative; }
.we-part-suggestions{
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    right:0;
    z-index:20;
    background:#fff;
    border:1px solid var(--rc-border);
    border-radius:var(--rc-radius-sm);
    box-shadow:var(--rc-shadow-lg);
    max-height:260px;
    overflow-y:auto;
}
.we-suggest-item{
    padding:9px 12px;
    font-size:.86rem;
    cursor:pointer;
    border-bottom:1px solid var(--rc-border);
}
.we-suggest-item:last-child{ border-bottom:none; }
.we-suggest-item:hover,
.we-suggest-item.we-suggest-active{ background:var(--rc-accent-soft); }
.we-suggest-meta{
    display:block;
    font-size:.74rem;
    color:var(--rc-muted);
    margin-top:2px;
}
.we-suggest-empty{
    padding:10px 12px;
    font-size:.84rem;
    color:var(--rc-muted);
}

/* ---------- Positionszeilen (create/edit) ---------- */

.we-item-row{
    display:grid;
    grid-template-columns:2fr 1fr 1fr auto;
    gap:12px;
    align-items:end;
    padding:12px 0;
    border-bottom:1px solid var(--rc-border);
}
.we-item-row:last-child{ border-bottom:none; }

.we-remove-btn{
    width:34px;
    height:34px;
    border-radius:var(--rc-radius-sm);
    border:1px solid var(--rc-border);
    background:#fff;
    color:var(--rc-danger);
    cursor:pointer;
    font-size:1rem;
    line-height:1;
}
.we-remove-btn:hover{ background:var(--rc-danger-soft); border-color:#fecaca; }

/* ---------- Meldungen ---------- */

.we-flash{
    padding:12px 16px;
    border-radius:var(--rc-radius-sm);
    font-size:.88rem;
    margin-bottom:18px;
    border:1px solid transparent;
}
.we-flash-success{ background:var(--rc-success-soft); color:var(--rc-success-ink); border-color:#bbf7d0; }
.we-flash-error  { background:var(--rc-danger-soft);  color:var(--rc-danger-ink);  border-color:#fecaca; }
.we-flash-warn   { background:var(--rc-warn-soft);    color:var(--rc-warn-ink);    border-color:#fde68a; }
.we-flash-info   { background:var(--rc-accent-soft);  color:var(--rc-accent-ink);  border-color:#bfdbfe; }

/* ---------- Fortschritt ---------- */

.we-progress-track{
    height:8px;
    border-radius:99px;
    background:var(--rc-border);
    overflow:hidden;
}
.we-progress-fill{
    height:100%;
    background:linear-gradient(90deg,var(--rc-accent),var(--rc-accent-2));
    border-radius:99px;
    transition:width .3s ease;
}

/* ---------- Verlauf ---------- */

.we-history{ list-style:none; margin:0; padding:0; }
.we-history li{
    display:flex;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid var(--rc-border);
    font-size:.85rem;
}
.we-history li:last-child{ border-bottom:none; }
.we-history .we-history-time{
    color:var(--rc-muted);
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    min-width:132px;
}
.we-history .we-history-event{
    font-weight:700;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--rc-accent);
    min-width:100px;
}

/* ---------- Aufklapper ---------- */

.we-page details summary::-webkit-details-marker{ color:var(--rc-muted); }
.we-page details summary::marker{ color:var(--rc-muted); font-size:.85em; }
.we-page details summary:hover{ background:var(--rc-surface-2); }
.we-page details[open] summary{ border-bottom:1px solid var(--rc-border); }

/* ---------- Tabs ---------- */

.we-tabs{
    display:flex;
    gap:4px;
    border-bottom:1px solid var(--rc-border);
    margin-bottom:18px;
    overflow-x:auto;
}
.we-tabs a, .we-tabs button{
    padding:10px 14px;
    border:0;
    background:none;
    font:inherit;
    font-size:.88rem;
    font-weight:600;
    color:var(--rc-muted);
    text-decoration:none;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    cursor:pointer;
    white-space:nowrap;
}
.we-tabs a:hover, .we-tabs button:hover{ color:var(--rc-ink); }
.we-tabs .active, .we-tabs [aria-selected=true]{
    color:var(--rc-accent);
    border-bottom-color:var(--rc-accent);
}

/* ---------- Scanner-/MDE-Seiten (grosse Touch-Ziele) ---------- */

.we-scan{
    max-width:560px;
    margin:0 auto;
}
.we-scan .we-input,
.we-scan input[type=text],
.we-scan input[type=number]{
    font-size:1.25rem;
    padding:14px 16px;
}
.we-scan .we-btn{ padding:14px 20px; font-size:1rem; }

/* ==========================================================================
   4. KOMPATIBILITAET (aeltere Views)
   --------------------------------------------------------------------------
   Diese Klassen stammen aus Bootstrap-artigem Markup und dem frueheren
   ui.css. Sie werden hier auf die we-* Optik abgebildet, damit alte und
   neue Seiten gleich aussehen, ohne jede View umzuschreiben.
   ========================================================================== */

/* ---------- Seitencontainer ---------- */

.page,
.container,
.container-fluid,
.content,
.content-wrapper{
    max-width:1180px;
    margin:0 auto;
    padding:24px 28px 64px;
    box-sizing:border-box;
}
.container-fluid{ max-width:none; }
.content .container,
.page .container{ padding:0; }

.page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:20px;
}
.page-header h1{ margin:0; font-size:1.5rem; font-weight:700; letter-spacing:-.01em; }

@media (max-width:720px){
    .page, .container, .container-fluid, .content, .content-wrapper{ padding:16px 16px 48px; }
}
.page-header p{ margin:2px 0 0; color:var(--rc-muted); font-size:.9rem; flex-basis:100%; }
.page-header > div > p{ flex-basis:auto; }

/* ---------- Karten ---------- */

.card{
    background:var(--rc-surface);
    border:1px solid var(--rc-border);
    border-radius:var(--rc-radius);
    box-shadow:var(--rc-shadow);
    margin-bottom:20px;
}
.card:not(:has(> .card-body)):not(:has(> .card-header)){ padding:20px 22px; }
.card-header{
    padding:14px 22px;
    border-bottom:1px solid var(--rc-border);
    font-weight:700;
    background:transparent;
}
.card-body{ padding:20px 22px; }
.card-footer{
    padding:12px 22px;
    border-top:1px solid var(--rc-border);
    background:var(--rc-surface-2);
    border-radius:0 0 var(--rc-radius) var(--rc-radius);
}
.card-title{ font-size:1.05rem; font-weight:700; margin:0 0 12px; }
.shadow-sm{ box-shadow:var(--rc-shadow) !important; }

/* ---------- Buttons ---------- */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:9px 16px;
    border-radius:var(--rc-radius-sm);
    border:1px solid var(--rc-border-strong);
    background:#fff;
    color:var(--rc-ink);
    font-family:inherit;
    font-size:.88rem;
    font-weight:600;
    line-height:1.3;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    vertical-align:middle;
    transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:hover{ background:var(--rc-surface-2); color:var(--rc-ink); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--rc-accent); outline-offset:2px; }
.btn:disabled, .btn.disabled{ opacity:.5; cursor:not-allowed; pointer-events:none; }

.btn-primary{ background:var(--rc-accent); border-color:transparent; color:#fff; }
.btn-primary:hover{ background:var(--rc-accent-2); color:#fff; }

.btn-secondary, .btn-light, .btn-default, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark{
    background:#fff;
    border-color:var(--rc-border-strong);
    color:var(--rc-ink);
}
.btn-secondary:hover, .btn-light:hover, .btn-default:hover,
.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-dark:hover{
    background:var(--rc-surface-2);
    color:var(--rc-ink);
}
.btn-outline-primary{ color:var(--rc-accent); border-color:#bfdbfe; }

.btn-success{ background:var(--rc-success); border-color:transparent; color:#fff; }
.btn-success:hover{ background:var(--rc-success-ink); color:#fff; }

.btn-danger{ background:var(--rc-danger); border-color:transparent; color:#fff; }
.btn-danger:hover{ background:#dc2626; color:#fff; }
.btn-outline-danger{ background:#fff; border-color:#fecaca; color:var(--rc-danger); }
.btn-outline-danger:hover{ background:var(--rc-danger-soft); color:var(--rc-danger); }

.btn-warning{ background:var(--rc-warn); border-color:transparent; color:#fff; }
.btn-warning:hover{ background:var(--rc-warn-ink); color:#fff; }

.btn-info{ background:var(--rc-info); border-color:transparent; color:#fff; }
.btn-info:hover{ background:#0e7490; color:#fff; }

.btn-dark{ background:var(--rc-ink); border-color:transparent; color:#fff; }
.btn-dark:hover{ background:#1e293b; color:#fff; }

.btn-link{ background:none; border-color:transparent; color:var(--rc-accent); padding-left:4px; padding-right:4px; }
.btn-link:hover{ background:none; text-decoration:underline; color:var(--rc-accent-ink); }

.btn-sm{ padding:6px 12px; font-size:.8rem; }
.btn-lg{ padding:12px 22px; font-size:.95rem; }
.btn-block, .w-100.btn{ display:flex; width:100%; }

/* ---------- Tabellen ---------- */

.table-responsive{ overflow-x:auto; }

.table{
    width:100%;
    border-collapse:collapse;
    font-size:.89rem;
    background:transparent;
    margin-bottom:0;
}
.table th{
    text-align:left;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--rc-muted);
    font-weight:700;
    padding:12px 14px;
    border-bottom:1px solid var(--rc-border);
    white-space:nowrap;
    background:transparent;
}
.table td{
    padding:12px 14px;
    border-bottom:1px solid var(--rc-border);
    vertical-align:middle;
}
.table tbody tr:last-child td{ border-bottom:none; }
.table-hover tbody tr:hover,
.table tbody tr:hover{ background:var(--rc-surface-2); }
.table-striped tbody tr:nth-child(odd){ background:#fcfdfe; }
.table-sm td, .table-sm th{ padding:7px 10px; }
.table-bordered td, .table-bordered th{ border:1px solid var(--rc-border); }

/* ---------- Formulare ---------- */

.form-group, .mb-form{ margin-bottom:16px; }
.form-group > label,
.form-label,
.control-label{
    display:block;
    font-size:.82rem;
    font-weight:600;
    margin-bottom:6px;
    color:var(--rc-ink);
}
.form-control,
.form-select,
.custom-select{
    display:block;
    width:100%;
    padding:9px 11px;
    border:1px solid var(--rc-border-strong);
    border-radius:var(--rc-radius-sm);
    font-size:.9rem;
    font-family:inherit;
    color:var(--rc-ink);
    background-color:#fff;
    box-sizing:border-box;
    line-height:1.4;
}
.form-control:focus,
.form-select:focus{
    outline:none;
    border-color:var(--rc-accent);
    box-shadow:var(--rc-ring);
}
.form-control-sm{ padding:6px 9px; font-size:.82rem; }
textarea.form-control{ resize:vertical; min-height:70px; }
.form-text, .help-block{ font-size:.76rem; color:var(--rc-muted); margin-top:4px; }
.form-check{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.input-group{ display:flex; gap:0; }
.input-group > .form-control{ border-top-right-radius:0; border-bottom-right-radius:0; }
.input-group > .btn{ border-top-left-radius:0; border-bottom-left-radius:0; }

/* ---------- Meldungen ---------- */

.alert,
.flash,
.flash-success,
.flash-error,
.success-box,
.error-box,
.info-box{
    padding:12px 16px;
    border-radius:var(--rc-radius-sm);
    font-size:.88rem;
    margin-bottom:18px;
    border:1px solid var(--rc-border);
    background:var(--rc-surface-2);
    color:var(--rc-ink-2);
}
.alert-success, .flash-success, .success-box{ background:var(--rc-success-soft); color:var(--rc-success-ink); border-color:#bbf7d0; }
.alert-danger, .alert-error, .flash-error, .error-box{ background:var(--rc-danger-soft); color:var(--rc-danger-ink); border-color:#fecaca; }
.alert-warning{ background:var(--rc-warn-soft); color:var(--rc-warn-ink); border-color:#fde68a; }
.alert-light, .alert-secondary{ background:var(--rc-surface-2); color:var(--rc-muted); border-color:var(--rc-border); }
.alert-info, .info-box{ background:var(--rc-accent-soft); color:var(--rc-accent-ink); border-color:#bfdbfe; }

/* ---------- Badges ---------- */

.badge,
.status-badge,
.state-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:3px 9px;
    border-radius:999px;
    font-size:.74rem;
    font-weight:700;
    line-height:1.4;
    white-space:nowrap;
    background:#f1f5f9;
    color:var(--rc-ink-2);
    vertical-align:middle;
}
.badge-primary, .bg-primary.badge, .badge.bg-primary{ background:var(--rc-accent-soft); color:var(--rc-accent); }
.badge-success, .bg-success.badge, .badge.bg-success{ background:var(--rc-success-soft); color:var(--rc-success); }
.badge-danger,  .bg-danger.badge,  .badge.bg-danger { background:var(--rc-danger-soft);  color:var(--rc-danger); }
.badge-warning, .bg-warning.badge, .badge.bg-warning{ background:var(--rc-warn-soft);    color:var(--rc-warn); }
.badge-info,    .bg-info.badge,    .badge.bg-info   { background:var(--rc-info-soft);    color:var(--rc-info); }
.badge-secondary, .bg-secondary.badge, .badge.bg-secondary,
.badge-light, .badge.bg-light{ background:#f1f5f9; color:var(--rc-muted); }
.badge-dark, .badge.bg-dark{ background:var(--rc-ink); color:#fff; }

/* ---------- Raster (vereinfachtes Bootstrap-Grid) ---------- */

.row{ display:flex; flex-wrap:wrap; margin:0 -8px; }
.row > [class*="col"]{ padding:0 8px; box-sizing:border-box; flex:1 1 0; min-width:0; }
.row > .col-12, .row > .col-md-12, .row > .col-lg-12{ flex:0 0 100%; }
.row > .col-md-6, .row > .col-lg-6, .row > .col-6{ flex:0 0 50%; }
.row > .col-md-4, .row > .col-lg-4, .row > .col-4{ flex:0 0 33.333%; }
.row > .col-md-3, .row > .col-lg-3, .row > .col-3{ flex:0 0 25%; }
.row > .col-md-8, .row > .col-lg-8, .row > .col-8{ flex:0 0 66.666%; }
.row > .col-md-9, .row > .col-lg-9, .row > .col-9{ flex:0 0 75%; }
.row > .col-md-2, .row > .col-lg-2, .row > .col-2{ flex:0 0 16.666%; }
.row > .col-auto{ flex:0 0 auto; }
@media (max-width:768px){
    .row > [class*="col-md-"], .row > [class*="col-lg-"]{ flex:0 0 100%; }
}
.g-2, .g-3{ row-gap:12px; }

/* ==========================================================================
   5. HILFSKLASSEN
   ========================================================================== */

.muted, .text-muted, .text-secondary{ color:var(--rc-muted) !important; }
.text-danger{ color:var(--rc-danger) !important; }
.text-success{ color:var(--rc-success) !important; }
.text-warning{ color:var(--rc-warn) !important; }
.text-primary{ color:var(--rc-accent) !important; }
.text-end, .text-right{ text-align:right !important; }
.text-center{ text-align:center !important; }
.small, small{ font-size:.82em; }
.fw-bold, .font-weight-bold{ font-weight:700 !important; }
.fw-semibold{ font-weight:600 !important; }
.mono, .font-monospace{ font-family:var(--rc-mono); }
.nowrap, .text-nowrap{ white-space:nowrap; }
.bg-white{ background:#fff !important; }

.d-flex{ display:flex !important; }
.d-grid{ display:grid !important; }
.d-none{ display:none !important; }
.d-inline{ display:inline !important; }
.d-inline-block{ display:inline-block !important; }
.flex-wrap{ flex-wrap:wrap !important; }
.flex-column{ flex-direction:column !important; }
.align-items-center{ align-items:center !important; }
.align-items-end{ align-items:flex-end !important; }
.justify-content-between{ justify-content:space-between !important; }
.justify-content-end{ justify-content:flex-end !important; }
.justify-content-center{ justify-content:center !important; }
.gap-1{ gap:4px !important; }
.gap-2{ gap:8px !important; }
.gap-3{ gap:16px !important; }
.w-100{ width:100% !important; }
.h-100{ height:100% !important; box-sizing:border-box; }
.align-middle, .align-middle td, .align-middle th{ vertical-align:middle !important; }
.text-start, .text-left{ text-align:left !important; }
.float-end, .float-right{ float:right; }
.border{ border:1px solid var(--rc-border) !important; }
.rounded{ border-radius:var(--rc-radius-sm) !important; }

.m-0{ margin:0 !important; }
.mt-0{ margin-top:0 !important; }
.mt-1{ margin-top:4px !important; }
.mt-2{ margin-top:8px !important; }
.mt-3{ margin-top:16px !important; }
.mt-4{ margin-top:24px !important; }
.mb-0{ margin-bottom:0 !important; }
.mb-1{ margin-bottom:4px !important; }
.mb-2{ margin-bottom:8px !important; }
.mb-3{ margin-bottom:16px !important; }
.mb-4{ margin-bottom:24px !important; }
.me-2, .mr-2{ margin-right:8px !important; }
.ms-2, .ml-2{ margin-left:8px !important; }
.ms-auto, .ml-auto{ margin-left:auto !important; }
.p-0{ padding:0 !important; }
.p-2{ padding:8px !important; }
.p-3{ padding:16px !important; }
.p-4{ padding:24px !important; }

/* ==========================================================================
   6. AUTH-SEITEN (Login, 2FA, Einrichtung) - siehe layouts/auth.php
   ========================================================================== */

.rc-auth{
    min-height:100vh;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 16px;
    box-sizing:border-box;
    color:#f1f5f9;
    background:
        radial-gradient(circle at 20% 20%, #1e293b, transparent 50%),
        radial-gradient(circle at 80% 80%, #111827, transparent 50%),
        linear-gradient(135deg,#0f172a,#1e293b);
}
.rc-auth-card{
    width:100%;
    max-width:440px;
    padding:44px 38px;
    border-radius:20px;
    background:rgba(255,255,255,.07);
    -webkit-backdrop-filter:blur(30px);
    backdrop-filter:blur(30px);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
    animation:rcAuthIn .6s cubic-bezier(.25,.8,.25,1);
    box-sizing:border-box;
}
@keyframes rcAuthIn{
    from{ opacity:0; transform:translateY(20px) scale(.98); }
    to{ opacity:1; transform:none; }
}
.rc-auth-card h1{
    font-size:1.35rem;
    font-weight:700;
    margin:0 0 6px;
    text-align:center;
}
.rc-auth-sub{
    color:#94a3b8;
    font-size:.9rem;
    text-align:center;
    margin:0 0 26px;
}
.rc-auth-field{ margin-bottom:16px; }
.rc-auth-field label{
    display:block;
    font-size:.8rem;
    font-weight:600;
    color:#cbd5e1;
    margin-bottom:6px;
}
.rc-auth-field input{
    width:100%;
    box-sizing:border-box;
    padding:13px 14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.05);
    color:#f1f5f9;
    font-family:inherit;
    font-size:.95rem;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.rc-auth-field input:focus{
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.25);
}
.rc-auth-check{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.85rem;
    color:#94a3b8;
    margin:4px 0 20px;
}
.rc-auth-check input{ accent-color:#3b82f6; width:16px; height:16px; }
.rc-auth-btn{
    width:100%;
    padding:13px;
    border:none;
    border-radius:12px;
    font-family:inherit;
    font-size:.95rem;
    font-weight:600;
    background:#3b82f6;
    color:#fff;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(59,130,246,.35);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.rc-auth-btn:hover{ transform:translateY(-1px); box-shadow:0 16px 36px rgba(59,130,246,.45); }
.rc-auth-btn:disabled{ opacity:.6; cursor:default; transform:none; }
.rc-auth-msg{
    font-size:.86rem;
    border-radius:12px;
    padding:11px 14px;
    margin-bottom:18px;
    border:1px solid;
}
.rc-auth-msg-error{ background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.45); color:#fecaca; }
.rc-auth-msg-info { background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.4); color:#bfdbfe; }
.rc-auth-msg-success{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.4); color:#bbf7d0; }
.rc-auth-link{
    display:block;
    text-align:center;
    margin-top:18px;
    font-size:.85rem;
    color:#94a3b8;
    text-decoration:none;
}
.rc-auth-link:hover{ color:#e2e8f0; }
.rc-auth-qr{
    display:flex;
    justify-content:center;
    margin:6px 0 14px;
}
.rc-auth-qr svg{
    border-radius:12px;
    padding:10px;
    background:#fff;
}
.rc-auth-secret{
    text-align:center;
    font-family:var(--rc-mono);
    font-size:.95rem;
    letter-spacing:.08em;
    color:#e2e8f0;
    word-break:break-all;
    margin-bottom:22px;
}
.rc-otp{
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin-bottom:20px;
}
.rc-otp input{
    width:100%;
    min-width:0;
    aspect-ratio:1 / 1.15;
    text-align:center;
    font-size:1.5rem;
    font-weight:700;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.05);
    color:#f1f5f9;
    font-family:inherit;
    outline:none;
    box-sizing:border-box;
}
.rc-otp input:focus{ border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.25); }

@media (max-width:480px){
    .rc-auth-card{ padding:34px 22px; }
}