/* =========================================================================
   Кооператив CRM — единые стили интерфейса.
   Только светлая тема. Все общие элементы (кнопки, поля, таблицы, карточки)
   описаны здесь; утилиты Tailwind в шаблонах отвечают за раскладку.
   Правила «нормализации» ниже приводят к одному виду и старые кнопки/поля,
   свёрстанные классами Tailwind, чтобы не было 30 разных размеров.
   ========================================================================= */

:root {
  color-scheme: light only;

  --app-bg: #f5f7fb;
  --app-surface: #ffffff;
  --app-surface-muted: #f8fafc;
  --app-border: #e2e8f0;
  --app-border-strong: #cbd5e1;
  --app-text: #0f172a;
  --app-text-2: #475569;
  --app-text-muted: #64748b;
  --app-accent: #2563eb;
  --app-accent-hover: #1d4ed8;
  --app-accent-soft: #eff6ff;
  --app-success: #16a34a;
  --app-success-hover: #15803d;
  --app-danger: #dc2626;
  --app-danger-hover: #b91c1c;
  --app-warning: #d97706;

  --app-radius: 10px;
  --app-radius-lg: 14px;
  --app-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --app-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);

  --control-h: 40px;        /* высота кнопок и полей на десктопе */
  --control-h-sm: 36px;     /* компактные кнопки в таблицах */
  --sidebar-w: 16rem;
}

@media (max-width: 768px) {
  :root {
    --control-h: 44px;      /* под палец */
    --control-h-sm: 38px;
  }
}

/* ---------- База ---------- */
html { color-scheme: light only; -webkit-text-size-adjust: 100%; }

html, body {
  background: var(--app-bg);
  color: var(--app-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { margin: 0; min-height: 100vh; }

*, *::before, *::after { box-sizing: border-box; }

img, svg, video, canvas { max-width: 100%; }

h1, h2, h3, h4 { color: var(--app-text); margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.625rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.0625rem; font-weight: 600; }

p { margin: 0 0 .5rem; line-height: 1.5; }

label {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--app-text-2);
  margin-bottom: .375rem;
}

a { color: inherit; text-decoration: none; }

/* ---------- Каркас ---------- */
.app-shell { display: flex; min-height: 100vh; }

.app-main-wrapper {
  flex: 1 1 auto;
  min-width: 0;              /* широкий контент не растягивает страницу */
  display: flex;
  flex-direction: column;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 64px;
  padding: .75rem 1.5rem;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
}

.app-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.app-main { flex: 1 1 auto; padding: 1.5rem; }

.app-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  min-width: 0;
}

/* Блоки страницы всегда во всю доступную ширину: mx-auto в колонке иначе
   отключает растяжение, и блок подстраивается под ширину таблицы — страница
   становится шире экрана. max-w-* при этом продолжает ограничивать ширину. */
.app-page > * { min-width: 0; }
.app-page .mx-auto { width: 100%; min-width: 0; }
@media (min-width: 640px) { .app-page [class*="sm:mx-auto"] { width: 100%; } }

.app-messages { display: flex; flex-direction: column; gap: .5rem; }

/* ---------- Боковое меню ---------- */
.app-sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--app-surface);
  border-right: 1px solid var(--app-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.app-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: .75rem 1rem .75rem 1.25rem;
  border-bottom: 1px solid var(--app-border);
}

.app-brand { font-size: 1.25rem; font-weight: 700; color: var(--app-accent); }

.app-sidebar .app-sidebar-close { display: none; }

.app-nav { flex: 1 1 auto; overflow-y: auto; padding: .75rem; }
.app-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.app-nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 42px;
  padding: .5rem .75rem;
  border-radius: var(--app-radius);
  color: var(--app-text-2);
  font-size: .9375rem;
  font-weight: 500;
}
.app-nav-link:hover { background: var(--app-accent-soft); color: var(--app-accent); }
.app-nav-link.is-active { background: var(--app-accent-soft); color: var(--app-accent); font-weight: 600; }
.app-nav-sub { padding-left: 2.75rem; font-size: .875rem; min-height: 36px; }
.app-nav-icon { width: 20px; height: 20px; flex: none; color: var(--app-accent); }

