/* АСУ АДС ЖСК. Токены — как в основной программе БРКЦ (светлая тема по умолчанию, тёмная — по настройке ОС или переключателю) */
:root {
  color-scheme: light;
  --page: #f4f5f7; --surface: #ffffff; --surface-2: #eef0f3;
  --ink: #0f1419; --ink-2: #4a5360; --muted: #808894;
  --grid: #e3e6ea; --axis: #c5cad1; --border: rgba(15,20,25,.11);
  --accent: #1c5cab; --accent-bg: #e6f0fc; --accent-solid: #2a78d6;
  --crit: #b53030; --crit-bg: #fbeaea; --crit-solid: #d43c3c; --good: #0a6b2a; --good-bg: #e5f4e9; --warn-bg: #fff4d6; --warn: #7a5600;
  --shadow: 0 1px 2px rgba(15,20,25,.05), 0 6px 18px rgba(15,20,25,.05);
  --r: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0e1013; --surface: #191c20; --surface-2: #23272d;
    --ink: #f3f5f7; --ink-2: #bcc3cc; --muted: #868e99;
    --grid: #2a2e34; --axis: #3a3f47; --border: rgba(255,255,255,.10);
    --accent: #6da7ec; --accent-bg: #172a45; --accent-solid: #3987e5;
    --crit: #f08080; --crit-bg: #3a1c1c; --crit-solid: #d94a4a; --good: #5cc97a; --good-bg: #17301f; --warn-bg: #3a2f10; --warn: #f3c969;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e1013; --surface: #191c20; --surface-2: #23272d;
  --ink: #f3f5f7; --ink-2: #bcc3cc; --muted: #868e99;
  --grid: #2a2e34; --axis: #3a3f47; --border: rgba(255,255,255,.10);
  --accent: #6da7ec; --accent-bg: #172a45; --accent-solid: #3987e5;
  --crit: #f08080; --crit-bg: #3a1c1c; --crit-solid: #d94a4a; --good: #5cc97a; --good-bg: #17301f; --warn-bg: #3a2f10; --warn: #f3c969;
  --shadow: none;
}

* { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); line-height: 1.45; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.12rem; margin-bottom: .6rem; } h3 { font-size: 1rem; margin-bottom: .5rem; }
.muted { color: var(--muted); } .sec { color: var(--ink-2); }
.r { text-align: right; } .c { text-align: center; } .nw { white-space: nowrap; }
small { font-size: .84em; }
[hidden] { display: none !important; }

/* ---------- шапка ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); }
.top-in { max-width: 1480px; margin: 0 auto; padding: .5rem 1rem; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.brand { font-weight: 700; color: var(--ink); display: flex; gap: .55rem; align-items: center; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 32px; width: auto; display: block; background: #fff; border-radius: 8px; padding: 2px 7px; box-shadow: 0 0 0 1px var(--border); }
.brand small { color: var(--muted); font-weight: 500; }
.nav { display: flex; gap: .1rem; flex-wrap: wrap; align-items: center; }
.nav > a, .nav summary { color: var(--ink-2); padding: .38rem .65rem; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.nav > a:hover, .nav summary:hover { background: var(--surface-2); text-decoration: none; }
.nav > a.on, .nav summary.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.search { position: relative; flex: 1 1 220px; max-width: 380px; margin-left: auto; }
.search input[type=search] { width: 100%; padding: .48rem .8rem .48rem 2.1rem; border-radius: 10px; background: var(--page); }
.search svg { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.iconbtn { border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); border-radius: 9px; padding: .32rem .6rem; cursor: pointer; font: inherit; }
.iconbtn:hover { background: var(--surface-2); }
.userchip { display: inline-flex; gap: .4rem; align-items: center; padding: .3rem .65rem; border-radius: 9px; color: var(--ink-2); border: 1px solid var(--border); white-space: nowrap; }
.userchip:hover { background: var(--surface-2); text-decoration: none; }

main { max-width: 1480px; margin: 0 auto; padding: 1.1rem 1rem 4rem; }
.foot { max-width: 1480px; margin: 0 auto; padding: 0 1rem 2rem; color: var(--muted); font-size: .85rem; }

/* нижняя панель на телефоне */
.mnav { display: none; }
@media (max-width: 820px) {
  .nav { display: none; }
  .top-in { flex-wrap: nowrap; padding: .45rem .7rem; }
  .brand-t, .userchip span { display: none; }
  .search { max-width: none; }
  main { padding: .8rem .7rem 5.5rem; }
  .mnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--border);
    padding: .25rem .2rem calc(.25rem + env(safe-area-inset-bottom)); justify-content: space-around; }
  .mnav a { flex: 1; text-align: center; color: var(--ink-2); font-size: .72rem; padding: .25rem 0; border-radius: 10px; position: relative; }
  .mnav a .ic { display: block; font-size: 1.25rem; line-height: 1.3; }
  .mnav a.on { color: var(--accent); font-weight: 600; background: var(--accent-bg); }
  .mnav a:hover { text-decoration: none; }
  .mnav .badge { position: absolute; top: 0; left: 55%; }
  h1 { font-size: 1.25rem; }
}

