/* ============================================================
   KlausFinanz — Thème premium (kf.css)
   Surcharge le design des pages client (konto / kredit / dokumente /
   nachrichten / profil / login) sans modifier la logique JS.
   À charger APRÈS css/style.css et css/konto.css.
   ============================================================ */

:root{
  --kf-bg:#f3f6ee;
  --kf-bg-2:#eef2e6;
  --kf-surface:#ffffff;
  --kf-surface-2:#f6f9f0;
  --kf-ink:#0e2006;
  --kf-ink-2:#173307;
  --kf-text:#333c2c;
  --kf-muted:#6d7863;
  --kf-line:#e6ebda;
  --kf-line-2:#eef2e4;
  --kf-lime:#a6ec6d;
  --kf-lime-strong:#82d24b;
  --kf-lime-soft:#edfbdc;
  --kf-lime-ink:#0f2e05;
  --kf-blue:#3b82f6; --kf-blue-soft:#e8f0fe;
  --kf-amber:#f2a03d; --kf-amber-soft:#fdf1e0;
  --kf-ok:#2f8f4e;
  --kf-warn:#b8860b;
  --kf-danger:#e05252;
  --kf-grad-side:linear-gradient(185deg,#0d1c06 0%,#11260a 45%,#16330d 100%);
  --kf-grad-hero:linear-gradient(135deg,#132a08 0%,#0b1804 60%,#1a3d0e 100%);
  --kf-sh-1:0 1px 2px rgba(16,36,8,.05);
  --kf-sh-2:0 12px 26px -16px rgba(16,36,8,.28);
  --kf-sh-3:0 30px 60px -30px rgba(16,36,8,.40);
  --kf-ease:cubic-bezier(.22,.72,.28,1);
}

body{ background:var(--kf-bg) !important; color:var(--kf-text); }
body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(46rem 30rem at 12% -8%,rgba(166,236,109,.16),transparent 60%),
             radial-gradient(40rem 26rem at 100% 0%,rgba(59,130,246,.06),transparent 60%); }

/* ---------------- boutons ---------------- */
.btn{ display:inline-flex !important; align-items:center; justify-content:center; gap:9px;
  border:1px solid transparent !important; border-radius:999px !important; padding:12px 22px !important;
  font-weight:700 !important; font-size:14px !important; background:var(--kf-ink-2) !important; color:#fff !important;
  cursor:pointer; transition:transform .24s var(--kf-ease),box-shadow .24s var(--kf-ease),filter .24s var(--kf-ease) !important; }
.btn:hover{ transform:translateY(-1.5px); box-shadow:var(--kf-sh-2); }
.btn:active{ transform:translateY(0) scale(.99); }
.btn-dark, .btn.lime{ background:linear-gradient(135deg,var(--kf-lime),var(--kf-lime-strong)) !important; color:var(--kf-lime-ink) !important; box-shadow:0 16px 34px -16px rgba(130,210,75,.55) !important; }
.btn-lg{ padding:14px 26px !important; font-size:15px !important; }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  background:#fff; border:1px solid var(--kf-line); color:var(--kf-text); cursor:pointer;
  transition:color .24s,border-color .24s,transform .24s,box-shadow .24s; }
.icon-btn:hover{ color:var(--kf-ink-2); border-color:var(--kf-lime-strong); transform:translateY(-1.5px); box-shadow:var(--kf-sh-2); }

