/* ============================================================
   Lyzio — Preline-Skin (Design-Sprache aus Preline Pro, Tailwind-4-Töne)
   Wird NACH shared.css und den Inline-Styles geladen und überschreibt
   nur die Optik (Tokens + Komponenten). Entfernen = eine <link>-Zeile
   pro Seite löschen, alles ist reversibel.
   Referenz: preline-pro-templates, Theme "default/blue"
   (--primary: blue-600 #2563EB, hover blue-700 — identisch mit Lyzio).
   ============================================================ */

:root {
  /* ── Grautöne: Tailwind-Gray statt Slate ── */
  --surface:     #F9FAFB;   /* gray-50 */
  --surface-2:   #F3F4F6;   /* gray-100 */
  --fg:          #1F2937;   /* gray-800 — Preline-Fließtextfarbe */
  --fg-muted:    #4B5563;   /* gray-600 */
  --fg-subtle:   #6B7280;   /* gray-500 */
  --fg-faint:    #9CA3AF;   /* gray-400 */

  --border:        #E5E7EB; /* gray-200 — Preline-Standardkante */
  --border-strong: #D1D5DB; /* gray-300 */
  --border-faint:  #F3F4F6; /* gray-100 */

  /* ── Marke (unverändert Lyzio-Blau = Preline blue-600) ── */
  --primary:       #2563EB;
  --primary-hover: #1D4ED8;
  --primary-soft:  #EFF6FF; /* blue-50 — Preline nutzt Volltöne statt Alpha */
  --primary-ring:  rgba(37, 99, 235, 0.20);

  /* ── Semantik im Preline-Badge-Schema (-100 Fläche / -800 Text) ── */
  --success:      #166534;  /* green-800 */
  --success-soft: #DCFCE7;  /* green-100 */
  --warning:      #854D0E;  /* yellow-800 */
  --danger:       #DC2626;  /* red-600 */
  --danger-soft:  #FEE2E2;  /* red-100 */

  /* ── Typografie: Inter durchgängig (Preline-Look) ── */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ── Radien: rounded-lg (8px) für Controls, rounded-xl (12px) für Karten ── */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;

  /* ── Schatten: Preline shadow-2xs/xs — sehr zurückhaltend ── */
  --sh-sm:         0 1px 2px rgba(0, 0, 0, 0.05);
  --sh-card:       0 1px 2px rgba(0, 0, 0, 0.05);
  --sh-card-hover: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 16px -6px rgba(0, 0, 0, 0.10);
  --sh-pop:        0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}

/* ── Überschriften: Inter semibold, tracking-tight ── */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.display-1, .display-2 { font-weight: 700; letter-spacing: -0.03em; }
.dstat .n, .ci-price, .sum-row.total, .acct-av, .dash-av { font-family: var(--font-body); }

/* ── Buttons: py-2 px-3, text-sm, font-medium, rounded-lg ── */
.btn {
  min-height: 40px;
  padding: 0 14px;
  gap: 8px;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: 500;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: none; }
.btn-sm { min-height: 32px; padding: 0 10px; font-size: 0.8125rem; }
.btn-lg { min-height: 48px; padding: 0 20px; font-size: 0.9375rem; }

/* Primär: Vollton, kein Glow — überschreibt auch den TEMP-color-mix-Block */
.btn-primary,
.card:hover > .btn-primary,
.card-hover:hover .btn-primary,
.prod:hover .btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: none;
}
.btn-primary:hover { background: var(--primary-hover); box-shadow: none; }
.btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--primary-ring); }

/* Sekundär (.btn-ghost): weiße Fläche, graue Kante, shadow-2xs — Preline "secondary" */
.btn-ghost {
  background: #FFFFFF;
  color: var(--fg);
  border-color: var(--border);
  box-shadow: var(--sh-sm);
}
.btn-ghost:hover { background: var(--surface); color: var(--fg); border-color: var(--border); }

/* Soft: blue-50-Fläche, blauer Text — Preline "soft" */
.btn-soft { background: var(--primary-soft); color: var(--primary); }
.btn-soft:hover { background: #DBEAFE; color: var(--primary-hover); }

.btn-dark { background: #1F2937; }
.btn-dark:hover { background: #111827; }

/* ── Badges & Status: text-xs, medium, rounded-full, -100/-800-Schema ── */
.badge {
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  background: var(--surface-2);
  color: var(--fg);
  border-color: transparent;
}
.badge.primary { background: #DBEAFE; color: #1E40AF; }   /* blue-100 / blue-800 */
.badge.success { background: var(--success-soft); color: var(--success); }

.status { padding: 3px 10px; font-size: 0.75rem; font-weight: 500; }
.status.pending  { background: #FEF9C3; color: #854D0E; } /* yellow-100 / yellow-800 */
.status.offer    { background: #DBEAFE; color: #1E40AF; }
.status.done, .status.accepted, .status.paid { background: #DCFCE7; color: #166534; }
.status.declined { background: #FEE2E2; color: #991B1B; } /* red-100 / red-800 */

.chip { font-size: 0.875rem; border-color: var(--border); box-shadow: var(--sh-sm); }
.chip:hover { border-color: var(--border-strong); }

/* ── Karten: rounded-xl, gray-200, shadow-2xs ── */
.card { border-radius: var(--r-lg); box-shadow: var(--sh-card); }
@media (hover: hover) and (pointer: fine) {
  .card-hover:hover { transform: translateY(-2px); box-shadow: var(--sh-card-hover); border-color: var(--border-strong); }
}

.icon-tile { border-radius: var(--r-md); }

/* ── Formulare: text-sm, rounded-lg, ruhiger Fokusring ── */
.input, .select, .textarea {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 0.875rem;
  border-color: var(--border);
  border-radius: var(--r-md);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.field label { font-size: 0.875rem; font-weight: 500; }
.segrow .seg-opt { font-size: 0.875rem; border-color: var(--border); }

/* ── Tabellen: Preline-Kopf (text-xs, uppercase, gray-500) ── */
thead th {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fg-subtle) !important; /* schlägt brand-accents (thead th blau) */
}
.req-body table, table { font-size: 0.875rem; }

/* ── Navigation: text-sm, ruhige Hover-Flächen ── */
.nav-links a, .nav-dd-btn, .nav-dd-menu a { font-size: 0.875rem; }
.icon-btn { border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.nav-dd-menu { border-radius: var(--r-lg); box-shadow: var(--sh-pop); border-color: var(--border); }

/* ── Dashboards / Konto ── */
.dash-nav button { font-size: 0.875rem; }
.auth-tabs { border-radius: var(--r-md); }
.summary-card { border-radius: var(--r-lg); }

/* ── Feinschliff ── */
.toast { border-radius: var(--r-md); font-size: 0.875rem; box-shadow: var(--sh-pop); }
.dropzone { border-radius: var(--r-lg); border-color: var(--border-strong); }
:focus-visible { outline-width: 2px; }
::selection { background: #DBEAFE; }