/* ---------- карточки и сетки ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .g32 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 960px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g3, .g2, .g21, .g32 { grid-template-columns: 1fr; } }
.grid > .card { margin-bottom: 0; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 1rem; }
.pagehead { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.pagehead .sub { color: var(--ink-2); margin-top: .15rem; }
.crumbs { color: var(--muted); font-size: .88rem; margin-bottom: .3rem; }
.tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.btn { display: inline-flex; gap: .4rem; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  padding: .42rem .85rem; border-radius: 10px; cursor: pointer; font: inherit; white-space: nowrap; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn.primary { background: var(--accent-solid); border-color: transparent; color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger, .btn.primary.danger { background: var(--crit-solid); border-color: transparent; color: #fff; }
.btn.good { background: #1a9a4a; border-color: transparent; color: #fff; font-weight: 600; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--accent); }
.btn.sm { padding: .14rem .55rem; font-size: .84rem; border-radius: 8px; }
.btn.big { padding: .7rem 1.1rem; font-size: 1.05rem; }
.btn:disabled { opacity: .55; cursor: default; }
select, input[type=text], input[type=search], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=tel], textarea {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--axis); border-radius: 10px; padding: .42rem .65rem; max-width: 100%; }
select:focus, input:focus, textarea:focus { outline: 2px solid var(--accent-solid); outline-offset: 0; border-color: transparent; }
textarea { width: 100%; resize: vertical; }
label.chk { display: inline-flex; gap: .4rem; align-items: center; cursor: pointer; }
.fld { display: flex; flex-direction: column; gap: .25rem; }
.fld > span { color: var(--ink-2); font-size: .86rem; }

/* ---------- показатели, метки ---------- */
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: .8rem 1rem; box-shadow: var(--shadow); display: block; color: var(--ink); }
a.kpi:hover { text-decoration: none; border-color: var(--accent-solid); }
.kpi .lab { color: var(--ink-2); font-size: .88rem; }
.kpi .val { font-size: 1.7rem; font-weight: 650; letter-spacing: -.02em; }
.kpi.crit .val { color: var(--crit); } .kpi.good .val { color: var(--good); }
.badge { display: inline-block; font-size: .78rem; padding: .08rem .55rem; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); white-space: nowrap; }
button.stclick { font: inherit; font-size: .78rem; line-height: 1.3; cursor: pointer; }
button.stclick:hover { filter: brightness(1.12); box-shadow: 0 0 0 2px var(--accent-bg); }
.badge.b { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.badge.w { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge.x { background: var(--crit-bg); color: var(--crit); border-color: transparent; }
.badge.g { background: var(--good-bg); color: var(--good); border-color: transparent; }
.badge.em { background: var(--crit-solid); color: #fff; border-color: transparent; font-weight: 600; }
.note { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: .55rem .85rem; font-size: .92rem; }
.info { background: var(--accent-bg); color: var(--ink); border-radius: 10px; padding: .55rem .85rem; font-size: .92rem; }
.alert { background: var(--crit-bg); color: var(--crit); border-radius: 10px; padding: .55rem .85rem; font-size: .92rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .32rem 0; border-bottom: 1px solid var(--grid); }
ul.plain li:last-child { border-bottom: 0; }
.empty { color: var(--muted); padding: .8rem 0; }

/* ---------- таблицы ---------- */
.tscroll { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.t th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: .82rem; padding: .45rem .6rem; border-bottom: 1px solid var(--axis); background: var(--surface); position: sticky; top: 0; white-space: nowrap; }
table.t td { padding: .42rem .6rem; border-bottom: 1px solid var(--grid); vertical-align: top; font-variant-numeric: tabular-nums; }
table.t tbody tr:hover td { background: var(--surface-2); }
table.t th.r, table.t td.r { text-align: right; }
table.t tfoot td { font-weight: 650; border-top: 1px solid var(--axis); border-bottom: 0; background: var(--surface-2); }
table.sortable th { cursor: pointer; user-select: none; }
table.sortable th.sorted::after { content: " ▲"; font-size: .7em; color: var(--accent); }
table.sortable th.sorted.desc::after { content: " ▼"; }
.scrollbox { max-height: 70vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
tr.em td:first-child, .tcard.em { box-shadow: inset 4px 0 0 var(--crit-solid); }
tr.over td.due, :not(tr).over { color: var(--crit); font-weight: 600; }
tr.fin td { color: var(--muted); }

/* ---------- вкладки, чипы ---------- */
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--border); margin: 0 0 1rem; overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: .6rem .9rem; color: var(--ink-2); cursor: pointer; font: inherit; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected=true] { color: var(--accent); border-bottom-color: var(--accent-solid); font-weight: 600; }
.chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.chips a, .chip { padding: .24rem .7rem; border-radius: 99px; border: 1px solid var(--border); color: var(--ink-2); background: var(--surface); cursor: pointer; font: inherit; white-space: nowrap; }
.chips a.on, .chip.on { background: var(--accent-solid); color: #fff; border-color: transparent; }
.chips a:hover, .chip:hover { text-decoration: none; background: var(--surface-2); }
.chips a.on:hover, .chip.on:hover { background: var(--accent-solid); }

/* ---------- меню ---------- */
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-body { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.2); min-width: 230px; z-index: 25; padding: .3rem; }
.menu-body a { display: block; padding: .5rem .75rem; color: var(--ink); border-radius: 8px; }
.menu-body a:hover { background: var(--accent-bg); text-decoration: none; }
.navmore .menu-body { right: auto; left: 0; }

/* ---------- диалоги ---------- */
.dlg-bg { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .45); }
.dlg { width: min(30rem, 100%); max-height: 92vh; overflow: auto; padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--border); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.dlg.wide { width: min(38rem, 100%); }
.dlg-msg { white-space: pre-wrap; margin-bottom: .9rem; }
.dlg-input { width: 100%; margin-bottom: .9rem; }
.dlg-row { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.fgrid { display: grid; grid-template-columns: max-content 1fr; gap: .6rem .9rem; align-items: start; }
.fgrid > label { color: var(--ink-2); padding-top: .45rem; }
.fgrid input:not([type=checkbox]), .fgrid select, .fgrid textarea { width: 100%; }
.fgrid small { display: block; margin-top: .2rem; }
.fgrid .fwide { grid-column: 1 / -1; }
.checks { display: grid; gap: .3rem; }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; gap: .25rem; } .fgrid > label { padding-top: .5rem; } }

