/* ═══════════════════════════════════════════════════════════════
   K1NX System Dashboard — DARK GLASS MAKEOVER
   Geladen NACH style.css → überschreibt per Cascade.
   Modernes, glasiges Dark-UI (Glassmorphism + Glow-Akzente).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS (dark) ─────────────────────────────────── */
:root {
  /* Surfaces */
  --main-bg:      #07070C;
  --sidebar-bg:   #0A0A12;
  --card-bg:      rgba(255,255,255,0.035);
  --card-bg-2:    rgba(255,255,255,0.05);
  --card-border:  rgba(255,255,255,0.09);
  --card-shadow:       0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 30px rgba(0,0,0,0.45);
  --card-shadow-hover: 0 1px 0 rgba(255,255,255,0.06) inset, 0 14px 44px rgba(0,0,0,0.6);

  /* Text */
  --text-primary:   #F3F4FA;
  --text-secondary: #A9ABC4;
  --text-muted:     #6E7194;

  /* Brand / accents */
  --orange: #FF7A45;
  --pink:   #F72585;
  --purple: #8B5CF6;
  --blue:   #4F8CFF;
  --cyan:   #22D3EE;
  --green:  #34D399;
  --red:    #FB6B6B;
  --yellow: #FBBF24;
  --gradient: linear-gradient(135deg, #FF7A45 0%, #F72585 100%);
  --gradient-cool: linear-gradient(135deg, #4F8CFF 0%, #8B5CF6 100%);

  /* Misc */
  --bg:     #07070C;
  --border: rgba(255,255,255,0.09);
  --text:   #F3F4FA;
  --radius:    14px;
  --radius-lg: 20px;
  --glass-blur: blur(22px) saturate(140%);
}

/* ── 2. BACKDROP ─────────────────────────────────────────────── */
html, body { background: var(--main-bg); color: var(--text-primary); }

body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 600px at 12% -8%,  rgba(255,122,69,0.16) 0%, transparent 55%),
    radial-gradient(900px 700px at 100% 0%,  rgba(139,92,246,0.18) 0%, transparent 55%),
    radial-gradient(1000px 800px at 80% 110%, rgba(79,140,255,0.14) 0%, transparent 55%),
    radial-gradient(700px 600px at 0% 100%,  rgba(247,37,133,0.10) 0%, transparent 55%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 75%);
}

.main { background: transparent !important; }
.app  { background: transparent; }

/* ── 3. SIDEBAR ──────────────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, rgba(16,16,26,0.92), rgba(8,8,14,0.92));
  border-right: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.sidebar-logo, .sidebar-footer { border-color: rgba(255,255,255,0.06); }
.nav-item { color: rgba(255,255,255,0.5); border-radius: 11px; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.active {
  background: linear-gradient(135deg, rgba(255,122,69,0.22), rgba(247,37,133,0.18));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,122,69,0.3) inset, 0 6px 18px rgba(247,37,133,0.18);
}
.nav-item.active::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 3px; background: var(--gradient);
  box-shadow: 0 0 12px rgba(255,122,69,0.8);
}

/* ── 4. CARDS (glass) ────────────────────────────────────────── */
.stat-card, .card, .panel, .data-card, .info-card, .widget,
.goal-main, .goal-founder, .chart-card, .list-card, .section-card,
.customer-card, .tool-card, .project-card, .todo-card, .kpi-card,
.detail-card, .mini-card, .box, .glass {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--card-shadow) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.stat-card:hover, .card:hover, .customer-card:hover, .tool-card:hover,
.project-card:hover, .kpi-card:hover {
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-2px);
}

