/* Дополнения к макетному style.css: только то, чего в макетах нет. Без inline-стилей (CSP). */
.sprite { position: absolute; }
.m-top .m-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
/* Пока не сделанные пункты меню */
.nav a.off, .tabbar a.off { color: var(--color-hint); cursor: default; }
.nav a.off:hover { background: transparent; }
.card .empty { color: var(--color-muted); font-size: 15px; line-height: 22px; padding: 28px 0; text-align: center; }
@media (max-width: 820px) {
  /* верхняя полоса на всю ширину экрана (в .main есть боковые отступы 16px) */
  .m-top { margin: 0 -16px; }
}

/* ---- Вход (app/templates/login.html): одна карточка по центру, без inline-скриптов и inline-стилей ---- */
.login-body.single { display: block; max-width: 460px; padding-top: 56px; }
.login-card .field-l { display: block; margin-top: 24px; font-size: 13px; font-weight: 500; color: var(--color-ink2, var(--color-muted)); }
.login-card .field { display: block; width: 100%; height: 48px; margin-top: 8px; padding: 0 14px; border: 1px solid var(--color-border-med); border-radius: 10px; background: var(--color-card); font-size: 17px; }
.login-card .field:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 122, 10, .18); }
.login-card .field.code { text-align: center; letter-spacing: .5em; font: 700 26px var(--display); font-variant-numeric: tabular-nums; height: 56px; }
/* шесть ячеек кода (их строит /static/code-cells.js; без скрипта виден обычный .field.code выше) */
.login-card .code-cells { display: flex; gap: 8px; margin-top: 8px; }
.login-card .code-cells .field.code-cell { flex: 1 1 0; min-width: 0; width: auto; margin-top: 0; padding: 0; text-align: center; font: 700 26px var(--display); font-variant-numeric: tabular-nums; height: 56px; }
.login-card .code-hint { min-height: 0; margin-top: 10px; color: var(--color-danger-ink); font-size: 14px; line-height: 20px; }
.login-card .code-hint:empty { display: none; }
.login-card .btn.ghost { margin-top: 12px; }
.login-card .err { margin-top: 18px; padding: 12px 16px; border: 1px solid var(--color-danger-border); border-radius: 12px; background: var(--color-danger-bg); color: var(--color-danger-ink); font-size: 14px; line-height: 20px; }
.login-card form { margin: 0; }
.login-card .alt { margin-top: 18px; font-size: 13px; line-height: 18px; color: var(--color-muted); }
.login-card .alt a { color: var(--color-accent-ink); font-weight: 600; }

/* ---- Кто вошёл: низ боковой панели и верх телефона ---- */
.who { padding: 12px 10px 4px; border-top: 1px solid var(--color-border); margin-top: 8px; }
.who .nm { display: block; font-size: 13px; font-weight: 600; line-height: 18px; word-break: break-word; }
.who form { margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.m-who { display: flex; align-items: center; gap: 8px; }
.m-who .nm { font-size: 12px; font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-who form { margin: 0; }
.btn.linkish { background: transparent; color: var(--color-muted); border: 0; height: 28px; padding: 0 8px; font-weight: 500; font-size: 12px; }
.btn.linkish:hover { background: var(--color-surface-2); }

/* ---- Экран «Здоровье» (app/templates/shop.html, app/health/chart.py): без inline-стилей, графики — серверный SVG ---- */
/* Переключатель кофеен на <details>: работает без скриптов */
details.shop > summary.shop-btn { list-style: none; }
details.shop > summary.shop-btn::-webkit-details-marker { display: none; }
details.shop[open] > .shop-btn { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 122, 10, .18); }
details.shop[open] > .shop-btn::after { transform: rotate(225deg) translate(-2px, -2px); }
.shop-btn.static { cursor: default; }
.shop-btn.static::after { display: none; }
.shop-menu a.it { color: inherit; }
.shop-menu a.it:hover { background: var(--color-bg); }
.shop-menu a.it.on:hover { background: var(--color-accent-bg); }
.shop-menu .it > div { min-width: 0; }

.st.n { color: var(--color-muted); }
.flexw { display: flex; gap: 8px 28px; align-items: baseline; flex-wrap: wrap; }
.strip.one { grid-template-columns: minmax(0, 1fr); }
.stub .big, .stub .mid { color: var(--color-hint); }
.card .note + .st, .card .note + svg + .st { margin-top: 12px; }
.card svg.gauge, .card svg.pbar-s { display: block; margin-top: 12px; }
.card .note + svg.pbar-s { margin-top: 16px; }
.bar-kv { margin: 12px 0 4px; font-size: 13px; }
.muted { color: var(--color-hint); font-size: 12px; }
.w34 { width: 34%; }
.att li { grid-template-columns: 12px minmax(0, 1fr); }
.att-foot { margin-top: 14px; }
.chart-legend { gap: 6px 16px; flex-wrap: wrap; margin-bottom: 6px; }
.chart-legend span { display: inline-flex; align-items: center; }
.chart-legend .sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; }
.chart-legend .dash { display: inline-block; width: 18px; height: 0; border-top: 2px dashed var(--color-text); margin-right: 6px; border-radius: 0; }
.chart-note { margin-top: 10px; }

