/* Вход, профиль, администраторы, боты, импорт и выгрузка, карточка и форма клиента.
   Общие блоки (панели, кнопки, ind, row-list, fold) — в app.css. */

/* ---------- вход ---------- */
.no-shell .container:has(.auth) { max-width: 440px; padding-top: 12vh; }
.auth { display: flex; flex-direction: column; gap: 24px; }
.auth-brand { display: flex; align-items: center; gap: 12px; justify-content: center; }
.auth-brand .brand-mark { width: 40px; height: 40px; border-radius: 11px; }
.auth-brand .brand-mark .icon { width: 22px; height: 22px; }
.auth-brand .brand-mark.is-mono { font-size: 1.25rem; }
.auth-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.auth-brand-text b { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; }
.auth-brand-text small { color: var(--muted); }
.auth-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px; box-shadow: var(--shadow-md);
}
.auth-card h1 { font-size: 1.375rem; margin-bottom: 18px; }
.auth-lead { color: var(--text-2); margin-bottom: 20px; }
.auth-submit { width: 100%; min-height: 44px; margin-top: 4px; }
.auth-badge {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
  background: var(--accent-soft); color: var(--accent);
}
.auth-badge.is-warn { background: var(--warn-bg); color: var(--warn); }
.auth-badge .icon { width: 22px; height: 22px; vertical-align: 0; }
.auth-alt { display: flex; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.auth-alt-icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
}
.auth-alt-icon .icon { vertical-align: 0; }
.auth-alt-title { font-weight: 600; margin: 0 0 2px; }
.auth-alt-text { color: var(--text-2); font-size: .875rem; margin: 0; }

/* ---------- профиль ---------- */
.profile-head { display: flex; align-items: center; gap: 16px; }
.profile-who h2 { font-size: 1.25rem; margin: 0 0 2px; }
.profile-who p { margin: 0; }
.profile-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.profile-grid .panel { margin: 0; }

/* ---------- администраторы ---------- */
.page-head.page-title { align-items: flex-end; }
.page-head .page-hint { margin: 4px 0 0; }
.page-head form { margin: 0; }
.admin-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.admin-grid .panel { margin: 0; }
.admin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.admin-who { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-who h2 { margin: 0; }
.admin-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-facts { grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; font-size: .9375rem; }
.admin-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.admin-actions .fold[open] { flex-basis: 100%; }
.secret { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.0625rem; overflow-wrap: anywhere; }

/* ---------- боты ---------- */
.bot-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-bottom: 16px; }
.bot-grid .panel { margin: 0; }
.bot-card { display: flex; flex-direction: column; gap: 14px; }
.bot-card.is-bad { border-color: var(--err-line); }
.bot-head { display: flex; align-items: center; gap: 12px; }
.bot-logo {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
}
.bot-logo .icon { width: 24px; height: 24px; vertical-align: 0; }
.bot-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.bot-name h2 { margin: 0; font-size: 1.125rem; }
.bot-name a, .bot-name .none { font-size: .875rem; }
.bot-head .ind { font-size: .9375rem; }
.bot-problem { margin: 0; font-weight: 500; color: var(--err); }
.bot-todo { display: flex; gap: 8px; margin: 0; font-size: .875rem; color: var(--text-2); }
.bot-todo .icon { width: 18px; height: 18px; color: var(--muted); margin-top: 1px; vertical-align: 0; }
.bot-facts { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .9375rem; }
.bot-card > .btn { align-self: flex-start; margin-top: auto; }

