/* DJOCA Години — палітра «М'ята», та сама, що в TwinKill. */
:root{--bg:#f3f8f5;--card:#fff;--line:#e1ece5;--line-strong:#cfe3d7;--line-soft:#edf4ef;--ink:#15241b;--ink2:#4e6157;--primary:#12824f;--primary-dark:#0b6b43;--mint:#e3f5ea;--mint50:#f2faf5;--amber-bg:#fff0d9;--amber-ink:#8a4a00;--red-ink:#a3261b}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 Manrope,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
h1,h2,p{margin:0}
h1{font-size:24px;font-weight:800}
h2{font-size:17px;font-weight:800}
.page{padding:20px 32px 56px;display:flex;flex-direction:column;gap:16px}
/* блоки всередині розділу (графік, результат; картки налаштувань) — з проміжком, а не впритул */
.page>section{display:flex;flex-direction:column;gap:20px}
@media (max-width:700px){.page{padding:14px 12px 40px}}
.muted{color:var(--ink2);font-size:14px}
.t{font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.panel,.card{background:var(--card);border:1px solid var(--line);border-radius:14px}
.panel{padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.panel.drag{border:2px dashed var(--primary);background:var(--mint50)}
.card{overflow:clip}
.file-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.grow{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:4px}
.month-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px solid var(--line-soft);padding-top:14px}
.result-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line-soft)}

.btn{min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--primary-dark);font-weight:600;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{border-color:var(--primary)}
a.btn{text-decoration:none}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:800;padding:0 22px}
.btn.primary:hover{background:var(--primary-dark)}
.btn.warn{border-color:var(--amber-ink);color:var(--amber-ink)}
.btn.sm{min-height:36px;padding:0 12px}
.btn[disabled]{opacity:.55;cursor:default}
.btn:focus-visible,.chip:focus-visible,tr.person:focus-visible,input:focus-visible,select:focus-visible,label.btn:focus-within{outline:3px solid #8fc7a6;outline-offset:2px}
.error{background:#fdecea;border:1px solid #f0c3be;color:#8a1c12;border-radius:10px;padding:12px 16px}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;font-size:14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;font-weight:800}
.chip[disabled]{cursor:default;color:var(--ink2);background:var(--mint50);border-style:dashed}

.info{padding:10px 20px;color:var(--ink2);font-size:14px;border-bottom:1px solid var(--line-soft);background:var(--mint50)}
.notes{background:var(--amber-bg);color:var(--amber-ink);padding:12px 20px;display:flex;flex-direction:column;gap:6px;font-size:14px;border-bottom:1px solid var(--line-soft)}
.notes .note{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}

.table-wrap{overflow-x:auto}
/* на широкому екрані таблиця влазить — без власної прокрутки, тоді sticky-шапка липне до вікна */
@media (min-width:1100px){.table-wrap{overflow-x:visible}}
table.res{border-collapse:collapse;width:100%;font-size:14px}
table.res th,table.res td{padding:10px 16px;border-top:1px solid var(--line-soft);text-align:right;white-space:nowrap}
table.res th:first-child,table.res td:first-child{text-align:left;white-space:normal;min-width:220px}
table.res th:nth-child(2),table.res td:nth-child(2){text-align:left}
table.res thead th{background:var(--mint50);color:var(--ink2);font-weight:600;border-top:0;position:sticky;top:var(--top,0px);z-index:5;box-shadow:inset 0 -1px 0 var(--line)}
table.res .main{font-weight:800}
table.res thead th.main{color:var(--ink)}
table.res tr.grp td{background:var(--mint);color:var(--primary-dark);text-align:left;white-space:normal}
table.res tr.grp td span{color:var(--ink2);font-size:13px}
table.res tr.sum td{background:var(--mint50);font-weight:800}
table.res tr.person{cursor:pointer}
table.res tr.person:hover{background:var(--mint50)}
table.res tr.person.open{background:var(--mint);font-weight:700}
table.res tr.detail>td{padding:0 16px 16px;background:var(--mint);text-align:left;white-space:normal}
table.res td.neg{color:var(--red-ink)}
.chev{color:var(--ink2);display:inline-block;width:12px}
.flag{color:var(--amber-ink);font-weight:600;font-size:13px}
.tag{color:var(--primary-dark);font-weight:600;font-size:13px}
table.matrix td,table.matrix th{text-align:right}

.details{background:#fff;border:1px solid var(--line-strong);border-radius:10px;padding:12px 16px;display:flex;flex-direction:column;gap:10px;font-weight:400}
.settings{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.settings label,.day label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink2)}
.settings select,.settings input,.day input,.day select{min-height:40px;border:1px solid var(--line-strong);border-radius:8px;padding:0 10px;font-size:14px;background:#fff;color:var(--ink)}
.settings input{width:90px}
.explain{font-size:14px;color:var(--ink)}
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));column-gap:28px}
.day{display:grid;grid-template-columns:minmax(110px,1fr) auto minmax(60px,auto);gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line-soft);font-size:14px}
.day.off{color:var(--ink2)}
.day.future{opacity:.5}
.day.bad{background:var(--amber-bg);margin:0 -8px;padding:6px 8px}
.day .when small{display:block;color:var(--ink2)}
.day .edit{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end}
.day input{width:72px}
.day .res{text-align:right;font-weight:800}
.day .prob{color:var(--amber-ink);font-weight:600;font-size:12px}
.foot{padding:12px 20px;color:var(--ink2);font-size:13px;border-top:1px solid var(--line-soft)}
@media (max-width:560px){.days{grid-template-columns:1fr}.day{grid-template-columns:1fr auto}.day .edit{grid-column:1 / -1;order:3}}