/* Цвета легенд и картинок (SVG берёт классы, не style=) */
.sw-wd { background: var(--color-grey); } .sw-we { background: var(--color-accent); } .sw-lo { background: var(--color-danger); }
.sw-fact { background: var(--color-accent); }
.sw-fc { background: var(--color-accent-bg); border: 1.5px dashed var(--color-accent); }
.sw-plan { background: var(--color-text); }
.sw-be { background: var(--color-teal); }
svg .grid-l { stroke: var(--color-surface-3); stroke-width: 1; }
svg .bar-wd { fill: var(--color-grey); } svg .bar-we { fill: var(--color-accent); } svg .bar-lo { fill: var(--color-danger); }
svg .be-line { stroke: var(--color-text); stroke-width: 1.5; stroke-dasharray: 5 4; }
svg .z-g { fill: var(--color-ok-border); } svg .z-y { fill: var(--color-warn-border); } svg .z-r { fill: var(--color-danger-border); }
svg.gauge .pin { fill: var(--color-text); }
svg .trk { fill: var(--color-track); }
svg.pbar-s .fact, svg.mbar .fil { fill: var(--color-accent); }
svg.pbar-s .fc { fill: var(--color-accent-bg); stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 3 2; }
svg .tick-plan { fill: var(--color-text); } svg .tick-be { fill: var(--color-teal); }
@media (max-width: 820px) {
  .card-h .lbl { min-width: 0; }
  .tbl th, .tbl td { padding-left: 8px; padding-right: 8px; }
  .tbl td:first-child, .tbl th:first-child { padding-left: 0; }
  .tbl td:last-child, .tbl th:last-child { padding-right: 0; }
}
svg .tick-m { fill: var(--color-text); }