/* Stat-Karten: Akzentstreifen → weicher Glow oben */
.stat-card { overflow: hidden; }
.stat-card::after { height: 2px !important; opacity: 0.9; filter: blur(0.3px); }
.stat-card.orange::after { background: var(--orange) !important; box-shadow: 0 0 18px var(--orange); }
.stat-card.pink::after   { background: var(--pink)   !important; box-shadow: 0 0 18px var(--pink); }
.stat-card.purple::after { background: var(--purple) !important; box-shadow: 0 0 18px var(--purple); }
.stat-card.green::after  { background: var(--green)  !important; box-shadow: 0 0 18px var(--green); }
.stat-card.red::after    { background: var(--red)    !important; box-shadow: 0 0 18px var(--red); }
.stat-card.blue::after   { background: var(--blue)   !important; box-shadow: 0 0 18px var(--blue); }

.stat-value { color: var(--text-primary); }
.stat-label { color: var(--text-muted); }

.stat-icon         { border-radius: 12px; }
.stat-icon.orange  { background: rgba(255,122,69,0.14); color: var(--orange); box-shadow: 0 0 24px rgba(255,122,69,0.12) inset; }
.stat-icon.pink    { background: rgba(247,37,133,0.14); color: var(--pink);   box-shadow: 0 0 24px rgba(247,37,133,0.12) inset; }
.stat-icon.purple  { background: rgba(139,92,246,0.16); color: var(--purple); box-shadow: 0 0 24px rgba(139,92,246,0.12) inset; }
.stat-icon.green   { background: rgba(52,211,153,0.16); color: var(--green);  box-shadow: 0 0 24px rgba(52,211,153,0.12) inset; }
.stat-icon.red     { background: rgba(251,107,107,0.16); color: var(--red);   box-shadow: 0 0 24px rgba(251,107,107,0.12) inset; }
.stat-icon.blue    { background: rgba(79,140,255,0.16); color: var(--blue);   box-shadow: 0 0 24px rgba(79,140,255,0.12) inset; }

/* ── 5. GOAL BANNER ──────────────────────────────────────────── */
.goal-banner {
  background: linear-gradient(135deg, rgba(255,122,69,0.10), rgba(139,92,246,0.10)) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--card-shadow) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.goal-bar-wrap { background: rgba(255,255,255,0.08) !important; border-radius: 999px; overflow: hidden; }
.goal-bar {
  background: var(--gradient) !important;
  box-shadow: 0 0 18px rgba(247,37,133,0.5);
  border-radius: 999px;
}
.goal-title  { color: var(--text-primary); }
.goal-label, .goal-meta, .founder-sub, .founder-label { color: var(--text-secondary); }
.goal-amount, .founder-value { color: var(--text-primary); }
.goal-total, .founder-total, .goal-sep { color: var(--text-muted); }

