/* ============================================================================
   makler-ui.css — Gemeinsame Designsprache (immobilien-makler-tools.de)
   Abgeleitet aus den Leitbild-Tools (tool2/6/7/10/13), TREU zum heutigen Look.
   EINE Quelle der Wahrheit: Tokens (CSS-Variablen) + Basis-Komponenten (mui-*).
   Später: User überschreibt Tokens (Design-Tab) -> Corporate Design pro Instanz.
   ========================================================================== */

/* Design-Tokens (:root --mui-*) liegen jetzt zentral in makler-tokens.css
   (eine Quelle der Wahrheit, eingebunden auf Framework-Seiten UND in den Tools).
   Diese Datei (makler-ui.css) enthält nur noch Komponenten + Chrome. */

/* Flächen-Wrapper: Leitbild-Hintergrund (weiße Cards „floaten" auf Grau) */
.mui-page { background: var(--mui-bg); padding: 20px; font-family: var(--mui-font); color: var(--mui-text); font-size: 14px; }
.mui-page * { box-sizing: border-box; }

.mui-h2 { font-size: 30px; font-weight: 400; margin: 0 0 16px; color: #fff; }
.mui-section-title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--mui-primary); }
.mui-muted { color: var(--mui-text-muted); }
.mui-mt0 { margin-top: 0; } .mui-mb0 { margin-bottom: 0; }

