/* Система взаємодії мешканців ОСББ — базова тема (темна). */
:root{
  --bg:#0f1117; --panel:#171a23; --panel2:#1e222e; --text:#e6e8ee;
  --muted:#8b90a0; --accent:#c9a84c; --accent2:#c9a84c; --line:#2a2f3d;
  --ok:#10b981; --err:#ef4444; --info:#3b82f6; --purple:#8b5cf6;
  --on-accent:#1a1a1a; --shadow:none;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.45}
a{color:var(--accent);text-decoration:none}
h1{font-size:1.4rem;margin:.2rem 0 1rem}
h2{font-size:1.05rem;margin:1.2rem 0 .5rem;color:var(--accent)}
small{color:var(--muted);font-weight:normal}
.hint{color:var(--muted);font-size:.9rem}

/* Topbar */
.topbar{display:flex;align-items:center;gap:.6rem;background:var(--panel);
  padding:.6rem 1rem;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:600}.spacer{flex:1}.who{color:var(--muted);font-size:.85rem}
.data-updated{color:var(--muted);font-size:.78rem;white-space:nowrap;cursor:help}
@media(max-width:640px){.data-updated{display:none}}
.menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.3rem;cursor:pointer}
.lang-switch{display:flex;gap:.15rem;font-size:.78rem}
.lang-switch a{padding:.12rem .4rem;border-radius:5px;color:var(--muted);text-decoration:none;border:1px solid transparent}
.lang-switch a.on{background:var(--accent);color:var(--on-accent);font-weight:700}
.lang-switch a:hover{border-color:var(--line)}
.login-card .lang-switch{justify-content:center;margin-bottom:.6rem}

