/* ═══════════════════════════════════════════════════════════════════════════
   Inventory Cashflow AI — dopracowanie detali (2.8.1)
   Subtelna warstwa nad styles.css: zachowuje dotychczasową paletę i układ,
   poprawia głębię, fokus, tabele, menu, przewijanie i podpowiedzi (Tippy.js)
   w obu motywach. Niczego nie ukrywa i nie animuje treści.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.14);
  --ring: rgba(37, 99, 235, 0.22);
  --elev-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  --elev-2: 0 4px 12px -4px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.04);
  --elev-3: 0 14px 32px -12px rgba(15, 23, 42, 0.22), 0 4px 10px -4px rgba(15, 23, 42, 0.06);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
[data-bs-theme="dark"] {
  --line: rgba(148, 163, 184, 0.12);
  --line-strong: rgba(148, 163, 184, 0.22);
  --ring: rgba(96, 165, 250, 0.35);
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --elev-2: 0 6px 16px -6px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.3);
  --elev-3: 0 18px 40px -14px rgba(0, 0, 0, 0.7), 0 4px 10px -4px rgba(0, 0, 0, 0.4);
}

/* ── Typografia i drobiazgi ───────────────────────────────────────────────── */
body { text-rendering: optimizeLegibility; }
.kpi-value, .money, td.text-end, th.text-end, .summary-pill strong { font-variant-numeric: tabular-nums; }
::selection { background: rgba(37, 99, 235, 0.22); }
[data-bs-theme="dark"] ::selection { background: rgba(96, 165, 250, 0.35); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Paski przewijania ────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--gray-400); border: 3px solid transparent; background-clip: content-box; }

/* ── Karty: miękkie cienie, bez skakania kart z wykresami / tabelami ─────── */
.card, .page-header { box-shadow: var(--elev-1); border-color: var(--line); }
.card:hover { box-shadow: var(--elev-2); }
.card:has(canvas):hover, .card:has(table):hover, .card:has(form):hover { transform: none; }
.kpi-card:hover { box-shadow: var(--elev-3); }
[data-bs-theme="dark"] .card, [data-bs-theme="dark"] .page-header { border-color: var(--line); }

/* ── Przyciski ────────────────────────────────────────────────────────────── */
.btn:active { transform: scale(0.98); }
.btn-primary { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.btn-primary:hover { box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.6); }

/* ── Formularze: wyraźny pierścień fokusa ─────────────────────────────────── */
.form-control, .form-select { transition: border-color 140ms ease, box-shadow 140ms ease; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }

/* ── Tabele: spokojniejsze linie, czytelne podświetlenie wiersza ─────────── */
.table tbody td { border-bottom-color: var(--line); }
.table tbody tr { transition: background-color 120ms ease; }
.table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); }

/* ── Menu rozwijane, modale, okna dialogowe ──────────────────────────────── */
.dropdown-menu { border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--elev-3); padding: 0.35rem; animation: pl-pop 160ms var(--ease-out); }
.dropdown-item { border-radius: 8px; }
@keyframes pl-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.modal-content { border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--elev-3); }
.swal2-popup { border-radius: 18px; box-shadow: var(--elev-3); font-family: inherit; }
[data-bs-theme="dark"] .swal2-popup { background: #1e293b; color: #e2e8f0; }
[data-bs-theme="dark"] .swal2-title { color: #f1f5f9; }
[data-bs-theme="dark"] .swal2-html-container { color: #cbd5e1; }
.flatpickr-calendar { border-radius: 14px; box-shadow: var(--elev-3); }

/* ── Tippy.js — podpowiedzi dopasowane do motywu ─────────────────────────── */
.tippy-box[data-theme~="app"] {
  background: #0f172a; color: #f8fafc; border-radius: 8px;
  font-size: 0.78rem; font-weight: 500; line-height: 1.35;
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.45);
}
.tippy-box[data-theme~="app"] > .tippy-arrow { color: #0f172a; }
[data-bs-theme="dark"] .tippy-box[data-theme~="app"] { background: #f1f5f9; color: #0f172a; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.6); }
[data-bs-theme="dark"] .tippy-box[data-theme~="app"] > .tippy-arrow { color: #f1f5f9; }

/* ── Płynna zmiana motywu ─────────────────────────────────────────────────── */
html.pl-theme-anim body, html.pl-theme-anim .card, html.pl-theme-anim .hdr,
html.pl-theme-anim .page-header, html.pl-theme-anim .table td, html.pl-theme-anim .table th {
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-menu { animation: none; }
}