/* ---------- вход ---------- */
.loginwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.loginbox { width: min(24rem, 100%); }
.loginbox .card { padding: 1.6rem; }
.loginbox input { width: 100%; padding: .6rem .75rem; }
.loginbox .btn { width: 100%; }

/* ---------- подсказки адреса ---------- */
.addrbox { position: relative; }
.addrbox input { width: 100%; font-size: 1.15rem; padding: .6rem .8rem; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.18); overflow: auto; max-height: 60vh; z-index: 30; }
.suggest a { display: block; padding: .5rem .8rem; color: var(--ink); border-bottom: 1px solid var(--grid); }
.suggest a:last-child { border-bottom: 0; }
.suggest a:hover, .suggest a.sel { background: var(--accent-bg); text-decoration: none; }
.suggest a.new { color: var(--good); }
.suggest small { display: block; color: var(--muted); }
.suggest .tag { float: right; font-size: .75rem; color: var(--muted); }
.picked { display: flex; gap: .6rem; align-items: center; justify-content: space-between; background: var(--accent-bg); border-radius: 12px; padding: .55rem .8rem; font-size: 1.15rem; font-weight: 600; }

/* ---------- форма заявки ---------- */
.types { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .4rem; }
.tbtn { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem .3rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-size: .9rem; }
.tbtn .ic { font-size: 1.35rem; line-height: 1.2; }
.tbtn:hover { background: var(--surface-2); }
.tbtn.on { background: var(--accent-solid); color: #fff; border-color: transparent; font-weight: 600; }
.fsec { margin-top: 1rem; }
.fsec > .lab { color: var(--ink-2); font-size: .86rem; margin-bottom: .3rem; display: flex; gap: .5rem; align-items: baseline; justify-content: space-between; }
.toggle { display: inline-flex; gap: .45rem; align-items: center; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--surface); user-select: none; }
.toggle:has(input:checked) { background: var(--accent-bg); border-color: var(--accent-solid); }
.toggle.em:has(input:checked) { background: var(--crit-solid); color: #fff; border-color: transparent; font-weight: 600; }
.pchip { display: inline-flex; flex-direction: column; text-align: left; padding: .3rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.pchip small { color: var(--muted); }
.pchip:hover { background: var(--surface-2); }
.pchip.on { border-color: var(--accent-solid); background: var(--accent-bg); }
.side h3 { margin-top: 1rem; } .side h3:first-child { margin-top: 0; }
.mini { display: block; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 10px; margin-bottom: .35rem; color: var(--ink); font-size: .9rem; }
.mini:hover { text-decoration: none; background: var(--surface-2); }
.mini.em { box-shadow: inset 4px 0 0 var(--crit-solid); }

/* ---------- табло ---------- */
.board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: .8rem; align-items: start; overflow-x: auto; padding-bottom: .5rem; }
.bcol { background: var(--surface-2); border-radius: var(--r); padding: .6rem; min-height: 6rem; }
.bcol > h3 { display: flex; justify-content: space-between; padding: .1rem .3rem .4rem; margin: 0; }
.tcard { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .55rem .7rem; margin-bottom: .5rem; color: var(--ink); box-shadow: var(--shadow); }
.tcard:hover { text-decoration: none; border-color: var(--accent-solid); }
.tcard .hd { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .82rem; }
.tcard .ad { font-weight: 600; margin: .1rem 0; }
.tcard .tx { color: var(--ink-2); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard .ft { display: flex; justify-content: space-between; gap: .5rem; margin-top: .3rem; font-size: .82rem; color: var(--muted); }
@media (max-width: 820px) { .board { grid-template-columns: 1fr; } .bcol:empty, .bcol.none { display: none; } }

/* ---------- карточка заявки ---------- */
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 820px) { .actions .btn { flex: 1 1 45%; padding: .75rem .6rem; font-size: 1.02rem; } }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { padding: .5rem 0 .5rem 1.1rem; border-left: 2px solid var(--grid); position: relative; margin-left: .4rem; }
.tl li::before { content: ""; position: absolute; left: -6px; top: .95rem; width: 10px; height: 10px; border-radius: 50%; background: var(--axis); }
.tl li.c::before { background: var(--accent-solid); } .tl li.s::before { background: var(--good); }
.tl .meta { color: var(--muted); font-size: .84rem; }
.tl .txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.photos { display: flex; gap: .5rem; flex-wrap: wrap; }
.photos a.ph { display: block; width: 110px; height: 110px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.photos a.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos a.doc { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border: 1px solid var(--border); border-radius: 10px; color: var(--ink); }
.bigtext { font-size: 1.1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
a.tel { font-weight: 600; white-space: nowrap; }

/* дома по улицам (мастера) */
.mstreet { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .35rem; padding: .25rem 0; border-top: 1px solid var(--grid); }
.mstreet:first-child { border-top: 0; }
.mst { font-weight: 600; min-width: 11rem; flex: 0 0 11rem; }
.mh { display: inline-block; padding: .05rem .5rem; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--ink-2); font-size: .9rem; }
.mh:hover { text-decoration: none; background: var(--surface-2); }
@media (max-width: 720px) { .mst { flex-basis: 100%; } }

/* ---------- печать ---------- */
@media print {
  html { font-size: 12px; }
  body { background: #fff; color: #000; }
  .top, .mnav, .tools, .tabs, .foot, .chips, .btn, .no-print, .actions { display: none !important; }
  .card, .kpi { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; }
  main { padding: 0; max-width: none; }
  .scrollbox { max-height: none; overflow: visible; border: 0; }
  table.t th { position: static; }
  a { color: inherit; }
}

.fsbox { display: inline-flex; gap: .2rem; }
@media (max-width: 820px) { .fsbox { display: none; } }

/* ---------- список заявок на телефоне: карточки вместо таблицы (только на экране: на бумаге всегда таблица) ---------- */
@media screen and (max-width: 820px) {
  table.tix, table.tix tbody { display: block; }
  table.tix thead { display: none; }
  table.tix tr { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "num type st" "addr addr addr" "text text text" "who who due";
    gap: .15rem .5rem; padding: .6rem .7rem; margin-bottom: .5rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; }
  table.tix td { display: block; padding: 0; border: 0; }
  table.tix tbody tr:hover td { background: none; }
  table.tix .c-num { grid-area: num; } table.tix .c-num b::before { content: "№ "; font-weight: 400; color: var(--muted); }
  table.tix .c-type { grid-area: type; color: var(--ink-2); } table.tix .c-st { grid-area: st; }
  table.tix .c-addr { grid-area: addr; font-weight: 650; font-size: 1.05rem; }
  table.tix .c-text { grid-area: text; color: var(--ink-2); }
  table.tix .c-who { grid-area: who; color: var(--muted); font-size: .86rem; } table.tix .c-due { grid-area: due; font-size: .86rem; color: var(--muted); }
  table.tix .c-due::before { content: "срок "; } table.tix tr.fin .c-due::before { content: ""; }
  table.tix .c-dt { display: none; }
  table.tix tr.over .c-due { color: var(--crit); }
}

details.filt { margin-bottom: 1rem; }
details.filt > summary { list-style: none; display: none; margin-bottom: .6rem; }
details.filt > summary::-webkit-details-marker { display: none; }
details.filt > .card { margin-bottom: 0; }
@media (max-width: 820px) { details.filt > summary { display: inline-flex; } }

/* ---------- темы оформления (светлые, офисные). Выбор — в профиле; запоминается на устройстве. Тёмный режим (кнопка ◐) — отдельно и поверх любой темы ---------- */
:root[data-pal="paper"]:not([data-theme="dark"]) {   /* Бумага: тёплая кремовая */
  --page: #f4f0e6; --surface: #fffdf8; --surface-2: #ebe5d6; --ink: #2a2620; --ink-2: #5a5346; --muted: #8a8272;
  --grid: #e4decf; --axis: #cdc5b2; --border: rgba(60,45,20,.14); --accent: #6f5126; --accent-bg: #f0e5cf; --accent-solid: #8a6535; }
:root[data-pal="graphite"]:not([data-theme="dark"]) {   /* Графит: строгая серая */
  --page: #e9ecef; --surface: #f8f9fa; --surface-2: #dce1e6; --ink: #1b2026; --ink-2: #454e57; --muted: #77818b;
  --grid: #d5dbe1; --axis: #b5bec7; --border: rgba(20,30,40,.15); --accent: #2f4356; --accent-bg: #d9e2ea; --accent-solid: #46607a; }
:root[data-pal="mint"]:not([data-theme="dark"]) {   /* Мята: спокойная зелёная */
  --page: #edf3f0; --surface: #fbfdfc; --surface-2: #deeae4; --ink: #15231e; --ink-2: #41544c; --muted: #778a82;
  --grid: #d6e3dd; --axis: #b5c9c0; --border: rgba(15,50,35,.14); --accent: #1c6250; --accent-bg: #d9ede5; --accent-solid: #26775f; }
:root[data-pal="lavender"]:not([data-theme="dark"]) {   /* Лаванда: мягкая сиреневая */
  --page: #f1f0f6; --surface: #fdfcff; --surface-2: #e4e2ee; --ink: #1e1c2a; --ink-2: #4b485e; --muted: #838098;
  --grid: #dbd9e7; --axis: #bfbcd2; --border: rgba(40,30,80,.14); --accent: #46408a; --accent-bg: #e3e1f5; --accent-solid: #5f59ab; }
:root[data-pal="sky"]:not([data-theme="dark"]) {   /* Небо: светлая голубая */
  --page: #eef3f8; --surface: #fcfdfe; --surface-2: #dfe8f1; --ink: #14202c; --ink-2: #41505f; --muted: #76879a;
  --grid: #d6e0ea; --axis: #b4c3d2; --border: rgba(15,40,70,.14); --accent: #1f5c8f; --accent-bg: #dbe9f6; --accent-solid: #2f73ad; }
.pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.pal { border: 2px solid var(--border); border-radius: 12px; padding: .5rem; cursor: pointer; background: var(--surface); color: var(--ink); font: inherit; text-align: left; }
.pal.on { border-color: var(--accent-solid); }
.pal .sw { display: flex; height: 34px; border-radius: 8px; overflow: hidden; margin-bottom: .35rem; border: 1px solid rgba(0,0,0,.12); }
.pal .sw i { flex: 1; }

.tl li.c, .tl li.s { text-align: left; }   /* .c — ещё и служебный класс «по центру»: в ленте он означает «комментарий» */
.tl .txt.ev { white-space: normal; }
input[type=time] { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--axis); border-radius: 10px; padding: .38rem .6rem; }

/* ---------- список заявок: галочки, быстрые действия, панель групповых действий ---------- */
.choose { display: grid; gap: .4rem; }
.choose .btn { justify-content: flex-start; padding: .6rem .9rem; }
table.t th.nosort { cursor: default; }
table.tix td.c-chk, table.tix td.c-act { vertical-align: middle; }
table.tix input.tsel, #chk-all { width: 1.05rem; height: 1.05rem; cursor: pointer; }
@media (max-width: 820px) { table.tix .c-chk, table.tix .c-act, .bulkbar { display: none !important; } }

/* ---------- графики (страница «Показатели»): два цвета рядов проверены на различимость, в т.ч. при дальтонизме ---------- */
:root { --s1: #2a78d6; --s2: #eb6834; }
:root[data-theme="dark"] { --s1: #3987e5; --s2: #d95926; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { --s1: #3987e5; --s2: #d95926; } }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .grid { stroke: var(--grid); stroke-width: 1; } .chart-svg .axis { stroke: var(--axis); stroke-width: 1; }
.chart-svg .tick { fill: var(--muted); font-size: 11px; } .chart-svg .endlab { fill: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.legend { list-style: none; display: flex; gap: 1rem; padding: 0; margin: 0 0 .3rem; color: var(--ink-2); font-size: .88rem; flex-wrap: wrap; }
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }
.tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: .45rem .65rem; box-shadow: 0 6px 24px rgba(0,0,0,.2);
  font-size: .85rem; white-space: nowrap; z-index: 40; transform: translateY(-100%); color: var(--ink); }
.tip b { display: block; margin-bottom: .2rem; }
.chart-table { margin-top: .4rem; font-size: .88rem; color: var(--ink-2); } .chart-table summary { cursor: pointer; }
.meter { display: inline-block; width: 6.5rem; height: 8px; border-radius: 4px; background: var(--surface-2); vertical-align: middle; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--s1); border-radius: 4px; }
table.tix td.c-chk { white-space: nowrap; }
table.tix td.c-chk .actb { margin-left: .45rem; padding: .05rem .45rem; vertical-align: middle; }

/* ---------- форма отбора списка заявок ---------- */
.ffilter { display: grid; gap: .7rem; }
.ffilter .frow { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-start; }
.ffilter .fld { min-width: 7.5rem; } .ffilter .fld > span { font-size: .8rem; }
.ffilter select, .ffilter input[type=search], .ffilter input[type=date] { width: 100%; }
a.sortlink { color: inherit; display: block; } a.sortlink:hover { text-decoration: none; color: var(--accent); }
th.cur { color: var(--accent); }

/* =====================================================================================================
   Кнопки не «скачут»: каждая живёт на своём месте. Неподходящие по состоянию кнопки затемняются, а не исчезают;
   панель действий закреплена у нижнего края экрана; значки-счётчики не меняют ширину пунктов меню.
   ===================================================================================================== */
.top-in { row-gap: .35rem; }
.nav { order: 3; flex: 1 0 100%; }                                      /* меню — всегда второй строкой шапки, не переносится само */
.nav > a { position: relative; }
.nav > a .badge, #bell-n { position: absolute; top: -.25rem; right: -.2rem; padding: 0 .38rem; font-size: .68rem; line-height: 1.3; }
.iconbtn { position: relative; }
#bell-n { top: -.45rem; right: -.45rem; }
.userchip span { display: inline-block; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.actgrid { display: grid; gap: .45rem; }
.actgrid.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .actgrid.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.actgrid .btn { flex-direction: column; gap: .1rem; padding: .5rem .3rem; min-height: 3.6rem; white-space: normal; text-align: center; line-height: 1.15; font-size: .9rem; }
.actgrid .btn .ic { font-size: 1.3rem; line-height: 1; }
.actgrid .btn:disabled { opacity: .36; cursor: not-allowed; filter: grayscale(.7); }
.acthint { margin-top: .5rem; min-height: 1.3rem; font-size: .84rem; color: var(--muted); }
.slots { display: inline-flex; gap: .3rem; flex-wrap: nowrap; }
.slot { display: inline-block; min-width: 6.4rem; text-align: right; }
@media screen and (max-width: 820px) {
  .actgrid.g6, .actgrid.g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .actgrid .btn { min-height: 3.4rem; font-size: .86rem; }
}

/* форма приёма заявки: места под подсказки заняты заранее, чтобы кнопки ниже не уезжали, когда подсказки появляются */
.keep { margin-top: .5rem; overflow: auto; align-content: flex-start; }
.keep:empty::before { color: var(--muted); font-size: .85rem; }
.keep-warn { min-height: 3.2rem; max-height: 9rem; } .keep-warn:empty::before { content: "Здесь появятся предупреждения: повтор заявки, отключение в доме…"; }
.keep-people { min-height: 3.6rem; max-height: 7.5rem; margin-bottom: .5rem; } .keep-people:empty::before { content: "Жильцы и телефоны появятся после выбора адреса — один щелчок подставит ФИО и номер."; }
.keep-phrases { min-height: 2.7rem; max-height: 5.6rem; } .keep-phrases:empty::before { content: "Быстрые формулировки появятся после выбора вида заявки."; }
.actgrid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }


/* ---------- закреплённая нижняя панель: главные кнопки страницы всегда в одном и том же месте экрана ---------- */
.actdock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--surface); border-top: 2px solid var(--accent-solid); box-shadow: 0 -8px 24px rgba(0,0,0,.16); }
.dock-in { max-width: 1480px; margin: 0 auto; padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom)); display: grid; gap: .45rem; }
.dock-in .actgrid .btn { min-height: 3.05rem; padding: .35rem .3rem; }
.dock-in .actgrid .btn .ic { font-size: 1.15rem; }
.dock-form { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dock-form .btn small { opacity: .75; font-weight: 400; margin-left: .3rem; }
main:has(.actdock) { padding-bottom: 10.5rem; }
.dockmore > summary { display: none; list-style: none; cursor: pointer; }
.dockmore > summary::-webkit-details-marker { display: none; }
.acthint { font-size: .84rem; color: var(--muted); min-height: 1.3rem; }
@media screen and (max-width: 820px) {
  .actdock { bottom: calc(3.75rem + env(safe-area-inset-bottom)); }
  .dock-in { padding: .4rem .6rem; }
  main:has(.actdock) { padding-bottom: 15rem; }
  .actgrid.g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .actgrid.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .actgrid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dock-in .actgrid .btn { min-height: 2.9rem; font-size: .76rem; }
  .actgrid.g5 .btn .tx { font-size: .66rem; }
  .dockmore > summary { display: block; text-align: center; color: var(--accent); font-size: .85rem; padding: .1rem 0; }
  .dock-form .btn { flex: 1 1 100%; }
}
@media print { .actdock { display: none !important; } }

@media screen and (max-width: 820px) { .userchip span { display: none; } }    /* на телефоне в шапке только значок: имя не должно расширять страницу */

details.filt[data-own] > summary { display: inline-flex; }          /* форма отбора заявок: свёрнута, пока отбор не задан; кнопка видна и на компьютере */

/* ---------- поиск в шапке: выпадающие результаты по мере набора ---------- */
.qs { position: absolute; left: 0; right: 0; top: calc(100% + 6px); min-width: min(34rem, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.25); max-height: 72vh; overflow: auto; z-index: 60; }
.search .qs { right: auto; }
.qs-h { padding: .35rem .8rem .15rem; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.qs a { display: block; padding: .38rem .8rem; color: var(--ink); border-bottom: 1px solid var(--grid); line-height: 1.25; }
.qs a:hover, .qs a.sel { background: var(--accent-bg); text-decoration: none; }
.qs a small { display: block; color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs a.qs-all { text-align: center; color: var(--accent); font-weight: 600; border-bottom: 0; }
.qs-empty { padding: .7rem .9rem; color: var(--muted); font-size: .9rem; }

/* ---------- чередование строк и карточек: нечётные чуть светлее, чётные чуть темнее ---------- */
table.t tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--surface), white 3.5%); }
table.t tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface), black 4.5%); }
table.t tbody tr:hover td { background: var(--surface-2); }
.bcol .tcard:nth-of-type(odd) { background: color-mix(in srgb, var(--surface), white 3.5%); }
.bcol .tcard:nth-of-type(even) { background: color-mix(in srgb, var(--surface), black 5%); }
@media print { table.t tbody tr:nth-child(n) td, .bcol .tcard:nth-of-type(n) { background: none; } }

