/* ============================================================
   domoXio – base.css
   Zentrales Design-System: Tokens, Utilities, Komponenten
   Eingebunden in: admin.py, portal.py, onboarding.py
   Letzte Änderung: April 2026
   ============================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
/* Alle Farbwerte, Abstände und Schatten als CSS-Variablen.
   Änderungen hier wirken auf die gesamte App. */

:root {
  /* Farben – Marke */
  --anthrazit:      #232d38;
  --anthrazit-nav:  #1e2a35;
  --blue:           #0077b6;
  --blue-light:     #5bb8f5;
  --blue-pale:      #e8f4fb;
  --green:          #4a7c59;

  /* Onboarding (Pre-Login) & Post-Login-Modal: gleicher Karten-Kopf (4px, blau → grün) */
  --onboarding-card-header-fade: linear-gradient(
    to bottom,
    transparent 0px,
    transparent 4px,
    #ffffff 4px
  );
  --onboarding-card-header-stripe: linear-gradient(
    to right,
    rgba(0, 119, 182, 0.5) 0%,
    rgba(74, 124, 89, 0.4) 100%
  );

  /* Farben – Oberflächen */
  --surface:        #f4f6f8;
  --card:           #ffffff;
  --border:         #dde3ea;

  /* Farben – Text */
  --text:           #1a2430;
  --text-muted:     #6b7c8d;

  /* Farben – Status */
  --success:        #2d6a4f;
  --success-bg:     #eaf4ef;
  --error:          #b5242a;
  --red:            var(--error);
  --error-bg:       #fcecea;
  --warning:        #7a5c00;
  --warning-bg:     #fef8e7;
  --info-bg:        #e8f4fb;

  /* Abstände & Formen */
  --radius:         8px;
  --radius-lg:      12px;
  --shadow:         0 1px 3px rgba(35,45,56,0.08), 0 4px 12px rgba(35,45,56,0.05);
}

/* ── 2. RESET & BASIS ─────────────────────────────────────── */
/* Minimal-Reset: Box-Model und Margins vereinheitlichen. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── 3. LAYOUT ────────────────────────────────────────────── */
/* Gemeinsame Struktur: Header, Nav, Container, Footer.
   Gilt für admin.py und portal.py gleichermassen. */

.container {
  max-width: 960px;
  margin: 28px auto;
  padding: 0 24px;
  flex: 1;
  width: 100%;
}

.container--wide {
  max-width: 1200px;
  margin: 28px auto;
  padding: 0 24px;
  flex: 1;
  width: 100%;
}

/* ── 4. HEADER ────────────────────────────────────────────── */

.header {
  background: var(--anthrazit);
  padding: 0 32px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.15);
}

.header-subtitle {
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* ── 5. USER-DROPDOWN ─────────────────────────────────────── */

.user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: background 0.15s;
}

.user-btn:hover { background: rgba(255,255,255,0.14); }

.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 200px;
  z-index: 200;
  overflow: hidden;
}

.user-dropdown.open { display: block; }

.user-dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.user-dropdown-header .name {
  font-weight: 600;
  font-size: 13px;
}

.user-dropdown-header .role {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.user-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.15s;
}

.user-dropdown a:hover { background: var(--blue-pale); }
.user-dropdown a i { color: var(--text-muted); width: 16px; }
.user-dropdown a.logout { color: var(--error); border-top: 1px solid var(--border); }
.user-dropdown a.logout i { color: var(--error); }

/* ── 6. NAVIGATION ────────────────────────────────────────── */

.nav {
  background: var(--anthrazit-nav);
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 56px;
  z-index: 99;
}

.nav a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav a i {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  transition: color 0.15s;
}

.nav a:hover,
.nav a.active {
  color: white;
  border-bottom-color: var(--blue-light);
}

.nav a:hover i,
.nav a.active i { color: white; }

/* ── 7. FOOTER ────────────────────────────────────────────── */

.footer {
  background: #f0f2f4;
  border-top: 1px solid var(--border);
  padding: 16px 32px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--blue); }

/* ── 8. CARDS ─────────────────────────────────────────────── */
/* Entscheidung: Alle Cards haben denselben Schatten und Radius.
   Der blaue 4px-Top-Balken ist bewusst weggelassen — er kommt
   nur bei spezifischen Stat-Cards per Inline-Style. */

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  width: 100%;
}

.card h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--anthrazit);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--anthrazit);
  margin: 16px 0 8px;
}

