/* Elester — motyw „dyspozytorski" (wzorowany na przyklad.html: granat + stal, technicznie, mono na danych).
   Bez zewnętrznych CDN — Inter hostowany lokalnie (CSP-friendly). */
@font-face{
  font-family:"InterVar";
  src:url("/app/vendor/inter/inter.woff2") format("woff2");
  font-weight:100 900; font-display:swap; font-style:normal;
}
@font-face{
  font-family:"RobotoMonoVar";
  src:url("/app/vendor/robotomono/robotomono.woff2") format("woff2");
  font-weight:100 700; font-display:swap; font-style:normal;
}
:root{
  --bg:#f8fafc; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9;
  --border:#cbd5e1; --border-soft:#e2e8f0;
  --text:#1e293b; --text-strong:#0f172a; --muted:#64748b;
  --primary:#1e40af; --primary-d:#1e3a8a; --primary-l:#3b82f6;
  --amber:#f59e0b; --amber-d:#d97706;
  --alert:#dc2626; --warn:#d97706; --ok:#16a34a; --emerald:#10b981; --info:#2563eb;
  --navy:#0f172a; --navy-deep:#0b1220; --navy-line:#1e293b; --navy-active:rgba(30,41,59,.85);
  --sand:#94a3b8;
  --radius:6px; --radius-sm:4px; --nav-w:256px; --topbar-h:64px;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05);
  --mono:"RobotoMonoVar",ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"InterVar",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.45;-webkit-text-size-adjust:100%}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.4rem;margin:0;color:var(--text-strong);letter-spacing:-.01em;font-weight:700}
h2{font-size:.92rem;margin:0 0 12px;color:var(--text-strong);font-weight:600;display:flex;align-items:center;gap:8px}
h2 .hico{color:var(--primary);font-size:1.05em}
code,.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.hidden{display:none!important}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#64748b}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  padding:7px 13px;border-radius:6px;cursor:pointer;font:inherit;font-size:.85rem;font-weight:500;
  box-shadow:var(--shadow);transition:.15s;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:hover{background:var(--surface-2);border-color:var(--sand);text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--primary);border-color:var(--primary-d);color:#fff}
.btn-primary:hover{background:var(--primary-d);border-color:var(--primary-d)}
.btn-danger{background:var(--alert);border-color:#b91c1c;color:#fff}
.btn-danger:hover{background:#b91c1c}
.btn-sm{padding:4px 9px;font-size:.78rem}
.btn-block{width:100%}

/* Inputs */
label{display:block;font-size:.7rem;color:var(--muted);margin:0 0 4px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
input,select,textarea{width:100%;padding:8px 11px;border:1px solid var(--border);border-radius:6px;
  background:var(--surface);color:var(--text);font:inherit;font-size:.86rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
input,select,.mono-in{font-variant-numeric:tabular-nums}
/* Pola wyboru mają rozmiar własny — globalne width:100% ich nie dotyczy. */
input[type=checkbox],input[type=radio]{width:auto;flex:none;margin:0}
/* Etykieta obok pola wyboru czyta się jak zwykły tekst, nie jak nagłówek pola. */
label.inline{display:inline-flex;align-items:center;gap:6px;margin:0;
  text-transform:none;letter-spacing:normal;font-weight:500;font-size:.8rem;color:var(--text);cursor:pointer}
textarea{min-height:80px;resize:vertical}
.field{margin-bottom:12px}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);margin-bottom:18px}
.card h2{border-bottom:1px solid var(--border-soft);padding-bottom:9px;margin-bottom:14px;color:var(--text-strong)}

/* Layout */
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--nav-w);background:var(--navy);color:#cbd5e1;
  display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:40;
  box-shadow:2px 0 12px rgba(0,0,0,.12);transition:transform .2s}
.brand{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;
  border-bottom:1px solid var(--navy-line)}