/* Layout */
.wrap{display:flex;min-height:calc(100vh - 50px)}
.sidebar{width:220px;background:var(--panel);border-right:1px solid var(--line);padding:.8rem}
.sidebar nav{display:flex;flex-direction:column;gap:.15rem}
.sidebar a{padding:.5rem .7rem;border-radius:6px;color:var(--text)}
.sidebar a:hover{background:var(--panel2)}
.sidebar a.active{background:var(--accent);color:var(--on-accent);font-weight:600}
.nav-sep{margin:.7rem 0 .2rem;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
.content{flex:1;padding:1.2rem 1.5rem;max-width:900px}

/* Login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:var(--panel);padding:2rem;border-radius:12px;border:1px solid var(--line);
  width:340px;display:flex;flex-direction:column;gap:.8rem}
.login-card h1{text-align:center;font-size:1.1rem}

/* Forms */
label{display:block;margin:.5rem 0;color:var(--muted);font-size:.85rem}
input,select,textarea{width:100%;margin-top:.25rem;padding:.55rem .65rem;background:var(--panel2);
  border:1px solid var(--line);border-radius:6px;color:var(--text);font-size:16px}
button{background:var(--accent);color:var(--on-accent);border:none;padding:.6rem 1rem;border-radius:6px;
  font-weight:600;cursor:pointer;font-size:.95rem}
button.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
button.primary{background:var(--ok);color:#fff}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.card{background:var(--panel);padding:1.2rem 1.4rem;border-radius:10px;border:1px solid var(--line)}

/* Небезпечні дії + журнал дій */
.btn-danger,button.btn-danger{background:var(--err);color:#fff;border:none}
.btn-mini{background:none;border:1px solid var(--line);color:var(--muted);border-radius:5px;
  padding:.1rem .4rem;font-size:.75rem;cursor:pointer;width:auto}
.audit-act{display:inline-block;padding:.05rem .45rem;border-radius:8px;font-size:.72rem;font-weight:700;background:var(--line)}
.audit-delete{background:var(--err);color:#fff}.audit-edit{background:var(--info);color:#fff}
.audit-create{background:var(--ok);color:#fff}.audit-status{background:var(--purple);color:#fff}
.audit-det{margin-top:.2rem}.audit-det>summary{cursor:pointer;color:var(--muted);font-size:.78rem}
.audit-det pre{white-space:pre-wrap;background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;padding:.5rem;font-size:.78rem;margin-top:.3rem}
/* Блок журналу: десктоп — вбудований; мобільний — кнопка + нижня шторка */
.audit-panel{margin-top:1rem}
.audit-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.audit-toggle{display:none}
.audit-hide{display:none}
.audit-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40;display:none}
@media(max-width:760px){
  .audit-toggle{display:block;position:fixed;left:50%;transform:translateX(-50%);bottom:.9rem;z-index:38;
    width:auto;background:var(--accent);color:var(--on-accent);border:none;border-radius:24px;
    padding:.6rem 1.3rem;font-weight:700;font-size:.9rem;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.55)}
  body.audit-open .audit-toggle{display:none}
  .audit-hide{display:inline-block}
  .audit-panel{position:fixed;left:0;right:0;bottom:0;max-height:80dvh;overflow:auto;z-index:45;margin:0;
    border-radius:14px 14px 0 0;transform:translateY(102%);transition:transform .25s ease;
    box-shadow:0 -8px 22px rgba(0,0,0,.55)}
  body.audit-open .audit-panel{transform:none}
  body.audit-open .audit-backdrop{display:block}
}

/* Flash */
.flash{padding:.7rem 1rem;border-radius:8px;margin:.8rem 0}
.flash.ok{background:rgba(16,185,129,.15);border:1px solid var(--ok)}
.flash.error{background:rgba(239,68,68,.15);border:1px solid var(--err)}
.flash.info{background:rgba(59,130,246,.15);border:1px solid var(--info)}
.error{color:var(--err);font-size:.9rem}

/* Cards/stats */
.cards{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1rem 1.4rem;
  display:flex;flex-direction:column;min-width:120px}
.stat .n{font-size:1.6rem;font-weight:700;color:var(--accent)}
.stat span:last-child{color:var(--muted);font-size:.8rem}

/* Зведення балансу: три рядки (надплати / борг / нульовий) */
.balance-box{display:inline-flex;flex-direction:column;justify-content:center;gap:.15rem;
  font-size:.72rem;line-height:1.35;border:1px solid var(--line);border-radius:10px;
  padding:.6rem .9rem;background:var(--panel)}
.balance-box .b-over{color:var(--info)}
.balance-box .b-debt{color:var(--err)}
.balance-box .b-zero{color:var(--muted)}
.balance-box b{color:inherit}
/* На будинку — повна ширина картки, під шапкою (видиме і коли будинок згорнутий) */
.chart .bld-balance{border:0;border-top:1px solid var(--line);border-radius:0;width:100%;
  background:rgba(255,255,255,.02);padding:.45rem .8rem;font-size:.66rem}

/* Tables */
.tbl{width:100%;border-collapse:collapse;margin-top:1rem;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tbl th,.tbl td{padding:.55rem .7rem;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem}
.tbl th{background:var(--panel2);color:var(--muted);font-weight:600}
.tbl tr:last-child td{border-bottom:none}
.tbl a{margin-right:.5rem}

/* Chips */
.chips{list-style:none;padding:0;margin:.5rem 0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{background:var(--panel2);border:1px solid var(--line);border-radius:20px;
  padding:.3rem .7rem;display:flex;align-items:center;gap:.4rem;font-size:.85rem}
button.x{background:none;border:none;color:var(--err);cursor:pointer;font-size:1rem;padding:0 .2rem}
.inline-add{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap;margin-top:.6rem}
.inline-add select{width:auto;min-width:220px}
.inline-add button{margin-top:0}
.btn-link{align-self:center;color:var(--muted)}
.card+.card{margin-top:1rem}

/* Dictionaries nav */
.dict-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0}
.dict-pill{background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:.35rem .8rem;font-size:.85rem;color:var(--text);display:inline-flex;align-items:center;gap:.4rem}
.dict-pill:hover{border-color:var(--accent)}
.dict-pill.active{background:var(--accent);color:var(--on-accent);font-weight:600}
.dict-pill .badge{background:var(--panel2);color:var(--muted);border-radius:10px;padding:0 .45rem;font-size:.75rem}
.dict-pill.active .badge{background:rgba(0,0,0,.2);color:var(--on-accent)}

/* Premise cards / saldo */
.premise-card{display:flex;flex-direction:column;gap:.4rem;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;min-width:200px;color:var(--text)}
.premise-card:hover{border-color:var(--accent)}
.pc-name{font-weight:600}
.pc-saldo{font-size:.9rem;color:var(--muted)}
.pc-saldo.err b{color:var(--err)}.pc-saldo.ok b{color:var(--ok)}.pc-saldo.info b{color:var(--info)}
.saldo-box{display:flex;align-items:baseline;gap:.6rem;margin-top:.6rem;padding:.8rem 1rem;
  border-radius:8px;background:var(--panel2)}
.saldo-box b{font-size:1.5rem}
.saldo-box.err b{color:var(--err)}.saldo-box.ok b{color:var(--ok)}.saldo-box.info b{color:var(--info)}
.saldo-box small{color:var(--muted)}

/* Оплата за реквізитами (QR/посилання НБУ) — згорнута картка, що розкривається вниз */
.pay-box{margin-top:.8rem;border:1px solid var(--accent);border-radius:10px;overflow:hidden}
.pay-box>summary{list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.75rem 1rem;font-weight:700;color:var(--text);background:rgba(201,168,76,.12)}
.pay-box>summary::-webkit-details-marker{display:none}
.pay-box>summary:hover{background:rgba(201,168,76,.20)}
.pay-head-l{display:inline-flex;align-items:baseline;gap:.5rem}
.pay-head-l b{color:var(--accent);font-size:1.15rem}
.pay-chevron{color:var(--accent);transition:transform .15s ease}
.pay-box[open] .pay-chevron{transform:rotate(180deg)}
.pay-box[open]>summary{border-bottom:1px solid var(--line)}
.pay-panel{padding:1rem 1.1rem;background:var(--panel2)}
.pay-hint{margin:.1rem 0 .8rem}
.pay-grid{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:flex-start}
.pay-qr{flex:0 0 auto;background:#fff;padding:8px;border-radius:6px;line-height:0;min-width:204px;min-height:204px}
.pay-side{flex:1;min-width:200px;display:flex;flex-direction:column;gap:.5rem}
.pay-open{display:inline-flex;align-items:center;gap:.4rem;font-size:1.02rem;font-weight:700}
.pay-open-note{margin:0}
.pay-req{margin-top:.9rem}
.pay-req td{vertical-align:top}
.pay-req code{word-break:break-all}
.pay-copy{background:none;border:1px solid var(--line);color:var(--muted);border-radius:5px;
  padding:.05rem .4rem;font-size:.8rem;cursor:pointer;width:auto;margin-left:.4rem}
.pay-help{margin-top:.5rem}
.pay-help>summary{cursor:pointer;color:var(--muted);font-size:.88rem;list-style:none}
.pay-help>summary::-webkit-details-marker{display:none}
.pay-help>summary::before{content:"\2139 "}
.pay-help p{margin:.4rem 0 0}
.pay-via{display:block;margin:.2rem 0 .35rem;font-weight:600}
.pay-select-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.9rem}
.pay-select{flex:1 1 160px;width:auto;min-width:150px}
.pay-select-row .pay-go{width:auto;margin-top:0;white-space:nowrap}

/* Status badges + filter bar */
.status-badge{display:inline-block;padding:.15rem .55rem;border-radius:12px;color:#fff;font-size:.78rem;font-weight:600}
.fb{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.fb select{width:auto;min-width:160px}
.fb-range{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;color:var(--text);white-space:nowrap}
.fb-range input{width:5.5rem;min-width:5.5rem}
.btn-apply{background:var(--accent);color:var(--on-accent);border:none;border-radius:6px;
  padding:.45rem .9rem;font-weight:700;cursor:pointer;font-size:.85rem}
.pager{display:flex;gap:1rem;align-items:center;justify-content:center;margin:1rem 0}
.tbl tr[onclick]:hover td{background:var(--panel2)}

/* Envelope */
.envelope{position:relative;font-size:1.2rem;text-decoration:none}
.env-badge{position:absolute;top:-6px;right:-10px;background:var(--err);color:#fff;
  border-radius:10px;font-size:.65rem;padding:0 .35rem;font-weight:700}
.envelope.blink{animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:.35}}

/* Chat */
.chat{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.chat-msg{border:1px solid var(--line);border-radius:10px;padding:.6rem .9rem;max-width:80%}
.chat-msg.res{align-self:flex-start;background:var(--panel)}
.chat-msg.mgr{align-self:flex-end;background:var(--panel2);border-color:var(--accent)}
.chat-head{font-size:.75rem;color:var(--muted);margin-bottom:.3rem;display:flex;gap:.5rem;flex-wrap:wrap}
.chat-head b{color:var(--text)}
.chat-body{white-space:pre-wrap}
.chat-reply textarea{margin-bottom:.4rem}
details.card summary{cursor:pointer;font-weight:600}

/* ===== API Explorer вбудований (iframe) ===== */
/* На всю ширину + меню сайту згорнуте (як на мобільному) на будь-якому екрані.
   Ціла сторінка API з її власним меню — всередині сайту; сайтове меню — за ☰. */
body:has(.api-embed) .content{max-width:none;padding:0}
body:has(.tg-prem-wrap) .content{max-width:none}
body:has(.api-embed) .menu-toggle{display:block}
body:has(.api-embed) .sidebar{position:fixed;left:-240px;top:50px;bottom:0;transition:left .2s;z-index:20}
body:has(.api-embed).nav-open .sidebar{left:0}

/* ===== Візуалізація (ОСББ + продаж) — блок-схема (org-chart, .chart) ===== */
/* Сторінка з блок-схемою — на всю ширину + фіксована висота робочої області,
   щоб у .chart-wrap був і горизонтальний, і ВЕРТИКАЛЬНИЙ скрол (drag в усі боки). */
body:has(.chart-wrap) .content{max-width:none;display:flex;flex-direction:column;
  height:calc(100dvh - 50px);overflow:hidden}
.chart-wrap{margin-top:1.5rem;overflow:auto;padding:1rem .5rem 2rem;
  cursor:grab;user-select:none;flex:1 1 auto;min-height:0}

/* ── Візуалізації: схема головна; ВІДБОРИ — висувна панель справа (на всіх
   екранах), на десктопі відкрита за замовчуванням, ховається кнопкою ⚙.
   Інфо/статистика: на десктопі вбудована, на мобільному — оверлей за ℹ. ── */
.viz-toolbar{display:flex;align-items:center;gap:.5rem;justify-content:flex-end;margin:0 0 .6rem}
.viz-toolbar .vt-title{display:none}
.viz-toolbar .vt-btn{background:var(--panel2);border:1px solid var(--line);color:var(--text);
  border-radius:6px;padding:.3rem .65rem;font-size:1.1rem;line-height:1;cursor:pointer}

.viz-close{display:none;width:100%;margin:0 0 .7rem;background:var(--panel2);
  border:1px solid var(--line);color:var(--text);border-radius:6px;
  padding:.5rem;font-weight:600;font-size:.9rem;cursor:pointer}
.viz-filters .viz-close{display:block}

.viz-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:25;display:none}

/* Панель відборів — off-canvas справа (всі екрани) */
.viz-filters.fb{position:fixed;top:50px;right:0;height:calc(100dvh - 50px);width:320px;max-width:85vw;
  z-index:35;background:var(--panel);border-left:1px solid var(--line);padding:1rem;overflow:auto;
  display:flex;flex-direction:column;align-items:stretch;gap:.7rem;margin:0;
  transform:translateX(110%);transition:transform .2s ease;box-shadow:-5px 0 18px rgba(0,0,0,.5)}
body.filters-open .viz-filters.fb{transform:none}

/* Десктоп: відкрита панель «відсуває» контент праворуч (без перекриття);
   інфо можна сховати кнопкою ℹ (за замовчуванням показано). */
@media(min-width:761px){
  body:has(.chart-wrap) .content{transition:padding-right .2s ease}
  body.filters-open:has(.chart-wrap) .content{padding-right:calc(320px + 1.5rem)}
  body.info-closed .viz-info{display:none}
}

@media(max-width:760px){
  .viz-toolbar{justify-content:flex-start;background:var(--panel);
    padding:.45rem .5rem;border-bottom:1px solid var(--line);margin:-1rem -1rem .5rem}
  .viz-toolbar .vt-title{display:block;flex:1;font-weight:600;font-size:.95rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .viz-toolbar .vt-info{display:block}
  .viz-info .viz-close{display:block}
  /* Інфо/статистика — оверлей зверху (лише мобільний) */
  .viz-info{position:fixed;left:0;right:0;top:50px;z-index:30;background:var(--panel);
    border-bottom:1px solid var(--line);padding:.8rem;max-height:78vh;overflow:auto;
    transform:translateY(-115%);transition:transform .2s ease;box-shadow:0 10px 22px rgba(0,0,0,.5)}
  body.info-open .viz-info{transform:none}
  body.info-open .viz-backdrop,body.filters-open .viz-backdrop{display:block}
}
.chart-wrap.dragging{cursor:grabbing}
.chart-wrap.dragging *{cursor:grabbing}

/* Дерево: горизонтальні рівні, вузли центровані над дітьми, лінії-конектори.
   Класичний CSS org-chart на вкладених <ul>/<li> з ::before/::after. */
.chart, .chart ul{display:flex;justify-content:center;padding-top:1.4rem;position:relative}
/* Корінь схеми: ширина за контентом + авто-поля - центр коли влазить, інакше
   вирівнювання вліво (щоб ліва частина не обрізалась і нормально скролилась). */
.chart{justify-content:flex-start;width:max-content;margin:0 auto}
.chart li{list-style:none;position:relative;padding:1.4rem .5rem 0;
  display:flex;flex-direction:column;align-items:center}

/* Вертикаль від вузла вгору + горизонтальна планка над групою дітей */
.chart li::before, .chart li::after{content:'';position:absolute;top:0;right:50%;
  width:50%;height:1.4rem;border-top:2px solid var(--line)}
.chart li::after{right:auto;left:50%;border-left:2px solid var(--line)}
/* Один-єдиний нащадок — лише пряма вертикаль без планки */
.chart li:only-child::before, .chart li:only-child::after{display:none}
.chart li:only-child{padding-top:1.4rem}
/* Крайні діти не малюють зовнішнє «крило» планки */
.chart li:first-child::before, .chart li:last-child::after{border:0}
.chart li:last-child::before{border-right:2px solid var(--line);border-radius:0 6px 0 0}
.chart li:first-child::after{border-radius:6px 0 0 0}
/* Вертикаль від планки вниз до самого вузла */
.chart ul li .node::before{content:'';position:absolute;top:-1.4rem;left:50%;
  width:0;height:1.4rem;border-left:2px solid var(--line)}
/* Кореневий рівень (ділянки) — без верхніх ліній */
.chart > li{padding-top:0}
.chart > li::before, .chart > li::after{display:none}
.chart > li > .node::before{display:none}

/* Базовий вузол */
.node{position:relative;display:inline-block;padding:.5rem 1rem;font-weight:600;
  white-space:nowrap;border:2px solid var(--line);background:var(--panel);
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.node.ghost{opacity:.6;border-style:dashed}

/* Форма + колір на кожен рівень */
.chart .lvl-plot{border-radius:6px;border-color:var(--accent);color:var(--accent);
  background:linear-gradient(90deg,rgba(201,168,76,.2),var(--panel));font-size:1.05rem}
.chart .lvl-queue{border-radius:18px;border-color:var(--purple);color:#c4b5fd;
  background:rgba(139,92,246,.12)}
.chart .lvl-complex{border-radius:999px;border-color:var(--info);color:#93c5fd;
  background:rgba(59,130,246,.12);padding:.5rem 1.4rem}

/* Будинок — картка-прямокутник з акцентною шапкою, квартири стовпчиком всередині */
.chart .lvl-building{padding:0;border-radius:12px;border-color:var(--ok);
  white-space:normal;min-width:240px;max-width:300px;text-align:left;
  background:var(--panel);overflow:hidden}
.chart .bld-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;cursor:pointer;
  padding:.6rem .8rem;background:rgba(16,185,129,.14);border-bottom:2px solid var(--ok)}
.chart .bld-head:hover{background:rgba(16,185,129,.22)}
.chart .bld-head strong{font-size:1rem;color:var(--text)}
.chart .bld-toggle{display:inline-block;font-size:.7rem;color:var(--ok);transition:transform .15s}
.chart .lvl-building:not(.collapsed) .bld-toggle{transform:rotate(90deg)}
.chart .lvl-building.collapsed{min-width:0}
.chart .lvl-building.collapsed .bld-head{border-bottom:0}
.chart .lvl-building.collapsed .bld-flats{display:none}
.chart .lvl-building.collapsed .bld-floors{display:none}
/* Подвійна стрілка — розгорнути будинок з усіма поверхами */
.chart .bld-expand-all{cursor:pointer;font-size:.85rem;margin-left:.2rem;opacity:.8}
.chart .bld-expand-all:hover{opacity:1}
/* Рівень поверхів усередині будинку */
.chart .bld-floors{display:flex;flex-direction:column;gap:.4rem;padding:.6rem .7rem}
.chart .floor{border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}
.chart .floor-head{display:flex;align-items:center;gap:.4rem;cursor:pointer;
  padding:.35rem .55rem;font-size:.8rem;font-weight:600;color:var(--text);background:rgba(255,255,255,.03)}
.chart .floor-head:hover{background:var(--panel2)}
.chart .floor-toggle{display:inline-block;font-size:.6rem;color:var(--muted);transition:transform .15s}
.chart .floor:not(.collapsed) .floor-toggle{transform:rotate(90deg)}
.chart .floor-count{margin-left:auto;background:var(--line);color:var(--muted);border-radius:8px;padding:.05rem .45rem;font-size:.65rem}
.chart .floor-flats{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}
.chart .floor.collapsed .floor-flats{display:none}
.chart .bld-adres{color:var(--muted);font-size:.75rem;width:100%;font-weight:normal}
.chart .bld-count{margin-left:auto;background:var(--ok);color:#fff;border-radius:10px;
  padding:.1rem .5rem;font-size:.7rem;font-weight:700}
.chart .bld-flats{padding:.7rem .8rem}

/* Квартири — стовпчик вниз під будинком (спільне для обох візуалізацій) */
.bld-flats{display:flex;flex-direction:column;gap:.5rem}
.flat{border-radius:8px;padding:.5rem .65rem;border-left:4px solid var(--line);
  background:var(--panel2);transition:transform .12s}
.flat.ok{border-left-color:var(--ok)}
.flat.debt{border-left-color:var(--err)}
.flat.over{border-left-color:var(--info)}
.flat.no-contract{border-left-color:var(--muted);opacity:.75}
/* Шапка квартири: назва + кнопка деталей (деталі показані одразу) */
.flat-head{display:flex;align-items:center;gap:.4rem}
.flat-money{margin-left:auto;text-decoration:none;font-size:1rem;line-height:1;
  padding:.1rem .3rem;border-radius:6px;background:var(--panel);border:1px solid var(--line)}
.flat-money:hover{background:var(--accent)}
.flat-body{margin-top:.3rem}
.flat-name{font-weight:700;font-size:.92rem}

/* Плаваюча кнопка згортання будинків (з'являється, коли є розгорнуті) */
.collapse-fab{position:fixed;right:1.2rem;bottom:1.2rem;z-index:50;display:none;
  background:var(--ok);color:#fff;border:none;border-radius:24px;padding:.7rem 1.2rem;
  font-size:.9rem;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.collapse-fab:hover{filter:brightness(1.1)}
.collapse-fab.show{display:block}
.flat-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem}
.flat-meta span{font-size:.68rem;color:var(--muted);background:var(--panel);border-radius:4px;padding:.05rem .35rem}
.flat-contract{font-size:.72rem;margin-top:.35rem;color:#93c5fd}
.flat-contract.none{color:var(--muted);font-style:italic}
.flat-date{color:var(--muted);margin-left:.3rem}
.flat-saldo{font-size:.75rem;margin-top:.25rem}
.flat-saldo.debt b{color:var(--err)}
.flat-saldo.over b{color:var(--info)}
.flat-saldo.ok b{color:var(--ok)}
.flat-users{font-size:.7rem;color:var(--accent);margin-top:.25rem}

/* ===== Візуалізація продажу — статуси ===== */
/* Кольори статусів (ліва смужка + бейдж) */
.flat.st-free     {border-left-color:#10b981}
.flat.st-reserved {border-left-color:#f59e0b}
.flat.st-sold     {border-left-color:#3b82f6}
.flat.st-osbb     {border-left-color:#c9a84c}
.flat.st-cancel   {border-left-color:#ef4444;opacity:.7}
.flat.st-other    {border-left-color:var(--muted)}

.flat-status{display:inline-block;margin-top:.35rem;font-size:.7rem;font-weight:700;
  padding:.1rem .5rem;border-radius:10px;color:#fff}
.flat-status.st-free{background:#10b981}
.flat-status.st-reserved{background:#f59e0b;color:#1a1a1a}
.flat-status.st-sold{background:#3b82f6}
.flat-status.st-osbb{background:#c9a84c;color:#1a1a1a}
.flat-status.st-cancel{background:#ef4444}
.flat-status.st-other{background:var(--muted)}
.flat-comment{font-size:.68rem;color:var(--muted);margin-top:.25rem;font-style:italic}

/* Карти-статистика з кольоровою рамкою */
.stat.st-free{border-color:#10b981}
.stat.st-reserved{border-color:#f59e0b}
.stat.st-sold{border-color:#3b82f6}
.stat.st-osbb{border-color:#c9a84c}
.stat.st-cancel{border-color:#ef4444}

/* Легенда */
.viz-legend{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.viz-legend .lg{font-size:.72rem;font-weight:700;padding:.15rem .6rem;border-radius:10px;color:#fff}
.viz-legend .lg.st-free{background:#10b981}
.viz-legend .lg.st-reserved{background:#f59e0b;color:#1a1a1a}
.viz-legend .lg.st-sold{background:#3b82f6}
.viz-legend .lg.st-osbb{background:#c9a84c;color:#1a1a1a}
.viz-legend .lg.st-cancel{background:#ef4444}
.viz-legend .lg.st-other{background:var(--muted)}

/* Сітка чекбоксів (будинки під шефством менеджера ОСББ) */
.osbb-buildings{margin:.5rem 0}
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.3rem .8rem;
  margin:.4rem 0;max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:.6rem;background:var(--panel2)}
.chk{display:flex;align-items:center;gap:.4rem;color:var(--text);font-size:.85rem;cursor:pointer;margin:0}
.chk input{width:auto;margin:0;flex:none}

/* Панель мешканця — «Мої квартири» */
.premise-panel{display:flex;flex-direction:column;gap:.8rem}
.prem-item{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.prem-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.7rem 1rem;
  cursor:pointer;background:rgba(255,255,255,.02)}
.prem-item.open .prem-head{border-bottom:1px solid var(--line)}
.prem-head:hover{background:var(--panel2)}
.prem-toggle{display:inline-block;font-size:.7rem;color:var(--muted);transition:transform .15s}
.prem-item.open .prem-toggle{transform:rotate(90deg)}
.prem-name{font-weight:700}
.prem-saldo{margin-left:auto;font-size:.9rem}
.prem-saldo.err b{color:var(--err)}
.prem-saldo.ok b{color:var(--ok)}
.prem-saldo.info b{color:var(--info)}
.prem-body{display:none;padding:.5rem 1rem 1rem}
.prem-item.open .prem-body{display:block}
/* для одинокої квартири стрілки немає — курсор звичайний */
.prem-item.open:not(:has(.prem-toggle)) .prem-head{cursor:default}

/* Примірка ролі */
.imp-block{display:none;margin:.5rem 0}
.imp-banner{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  background:var(--accent);color:var(--on-accent);padding:.5rem 1rem;font-size:.9rem;font-weight:600}
.imp-banner button{background:#1a1a1a;color:#fff;padding:.3rem .8rem;font-size:.8rem}
.warn-banner{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  background:var(--err);color:#fff;padding:.5rem 1rem;font-size:.9rem;font-weight:600}
.warn-banner a{color:#fff;text-decoration:underline}

/* Mobile */
@media(max-width:760px){
  .menu-toggle{display:block}
  .sidebar{position:fixed;left:-240px;top:50px;bottom:0;transition:left .2s;z-index:20}
  body.nav-open .sidebar{left:0}
  .content{padding:1rem}
}

/* ============================================================
   Світла тема StyleUp (керуюча компанія).
   Вмикається data-theme="styleup" на <html> (за замовчуванням).
   Темна (базова) лишається як альтернатива: data-theme="dark".
   Лише перевизначення змінних + мʼякі тіні — розмітка спільна.
   ============================================================ */
html[data-theme="styleup"]{
  --bg:#f1f4f8; --panel:#ffffff; --panel2:#eef2f6; --text:#2f3a45;
  --muted:#76838f; --accent:#c06b6c; --accent2:#5f7d97; --line:#dde4ec;
  --ok:#3f9d72; --err:#d05656; --info:#5b87c4; --purple:#8b6fc0;
  --on-accent:#ffffff; --shadow:0 2px 10px rgba(49,57,65,.07);
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[data-theme="styleup"] body{-webkit-font-smoothing:antialiased}
html[data-theme="styleup"] .card,
html[data-theme="styleup"] .login-card{box-shadow:var(--shadow)}
html[data-theme="styleup"] .topbar{box-shadow:0 1px 0 var(--line),0 2px 12px rgba(49,57,65,.05)}
html[data-theme="styleup"] input,
html[data-theme="styleup"] select,
html[data-theme="styleup"] textarea{border-color:#cdd6e0}
html[data-theme="styleup"] h2{color:var(--accent2)}        /* підзаголовки — сталево-блакитні */

/* Логотип StyleUp у шапці (темний на світлій темі, білий на темній) */
.brand-logo{height:30px;width:auto;display:inline-block}
.brand-logo.dark-only{display:none}
html[data-theme="dark"] .brand-logo.light-only{display:none}
html[data-theme="dark"] .brand-logo.dark-only{display:inline-block}

/* Перемикач теми у шапці */
.theme-toggle{width:auto;background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:7px;padding:.18rem .5rem;font-size:1rem;line-height:1;cursor:pointer}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}