/* Großes FA-Icon (52px, blau, mit dezentem Drop-Shadow).
   Genutzt für visuelle Hingucker in Auth- und Onboarding-Flows
   (z.B. Sanduhr beim Warten, Schloss bei 2FA-Erfolg). */
.fa-icon-large {
  font-size: 52px;
  color: var(--blue);
  display: inline-block;
  filter: drop-shadow(0 2px 6px rgba(0,119,182,0.2));
}

/* ── 9. BUTTONS ───────────────────────────────────────────── */
/* Entscheidung: .btn ist immer inline-flex damit Icons
   vertikal zentriert sind. Farb-Modifier via --btn-bg. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.1s;
  background: var(--anthrazit);
  color: white;
}

.btn:hover    { opacity: 0.88; transform: translateY(-1px); }
.btn:active   { transform: translateY(0); }
.btn:disabled,
.btn.disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
  pointer-events: none;
}

.btn-blue   { background: var(--blue); }
.btn-green  { background: var(--success); }
.btn-red    { background: var(--error); }
.btn-grey   { background: #6b7c8d; }
.btn-orange { background: #e07800; }
.btn-sm     { padding: 5px 12px; font-size: 12px; }

.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Confirm-Dialoge: Primär (blau) hover grün, Abbrechen (grau) hover rot — nur innerhalb .confirm-dialog.
   !important: schlägt .btn:hover (opacity) und später geladene Sheet-Regeln; doppelte Klasse erhöht Spezifität. */
.confirm-dialog .btn.btn-blue:hover:not(:disabled):not(.disabled),
.confirm-dialog a.btn.btn-blue:hover:not(.disabled) {
  background: var(--green) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
.confirm-dialog .btn.btn-grey:hover:not(:disabled):not(.disabled),
.confirm-dialog a.btn.btn-grey:hover:not(.disabled) {
  background: var(--red) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Innerhalb .confirm-dialog: neutrale Sekundär-Aktion (z. B. Trial), kein Rot-Hover */
.confirm-dialog .btn.btn-grey.no-confirm-hover:hover:not(:disabled):not(.disabled),
.confirm-dialog a.btn.btn-grey.no-confirm-hover:hover:not(.disabled) {
  background: #6b7c8d !important;
  color: #ffffff !important;
  opacity: 0.88 !important;
}

/* ── 10. BADGES ───────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  gap: 4px;
}

.badge-green  { background: var(--success-bg); color: var(--success); }
.badge-red    { background: var(--error-bg);   color: var(--error); }
.badge-blue   { background: var(--info-bg);    color: var(--blue); }
.badge-grey   { background: #eef0f2;           color: var(--text-muted); }
.badge-orange { background: #fef3e2;           color: #e07800; }

/* ── 11. ALERTS ───────────────────────────────────────────── */
/* Entscheidung: Alerts haben immer border-left als farbigen
   Akzent. Der linke Rand ist das primäre visuelle Signal,
   nicht die Hintergrundfarbe. */

.alert {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
  border-left: 4px solid;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.alert-info {
  background: var(--info-bg);
  color: var(--blue);
  border: 1px solid #bee3f8;
  border-left: 4px solid var(--blue);
}

.alert-success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid #c3e4cf;
  border-left: 4px solid var(--success);
}

.alert-error {
  background: var(--error-bg);
  color: var(--error);
  border: 1px solid #f0b3b5;
  border-left: 4px solid var(--error);
}

.alert-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid #f0d080;
  border-left: 4px solid #e8a800;
}

/* ── 12. TABELLEN ─────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; }

th {
  background: var(--anthrazit);
  color: rgba(255,255,255,0.85);
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

th:first-child { border-radius: 6px 0 0 6px; }
th:last-child  { border-radius: 0 6px 6px 0; }

td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 13px;
}

tr:last-child td { border-bottom: none; }

tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--blue-pale); }

/* Kompakte Variante für Detailtabellen */
.td-compact { padding: 6px 8px; vertical-align: top; }

/* ── 13. FORMULARE ────────────────────────────────────────── */

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.15s;
  background: white;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,119,182,0.1);
}

/* ── 14. DETAILS / AKKORDEONS ─────────────────────────────── */
/* Entscheidung: Zwei Varianten — hint-box (blau, Info) und
   warn-box (gelb, Warnung). Beide als <details>-Element damit
   der Browser Öffnen/Schliessen nativ handled. */