.count-pill {
  display: inline-block; min-width: 24px; margin-left: 6px; padding: 0 8px; border-radius: 999px; vertical-align: 2px;
  font-size: .75rem; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--text-2);
}
.count-pill.is-err { background: var(--err-bg); color: var(--err); }
.fail-list { list-style: none; margin: 0; padding: 0; }
.fail-list li {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 16px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.fail-list li:first-child { border-top: 0; }
.fail-time { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.fail-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.fail-body .muted { font-size: .875rem; }
.fail-kind { font-size: .875rem; color: var(--text-2); }
.empty-note { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.empty-note .icon { color: var(--ok); vertical-align: 0; }
.settings-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); margin: 0; }
.settings-grid div { padding: 12px 14px; border-radius: var(--r-ctl); background: var(--surface-2); }
.settings-grid dt { font-size: .8125rem; color: var(--muted); }
.settings-grid dd { margin: 2px 0 0; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- импорт и выгрузка ---------- */
.io-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); margin-bottom: 16px; align-items: stretch; }
.io-grid .panel { margin: 0; }
.drop {
  position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px !important;
  min-height: 168px; padding: 24px 16px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-card); background: var(--surface-2);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.drop.has-file { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.drop-input { position: absolute; inset: 0; width: 100% !important; height: 100%; opacity: 0; cursor: pointer; }
.drop-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 6px;
  background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm);
}
.drop-icon .icon { width: 24px; height: 24px; vertical-align: 0; }
.drop-title { color: var(--text); font-size: .9375rem; font-weight: 600; }
.drop-sub { color: var(--muted); font-size: .8125rem; font-weight: 400; }
.io-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.io-help { background: var(--surface-2); box-shadow: none; display: flex; flex-direction: column; }
.io-help > .btn { align-self: flex-start; margin-top: auto; }
.steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 12px; }
.steps li { position: relative; padding-left: 36px; color: var(--text-2); font-size: .9375rem; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--text); font-size: .75rem; font-weight: 600;
}
.steps b { color: var(--text); }
.io-export { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.io-export-text h2 { margin-bottom: 4px; }
.io-export-text p { margin: 0; }

.report { border-color: var(--ok-line); }
.report.has-warn { border-color: var(--warn-line); }
.report-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.report-head h2 { margin: 2px 0 2px; }
.report-head p { margin: 0; }
.report-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); }
.report-icon .icon { vertical-align: 0; }
.report-list { list-style: none; margin: 0 0 14px; padding: 0; }
.report-list li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-weight: 500; }
.report-list li > span:last-child { display: flex; flex-direction: column; }
.report-list small { color: var(--muted); font-weight: 400; }
.report-mark { color: var(--muted); }
.report-mark .icon { width: 18px; height: 18px; vertical-align: -3px; }
.report-list .is-warn .report-mark { color: var(--warn); }

.diag { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.diag-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.diag-tile:hover { color: var(--text); text-decoration: none; border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.diag-tile.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.diag-label { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 500; color: var(--text-2); }
.diag-label .icon { width: 18px; height: 18px; color: var(--muted); vertical-align: 0; }
.diag-tile b { font-size: 1.75rem; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.diag-tile small { color: var(--muted); }
.diag-tile.is-warn b, .diag-tile.is-warn .diag-label .icon { color: var(--warn); }

.regeo { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r-ctl); background: var(--surface-2); }
.regeo.is-needed { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.regeo-text { flex: 1 1 320px; min-width: 0; }
.regeo-text h3 { margin: 0 0 2px; }
.regeo-text p { margin: 0; font-size: .875rem; }
.regeo-job { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 0 1 300px; }
.regeo-job form { margin: 0; }
.regeo-status { margin: 0; font-size: .875rem; }
.progress { width: 100%; height: 8px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: var(--surface); overflow: hidden; }
.progress::-webkit-progress-bar { background: var(--surface); border-radius: 999px; }
.progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width 300ms var(--ease); }
.progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.diag-list { margin-top: 18px; }
.diag-list h3 { margin-top: 0; }

.backup { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface-2); box-shadow: none; }
.backup-text { flex: 1 1 320px; min-width: 0; }
.backup-text h2 { margin-bottom: 2px; }
.backup-text p { margin: 0; font-size: .875rem; }
.backup form { margin: 0; }

/* ---------- карточка клиента ---------- */
.client-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.client-who { flex: 1; min-width: 0; }
.client-who h1 { margin: 0 0 6px; }
.client-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.today-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 16px;
  border-radius: var(--r-card); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.today-icon { color: var(--accent); }
.today-icon .icon { vertical-align: 0; width: 22px; height: 22px; }
.today-text { flex: 1 1 260px; display: flex; flex-direction: column; line-height: 1.4; }
.today-banner form { margin: 0; }
.client-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.client-main .panel, .client-side .panel { margin-bottom: 16px; }
.mini-map { height: 240px; border-radius: var(--r-ctl); border: 1px solid var(--line); z-index: 0; }
.mini-pin { display: block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); background: var(--accent); }
.mini-pin.is-today { background: var(--warn); }
.edit-stack { display: flex; flex-direction: column; gap: 14px; }
.edit-stack .inline-edit { align-items: flex-start; }
.edit-stack .inline-edit label { flex: 1 1 260px; }
.edit-stack .inline-edit .btn { margin-top: 27px; }
.inline-edit textarea { min-height: 64px; }
.log-list { list-style: none; margin: 0; padding: 0; }
.log-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.log-list li:first-child { border-top: 0; }
.log-time { color: var(--muted); font-size: .875rem; min-width: 120px; font-variant-numeric: tabular-nums; }
.log-what { flex: 1; }
.link-block { padding: 12px 0; border-top: 1px solid var(--line); }
.link-block:last-child { padding-bottom: 0; }
.link-name { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-bottom: 8px; }
.link-name .icon { width: 18px; height: 18px; color: var(--accent); vertical-align: 0; }
.link-name .pill { margin-left: auto; }
.client-side .copy-row input { flex-basis: 160px; }
.danger-zone { border-color: var(--line); }

