/**
 * list-shell.css — спільний макет сторінок-списків (#262): Нотатки, Задачі,
 * Команда, згодом Реєстр.
 *
 * Три частини, однакові на всіх сторінках:
 *   .ls-page   — сторінка на всю ширину. Раніше кожна мала свій max-width
 *                (1000, 1120, 1400), і на широкому екрані вміст стояв вузькою
 *                смугою посередині та «стрибав» при переході між сторінками;
 *   .ls-stats  — смуга лічильників; кожен лічильник — кнопка, що звужує список;
 *   .ls-panel  — панель запису справа, як на карті: та сама ширина (360 px,
 *                як деталь ділянки), шапка, хрестик. Список під нею лишається
 *                видно, тож між записами можна переходити, не закриваючи її.
 *
 * Розмітку смуги й панелі малює js/list-shell.js — інакше вони знову
 * розійшлися б по сторінках, як три різні смуги лічильників до того.
 */

body[data-app-shell] {
  --ls-panel-w: 360px;
  --ls-panel-gap: var(--space-3);
}

/* ── Сторінка ───────────────────────────────────────────────────────────── */

.ls-page {
  padding: var(--space-6) var(--content-padding) var(--space-10);
  transition: padding-right var(--duration-2) var(--ease-out);
}

/* Широкий екран: панель стає поруч, а не поверх — список звужується на її
   ширину й лишається видно цілком. Нижче 1200 px на список не лишилось би
   місця, тож там панель лягає поверх. */
@media (min-width: 1200px) {
  body.ls-panel-open .ls-page {
    padding-right: calc(var(--ls-panel-w) + var(--ls-panel-gap) * 2);
  }
}

/* ── Смуга лічильників ──────────────────────────────────────────────────── */

.ls-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.ls-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-1) var(--ease-in-out),
              box-shadow var(--duration-1) var(--ease-in-out);
}
.ls-stat:hover { box-shadow: var(--shadow-2); }
.ls-stat:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ls-stat[aria-pressed="true"] {
  border-color: var(--ls-tone);
  background: color-mix(in srgb, var(--ls-tone) 6%, var(--color-surface));
}
/* Лічильник без записів нічого не звузить — лишаємо видимим (людина бачить,
   що їх нуль), але без запрошення клікнути */
.ls-stat:disabled { cursor: default; }
/* optional-лічильник, поки число невідоме (list-shell.js) */
.ls-stat[hidden] { display: none; }
.ls-stat:disabled:hover { box-shadow: var(--shadow-1); }
.ls-stat:disabled:not([data-static]) .ls-stat-v { color: var(--color-text-muted); }

.ls-stat-ic {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ls-tone) 12%, transparent);
  color: var(--ls-tone);
}
.ls-stat-ic .material-icons-round { font-size: 17px; }

/* span-и, бо в кнопці div не можна; тож блоками їх робить CSS */
.ls-stat-v, .ls-stat-l { display: block; }
.ls-stat-v {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.ls-stat-l {
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--color-text-muted);
}

/* Кольори — лише назвою тону, щоб сторінки не вигадували власних */
.ls-stat[data-tone="primary"]   { --ls-tone: var(--color-primary); }
.ls-stat[data-tone="tertiary"]  { --ls-tone: var(--color-tertiary); }
.ls-stat[data-tone="secondary"] { --ls-tone: var(--color-secondary-700); }
.ls-stat[data-tone="warning"]   { --ls-tone: var(--color-progress-warning); }
.ls-stat[data-tone="error"]     { --ls-tone: var(--color-error); }
.ls-stat[data-tone="muted"]     { --ls-tone: var(--color-text-muted); }

/* ── Вибраний запис у списку ───────────────────────────────────────────── */