.brand .board{font-weight:700;font-size:1.1rem;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.nav{flex:1;overflow-y:auto;padding:16px 10px}
.nav a{display:block;padding:11px 14px;border-radius:4px;
  color:var(--sand);font-weight:500;font-size:.86rem;margin-bottom:2px;transition:.12s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.nav a:hover{background:rgba(30,41,59,.5);color:#fff;text-decoration:none}
.nav a.active{background:var(--navy-active);color:#fff;font-weight:600}
.nav-sec{font-size:.66rem;text-transform:uppercase;color:#64748b;padding:18px 14px 8px;letter-spacing:.1em;font-weight:600}
.userbox{padding:14px;border-top:1px solid var(--navy-line);background:rgba(15,23,42,.95)}
.userbox .who{display:flex;align-items:center;gap:11px;padding:6px 4px;margin-bottom:8px}
.userbox .ava{width:40px;height:40px;border-radius:4px;background:var(--primary-d);border:1px solid #334155;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.85rem;flex:none}
.userbox .nm{color:#fff;font-size:.82rem;font-weight:600;line-height:1.2}
.userbox .rl{color:#94a3b8;font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;margin-top:3px;font-weight:600}

.content{flex:1;margin-left:var(--nav-w);min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;background:var(--surface);height:var(--topbar-h);
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 22px}
.topbar-title{font-weight:600;color:var(--text-strong);font-size:1.02rem}
.crumb{color:var(--muted);font-size:.82rem;white-space:nowrap}
.crumb .sep{margin:0 8px;color:#cbd5e1}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.sysclock{color:var(--muted);font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.conn{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.conn-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.hamb{display:none;align-items:center;gap:8px;background:none;border:1px solid var(--border);cursor:pointer;
  color:var(--text);padding:7px 12px;font-size:1.15rem;line-height:1;border-radius:6px;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hamb:hover{background:var(--surface-2)}
.hamb .mlabel{font-size:.82rem;font-weight:600}
.nav-close{display:none;margin-left:auto;background:none;border:none;color:#94a3b8;font-size:1.15rem;cursor:pointer;line-height:1;padding:4px 6px}
.nav-close:hover{color:#fff}
.page{padding:24px;max-width:1440px;width:100%;margin:0 auto}
.scrim{display:none;position:fixed;inset:0;background:rgba(2,6,23,.5);z-index:35}
@media(max-width:860px){
  .sidebar{transform:translateX(-100%);box-shadow:6px 0 24px rgba(0,0,0,.35)}
  .sidebar.open{transform:translateX(0)}
  .content{margin-left:0}
  .hamb{display:inline-flex}
  .nav-close{display:block}
  .crumb{display:none}
  .conn{display:none}
  .scrim.open{display:block}
  .page{padding:16px}
}

/* Tables */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:.82rem}
thead{background:var(--surface-3)}
th{text-align:left;padding:9px 13px;border-bottom:1px solid var(--border);
  font-size:.66rem;text-transform:uppercase;color:var(--muted);letter-spacing:.06em;font-weight:700;white-space:nowrap;position:sticky;top:0;background:var(--surface-3)}
td{padding:9px 13px;border-bottom:1px solid var(--border-soft);white-space:nowrap;font-family:var(--mono);font-size:.78rem}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
td.wrap,th.wrap{white-space:normal;font-family:inherit}

/* Badges / chips (prostokątne, techniczne) */
.badge{display:inline-block;padding:2px 7px;border-radius:var(--radius-sm);font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;background:var(--surface-3);border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.badge-admin{background:#ede9fe;color:#6d28d9;border-color:#ddd6fe}
.badge-moderator{background:#fef3c7;color:#b45309;border-color:#fde68a}
.badge-edit{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
.badge-junior{background:#ccfbf1;color:#0f766e;border-color:#99f6e4}
.badge-view{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.badge-selected{background:#ffedd5;color:#c2410c;border-color:#fed7aa}
.badge-ok{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.badge-warn{background:#ffedd5;color:#c2410c;border-color:#fed7aa}
.badge-danger{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.badge-info{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}

/* Stat tiles (bez akcentów i ikon — czysto) */
.stats{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-bottom:18px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.stat .l{color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.stat .n{font-size:1.85rem;font-weight:700;line-height:1;color:var(--text-strong)}
.stat .sub{font-size:.72rem;color:var(--muted)}

/* Bars */
.bars{display:flex;flex-direction:column;gap:7px}
.bar-row{display:grid;grid-template-columns:130px 1fr 46px;align-items:center;gap:10px;font-size:.8rem}
.bar-track{background:var(--surface-3);border-radius:3px;overflow:hidden;height:15px;border:1px solid var(--border-soft)}
.bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-l));border-radius:0}
.bar-row .v{text-align:right;font-weight:700;font-family:var(--mono);color:var(--text-strong)}

/* Login (granatowe tło) */
.login-wrap{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(1200px 600px at 30% -10%,#1e293b 0%,var(--navy) 45%,var(--navy-deep) 100%)}
.login-box{width:100%;max-width:390px}
.login-box .brand{background:none;border:none;justify-content:center;height:auto;margin-bottom:18px;font-size:1.5rem;color:#fff}
.login-box .card{border-color:#1e293b}

/* Detail */
.kv{display:grid;grid-template-columns:200px 1fr;gap:1px;background:var(--border-soft);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.kv>div{background:var(--surface);padding:8px 13px;font-size:.84rem}
.kv .k{color:var(--muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
@media(max-width:560px){.kv{grid-template-columns:1fr}.kv .k{padding-bottom:0}}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:8px 0 16px;flex-wrap:wrap}
.tab{padding:9px 16px;cursor:pointer;border:none;background:none;color:var(--muted);font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid transparent}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.note-item,.task-item{border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:11px 13px;margin-bottom:8px;background:var(--surface)}
.note-item.arch,.task-item.arch,.list-item.arch{opacity:.55}
/* Trafienia w wyszukiwarce notatek */
mark{background:#fef08a;color:inherit;padding:0 1px;border-radius:2px}
.list-item{border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:13px;margin-bottom:8px;background:var(--surface);cursor:pointer}
.list-item:hover{border-color:var(--sand);background:var(--surface-2)}

/* Filters / pager */
.filters{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin-bottom:16px}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:16px;font-family:var(--mono);font-size:.8rem}

/* Map */
#map{height:66vh;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow)}
.leaflet-container{background:#e2e8f0;font-family:inherit}
/* Etykiety nazw obiektów — widoczne dopiero po przybliżeniu (klasa show-labels) */
/* Podpisy obiektów: kontener jest przezroczysty, a każdy obiekt dostaje własne
   jednoliniowe pudełko — dzięki temu długie nazwy się nie łamią. */
.leaflet-tooltip.obj-label{display:none;background:none;border:none;box-shadow:none;padding:0;
  color:#0f172a;font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap}
.leaflet-tooltip.obj-label .lbl-row{background:rgba(255,255,255,.92);border:1px solid #cbd5e1;
  border-radius:3px;padding:1px 5px;margin-bottom:1px;box-shadow:0 1px 2px rgba(0,0,0,.18);white-space:nowrap}
.leaflet-tooltip.obj-label .lbl-more{color:#64748b;font-weight:500}
/* Każde pudełko szerokie na tyle, ile ma tekstu (jak w aplikacji). */
.leaflet-tooltip.obj-label>div{display:flex;flex-direction:column;align-items:flex-start}
.leaflet-tooltip.obj-label::before{display:none}
.leaflet-container.show-labels .leaflet-tooltip.obj-label{display:block}
/* Migający marker — obiekt z niewykonanym zadaniem TODO */
@keyframes mk-blink{0%,100%{opacity:1}50%{opacity:.18}}
.blink-marker{animation:mk-blink 1s ease-in-out infinite}
.card #map{border:none;border-radius:0;box-shadow:none;height:62vh}
/* Mapa pełnoekranowa — wypełnia cały obszar treści pod paskiem górnym */
.page.map-bleed{padding:0;max-width:none}
.map-fs{display:flex;flex-direction:column;height:calc(100vh - var(--topbar-h))}
.map-fs #map{flex:1;height:auto;min-height:0;border:none;border-radius:0;box-shadow:none}
/* Tryb synoptyczny — mapa na całym ekranie, bez menu i paska górnego */
body.syn .sidebar,body.syn .topbar,body.syn .scrim{display:none!important}
body.syn .content{margin-left:0!important}
body.syn .map-fs{height:100vh!important}
body.syn .map-head{display:none}
.syn-exit{position:fixed;top:14px;right:14px;z-index:3000;display:none;align-items:center;gap:6px;
  background:var(--navy);color:#fff;border:1px solid #334155;border-radius:6px;padding:9px 14px;
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.syn-exit:hover{background:var(--navy-line)}
body.syn .syn-exit{display:inline-flex}
.map-head{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.map-legend{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:9px 16px;background:var(--surface-2);border-top:1px solid var(--border);font-size:.7rem;color:var(--muted);font-family:var(--mono)}
.map-legend .lg{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid #fff;box-shadow:0 0 0 1px var(--border);margin-right:5px;vertical-align:-1px}
.map-legend .lg-note{display:inline-flex;align-items:center}
.map-legend .lg-x{display:inline-block;width:11px;margin-right:5px;font-weight:700;
  color:var(--text-strong);line-height:1}
/* Obiekt bez obsługi — krzyżyk zamiast kółka. Własna klasa divIcon zastępuje
   leaflet-div-icon, więc zostaje tylko wyzerować to, co mogłoby rysować tło. */
.obj-x{background:none;border:0;line-height:0}
/* Krzyżyk wchodzi w tym samym momencie co podpisy nazw (klasa show-labels).
   Z oddali punkt wygląda jak każdy inny — inaczej kilkanaście krzyżyków
   dominuje widok całego kraju. */
.obj-x .x-krzyz{display:none}
.leaflet-container.show-labels .obj-x .x-kolko{display:none}
.leaflet-container.show-labels .obj-x .x-krzyz{display:block}
.lg-item{display:inline-flex;align-items:center;gap:0;padding:3px 8px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--muted);font:inherit;cursor:pointer;user-select:none;transition:opacity .12s,background .12s}
.lg-item:hover{background:var(--surface-2);border-color:var(--accent,#2563eb)}
.lg-item .lg-txt{line-height:1}
.lg-item.off{opacity:.4}
.lg-item.off .lg{filter:grayscale(1)}
.lg-item.off .lg-txt{text-decoration:line-through}
.map-filters{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:8px 16px;background:var(--surface);border-top:1px solid var(--border);font-size:.72rem;color:var(--muted);font-family:var(--mono)}
.map-filters .mf-label{font-weight:600;color:var(--text,#0f172a)}
.map-filters .mf-item{display:inline-flex;align-items:center;gap:6px}
.map-filters .mf-item>span{white-space:nowrap}
.map-filters select{padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);font:inherit;color:inherit;min-width:150px}

/* Terminal logów (pulpit) */
.term{background:var(--navy);border:1px solid var(--navy-line);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;height:340px;box-shadow:var(--shadow)}
.term-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--navy-line);background:rgba(15,23,42,.6)}
.term-h .t{color:#fff;font-weight:600;font-size:.86rem;display:flex;align-items:center;gap:8px;margin:0}
.term-h .t .i{color:var(--amber)}
.term-live{display:flex;align-items:center;gap:6px;font-size:.6rem;text-transform:uppercase;letter-spacing:.09em;color:#4ade80;font-family:var(--mono)}
.term-live .d{width:8px;height:8px;border-radius:50%;background:#22c55e}
.term-body{flex:1;overflow-y:auto;padding:14px 16px;font-family:var(--mono);font-size:.72rem;line-height:1.75;background:#0f172a;color:#cbd5e1}
.log-line{display:flex;gap:10px;padding:2px 5px;border-radius:3px;margin-bottom:1px;align-items:baseline}
.log-line .ts{color:#64748b;flex:none}
.log-line .tag{flex:none;white-space:nowrap;min-width:150px}
.log-line .msg{color:#cbd5e1;word-break:break-word;flex:1;min-width:0}
.log-info .tag{color:#60a5fa}
.log-sync .tag{color:#4ade80}
.log-warn{background:rgba(30,41,59,.5)} .log-warn .tag{color:#fbbf24} .log-warn .msg{color:#fde68a}
.log-err{background:rgba(127,29,29,.28);border:1px solid rgba(153,27,27,.5)} .log-err .tag{color:#f87171;font-weight:700} .log-err .msg{color:#fca5a5}

/* Toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(140%);
  background:var(--navy);color:#fff;padding:11px 18px;border-radius:6px;z-index:1000;
  box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .25s;max-width:90vw;font-size:.86rem}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--alert)}.toast.ok{background:var(--ok)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(2,6,23,.55);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto}
.modal{background:var(--surface);border-radius:var(--radius);width:100%;max-width:580px;box-shadow:0 24px 60px rgba(0,0,0,.4);margin:auto;border:1px solid var(--border)}
.modal-h{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--surface-2)}
.modal-h strong{text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;color:var(--text-strong)}
.modal-b{padding:18px}
.spin{width:26px;height:26px;border:3px solid var(--border-soft);border-top-color:var(--primary);border-radius:50%;animation:sp .7s linear infinite;margin:36px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{text-align:center;color:var(--muted);padding:40px 12px;font-size:.88rem}
.flash{padding:10px 14px;border-radius:6px;margin-bottom:12px;font-size:.86rem;border:1px solid transparent}
.flash-err{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.flash-ok{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.flash-warn{background:#fef3c7;color:#92400e;border-color:#fde68a}

/* Historia zmian obiektu */
.hist-changes{margin-top:6px;display:flex;flex-direction:column;gap:2px}
.hist-change{font-size:.82rem;font-family:var(--mono);line-height:1.5;word-break:break-word}
.hist-field{color:var(--muted)}
.hist-old{color:#b91c1c;text-decoration:line-through}
.hist-arrow{color:var(--muted)}
.hist-new{color:#15803d;font-weight:600}
.badge-cel{background:#e0e7ff;color:#3730a3;border-color:#c7d2fe;font-size:.68rem}

/* Kolory etykiet celów — nazwy muszą się zgadzać z CELE_KOLORY_DOZWOLONE w app.py.
   Brak klasy = wygląd domyślny (.badge-cel powyżej). */
.cel-niebieski{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
.cel-morski{background:#ccfbf1;color:#0f766e;border-color:#99f6e4}
.cel-zielony{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.cel-zolty{background:#fef3c7;color:#b45309;border-color:#fde68a}
.cel-pomaranczowy{background:#ffedd5;color:#c2410c;border-color:#fed7aa}
.cel-czerwony{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.cel-rozowy{background:#fce7f3;color:#be185d;border-color:#fbcfe8}
.cel-fioletowy{background:#ede9fe;color:#6d28d9;border-color:#ddd6fe}
.cel-szary{background:#f1f5f9;color:#475569;border-color:#e2e8f0}

/* Kropka przy nazwie celu w podsumowaniu raportu */
.cel-kropka{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:6px;background:currentColor;vertical-align:baseline}

/* Wybór koloru w Administracja → Cele notatek */
.kolor-wybor{display:flex;gap:5px;flex-wrap:wrap}
/* Obwódka bierze kolor tekstu etykiety (currentColor), bo same pastelowe tła
   są na kółku 22 px zbyt blade, żeby je od siebie odróżnić. */
.kolor-prob{width:22px;height:22px;padding:0;border-radius:50%;
  border:2px solid currentColor;cursor:pointer}
.kolor-prob.sel{outline:2px solid var(--primary);outline-offset:2px}
.kolor-prob.cel-domyslny{background:#e0e7ff;color:#3730a3}

/* ── Tablica (korkowa) ─────────────────────────────────────────────── */
.board-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.board-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--border);
  border-radius:16px;background:var(--surface);color:var(--text);font:inherit;font-size:.8rem;cursor:pointer;
  box-shadow:var(--shadow);transition:.12s}
.board-chip:hover{border-color:var(--sand)}
.board-chip.off{opacity:.45}
.board-chip.off .cnt{opacity:.6}
.board-chip .cnt{font-family:var(--mono);font-size:.72rem;color:var(--muted);
  background:var(--surface-3);border-radius:8px;padding:0 6px;min-width:20px;text-align:center}
.board-chip .dot{width:9px;height:9px;border-radius:2px;flex:none}
.dot-tasks{background:#f59e0b}.dot-notes{background:#e2e8f0;border:1px solid #cbd5e1}
.dot-changes{background:#3b82f6}.dot-presence{background:#16a34a}

/* Korek: ciepłe tło z drobnym ziarnem (bez plików graficznych — CSP) */
.corkboard{
  background-color:#c8a072;
  background-image:
    radial-gradient(circle at 15% 22%, rgba(120,72,32,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 8%, rgba(120,72,32,.13) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 71%, rgba(140,92,44,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 55%, rgba(110,66,28,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 8% 88%, rgba(150,100,50,.13) 0 2px, transparent 3px);
  background-size:38px 38px,53px 53px,47px 47px,61px 61px,43px 43px;
  border:1px solid #8a6134;border-radius:var(--radius);
  box-shadow:inset 0 0 44px rgba(90,54,20,.32);
  padding:18px;min-height:420px}
/* Siatka kart generowanych. Odstęp u góry ustawia JS tak, żeby żadna karta
   nie chowała się pod fiszką — patrz odsunKarty() w app.js. */
.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:16px;align-items:start}
/* Warstwa fiszek: nad siatką, ale sama nie łapie kliknięć — łapią je karteczki. */
.fiszki-warstwa{position:absolute;inset:18px;pointer-events:none}
.fiszki-warstwa .fiszka{pointer-events:auto}
@media(max-width:600px){.corkboard{padding:12px}.board-grid{gap:12px;grid-template-columns:1fr}}

.pin-card{position:relative;background:#fffdf5;border-radius:2px;padding:16px 13px 10px;
  box-shadow:0 2px 5px rgba(60,35,10,.3),0 8px 16px rgba(60,35,10,.16);
  transform:rotate(var(--tilt,0deg));transition:transform .13s,box-shadow .13s}
.pin-card:hover{transform:rotate(0deg) translateY(-2px);box-shadow:0 4px 9px rgba(60,35,10,.34),0 12px 22px rgba(60,35,10,.2);z-index:2}
.pin-needle{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#f87171,#b91c1c 68%);box-shadow:0 2px 3px rgba(0,0,0,.4)}
.pin-tasks{background:#fef3c7}
.pin-notes{background:#fffdf5}
.pin-changes{background:#eff6ff}
.pin-presence{background:#f0fdf4}
.pin-tasks .pin-needle{background:radial-gradient(circle at 34% 32%,#fbbf24,#b45309 68%)}
.pin-changes .pin-needle{background:radial-gradient(circle at 34% 32%,#60a5fa,#1d4ed8 68%)}
.pin-presence .pin-needle{background:radial-gradient(circle at 34% 32%,#4ade80,#15803d 68%)}
.pin-text{font-size:.85rem;color:var(--text-strong);white-space:pre-wrap;word-break:break-word;
  line-height:1.45;margin-top:6px;max-height:8.2em;overflow:hidden}
.pin-foot{margin-top:10px;padding-top:7px;border-top:1px dashed rgba(120,90,50,.35);
  display:flex;flex-direction:column;gap:2px}
.pin-obj{font-size:.78rem;font-weight:600}
.pin-when{font-size:.7rem;color:#78716c;font-family:var(--mono)}
.pin-card{cursor:pointer}
.pin-who{margin-top:6px;font-size:.95rem;font-weight:700;color:var(--text-strong);line-height:1.25}
.pin-dist{font-size:.78rem;color:#4d7c0f;font-family:var(--mono);margin-top:2px}

/* Lista obiektów w jednym punkcie mapy */
.grp-list{display:flex;flex-direction:column;gap:1px;max-height:260px;overflow-y:auto}
.grp-item{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:4px;
  color:var(--text);font-size:.82rem;text-decoration:none}
.grp-item:hover{background:var(--surface-3);text-decoration:none}
/* Ostatnia obecność w dymku mapy — także pod każdym wierszem listy grupowej */
.map-obec{font-size:.76rem;color:var(--muted);margin-top:6px}
.map-obec strong{color:#0f766e;font-weight:600}
.grp-list .map-obec{margin:0 0 5px 19px}
.grp-dot{width:9px;height:9px;border-radius:50%;flex:none;border:1px solid #fff;box-shadow:0 0 0 1px var(--border)}
.grp-nazwa{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-typ{font-family:var(--mono);font-size:.7rem;color:var(--muted);flex:none}
.grp-badges{display:flex;gap:3px;flex:none}
.grp-badges .badge{font-size:.62rem;padding:0 4px}


/* Edytor listy wyboru w „Pola obiektów" */
.opt-box{margin-top:10px;padding:10px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:6px}
.opt-box textarea{min-height:96px;font-family:var(--mono);font-size:.8rem}

/* ── Raporty: podsumowanie słupkowe ── */
.rap-sum{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.rap-row{display:grid;grid-template-columns:minmax(120px,1.6fr) 3fr auto auto;
  align-items:center;gap:10px}
.rap-lbl{font-size:.85rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rap-track{background:var(--surface-3);height:16px;border-radius:3px;overflow:hidden}
.rap-bar{height:16px;background:var(--primary);border-radius:0 3px 3px 0;min-width:2px}
.rap-num{font-family:var(--mono);font-size:.85rem;font-weight:700;text-align:right;min-width:3ch}
.rap-sub{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-align:right;min-width:6ch}
@media (max-width:640px){
  .rap-row{grid-template-columns:minmax(90px,1.4fr) 2fr auto auto;gap:6px}
  .rap-sub{display:none}
}

/* Wydruk raportu: bez nawigacji i przycisków, treść na całą szerokość */
@media print{
  .nav,.topbar,.filters,.btn,.pager,#toast{display:none !important}
  .card{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
  .list-item{break-inside:avoid}
  main,.content{margin:0 !important;padding:0 !important;max-width:none !important}
  a{text-decoration:none;color:inherit}
}

/* ── Wybór współpracowników przy notatce ── */
.osoby-box{margin-top:8px;padding:8px 10px;background:var(--surface-2);
  border:1px solid var(--border-soft);border-radius:6px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 12px;
  max-height:220px;overflow-y:auto}
.osoby-item{font-size:.83rem;padding:3px 0}
/* display:grid powyzej nadpisuje domyslne ukrycie atrybutem hidden — trzeba jawnie */
.osoby-box[hidden]{display:none}

/* Szybki wybór współpracowników — ostatnia brygada i osoby, z którymi pracujesz najczęściej */
.chip-osoba{border-radius:999px;padding:2px 12px;font-size:.78rem}
.chip-osoba.chip-on{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ── Fiszki: własne karteczki na Tablicy, ustawiane swobodnie ──
   Leżą nad kartami generowanymi (zadania, notatki, zmiany, obecność) —
   jak prawdziwa karteczka przypięta na wierzchu korkowej tablicy. */
.corkboard{position:relative}
.fiszka{position:absolute;z-index:3;width:190px;min-height:96px;
  padding:16px 12px 8px;border-radius:2px;font-size:.85rem;line-height:1.4;
  box-shadow:0 2px 5px rgba(60,35,10,.3),0 8px 16px rgba(60,35,10,.16);
  cursor:grab;touch-action:none;user-select:none}
.fiszka.ciagnie{cursor:grabbing;z-index:9;transform:scale(1.03) rotate(-1deg);
  box-shadow:0 8px 18px rgba(60,35,10,.4),0 18px 34px rgba(60,35,10,.24)}
.fiszka-pin{position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;background:#b3402f;
  box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 -1px 1px rgba(0,0,0,.3)}
.fiszka-tresc{white-space:pre-wrap;word-break:break-word;color:#2b2418;
  max-height:11em;overflow:hidden}
.fiszka-stopka{margin-top:7px;padding-top:5px;border-top:1px dashed rgba(120,90,50,.35);
  font-size:.68rem;color:#78716c;font-family:var(--mono)}
.fiszka-akcje{position:absolute;top:3px;right:4px;display:none;gap:2px}
.fiszka:hover .fiszka-akcje{display:flex}
.fiszka-akcje .btn{padding:0 5px;font-size:.7rem;line-height:1.5;min-height:0}

.fiszka-zolty{background:#fdf6b8}
.fiszka-rozowy{background:#fbd5e0}
.fiszka-niebieski{background:#cfe4fb}
.fiszka-zielony{background:#d3f0cd}
.fiszka-bialy{background:#fbfaf6}

.board-grupa{width:auto;min-width:140px;padding:3px 8px;font-size:.8rem}

/* Na wąskim ekranie swobodne pozycjonowanie nie ma sensu — karteczki
   układają się w kolumnę nad resztą tablicy, żeby dało się je czytać. */
@media(max-width:600px){
  .fiszki-warstwa{position:static;inset:auto;pointer-events:auto;margin-bottom:12px}
  .fiszka{position:static;width:auto;margin:0 0 10px}
  .fiszka-akcje{display:flex}
}

/* ── Tablica na całym ekranie ──
   Chowamy menu, pasek górny i nagłówek; korkowa tablica dostaje całą wysokość
   okna i własne przewijanie, żeby fiszki dało się rozłożyć na dużej powierzchni. */
body.tablica-fs .sidebar,
body.tablica-fs .topbar,
body.tablica-fs .scrim,
body.tablica-fs .board-head{display:none!important}
body.tablica-fs .content{margin-left:0!important;padding:0!important;max-width:none!important}
body.tablica-fs .board-bar{margin:0;border-radius:0;position:sticky;top:0;z-index:20;
  background:var(--surface-2);border-bottom:1px solid var(--border);padding:8px 12px}
body.tablica-fs .corkboard{min-height:calc(100vh - 52px);border-radius:0;
  max-height:none;overflow:auto}
body.tablica-fs .syn-exit{display:inline-flex}
/* Przycisk wyjścia nie może zasłaniać paska filtrów */
body.tablica-fs .syn-exit{top:auto;bottom:16px;right:16px}

/* ── Zdjęcia obiektu ─────────────────────────────────────────────────── */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.galeria-el{position:relative;display:block;padding:0;text-align:left;cursor:zoom-in;
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface-3)}
.galeria-el img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.galeria-el .gp{font-size:.7rem;color:var(--muted);padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.galeria-el .gz{position:absolute;top:6px;left:6px;font-size:.62rem;background:rgba(15,23,42,.72);color:#fff;border-radius:3px;padding:1px 5px}
.galeria-mini{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.galeria-mini button{padding:0;border:1px solid var(--border);border-radius:4px;overflow:hidden;cursor:zoom-in;background:none}
.galeria-mini img{display:block;width:64px;height:48px;object-fit:cover}
/* Podpowiedź pod filtrami: skąd się wziął domyślny obszar */
.filtr-info{grid-column:1/-1;font-size:.78rem;margin-top:-4px}

/* Użytkownicy: ostatnie logowanie i ostatnia czynność */
.u-akt{font-size:.8rem;line-height:1.35;min-width:150px}
.u-opis{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Miniatury zdjęć w dymku na mapie */
.map-foto{display:flex;gap:4px;align-items:center;margin-top:6px;flex-wrap:wrap}
.map-foto-el{padding:0;line-height:0;border:1px solid #cbd5e1;border-radius:4px;overflow:hidden;
  background:none;cursor:zoom-in}
.map-foto-el img{display:block;width:52px;height:39px;object-fit:cover}
.map-foto-wiecej{font-size:.72rem;color:#64748b}

.modal.modal-foto{width:min(96vw,1100px);max-width:min(96vw,1100px)}
/* Stała wysokość ramki: przy przełączaniu zdjęć pionowych i poziomych strzałki
   i przyciski pod spodem nie skaczą. */
.foto-ramka{position:relative;display:flex;align-items:center;justify-content:center;
  height:min(70vh,760px);background:#0f172a;border-radius:4px;overflow:hidden}
.foto-duze{display:block;max-width:100%;max-height:100%}
.foto-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(15,23,42,.62);color:#fff;font-size:1.9rem;line-height:1;
  padding:0 0 4px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.foto-nav:hover{background:rgba(15,23,42,.88);border-color:#fff}
.foto-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.foto-nav-l{left:10px}
.foto-nav-p{right:10px}
@media(max-width:560px){.foto-ramka{height:55vh}.foto-nav{width:38px;height:38px;font-size:1.6rem}}
.modal-x{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  background:none;border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:1.05rem;
  line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.modal-x:hover{background:var(--surface);color:var(--text-strong);border-color:var(--muted)}