/* Казна: стили проекта поверх Qadam UI (css/qadam.css, handbook design/).
   Только токены --q-*; свой цвет — одна плитка --q-project. Компоненты — классы .q-*;
   здесь — оболочка SPA и блоки, которых нет в Qadam UI (классы kz-* и модули календаря, графика, шаблонов, просмотра файлов). */
:root { --q-project: #0C8599; }

/* ---------- Оболочка: #app рендерится в body.q-app, его дети — ячейки сетки q-app ---------- */
#app { display: contents; }
.q-topbar .q-avatar { cursor: pointer; border: 0; }
.kz-env-badge { align-self: center; flex: none; } /* плашка DEV у названия (KAZNA_ENV=dev) */
.q-sidebar__foot .q-row { padding: var(--q-space-1) var(--q-space-3); flex-wrap: nowrap; }
.q-bottomnav .q-count { position: absolute; top: 6px; left: calc(50% + 6px); }
/* «Новая заявка» на телефоне — в q-bottomnav (она видна только < 768) */
@media (max-width: 767px) { .q-page-head [data-act="new"].q-btn--primary { display: none; } }

/* ---------- Модалки: форма охватывает __head / __body / __foot ---------- */
.kz-modal-form { display: contents; }
.kz-modal-doc { height: calc(100dvh - 48px); }
.kz-modal-doc .q-modal__body { flex: 1; padding: 0 var(--q-space-4) var(--q-space-4); }
.kz-doc-frame { flex: 1; width: 100%; min-height: 60vh; border: 1px solid var(--q-line); border-radius: var(--q-radius-md); background: white; /* лист документа всегда белый */ }

/* ---------- KPI: полная сумма на компьютере, короткая на телефоне ---------- */
.kz-short { display: none; }
@media (max-width: 767px) { .kz-full { display: none; } .kz-short { display: inline; } }

/* ---------- Карточка заявки ---------- */
.kz-decide { display: flex; flex-direction: column; gap: var(--q-space-3); }
.kz-desc { white-space: pre-wrap; background: var(--q-sunken); border-radius: var(--q-radius-md); padding: var(--q-space-3); overflow-wrap: anywhere; }
.kz-files { display: flex; flex-direction: column; gap: var(--q-space-2); }
.kz-files a, a[data-act="file-view"] { display: inline-flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.kz-bar-sub { color: var(--q-muted); margin-left: 6px; font-weight: 400; }
.kz-checks { display: flex; flex-wrap: wrap; gap: var(--q-space-2) var(--q-space-4); }
.q-check.kz-check-inline, .q-field > .q-check { margin-top: var(--q-space-6); }
fieldset { border: 1px solid var(--q-line); border-radius: var(--q-radius-md); padding: var(--q-space-3); margin: 0; min-width: 0; }
legend { padding: 0 var(--q-space-1); }

/* ---------- Фильтры реестра: на телефоне раскрываются кнопкой ---------- */
.kz-ftoggle { display: none; }
@media (max-width: 767px) {
  .q-filters { grid-template-columns: minmax(0, 1fr) auto; }
  .q-filters .q { grid-column: 1; }
  .kz-ftoggle { display: inline-flex; grid-column: 2; grid-row: 1; align-self: end; }
  .q-filters:not(.open) .q-field:not(.q) { display: none; }
  .q-filters.open .q-field:not(.q) { grid-column: 1 / -1; }
}

/* ---------- Ошибки в формах ---------- */
.invalid { border-color: var(--q-danger) !important; box-shadow: 0 0 0 3px var(--q-danger-soft) !important; }
.invalid-box { background: var(--q-danger-soft); border-radius: var(--q-radius-sm); padding: 6px 8px; }
.chips.invalid, .q-row.invalid { outline: 2px solid var(--q-danger); outline-offset: 3px; border-radius: var(--q-radius-sm); }

/* ---------- Календарь платежей ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--q-line); border-radius: var(--q-radius-lg); overflow: hidden; background: var(--q-line); gap: 1px; }
.cal .dow { background: var(--q-sunken); padding: 6px 8px; font-size: 11px; color: var(--q-muted); }
.cal .day { background: var(--q-surface); min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal .day.out { background: var(--q-bg); opacity: .55; }
.cal .day.today .dn { background: var(--q-accent); color: var(--q-accent-ink); border-radius: 50%; }
.cal .dn { font-size: 12px; width: 22px; height: 22px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.ev { all: unset; cursor: pointer; display: block; font-size: 11px; padding: 2px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid currentColor; }
.ev:focus-visible { outline: 2px solid var(--q-accent); }
.ev.plan { color: var(--q-muted); background: var(--q-sunken); }
.ev.overdue { color: var(--q-danger); background: var(--q-danger-soft); }
.ev.due { color: var(--q-warning); background: var(--q-warning-soft); }
.ev.paid { color: var(--q-success); background: var(--q-success-soft); }
.ev .ea { font-family: var(--q-font-mono); }
.more { font-size: 11px; color: var(--q-muted); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--q-muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
@media (max-width: 767px) { .cal .day { min-height: 58px; } .ev .et { display: none; } }
@media (max-width: 560px) { .cal .ev { font-size: 0; height: 5px; padding: 0; border-left: 0; background: currentColor !important; } }

/* ---------- Оплаты по месяцам (столбцы) ---------- */
.cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; height: 200px; padding-top: 18px; border-bottom: 1px solid var(--q-line); position: relative; }
.col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; position: relative; }
.col .cf { width: 70%; background: var(--q-accent); border-radius: 3px 3px 0 0; min-height: 1px; }
.col.cur .cf { background: var(--q-success); }
.col .cv { position: absolute; font-size: 10px; color: var(--q-muted); font-family: var(--q-font-mono); white-space: nowrap; transform: translateY(-16px); }
.colx { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; font-size: 11px; color: var(--q-muted); text-align: center; margin-top: 6px; }
@media (max-width: 560px) { .col .cv { display: none; } }

