/* Общие стили элементов интерфейса ОКО (shtab#1822, §12 Штаба).
 *
 * Окно с вопросом, окно с сообщением и всплывающая строка живут здесь один
 * раз для приложения, графика смен и Почтальона. Цвета берутся из переменных
 * страницы (--card, --line, --text, --muted, --bg, --bad, --accent, --radius):
 * у каждой страницы они пока свои, поэтому окно везде повторяет тему страницы,
 * а не выбивается из неё. Единая палитра — следующий шаг, не этот файл.
 */

/* Имена токенов ОКО на палитре «Смены» (smena-theme.css): страницы модуля пишут
   --card, --text, --muted, --accent, а значения берутся из общего файла палитры,
   светлого по умолчанию и тёмного по data-theme="dark". Своих цветов у страниц нет. */
:root {
  --card: var(--panel);
  --text: var(--ink);
  --muted: var(--dim);
  --accent: var(--amber);
  --accent-ink: var(--amber-ink);
  --accent-light: var(--amber);
  --radius: 14px;
  /* Календарь смен: цвет смены и выходного один для приложения и графика. */
  --shift: var(--ok);
  --weekend: var(--panel-2);
}

body.locked { overflow: hidden; }

/* Своё окно вместо системного confirm: у системного нельзя назвать кнопку
   действием и объяснить последствие, а в установленном приложении оно
   подписано адресом сайта. */
.dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .55);
}
/* Карточка прижата к низу экрана: на телефоне туда дотягивается большой
   палец, а окно посередине заставляет перехватывать телефон второй рукой. */
