/* ═══════════════════════════════════════════════════════════════
   InboxGUARD Design System – components.css  v1.0 – 28.03.2026
   Zentrale CSS-Definitionen für alle Popups, Modals und Formulare.
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties ──────────────────────────────────── */
:root {
  /* Modal Maße */
  --ig-modal-sm:      560px;
  --ig-modal-md:      680px;
  --ig-modal-lg:      920px;
  --ig-modal-hf:       60px;  /* Header / Footer Höhe */
  --ig-modal-pad-x:    24px;  /* Seitenabstand – Titel und Content bündig */
  --ig-modal-pad-y:    24px;  /* Content oben/unten */

  /* Buttons */
  --ig-btn-min-w:     110px;
  --ig-btn-h:          38px;

  /* Eingabefelder – weiß im Dark-Theme */
  --ig-input-bg:     #f8fafc;
  --ig-input-color:  #0f172a;
  --ig-input-border: #cbd5e1;
  --ig-input-h:        38px;
}

/* ─── Modal: Basisstruktur ───────────────────────────────────── */
/* Überschreibt main.css .modal → Flex-Column-Layout */
.modal {
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
}

/* Größen-Varianten */
.modal.modal-sm { width: var(--ig-modal-sm); max-width: 95vw; }
.modal.modal-md { width: var(--ig-modal-md); max-width: 95vw; }
.modal.modal-lg { width: var(--ig-modal-lg); max-width: 98vw; }

/* Fullscreen-Variante */
.modal.modal-fs {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
}
.modal-overlay.fs-overlay {
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
}

/* ─── Modal Header ───────────────────────────────────────────── */
.modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 var(--ig-modal-pad-x) !important;
  height: var(--ig-modal-hf) !important;
  min-height: var(--ig-modal-hf) !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 0 !important;
  background: #1e293b !important;
  z-index: 5 !important;
  border-bottom: 1px solid #334155 !important;
}

/* ─── Modal Body ─────────────────────────────────────────────── */
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ig-modal-pad-y) var(--ig-modal-pad-x);
}
.modal-body.no-pad { padding: 0 !important; margin: 0 !important; }

/* Tab-Nav INNERHALB modal-body: negatives margin-top hebt oberes Padding auf */
.modal-body > .tab-nav:first-child,
.modal-body > .ig-tab-nav:first-child {
  margin-top: calc(-1 * var(--ig-modal-pad-y));
  margin-left: calc(-1 * var(--ig-modal-pad-x));
  margin-right: calc(-1 * var(--ig-modal-pad-x));
  padding-left: var(--ig-modal-pad-x);
  padding-right: var(--ig-modal-pad-x);
  padding-top: 8px;
  margin-bottom: var(--ig-modal-pad-y);
}

/* ─── Modal Footer ───────────────────────────────────────────── */
.modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 0 var(--ig-modal-pad-x) !important;
  height: var(--ig-modal-hf) !important;
  min-height: var(--ig-modal-hf) !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  background: #1e293b !important;
  z-index: 5 !important;
  border-top: 1px solid #334155 !important;
  margin-bottom: 0 !important;
}

