/* ============================================================================
   Motyw „Blueprint" dla Frachtscale — warstwa WIZUALNA nałożona na istniejący
   Tailwind. Układ, routing i logika bez zmian (handoff: design_handoff_blueprint).
   Kolory remapowane w configu Tailwinda (klos→accent, slate→neutralne). Tutaj:
   kształty (kwadratowe rogi), typografia (Barlow), ramka z krzyżykami „+",
   sidebar, mapa, focus. Styl: rysunek techniczny w stalowym błękicie #5980a6.
   ============================================================================ */
:root{
  --bp-bg:#f2f2f3;
  --bp-surface:#e9e9ea;
  --bp-text:#1d1f20;
  --bp-muted:#5d5d60;
  --bp-accent:#5980a6;
  --bp-accent-700:#416180;
  --bp-accent-100:#eef6ff;
  --bp-divider:rgba(29,31,32,.16);
  --bp-row:rgba(29,31,32,.08);
}

/* ── Typografia ─────────────────────────────────────────────────────────── */
body{
  font-family:"Barlow",ui-sans-serif,system-ui,-apple-system,sans-serif;
  color:var(--bp-text); background:var(--bp-bg);
  font-size:15px; line-height:1.55;
}
h1,h2,h3,h4,h5,h6,.bp-head{
  font-family:"Barlow Condensed",system-ui,sans-serif;
  font-weight:600; line-height:1.12; letter-spacing:-.015em;
}
/* Skala nagłówków blueprint (Tailwind preflight resetuje h* do inherit — wymuszamy) */
h1{font-size:42px !important;}
h2{font-size:30px !important;}   /* tytuły kart, np. „Mapa sytuacyjna" */
h3{font-size:24px !important;}
input[type=checkbox],input[type=radio]{accent-color:var(--bp-accent);}
/* Ikony z podmiany emoji → Lucide (inline, rozmiar jak znak) */
.bp-ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;flex:none;}
/* Tabular liczby na kwotach/datach */
.tabular,[class*="tabular-nums"]{font-variant-numeric:tabular-nums;}

/* ── Kwadratowe rogi wszędzie (wyjątek: okręgi — awatary, pinezki) ───────── */
[class*="rounded"]:not([class*="rounded-full"]){border-radius:0 !important;}

/* ── Bez cieni na kartach (floaty/dialogi/czat zachowują shadow-lg/xl/2xl) ─ */
[class*="shadow-sm"],.shadow{box-shadow:none !important;}

/* ── Ramka z krzyżykami „+" (wspólny komponent) ─────────────────────────── */
/* Ramka = karta blueprint. `.wkarta` (widżety Pulpitu) dostaje ją automatycznie. */
.bp-frame,.wkarta{
  position:relative;
  background:transparent !important;
  border:1px solid var(--bp-divider) !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;   /* overflow:hidden obcięłoby krzyżyki; mapa klipuje się sama (leaflet) */
}
.bp-corner{
  position:absolute; width:11px; height:11px; pointer-events:none; z-index:1;
  color:color-mix(in srgb, var(--bp-text) 55%, transparent);
}
.bp-corner::before,.bp-corner::after{content:"";position:absolute;background:currentColor;}
.bp-corner::before{left:5px;top:0;width:1px;height:100%;}
.bp-corner::after{top:5px;left:0;width:100%;height:1px;}
.bp-corner.tl{top:-6px;left:-6px}
.bp-corner.tr{top:-6px;right:-6px}
.bp-corner.bl{bottom:-6px;left:-6px}
.bp-corner.br{bottom:-6px;right:-6px}
.bp-clip{overflow:hidden;}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
aside[class*="bg-white"]{background:var(--bp-bg) !important;}
/* Aktywna pozycja menu: pionowy pasek 3px z lewej (handoff) */
aside nav a[class*="bg-klos-50"]{box-shadow:inset 3px 0 0 var(--bp-accent);}

/* ── Mapa (Leaflet) — kafelki odbarwione i zabarwione na stalowo ────────── */
.leaflet-tile-pane{filter:grayscale(1) sepia(.3) hue-rotate(170deg) saturate(1.4) brightness(1.03);}
.leaflet-container{background:var(--bp-surface);}
.leaflet-bar a,.leaflet-control-zoom a{
  border-radius:0 !important; color:var(--bp-muted) !important;
  background:var(--bp-bg) !important; border-color:var(--bp-divider) !important;
}
.leaflet-bar{border-radius:0 !important;}
/* Grupy pinezek (markercluster) — czarne okręgi z liczbą (monochrom) */
.marker-cluster{background:color-mix(in srgb, var(--bp-text) 22%, transparent) !important;}
.marker-cluster div{background:var(--bp-text) !important; color:#fff !important;
  font-family:"Barlow",sans-serif !important; font-weight:600 !important;}
.marker-cluster, .marker-cluster div{border-radius:50% !important;}

/* ── Pola formularzy (handoff: tło surface #e9e9ea, 1px divider) ─────────── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
select, textarea{
  background-color:var(--bp-surface) !important;
}
/* ── Nagłówki tabel: wersaliki, 12px, muted (handoff) ───────────────────── */
table thead th{
  text-transform:uppercase; letter-spacing:.05em;
  font-size:12px !important; font-weight:600; color:var(--bp-muted);
}
/* ── Duże tabele: STAŁE poziome linie między wierszami ──────────────────────
   divide-slate-50 / border-slate-100 remapują się na ~kolor tła (#f2f2f3) i po
   przeładowaniu configu Tailwinda „znikały" (FOUC ~0,5 s). Wymuszamy widoczny
   divider od pierwszego renderu (blueprint.css jest statyczny → bez migotania). */
main table thead tr{ border-bottom:1px solid var(--bp-divider) !important; }
main table tbody tr + tr{ border-top:1px solid var(--bp-divider) !important; }

/* ── Szerokie tabele danych dostają więcej szerokości (gdy ekran ją ma) ──────
   Kontener treści jest capowany na max-w-6xl (1152px) i na szerokich ekranach
   ściska wielokolumnowe tabele (nazwa firmy zawijała się na 4 linie, ostatnie
   kolumny się urywały). Strony, których treść to przewijalna tabela danych
   (.overflow-x-auto + <table>), rozszerzamy do rozsądnego maksimum używając
   dostępnej szerokości. Pulpit (widżety .wkarta) i strony bez tabel — bez zmian. */
main > div:has(.overflow-x-auto table):not(:has(.wkarta)){
  max-width:min(100rem, 100%) !important;
}

/* ── Interakcje ─────────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--bp-accent); outline-offset:2px;}
::selection{background:color-mix(in srgb, var(--bp-accent) 30%, transparent); }