/* ---------- новый клиент ---------- */
.new-form { max-width: 560px; padding: 24px; }

/* ---------- телефон ---------- */
@media (max-width: 1100px) {
  .client-grid { display: flex; flex-direction: column; gap: 0; }
  .client-main, .client-side { display: contents; }
  /* на узком экране: контакты, комментарии, график, маршрут, мессенджеры, затем правка и остальное */
  .client-main > :nth-child(1) { order: 1; }
  .client-main > :nth-child(2) { order: 2; }
  .client-main > :nth-child(3) { order: 3; }
  .client-side > :nth-child(1) { order: 4; }
  .client-side > :nth-child(2) { order: 5; }
  .client-main > :nth-child(4) { order: 6; }
  .client-main > :nth-child(5) { order: 7; }
  .client-main > :nth-child(6) { order: 8; }
  .client-side > :nth-child(3) { order: 9; }
  .diag { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .io-grid, .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .fail-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .fail-time { grid-column: 1 / -1; }
  .fail-kind { grid-column: 1; }
}
@media (max-width: 700px) {
  .no-shell .container:has(.auth) { padding-top: 6vh; }
  .auth-card { padding: 22px 18px; }
  .page-head.page-title form, .page-head.page-title .btn { width: 100%; }
  .io-submit .btn, .io-export > .btn, .backup form, .backup .btn, .io-help > .btn { width: 100%; }
  .regeo-job, .regeo-job form, .regeo-job .btn { width: 100%; flex-basis: 100%; }
  .diag-tile { padding: 12px; }
  .diag-tile b { font-size: 1.5rem; }
  .client-call { width: 100%; }
  .edit-stack .inline-edit .btn { margin-top: 0; }
  .admin-actions > .btn, .admin-actions > .fold, .admin-actions summary { width: 100%; }
  .bot-card > .btn { align-self: stretch; }
  .admin-facts { grid-template-columns: 110px minmax(0, 1fr); }
  .admin-facts dt { margin-top: 0; }
  .new-form { padding: 16px; }
  .today-banner form, .today-banner .btn { width: 100%; }
}

/* ---------- график и программа клиента (карточка и форма нового клиента) ---------- */
.sched-next { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px;
  border-radius: var(--r-ctl); background: var(--accent-soft); color: var(--accent-text); }
.sched-next .icon { flex: none; }
.sched-next.is-none { background: var(--surface-2); color: var(--text-2); }
.sched-panel .facts { margin-bottom: 14px; }
.sched-edit { margin-bottom: 4px; }
.sched-extend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.sched-fields { display: flex; flex-direction: column; gap: 14px; }
.sched-fields .only-alt, .sched-fields .only-weekdays { display: none; }
.sched-fields:has(option[value="alt"]:checked) .only-alt { display: flex; }
.sched-fields:has(option[value="weekdays"]:checked) .only-weekdays { display: flex; }
.day-picks { flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.day-picks legend { width: 100%; padding: 0; margin-bottom: 6px; font-weight: 500; font-size: .875rem; color: var(--text-2); }
.form .day-pick, .fold-form .day-pick { flex-direction: row; gap: 0; position: relative; }
.day-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.day-pick span { display: inline-grid; place-items: center; min-width: 44px; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface);
  color: var(--text); font-weight: 500; cursor: pointer; transition: background var(--t) var(--ease); }
.day-pick input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.day-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sched-pause { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line); }
.sched-pause .form { flex: 1 1 320px; }
.sched-set { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 14px; margin: 0; min-width: 0; }
.sched-set legend { padding: 0 6px; font-weight: 600; color: var(--text); }

/* ---------- профиль: уведомления на этом устройстве (js/push.js) ---------- */
.push-panel { margin-top: 16px; }
.push-panel .push-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.push-panel .push-events {
  border: 0; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 16px;
}
.push-panel .push-events legend { font-weight: 600; font-size: .875rem; margin-bottom: 4px; padding: 0; }
.push-panel .push-events label.check { display: flex; font-weight: 400; }
.push-panel .push-events[disabled] { opacity: .55; }
.push-panel .push-status { margin: 10px 0 0; font-size: .875rem; color: var(--text-2); min-height: 1.4em; }
.push-panel .push-status.is-error { color: var(--err); }