.app-backdrop { display: none; }

.app-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--app-radius);
  background: transparent;
  border: 0;
  color: var(--app-text-2);
  cursor: pointer;
  flex: none;
}
.app-icon-btn:hover { background: var(--app-surface-muted); color: var(--app-text); }

.app-menu-btn { display: none; }

/* Пользователь в шапке */
.app-user { position: relative; flex: none; }
.app-user-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 0; cursor: pointer; padding: .25rem .5rem;
  border-radius: 999px; color: var(--app-text-2); font-weight: 500;
}
.app-user-btn:hover { background: var(--app-surface-muted); }
.app-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--app-accent-soft); color: var(--app-accent);
  font-size: .8125rem; font-weight: 700;
}
.app-dropdown {
  z-index: 50; min-width: 12rem; background: var(--app-surface);
  border: 1px solid var(--app-border); border-radius: var(--app-radius);
  box-shadow: var(--app-shadow); overflow: hidden;
}
.app-dropdown-head { padding: .75rem 1rem; font-size: .875rem; color: var(--app-text); border-bottom: 1px solid var(--app-border); }
.app-dropdown-item { display: block; padding: .75rem 1rem; font-size: .9375rem; }
.app-dropdown-item:hover { background: var(--app-surface-muted); }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--control-h);
  padding: .5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--app-radius);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn-primary   { background: var(--app-accent);  color: #fff; }
.btn-primary:hover   { background: var(--app-accent-hover); color: #fff; }
.btn-success   { background: var(--app-success); color: #fff; }
.btn-success:hover   { background: var(--app-success-hover); color: #fff; }
.btn-danger    { background: var(--app-danger);  color: #fff; }
.btn-danger:hover    { background: var(--app-danger-hover); color: #fff; }
.btn-secondary { background: var(--app-surface); color: var(--app-text); border-color: var(--app-border-strong); }
.btn-secondary:hover { background: var(--app-surface-muted); }
.btn-ghost     { background: transparent; color: var(--app-accent); }
.btn-ghost:hover     { background: var(--app-accent-soft); }
.btn-sm { min-height: var(--control-h-sm); padding: .375rem .75rem; font-size: .875rem; }

/* Нормализация старых кнопок, свёрстанных утилитами Tailwind:
   одна высота, одна скруглённость, текст по центру и перенос вместо вылезания. */
.app-page :is(button, input[type="submit"], input[type="button"], input[type="reset"]):not(.app-icon-btn):not([class*="rounded-full"]),
.app-page a[class*="bg-"][class*="px-"]:not([class*="rounded-full"]):not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--control-h);
  border-radius: var(--app-radius);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
.app-page :is(button, input[type="submit"], input[type="button"]):not(.app-icon-btn) { cursor: pointer; }
/* ---------- Цвета кнопок: четыре варианта вместо десятка ----------

   Кнопки в шаблонах свёрстаны разными цветами Tailwind; здесь они сводятся

   по смыслу: основная (синяя), создать/сохранить (зелёная), удалить (красная),

   второстепенная (белая с рамкой). Совпадение по точному классу, поэтому

   светлые подложки вроде bg-red-50 (плашки, бейджи) не затрагиваются. */

.app-page :is(button, a)[class~="bg-blue-500"],
.app-page :is(button, a)[class~="bg-blue-600"],
.app-page :is(button, a)[class~="bg-blue-700"],
.app-page :is(button, a)[class~="bg-blue-800"],
.app-page :is(button, a)[class~="bg-indigo-500"],
.app-page :is(button, a)[class~="bg-indigo-600"],
.app-page :is(button, a)[class~="bg-indigo-700"],
.app-page :is(button, a)[class~="bg-indigo-800"],
.app-page :is(button, a)[class~="bg-violet-500"],
.app-page :is(button, a)[class~="bg-violet-600"],
.app-page :is(button, a)[class~="bg-violet-700"],
.app-page :is(button, a)[class~="bg-violet-800"],
.app-page :is(button, a)[class~="bg-purple-500"],
.app-page :is(button, a)[class~="bg-purple-600"],
.app-page :is(button, a)[class~="bg-purple-700"],
.app-page :is(button, a)[class~="bg-purple-800"],
.app-page :is(button, a)[class~="bg-sky-500"],
.app-page :is(button, a)[class~="bg-sky-600"],
.app-page :is(button, a)[class~="bg-sky-700"],
.app-page :is(button, a)[class~="bg-sky-800"],
.app-page :is(button, a)[class~="bg-gray-700"],
.app-page :is(button, a)[class~="bg-gray-800"],
.app-page :is(button, a)[class~="bg-gray-900"],
.app-page :is(button, a)[class~="bg-slate-700"],
.app-page :is(button, a)[class~="bg-slate-800"],
.app-page :is(button, a)[class~="bg-slate-900"] {
  background-color: var(--app-accent); color: #fff; border-color: transparent;
}

.app-page :is(button, a)[class~="bg-green-500"],
.app-page :is(button, a)[class~="bg-green-600"],
.app-page :is(button, a)[class~="bg-green-700"],
.app-page :is(button, a)[class~="bg-green-800"],
.app-page :is(button, a)[class~="bg-emerald-500"],
.app-page :is(button, a)[class~="bg-emerald-600"],
.app-page :is(button, a)[class~="bg-emerald-700"],
.app-page :is(button, a)[class~="bg-emerald-800"],
.app-page :is(button, a)[class~="bg-teal-500"],
.app-page :is(button, a)[class~="bg-teal-600"],
.app-page :is(button, a)[class~="bg-teal-700"],
.app-page :is(button, a)[class~="bg-teal-800"] {
  background-color: var(--app-success); color: #fff; border-color: transparent;
}

.app-page :is(button, a)[class~="bg-red-500"],
.app-page :is(button, a)[class~="bg-red-600"],
.app-page :is(button, a)[class~="bg-red-700"],
.app-page :is(button, a)[class~="bg-red-800"],
.app-page :is(button, a)[class~="bg-rose-500"],
.app-page :is(button, a)[class~="bg-rose-600"],
.app-page :is(button, a)[class~="bg-rose-700"],
.app-page :is(button, a)[class~="bg-rose-800"] {
  background-color: var(--app-danger); color: #fff; border-color: transparent;
}

.app-page :is(button, a)[class~="bg-yellow-500"],
.app-page :is(button, a)[class~="bg-yellow-600"],
.app-page :is(button, a)[class~="bg-yellow-700"],
.app-page :is(button, a)[class~="bg-yellow-800"],
.app-page :is(button, a)[class~="bg-amber-500"],
.app-page :is(button, a)[class~="bg-amber-600"],
.app-page :is(button, a)[class~="bg-amber-700"],
.app-page :is(button, a)[class~="bg-amber-800"],
.app-page :is(button, a)[class~="bg-orange-500"],
.app-page :is(button, a)[class~="bg-orange-600"],
.app-page :is(button, a)[class~="bg-orange-700"],
.app-page :is(button, a)[class~="bg-orange-800"],
.app-page :is(button, a)[class~="bg-gray-100"],
.app-page :is(button, a)[class~="bg-gray-200"],
.app-page :is(button, a)[class~="bg-gray-300"],
.app-page :is(button, a)[class~="bg-gray-400"],
.app-page :is(button, a)[class~="bg-gray-500"],
.app-page :is(button, a)[class~="bg-gray-600"],
.app-page :is(button, a)[class~="bg-slate-100"],
.app-page :is(button, a)[class~="bg-slate-200"],
.app-page :is(button, a)[class~="bg-slate-300"],
.app-page :is(button, a)[class~="bg-slate-400"],
.app-page :is(button, a)[class~="bg-slate-500"],
.app-page :is(button, a)[class~="bg-slate-600"] {
  background-color: var(--app-surface); color: var(--app-text); border: 1px solid var(--app-border-strong);
}

.app-page :is(button, a)[class~="bg-blue-500"]:hover,
.app-page :is(button, a)[class~="bg-blue-600"]:hover,
.app-page :is(button, a)[class~="bg-blue-700"]:hover,
.app-page :is(button, a)[class~="bg-blue-800"]:hover,
.app-page :is(button, a)[class~="bg-indigo-500"]:hover,
.app-page :is(button, a)[class~="bg-indigo-600"]:hover,
.app-page :is(button, a)[class~="bg-indigo-700"]:hover,
.app-page :is(button, a)[class~="bg-indigo-800"]:hover,
.app-page :is(button, a)[class~="bg-violet-500"]:hover,
.app-page :is(button, a)[class~="bg-violet-600"]:hover,
.app-page :is(button, a)[class~="bg-violet-700"]:hover,
.app-page :is(button, a)[class~="bg-violet-800"]:hover,
.app-page :is(button, a)[class~="bg-purple-500"]:hover,
.app-page :is(button, a)[class~="bg-purple-600"]:hover,
.app-page :is(button, a)[class~="bg-purple-700"]:hover,
.app-page :is(button, a)[class~="bg-purple-800"]:hover,
.app-page :is(button, a)[class~="bg-sky-500"]:hover,
.app-page :is(button, a)[class~="bg-sky-600"]:hover,
.app-page :is(button, a)[class~="bg-sky-700"]:hover,
.app-page :is(button, a)[class~="bg-sky-800"]:hover,
.app-page :is(button, a)[class~="bg-gray-700"]:hover,
.app-page :is(button, a)[class~="bg-gray-800"]:hover,
.app-page :is(button, a)[class~="bg-gray-900"]:hover,
.app-page :is(button, a)[class~="bg-slate-700"]:hover,
.app-page :is(button, a)[class~="bg-slate-800"]:hover,
.app-page :is(button, a)[class~="bg-slate-900"]:hover { background-color: var(--app-accent-hover); }

.app-page :is(button, a)[class~="bg-green-500"]:hover,
.app-page :is(button, a)[class~="bg-green-600"]:hover,
.app-page :is(button, a)[class~="bg-green-700"]:hover,
.app-page :is(button, a)[class~="bg-green-800"]:hover,
.app-page :is(button, a)[class~="bg-emerald-500"]:hover,
.app-page :is(button, a)[class~="bg-emerald-600"]:hover,
.app-page :is(button, a)[class~="bg-emerald-700"]:hover,
.app-page :is(button, a)[class~="bg-emerald-800"]:hover,
.app-page :is(button, a)[class~="bg-teal-500"]:hover,
.app-page :is(button, a)[class~="bg-teal-600"]:hover,
.app-page :is(button, a)[class~="bg-teal-700"]:hover,
.app-page :is(button, a)[class~="bg-teal-800"]:hover { background-color: var(--app-success-hover); }

.app-page :is(button, a)[class~="bg-red-500"]:hover,
.app-page :is(button, a)[class~="bg-red-600"]:hover,
.app-page :is(button, a)[class~="bg-red-700"]:hover,
.app-page :is(button, a)[class~="bg-red-800"]:hover,
.app-page :is(button, a)[class~="bg-rose-500"]:hover,
.app-page :is(button, a)[class~="bg-rose-600"]:hover,
.app-page :is(button, a)[class~="bg-rose-700"]:hover,
.app-page :is(button, a)[class~="bg-rose-800"]:hover { background-color: var(--app-danger-hover); }

.app-page :is(button, a)[class~="bg-yellow-500"]:hover,
.app-page :is(button, a)[class~="bg-yellow-600"]:hover,
.app-page :is(button, a)[class~="bg-yellow-700"]:hover,
.app-page :is(button, a)[class~="bg-yellow-800"]:hover,
.app-page :is(button, a)[class~="bg-amber-500"]:hover,
.app-page :is(button, a)[class~="bg-amber-600"]:hover,
.app-page :is(button, a)[class~="bg-amber-700"]:hover,
.app-page :is(button, a)[class~="bg-amber-800"]:hover,
.app-page :is(button, a)[class~="bg-orange-500"]:hover,
.app-page :is(button, a)[class~="bg-orange-600"]:hover,
.app-page :is(button, a)[class~="bg-orange-700"]:hover,
.app-page :is(button, a)[class~="bg-orange-800"]:hover,
.app-page :is(button, a)[class~="bg-gray-100"]:hover,
.app-page :is(button, a)[class~="bg-gray-200"]:hover,
.app-page :is(button, a)[class~="bg-gray-300"]:hover,
.app-page :is(button, a)[class~="bg-gray-400"]:hover,
.app-page :is(button, a)[class~="bg-gray-500"]:hover,
.app-page :is(button, a)[class~="bg-gray-600"]:hover,
.app-page :is(button, a)[class~="bg-slate-100"]:hover,
.app-page :is(button, a)[class~="bg-slate-200"]:hover,
.app-page :is(button, a)[class~="bg-slate-300"]:hover,
.app-page :is(button, a)[class~="bg-slate-400"]:hover,
.app-page :is(button, a)[class~="bg-slate-500"]:hover,
.app-page :is(button, a)[class~="bg-slate-600"]:hover { background-color: var(--app-surface-muted); }

/* Для кнопок с w-full сохраняем растяжение */
.app-page .w-full:is(button, a) { display: flex; width: 100%; }

/* ---------- Поля ввода ---------- */
/* Ширина и отступы — значения по умолчанию с нулевой специфичностью:
   явные классы в шаблоне (w-24, pl-10 и т. п.) их перекрывают. */
:where(.input, .select, .textarea),
:where(.app-page) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
  width: 100%;
  padding: .5rem .75rem;
}
/* Высота, рамка, скругление и шрифт — одинаковые у всех полей */
.input, .select, .textarea,
.app-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
  min-height: var(--control-h);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius);
  background-color: var(--app-surface);
  color: var(--app-text);
  font-size: .9375rem;
  line-height: 1.4;
  font-family: inherit;
}
.app-page textarea, .textarea { min-height: 6rem; }
.app-page :is(input, select, textarea):focus, .input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.app-page :is(input, textarea)::placeholder { color: #94a3b8; }
.app-page :is(input, select, textarea):disabled,
.app-page input[readonly] { background-color: var(--app-surface-muted); color: var(--app-text-2); }

.app-page input[type="checkbox"], .app-page input[type="radio"] {
  width: 18px; height: 18px; min-height: 0; flex: none; cursor: pointer;
}

/* Без стрелок у числовых полей */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ---------- Карточки ---------- */
.card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-xs);
  min-width: 0;
}
.card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--app-border); display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.card-header h2, .card-header h3 { margin: 0; }
.card-body { padding: 1.25rem; }
.card-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--app-border); display: flex; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }

/* Панель действий страницы: кнопки переносятся, а не вылезают */
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.toolbar-end { margin-left: auto; }

/* Фильтры: сетка, на телефоне в одну колонку */
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem 1rem; align-items: end; }

/* Сворачиваемые фильтры: заголовок виден только на телефоне */
.filters-summary {
  display: none; cursor: pointer; list-style: none;
  padding: .875rem 1rem; font-weight: 600; color: var(--app-text);
}
.filters-summary::-webkit-details-marker { display: none; }
.filters-summary::after { content: "▾"; float: right; color: var(--app-text-muted); }
details[open] > .filters-summary::after { content: "▴"; }
@media (max-width: 768px) {
  .filters-summary { display: block; }
  details[open] > .filters-summary { border-bottom: 1px solid var(--app-border); }
}

/* ---------- Сообщения ---------- */
.alert { padding: .75rem 1rem; border-radius: var(--app-radius); border: 1px solid; font-size: .9375rem; line-height: 1.45; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ---------- Бейджи ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .125rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
}
.badge-success { background: #ecfdf5; color: #047857; border-color: #d1fae5; }
.badge-warning { background: #fffbeb; color: #b45309; border-color: #fef3c7; }
.badge-danger  { background: #fef2f2; color: #b91c1c; border-color: #fee2e2; }
.badge-info    { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }
.badge-muted   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

/* ---------- Таблицы ----------
   Любая таблица лежит в .table-wrap (скрипт в base.html оборачивает сам).
   На всех экранах это таблица; если не помещается — листается вбок. */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--app-radius-lg);
}

.app-page table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  font-size: .9375rem;
}

