/* ════════════════════════════════════════════════════════════════════
   Lösungsnetz – Filament-Admin Theme
   Übersetzt das Marken-Design der Werbeseite ins Backend
   ════════════════════════════════════════════════════════════════════ */

:root {
  --ln-gelb:       #ffab37;
  --ln-gruen:      #9ba253;
  --ln-blau:       #7c95a9;
  --ln-grau:       #354a54;
  --ln-grau-soft:  #5d7682;
  --ln-paper:      #fbfaf6;
  color-scheme: light !important;
}

/* Dark-Mode hart deaktivieren (Marken-Theme ist Light-only) */
html.dark, html[data-theme="dark"], .dark {
  color-scheme: light !important;
}
.dark .fi-body, .dark .fi-sidebar, .dark .fi-topbar,
.dark .fi-section, .dark .fi-wi, .dark .fi-ta, .dark .fi-modal-window,
.dark .fi-input, .dark .fi-input-wrp,
.dark .fi-ta-table, .dark .fi-ta-row, .dark .fi-ta-cell, .dark .fi-ta-header-cell {
  background-color: white !important;
  color: var(--ln-grau) !important;
}
.dark .fi-body { background: var(--ln-paper) !important; }
.dark .fi-sidebar { background: rgba(251, 250, 246, 0.92) !important; }
.dark .fi-topbar { background: rgba(255, 255, 255, 0.85) !important; }
.dark .fi-ta-table thead { background: rgba(251, 250, 246, 0.6) !important; }
.dark * {
  --tw-text-opacity: 1;
  border-color: rgba(53, 74, 84, 0.08) !important;
}
.dark .fi-page-heading-text,
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--ln-grau) !important; }
.dark .fi-ta-text, .dark .fi-ta-text-item-label { color: var(--ln-grau) !important; }

/* ── Globale Schrift: Inter Light ─────────────────────────────────── */
html.fi-body, body, .fi-body, .fi-main, .fi-sidebar, .fi-topbar {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.005em;
  color: var(--ln-grau);
}

.fi-main h1, .fi-page-heading,
.fi-section-header-heading, .fi-header-heading {
  font-weight: 300 !important;
  letter-spacing: -0.025em;
  color: var(--ln-grau) !important;
}

.fi-main h2, .fi-main h3 {
  font-weight: 300 !important;
  letter-spacing: -0.015em;
  color: var(--ln-grau) !important;
}

/* ── Body-Hintergrund: weicher Marken-Verlauf ─────────────────────── */
.fi-body {
  background:
    radial-gradient(circle at 8% 8%,  rgba(255, 171, 55, 0.06), transparent 28%),
    radial-gradient(circle at 92% 4%, rgba(155, 162, 83, 0.05), transparent 28%),
    radial-gradient(circle at 50% 96%, rgba(124, 149, 169, 0.05), transparent 30%),
    var(--ln-paper) !important;
}

/* ── Sidebar: Premium-Look ────────────────────────────────────────── */
.fi-sidebar {
  background: rgba(251, 250, 246, 0.92) !important;
  backdrop-filter: blur(12px);
  border-right: 1px solid rgba(53, 74, 84, 0.08) !important;
}

.fi-sidebar-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(53, 74, 84, 0.08) !important;
  padding: 1.25rem 1.5rem !important;
}

.fi-sidebar-nav-groups,
.fi-sidebar-nav {
  padding: 1rem 0.75rem !important;
}

.fi-sidebar-group-label {
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.16em !important;
  color: var(--ln-grau-soft) !important;
  padding: 0 0.75rem !important;
}

.fi-sidebar-item-button {
  font-weight: 300 !important;
  border-radius: 0.75rem !important;
  color: var(--ln-grau) !important;
  transition: all 0.2s ease;
}
.fi-sidebar-item-button:hover {
  background: rgba(255, 171, 55, 0.08) !important;
  color: var(--ln-grau) !important;
}
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-active.fi-active .fi-sidebar-item-button {
  background: linear-gradient(135deg, rgba(255, 171, 55, 0.15), rgba(155, 162, 83, 0.10)) !important;
  color: var(--ln-grau) !important;
  font-weight: 400 !important;
}
.fi-sidebar-item-active .fi-sidebar-item-icon {
  color: var(--ln-gelb) !important;
}

/* ── Topbar ───────────────────────────────────────────────────────── */
.fi-topbar {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(53, 74, 84, 0.08) !important;
}

/* ── Cards / Sections ─────────────────────────────────────────────── */
.fi-section, .fi-wi {
  background: white !important;
  border: 1px solid rgba(53, 74, 84, 0.08) !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 22px rgba(15, 23, 42, 0.04) !important;
}

