/* ═══════════════════════════════════════════════════════════════
   CRM-Kovalyov v2.0 — Design System
   Шрифты: EB Garamond (заголовки) + Lato (интерфейс)
   Цвета: юридическая экспертиза, доверие, авторитет
   ═══════════════════════════════════════════════════════════════ */

/* Self-hosted EB Garamond + Lato (с кириллицей) — без зависимости от Google CDN/VPN */
@import url('/fonts/text-fonts.css');

/* ── Токены ─────────────────────────────────────────────────── */
:root {
  /* Цветовая палитра — Admin */
  --color-primary:       #1F4E79;   /* navy — единый тон с сайдбаром/чатом */
  --color-primary-mid:   #2E75B6;   /* синий — активные элементы, ссылки */
  --color-primary-light: #DBEAFE;   /* фон активных состояний */
  --color-accent:        #B45309;   /* золото — CTA, важные кнопки */
  --color-accent-light:  #FEF3C7;   /* фон предупреждений */

  /* Нейтральные */
  --color-bg:            #F8FAFC;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F1F5F9;
  --color-border:        #E2E8F0;
  --color-border-strong: #CBD5E1;

  /* Текст */
  --color-text:          #0F172A;   /* основной — максимальный контраст */
  --color-text-mid:      #1E293B;
  --color-text-muted:    #475569;   /* минимум для WCAG AA */
  --color-text-subtle:   #94A3B8;   /* только декоративный */

  /* Семантические */
  --color-success:       #166534;
  --color-success-bg:    #DCFCE7;
  --color-success-border:#86EFAC;
  --color-danger:        #991B1B;
  --color-danger-bg:     #FEE2E2;
  --color-danger-border: #FCA5A5;
  --color-warning:       #92400E;
  --color-warning-bg:    #FEF3C7;
  --color-info:          #1E40AF;
  --color-info-bg:       #DBEAFE;

  /* Sidebar */
  --sidebar-bg:          #1F4E79;
  --sidebar-text:        #CBD5E1;
  --sidebar-active-bg:   #2E75B6;
  --sidebar-active-text: #FFFFFF;
  --sidebar-hover-bg:    rgba(255,255,255,0.08);
  --sidebar-width:       240px;
  --sidebar-width-collapsed: 64px;

  /* Топбар */
  --topbar-height:       56px;
  --topbar-bg:           #FFFFFF;
  --topbar-border:       #E2E8F0;

  /* ── Типографика ─────────────────────────────────────── */
  --font-heading:       'EB Garamond', Georgia, serif;
  --font-body:          'Lato', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px — минимум основного текста */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.75;

  /* ── Отступы (4px сетка) ─────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* ── Скругления ──────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full:9999px;

  /* ── Тени ────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.1),  0 10px 10px rgba(0,0,0,0.04);

  /* ── Touch / Интерактивность ─────────────────────────── */
  --touch-min:  44px;    /* WCAG минимальный tap target */
  --transition: 150ms ease;
  --transition-md: 250ms ease;

  /* ── Z-индексы ───────────────────────────────────────── */
  --z-base:    1;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-modal:   1000;
  --z-toast:   2000;
  --z-sidebar: 500;
}

/* ── Сброс и базовые стили ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Заголовки — EB Garamond */
h1, h2, h3, .heading { font-family: var(--font-heading); line-height: var(--leading-tight); }
h1 { font-size: var(--text-3xl); font-weight: 600; }
h2 { font-size: var(--text-2xl); font-weight: 600; }
h3 { font-size: var(--text-xl);  font-weight: 500; }

/* Ссылки */
a { color: var(--color-primary-mid); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ── Кнопки ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              opacity var(--transition);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}
.btn:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn-primary:hover { background: #162d6e; border-color: #162d6e; box-shadow: var(--shadow-sm); }

.btn-accent {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.btn-accent:hover { background: #92400e; border-color: #92400e; box-shadow: var(--shadow-sm); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-mid);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-surface-2); border-color: var(--color-primary); color: var(--color-primary); }

.btn-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: var(--color-danger-border);
}
.btn-danger:hover { background: #FCA5A5; }

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text); }

.btn-sm { min-height: 32px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg { min-height: 52px; padding: var(--space-3) var(--space-8); font-size: var(--text-md); }

/* Иконка-кнопка */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition);
}
.btn-icon:hover { background: var(--color-surface-2); color: var(--color-text); }
.btn-icon:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 1px; }

/* ── Карточки ───────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-xs);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.card-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
}

/* ── Формы ──────────────────────────────────────────────────── */
.form-control {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
}
.form-control:focus {
  border-color: var(--color-primary-mid);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.form-control::placeholder { color: var(--color-text-subtle); }
.form-control:disabled { background: var(--color-surface-2); opacity: .6; cursor: not-allowed; }

label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-mid);
}

/* ── Таблицы ────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
thead tr { background: var(--color-primary); color: #fff; }
thead th {
  padding: 5px var(--space-4);
  text-align: left;
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--color-primary-light); }
tbody td {
  padding: 3px var(--space-4);
  vertical-align: middle;
  color: var(--color-text-mid);
}
/* Плотные таблицы (Задачи, Клиенты): жмём и ячейки, и кнопки-иконки,
   иначе строку держит .btn-icon с min-height:var(--touch-min) (~44px). */
.tbl-tight thead th { padding: 4px var(--space-4); }
.tbl-tight tbody td { padding: 1px var(--space-4); }
.tbl-tight .btn-icon { min-width: 0; min-height: 26px; padding: 2px 7px; }

