/* Спокійна палітра: колір підказує тип події, а не рівень тривоги. Червоний тільки для справді термінового. */
:root {
  --bg: #f6f4ef; --card: #fffdf9; --ink: #1d1b18; --muted: #6b655c; --line: #e2dcd0; --soft: #efebe3;
  --accent: #2f5d7c; --accent-bg: #e3edf3;
  --calm: #2f5d50; --calm-bg: #dfeee8;
  --amber: #8a6a2a; --amber-bg: #f3ead6;
  --urgent: #a3301f; --urgent-bg: #f7e4df;
  --link: #1f4f8a;
  --mono: Consolas, "Cascadia Mono", "Courier New", monospace;
  --serif: Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614; --card: #201e1b; --ink: #ece7dd; --muted: #a39b8e; --line: #36322c; --soft: #2a2723;
    --accent: #8fb6d3; --accent-bg: #1d2c37;
    --calm: #8cc7b3; --calm-bg: #1c342d;
    --amber: #d9b56f; --amber-bg: #352a14;
    --urgent: #f0917f; --urgent-bg: #43201a;
    --link: #8db8ee;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: 22px; margin: 4px 0; }
h2 { font-size: 17px; margin: 0 0 10px; }
h3 { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
h4 { font-size: 12px; color: var(--muted); margin: 12px 0 4px; font-weight: 600; }
p { margin: 0 0 6px; }
ul, ol { margin: 0; padding-left: 18px; }
li { margin-bottom: 4px; }
.mono { font-family: var(--mono); font-size: .95em; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.count { font: 600 11px/1 var(--mono); color: var(--muted); background: var(--soft); border-radius: 9px; padding: 2px 6px; vertical-align: 2px; letter-spacing: 0; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 14px 16px 32px; }
/* вузький вміст, але лівий край збігається з шапкою */
.narrow-page > * { max-width: 880px; }
.more { font-size: 13px; white-space: nowrap; }
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* шапка */
.bar { background: var(--card); border-bottom: 1px solid var(--line); }
.bar-in { max-width: 1280px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 14px; min-height: 46px; }
.brand { font: 600 16px/1 var(--serif); color: var(--ink); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.b-short { display: none; }
.bar-nav { display: flex; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.bar-nav a { padding: 13px 9px 11px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.bar-nav a.on { color: var(--ink); border-bottom-color: var(--ink); }
.bar-nav a:hover { color: var(--ink); text-decoration: none; }
.bell { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); }
.bell:hover, .bell.on { background: var(--soft); color: var(--ink); text-decoration: none; }
.badge { position: absolute; top: 1px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--card); font: 600 10px/16px var(--mono); text-align: center; }
.me { position: relative; display: flex; align-items: center; height: 32px; }
.me summary { list-style: none; cursor: pointer; display: flex; align-items: center; height: 32px; margin: 0; }
.me summary::-webkit-details-marker { display: none; }
.me img, .ava { width: 28px; height: 28px; border-radius: 50%; display: block; }
.ava { display: grid; place-items: center; background: var(--soft); font-size: 11px; font-weight: 600; }
.menu { position: absolute; right: 0; top: 36px; z-index: 10; min-width: 220px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.08); padding: 6px; }
.menu-who { display: flex; flex-direction: column; padding: 6px 8px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 13px; }
.menu a { display: block; padding: 6px 8px; border-radius: 5px; color: var(--ink); }
.menu a:hover { background: var(--soft); text-decoration: none; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.chip.urgent { color: var(--urgent); background: var(--urgent-bg); }
.seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; background: var(--soft); border-radius: 7px; padding: 2px; }
.seg a { padding: 3px 10px; border-radius: 5px; color: var(--muted); font-size: 13px; }
.seg a.on { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.seg a:hover { text-decoration: none; color: var(--ink); }
.seg-label { font-size: 12px; color: var(--muted); padding: 0 6px 0 8px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* дашборд */
.dash { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); gap: 12px; align-items: start; }
.dash-main { min-width: 0; }
.side { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow-y: auto; }
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.cal-head h2 { margin: 0; }
.cal-nav { display: flex; gap: 4px; }
.cal-nav a { border: 1px solid var(--line); border-radius: 6px; padding: 1px 9px; color: var(--ink); font-size: 13px; }
.cal-nav a:hover { background: var(--soft); text-decoration: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal-wd { font-size: 11px; color: var(--muted); padding: 3px 5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--soft); }
.cal-day { min-height: 78px; padding: 2px 3px 3px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.cal-day.we { background: color-mix(in srgb, var(--soft) 45%, transparent); }
.cal-day.out, .cal-day.gone { opacity: .5; }
.cal-n { font-size: 11px; color: var(--muted); padding: 0 2px; }
.cal-day.today { opacity: 1; background: color-mix(in srgb, var(--accent-bg) 55%, transparent); }
.cal-day.today .cal-n { display: inline-block; background: var(--ink); color: var(--card); border-radius: 9px; padding: 0 6px; font-weight: 600; }
.ev { display: block; font-size: 11px; line-height: 1.35; padding: 1px 4px; margin-top: 2px; border-left: 3px solid var(--line); border-radius: 2px; background: var(--soft); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev:hover { text-decoration: none; filter: brightness(.97); }
.ev.hearing { border-color: var(--accent); background: var(--accent-bg); }
.ev.deadline { border-color: var(--amber); background: var(--amber-bg); }
.ev.event { border-color: var(--calm); background: var(--calm-bg); }
.ev.past { background: transparent; color: var(--muted); }
.ev-no { display: block; font: 600 10px/1.3 var(--mono); color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.legend .ev { display: inline-block; margin: 0; }

.agenda { display: none; margin-top: 10px; }
.agenda ul { list-style: none; padding: 0; }
.agenda li { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 5px 0 5px 8px; border-left: 3px solid var(--line); margin-bottom: 4px; }
.agenda li.hearing { border-color: var(--accent); }
.agenda li.deadline { border-color: var(--amber); }
.ag-date { font-weight: 600; }
.ag-date small { display: block; font-weight: 400; color: var(--muted); }

.tasks { list-style: none; padding: 0; margin: 0; }
.task { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--line); margin: 0; }
.task:first-child { border-top: 0; }
.task form { margin: 0; }
.check { width: 16px; height: 16px; margin-top: 2px; padding: 0; border: 1.5px solid var(--muted); border-radius: 4px; background: transparent; cursor: pointer; flex: none; }
.check:hover { border-color: var(--calm); background: var(--calm-bg); }
.task.done .check { background: var(--calm); border-color: var(--calm); }
.task.done .task-what { text-decoration: line-through; color: var(--muted); }
.task-body { min-width: 0; }
.task-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--muted); margin-top: 1px; }
.due.soon { color: var(--ink); font-weight: 600; }
.due.late { color: var(--amber); font-weight: 600; }
.task-group { margin-bottom: 10px; }

.dir { margin-top: 16px; }
.dir h2 { margin-bottom: 2px; }
.dir-note { font-size: 13px; max-width: 820px; margin-bottom: 8px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.card { display: flex; flex-direction: column; gap: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; color: var(--ink); }
.card:hover { text-decoration: none; border-color: var(--muted); }
.card.urgent { border-top: 3px solid var(--urgent); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; }
.card-title { font-weight: 600; line-height: 1.3; }
.card-next { font-size: 13px; }
.card-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 4px; border-top: 1px solid var(--line); }
.clip1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clip2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }

/* перелік справ */
.rows { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.row { display: grid; grid-template-columns: 120px minmax(0, 1.6fr) minmax(0, 1fr) 80px; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--ink); align-items: start; }
.row:first-child { border-top: 0; }
.row:hover { background: var(--soft); text-decoration: none; }
.row-no { font-weight: 600; padding-top: 1px; }
.row-main, .row-next { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.row-main .muted, .row-next .muted { font-size: 13px; }
.row-tasks { font-size: 12px; text-align: right; }

/* календар переліком */
.days { list-style: none; padding: 0; margin: 0; }
.day { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); margin: 0; }
.day:first-child { border-top: 0; }
.day.today .day-date b { color: var(--accent); }
.day-date small { display: block; color: var(--muted); }
.day-items { list-style: none; padding: 0; }
.day-items li { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 300px); gap: 12px; padding: 2px 0 2px 8px; border-left: 3px solid var(--line); margin-bottom: 4px; }
.day-items li.hearing { border-color: var(--accent); }
.day-items li.deadline { border-color: var(--amber); }
.day-items li.event { border-color: var(--calm); }
.day-items li.past { color: var(--muted); }
.day-items .k { font-size: 12px; color: var(--muted); padding-top: 1px; }
.day-items .where { font-size: 12px; text-align: right; }
.cno { font: 600 13px/1 var(--mono); color: var(--ink); background: var(--soft); border-radius: 4px; padding: 2px 6px; margin-right: 4px; white-space: nowrap; }
.cno:hover { background: var(--line); text-decoration: none; }
.past-block { margin-top: 12px; }
.past-block summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
.past-block .days { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 14px; }

/* сторінка справи */
.crumbs { font-size: 13px; color: var(--muted); }
.case-head { margin: 4px 0 12px; }
.case-no { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.case-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.case-side { display: grid; gap: 10px; }
.next { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; background: var(--card); }
.next-date { font-weight: 600; }
.block { margin-bottom: 18px; }
details summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-top: 6px; }
.timeline { list-style: none; padding: 0; }
.timeline li { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 3px 0; border-top: 1px dashed var(--line); margin: 0; }
.timeline li:first-child { border-top: 0; }
.timeline time { font: 12px/1.7 var(--mono); color: var(--muted); }
.timeline em { font-style: normal; font-size: 12px; }
.meta { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; overflow-wrap: anywhere; }
.mini { list-style: none; padding: 0; font-size: 13px; }
.mini li { padding-left: 8px; border-left: 3px solid var(--line); }
.mini li.hearing { border-color: var(--accent); }
.mini li.deadline { border-color: var(--amber); }

/* вкладки документів: радіокнопки без JS */
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tab-labels { display: flex; gap: 2px; box-shadow: inset 0 -1px 0 var(--line); margin-bottom: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tab-labels label { padding: 6px 12px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab-labels label:hover { color: var(--ink); }
.tab-panel { display: none; }
#t-01_ours:checked ~ .p-01_ours, #t-02_opponents:checked ~ .p-02_opponents, #t-03_court:checked ~ .p-03_court, #t-04_other:checked ~ .p-04_other { display: block; }
#t-01_ours:checked ~ .tab-labels label[for="t-01_ours"],
#t-02_opponents:checked ~ .tab-labels label[for="t-02_opponents"],
#t-03_court:checked ~ .tab-labels label[for="t-03_court"],
#t-04_other:checked ~ .tab-labels label[for="t-04_other"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs > input:focus-visible + input, .tabs > input:focus-visible ~ .tab-labels { outline: none; }

.docs { list-style: none; padding: 0; }
.docs > li { padding: 8px 0; border-top: 1px solid var(--line); margin: 0; }
.docs > li:first-child { border-top: 0; }
.doc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-weight: 600; }
.fmt { font: 500 10px/1 var(--mono); text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; }
a.fmt.alt:hover { color: var(--ink); text-decoration: none; border-color: var(--muted); }
.doc-meta { font-size: 12px; }
.doc-sum { margin: 3px 0 0; font-size: 13px; }
.minor { margin-top: 6px; }
.minor .docs { opacity: .85; }

.notes { list-style: none; padding: 0; margin: 6px 0 0; }
.note { display: flex; flex-direction: column; gap: 1px; background: var(--amber-bg); border-radius: 6px; padding: 6px 10px; margin-bottom: 5px; font-size: 13px; white-space: pre-wrap; }
.note-meta { font-size: 11px; white-space: normal; }
.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; padding: 0 0 0 6px; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; }
.add-note summary { font-size: 12px; margin-top: 4px; }
.add-note form { display: grid; gap: 6px; margin-top: 6px; max-width: 560px; }
textarea { width: 100%; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; resize: vertical; }
textarea:focus { outline: 2px solid var(--accent-bg); border-color: var(--accent); }

/* оновлення */
.upd-day { margin-bottom: 14px; }
.upd { list-style: none; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.upd > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); margin: 0; }
.upd > li:first-child { border-top: 0; }
.upd > li.new { box-shadow: inset 3px 0 0 var(--accent); }
.upd-time { color: var(--muted); font-size: 12px; padding-top: 2px; }
.upd-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; }

