:root{
  --bg:#ffffff; --panel:#ffffff; --soft:#f7f8fb; --line:#e6e9f0; --line2:#d7dce6;
  --text:#161b26; --muted:#6b7384; --chip:#f2f4f9; --accent:#2563eb;
  --shadow:0 2px 8px rgba(20,30,60,.06);
  --shadow-md:0 8px 24px rgba(20,30,60,.10);
  --shadow-lg:0 18px 50px rgba(20,30,60,.16);
  --r:16px; --r-sm:12px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}

/* ---------- top bar (white) ---------- */
.topbar{position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1180px; margin:0 auto; padding:14px 22px; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.brand{display:flex; flex-direction:column; gap:1px; margin-right:auto}
.brand h1{margin:0; font-size:19px; letter-spacing:.2px}
.brand .sub{font-size:12px; color:var(--muted)}
.search{flex:1; min-width:200px; max-width:360px; position:relative}
.search input{width:100%; padding:9px 12px 9px 34px; border-radius:10px; background:var(--soft); border:1px solid var(--line); color:var(--text); outline:none}
.search input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12); background:#fff}
.search svg{position:absolute; left:10px; top:9px; color:var(--muted)}

.chipbar{border-top:1px solid var(--line); background:#fff}
.chips{max-width:1180px; margin:0 auto; padding:11px 22px; display:flex; gap:9px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line2); background:#fff; color:var(--text); font-size:13px; font-weight:500; cursor:pointer; transition:.12s;
}
.chip .dot{width:10px;height:10px;border-radius:50%}
.chip .cnt{color:var(--muted); font-weight:600}
.chip:hover{border-color:var(--accent)}
.chip.off{background:var(--soft); color:var(--muted); opacity:.7}
.chip.off .dot{filter:grayscale(.7); opacity:.6}
.chip-all{font-weight:600}

