/* FOLIO — jednotný vizuálny štýl (NÁVRH v2).
   Čierne pozadie, tmavé karty, každá sekcia má vlastnú farbu:
   príjmy = smaragdová, výdavky = korálová, majetok = fialová, záväzky = jantárová, značka = zlatá. */
:root {
  --bg: #07090c;
  --card: #0d1217;
  --card-2: #111820;
  --line: rgba(255, 255, 255, .06);
  --line-2: rgba(255, 255, 255, .10);
  --text: #ece7de;
  --mid: #8b9aa4;
  --muted: #55646e;
  --gold: #d4b26f;
  --c-prijmy: #34d399;
  --c-vydavky: #fb7185;
  --c-majetok: #a78bfa;
  --c-zavazky: #fbbf24;
  --teal: #2dd4aa;
  --danger: #fb7185;
  --radius: 18px;
}

body { background: var(--bg) !important; color: var(--text); }

/* ---------- horná lišta ---------- */
.topbar { background: rgba(7, 9, 12, .85) !important; backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) !important; }
.nav-btn { border-radius: 999px !important; border: 1px solid var(--line-2) !important; color: var(--mid) !important; font-weight: 500; }
.nav-btn:hover { color: var(--text) !important; border-color: var(--gold) !important; background: rgba(212, 178, 111, .06); }
.nav-btn.active { color: var(--bg) !important; background: var(--gold) !important; border-color: var(--gold) !important; }

/* ---------- nadpisy ---------- */
.page-head { margin: 8px 0 22px; }
.page-head .eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.page-head h1 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 34px; letter-spacing: -.01em; margin-top: 4px; }
.page-head p { color: var(--mid); font-size: 14px; margin-top: 4px; }

/* ---------- dashboard: hero + 4 karty ---------- */
.dashboard-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas: "hero hero" "prijmy vydavky" "majetok zavazky";
  gap: 16px !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.dashboard-wrap .circle-center {
  grid-area: hero;
  position: relative !important; top: auto !important; left: auto !important; transform: none !important;
  display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start;
  gap: 36px !important; padding: 28px 32px;
  background: radial-gradient(ellipse at 15% 50%, rgba(212, 178, 111, .10), transparent 60%), var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  pointer-events: auto !important;
}
.dashboard-wrap .circle-wrap { background: transparent !important; box-shadow: none !important; border-color: var(--line-2) !important; flex-shrink: 0; }
.dashboard-wrap .circle-stats { flex-direction: row !important; width: auto !important; flex: 1; gap: 12px !important; flex-wrap: wrap; }
.dashboard-wrap .cs-row {
  flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 6px;
  background: var(--card-2) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; padding: 16px 18px !important;
}
.dashboard-wrap .cs-label { font-size: 11px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--mid) !important; }
.dashboard-wrap .cs-val { font-family: 'Playfair Display', serif; font-size: 26px !important; font-weight: 400 !important; }
.dashboard-wrap .ci-label { letter-spacing: .18em; color: var(--gold) !important; }
.dashboard-wrap .ci-val { font-family: 'Playfair Display', serif; }

.quad {
  --c: var(--gold);
  position: relative; overflow: hidden;
  padding: 24px 26px !important;
  background: var(--card) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.quad::before { /* farebný pruh hore */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--c), transparent 85%);
}
.quad::after { /* jemná žiara v rohu */
  content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -120px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%);
}
.quad:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--c) 45%, transparent); }
.quad.prijmy { --c: var(--c-prijmy); grid-area: prijmy; }
.quad.vydavky { --c: var(--c-vydavky); grid-area: vydavky; }
.quad.majetok { --c: var(--c-majetok); grid-area: majetok; }
.quad.zavazky { --c: var(--c-zavazky); grid-area: zavazky; }

/* zruš zrkadlové (otočené) rozloženie pravých kariet */
.quad .quad-title, .quad .quad-row, .quad .quad-total { flex-direction: row !important; }
.quad-title {
  color: var(--c) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .14em !important;
  margin-bottom: 14px !important;
}
.quad-title svg { width: 30px; height: 30px; padding: 7px; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, transparent); }
.quad-title a { margin-left: auto !important; margin-right: 0 !important; color: var(--c) !important; }
.quad-divider { display: none; }
.quad-row { position: relative; font-size: 13px !important; padding: 9px 0 !important; border-bottom: 1px solid var(--line) !important; }
.quad-row > * { position: relative; z-index: 1; }
.quad-row .fx-bar { /* podiel položky na súčte — vykreslí folio_fx.js */
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; z-index: 0;
  background: var(--c); opacity: .55; border-radius: 2px; transition: width 1s cubic-bezier(.2, .8, .2, 1);
}
.quad-total { border-top: 1px solid var(--line-2) !important; margin-top: 14px !important; padding-top: 14px !important; }
.quad-total .total-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); }
.quad-total .total-val { font-family: 'Playfair Display', serif; font-size: 28px !important; font-weight: 400 !important; color: var(--c) !important; }
.quad .empty-state { color: var(--muted); font-style: italic; }