/* ─── Fullscreen-Button im Header ────────────────────────────── */
.modal-fs-btn {
  background: none;
  border: none;
  color: #64748b;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.modal-fs-btn:hover { color: #f1f5f9; background: #334155; }

/* ─── Schließen-Button im Header ─────────────────────────────── */
.modal-close {
  background: none !important;
  border: none !important;
  color: #64748b !important;
  font-size: 22px !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  transition: color 0.15s, background 0.15s !important;
}
.modal-close:hover { color: #f87171 !important; background: #450a0a !important; }

/* ─── Buttons: Einheitliche Mindestbreite ────────────────────── */
.modal-footer .btn {
  min-width: var(--ig-btn-min-w);
  height: var(--ig-btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── Eingabefelder: Einheitlich (weiß im Dark-Theme) ───────── */
/* Gilt für alle input/select INNERHALB von .modal, .card, .form-row */
.modal .form-row input:not([type=checkbox]):not([type=radio]),
.modal .form-row select,
.modal input[type=text],
.modal input[type=email],
.modal input[type=password],
.modal input[type=number],
.modal select {
  background: var(--ig-input-bg) !important;
  color: var(--ig-input-color) !important;
  border-color: var(--ig-input-border) !important;
  height: var(--ig-input-h) !important;
  padding: 0 12px !important;
}
.modal .form-row input:not([type=checkbox]):not([type=radio]):focus,
.modal .form-row select:focus,
.modal input[type=text]:focus,
.modal input[type=email]:focus,
.modal input[type=password]:focus,
.modal input[type=number]:focus,
.modal select:focus {
  border-color: #0284c7 !important;
  outline: none !important;
}
.modal .form-row input::placeholder { color: #94a3b8; }

/* Textareas innerhalb von Modals ebenfalls weiß */
.modal textarea {
  background: var(--ig-input-bg) !important;
  color: var(--ig-input-color) !important;
  border-color: var(--ig-input-border) !important;
}
.modal textarea:focus {
  border-color: #0284c7 !important;
  outline: none !important;
}
.modal textarea::placeholder { color: #94a3b8; }

/* Auch .class-select in Modals weiß */
.modal .class-select {
  background: var(--ig-input-bg) !important;
  color: var(--ig-input-color) !important;
  border-color: var(--ig-input-border) !important;
  height: var(--ig-input-h) !important;
}

/* ─── Tab-Navigation (global) ────────────────────────────────── */
/* Ergänzung zu main.css .tab-nav / .tab-btn */
.tab-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
}

/* ─── Konsistente Tab-Panel-Mindesthöhe (kein Springen) ──────── */
.ig-tab-panel {
  min-height: 420px;
}

/* ─── Form-Row Grundstile ────────────────────────────────────── */
.form-row label {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─── Status-Selects (Aktiv/Inaktiv – farbig) ───────────────── */
/* Universeller farbiger Status-Select (grün=aktiv, rot=inaktiv) */
.status-select {
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  height: 32px !important;
  min-width: 90px;
  cursor: pointer;
  border: 1px solid;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
}
.status-select.status-active {
  background: #052e16 !important;
  color: #4ade80 !important;
  border-color: #166534 !important;
}
.status-select.status-inactive {
  background: #450a0a !important;
  color: #f87171 !important;
  border-color: #7f1d1d !important;
}

/* Status-Badge (nur Anzeige, kein Select) */
.status-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.status-badge.status-active {
  background: #052e16;
  color: #4ade80;
}
.status-badge.status-inactive {
  background: #450a0a;
  color: #f87171;
}

/* Status-Selects in Tabellen (bleiben dunkel als Basis, farbig via JS) */
table .class-select {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

/* Tabellen: vertikale Zentrierung aller Zellen */
table td {
  vertical-align: middle;
}

/* Status-Select in Tabellen: kompakter */
table .status-select {
  height: 28px !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  min-width: 80px;
}

/* Status-Select in Modals: Farbstile NICHT von Modal-Input-Styles überschreiben */
.modal .status-select.status-active {
  background: #052e16 !important;
  color: #4ade80 !important;
  border-color: #166534 !important;
}
.modal .status-select.status-inactive {
  background: #450a0a !important;
  color: #f87171 !important;
  border-color: #7f1d1d !important;
}

/* ─── Grüner Button ─────────────────────────────────────────── */
.btn-green {
  background: #166534 !important;
  color: #4ade80 !important;
  border-color: #166534 !important;
}
.btn-green:hover {
  background: #14532d !important;
}

/* ─── Oranger Button ─────────────────────────────────────────── */
.btn-orange {
  background: #78350f !important;
  color: #fbbf24 !important;
  border-color: #92400e !important;
}
.btn-orange:hover {
  background: #713f12 !important;
}

/* ─── Modul-Kachel (Tenant-Modal Tab 3) ──────────────────────── */
.module-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #1e293b;
  border-radius: 10px;
  border: 1px solid #334155;
  margin-bottom: 8px;
}
.module-card .module-card-info {
  flex: 1;
}
.module-card .module-card-info .module-card-name {
  font-weight: 500;
  font-size: 14px;
  color: #e2e8f0;
}
.module-card .module-card-info .module-card-desc {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

/* ─── Textarea flex-fill (Fullscreen-Modus) ──────────────────── */
.ta-flex-fill {
  flex: 1;
  min-height: 0;
  resize: none;
}