/* Який запис зараз у панелі — інакше, перебираючи записи, губишся */
.ls-selected {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ── Другорядне, коли відкрита панель ───────────────────────────────── */

/* Широка таблиця (Реєстр) з панеллю поруч не влазить: список звужується на
   360 px, і відкритий рядок з'їжджає за правий край. Тож другорядні колонки
   позначаються цим класом і на час панелі ховаються — лишається те, за чим
   людина впізнає запис. Нижче 1200 px панель лягає поверх, ховати нічого. */
@media (min-width: 1200px) {
  body.ls-panel-open .ls-secondary { display: none; }
}

/* ── Панель запису ─────────────────────────────────────────────────────── */

.ls-panel {
  position: fixed;
  top: var(--ls-panel-gap);
  right: var(--ls-panel-gap);
  bottom: var(--ls-panel-gap);
  width: var(--ls-panel-w);
  max-width: calc(100vw - var(--ls-panel-gap) * 2);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-outline-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  transform: translateX(calc(100% + var(--ls-panel-gap) * 2));
  /* Закрита панель лише від'їжджає за край — без visibility вона ловила б
     фокус клавіатурою (так було на карті) */
  visibility: hidden;
  transition: transform var(--duration-3) var(--ease-out),
              visibility 0s linear var(--duration-3);
}
body.ls-panel-open .ls-panel {
  transform: none;
  visibility: visible;
  transition: transform var(--duration-3) var(--ease-out), visibility 0s;
}

.ls-panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-outline-subtle);
}
.ls-panel-title { flex: 1; min-width: 0; }
.ls-panel-title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.ls-panel-sub {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.ls-panel-sub:empty { display: none; }

.ls-panel-tools { display: flex; gap: 2px; flex-shrink: 0; }
.ls-panel-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.ls-panel-btn .material-icons-round { font-size: 20px; }
.ls-panel-btn:hover { background: var(--color-surface-variant); color: var(--color-text); }
.ls-panel-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ls-panel-btn.is-danger:hover { color: var(--color-error); }

.ls-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
}

/* Список від краю до краю (ради в Команді): рядки з власними відступами й
   розділювачами, а пошук над ними прилипає до верху — з відступом тіла
   виходили рамка в рамці й пошук, що їде разом зі списком */
.ls-panel-body.is-flush { padding: 0; }

.ls-panel-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-outline-subtle);
}
.ls-panel-foot:empty { display: none; }

/* Затемнення — лише там, де панель лягає поверх списку */
.ls-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) - 1);
  background: color-mix(in srgb, var(--color-text) 28%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-2) var(--ease-out),
              visibility 0s linear var(--duration-2);
}
@media (max-width: 1199.98px) {
  body.ls-panel-open .ls-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-2) var(--ease-out), visibility 0s;
  }
}

/* ── Телефон: панель — аркуш знизу ─────────────────────────────────────── */

@media (max-width: 768px) {
  .ls-page {
    padding: var(--space-4) var(--space-3) calc(90px + env(safe-area-inset-bottom, 0px));
  }

  .ls-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  /* Більше чотирьох (Реєстр — вісім) у дві колонки займали пів екрана ще
     до першого запису. Тоді — одна смуга, що гортається вбік */
  .ls-stats:has(> .ls-stat:nth-child(5)) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, max-content);
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: calc(var(--space-3) * -1);
    margin-right: calc(var(--space-3) * -1);
    padding: 2px var(--space-3) var(--space-1);
  }
  .ls-stats:has(> .ls-stat:nth-child(5))::-webkit-scrollbar { display: none; }
  .ls-stat { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .ls-stat-v { font-size: var(--text-lg); }

  .ls-panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; max-width: none;
    height: 88vh;
    height: 88dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: none;
    transform: translateY(calc(100% + var(--space-4)));
    /* Над нижнім меню (bottom-nav.css, 1000 — поза шкалою --z-*), але під
       його шторкою «Ще» (1100): інакше меню закривало низ аркуша з кнопкою
       «Зберегти» */
    z-index: 1050;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ls-scrim { z-index: 1049; }
  /* Ручка — знак, що це аркуш, а не стіна */
  .ls-panel::before {
    content: '';
    position: absolute;
    top: 7px; left: 50%;
    width: 36px; height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--color-outline);
  }
  .ls-panel-head { padding-top: var(--space-5); }
}

/* ── Коротке повідомлення ──────────────────────────────────────────────── */

.ls-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: var(--z-toast);
  max-width: min(480px, calc(100vw - var(--space-8)));
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-surface);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-3);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, var(--space-2));
  transition: opacity var(--duration-2) var(--ease-out),
              transform var(--duration-2) var(--ease-out);
}
.ls-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ls-toast[data-type="success"] { background: var(--color-primary); color: var(--color-on-primary); }
.ls-toast[data-type="error"]   { background: var(--color-error);   color: var(--color-on-error); }
/* Над нижнім меню телефона */
@media (max-width: 768px) {
  .ls-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .ls-panel, .ls-scrim, .ls-page, .ls-toast { transition: none; }
}