/* ---------- ostatné karty (grafy, gap analýza) ---------- */
#charts-section > div, #gap-section > div, .fx-card {
  background: var(--card) !important; border: 1px solid var(--line); border-radius: var(--radius) !important;
}

/* ---------- animácie ---------- */
@keyframes fx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fx-rise { animation: fx-rise .6s cubic-bezier(.2, .8, .2, 1) both; }

/* tooltip s rozpisom čísla */
.fx-tip {
  position: fixed; z-index: 9999; pointer-events: none; max-width: 280px;
  background: #121a22; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px;
  font-size: 12px; color: var(--text); box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.fx-tip.on { opacity: 1; transform: none; }
.fx-tip .row { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
.fx-tip .row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 760px) {
  .dashboard-wrap { grid-template-columns: 1fr !important; grid-template-areas: "hero" "prijmy" "vydavky" "majetok" "zavazky"; }
  .dashboard-wrap .circle-center { flex-direction: column !important; padding: 22px 18px; gap: 20px !important; }
  .dashboard-wrap .cs-row { min-width: 0; }
  .dashboard-wrap .circle-stats { flex-direction: column !important; width: 100% !important; }
  .dashboard-wrap .cs-row { flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 16px !important; }
  .dashboard-wrap .cs-val { font-size: 22px !important; }
  .dashboard-wrap .quad { border-radius: var(--radius) !important; padding: 20px !important; }
  .page-head h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-rise, .quad, .quad-row .fx-bar { animation: none !important; transition: none !important; }
}

/* jednotné poradie v riadku: názov vľavo, suma vpravo (aj vo výdavkoch a záväzkoch) */
.quad-row .row-label { order: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); opacity: .85; }
.quad-row .row-val { order: 1; margin-left: 12px; font-variant-numeric: tabular-nums; font-weight: 500; }
.quad .row-val.red, .quad .row-val.green { color: var(--c) !important; }
.quad-total .total-label { order: 0; }
.quad-total .total-val { order: 1; margin-left: auto; }
.quad-title > svg { order: 0; } .quad-title > a { order: 2; }

/* =====================================================================
   PODSTRÁNKY — jednotný vzhľad (body[data-section] nastavuje folio_fx.js)
   ===================================================================== */
body[data-section] { --accent: var(--gold); }
body[data-section="prijmy"]    { --accent: var(--c-prijmy); }
body[data-section="vydavky"]   { --accent: var(--c-vydavky); }
body[data-section="majetok"]   { --accent: var(--c-majetok); }
body[data-section="zavazky"]   { --accent: var(--c-zavazky); }
body[data-section="simulator"] { --accent: var(--c-majetok); }
body[data-section="timeline"], body[data-section="profil"], body[data-section="vypis"] { --accent: var(--teal); }

/* jednotná navigácia */
body[data-section] .topbar { padding: 12px 28px !important; gap: 16px; }
body[data-section] .topbar-right { gap: 6px !important; flex-wrap: wrap; justify-content: flex-end; }
body[data-section] .nav-btn { padding: 6px 12px !important; font-size: 12.5px !important; background: transparent; }
.nav-cta { border-color: rgba(212, 178, 111, .45) !important; color: var(--gold) !important; }
.nav-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
@media (max-width: 1500px) { body[data-section] .user-email, body[data-section] #user-email { display: none !important; } }

/* nadpis stránky */
body[data-section] .breadcrumb { font-size: 12px; letter-spacing: .04em; }
body[data-section] .page-title { font-size: 40px !important; letter-spacing: -.015em; line-height: 1.15; }
body[data-section] .page-title span { color: var(--accent) !important; }
body[data-section] .page-sub { font-size: 14px !important; color: var(--mid) !important; }

/* súhrnné karty */
body[data-section] .summary-bar { background: transparent !important; gap: 12px !important; border-radius: 0 !important; overflow: visible !important; }
body[data-section] .sum-block, body[data-section] .sum-card {
  background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 16px !important;
  padding: 18px 20px !important; position: relative; overflow: hidden;
}
body[data-section] .sum-block:first-child::before, body[data-section] .sum-card:first-child::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 85%);
}
body[data-section] .sum-label { font-size: 11px !important; letter-spacing: .12em !important; color: var(--mid) !important; }
body[data-section] .sum-val { font-family: 'Playfair Display', serif; font-size: 30px !important; font-weight: 400 !important; }

/* sekcie a karty položiek */
body[data-section] .section-label { color: var(--accent) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .14em !important; }
body[data-section] .payment-card, body[data-section] .majetok-card, body[data-section] .card,
body[data-section] .controls-panel, body[data-section] .zav-card {
  background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 16px !important;
  transition: border-color .2s, transform .2s;
}
body[data-section] .payment-card:hover, body[data-section] .majetok-card:hover, body[data-section] .zav-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
body[data-section] .add-inline-btn {
  border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent) !important; color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 7%, transparent) !important; border-radius: 14px !important; font-weight: 500;
}
body[data-section] .save-btn { border-radius: 12px !important; font-weight: 600; }