/* ── 6. PAGE HEADER / TYPO ───────────────────────────────────── */
.page-title    { color: var(--text-primary); }
.page-subtitle { color: var(--text-secondary); }
h1,h2,h3,h4,h5 { color: var(--text-primary); }
.gradient-text {
  background: var(--gradient); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── 7. ROWS / LISTS / TABLES ────────────────────────────────── */
.site-row, .list-row, .row, .lead-row, .inbox-row {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.site-row:hover, .list-row:hover, .lead-row:hover { background: rgba(255,255,255,0.05); }
.site-name, .site-time { color: var(--text-secondary); }
.site-url { color: var(--blue); }

table { color: var(--text-secondary); }
th { color: var(--text-muted) !important; border-color: rgba(255,255,255,0.08) !important; }
td { border-color: rgba(255,255,255,0.06) !important; color: var(--text-secondary); }
tr:hover td { background: rgba(255,255,255,0.03); }

/* ── 8. BADGES / PILLS ───────────────────────────────────────── */
.badge {
  border: 1px solid transparent;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.badge-aktiv, .badge-done, .badge-online {
  background: rgba(52,211,153,0.14) !important; color: var(--green) !important;
  border-color: rgba(52,211,153,0.28) !important;
}
.badge-pause, .badge-in-progress, .badge-offen, .badge-open {
  background: rgba(251,191,36,0.14) !important; color: var(--yellow) !important;
  border-color: rgba(251,191,36,0.28) !important;
}
.badge-inaktiv, .badge-blocked, .badge-offline {
  background: rgba(251,107,107,0.14) !important; color: var(--red) !important;
  border-color: rgba(251,107,107,0.28) !important;
}
.badge-starter      { background: rgba(79,140,255,0.14)  !important; color: var(--blue)   !important; border-color: rgba(79,140,255,0.28)  !important; }
.badge-professional { background: rgba(139,92,246,0.14)  !important; color: var(--purple) !important; border-color: rgba(139,92,246,0.28)  !important; }
.badge-business     { background: rgba(247,37,133,0.14)  !important; color: var(--pink)   !important; border-color: rgba(247,37,133,0.28)  !important; }

/* ── 9. FORMS / BUTTONS ──────────────────────────────────────── */
input, textarea, select {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
input:focus, textarea:focus, select:focus {
  border-color: rgba(255,122,69,0.6) !important;
  box-shadow: 0 0 0 3px rgba(255,122,69,0.12) !important;
  outline: none;
}
.btn-primary, button.primary, .btn.primary {
  background: var(--gradient) !important; border: none !important; color: #fff !important;
  box-shadow: 0 8px 24px rgba(247,37,133,0.28);
}
.btn-primary:hover { box-shadow: 0 10px 30px rgba(247,37,133,0.4); }
.btn-secondary, .btn-ghost, button.secondary {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--text-primary) !important;
}
.btn-secondary:hover { background: rgba(255,255,255,0.1) !important; }

/* ── 10. ALERT BANNER (war hell) ─────────────────────────────── */
.alert-banner {
  background: rgba(251,107,107,0.12) !important;
  border-bottom: 1px solid rgba(251,107,107,0.3) !important;
  color: #FFB4B4 !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.alert-banner svg { color: var(--red) !important; }
.alert-link { color: #FFD0D0 !important; }

/* ── 11. MOBILE HEADER / OVERLAY ─────────────────────────────── */
.mobile-header {
  background: rgba(10,10,18,0.85) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.hamburger span { background: var(--text-primary) !important; }
.sidebar-overlay { background: rgba(0,0,0,0.6) !important; backdrop-filter: blur(4px); }

/* ── 12. MISC ────────────────────────────────────────────────── */
.status-dot.green  { box-shadow: 0 0 10px var(--green); }
.status-dot.red    { box-shadow: 0 0 10px var(--red); }
.status-dot.yellow { box-shadow: 0 0 10px var(--yellow); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); background-clip: content-box; }

hr, .divider { border-color: rgba(255,255,255,0.08) !important; }
a { color: var(--blue); }

/* Refresh-Indikator (vom JS gesetzt) */
.refresh-pulse { animation: k1nxPulse 1s ease; }
@keyframes k1nxPulse { 0%{opacity:0.4} 100%{opacity:1} }

/* ═══════════════════════════════════════════════════════════════
   13. HARDCODED-HELL-FIXES  (Reste, die fix helle Farben hatten)
   ═══════════════════════════════════════════════════════════════ */

/* Tabellen */
thead th {
  background: rgba(255,255,255,0.03) !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
tbody tr      { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
tbody tr:hover, tbody td { color: var(--text-primary); }
tbody tr:hover            { background: rgba(255,255,255,0.04) !important; }
.kunden-row:hover td      { background: rgba(255,255,255,0.05) !important; }
.kunden-row td:first-child{ color: var(--orange); }

/* Zeilen-Trenner überall, die fix #F0F0F8 waren */
.site-row, .finance-row, .todo-item, .timeline-entry { border-bottom-color: rgba(255,255,255,0.06) !important; }
.finance-total-row { background: rgba(255,255,255,0.03) !important; border-top-color: rgba(255,255,255,0.08) !important; }

/* Selects / Inputs, die fix weiß/hell waren */
.preset-select, select { background: rgba(255,255,255,0.05) !important; color: var(--text-primary) !important; }
.preset-select option, select option { background: #14141F; color: var(--text-primary); }

/* Innen-Boxen (CRM/Finanzen) die var(--main-bg) nutzen → leicht abheben */
.crm-section, .crm-cost-item, .crm-margin-cell, .pnl-cell,
.timeline-add-form, .crm-notes-area, .crm-todo-add {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.pnl-grid, .crm-margin-bar { background: rgba(255,255,255,0.08) !important; }

/* Modals: solider als die Glas-Cards (Lesbarkeit über Overlay) */
.modal, .crm-modal, .quote-modal {
  background: #11111B !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
}
.crm-header { background: #11111B !important; }
.modal-overlay, .crm-overlay, .quote-overlay { background: rgba(0,0,0,0.6) !important; backdrop-filter: blur(6px) !important; }

/* Weitere Cards, die nicht im Haupt-Block standen */
.api-card, .inbox-item, .quote-card, .campaign-row, .instantly-reply,
.review-item, .invoice-item, .quote-item, .warmup-row, .pnl-card,
.activity-item, .api-key-banner, .outscraper-status, .crm-todo-item {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
}
.api-card { border-radius: var(--radius) !important; }

/* Restliche Badges (waren dunkle Hex auf hell gedacht) */
.badge-neu         { background: rgba(79,140,255,0.14)  !important; color: var(--blue)   !important; }
.badge-kontaktiert { background: rgba(251,191,36,0.14)  !important; color: var(--yellow) !important; }
.badge-angebot     { background: rgba(139,92,246,0.14)  !important; color: var(--purple) !important; }
.badge-gewonnen    { background: rgba(52,211,153,0.14)  !important; color: var(--green)  !important; }
.badge-verloren    { background: rgba(148,163,184,0.16) !important; color: #9AA3B8       !important; }
.priority-low      { color: #9AA3B8 !important; }

/* Status-Pills (Quotes/Pipeline) */
.status-OFFEN,            .status-pill.OFFEN            { background: rgba(79,140,255,0.14)  !important; color: var(--blue)   !important; }
.status-IN_BEARBEITUNG,   .status-pill.IN_BEARBEITUNG   { background: rgba(251,191,36,0.14)  !important; color: var(--yellow) !important; }
.status-ANGEBOT_VERSENDET,.status-pill.ANGEBOT_VERSENDET{ background: rgba(139,92,246,0.14)  !important; color: var(--purple) !important; }
.status-GEWONNEN,         .status-pill.GEWONNEN         { background: rgba(52,211,153,0.14)  !important; color: var(--green)  !important; }
.status-VERLOREN,         .status-pill.VERLOREN         { background: rgba(148,163,184,0.16) !important; color: #9AA3B8       !important; }

/* Inhalts-Texte in unbekannten Sub-Komponenten lesbar halten */
.inbox-name, .quote-num, .invoice-num, .campaign-name, .api-card-value,
.api-card-name, .review-author, .crm-todo-task, .activity-text {
  color: var(--text-primary);
}
.inbox-phone, .inbox-date, .quote-date, .review-date, .api-card-sub,
.api-card-meta, .campaign-metric-label, .activity-meta {
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   14. DETAIL-ANSICHTEN  (Rechnungen / Angebote / Spezial / Instantly)
       — alle restlichen weiß/hellen Innenflächen auf Dark-Glass.
   ═══════════════════════════════════════════════════════════════ */

/* Rechnungen + Angebote (CRM-Listen & Editor) */
.crm-invoices-list, .crm-quotes-list,
.invoice-row, .invoice-item, .invoice-items, .invoice-total-row, .invoice-totals,
.quote-row, .quote-item, .quote-items, .quote-item-row,
.qm-grid, .qm-status-select, .qm-action-btn {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--text-primary);
}
.qm-action-btn.primary { background: var(--gradient) !important; color:#fff !important; border-color: transparent !important; }
.qm-pain {
  background: rgba(255,122,69,0.10) !important;
  border-left: 3px solid var(--orange) !important;
  color: var(--text-primary) !important;
}
.invoice-status.entwurf, .quote-status.entwurf,
.invoice-status.draft, .quote-status.draft {
  background: rgba(148,163,184,0.16) !important; color: #9AA3B8 !important;
}
.invoice-status.bezahlt, .quote-status.angenommen, .quote-status.bezahlt {
  background: rgba(52,211,153,0.16) !important; color: var(--green) !important;
}
.invoice-status.versendet, .quote-status.versendet {
  background: rgba(79,140,255,0.16) !important; color: var(--blue) !important;
}
.quote-status.abgelehnt, .quote-status.abgelaufen {
  background: rgba(251,107,107,0.16) !important; color: var(--red) !important;
}

/* Quote-Liste (Sidebar-Section) */
.quote-card { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; }
.quote-card:hover { background: rgba(255,255,255,0.06) !important; }
.quote-firma, .quote-contact { color: var(--text-primary); }

/* Spezial-Sections (Brigitte: Site / GBP / IG) */
.special-section, .special-cell, .special-info, .special-form-grid,
.special-ig-item, .special-ig-list, .special-section-head, .recent-reviews,
.review-item, .review-head {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.special-cell-value, .special-ig-handle, .review-author, .review-text { color: var(--text-primary); }
.special-cell-label, .special-cell-sub, .review-date { color: var(--text-muted); }

/* Modal-Form-Grid (Kunde anlegen / Rechnung) */
.modal-form-grid { background: transparent !important; }

/* Instantly: Kampagnen-Status + Warmup-Bars */
.campaign-status.active  { background: rgba(52,211,153,0.16) !important; color: var(--green)  !important; }
.campaign-status.paused  { background: rgba(251,191,36,0.16) !important; color: var(--yellow) !important; }
.campaign-status.draft   { background: rgba(255,255,255,0.08) !important; color: var(--text-secondary) !important; }
.campaign-status.stopped { background: rgba(251,107,107,0.16) !important; color: var(--red)   !important; }
.campaign-row:hover      { background: rgba(255,255,255,0.04) !important; }
.warmup-score-bar        { background: rgba(255,255,255,0.08) !important; }

/* Recent-Review-Container falls fix weiß */
.review-stars { color: var(--yellow); }

/* Sicherheits-Netz: Inhalts-Wrapper, die evtl. noch hell sind */
.qm-val, .qm-label, .invoice-amount, .quote-amount, .invoice-num, .quote-num { color: var(--text-primary); }
.qm-sub, .quote-item-hint { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   15. FEINSCHLIFF  (CRM-Tabs + schwarze Hover-Tints auf Dunkel)
   ═══════════════════════════════════════════════════════════════ */
.crm-tabs { background: rgba(255,255,255,0.02) !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
.crm-tab.active { color: var(--orange); border-bottom-color: var(--orange); }
.crm-tab-count { background: rgba(255,255,255,0.08) !important; color: var(--text-secondary) !important; }
.crm-tab.active .crm-tab-count { background: rgba(255,122,69,0.2) !important; color: var(--orange) !important; }

/* schwarze Hover-/Fill-Tints → hell, damit auf Dunkel sichtbar */
.invoice-action:hover, .quote-action:hover, .quote-close:hover,
.btn-row-action:hover, .crm-close:hover, .modal-close:hover,
.crm-action-btn:hover { background: rgba(255,255,255,0.08) !important; color: var(--text-primary); }

/* Status „OFFEN" bleibt als Signal rötlich (Aufmerksamkeit) */
.status-OFFEN, .status-pill.OFFEN { background: rgba(251,107,107,0.16) !important; color: var(--red) !important; }

/* Quote-Card Hover sauber auf Dunkel */
.quote-card:hover { border-color: rgba(255,122,69,0.5) !important; box-shadow: 0 6px 20px rgba(255,122,69,0.12) !important; }
.qm-tag { background: rgba(255,122,69,0.14) !important; color: var(--orange) !important; }
.special-info { background: linear-gradient(135deg, rgba(255,122,69,0.10), rgba(247,37,133,0.06)) !important; border-color: rgba(255,122,69,0.2) !important; }
.api-key-banner { background: rgba(251,191,36,0.10) !important; border-color: rgba(251,191,36,0.3) !important; }