/* ---------- компактная форма приёма заявки ---------- */
.pagehead.tight { margin-bottom: .55rem; } .pagehead.tight h1 { font-size: 1.25rem; margin: 0; } .pagehead.tight .sub { font-size: .82rem; }
.compact { padding: .7rem .85rem; }
.compact .fsec { margin-top: .55rem; }
.compact .fsec > .lab { margin-bottom: .18rem; font-size: .8rem; }
.compact input[type=text], .compact input[type=tel], .compact input[type=number], .compact input[type=date], .compact input[type=datetime-local], .compact select, .compact textarea { padding: .3rem .55rem; font-size: .95rem; }
.compact .row { gap: .4rem; } .row.tight { gap: .4rem; margin-top: .25rem; }
.compact .types { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .3rem; }
.compact .tbtn { flex-direction: row; justify-content: flex-start; gap: .35rem; padding: .28rem .5rem; border-radius: 9px; font-size: .92rem; }
.compact .tbtn .ic { font-size: 1.05rem; line-height: 1; }
.compact .toggle { padding: .24rem .6rem; font-size: .92rem; border-radius: 9px; }
.compact .pchip { padding: .18rem .55rem; font-size: .9rem; } .compact .chip { padding: .14rem .55rem; font-size: .9rem; }
.compact .chips { gap: .3rem; }
.compact .keep:empty { display: none; }
.sugchips .chip small { color: inherit; opacity: .75; }
.compact .addrbox input { font-size: 1rem; }
.newt { align-items: start; }
.newt > .side { position: sticky; top: 4.4rem; max-height: calc(100vh - 9rem); overflow: auto; padding: .7rem .85rem; }
.newt > .side h3 { margin: .6rem 0 .3rem; font-size: .95rem; }
.newt > .side .mini { padding: .35rem .55rem; margin-bottom: .3rem; }
@media (max-width: 960px) { .newt > .side { position: static; max-height: none; } }
.compact .picked { padding: .3rem .6rem !important; font-size: 1rem !important; }
.compact .keep-warn:empty, .compact .keep-people:empty { margin: 0; }