/* Власні поля й списки замість браузерних: однакова висота, рамка, стрілка, фокус */
input[type="text"],select{-webkit-appearance:none;appearance:none;min-height:40px;border:1px solid var(--line-strong);border-radius:10px;background-color:#fff;color:var(--ink);font-size:14px;font-weight:600;padding:0 12px;line-height:38px;box-shadow:0 1px 0 rgba(21,36,27,.03);transition:border-color .12s,box-shadow .12s}
input[type="text"]{font-variant-numeric:tabular-nums;text-align:center}
input[type="text"]::placeholder{color:#9aaba1;font-weight:400}
select{padding-right:34px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234e6157' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
input[type="text"]:hover,select:hover{border-color:#8fc7a6}
input[type="text"]:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(18,130,79,.18)}
input[aria-invalid="true"]{border-color:var(--red-ink);box-shadow:0 0 0 3px rgba(163,38,27,.15)}
.settings label,.day label{font-weight:600}
.day input[type="text"]{width:76px;padding:0 8px}
.settings input[type="text"]{width:90px}

/* Календар днів людини */
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--ink2);font-size:13px;align-items:center}
.legend .lg{display:inline-flex;align-items:center;gap:6px}
.legend .sw{width:14px;height:14px;border-radius:4px;background:#fff;border:1px solid var(--line)}
.legend .sw.off{background:var(--mint50)}
.legend .sw.status{background:var(--mint);border-color:var(--line-strong)}
.legend .sw.bad{background:var(--amber-bg);border-color:#f1d3a3}
.legend .sw.future{background:#fff;border-style:dashed;opacity:.6}
.legend .sw.changed{border:2px solid #e8b45a}
.c-dot-lg{color:var(--primary);font-size:10px}
.pos{color:var(--primary-dark)}
.neg{color:var(--red-ink)}
.cal-wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.cal{flex:999 1 620px;min-width:0;display:flex;flex-direction:column;gap:6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-grid.head div{font-size:12px;font-weight:600;color:var(--ink2);padding:0 4px}
.cell{min-height:84px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);text-align:left;display:flex;flex-direction:column;gap:2px;cursor:pointer;font-weight:400;transition:border-color .1s,box-shadow .1s}
.cell:hover{border-color:#8fc7a6}
.cell:focus-visible{outline:3px solid #8fc7a6;outline-offset:1px}
.cell.off{background:var(--mint50)}
.cell.status{background:var(--mint);border-color:var(--line-strong)}
.cell.bad{background:var(--amber-bg);border-color:#f1d3a3}
.cell.future{border-style:dashed;opacity:.55}
.cell.sel{border:2px solid var(--primary);padding:6px 8px;box-shadow:0 0 0 3px rgba(18,130,79,.15)}
.c-top{display:flex;justify-content:space-between;align-items:baseline;gap:4px;font-size:12px;color:var(--ink2)}
.c-top b{font-size:14px;color:var(--ink)}
.c-dot{color:var(--primary);font-size:10px;margin-left:auto;padding-left:4px}
.c-dot.warn{color:var(--amber-ink);font-size:12px;font-weight:800}
.cell.changed{box-shadow:inset 0 0 0 2px #e8b45a}
.c-time{font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-res{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.c-res.zero{color:var(--ink2)}
.c-label{font-size:13px;font-weight:600;color:var(--primary-dark)}
.cell.bad .c-time,.cell.bad .c-label{color:var(--amber-ink)}
.cell.future .c-label{color:var(--ink2);font-weight:400}

.panel-day{flex:1 1 300px;max-width:420px;border:1px solid var(--line-strong);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:14px;background:#fff;position:sticky;top:12px}
.panel-day.empty{justify-content:center;min-height:120px;background:var(--mint50);border-style:dashed}
.pd-head h3{margin:0;font-size:20px;font-weight:800}
.day-problem{background:var(--amber-bg);color:var(--amber-ink);border-radius:8px;padding:8px 12px;font-size:14px;font-weight:600}
.field{display:flex;flex-direction:column;gap:6px}
.f-label,.times label{font-size:12px;font-weight:600;color:var(--ink2)}
.segs{display:flex;flex-wrap:wrap;gap:6px}
.seg{min-height:38px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--ink);font-size:13px;cursor:pointer}
.seg:hover{border-color:#8fc7a6}
.seg[aria-pressed="true"]{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;font-weight:800}
.seg:focus-visible{outline:3px solid #8fc7a6;outline-offset:2px}
.times{display:flex;gap:10px;align-items:flex-end}
.times label{display:flex;flex-direction:column;gap:4px}
.times input[type="text"]{width:110px;min-height:44px;font-size:16px}
.times .arrow{padding-bottom:12px;color:var(--ink2)}
.calc-box{background:var(--mint50);border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.calc-box:empty{display:none}
.calc-row{display:flex;justify-content:space-between;gap:12px}
.calc-row span{color:var(--ink2)}
.calc-row.total{border-top:1px solid var(--line-strong);padding-top:6px;margin-top:2px}
.calc-row.total span{color:var(--ink)}
.field-err{color:var(--red-ink);font-size:13px}
.pd-actions{display:flex;flex-wrap:wrap;gap:8px}
.btn.link{border-color:transparent;background:transparent;text-decoration:underline;padding:0 6px}
@media (max-width:700px){.cell{min-height:64px;padding:5px 6px}.c-time{display:none}.c-res{font-size:14px}.panel-day{max-width:none;position:static}}

/* ---------- шапка, вкладки, користувач ---------- */
.topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding:8px 32px}
.brand-wrap{display:flex;align-items:baseline;gap:6px;text-decoration:none;color:var(--ink)}
.brand{font-weight:800;letter-spacing:.14em;font-size:13px;color:var(--primary)}
.app-name{font-weight:800;font-size:17px}
.tabs{display:flex;gap:4px;flex:1 1 auto}
.tabs a{text-decoration:none;color:var(--ink2);padding:10px 14px;border-radius:10px;font-weight:600;font-size:14px}
.tabs a:hover{background:var(--mint50);color:var(--ink)}
.tabs a.on{background:var(--mint);color:var(--primary-dark)}
.tabs a:focus-visible{outline:3px solid #8fc7a6;outline-offset:2px}
.me{display:flex;align-items:center;gap:10px}
.me form{margin:0}
.ava{width:32px;height:32px;border-radius:50%;object-fit:cover}
.ava.ph{display:inline-flex;align-items:center;justify-content:center;background:var(--mint);color:var(--primary-dark);font-weight:800}
.who{display:flex;flex-direction:column;line-height:1.2;font-size:14px}
.who small{color:var(--ink2);font-size:12px}
@media (max-width:700px){.topbar{padding:8px 12px}.who{display:none}}

/* ---------- джерело графіка ---------- */
.file-actions{display:flex;flex-wrap:wrap;gap:8px}
.small{font-size:13px}
.err-text,.warn-text{color:var(--amber-ink);font-weight:600}
.block{display:block}
.pad{padding:16px 20px}
.stack{display:flex;flex-direction:column;gap:10px}
.inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.file-line{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.file-line .grow{flex:1 1 280px;display:flex;flex-direction:column;gap:2px}
hr.sep{border:0;border-top:1px solid var(--line-soft);margin:4px 0}
input[type="text"].wide{flex:1 1 320px;text-align:left;min-height:44px}
code.copy{font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--mint50);border:1px solid var(--line-strong);border-radius:8px;padding:6px 10px;user-select:all;word-break:break-all}
.was{display:flex;flex-direction:column;gap:4px;font-size:13px}
table.res.list td,table.res.list th{text-align:left;white-space:normal;vertical-align:top}
table.res.list td.t{white-space:nowrap}
table.res.list td.act{text-align:right;white-space:nowrap}
table.res tr.undone td{opacity:.55}
.settings .lbl{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink2);font-weight:600}
#view-history,#view-settings{display:flex;flex-direction:column;gap:16px}
#view-history[hidden],#view-settings[hidden]{display:none!important}

/* ---------- власний випадаючий список ---------- */
.dd{position:relative;display:inline-block;min-width:170px}
.dd-btn{width:100%;min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 34px 0 12px;border:1px solid var(--line-strong);border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234e6157' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/12px 8px;color:var(--ink);font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.dd-btn.sm{min-height:34px;font-size:13px}
.dd-btn:hover{border-color:#8fc7a6}
.dd-btn:focus-visible,.dd.open .dd-btn{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(18,130,79,.18)}
.dd.open .dd-btn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5l5-5 5 5' fill='none' stroke='%2312824f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.dd-list{position:fixed;z-index:60;max-width:min(420px,calc(100vw - 16px));max-height:320px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 10px 30px rgba(21,36,27,.14)}
.dd-list:focus{outline:none}
.dd-opt{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:14px;white-space:nowrap}
.dd-opt small{color:var(--ink2);font-size:12px;font-weight:400}
.dd-opt.active{background:var(--mint50)}
.dd-opt.sel{color:var(--primary-dark);font-weight:800}
.dd-opt.sel span::after{content:" ✓"}

/* ---------- повідомлення ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:50;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:opacity .2s,transform .2s;max-width:min(560px,92vw)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--red-ink)}

/* ---------- сторінка входу ---------- */
body.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login-card{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px;display:flex;flex-direction:column;gap:14px}
.login-card h1{font-size:22px}
.login-card.prose{max-width:640px;line-height:1.55}
.login-card .btn{width:100%}
.gbtn{color:var(--ink)!important;text-decoration:none;font-size:15px!important}
.login-card form{margin:0}

/* ---------- пошук, фільтри, сортування ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line-soft);background:#fff}
.toolbar .count{margin-left:auto;font-size:13px}
.toolbar .dd{min-width:150px}
input.search{-webkit-appearance:none;appearance:none;flex:0 1 300px;min-width:200px;min-height:34px;border:1px solid var(--line-strong);border-radius:10px;padding:0 12px 0 34px;font-size:14px;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234e6157' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center/15px;transition:border-color .12s,box-shadow .12s}
input.search::placeholder{color:#9aaba1}
input.search:hover{border-color:#8fc7a6}
input.search:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(18,130,79,.18)}
.th-sort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:inherit;color:inherit;border-radius:6px}
.th-sort:hover{color:var(--ink)}
.th-sort:focus-visible{outline:3px solid #8fc7a6;outline-offset:2px}
.th-sort .arrow{font-size:12px;opacity:.35}
.th-sort.on{color:var(--primary-dark)}
.th-sort.on .arrow{opacity:1}
table.res td.empty{text-align:center;color:var(--ink2);padding:28px 16px}
.brand .app-name{letter-spacing:0;color:var(--ink);font-size:inherit}
@media (max-width:700px){.toolbar{padding:10px 12px}.toolbar .count{margin-left:0;width:100%}input.search{flex:1 1 100%}}

/* ---------- групи: окремі таблиці ---------- */
.grp-block{margin:16px 20px 0;border:1px solid var(--line);border-radius:12px;overflow:clip}
.grp-block+.grp-block{margin-top:24px}
.table-host{padding-bottom:16px}
@media (max-width:700px){.grp-block{margin:12px 10px 0}}
.grp-title{margin:0;padding:14px 20px 10px;font-size:15px;font-weight:400;color:var(--primary-dark);background:var(--mint)}
.grp-title span{color:var(--ink2);font-size:13px}
table.res.fixed{table-layout:fixed}
table.res.fixed col.c-name{width:26%}
table.res.fixed col.c-type{width:10%}
table.res.matrix.fixed col.c-name{width:230px}
table.res.fixed td:first-child{overflow-wrap:anywhere}
p.empty{text-align:center;color:var(--ink2);padding:28px 16px;margin:0}
table.res.matrix thead th{white-space:normal;vertical-align:bottom}
table.res.matrix th:nth-child(n+2),table.res.matrix td:nth-child(n+2){text-align:right}