/* ============================================================
   АХЧ-ЗАЯВКИ v433: список по этапам, страница заявки, форма «сначала
   фото». Свой слой, классы ah-, опирается на общие tk- из tasks-v427.
   ============================================================ */

:root {
  --ah-red: var(--state-crit, #b02a3d); --ah-red-bg: var(--state-crit-bg, #fdeaed);
  --ah-amber: var(--state-warn, #96660d); --ah-amber-bg: var(--state-warn-bg, #fdf3e0);
  --ah-ok: var(--state-ok, #0f7a5f); --ah-ok-bg: var(--state-ok-bg, #e4f6ef);
  --ah-info: var(--state-info, #1a6fb5); --ah-info-bg: var(--state-info-bg, #e8f2fc);
  --ah-calm-bg: var(--surface-hover, #f1f4f8);
  --ah-thumb-bg: linear-gradient(135deg, #e3e9f1, #cdd6e3);
}
[data-theme=dark] {
  --ah-thumb-bg: linear-gradient(135deg, #22324a, #1a283c);
}

.ah-page .tk-tools { margin-bottom: 16px; }
.ah-center-select select { height: 40px; border-radius: 11px; }
.ah-hint {
  margin-left: 2px; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 600;
  letter-spacing: 0; text-transform: none;
}

/* ---- Счётчики ---- */
.ah-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.ah-kpi {
  min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-card); box-shadow: var(--shadow);
}
.ah-kpi small { display: block; color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.ah-kpi b { display: block; margin: 4px 0 2px; color: var(--text); font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.ah-kpi em { display: block; overflow: hidden; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ah-kpi.is-act { box-shadow: inset 3px 0 0 var(--brand), var(--shadow); }
.ah-kpi.is-act b { color: var(--tk-accent, var(--brand)); }
.ah-kpi.is-warn b { color: var(--ah-amber); }
.ah-kpi.is-ok b { color: var(--ah-ok); }

/* ---- Список ---- */
.ah-list {
  padding: 2px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-card); box-shadow: var(--shadow);
}
.ah-sub {
  display: flex; align-items: center; gap: 10px; padding: 12px 0 8px; border-bottom: 1px solid var(--line-soft, var(--line));
  color: var(--muted); font-size: 12.5px; font-weight: 700;
}
.ah-sub + .ah-row { border-top: 0; }
.ah-sub .ah-note-btn { display: inline-flex; align-items: center; gap: 6px; }
.ah-warn {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 10px 0 6px; padding: 9px 12px;
  border-radius: 10px; background: var(--ah-amber-bg); color: var(--ah-amber); font-size: 12.5px; font-weight: 700;
}
.ah-warn b { color: inherit; }
.ah-warn > .tk-ico { width: 16px; height: 16px; }

.ah-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft, var(--line)); cursor: pointer;
}
.ah-row:last-child { border-bottom: 0; }
.ah-row:hover .ah-main b { color: var(--tk-accent, var(--brand)); }
.ah-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 10px; }
.ah-thumb {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden;
  border-radius: 11px; background: var(--ah-thumb-bg); color: var(--muted);
}
.ah-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ah-thumb .tk-ico { width: 20px; height: 20px; }
.ah-thumb i {
  position: absolute; right: 3px; bottom: 3px; padding: 0 4px; border-radius: 6px;
  background: rgba(23, 35, 61, .75); color: #fff; font-size: 10px; font-style: normal; font-weight: 800;
}
.ah-main { display: grid; gap: 1px; min-width: 0; }
.ah-main b { color: var(--text); font-size: 14px; font-weight: 800; }
.ah-main span { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ah-main small { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: var(--muted); font-size: 11.8px; }
.ah-main small .tk-mi .tk-ico { width: 12px; height: 12px; }
.ah-state { display: grid; justify-items: end; gap: 3px; }
.ah-state small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.ah-state small .tk-ico { width: 13px; height: 13px; }
.ah-age {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px;
  background: var(--ah-calm-bg); color: var(--text-soft); font-size: 12px; font-weight: 800; white-space: nowrap;
}
.ah-age .tk-ico { width: 13px; height: 13px; }
.ah-age.is-amber { background: var(--ah-amber-bg); color: var(--ah-amber); }
.ah-age.is-red { background: var(--ah-red-bg); color: var(--ah-red); }
.ah-age.is-ok { background: var(--ah-ok-bg); color: var(--ah-ok); }
.ah-line {
  display: inline-block; max-width: 280px; padding: 4px 8px; border-radius: 8px; background: var(--ah-calm-bg);
  color: var(--text-soft); font-size: 12px; font-weight: 800; text-align: right;
}
.ah-line.is-amber { background: var(--ah-amber-bg); color: var(--ah-amber); }
.ah-line.is-info { background: var(--ah-info-bg); color: var(--ah-info); }
.ah-line.is-ok { background: var(--ah-ok-bg); color: var(--ah-ok); }
.ah-act { display: flex; align-items: center; gap: 6px; }
.ah-quick { white-space: nowrap; }
.ah-quick.is-ok { border-color: color-mix(in srgb, var(--ah-ok) 30%, var(--line)); background: var(--ah-ok-bg); color: var(--ah-ok); }
.ah-quick.is-ok:hover { border-color: var(--ah-ok); color: var(--ah-ok); }

/* ---- Служебная записка и «устранено» ---- */
dialog:has(> form.ah-note), dialog:has(> form.ah-form) { width: min(560px, calc(100% - 24px)); }
dialog > form.ah-note, dialog > form.ah-form { display: grid; gap: 14px; padding: 20px 22px; }
.ah-form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ah-form-head h2 { margin: 0; font-size: 19px; }
.ah-note .hint { margin: 0; }
.ah-note-list { display: grid; gap: 8px; max-height: 50vh; overflow: auto; }
.ah-note-item {
  display: grid !important; grid-template-columns: 18px 44px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; font-weight: 500 !important; cursor: pointer;
}
.ah-note-item:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--surface-selected); }
.ah-note-item input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.ah-note-item .ah-thumb { width: 44px; height: 44px; }
.ah-note-item b { display: block; color: var(--text); font-size: 13px; }
.ah-note-item small { display: block; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ah-note textarea { min-height: 80px; }

/* ---- Форма: сначала фото ---- */
.ah-field { display: grid; gap: 7px; margin: 0; }
.ah-label { color: var(--text); font-size: 12px; font-weight: 800; }
.ah-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ah-shot {
  position: relative; display: grid !important; place-items: center; align-content: center; gap: 4px; height: 96px;
  overflow: hidden; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface-card-2);
  color: var(--muted); font-size: 12px !important; font-weight: 700 !important; cursor: pointer;
}
.ah-shot:hover { border-color: var(--brand); color: var(--tk-accent, var(--brand)); }
.ah-shot .tk-ico { width: 22px; height: 22px; }
.ah-shot input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ah-shot.is-filled { border: 0; background: var(--ah-thumb-bg); cursor: default; }
.ah-shot.is-filled img { width: 100%; height: 100%; object-fit: cover; }
.ah-shot-x {
  position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: rgba(23, 35, 61, .72); color: #fff; font-size: 16px; line-height: 1;
}
/* На компьютере камеры нет — «Снять» лишнее. */
@media (hover: hover) and (pointer: fine) { .ah-shot.is-camera { display: none !important; } }
.ah-places { display: flex; flex-wrap: wrap; gap: 6px; }
.ah-places:empty { display: none; }
.ah-places button {
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-card);
  color: var(--text); font-size: 12.5px; font-weight: 700;
}
.ah-places button:hover { border-color: var(--brand); }
.ah-places button.is-on { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--surface-selected); color: var(--tk-accent, var(--brand)); }
.ah-form textarea { min-height: 90px; }
.ah-form .dialog-actions .primary { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Страница заявки ---- */
/* «Изменить» и «…» держатся вместе: на телефоне «…» уезжал на отдельную строку. */
.ah-head-act { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.ah-detail .tk-head h1 { margin-bottom: 4px; }
.ah-lead { margin: 0 0 8px !important; color: var(--text) !important; font-size: 15px !important; line-height: 1.55; overflow-wrap: anywhere; }
.ah-note-text {
  margin: 0 0 8px !important; padding: 8px 10px; border-radius: 10px; background: var(--surface-hover);
  color: var(--text) !important; font-size: 13px !important;
}
.ah-note-text.is-admin { background: var(--ah-info-bg); }
.ah-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.ah-photo {
  display: grid; place-items: center; align-content: center; gap: 2px; width: 150px; height: 108px; overflow: hidden;
  padding: 0; border: 0; border-radius: 12px; background: var(--ah-thumb-bg); color: var(--muted);
}
.ah-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ah-photo.is-add { border: 1.5px dashed var(--line); background: var(--surface-card-2); font-weight: 700; }
.ah-photo.is-add:hover { border-color: var(--brand); color: var(--tk-accent, var(--brand)); }
.ah-photo .tk-ico { width: 22px; height: 22px; }
.ah-side header { display: flex; align-items: baseline; justify-content: space-between; }
.ah-timeline { display: grid; margin: 12px 0 8px; padding: 0; list-style: none; }
.ah-timeline li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding-bottom: 12px; }
.ah-timeline li::before { content: ""; position: absolute; top: 16px; bottom: -2px; left: 8px; border-left: 2px solid var(--line); }
.ah-timeline li:last-child::before { display: none; }
.ah-timeline i { z-index: 1; width: 18px; height: 18px; margin-top: 1px; border: 3px solid var(--line); border-radius: 50%; background: var(--surface-card); }
.ah-timeline li.is-done i { border-color: var(--ah-ok); }
.ah-timeline li.is-doc i { border-color: var(--ah-info); }
.ah-timeline li.is-sent i { border-color: var(--ah-amber); }
.ah-timeline li.is-wait i { border-color: var(--ah-red); border-style: dashed; }
.ah-timeline b { display: block; color: var(--text); font-size: 13px; }
.ah-timeline small { display: block; color: var(--muted); font-size: 11.5px; }
.ah-timeline q {
  display: inline-block; margin-top: 4px; padding: 4px 8px; border-radius: 8px; background: var(--surface-hover);
  color: var(--text); font-size: 12px; quotes: none;
}
.ah-side-actions { display: grid; gap: 8px; margin-top: 6px; }
.ah-side-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.ah-side-btn.is-ok { border-color: var(--ah-ok) !important; background: var(--ah-ok) !important; color: #fff !important; }
.ah-side-actions .tk-remind { margin: 0; }
.ah-side-link { justify-content: center; }

/* ---- Телефон ---- */
@media (max-width: 720px) {
  .ah-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ah-kpi { padding: 10px 12px; }
  .ah-kpi b { font-size: 22px; }
  .ah-kpi em { white-space: normal; }
  .ah-kpis .ah-kpi:first-child { grid-column: 1 / -1; }
  .ah-list { padding: 2px 10px; }
  .ah-row { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "thumb main act" "thumb state state"; gap: 4px 10px; }
  .ah-row .ah-thumb { grid-area: thumb; width: 48px; height: 48px; align-self: start; }
  .ah-main { grid-area: main; }
  .ah-main span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
  .ah-state { grid-area: state; display: flex; flex-wrap: wrap; justify-items: start; justify-content: flex-start; gap: 4px 8px; }
  .ah-act { grid-area: act; align-self: start; }
  .ah-act .ah-quick { padding: 6px 8px; font-size: 12px; }
  .ah-line { max-width: none; text-align: left; }
  .ah-sub { flex-wrap: wrap; }
  .ah-sub .ah-note-btn { width: 100%; justify-content: center; }
  .ah-shot { height: 88px; }
  .ah-photo { width: calc(50% - 5px); height: 120px; }
  /* Путь заявки и кнопки руководителя — сразу под заявкой, а не под обсуждением. */
  .ah-detail .tk-grid, .nw-detail .tk-grid { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .ah-detail .tk-grid > .tk-col, .nw-detail .tk-grid > .tk-col { display: contents; }
  .ah-detail .tk-talk, .nw-detail .tk-talk { order: 3; }
  dialog > form.ah-note, dialog > form.ah-form { padding: 16px; }
}