.dialog-card {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--card, #171b21);
  color: var(--text, #e8ecf1);
  border: 1px solid var(--line, #262c35);
  border-radius: var(--radius, 14px);
  font-family: inherit;
}
.dialog-card b { font-size: 18px; line-height: 1.3; }
.dialog-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted, #8b97a6); white-space: pre-line; }
.dialog-card textarea {
  padding: 10px;
  background: var(--bg, #0f1216);
  color: var(--text, #e8ecf1);
  border: 1px solid var(--line, #262c35);
  border-radius: 10px;
  font: inherit;
  font-size: 16px;  /* меньше 16 px — и Safari приближает экран при наборе */
  resize: vertical;
}
/* Действие справа, отказ слева: так стоят кнопки в системных окнах
   и рука идёт к привычному месту. */
.dialog-buttons { display: flex; gap: 8px; }
.dialog-buttons button {
  flex: 1 1 0;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line, #262c35);
  border-radius: 10px;
  background: transparent;
  color: var(--text, #e8ecf1);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.dialog-buttons .primary { background: var(--accent, #a3670e); border-color: transparent; color: var(--accent-ink, #fff); }
.dialog-buttons .danger-btn { background: var(--bad, #e5484d); border-color: transparent; color: #fff; }
.dialog-buttons button:disabled { opacity: .5; cursor: default; }
@media (min-width: 560px) {
  .dialog { align-items: center; }
}

/* Всплывающая строка: одна на все страницы. */
#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: #222933;
  border: 1px solid var(--line, #262c35);
  color: #e8ecf1;
  padding: 12px 18px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: .2s;
  max-width: 88vw;
  text-align: center;
  z-index: 70;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Общие кнопки, поля, панель периода, карточка, список-панель (shtab#1822, фаза 2б) =====
 * Один набор на приложение, график смен и Почтальон: страницы свои правила для
 * button, input, select, textarea, label и .card не заводят — нужное отличие
 * правится здесь. Три вида кнопки: основная (.primary), второстепенная (.ghost),
 * опасная (.danger); два размера сверх обычного: .small и .big. */
button {
  font: inherit;
  font-size: 16px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--ink);
  cursor: pointer;
}
button:hover { border-color: var(--faint); }
button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); font-weight: 600; }
button.primary:hover { border-color: var(--amber-ink); }
button.ghost { background: transparent; border-color: var(--line); }
button.danger { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; }
button.small { min-height: 36px; padding: 0 12px; font-size: 14px; }
button.big { min-height: 56px; font-size: 17px; }

/* Атрибут hidden скрывает элемент всегда: правило автора с `display: grid` или `flex`
   иначе сильнее браузерного `display: none`, и скрытая форма или шапка остаётся
   на экране (так было у поля «Филиал», формы правки, шапки на экране входа). Одно
   правило вместо девяти по одному на элемент. */
[hidden] { display: none !important; }

/* Поля: одна высота, один радиус, одна обводка фокуса. */
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--dim); }
input, select, textarea {
  font: inherit;
  font-size: 16px; /* меньше 16 — iOS приближает страницу при фокусе на поле */
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 0 12px;
  width: 100%;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select { min-height: 44px; }
textarea { padding: 10px 12px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: -1px; }

/* Панель периода: стрелка, подпись, стрелка. Одна на неделю и месяц в приложении
   и на график смен; ширину задаёт контейнер (в приложении — колонка, в панели
   графика — по содержимому). */
.periodnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.periodnav > span { font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; text-align: center; min-width: 150px; }
.periodnav > button { display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 0; flex: 0 0 auto; }
.periodnav svg { display: block; }
@media (max-width: 480px) { .periodnav > span { min-width: 120px; font-size: 15px; } }

/* Карточка: одно определение. Цветная полоса слева — вариант, а не другая карточка. */
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

/* Список-панель: рамка и строки, разделённые линией (каналы, расписания, сводка по дням). */
.linelist { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px; margin-bottom: 14px; }
.linelist > * { padding: 12px 0; border-bottom: 1px solid var(--line); }
.linelist > *:last-child { border-bottom: 0; }

/* ===== Переключатель, вкладки, легенда календаря (shtab#1822, фаза 3) =====
 * Переключатель из 2–3 кнопок, одна нажата: `.seg`, нажатая — `.on` и aria-pressed.
 * Вкладки разделов страницы: `.tabs` > `.tab`, выбранная — `.on` и aria-selected. */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 999px; color: var(--dim); }
.seg button.on { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); font-weight: 600; }

.tabs {
  display: flex; gap: 4px; width: 100%; max-width: 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 14px; color: var(--dim);
  background: none; border: none; border-bottom: 3px solid transparent; border-radius: 0;
  padding: 10px 12px 9px; white-space: nowrap;
}
.tab.on { color: var(--ink); border-bottom-color: var(--amber); }
.tab:focus-visible { outline-offset: -3px; }

/* Легенда календаря смен: одна для экрана «График смен» приложения и страницы графика. */
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); align-items: center; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.legend .sh { background: var(--shift); }
.legend .we { background: var(--weekend); border: 1px solid var(--line); }
.legend .ze { background: var(--bad); }
.legend .on { background: var(--warn); }
.legend .now { background: transparent; outline: 2px solid var(--accent); outline-offset: -2px; }

/* Флажок: один размер и один цвет. Палец промахивается по 16×16; 22 px — минимум,
   при котором на телефоне попадают с первого раза. */
input[type="checkbox"], input[type="radio"] {
  width: 22px;
  height: 22px;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--amber);
  cursor: pointer;
}

/* Раскрывающийся блок: один вид заголовка (цвет действия, цель касания 44 px). */
summary { cursor: pointer; padding: 12px 0; min-height: 44px; color: var(--accent-light); font-size: 15px; font-weight: 600; }

/* Плашка-пилюля: число или короткая метка (счётчик вкладки, «30/30», «не доставлено 32»).
   Один размер и одна форма; цвет — по смыслу: нейтральная, .ok (или .zero — «ноль хорошо»), .bad. */
.pill, .badge, .count, .tab-count {
  display: inline-block;
  flex: 0 0 auto;
  min-width: 20px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  background: var(--panel-2);
  color: var(--dim);
}
/* Счётчик во вкладке — тот же, но теснее: вкладок пять, и они должны помещаться в строку. */
.tab-count { padding: 0 6px; font-size: 12px; }
.pill.ok, .badge.ok, .count.zero, .tab-count.zero { background: var(--ok-soft); color: var(--ok); }
.pill.bad, .badge.bad, .tab-count.bad { background: var(--bad-soft); color: var(--bad); }