/* ─────────────────────────────────────────────────────────────────────────
   KreditEU — Design Tokens
   Trzy warianty wizualne: aurora (granat+złoto), daylight (biel+granat),
   bold (granat+koral). Tryb jasny/ciemny.
   ──────────────────────────────────────────────────────────────────────── */

:root,
:root[data-theme="aurora"][data-mode="dark"] {
  /* Aurora — Premium granat + ciepłe złoto */
  --bg:           oklch(0.16 0.025 250);
  --bg-2:         oklch(0.20 0.028 250);
  --surface:      oklch(0.23 0.030 252);
  --surface-2:    oklch(0.27 0.032 252);
  --border:       oklch(0.32 0.025 252 / 0.6);
  --border-soft:  oklch(0.32 0.025 252 / 0.3);
  --text:         oklch(0.97 0.005 250);
  --text-2:       oklch(0.78 0.015 250);
  --text-3:       oklch(0.58 0.018 250);
  --accent:       oklch(0.82 0.13 80);   /* złoto */
  --accent-2:     oklch(0.74 0.13 80);
  --accent-soft:  oklch(0.82 0.13 80 / 0.15);
  --good:         oklch(0.75 0.16 155);
  --bad:          oklch(0.68 0.20 25);
  --warn:         oklch(0.80 0.15 75);
  --chip-bg:      oklch(0.27 0.030 252);
}

:root[data-theme="aurora"][data-mode="light"] {
  --bg:           oklch(0.985 0.005 250);
  --bg-2:         oklch(0.96 0.008 250);
  --surface:      oklch(1 0 0);
  --surface-2:    oklch(0.97 0.008 250);
  --border:       oklch(0.88 0.012 250);
  --border-soft:  oklch(0.92 0.010 250);
  --text:         oklch(0.18 0.025 250);
  --text-2:       oklch(0.38 0.025 250);
  --text-3:       oklch(0.55 0.020 250);
  --accent:       oklch(0.55 0.14 70);   /* burnt gold */
  --accent-2:     oklch(0.48 0.15 70);
  --accent-soft:  oklch(0.55 0.14 70 / 0.10);
  --good:         oklch(0.55 0.16 155);
  --bad:          oklch(0.55 0.20 25);
  --warn:         oklch(0.60 0.15 75);
  --chip-bg:      oklch(0.96 0.008 250);
}

:root[data-theme="daylight"][data-mode="light"] {
  /* Daylight — biel + EU blue */
  --bg:           oklch(0.99 0.004 230);
  --bg-2:         oklch(0.97 0.010 230);
  --surface:      oklch(1 0 0);
  --surface-2:    oklch(0.97 0.008 230);
  --border:       oklch(0.88 0.012 230);
  --border-soft:  oklch(0.93 0.010 230);
  --text:         oklch(0.20 0.030 245);
  --text-2:       oklch(0.40 0.025 245);
  --text-3:       oklch(0.58 0.020 245);
  --accent:       oklch(0.50 0.18 248);
  --accent-2:     oklch(0.42 0.20 248);
  --accent-soft:  oklch(0.50 0.18 248 / 0.10);
  --good:         oklch(0.55 0.16 155);
  --bad:          oklch(0.55 0.20 25);
  --warn:         oklch(0.65 0.15 75);
  --chip-bg:      oklch(0.96 0.010 230);
}

:root[data-theme="daylight"][data-mode="dark"] {
  --bg:           oklch(0.16 0.020 245);
  --bg-2:         oklch(0.20 0.022 245);
  --surface:      oklch(0.23 0.025 245);
  --surface-2:    oklch(0.27 0.028 245);
  --border:       oklch(0.32 0.025 245 / 0.6);
  --border-soft:  oklch(0.32 0.025 245 / 0.3);
  --text:         oklch(0.97 0.005 245);
  --text-2:       oklch(0.78 0.015 245);
  --text-3:       oklch(0.58 0.018 245);
  --accent:       oklch(0.72 0.16 248);
  --accent-2:     oklch(0.65 0.18 248);
  --accent-soft:  oklch(0.72 0.16 248 / 0.15);
  --good:         oklch(0.75 0.16 155);
  --bad:          oklch(0.68 0.20 25);
  --warn:         oklch(0.80 0.15 75);
  --chip-bg:      oklch(0.27 0.028 245);
}

:root[data-theme="bold"][data-mode="dark"] {
  /* Bold — głęboki granat + koral */
  --bg:           oklch(0.14 0.030 270);
  --bg-2:         oklch(0.18 0.032 270);
  --surface:      oklch(0.21 0.034 270);
  --surface-2:    oklch(0.25 0.036 270);
  --border:       oklch(0.32 0.030 270 / 0.6);
  --border-soft:  oklch(0.32 0.030 270 / 0.3);
  --text:         oklch(0.97 0.005 270);
  --text-2:       oklch(0.78 0.020 270);
  --text-3:       oklch(0.58 0.024 270);
  --accent:       oklch(0.72 0.18 25);
  --accent-2:     oklch(0.65 0.20 25);
  --accent-soft:  oklch(0.72 0.18 25 / 0.15);
  --good:         oklch(0.75 0.16 155);
  --bad:          oklch(0.68 0.20 25);
  --warn:         oklch(0.80 0.15 75);
  --chip-bg:      oklch(0.25 0.036 270);
}