.fi-section-header {
  border-bottom: 1px solid rgba(53, 74, 84, 0.06) !important;
  padding: 1.25rem 1.5rem !important;
}

/* ── Tabellen ─────────────────────────────────────────────────────── */
.fi-ta {
  border-radius: 1.25rem !important;
  border: 1px solid rgba(53, 74, 84, 0.08);
  /* overflow:clip würde Action-Dropdowns (Edit/Delete-Menü) abschneiden.
     overflow:visible lässt sie aus der Tabelle herausragen. */
  overflow: visible;
}
/* Sicherstellen, dass die Tabelle horizontal scrollen kann, wenn der Inhalt breiter ist */
.fi-ta-content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.fi-ta-table {
  min-width: 100%;
}
.fi-ta-table thead {
  background: rgba(251, 250, 246, 0.6) !important;
}
.fi-ta-header-cell {
  font-weight: 500 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ln-grau-soft) !important;
  white-space: nowrap;
}
/* Letzte Spalte (Aktionen) leicht abrücken, damit Buttons nicht am Rand kleben */
.fi-ta-actions-cell, .fi-ta-cell:last-child {
  padding-right: 1rem !important;
}
.fi-ta-row {
  border-color: rgba(53, 74, 84, 0.06) !important;
  transition: background 0.2s;
}
.fi-ta-row:hover {
  background: rgba(255, 171, 55, 0.04) !important;
}
.fi-ta-text {
  font-weight: 300 !important;
  color: var(--ln-grau);
}
.fi-ta-text-item-label,
.fi-ta-text strong {
  font-weight: 400 !important;
  color: var(--ln-grau) !important;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.fi-btn {
  font-weight: 400 !important;
  border-radius: 9999px !important;
  letter-spacing: 0;
  transition: all 0.2s ease;
}
.fi-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.10) !important;
}

/* Primary-Buttons (Header-Actions wie "New Mitglied"): Marken-Grün, weißer Text */
.fi-btn-color-primary {
  background-color: var(--ln-gruen) !important;
  color: white !important;
  border: none !important;
}
.fi-btn-color-primary > *,
.fi-btn-color-primary span,
.fi-btn-color-primary svg {
  color: white !important;
}
.fi-btn-color-primary:hover {
  background-color: rgba(155, 162, 83, 0.92) !important;
}

/* Inline-Actions in Tabellen (Edit/Delete) als kleine ghost-Links */
.fi-ta-actions a.fi-btn,
.fi-ta-actions button.fi-btn {
  background: transparent !important;
  border: none !important;
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  padding: 0.3rem 0.5rem !important;
}
.fi-ta-actions a.fi-btn:hover,
.fi-ta-actions button.fi-btn:hover {
  background: rgba(255, 171, 55, 0.10) !important;
}