/* Главная: список кофеен человека */
.shoplist { list-style: none; margin: 0; padding: 0; }
.shoplist li + li { border-top: 1px solid var(--color-border); }
.shoplist a { display: flex; align-items: center; gap: 12px; padding: 14px 0; min-height: 48px; }
.shoplist svg { width: 20px; height: 20px; flex: none; stroke: var(--color-accent-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shoplist b { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.shoplist .go { font-size: 12px; font-weight: 600; color: var(--color-accent-ink); }

/* Низ боковой панели: имя над кнопками (в макете .who — ряд с аватаром, здесь аватара нет) */
.side .who { display: block; }
.mname small { display: block; }

/* Правки по ревью */
svg.mbar .fc { fill: var(--color-accent-bg); stroke: var(--color-accent); stroke-width: .6; stroke-dasharray: 2 1.5; vector-effect: non-scaling-stroke; }
.avg-note { margin-top: 6px; }
.big + .avg-note { margin-top: 8px; }
@media (max-width: 820px) {
  /* верхняя полоса телефона: имя уходит строкой ниже кнопок, иначе «Выйти везде» не помещается */
  .m-top .m-row { flex-wrap: wrap; row-gap: 4px; }
  .m-who { flex-wrap: wrap; justify-content: flex-end; }
  .m-who .nm { max-width: 90px; }
}

/* ---- Экран «Продажи» (app/templates/sales.html, app/sales/view.py): без inline-стилей, картинки — серверный SVG ---- */
.months { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.months a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--color-border-med); background: var(--color-card); font-size: 13px; font-weight: 600; color: var(--color-muted); }
.months a:hover { background: var(--color-bg); }
.months a.on { background: var(--color-accent-bg); border-color: var(--color-accent); color: var(--color-accent-ink); }
.heat-wrap { overflow-x: hidden; }
.heat-t { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.heat-t th { font: 500 11px var(--body); color: var(--color-hint); text-align: center; padding: 0; font-variant-numeric: tabular-nums; }
.heat-t th.hday { font: 600 13px var(--body); color: var(--color-text); text-align: left; width: 34px; }
.heat-t th.htot, .heat-t td.htot { width: 84px; text-align: right; }
.heat-t td.htot { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-muted); }
.heat-t td.hcell { height: 36px; border-radius: 6px; text-align: center; font: 600 11px var(--body); font-variant-numeric: tabular-nums; padding: 0; color: var(--color-text); }
.hv0 { background: #f4f6f8; color: #14181c; }
.hv1 { background: rgb(233, 244, 234); color: #14181c; }
.hv2 { background: rgb(204, 225, 206); color: #14181c; }
.hv3 { background: rgb(175, 205, 178); color: #14181c; }
.hv4 { background: rgb(146, 186, 150); color: #14181c; }
.hv5 { background: rgb(116, 166, 122); color: #14181c; }
.hv6 { background: rgb(87, 147, 94); color: #ffffff; }
.hv7 { background: rgb(58, 128, 66); color: #ffffff; }
.hv8 { background: rgb(29, 108, 38); color: #ffffff; }
.hv9 { background: rgb(0, 89, 10); color: #ffffff; }
.legend.heat-legend { margin-top: 16px; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.legend .lg-s { display: flex; align-items: center; gap: 6px; }
svg.hbar .fil { fill: var(--color-accent); }
svg.hbar { display: block; }
.w28 { width: 28%; } .w36 { width: 36%; }
.cat-t { margin-top: 12px; }
svg.stack-s { display: block; border-radius: 6px; }
svg .cat0 { fill: #007a0a; } .sw.cat0 { background: #007a0a; }
svg .cat1 { fill: #12505f; } .sw.cat1 { background: #12505f; }
svg .cat2 { fill: #9aa3ab; } .sw.cat2 { background: #9aa3ab; }
svg .cat3 { fill: #14181c; } .sw.cat3 { background: #14181c; }
svg .cat4 { fill: #d9a21b; } .sw.cat4 { background: #d9a21b; }
svg .cat5 { fill: #c4423a; } .sw.cat5 { background: #c4423a; }
svg .catx { fill: #c7cdd4; } .sw.catx { background: #c7cdd4; }
.warnbox { margin-top: 18px; padding: 14px 16px; background: var(--color-warn-bg); border-radius: 9px; color: var(--color-warn-ink); font-size: 13px; line-height: 18px; }
.warnbox .tbl { margin-top: 8px; color: var(--color-warn-ink); } .warnbox .tbl td { border-color: var(--color-warn-border); padding-top: 5px; padding-bottom: 5px; }
.warnbox summary { cursor: pointer; margin-top: 8px; font-weight: 600; border-bottom: 1px solid currentColor; display: inline-block; }
.disc-t { margin-top: 12px; }
.cancel-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.cancel-g .tbl { margin-top: 12px; }
.tbl td.nm { overflow-wrap: anywhere; word-break: break-word; }   /* длинное слитное название не растягивает страницу */
svg.mbars .mb { fill: #c7cdd4; } svg.mbars .mb.on { fill: var(--color-accent); }
@media (max-width: 820px) {
  .cancel-g { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .heat-t { border-spacing: 2px; }
  .heat-t td.hcell { height: 28px; }
  .heat-t td.hcell span { display: none; }   /* на узком экране числа не помещаются: цвет и подсказка */
  .heat-t th.htot, .heat-t td.htot { display: none; }
  .heat-t th { font-size: 9px; }
  .heat-t th.hday { width: 24px; font-size: 12px; }
  .months { gap: 4px; }
  .months a { padding: 0 8px; min-height: 34px; font-size: 12px; }
}

/* ---- Экран «Выписки» (app/templates/statements.html, app/money/views.py): без inline-стилей ---- */
.drop .drop-r { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.drop input.file { max-width: 300px; font-size: 13px; color: var(--color-muted); }
.drop input.file::file-selector-button { height: 36px; margin-right: 10px; padding: 0 14px; border: 1px solid var(--color-border-med); border-radius: 8px; background: var(--color-card); color: var(--color-text); font: 600 13px var(--body); cursor: pointer; }
.errbox { padding: 12px 16px; border: 1px solid var(--color-danger-border); border-radius: 12px; background: var(--color-danger-bg); color: var(--color-danger-ink); font-size: 14px; line-height: 20px; }
.res-line { font-size: 14px; line-height: 20px; margin: 0 0 8px; }
.res-line.bad { font-weight: 600; }
.st-note { white-space: normal; max-width: 360px; font-size: 12px; line-height: 16px; margin-top: 6px; }
.st-hist, .st-acc { min-width: 640px; }
.res-mismatch { border-color: var(--color-danger-border); }
@media (max-width: 820px) {
  .drop .drop-r { margin-left: 0; width: 100%; }
  .drop input.file { max-width: 100%; }
}

/* ---- Экран «ДДС» (app/templates/dds.html, app/money/dds_views.py): без inline-стилей, без скриптов ---- */
.okbox { padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--color-ok-border); border-radius: 12px; background: var(--color-accent-bg); color: var(--color-accent-ink); font-size: 14px; line-height: 20px; }
.warnbox { margin-bottom: 16px; }
.warnbox.zero ul { margin: 8px 0 0; padding-left: 18px; }
.warnbox.zero a { font-weight: 600; margin-left: 8px; text-decoration: underline; }
.bn-i { flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ctl { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 8px; }
.ctl-n { margin: 0 0 14px; }
.ctl .seg { flex-wrap: wrap; }
.rng { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rng label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-muted); }
.rng select.inp { width: auto; height: 32px; line-height: 30px; font-size: 13px; padding: 0 8px; }
.card.flush { padding: 0; overflow: hidden; }
.dds-scroll { max-height: 78vh; overflow: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.dds a.cl { color: inherit; border-bottom: 1px dotted var(--color-hint); }
.dds a.cl:hover { color: var(--color-accent-ink); border-bottom-color: var(--color-accent); }
.dds .gs { color: var(--color-warn-ink); font-weight: 700; margin-left: 3px; cursor: help; }
.dds tr.l3.sub td:first-child { padding-left: 50px; }
.dds tr.move .muted { font-style: normal; }
.dds tr.un .cl { color: var(--color-danger-ink); border-bottom-color: var(--color-danger); }
.why { list-style: none; margin: 0; padding: 0; }
.why li { padding: 8px 0; border-top: 1px solid rgba(16, 24, 32, .08); font-size: 13px; line-height: 18px; }
.why li:first-child { border-top: 0; padding-top: 0; }
.why-r { display: block; color: var(--color-muted); margin-top: 2px; }
.un-sum { text-align: right; flex: none; }
.drl { min-width: 980px; }
.drl .dt { font-size: 13px; white-space: nowrap; }
.drl td.act { min-width: 300px; }
.drl td.hint-c { min-width: 190px; }
.unal .amount.neg { color: var(--color-danger-ink); }
.unal .amount.pos { color: var(--color-accent-ink); }
.af { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.af select.inp { height: 36px; line-height: 34px; font-size: 13px; min-width: 220px; }
.af .ck input { width: 16px; height: 16px; accent-color: var(--color-accent); margin: 0; }
.af-one { margin-top: 6px; }
details.chg { margin-top: 6px; }
details.chg > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-accent-ink); list-style: none; }
details.chg[open] > summary { margin-bottom: 8px; }
.btn.danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-ink); }
.why-r a.cl { margin-left: 8px; font-weight: 600; color: var(--color-accent-ink); }
.cash-add > summary { font-size: 15px; }
.cashf { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; align-items: end; margin-top: 8px; }
.cashf label, .cashf fieldset { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--color-muted); margin: 0; padding: 0; border: 0; min-width: 0; }
.cashf .ck { flex-direction: row; align-items: center; gap: 8px; color: inherit; }
.cashf .ck input { width: 16px; height: 16px; accent-color: var(--color-accent); margin: 0; }
.cashf legend { padding: 0; margin-bottom: 4px; }
.cashf .inp { width: 100%; }
.cashf .btn { justify-self: start; }
@media (max-width: 820px) {
  /* таблица прокручивается по горизонтали, первая колонка (статья) закреплена и уже, чем на компьютере */
  .dds { min-width: 0; font-size: 12px; }
  .dds td:first-child { min-width: 132px; max-width: 150px; white-space: normal; line-height: 15px; padding-left: 10px; }
  .dds th:first-child { min-width: 132px; }
  .dds th, .dds td { padding: 0 8px; }
  .dds tr.l3 td:first-child { padding-left: 14px; }
  .dds tr.l3.sub td:first-child { padding-left: 24px; }
  .dds tr.l2 td:first-child { padding-left: 10px; }
  .dds-scroll { max-height: 70vh; }
  .un-sum { text-align: left; }
  .rng select.inp { min-width: 110px; }
}

/* экран «Ручные данные» (/manual): чек-лист месяца и форма плана; без скриптов, на телефоне — в один столбец */
.check.mc { grid-template-columns: 14px minmax(0, 1fr) auto; align-items: start; }
.check.mc .dot { margin-top: 5px; }
.check.mc .btn { grid-column: 2 / -1; justify-self: start; }
.check.mc .pill { white-space: nowrap; }
.planf { display: flex; flex-direction: column; }
.plan-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 220px); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--color-border); }
.plan-row:first-of-type { border-top: 0; }
.plan-row label b { display: block; font-weight: 600; }
.plan-row label .s { display: block; font-size: 12px; line-height: 16px; color: var(--color-muted); margin-top: 2px; }
.plan-row .inp { width: 100%; text-align: right; }
.planf .btn { align-self: flex-start; margin-top: 16px; }
@media (max-width: 820px) {
  .plan-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .plan-row .inp { text-align: left; }
}