/* вхід і повідомлення */
.center { min-height: 80vh; display: grid; place-items: center; padding: 16px; }
.narrow { max-width: 420px; width: 100%; padding: 24px; }
.narrow h1 { margin-bottom: 8px; }
.btn { display: inline-block; margin-top: 14px; padding: 8px 16px; border: 0; border-radius: 6px; background: var(--ink); color: var(--card); font: inherit; font-weight: 600; cursor: pointer; }
.btn.small { margin: 0; padding: 5px 12px; justify-self: start; font-size: 13px; }
.btn:hover { text-decoration: none; opacity: .9; }
.err { white-space: pre-wrap; font: 12px/1.4 var(--mono); color: var(--muted); max-height: 50vh; overflow: auto; }

.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.foot .wrap { padding-top: 10px; padding-bottom: 16px; }

@media (max-width: 980px) {
  .dash, .case-grid { grid-template-columns: minmax(0, 1fr); }
  /* на вузькому екрані задачі йдуть одразу після календаря, а справи під ними */
  .dash-main { display: contents; }
  .dash-main > .panel { order: 1; }
  .side { order: 2; position: static; max-height: none; }
  .dir { order: 3; margin-top: 4px; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .row-tasks { text-align: left; }
}
@media (max-width: 640px) {
  .bar-in { gap: 6px; padding: 0 12px; }
  .b-long { display: none; }
  .b-short { display: inline; }
  .bar-nav a { padding-left: 6px; padding-right: 6px; }
  .cal-day { min-height: 38px; }
  .cal-day .ev { height: 4px; padding: 0; font-size: 0; border-left-width: 0; }
  .cal-day .ev.past { display: none; }
  .cal-day .ev.hearing { background: var(--accent); }
  .cal-day .ev.deadline { background: var(--amber); }
  .cal-day .ev.event { background: var(--calm); }
  .legend { display: none; }
  .agenda { display: block; }
  .day { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .day-items li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .day-items .where { text-align: left; }
}

/* звіти */
.rep-list { list-style: none; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.rep-list > li { padding: 10px 14px; border-top: 1px solid var(--line); margin: 0; display: grid; gap: 2px; }
.rep-list > li:first-child { border-top: 0; }
.report { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px 22px; margin-top: 6px; }
.rep-lead { font-size: 15px; color: var(--ink); margin-bottom: 12px; }
.rep-sec { margin-top: 18px; }
.rep-sec h2 { font-size: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.rep-items { list-style: none; padding: 0; }
.rep-items > li { padding: 6px 0 6px 10px; border-left: 3px solid var(--line); margin-bottom: 8px; }
.rep-item-title { font-weight: 600; }
.rep-items p { margin: 2px 0 0; }

/* сторінка документа */
.doc-kind { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { background: var(--soft); opacity: 1; }
.doc-text-box summary { font-size: 13px; }
.doc-text { white-space: pre-wrap; font: 13px/1.55 "Segoe UI", system-ui, sans-serif; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; max-height: 70vh; overflow: auto; margin-top: 8px; }
.doc-nav { display: grid; gap: 6px; font-size: 13px; }
.small { font-size: 12px; }
.subj { color: var(--muted); font-size: 12px; margin-right: 4px; }

/* звіти: прочитані й ні */
.rep-list > li.unread b { color: var(--ink); }
.rep-list > li.read b { font-weight: 500; }
.new-dot { color: var(--accent); font-weight: 600; }
.rep-others li { display: grid; gap: 1px; }
.rep-others li.unread a { font-weight: 600; }

/* активність */
.chart-panel { margin-bottom: 12px; }
.bars { width: 100%; height: auto; display: block; }
.bars .grid { stroke: var(--line); stroke-width: 1; }
.bars .axis { stroke: var(--muted); stroke-width: 1; }
.bars .tick { fill: var(--muted); font-size: 11px; }
.bars .peak { fill: var(--ink); font-size: 11px; font-weight: 600; }
.bars .mark { fill: var(--accent); }
.bars .hit { fill: transparent; }
.bars .bar:hover .mark { fill: var(--ink); }
.bars .bar:hover .hit { fill: var(--soft); opacity: .5; }
.table-wrap { overflow-x: auto; }
.act-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.act-table th { font-size: 11px; font-weight: 600; color: var(--muted); text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.act-table th:first-child { text-align: left; }
.act-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.act-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.act-table td.zero { color: var(--line); }

.closed-cases summary { font: 600 15px/1.3 var(--serif); color: var(--muted); margin: 8px 0; }