/* ── Бейджи ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.badge-success  { background: var(--color-success-bg);  color: var(--color-success); }
.badge-danger   { background: var(--color-danger-bg);   color: var(--color-danger); }
.badge-warning  { background: var(--color-warning-bg);  color: var(--color-warning); }
.badge-info     { background: var(--color-info-bg);     color: var(--color-info); }
.badge-neutral  { background: var(--color-surface-2);   color: var(--color-text-muted); }
.badge-overdue  { background: var(--color-danger-bg);   color: var(--color-danger); }

/* ── Тосты / Уведомления ────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 380px;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  animation: toast-in 200ms ease;
}
.toast-success { border-left-color: var(--color-success); }
.toast-error   { border-left-color: var(--color-danger); }
.toast-warning { border-left-color: var(--color-accent); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Модальные окна ─────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.6);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-lg  { max-width: 760px; }
.modal-xl  { max-width: 980px; }
.modal-2xl { max-width: 1120px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
  flex-shrink: 0;
}
.modal-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
}
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
  flex-shrink: 0;
}

/* ── Тулбар / Поиск ─────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.search-box {
  position: relative;
  flex: 1;
  min-width: 200px;
}

/* Фильтры страницы «Задачи»: высота select −20%, на мобиле — в одну строку */
.tk-filters .form-control {
  min-height: 35px;           /* −20% от 44px */
  padding-top: 6px;
  padding-bottom: 6px;
}
@media (max-width: 480px) {
  /* перебить style.css: .toolbar{flex-direction:column} на мобиле */
  .tk-filters {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: var(--space-2);
  }
  .tk-filters .form-control {
    width: auto !important;    /* перебить inline width:140/160px */
    flex: 1 1 0;
    min-width: 0;
    font-size: .72rem;
    padding-left: 8px;
    padding-right: 8px;
  }
}
/* Фильтры страницы «Клиенты»: поиск + 2 select, высота −20%, на мобиле — в одну строку */
.cl-filters .form-control,
.cl-filters .search-input {
  min-height: 35px;           /* −20% от 44px */
  padding-top: 6px;
  padding-bottom: 6px;
}
@media (max-width: 480px) {
  /* перебить style.css: .toolbar{flex-direction:column} на мобиле */
  .cl-filters {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: var(--space-2);
  }
  .cl-filters .search-box {
    flex: 2 1 0;
    min-width: 0;
  }
  .cl-filters .form-control {
    width: auto !important;    /* перебить inline width:140px */
    flex: 1 1 0;
    min-width: 0;
    font-size: .72rem;
    padding-left: 8px;
    padding-right: 8px;
  }
  .cl-filters .search-input {
    padding-left: var(--space-3);  /* без иконки слева — убрать лишний отступ */
    font-size: .72rem;
  }
}
.search-input {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-10);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-input:focus {
  border-color: var(--color-primary-mid);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  pointer-events: none;
}

/* ── Пустые состояния ───────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-muted);
  text-align: center;
}
.empty-state svg { color: var(--color-text-subtle); }
.empty-state h3 { font-size: var(--text-lg); font-weight: 600; color: var(--color-text-mid); }
.empty-state p  { font-size: var(--text-sm); max-width: 320px; }

/* ── Спиннер ────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Алерты ─────────────────────────────────────────────────── */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: 1px solid transparent;
}
.alert-success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.alert-error   { background: var(--color-danger-bg);  color: var(--color-danger);  border-color: var(--color-danger-border); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: #FCD34D; }
.alert-info    { background: var(--color-info-bg);    color: var(--color-info);    border-color: #93C5FD; }

/* ── Утилиты ────────────────────────────────────────────────── */
.text-muted    { color: var(--color-text-muted); }
.text-subtle   { color: var(--color-text-subtle); }
.text-primary  { color: var(--color-primary); }
.text-success  { color: var(--color-success); }
.text-danger   { color: var(--color-danger); }
.text-sm       { font-size: var(--text-sm); }
.text-xs       { font-size: var(--text-xs); }
.font-bold     { font-weight: 700; }
.font-medium   { font-weight: 500; }

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2         { gap: var(--space-2); }
.gap-3         { gap: var(--space-3); }
.gap-4         { gap: var(--space-4); }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }

.cursor-pointer { cursor: pointer; }
.select-none    { user-select: none; }
.truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only        { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Скроллбар (Webkit) ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); }

/* ── Доступность ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Фокус-кольцо для клавиатурных пользователей */
:focus-visible {
  outline: 2px solid var(--color-primary-mid);
  outline-offset: 2px;
}
/* Убрать фокус для мышиных пользователей */
:focus:not(:focus-visible) { outline: none; }

/* ── Twemoji ─────────────────────────────────────────────────── */
/* twemoji.parse подменяет эмодзи на <img class="emoji">. Без ограничения
   размера картинки рисуются в натуральную величину (огромные иконки). */
img.emoji {
  height: 1.1em !important;
  width: 1.1em !important;
  margin: 0 0.05em 0 0.1em !important;
  vertical-align: -0.15em !important;
  display: inline !important;
  pointer-events: none;
}
.nav-item img.emoji { height: 1.2em !important; width: 1.2em !important; vertical-align: -0.2em !important; }

/* ── Компактные строки таблиц бухгалтерии (умеренная плотность) ──── */
.acc-compact tbody td      { padding: 2px 8px; }
.acc-compact th            { padding: 5px 8px; }
.acc-compact .form-control { min-height: 26px; padding: 2px 8px; }
.acc-compact textarea.form-control { min-height: 28px; }