/* --- Buttons --------------------------------------------------------------- */
.mui-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; font-size: 14px; font-family: var(--mui-font); border: 1px solid transparent; border-radius: var(--mui-radius); cursor: pointer; transition: all .2s ease; text-decoration: none; line-height: 1.2; }
.mui-btn-primary { background: var(--mui-primary); color: #fff; border-color: var(--mui-primary); }
.mui-btn-primary:hover { background: var(--mui-primary-hover); border-color: var(--mui-primary-hover); }
.mui-btn-success { background: var(--mui-success); color: #fff; border-color: var(--mui-success); }
.mui-btn-success:hover { background: var(--mui-success-d); border-color: var(--mui-success-d); }
.mui-btn-danger { background: var(--mui-danger); color: #fff; border-color: var(--mui-danger); }
.mui-btn-danger:hover { background: var(--mui-danger-d); border-color: var(--mui-danger-d); }
.mui-btn-outline { background: #fff; color: var(--mui-primary); border-color: var(--mui-primary); }
.mui-btn-outline:hover { background: #e2e3e6; }
.mui-btn-sm { padding: 5px 10px; font-size: 13px; }
.mui-btn-lg { padding: 12px 24px; font-size: 16px; }
.mui-btn:disabled, .mui-btn.is-disabled { opacity: .5; cursor: not-allowed; }

/* --- Icons (weiße, transparente 32px-Pictogramme aus /img/ux) -------------- */
.mui-ico { display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -2px; }
.mui-ico-lg { width: 20px; height: 20px; }
.mui-ico-xl { width: 28px; height: 28px; }

/* --- Cards ----------------------------------------------------------------- */
.mui-card { margin-bottom: 20px; overflow: hidden; }
.mui-card__title { padding: 12px 15px; border-bottom: 1px solid var(--mui-border); background: var(--mui-surface-alt); font-size: 16px; font-weight: 400; color: var(--mui-text); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mui-card__body { padding: 0px; }
.mui-card__footer { padding: 12px 15px; border-top: 1px solid var(--mui-border); background: var(--mui-surface-foot); display: flex; justify-content: flex-end; gap: 10px; }

/* Panel-Optik gezielt wiederherstellen: die globale .mui-card ist bewusst flach
   (Dashboard-Filterpanel). Flächen mit .panel-cards bekommen die Karten-Optik zurück.
   Höhere Spezifität (.panel-cards .mui-card) -> überschreibt das flache Global.
   Login (.login-card) und Dashboard-Menü (.dash-sidebar) bleiben unberührt. */
.panel-cards .mui-card { background: var(--mui-surface); border-radius: var(--mui-radius); box-shadow: var(--mui-shadow); }
.panel-cards .mui-card__body { padding: 15px; }

/* --- Tabs ------------------------------------------------------------------ */
.mui-tabs { display: flex; gap: 0; background: var(--mui-primary); border-radius: var(--mui-radius) var(--mui-radius) 0 0; overflow-x: auto; }
.mui-tab { padding: 12px 20px; font-size: 14px; font-family: var(--mui-font); color: rgba(255,255,255,.7); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: all .2s ease; }
.mui-tab:hover { color: #fff; background: rgba(255,255,255,.1); }
.mui-tab.active { color: #fff; background: rgba(255,255,255,.2); border-bottom-color: #fff; }
.mui-tab-content { display: none; }
.mui-tab-content.active { display: block; }

/* --- Formularfelder -------------------------------------------------------- */
.mui-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px; }
.mui-field > label { font-size: 12px; font-weight: 400; text-transform: uppercase; color: var(--mui-text-muted); display: flex; align-items: center; gap: 8px; }
.mui-field input, .mui-field select, .mui-field textarea { width: 100%; padding: 10px 12px; font-size: 14px; font-family: var(--mui-font); border: 1px solid var(--mui-primary); border-radius: var(--mui-radius); background: #fff; color: var(--mui-text); }
.mui-field input, .mui-field select { height: 42px; }
.mui-field textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.mui-field input:focus, .mui-field select:focus, .mui-field textarea:focus { outline: none; border-color: var(--mui-primary); box-shadow: var(--mui-focus); }
.mui-field input:disabled, .mui-field input[readonly] { background: #f5f5f5; }
.mui-field-hint { font-size: 11px; color: var(--mui-text-muted); margin-top: 3px; }

/* --- Grid ------------------------------------------------------------------ */
.mui-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.mui-grid-1 { grid-template-columns: 1fr; }
.mui-field--full { grid-column: 1 / -1; }
@media (max-width: 768px) { .mui-grid { grid-template-columns: 1fr; } }

/* --- Tabellen -------------------------------------------------------------- */
.mui-table-wrap { overflow-x: auto; border: 1px solid var(--mui-border); border-radius: var(--mui-radius); }
.mui-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mui-table th { padding: 12px 15px; text-align: left; font-size: 12px; font-weight: 400; text-transform: uppercase; color: #fff; background: var(--mui-primary); }
.mui-table td { padding: 12px 15px; border-bottom: 1px solid var(--mui-border-light); vertical-align: middle; }
.mui-table tbody tr:hover { background: var(--mui-surface-hover); }
.mui-table tr:last-child td { border-bottom: none; }

/* --- Badges ---------------------------------------------------------------- */
.mui-badge { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; border-radius: 3px; }
.mui-badge-success { background: var(--mui-success-light); color: var(--mui-success-d); }
.mui-badge-danger  { background: var(--mui-danger-light);  color: var(--mui-danger-d); }
.mui-badge-warning { background: var(--mui-warning-light); color: #856404; }
.mui-badge-info    { background: var(--mui-info-light);    color: #0c5460; }
.mui-badge-muted   { background: var(--mui-border-light);  color: var(--mui-text-light); }

/* --- Alerts / Hinweise ----------------------------------------------------- */
.mui-alert { padding: 12px 15px; border-radius: var(--mui-radius); margin-bottom: 15px; font-size: 13px; border: 1px solid transparent; }
.mui-alert-warning { background: var(--mui-warning-light); border-color: #ffe082; color: #856404; }
.mui-alert-info    { background: var(--mui-info-light);    border-color: #bee5eb; color: #0c5460; }
.mui-alert-danger  { background: var(--mui-danger-light);  border-color: #f5c6cb; color: var(--mui-danger-d); }

/* ============================================================================
   Chrome (Framework-Rahmen) – Leitbild-Override für Header / Nav / Dashboard /
   Kacheln / Widgets. Lädt zuletzt -> vereinheitlicht alle Rollen.
   Admin-Abgrenzung via body.role-admin (Stahlblau-Akzent + ADMIN-Badge).
   ========================================================================== */

/* Header + Navigation: Navy statt Dunkelgrau */
.page-header { background-color: var(--mui-secondary); }
.main-nav    { background: var(--mui-primary); }
.header-right a { color: #fff; }
.header-right a:hover { text-decoration: underline; }

/* Admin-Akzent (Stahlblau #3E596A) */
body.role-admin .page-header { border-bottom: 3px solid var(--mui-secondary); }
.admin-badge {
    display: inline-block; background: #3E596A; color: #fff;
    font-size: 11px; font-weight: 600; letter-spacing: 1px;
    padding: 3px 9px; border-radius: 3px; margin-right: 14px;
}

/* Admin-Kennzahlen-Widgets: kompakte, technische Stat-Tiles */
.dashboard-widgets { gap: 12px; }
.widget { flex: 1 1 210px; min-width: 0; background: var(--mui-surface); border: 1px solid var(--mui-border); border-left: 3px solid var(--mui-primary); border-radius: var(--mui-radius); box-shadow: none; padding: 12px 14px; overflow: hidden; text-align: left; align-items: stretch; justify-content: flex-start; }
.widget h3 { margin: 0 0 10px; padding: 0; background: none; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--mui-text-muted); }
/* KPI-Zahlen (Benutzer, Lizenzen) */
.adm-kpis { display: flex; gap: 22px; flex-wrap: wrap; }
.adm-kpi__num { font-family: 'Consolas','Monaco',monospace; font-size: 28px; font-weight: 700; line-height: 1; color: var(--mui-primary); }
.adm-kpi__lbl { display: block; margin-top: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--mui-text-muted); }
/* Label->Wert-Zeilen (Umsatz, System) */
.adm-rows { display: flex; flex-direction: column; gap: 6px; }
.adm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.adm-row__lbl { color: var(--mui-text-light); }
.adm-row__val { font-family: 'Consolas','Monaco',monospace; font-weight: 600; color: var(--mui-text); white-space: nowrap; }
/* Status-Punkt */
.adm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--mui-text-muted); }
.adm-dot.ok { background: var(--mui-success); }
.adm-dot.err { background: var(--mui-danger); }
/* Kompakte Liste (neueste Benutzer) */
.adm-list { list-style: none; margin: 0; padding: 0; }
.adm-list li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--mui-border-light); font-size: 13px; }
.adm-list li:last-child { border-bottom: none; }
.adm-list .u { font-weight: 600; color: var(--mui-text); }
.adm-list .t { font-family: 'Consolas','Monaco',monospace; font-size: 12px; color: var(--mui-text-muted); white-space: nowrap; }

/* Admin-Dashboard: 2 Spalten – links Kennzahlen + Administration, rechts Makler-Tools */
.admin-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.admin-col-left { flex: 0 1 320px; min-width: 260px; }
.admin-col-right { flex: 1 1 460px; min-width: 0; }
.admin-col-left .admin-links { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.admin-col-left .admin-links .mui-btn { width: 100%; justify-content: flex-start; }
.admin-grid .dashboard-section > h2 { margin-top: 12px; }
@media (max-width: 860px) { .admin-col-left, .admin-col-right { flex: 1 1 100%; } }

/* Willkommens-Box -> Card mit Navy-Akzent */
.welcome-box { background: var(--mui-surface); border: 1px solid var(--mui-border); border-left: 4px solid var(--mui-primary); border-radius: var(--mui-radius); box-shadow: var(--mui-shadow); text-align: left; }

/* Dashboard-Kacheln -> Leitbild (Card + Navy-Button) */
.tile { border: 1px solid var(--mui-border); border-radius: var(--mui-radius); box-shadow: var(--mui-shadow); display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.tile h3 { color: var(--mui-text); }
.tile p  { color: var(--mui-text-light); }
/* Tool-öffnen-Button: volle Tile-Breite, oben eckig / unten rund (Bottom-Cap), unten bündig */
.tile-button { background: var(--mui-primary); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--mui-radius) var(--mui-radius); transition: all .2s ease; margin-top: auto; align-self: stretch; text-align: center; }
.tile-button:hover { background: var(--mui-primary-hover); }

/* Makler-Dashboard: linkes Filter-/Menü-Panel + Kachelraster rechts */
.dash-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.dash-sidebar { flex: 0 0 360px; max-width: 100%;}
.dash-sidebar .mui-card { position: sticky; top: 16px; margin-bottom: 0; }
.dash-main { flex: 1 1 480px; min-width: 0; }
.dash-main .dashboard-tiles { margin-top: 0; justify-content: flex-start; }
.dash-menu { list-style: none; margin: 0; padding: 0; box-shadow: var(--mui-shadow); }
.dash-menu__item { border-bottom: 1px solid var(--mui-border-light); background: var(--mui-primary); padding: 10px;   }
.dash-menu__item:hover {background: var(--mui-primary-hover); }
.dash-menu__item:last-child { border-bottom: none; }
.dash-menu__link { display: block; padding: 9px 2px; font-size: 14px; color: var(--mui-dash-menu); text-decoration: none; }
.dash-menu__link:hover { text-decoration: none; }
.dash-menu__link--locked { color: var(--mui-text-muted); cursor: not-allowed; }
.dash-menu__link--locked:hover { text-decoration: none; }
.dash-menu__empty { font-size: 13px; color: var(--mui-text-muted); margin: 8px 0 0; }
@media (max-width: 860px) { .dash-sidebar { flex-basis: 100%; } .dash-sidebar .mui-card { position: static; } }

/* Abschnitts-Überschriften auf grauem mui-page-Grund (Dashboard) hell */
.mui-page .dashboard-section > h2 { color: #fff; font-weight: 400; font-size: 22px; margin: 24px 0 6px; }

/* --- Sticky Footer: Footer bleibt immer am unteren Rand (auch bei wenig Inhalt) ---- */
body:not(.modal) { min-height: 100vh; display: flex; flex-direction: column; background: var(--mui-bg); }
body:not(.modal) > main { flex: 1 0 auto; display: flex; flex-direction: column; height: auto; width: 100%; max-width: 100%; align-self: center; box-sizing: border-box; }
body:not(.modal) > main > .mui-page { flex: 1 0 auto; }
body:not(.modal) > footer { flex-shrink: 0; background: var(--mui-secondary); color: rgba(255,255,255,.85); text-align: center; padding: 14px 16px; font-size: 13px; margin: 0; }
body:not(.modal) > footer a { color: #fff; }
/* Login/no-header: normaler Fluss statt fixer 80vh-Zentrierung (Login zentriert seine Card selbst) */
body.no-header:not(.modal) > main { align-items: stretch; justify-content: flex-start; height: auto; }
/* Chrome-Inhalt (Logo/Menü) fluchtet mit dem zentrierten main */
.header-container, .nav-container { max-width: 100%; margin-left: auto; margin-right: auto; }

/* Einheitliche Breite NUR der Projektauswahl-Index-Seiten (tool3/6/7/8/10/12).
   Marker-Klasse .pa-index am Seiten-Wrapper; zwei-Klassen-Selektor schlägt die
   tool-eigene .mtN-page{max-width:100%}-Regel. Header/Chrome bleiben unberührt.
   WICHTIG width:100% — `main` ist Flex-Container, und das tool-eigene
   .mtN-page{margin:0 auto} würde das Flex-Item sonst auf INHALTSbreite schrumpfen
   lassen (tool8 breit, tool3 schmal). width:100% erzwingt einheitliche Breite. */
.pa-index.mt3-page,
.pa-index.mt6-page,
.pa-index.mt8-page,
.pa-index.mt10-page,
.pa-index.mt12-page { width: 100%; max-width: var(--mui-content-max); margin-left: auto; margin-right: auto; box-sizing: border-box; }

/* ============================================================================
   Auth-Screens (Login + Registrierung) – EIN gemeinsamer Look.
   Genutzt von templates/system/login.php und modules/registration (Modus full).
   Header/Nav werden über body.no-header (top.php) ausgeblendet; die Karte
   zentriert sich selbst. Marken-Wasserzeichen links unten, stark transparent.
   ========================================================================== */
.auth-page { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.auth-page::before {
    content: ""; position: absolute; left: -40px; bottom: -60px;
    width: min(74vmin, 640px); height: min(74vmin, 640px);
    background: url('/img/milan-brand-ergo-safe-white.png') no-repeat left bottom / contain;
    opacity: .08; pointer-events: none; z-index: 0;
}
.auth-stack { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; max-width: 400px; }
.auth-head { display: flex; align-items: center; gap: 14px; }
.auth-head img { height: 40px; width: auto; display: block; }
.auth-head .auth-title { font-size: 28px; font-weight: 400; color: #fff; line-height: 40px; }
.auth-card { width: 100%; background: var(--mui-surface, #fff); border-radius: var(--mui-radius, 6px); box-shadow: var(--mui-shadow, 0 20px 15px rgba(0,0,0,.2)); overflow: hidden; }
.auth-card__title { padding: 14px 18px; border-bottom: 1px solid var(--mui-border, #ddd); background: var(--mui-surface-alt, #f7f7f7); font-size: 18px; font-weight: 400; color: var(--mui-text, #333); }
.auth-card__body { padding: 20px 18px; }
.auth-card__links { margin-top: 14px; font-size: 13px; text-align: center; line-height: 2; }