/* ---------- Выбор шаблона заявки ---------- */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--q-space-2); }
.tpl { display: flex; flex-direction: column; align-items: flex-start; gap: var(--q-space-2); padding: var(--q-space-3); border: 1px solid var(--q-line); border-radius: var(--q-radius-lg); background: var(--q-surface); color: var(--q-ink); font: inherit; font-size: var(--q-text-sm); font-weight: 500; text-align: left; cursor: pointer; min-height: 76px; }
.tpl:focus-visible { border-color: var(--q-accent); outline: none; box-shadow: 0 0 0 3px var(--q-accent-soft); }
@media (hover: hover) { .tpl:hover { border-color: var(--q-accent); box-shadow: 0 0 0 3px var(--q-accent-soft); } }
.tpl-i { color: var(--q-accent); }
.tpl-i .q-icon { width: 22px; height: 22px; }

/* ---------- Чипы-варианты (причины, вид топлива) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chipopt { position: relative; cursor: pointer; }
.chipopt input { position: absolute; opacity: 0; pointer-events: none; }
.chipopt span, .chipbtn { display: inline-block; padding: 7px 12px; border: 1px solid var(--q-line); border-radius: var(--q-radius-full); font: inherit; font-size: var(--q-text-sm); background: transparent; color: var(--q-ink); cursor: pointer; }
.chipopt input:checked + span, .chipbtn.on { background: var(--q-accent-soft); border-color: var(--q-accent); color: var(--q-accent); }
.chipopt input:focus-visible + span { box-shadow: 0 0 0 3px var(--q-accent-soft); }

/* ---------- Просмотр файлов (на весь экран) ---------- */
.fview { position: fixed; inset: 0; z-index: 80; background: var(--q-bg); display: flex; flex-direction: column; overflow: hidden; width: 100vw; max-width: 100%; }
.fview-h { display: flex; gap: 8px; align-items: center; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--q-line); background: var(--q-surface); }
.fview-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
html.fv-open, html.fv-open body { overflow: hidden; }
.fview-z { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 6px; border-bottom: 1px solid var(--q-line); background: var(--q-surface); font-size: 13px; }
.fview-z span { min-width: 84px; text-align: center; }
.fview-b { flex: 1; min-height: 0; overflow: auto; padding: 8px; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.fview-b > * { margin: 0 auto; }
.fview-b img { display: block; max-width: 100%; height: auto; }
.fv-page { display: block; background: white; box-shadow: var(--q-shadow-sm); margin: 0 0 10px; } /* лист документа всегда белый, как бумага */