/* Danger-Action „Delete" als roter Text-Link */
.fi-ta-actions .fi-btn-color-danger {
  color: #b91c1c !important;
  background: transparent !important;
}
.fi-ta-actions .fi-btn-color-danger > *,
.fi-ta-actions .fi-btn-color-danger svg { color: #b91c1c !important; }
.fi-ta-actions .fi-btn-color-danger:hover {
  background: rgba(185, 28, 28, 0.06) !important;
}

/* Edit-Action grün */
.fi-ta-actions a.fi-btn:not(.fi-btn-color-danger) {
  color: var(--ln-gruen) !important;
}
.fi-ta-actions a.fi-btn:not(.fi-btn-color-danger) svg {
  color: var(--ln-gruen) !important;
}

/* ── Form-Inputs ──────────────────────────────────────────────────── */
.fi-input, .fi-input-wrp,
.fi-fo-text-input input,
.fi-fo-textarea textarea,
.fi-fo-select select,
.fi-select input {
  border-radius: 0.75rem !important;
  border-color: rgba(53, 74, 84, 0.12) !important;
  font-weight: 300 !important;
}
.fi-input:focus,
.fi-input-wrp:focus-within {
  border-color: var(--ln-gruen) !important;
  box-shadow: 0 0 0 3px rgba(155, 162, 83, 0.18) !important;
}

.fi-fo-field-wrp-label, .fi-fo-field-label {
  font-size: 0.82rem !important;
  /* Label klar als Strukturelement, nicht als Value: medium-weight ist zu nah am
     Eingabewert (Inter-400). 500 mit voll-Anthrazit hebt Labels eindeutig ab. */
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  /* Volles Marken-Anthrazit (--ln-grau) statt -soft: Label/Value-Hierarchie
     wird damit unmissverständlich. Validation-Errors bleiben rot, beißen sich
     nicht — Hierarchie statt Farbe. */
  color: var(--ln-grau) !important;
}

/* ── Pills / Badges ───────────────────────────────────────────────── */
.fi-badge {
  border-radius: 9999px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  padding: 0.15rem 0.65rem !important;
}
/* Marken-Color-Mapping: weicher Hintergrund + dunkler Text statt weiß-auf-mittel */
.fi-badge.fi-color-success,
.fi-badge.fi-color-primary {
  background: rgba(155, 162, 83, 0.15) !important;
  color: #5a6028 !important;
  ring: 1px solid rgba(155, 162, 83, 0.3) !important;
}
.fi-badge.fi-color-warning {
  background: rgba(255, 171, 55, 0.18) !important;
  color: #8a4d00 !important;
}
.fi-badge.fi-color-info {
  background: rgba(124, 149, 169, 0.15) !important;
  color: #3a4f5d !important;
}
.fi-badge.fi-color-gray {
  background: rgba(93, 118, 130, 0.10) !important;
  color: var(--ln-grau) !important;
}
.fi-badge.fi-color-danger {
  background: rgba(185, 28, 28, 0.10) !important;
  color: #b91c1c !important;
}

/* ── Dashboard-Welcome-Widget heller ──────────────────────────────── */
.fi-account-widget {
  background: linear-gradient(135deg, rgba(255, 171, 55, 0.08), rgba(155, 162, 83, 0.05)) !important;
  border: 1px solid rgba(255, 171, 55, 0.15) !important;
  border-radius: 1.25rem !important;
}

/* ── Logo-Bereich: kompakter, mit Punkte-Cluster ──────────────────── */
.fi-logo {
  font-weight: 300 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.015em !important;
  color: var(--ln-grau) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.fi-logo::before {
  content: '';
  display: inline-block;
  width: 28px; height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23ffab37'><circle cx='50' cy='10' r='3.5'/><circle cx='62' cy='14' r='3'/><circle cx='38' cy='14' r='3'/><circle cx='72' cy='22' r='3.5'/><circle cx='28' cy='22' r='3.5'/><circle cx='80' cy='34' r='3'/><circle cx='20' cy='34' r='3'/></g><g fill='%239ba253'><circle cx='50' cy='30' r='3'/><circle cx='35' cy='35' r='3.5'/><circle cx='65' cy='35' r='3.5'/><circle cx='25' cy='48' r='3'/><circle cx='75' cy='48' r='3'/></g><g fill='%237c95a9'><circle cx='50' cy='50' r='3.5'/><circle cx='40' cy='55' r='3'/><circle cx='60' cy='55' r='3'/><circle cx='30' cy='65' r='3'/><circle cx='70' cy='65' r='3'/><circle cx='50' cy='70' r='3.5'/><circle cx='40' cy='78' r='3'/><circle cx='60' cy='78' r='3'/><circle cx='50' cy='88' r='3'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── User-Avatar oben rechts: Marken-Verlauf ──────────────────────── */
.fi-avatar,
.fi-user-avatar {
  background: linear-gradient(135deg, var(--ln-gelb), var(--ln-gruen)) !important;
  color: white !important;
  font-weight: 400 !important;
}

/* ── Notification: weicher ────────────────────────────────────────── */
.fi-no-notification {
  border-radius: 1rem !important;
  border-color: rgba(53, 74, 84, 0.08) !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.10);
}

/* ── Modal-Schatten & Border-Radius ───────────────────────────────── */
.fi-modal-window {
  border-radius: 1.25rem !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
}

/* ── Dashboard-Heading / Page-Heading: dezenter ────────────────────── */
.fi-page-heading-text {
  font-weight: 300 !important;
  font-size: 2.25rem !important;
  letter-spacing: -0.025em;
  color: var(--ln-grau) !important;
}

/* ── Welcome-Widget sign-out button ───────────────────────────────── */
.fi-account-widget .fi-btn {
  background: white !important;
  color: var(--ln-grau) !important;
  border: 1px solid rgba(53, 74, 84, 0.12);
}

/* ── Filament-Default-Background des Inhalts: cremiger Tone ───────── */
.fi-main {
  background: transparent !important;
}

/* ── Subtle: Linkfarbe in Tabellen auf ln-gruen ───────────────────── */
.fi-link, a.fi-link {
  color: var(--ln-gruen) !important;
}
.fi-link:hover {
  color: var(--ln-gelb) !important;
}

/* ── Footer (Filament-Footer falls vorhanden) ──────────────────────── */
.fi-footer {
  font-weight: 300;
  color: var(--ln-grau-soft);
}