:root[data-theme="bold"][data-mode="light"] {
  --bg:           oklch(0.98 0.008 25);
  --bg-2:         oklch(0.96 0.012 25);
  --surface:      oklch(1 0 0);
  --surface-2:    oklch(0.97 0.010 25);
  --border:       oklch(0.88 0.015 25);
  --border-soft:  oklch(0.93 0.012 25);
  --text:         oklch(0.18 0.030 270);
  --text-2:       oklch(0.40 0.028 270);
  --text-3:       oklch(0.55 0.024 270);
  --accent:       oklch(0.55 0.20 25);
  --accent-2:     oklch(0.48 0.22 25);
  --accent-soft:  oklch(0.55 0.20 25 / 0.10);
  --good:         oklch(0.55 0.16 155);
  --bad:          oklch(0.55 0.20 25);
  --warn:         oklch(0.65 0.15 75);
  --chip-bg:      oklch(0.96 0.012 25);
}

:root {
  --radius:        14px;
  --radius-lg:     22px;
  --radius-sm:     8px;
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
  --shadow:        0 4px 20px -6px rgba(0,0,0,0.10), 0 2px 6px -2px rgba(0,0,0,0.06);
  --shadow-lg:     0 24px 60px -20px rgba(0,0,0,0.25);
  --font:          'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display:  'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
*,
*::before,
*::after {
  min-width: 0;
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-feature-settings: 'ss01', 'cv11', 'tnum';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ───────── Layout primitives ───────── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) {
  .container { padding: 0 16px; }
}

/* ───────── Buttons ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: oklch(0.15 0.02 250);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px var(--accent);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--surface);
  border-color: var(--text-3);
}
.btn-soft {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-soft);
}
.btn-soft:hover {
  background: var(--surface-2);
}

/* ───────── Card ───────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  transition: all 0.22s var(--ease);
}
.card-hover:hover {
  transform: translateY(-2px);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

/* ───────── Chip ───────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--chip-bg);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

/* ───────── Inputs ───────── */
.input, .select {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all 0.18s var(--ease);
}
.input:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ───────── Skeleton ───────── */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface-2) 50%,
    var(--surface) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
  border-radius: 8px;
}

/* ───────── Marquee (live ticker) ───────── */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: ticker-scroll 50s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }

/* ───────── Number animation ───────── */
.num-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ───────── Focus ring ───────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ───────── Scrollbars ───────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* ───────── Selection ───────── */
::selection {
  background: var(--accent-soft);
  color: var(--text);
}

/* ───────── Utility ───────── */
.hide-scroll { scrollbar-width: none; }
.hide-scroll::-webkit-scrollbar { display: none; }

/* Animations */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 0.5s var(--ease) both; }

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--good);
  animation: pulse-soft 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 currentColor;
}

/* Mobile containment hotfix
   The app uses many inline grid/flex styles. These rules keep every dashboard
   tile inside the viewport without changing the desktop composition. */
html {
  width: 100%;
  overflow-x: hidden;
}

#root {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.container {
  width: 100%;
  max-width: min(1280px, 100%);
}

img,
svg,
canvas,
video,
iframe {
  max-width: 100%;
}

.card:has(table),
.card:has(> div table),
.card > div:has(table) {
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.card table {
  max-width: none;
}

@media (max-width: 1024px) {
  main,
  section,
  .container,
  .card,
  .bento-card {
    min-width: 0;
    max-width: 100%;
  }

  .kr-bento {
    width: 100%;
    min-width: 0;
  }

  .kr-bento .bento-card.bento-span-xl,
  .kr-bento .bento-card.bento-span-full,
  .kr-bento .bento-card.bento-span-lg {
    grid-column: 1 / -1 !important;
  }

  .kr-bento .bento-card.bento-span-md,
  .kr-bento .bento-card.bento-span-sm {
    grid-column: span 3 !important;
  }

  .kr-bento .bento-card,
  .kr-fullcalc-grid,
  .kr-form-grid,
  .kr-calc-grid,
  .kr-article-grid,
  .kr-contact-grid,
  .kr-admin-grid,
  .kr-footer-grid {
    min-width: 0;
    max-width: 100%;
  }

  .bento-card * {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .container {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .kr-bento {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .kr-bento .bento-card,
  .kr-bento .bento-card[style],
  .kr-bento .bento-card[style*="span"] {
    grid-area: auto / 1 / auto / -1 !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .kr-calc-grid,
  .kr-fullcalc-grid,
  .kr-form-grid,
  .kr-article-grid,
  .kr-contact-grid,
  .kr-admin-grid,
  .kr-footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .btn {
    white-space: normal;
    min-width: 0;
    text-align: center;
  }

  .chip {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .input,
  .select {
    min-width: 0;
    max-width: 100%;
  }

  .card table {
    min-width: 560px !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .kr-bento .bento-card {
    padding: 16px !important;
  }

  .card table {
    min-width: 520px !important;
  }
}