/* SP-TOOLS.CSS — wspólny skin dla stron narzędziowych (classify, import, panel, auth)
   Nadpisuje tokeny Tailwinda paletą SmartPrawnika (krem/navy/gold) + fonty + radius 2px.
   Dzięki temu rebuild Tailwind NIE jest potrzebny — używamy istniejących klas narzędziowych.
   Link PO sp-look.css (muszą być zdefiniowane zmienne --bg, --ink, itd.). */

:root {
  /* Overwrite Tailwind colors with SP palette */
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  --tw-border-opacity: 1;

  /* Backgrounds */
  --sp-bg-primary: var(--bg);        /* #F4F0E8 — krem, tło stron */
  --sp-bg-secondary: var(--bg-2);    /* #FBF8F1 — karty/panele */
  --sp-bg-tertiary: var(--bg-3);     /* #EFE9DC — pola, nagłówki kart */

  /* Text */
  --sp-ink-primary: var(--ink);      /* #0D1F3C — navy, tekst primary */
  --sp-ink-secondary: var(--ink-2);  /* #3A4A68 */
  --sp-ink-muted: var(--ink-muted);  /* #5C5040 */

  /* Accent */
  --sp-accent: var(--accent);        /* #B88746 — gold */
  --sp-accent-dark: var(--accent-dark); /* #8A5F2E */
  --sp-accent-light: var(--accent-light); /* #E8D0A8 */

  /* Status */
  --sp-success: var(--success);      /* #2F6F4E */
  --sp-warning: var(--warning);      /* #B55C2E */
  --sp-danger: var(--danger);        /* #A53B3B */

  /* Lines */
  --sp-line: var(--line);            /* #D8CFBE */
  --sp-line-2: var(--line-2);        /* #C4B89E */

  /* Border radius — ZAWSZE 2px (żadne rounded-xl/2xl) */
  --sp-radius: 2px;
}

/* Reset Tailwind rounded classes to SP radius 2px */
.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl {
  border-radius: var(--sp-radius) !important;
}

.rounded-full {
  border-radius: 99px !important; /* except for badges/pills */
}

.rounded {
  border-radius: var(--sp-radius) !important;
}