.app-page thead th {
  background: var(--app-surface-muted);
  color: var(--app-text-2);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: left;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--app-border);
  white-space: nowrap;
}
.app-page thead th:first-child { border-top-left-radius: var(--app-radius-lg); }
.app-page thead th:last-child { border-top-right-radius: var(--app-radius-lg); }

.app-page tbody td, .app-page tfoot td, .app-page tbody th {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--app-border);
  color: var(--app-text);
  vertical-align: middle;
}
.app-page tbody tr:last-child td { border-bottom: 0; }
.app-page tbody tr:hover td { background: #f8fafc; }
.app-page tfoot td { background: var(--app-surface-muted); font-weight: 600; }

/* Кнопки внутри таблиц — компактнее */
.app-page td :is(button, a[class*="bg-"][class*="px-"]) { min-height: var(--control-h-sm); font-size: .875rem; }

/* ---------- Пагинация ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; justify-content: center; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--control-h-sm); min-height: var(--control-h-sm); padding: 0 .75rem;
  border: 1px solid var(--app-border-strong); border-radius: var(--app-radius);
  background: var(--app-surface); font-size: .875rem; font-weight: 500; color: var(--app-text);
}
.pagination a:hover { background: var(--app-surface-muted); }
.pagination .is-current { background: var(--app-accent); border-color: var(--app-accent); color: #fff; }

/* ---------- Телефон ---------- */
@media (max-width: 768px) {
  .app-menu-btn { display: inline-flex; margin-left: -.5rem; }
  .app-header { padding: .5rem 1rem; min-height: 56px; gap: .5rem; }
  .app-title { font-size: 1.125rem; }
  .app-user-name { display: none; }
  .app-main { padding: 1rem .75rem; }
  .app-page { gap: 1rem; }

  /* Меню выезжает слева поверх страницы */
  .app-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    height: 100%; width: 17rem; max-width: 85vw;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--app-shadow);
  }
  .app-sidebar .app-sidebar-close { display: inline-flex; }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  body.sidebar-open .app-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(15, 23, 42, .4);
  }
  body.sidebar-open { overflow: hidden; }

  /* Поля — 16px, иначе iOS увеличивает страницу при вводе */
  .input, .select, .textarea,
  .app-page :is(input, select, textarea) { font-size: 16px; }

  /* Таблицы на телефоне: плотнее, в одну строку, первая колонка закреплена */
  .app-page table { font-size: .875rem; }
  .table-wrap table { width: max-content; min-width: 100%; }
  .table-wrap thead th, .table-wrap tbody td, .table-wrap tfoot td { padding: .625rem .75rem; white-space: nowrap; }
  .table-wrap tbody td:first-child, .table-wrap thead th:first-child, .table-wrap tfoot td:first-child {
    position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--app-border);
  }
  .table-wrap tbody td:first-child { background: var(--app-surface); }

  .card-body { padding: 1rem; }
  .card-header { padding: .875rem 1rem; }
  h1 { font-size: 1.375rem; }
}

@media (min-width: 769px) {
  .app-sidebar { transform: none !important; }
}

/* ---------- Печать ---------- */
@media print {
  .app-sidebar, .app-header, .app-backdrop, .no-print { display: none !important; }
  .app-main { padding: 0; }
  body, .app-page table { background: #fff; }
}