details.hint-box {
  background: var(--info-bg);
  border: 1px solid #bee3f8;
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

details.hint-box summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--blue);
  padding: 10px 14px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

details.hint-box summary::-webkit-details-marker { display: none; }
details.hint-box[open] summary { border-bottom: 1px solid #bee3f8; }
details.hint-box > div { padding: 0 14px 12px; font-size: 13px; color: var(--text); line-height: 1.6; }

details.warn-box {
  background: var(--warning-bg);
  border: 1px solid #f0d080;
  border-left: 4px solid #e8a800;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

details.warn-box summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--warning);
  padding: 10px 14px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

details.warn-box summary::-webkit-details-marker { display: none; }
details.warn-box[open] summary { border-bottom: 1px solid #f0d080; }
details.warn-box > div { padding: 0 14px 12px; font-size: 13px; color: var(--warning); line-height: 1.6; }

/* ── 15. LIGHTBOX / OVERLAY ───────────────────────────────── */
/* Entscheidung: position:fixed + backdrop-filter für alle
   modalen Dialoge. JS toggled die .active-Klasse. */

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(35,45,56,0.65);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
}

.lightbox-overlay.active { display: flex; }

.lightbox {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.lightbox h2 { margin-bottom: 16px; font-size: 18px; }

.lightbox .stats-row {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}

.lightbox .stat {
  flex: 1;
  text-align: center;
  background: var(--surface);
  border-radius: 8px;
  padding: 14px;
  border: 1px solid var(--border);
}

.lightbox .stat .num { font-size: 2em; font-weight: 600; line-height: 1; }
.lightbox .stat .lbl { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; }

.lightbox .info {
  background: var(--warning-bg);
  border-left: 3px solid #e8a800;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 13px;
  color: var(--warning);
  line-height: 1.5;
}

.lightbox .btns {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.lightbox .btns .btn { flex: 1; justify-content: center; min-width: 130px; }

/* ── 16. DROPZONE ─────────────────────────────────────────── */
/* Upload-Bereich: Drag-and-Drop Zielzone.
   .active wird per JS bei dragover gesetzt. */

.dropzone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.dropzone:hover { border-color: var(--blue-light); background: var(--blue-pale); }
.dropzone.active { border-color: var(--blue); background: var(--blue-pale); }
.dropzone.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.dropzone .icon { font-size: 2.5em; margin-bottom: 8px; }
.dropzone .main-text { font-size: 15px; font-weight: 500; color: var(--anthrazit); margin: 4px 0; }
.dropzone p { color: var(--text-muted); font-size: 13px; margin: 4px 0; }

/* ── 17. RADIO-GRUPPE ─────────────────────────────────────── */
/* Für Einstellungen und Onboarding-Wizard: Radio-Buttons
   als klickbare Karten mit Beschreibungstext. */

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.radio-group label {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
  color: var(--text);
}

.radio-group label:hover { background: var(--blue-pale); border-color: var(--blue-light); }
.radio-group input[type=radio] { width: auto; margin: 2px 0 0 0; flex-shrink: 0; accent-color: var(--blue); }
.radio-group .hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

/* ── 18. UTILITY CLASSES ──────────────────────────────────── */
/* Kleine Helfer-Klassen für häufige inline-style Muster.
   Ersatz für wiederkehrende style="..." Attribute im Python-Code.
   Migration schrittweise — nicht alle werden sofort genutzt. */

/* Flex */
.flex-row    { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.flex-col    { display: flex; flex-direction: column; gap: 8px; }
.flex-end    { display: flex; justify-content: flex-end; }
.flex-between{ display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }

/* Text */
.text-muted  { color: var(--text-muted); }
.text-sm     { font-size: 12px; }
.text-xs     { font-size: 11px; }
.text-lg     { font-size: 1.25em; }
.text-mono   { font-family: 'DM Mono', monospace; font-size: 12px; }
.text-bold   { font-weight: 600; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-error  { color: var(--error); }
.text-success{ color: var(--success); }

/* Spacing */
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }

/* Visibility */
.hidden { display: none; }

/* ── 19. SEITEN-HINTERGRUND ───────────────────────────────── */
/* Entscheidung: Radial-Gradient über solidem #f4f6f8.
   Werte kommen aus ui_theme.py PAGE_BG_ROOT_VARS —
   hier als Fallback für den Fall dass ui_theme nicht gesetzt ist. */

.page-bg {
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(0,119,182,0.08) 0%, transparent 70%),
    var(--surface);
}