/* ---------------- sidebar ---------------- */
.side{ background:var(--kf-grad-side) !important; border-right:1px solid rgba(255,255,255,.06) !important; }
.side .brand{ color:#fff !important; letter-spacing:-.02em; }
.side .brand svg{ border-radius:11px; box-shadow:0 16px 34px -16px rgba(130,210,75,.55); }
.side nav a{ color:#b9cfa8 !important; position:relative; border-radius:13px !important; }
.side nav a svg{ stroke:currentColor; }
.side nav a:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; transform:translateX(3px); }
.side nav a.active{ background:linear-gradient(135deg,rgba(166,236,109,.22),rgba(166,236,109,.05)) !important; color:#fff !important; }
.side nav a.active::before{ content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:4px; height:22px; border-radius:0 6px 6px 0; background:var(--kf-lime); box-shadow:0 0 14px var(--kf-lime); }
.side .advisor{ background:linear-gradient(160deg,rgba(166,236,109,.14),rgba(255,255,255,.03)) !important;
  border:1px solid rgba(255,255,255,.08) !important; border-radius:16px !important; }
.side .advisor .who b{ color:#fff !important; }
.side .advisor .who span{ color:#a9c398 !important; }
.side .advisor .av{ background:var(--kf-lime) !important; color:var(--kf-lime-ink) !important; }
.side .advisor a{ background:rgba(255,255,255,.1) !important; color:#fff !important; border:1px solid rgba(255,255,255,.14) !important; }
.side .advisor a:hover{ background:var(--kf-lime) !important; color:var(--kf-lime-ink) !important; border-color:transparent !important; }
.k-badge{ background:var(--kf-danger) !important; box-shadow:0 4px 10px -3px rgba(224,82,82,.6); }

/* ---------------- topbar ---------------- */
.topbar{ background:color-mix(in srgb,var(--kf-bg) 80%,transparent) !important;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--kf-line) !important; }
.topbar h1{ color:var(--kf-ink) !important; letter-spacing:-.03em; }
.topbar .hello{ color:var(--kf-muted) !important; }
.topbar .user .av{ background:linear-gradient(135deg,var(--kf-lime),var(--kf-lime-strong)) !important; color:var(--kf-lime-ink) !important; }
.topbar .user .logout{ background:#fff !important; border:1px solid var(--kf-line) !important; border-radius:999px !important; color:var(--kf-text) !important; }
.topbar .user .logout:hover{ color:var(--kf-danger) !important; border-color:var(--kf-danger) !important; }
.topbar .user #u-name{ color:var(--kf-ink) !important; }

/* ---------------- hero / bienvenue ---------------- */
.welcome{ background:var(--kf-grad-hero) !important; border-radius:24px !important; box-shadow:var(--kf-sh-3) !important;
  position:relative; overflow:hidden; }
.welcome::after{ content:""; position:absolute; width:460px; height:460px; right:-160px; top:-200px;
  background:radial-gradient(circle,rgba(166,236,109,.34),transparent 66%); animation:kfFloat 10s ease-in-out infinite; }
.welcome > *{ position:relative; z-index:1; }
.w-av{ background:linear-gradient(135deg,var(--kf-lime),var(--kf-lime-strong)) !important; color:var(--kf-lime-ink) !important; }
.pill{ background:var(--kf-lime) !important; color:var(--kf-lime-ink) !important; }
.ref-chip{ font-family:ui-monospace,Consolas,monospace !important; }
@keyframes kfFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(20px) } }

/* ---------------- cartes / KPI ---------------- */
.kpi,.panel{ background:var(--kf-surface) !important; border:1px solid var(--kf-line) !important;
  border-radius:22px !important; box-shadow:var(--kf-sh-1) !important; transition:transform .24s var(--kf-ease),box-shadow .24s var(--kf-ease),border-color .24s; }
.kpi:hover,.panel:hover{ transform:translateY(-3px); box-shadow:var(--kf-sh-2) !important; border-color:transparent !important; }
.kpi .k{ color:var(--kf-muted) !important; text-transform:uppercase; letter-spacing:.06em; font-size:12px !important; }
.kpi .v{ color:var(--kf-ink) !important; font-weight:800 !important; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.panel h2{ color:var(--kf-ink) !important; letter-spacing:-.02em; }
.psub{ color:var(--kf-muted) !important; }

/* icônes KPI (ajoutées au dashboard) */
.kpi{ display:flex; gap:15px; align-items:flex-start; }
.k-ic{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:none; }
.k-ic svg{ width:21px; height:21px; }
.k-ic.lime{ background:var(--kf-lime-soft); color:var(--kf-ok); }
.k-ic.blue{ background:var(--kf-blue-soft); color:var(--kf-blue); }
.k-ic.amber{ background:var(--kf-amber-soft); color:var(--kf-amber); }

/* ---------------- accès rapide ---------------- */
.qa{ border-radius:16px !important; border:1px solid var(--kf-line) !important; background:#fff !important;
  transition:transform .24s var(--kf-ease),box-shadow .24s,border-color .24s !important; }
.qa:hover{ border-color:var(--kf-lime-strong) !important; transform:translateY(-2px); box-shadow:var(--kf-sh-2) !important; }
.qi{ background:var(--kf-lime-soft) !important; color:var(--kf-ok) !important; border-radius:12px !important; }

/* ---------------- stepper (classes émises par konto.js) ---------------- */
.step .dot{ border-radius:13px !important; background:var(--kf-surface-2) !important; color:var(--kf-muted) !important; border:1.5px solid var(--kf-line) !important; }
.step .line{ background:var(--kf-line) !important; }
.step.done .dot{ background:linear-gradient(135deg,var(--kf-lime),var(--kf-lime-strong)) !important; color:var(--kf-lime-ink) !important; border-color:transparent !important; box-shadow:0 16px 34px -16px rgba(130,210,75,.55) !important; }
.step.done .line{ background:var(--kf-lime-strong) !important; }
.step.current .dot{ background:var(--kf-ink-2) !important; color:#fff !important; border-color:transparent !important; }
.step .st-t{ color:var(--kf-ink) !important; }
.step .st-d,.step .st-date{ color:var(--kf-muted) !important; }
.step .st-date{ background:var(--kf-surface-2); padding:2px 10px; border-radius:999px; display:inline-block; }

/* ---------------- listes / docs ---------------- */
.dl .li{ border-bottom:1px solid var(--kf-line-2) !important; }
.dl .li .v{ color:var(--kf-ink) !important; font-variant-numeric:tabular-nums; }
.doc{ border:1px solid var(--kf-line) !important; border-radius:16px !important; transition:border-color .24s,background .24s,transform .24s; }
.doc:hover{ border-color:var(--kf-lime-strong) !important; background:var(--kf-surface-2) !important; transform:translateX(3px); }
.doc .di{ background:var(--kf-lime-soft) !important; color:var(--kf-ok) !important; border-radius:12px !important; }
.doc .dn{ color:var(--kf-ink) !important; }
.tag.ok{ background:var(--kf-lime-soft) !important; color:var(--kf-ok) !important; }
.tag.wait{ background:var(--kf-amber-soft) !important; color:var(--kf-warn) !important; }
.doc-dl{ border-radius:999px !important; }
.req-list .ic{ background:var(--kf-lime-soft) !important; color:var(--kf-ok) !important; }

/* ---------------- progression remboursement ---------------- */
.rep{ background:var(--kf-surface-2) !important; border-radius:16px !important; }
.rep-bar{ background:#e6e9e2 !important; }
.rep-fill{ background:linear-gradient(90deg,var(--kf-lime),var(--kf-lime-strong)) !important; }

/* ---------------- messagerie ---------------- */
.msg.advisor .bubble{ background:var(--kf-surface-2) !important; color:var(--kf-ink) !important; border:1px solid var(--kf-line) !important; }
.msg.client .bubble{ background:linear-gradient(135deg,var(--kf-ink-2),#0d2405) !important; color:#fff !important; }
.msg-form textarea:focus{ border-color:var(--kf-lime-strong) !important; box-shadow:0 0 0 4px var(--kf-lime-soft) !important; }

/* ---------------- profil ---------------- */
.profile-head .big-av{ background:linear-gradient(135deg,var(--kf-lime),var(--kf-lime-strong)) !important; color:var(--kf-lime-ink) !important; border-radius:20px !important; }
.profile-head .big-name{ color:var(--kf-ink) !important; }
.prof-field{ background:var(--kf-surface-2) !important; border-radius:16px !important; }
.prof-field .pv{ color:var(--kf-ink) !important; }

/* ---------------- tableau échéancier ---------------- */
.sched thead th{ color:var(--kf-muted) !important; }
.sched tbody tr:hover{ background:var(--kf-surface-2) !important; }
.sched .more-row td{ background:var(--kf-surface-2) !important; }

/* ---------------- notice / kbd ---------------- */
.notice{ background:var(--kf-surface-2) !important; border-radius:14px !important; color:var(--kf-muted) !important; }
.kbd{ color:var(--kf-muted) !important; }

/* ---------------- toasts ---------------- */
.toasts .toast, .toast{ background:var(--kf-ink-2) !important; color:#fff !important; border-radius:14px !important; box-shadow:var(--kf-sh-3) !important; }

/* ---------------- Upload ---------------- */
.up-form input[type=file]{ background:var(--kf-surface-2) !important; border:1.5px dashed var(--kf-line) !important; border-radius:14px !important; }
.up-msg{ color:var(--kf-ink-2) !important; }

/* ============================================================
   CONNEXION (login.html)
   ============================================================ */
.auth-aside{ background:var(--kf-grad-hero) !important; }
.auth-aside .pts .ic{ background:var(--kf-lime) !important; color:var(--kf-lime-ink) !important; }
.auth-card h1{ color:var(--kf-ink) !important; }
.fieldset input{ border-radius:14px !important; }
.fieldset input:focus{ border-color:var(--kf-lime-strong) !important; box-shadow:0 0 0 4px var(--kf-lime-soft) !important; }
.auth-error{ border-radius:14px !important; }
.login-note{ background:var(--kf-lime-soft) !important; border:1px solid rgba(130,210,75,.35) !important; border-radius:14px !important; }
.auth-form .btn{ width:100%; }

/* ---------------- cartes + utilitaires (page Überweisung) ---------------- */
.card{ background:var(--kf-surface); border:1px solid var(--kf-line); border-radius:22px; padding:22px; box-shadow:var(--kf-sh-1); }
.card h2{ margin:0 0 4px; font-size:16.5px; color:var(--kf-ink); letter-spacing:-.02em; }
.card .sub{ margin:0 0 16px; font-size:13px; color:var(--kf-muted); }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.row{ display:flex; align-items:center; gap:12px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; background:var(--kf-surface-2); color:var(--kf-text); }
.chip .dot-i{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.chip.ok{ background:var(--kf-lime-soft); color:var(--kf-ok); }
.chip.warn{ background:var(--kf-amber-soft); color:var(--kf-warn); }
.tiny{ font-size:12px; }
.muted{ color:var(--kf-muted); }
.mono{ font-family:ui-monospace,Consolas,monospace; }

/* ---------------- hero (décorations) ---------------- */
.welcome{ position:relative; overflow:hidden; }
.welcome::after{ content:""; position:absolute; width:460px; height:460px; right:-160px; top:-200px;
  background:radial-gradient(circle,rgba(166,236,109,.34),transparent 66%); animation:kfFloat 10s ease-in-out infinite; }
.welcome::before{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px; -webkit-mask-image:radial-gradient(circle at 80% 20%,#000,transparent 70%); mask-image:radial-gradient(circle at 80% 20%,#000,transparent 70%); }
.welcome > *{ position:relative; z-index:1; }
@keyframes kfFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(20px) } }

/* ---------------- grille 2 colonnes ---------------- */
.grid-2{ display:grid; grid-template-columns:320px 1fr; gap:18px; }

/* ---------------- anneau de progression ---------------- */
.ring-wrap{ display:grid; place-items:center; text-align:center; }
.ring{ transform:rotate(-90deg); }
.ring .bg{ fill:none; stroke:var(--kf-line); stroke-width:10; }
.ring .fg{ fill:none; stroke:url(#kfRingGrad); stroke-width:10; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1.2s var(--kf-ease); }
.ring-stage{ position:relative; display:grid; place-items:center; margin:10px 0 8px; }
.ring-stage .ring-val{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:29px; font-weight:800; color:var(--kf-ink); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }

/* ---------------- graphique ---------------- */
.chart-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:6px; }
.legend{ display:flex; gap:16px; font-size:12.5px; color:var(--kf-muted); font-weight:600; }
.legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:middle; }
.chart svg{ width:100%; height:180px; }
.chart .area{ fill:url(#kfAreaGrad); opacity:0; animation:kfArea 1s var(--kf-ease) .2s forwards; }
.chart .line{ fill:none; stroke:var(--kf-lime-strong); stroke-width:3; stroke-linecap:round; stroke-dasharray:1400; stroke-dashoffset:1400; animation:kfDraw 1.4s var(--kf-ease) forwards; }
.chart .dotc{ fill:#fff; stroke:var(--kf-lime-strong); stroke-width:3; opacity:0; animation:kfArea .5s 1.3s forwards; }
@keyframes kfDraw{ to{ stroke-dashoffset:0 } }
@keyframes kfArea{ to{ opacity:1 } }

@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .side nav a.active::before{ display:none; }

  /* empêche le débordement horizontal (menu + connexion coupés sur mobile) */
  .app{ grid-template-columns:1fr !important; min-width:0; overflow-x:hidden; }
  .side{ flex-wrap:wrap !important; min-width:0; }
  .side nav{ flex:1 1 100% !important; min-width:0; }
  .main{ min-width:0 !important; max-width:100%; overflow-x:hidden; }

  .welcome{ flex-wrap:wrap; }
  .welcome .w-side{ margin-left:0; align-items:flex-start; width:100%; }
  .welcome .ref-row{ flex-wrap:wrap; }

  .auth-main{ padding:28px 16px; }
  .auth-card{ min-width:0; }
  .auth-card .top{ flex-wrap:wrap; gap:10px; }

  .cards,.kpis{ grid-template-columns:1fr !important; }
  .dl{ grid-template-columns:1fr !important; }
}

/* ============================================================
   RAFFINEMENT PREMIUM « BANQUE » — appliqué en dernier
   ============================================================ */
:root{
  --kf-bg:#f3f6f0;
  --kf-surface:#ffffff;
  --kf-surface-2:#f7faf3;
  --kf-line:#e4ebda;
  --kf-line-2:#edf1e7;
  --kf-sh-1:0 1px 2px rgba(16,36,8,.04),0 6px 16px -12px rgba(16,36,8,.12);
  --kf-sh-2:0 22px 48px -26px rgba(16,36,8,.24),0 6px 18px -12px rgba(16,36,8,.08);
  --kf-sh-3:0 48px 96px -48px rgba(16,36,8,.36);
}
.kpi,.panel,.card{ border-radius:20px !important; box-shadow:var(--kf-sh-1) !important; }
.kpi{ padding:20px !important; }
.kpi .v{ font-size:30px !important; line-height:1.08; }
.kpi .k{ font-size:11.5px !important; letter-spacing:.08em; }
.panel{ padding:24px !important; }
.panel h2{ font-size:18px !important; font-weight:700 !important; letter-spacing:-.02em; }
.card{ padding:22px !important; }
.card h2{ font-size:17px !important; font-weight:700 !important; }
.topbar h1{ font-size:26px !important; }
.dl .li{ padding:13px 0 !important; }
.qa{ border-radius:16px !important; padding:15px 16px !important; }
.qa:hover{ box-shadow:var(--kf-sh-2) !important; }