/* ---------- постраничный вывод ---------- */
.pager { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .55rem .2rem .1rem; }
.pager .pgs { display: inline-flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
.pager .pgs a, .pager .pgs .gap { min-width: 2rem; padding: .22rem .5rem; text-align: center; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); }
.pager .pgs .gap { border-color: transparent; background: none; }
.pager .pgs a:hover { background: var(--surface-2); text-decoration: none; }
.pager .pgs a.on { background: var(--accent-solid); color: #fff; border-color: transparent; font-weight: 600; }
.pager select { padding: .2rem .4rem; }
.dlg .phr { margin: .1rem 0 .5rem; gap: .35rem; }
.dlg .phr .chip { padding: .22rem .65rem; }
.dlg-err { color: var(--crit); font-size: .88rem; margin-top: .3rem; }
.sugchips .chip.ghost { border-style: dashed; color: var(--muted); }
.sugchips .chip.lead { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); font-weight: 600; }
.sugchips .unpin { margin-left: .2rem; opacity: .6; padding: 0 .15rem; border-radius: 6px; }
.sugchips .unpin:hover { opacity: 1; background: rgba(0,0,0,.18); }

/* новая заявка: пошаговые блоки */
.steps { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.steps .card { margin: 0; }
.step { border-left: 4px solid var(--border); }
.step.cur { border-left-color: var(--accent-solid); }
.step.done { border-left-color: var(--good); }
.steph, details.more > summary { display: flex; align-items: center; gap: .6rem; }
.steph h2, details.more > summary h2 { margin: 0; font-size: 1.05rem; }
details.more > summary { list-style: none; cursor: pointer; } details.more > summary::-webkit-details-marker { display: none; }
.snum { display: inline-grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); font-weight: 700; font-size: .95rem; }
.step.cur .snum { background: var(--accent-solid); color: #fff; border-color: transparent; }
.step.done .snum { background: var(--good-bg); color: var(--good); border-color: transparent; }
.sstate { margin-left: auto; font-size: .82rem; color: var(--ink-2); }
.step.done .sstate { color: var(--good); font-weight: 700; }
.btn.primary.off { opacity: .55; }