/* ===== BACKGROUNDS — Tailwind classes → SP palette ===== */
.bg-white { background-color: var(--sp-bg-secondary) !important; }
.bg-ink-50 { background-color: rgba(13,31,60,0.04) !important; }
.bg-ink-100 { background-color: rgba(13,31,60,0.08) !important; }
.bg-navy-50 { background-color: rgba(13,31,60,0.04) !important; }
.bg-navy-100 { background-color: rgba(13,31,60,0.10) !important; }
.bg-navy-600 { background-color: var(--sp-ink-primary) !important; }
.bg-navy-700 { background-color: #001640 !important; }
.bg-navy-900 { background-color: #0a1628 !important; }
.bg-navy-900\/50 { background-color: rgba(13,31,60,0.5) !important; }

.bg-emerald-500 { background-color: var(--sp-success) !important; }
.bg-emerald-500\/5 { background-color: rgba(47,111,78,0.05) !important; }
.bg-emerald-500\/10 { background-color: rgba(47,111,78,0.10) !important; }
.bg-emerald-100 { background-color: rgba(47,111,78,0.15) !important; }
.bg-emerald-900\/40 { background-color: rgba(47,111,78,0.4) !important; }

.bg-warn-100, .bg-amber-100 { background-color: rgba(181,92,46,0.12) !important; }
.bg-warn-500\/10, .bg-amber-500\/10 { background-color: rgba(181,92,46,0.10) !important; }

.bg-danger-500 { background-color: var(--sp-danger) !important; }
.bg-danger-500\/10 { background-color: rgba(165,59,59,0.10) !important; }
.bg-danger-100 { background-color: rgba(165,59,59,0.12) !important; }
.bg-danger-900\/40 { background-color: rgba(165,59,59,0.4) !important; }

.bg-accent\/10 { background-color: rgba(184,135,70,0.12) !important; }
.bg-accent\/20 { background-color: rgba(184,135,70,0.20) !important; }

/* Dark mode backgrounds — override to use bg-2 instead of pure black */
.dark .bg-\\[\\#0a0c11\\] { background-color: var(--sp-bg-secondary) !important; }
.dark .bg-\\[\\#11141b\\] { background-color: var(--sp-bg-secondary) !important; }
.dark .bg-white\\/5 { background-color: rgba(13,31,60,0.03) !important; }
.dark .bg-white\\/10 { background-color: rgba(13,31,60,0.06) !important; }
.dark .bg-white\\/\\[0\\.03\\] { background-color: rgba(13,31,60,0.03) !important; }
.dark .bg-navy-900\\/50 { background-color: rgba(251,248,241,0.4) !important; }

/* ===== TEXT COLORS ===== */
.text-ink-900 { color: var(--sp-ink-primary) !important; }
.text-ink-700 { color: var(--sp-ink-secondary) !important; }
.text-ink-500 { color: var(--sp-ink-muted) !important; }
.text-ink-400, .text-ink-300 { color: rgba(92,80,64,0.6) !important; }

.text-navy-600 { color: var(--sp-ink-primary) !important; }
.text-navy-700 { color: var(--sp-ink-primary) !important; }
.text-navy-300 { color: rgba(251,248,241,0.7) !important; }
.text-navy-200 { color: rgba(251,248,241,0.85) !important; }

.text-accent, .text-accent-gold { color: var(--sp-accent) !important; }
.dark .text-accent-gold { color: var(--sp-accent-light) !important; }

.text-emerald-600, .text-emerald-300 { color: var(--sp-success) !important; }
.text-emerald-800 { color: var(--sp-success) !important; }
.dark .text-emerald-200 { color: rgba(47,111,78,0.9) !important; }

.text-warn-500, .text-amber-300 { color: var(--sp-warning) !important; }
.text-warn-800, .text-amber-700 { color: #9e4a1f !important; }
.dark .text-warn-200 { color: rgba(181,92,46,0.9) !important; }

.text-danger-500, .text-danger-600, .text-red-300 { color: var(--sp-danger) !important; }

.dark .text-zinc-100, .dark .text-zinc-200 { color: var(--sp-ink-secondary) !important; }
.dark .text-zinc-300, .dark .text-zinc-400 { color: rgba(92,80,64,0.7) !important; }
.dark .text-zinc-500 { color: var(--sp-ink-muted) !important; }
.dark .text-zinc-600 { color: rgba(92,80,64,0.5) !important; }
.dark .text-white { color: var(--sp-ink-primary) !important; }

/* ===== BORDERS ===== */
.border-ink-100 { border-color: var(--sp-line) !important; }
.border-ink-200 { border-color: var(--sp-line-2) !important; }
.border-navy-200, .border-navy-300 { border-color: var(--sp-line) !important; }
.border-navy-600 { border-color: var(--sp-ink-primary) !important; }
.border-navy-700 { border-color: #001640 !important; }
.border-accent\\/40 { border-color: rgba(184,135,70,0.4) !important; }

.dark .border-white\\/10 { border-color: var(--sp-line) !important; }
.dark .border-white\\/15 { border-color: var(--sp-line-2) !important; }
.dark .border-white\\/30 { border-color: rgba(184,135,70,0.3) !important; }
.dark .border-white\\/5 { border-color: rgba(184,135,70,0.2) !important; }

.border-emerald-500\\/60 { border-color: rgba(47,111,78,0.6) !important; }
.border-warn-500\\/30, .border-amber-500\\/30 { border-color: rgba(181,92,46,0.4) !important; }
.border-danger-500\\/30 { border-color: rgba(165,59,59,0.4) !important; }

.border-ink-100, .dark .border-white\\/10 { border-color: var(--sp-line) !important; }
.border-ink-200, .dark .border-white\\/15 { border-color: var(--sp-line-2) !important; }

/* ===== BUTTONS ===== */
.btn-ghost, .ghost-button {
  background: transparent !important;
  color: var(--sp-ink-primary) !important;
  border: 1px solid var(--sp-ink-primary) !important;
  border-radius: var(--sp-radius) !important;
}

.btn-ghost:hover, .ghost-button:hover {
  background: var(--sp-ink-primary) !important;
  color: var(--sp-bg-secondary) !important;
}

.btn-primary, .primary-button {
  background: var(--sp-ink-primary) !important;
  color: var(--sp-bg-secondary) !important;
  border: 1px solid var(--sp-ink-primary) !important;
  border-radius: var(--sp-radius) !important;
}

.btn-primary:hover, .primary-button:hover {
  background: #001640 !important;
  transform: translateY(-1px);
}

.btn-accent, .accent-button {
  background: var(--sp-accent-dark) !important;
  color: #fff !important;
  border: 1px solid var(--sp-accent-dark) !important;
  border-radius: var(--sp-radius) !important;
}

.btn-accent:hover, .accent-button:hover {
  background: #6E4A22 !important;
}

/* ===== FONTS ===== */
.font-mono, .mono, code, pre, .font-mono\\* {
  font-family: 'JetBrains Mono', monospace !important;
}

.font-serif, .serif, h1, h2, h3, .serif\\* {
  font-family: 'Fraunces', Georgia, serif !important;
}

.caslon, .caslon\\* {
  font-family: 'Libre Caslon Text', Georgia, serif !important;
}

.sans, .font-sans, body, html {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ===== SHADOWS ===== */
.shadow-sm {
  box-shadow: 0 4px 8px -4px rgba(13,31,60,0.08) !important;
}

.shadow {
  box-shadow: 0 8px 16px -8px rgba(13,31,60,0.12) !important;
}

.shadow-xl {
  box-shadow: 0 24px 48px -16px rgba(13,31,60,0.18) !important;
}

/* ===== SPECIAL: Timeline dots (reasoning chain) ===== */
.timeline > .step::after {
  background: var(--sp-bg-secondary) !important;
  border: 3px solid var(--sp-accent) !important;
  box-shadow: 0 0 0 3px rgba(184,135,70,0.15) !important;
}

.dark .timeline > .step::after {
  background: var(--sp-ink-primary) !important;
  border-color: var(--sp-accent) !important;
}

.timeline > .step.done::after {
  border-color: var(--sp-success) !important;
  box-shadow: 0 0 0 3px rgba(47,111,78,0.18) !important;
}

.timeline > .step.active::after {
  border-color: var(--sp-accent) !important;
  box-shadow: 0 0 0 3px rgba(184,135,70,0.22) !important;
}

/* ===== SPECIAL: Hit highlights (source fragments) ===== */
.hit {
  background: rgba(184,135,70,0.20) !important;
  border-bottom: 2px solid var(--sp-accent) !important;
  border-radius: var(--sp-radius) !important;
  padding: 1px 2px !important;
  color: inherit !important;
}

.hit.is-active {
  background: rgba(184,135,70,0.42) !important;
}

/* ===== SPECIAL: Confidence bar ===== */
.bg-emerald-500, .bg-accent-gold, .bg-danger-500 {
  /* These are handled in text colors above, need gradient for bar */
}

/* Confidence gradient: navy → gold */
.conf-gradient {
  background: linear-gradient(90deg, var(--sp-ink-primary) 0%, var(--sp-accent) 100%) !important;
}

/* ===== SPECIAL: Skeleton loading ===== */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(120,140,180,0.10) !important;
}

.dark .skeleton {
  background: rgba(148,163,184,0.08) !important;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  animation: sh 1.25s infinite;
}

@keyframes sh {
  100% { transform: translateX(100%); }
}

/* ===== RESPONSIVE — maintain radius consistency ===== */
@media (max-width: 768px) {
  .rounded-lg, .rounded-xl, .rounded-2xl {
    border-radius: var(--sp-radius) !important;
  }
}

/* ===== DOC-CARD components (wspólne dla narzędzi) ===== */
.doc-card {
  background: var(--sp-bg-secondary) !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: var(--sp-radius) !important;
  box-shadow: 0 4px 8px -4px rgba(13,31,60,0.08) !important;
}

.doc-card-header {
  padding: 16px;
  border-bottom: 1px solid var(--sp-line);
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--sp-line);
}

.doc-row:last-child {
  border-bottom: none;
}

.doc-row.total {
  padding-top: 12px;
  border-top: 1px solid var(--sp-line-2);
  border-bottom: none;
}

.doc-row-key {
  font-size: 14px;
  color: var(--sp-ink-secondary);
  font-variant-numeric: tabular-nums;
}

.doc-row-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--sp-ink-primary);
  font-variant-numeric: tabular-nums;
}

/* ===== EYEBROW (nagłówek sekcji) ===== */
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sp-accent);
}

/* ===== BADGE components ===== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--sp-radius) !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.badge-accent {
  background: rgba(184,135,70,0.15) !important;
  color: var(--sp-accent) !important;
  border: 1px solid rgba(184,135,70,0.30) !important;
}

.badge-success {
  background: rgba(47,111,78,0.15) !important;
  color: var(--sp-success) !important;
  border: 1px solid rgba(47,111,78,0.30) !important;
}

.badge-warning {
  background: rgba(181,92,46,0.15) !important;
  color: var(--sp-warning) !important;
  border: 1px solid rgba(181,92,46,0.30) !important;
}

/* ===== PRINT override ===== */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }

  .bg-white, .dark .bg-\\[\\#0a0c11\\], .dark .bg-\\[\\#11141b\\] {
    background: #fff !important;
  }

  .text-ink-900, .text-ink-700, .dark .text-zinc-200, .dark .text-zinc-100 {
    color: #000 !important;
  }

  .border-ink-100, .dark .border-white\\/10 {
    border-color: #ccc !important;
  }
}

/* Sticky nav na stronach narzedziowych: stale kryjace tlo (brak skryptu is-scrolled) — fix nakladania na tekst */
.sp-nav { background: rgba(244,240,232,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
html.dark .sp-nav { background: rgba(12,17,29,.94); }