/* ---------- board ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:18px 22px 90px}
.hint{color:var(--muted); font-size:13px; margin:2px 0 14px}
.board{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start}

/* division card */
.divcard{
  width:268px; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; transition:.18s; cursor:pointer;
}
.divcard:hover{box-shadow:var(--shadow-md); transform:translateY(-1px)}
.divcard.expanded{width:100%; cursor:default; box-shadow:var(--shadow-md)}
.divcard .dc-top{height:6px}
.divcard .dc-head{padding:15px 16px; display:flex; gap:12px; align-items:flex-start}
.divcard .dc-emoji{width:40px;height:40px;flex:0 0 40px; border-radius:11px; display:grid; place-items:center; font-size:20px; color:#fff}
.divcard .dc-main{flex:1; min-width:0}
.divcard .dc-name{font-weight:700; font-size:15.5px}
.divcard .dc-sub{font-size:12.5px; color:var(--muted); margin-top:2px}
.divcard .dc-desc{font-size:12.5px; color:var(--muted); margin-top:9px; line-height:1.45}
.divcard .dc-chev{margin-left:auto; color:var(--muted); font-size:13px; flex:0 0 auto; align-self:center}
.divcard .dc-stats{display:flex; gap:8px; margin-top:11px; flex-wrap:wrap}
.stat{background:var(--soft); border:1px solid var(--line); border-radius:9px; padding:5px 9px; font-size:12px}
.stat b{font-size:13px}
.divcard.expanded .dc-desc{display:none}

.dc-body{border-top:1px solid var(--line); background:var(--soft); padding:8px 8px 20px; overflow:auto}

/* ---------- org tree (mind-map) ---------- */
.orgtree{padding:22px 10px 8px; min-width:max-content; margin:0 auto; width:fit-content}
.orgtree ul{position:relative; padding-top:24px; display:flex; justify-content:center; gap:6px; margin:0; list-style:none}
.orgtree > ul{padding-top:4px}
.orgtree li{list-style:none; position:relative; padding:24px 7px 0; display:flex; flex-direction:column; align-items:center}
.orgtree li::before,.orgtree li::after{content:""; position:absolute; top:0; right:50%; width:50%; height:24px; border-top:2px solid var(--line2)}
.orgtree li::after{right:auto; left:50%; border-left:2px solid var(--line2)}
.orgtree li:only-child::before,.orgtree li:only-child::after{display:none}
.orgtree li:only-child{padding-top:24px}
.orgtree li:first-child::before,.orgtree li:last-child::after{border:0}
.orgtree li:last-child::before{border-right:2px solid var(--line2); border-radius:0 7px 0 0}
.orgtree li:first-child::after{border-radius:7px 0 0 0}
.orgtree ul ul::before{content:""; position:absolute; top:0; left:50%; height:24px; border-left:2px solid var(--line2)}

/* node card (plaszka) */
.tcard{
  position:relative; background:#fff; border:1px solid var(--line); border-top:4px solid var(--accent);
  border-radius:var(--r-sm); padding:9px 12px; min-width:150px; max-width:230px; box-shadow:var(--shadow);
  cursor:pointer; transition:.12s; text-align:left;
}
.tcard:hover{box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--line2)}
.tcard.hit{outline:2px solid #f59e0b; outline-offset:2px}
.tcard .tt{font-weight:650; font-size:13.5px; line-height:1.3}
.tcard .tm{display:flex; gap:5px; flex-wrap:wrap; margin-top:7px}
.tag{font-size:10.5px; padding:2px 8px; border-radius:999px; background:var(--chip); color:var(--muted); border:1px solid var(--line); font-weight:600}
.tag.out{background:#fff1e2; color:#c2620a; border-color:#ffd9b3}
.tag.vac{background:#ffe9f0; color:#c41d62; border-color:#ffc2d8}
.tag.hc{background:#e8f1ff; color:#1d63c4; border-color:#c5dbff}
.tag.lead{background:#e9f7ec; color:#1f8a3b; border-color:#bfe8c8}
.tcard.is-root{border-top-width:0; background:linear-gradient(180deg,#fff, #fff); }
.tcard.is-root .tt{font-size:14.5px}

/* Zarząd: rada równych (4 osoby z głosem); operacje pokazane osobno */
.board-council{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; padding:22px 10px 6px}
.bcard{min-width:172px; max-width:212px; background:#fff; border:1px solid var(--line); border-top:4px solid #3f3f46; border-radius:13px; padding:12px 14px; box-shadow:var(--shadow); cursor:pointer; text-align:center; transition:.12s}
.bcard:hover{box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--line2)}
.bcard.advisor{border-style:dashed; background:#fffdf7}
.bcard .brole{font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:#6b46c1; font-weight:700}
.bcard.advisor .brole{color:#b45309}
.bcard .btitle{font-weight:700; font-size:14px; margin:5px 0 6px; line-height:1.25}
.bcard .bop{font-size:11.5px; color:var(--muted)}
.bcard .bvotes{margin-top:8px; display:inline-block; font-size:11px; font-weight:700; color:#1d4ed8; background:#e8f1ff; border:1px solid #c5dbff; border-radius:999px; padding:2px 9px}
/* live (PeopleForce) */
.tag.live{background:#e9f9ef; color:#0c8a43; border-color:#bfead0; font-weight:700}
.live-badge{font-size:10px; text-transform:none; letter-spacing:0; color:#0c8a43; background:#e9f9ef; border:1px solid #bfead0; padding:1px 7px; border-radius:999px; margin-left:6px; font-weight:700; vertical-align:middle}
.hc-live{font-size:20px; font-weight:800; color:#0c8a43}
#subtitle{font-variant-numeric:tabular-nums}
.council-note{text-align:center; color:var(--muted); font-size:12px; padding:2px 12px 14px}

/* ---------- drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(20,30,60,.30); opacity:0; pointer-events:none; transition:.18s; z-index:48}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(440px,93vw); z-index:49; background:#fff; border-left:1px solid var(--line); box-shadow:var(--shadow-lg); transform:translateX(105%); transition:.22s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column}
.drawer.open{transform:none}
.drawer .head{padding:20px 22px; border-bottom:1px solid var(--line); position:relative}
.drawer .head .divrow{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px}
.drawer .head h2{margin:9px 0 0; font-size:20px; line-height:1.3}
.drawer .close{position:absolute; top:16px; right:16px; background:var(--soft); border:1px solid var(--line); color:var(--text); width:30px;height:30px;border-radius:8px; cursor:pointer}
.drawer .close:hover{border-color:var(--accent); color:var(--accent)}
.drawer .body{padding:18px 22px; overflow:auto}
.field{margin-bottom:17px}
.field .k{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:6px}
.field .v{font-size:14px}
.field ul{margin:0; padding-left:18px}
.field li{margin:3px 0}
.kids{display:flex; flex-wrap:wrap; gap:7px}
.kids .k-chip{background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:5px 10px; font-size:12.5px; cursor:pointer}
.kids .k-chip:hover{border-color:var(--accent); color:var(--accent)}
.kids a.k-chip{text-decoration:none; color:var(--text); display:inline-block}
.kids a.k-chip.pf:hover{background:#eef4ff; border-color:var(--accent); color:var(--accent)}
.kids .k-chip{display:inline-flex; align-items:center; gap:7px}
.k-ava{width:22px; height:22px; border-radius:50%; object-fit:cover; background:#e6e9f0; display:inline-grid; place-items:center; font-size:11px; color:#6b7384; flex:0 0 22px}
.k-ava.ph{font-weight:700; text-transform:uppercase}
/* vacancies */
.tag.vac-open{background:#fff1e6; color:#c2410c; border-color:#fed7aa; font-weight:700}
.vac-list{margin-top:4px}
.vac-item{display:block; text-decoration:none; color:var(--text)}
.vac-item b{color:var(--text)}
.vchip{display:inline-block; font-size:11px; padding:1px 8px; border-radius:999px; background:var(--soft); border:1px solid var(--line); color:var(--muted); margin-right:4px; margin-top:2px}
.vchip.st{background:#eef4ff; color:#1d4ed8; border-color:#c5dbff; text-transform:capitalize}
.empty-hint{color:var(--muted); font-style:italic; font-size:13px}

/* quick zone (WPK + licznik) */
.quick{display:flex; flex-direction:column; gap:12px; margin-bottom:16px}
.qx label{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); display:block; margin-bottom:6px}
.qx input{width:100%; padding:9px 11px; border:1px solid var(--line2); border-radius:10px; font:inherit; outline:none}
.qx input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.qx.wpk{background:linear-gradient(180deg,#eefcf3,#f4fff8); border:1px solid #bfe8cd; border-radius:12px; padding:12px}
.qx.wpk label{color:#0f7a43}
.qx.wpk input{border-color:#bfe8cd; background:#fff}
.stepper{display:flex; align-items:center; gap:10px}
.stepper .st{width:34px; height:34px; border-radius:9px; border:1px solid var(--line2); background:#fff; font-size:18px; line-height:1; cursor:pointer; font-weight:700; color:var(--text)}
.stepper .st:hover{border-color:var(--accent); color:var(--accent)}
.stepper #qx-count{min-width:42px; text-align:center; font-size:20px; font-weight:700}
.qx-raw{font-size:12px; color:var(--muted)}
.tag.pr{background:#eefcf3; color:#0f7a43; border-color:#bfe8cd}
.wpk-author{font-size:10px; text-transform:none; letter-spacing:0; color:#0f7a43; background:#e7f9ee; border:1px solid #bfe8cd; padding:1px 7px; border-radius:999px; margin-left:6px; font-weight:600; vertical-align:middle}
/* mały interaktywny licznik osób w polu */
.hc-row{display:flex; align-items:center; gap:9px}
.hc-row #hc-count{font-weight:700; min-width:20px; text-align:center}
.st-sm{width:26px; height:26px; border-radius:7px; border:1px solid var(--line2); background:#fff; cursor:pointer; font-size:15px; line-height:1; font-weight:700; color:var(--text)}
.st-sm:hover{border-color:var(--accent); color:var(--accent)}
/* logo */
.brand .logo{height:30px; width:auto; display:block}

/* ---------- footer ---------- */
.foot{max-width:1180px;margin:0 auto;padding:0 22px 44px;color:var(--muted);font-size:12.5px}
.foot .services{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.foot .services .s{background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 10px;box-shadow:var(--shadow)}
.note{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:14px}

/* ---------- buttons / actions ---------- */
.actions{display:flex; gap:8px; flex-wrap:wrap}
.btn{padding:8px 12px; border-radius:10px; border:1px solid var(--line2); background:#fff; color:var(--text); cursor:pointer; font-size:13px; font-weight:600}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{filter:brightness(1.05); color:#fff}
.btn.ghost{background:transparent; border-style:dashed}
.btn.on{background:var(--accent); border-color:var(--accent); color:#fff}
.badge{display:inline-block; min-width:16px; padding:0 5px; height:16px; line-height:16px; font-size:10px; border-radius:8px; background:#ef4444; color:#fff; vertical-align:middle}
.badge:empty{display:none}

.editbar{max-width:1180px; margin:0 auto; padding:10px 22px; font-size:13px; color:#7a5a00; background:#fff8e6; border-top:1px solid #ffe6a8; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.editbar .btn{margin-left:auto}
body.editing .tcard{cursor:text}
body.editing .divcard{outline:1px dashed transparent}

/* comment badge on cards */
.tcard .cbadge{position:absolute; top:-7px; right:-7px; background:#ef4444; color:#fff; font-size:10px; min-width:16px; height:16px; line-height:16px; text-align:center; border-radius:8px; padding:0 4px}

/* ---------- editable drawer fields ---------- */
.edit-field{margin-bottom:14px}
.edit-field label{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); display:block; margin-bottom:5px}
.edit-field input, .edit-field textarea, .note-box textarea{
  width:100%; padding:8px 10px; border:1px solid var(--line2); border-radius:9px; font:inherit; color:var(--text); background:#fff; outline:none; resize:vertical;
}
.edit-field input:focus, .edit-field textarea:focus, .note-box textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.edit-actions{display:flex; gap:8px; margin:6px 0 16px}

/* comments inside drawer */
.comments{margin-top:6px}
.comments h4{margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted)}
.comment{background:var(--soft); border:1px solid var(--line); border-radius:9px; padding:8px 10px; margin-bottom:7px; font-size:13px}
.comment .meta{font-size:11px; color:var(--muted); margin-bottom:3px}
.note-box{margin-top:8px}
.note-box .row{display:flex; gap:8px; margin-top:6px}

/* ---------- left notes panel (chat) ---------- */
.notespanel{position:fixed; top:0; left:0; height:100%; width:min(420px,93vw); z-index:31; background:#fff; border-right:1px solid var(--line); box-shadow:var(--shadow-lg); transform:translateX(-105%); transition:.22s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column}
.notespanel.open{transform:none}
.np-head{padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between}
.np-head .close{background:var(--soft); border:1px solid var(--line); width:30px;height:30px;border-radius:8px; cursor:pointer}
.np-list{flex:1; overflow:auto; padding:14px 18px; display:flex; flex-direction:column; gap:9px}
.np-item{background:var(--soft); border:1px solid var(--line); border-radius:11px; padding:10px 12px; font-size:13.5px}
.np-item .meta{font-size:11px; color:var(--muted); margin-bottom:4px; display:flex; justify-content:space-between; gap:8px}
.np-item .ctx{color:var(--accent); cursor:pointer}
.np-empty{color:var(--muted); font-style:italic; font-size:13px; text-align:center; margin-top:20px}
.np-form{border-top:1px solid var(--line); padding:12px 16px; display:flex; flex-direction:column; gap:8px}
.np-form textarea{width:100%; padding:9px 11px; border:1px solid var(--line2); border-radius:10px; font:inherit; resize:vertical; outline:none}
.np-form textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.np-formrow{display:flex; gap:8px}
.np-formrow .btn{flex:1}

/* ---------- mapa (pełny ekran mind-map) ---------- */
[hidden]{display:none !important}
.mapview{position:fixed; inset:0; z-index:40; background:radial-gradient(900px 500px at 50% -5%, #f3f6ff 0%, #fff 55%); display:flex; flex-direction:column}
.mv-bar{padding:13px 22px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.9); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.mv-bar b{font-size:16px}
.mv-sub{color:var(--muted); font-size:12px; margin-left:8px}
.mv-actions{display:flex; gap:8px}
.mv-canvas{flex:1; overflow:auto; padding:34px 30px 60px}
.mv-canvas .orgtree{margin:0 auto; width:max-content}
.map-zoom{width:max-content; margin:0 auto}
.mv-zoomval{font-size:12px; color:var(--muted); min-width:46px; text-align:center; font-variant-numeric:tabular-nums}

/* animacja: węzły „wyrastają”, po liniach przebiega podświetlenie — od CEO w dół */
.mapview .orgtree .tcard{ animation:nodePop .5s cubic-bezier(.2,.85,.25,1) both; animation-delay:calc(var(--lvl,0)*0.14s + .08s) }
.mapview .orgtree li::before,
.mapview .orgtree li::after,
.mapview .orgtree ul ul::before{ animation:lineDraw .42s ease both; animation-delay:calc(var(--lvl,0)*0.14s) }
@keyframes nodePop{ 0%{opacity:0; transform:translateY(-12px) scale(.9)} 55%{opacity:1; box-shadow:0 0 0 4px rgba(37,99,235,.18)} 100%{opacity:1; transform:none} }
@keyframes lineDraw{ 0%{opacity:0} 35%{opacity:1; border-color:var(--accent)} 100%{opacity:1} }
.mapview .orgtree{padding-top:6px}
@media (prefers-reduced-motion:reduce){
  .mapview .orgtree .tcard,.mapview .orgtree li::before,.mapview .orgtree li::after,.mapview .orgtree ul ul::before{animation:none}
}

@media (max-width:560px){
  .divcard{width:100%}
  .tcard{max-width:180px}
}