/* ═══════════════════════════════════════════════════════════════
   CRM-Kovalyov v3.1 — тема «Контора» (дизайн D)
   Оверрайд-слой поверх design-system.css / layout.css / style.css.
   Ничего не удаляет: только переназначает токены и визуал компонентов.
   Функциональность (кнопки, обработчики, разметка) не затрагивается.
   ═══════════════════════════════════════════════════════════════ */

/* ── Токены: палитра «бумага + чернила + золото» ─────────────── */
:root {
  /* Легаси-переменные v1 (style.css): ремапим в палитру «Конторы»,
     чтобы старые компоненты не выбивались из темы */
  --blue:        #1A1A1A;
  --blue-mid:    #1F4E79;
  --blue-light:  #D9D6CE;
  --sidebar-w:   224px;

  --color-primary:       #1A1A1A;   /* «чернила» — главная кнопка, акценты */
  --color-primary-mid:   #1F4E79;   /* ссылки и инфо-акценты — фирменный синий */
  --color-primary-light: #EDE9E0;   /* фон активных/hover-состояний */
  --color-accent:        #B45309;   /* золото — важное */
  --color-accent-light:  #FBF3E4;

  --color-bg:            #FAF9F6;   /* бумага */
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F0EEE7;
  --color-border:        #D9D6CE;   /* волосяные линейки */
  --color-border-strong: #BDB9AE;

  --color-text:          #1A1A1A;
  --color-text-mid:      #33322E;
  --color-text-muted:    #4A4A48;
  --color-text-subtle:   #8A8880;

  /* Сайдбар — светлый, «разворот документа» */
  --sidebar-bg:          #FAF9F6;
  --sidebar-text:        #4A4A48;
  --sidebar-active-bg:   #FBF3E4;
  --sidebar-active-text: #1A1A1A;
  --sidebar-hover-bg:    #EDE9E0;
  --sidebar-width:       224px;

  --topbar-bg:           #FAF9F6;
  --topbar-border:       #D9D6CE;

  /* Типографика */
  --font-heading: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Геометрия «документа»: малые скругления, без теней */
  --radius-sm:  2px;
  --radius-md:  3px;
  --radius-lg:  4px;
  --radius-xl:  6px;

  --shadow-xs:  none;
  --shadow-sm:  none;
  --shadow-md:  0 2px 8px rgba(26,26,26,0.08);   /* только для выпадающих слоёв */
  --shadow-lg:  0 4px 16px rgba(26,26,26,0.12);
  --shadow-xl:  0 8px 28px rgba(26,26,26,0.16);
}

/* ── Базовый текст ───────────────────────────────────────────── */
body {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.005em;
}
h1, h2, h3, .heading { font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); }

/* Моноширинные капительные подписи — фирменный элемент темы */
.stat-label,
.nav-section-label,
.card-title,
thead th,
.user-role,
.sidebar-brand small {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

/* ── Сайдbar: светлая колонка с линейкой справа ─────────────── */
#sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--color-border);
}
.sidebar-header {
  border-bottom: 1px solid var(--color-border);
}
.sidebar-logo {
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.sidebar-brand {
  color: var(--color-text);
  font-weight: 700;
}
.sidebar-brand small {
  color: var(--color-text-subtle);
  font-size: 9.5px;
  font-weight: 500;
}
.sidebar-nav { scrollbar-color: var(--color-border) transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--color-border); }

.nav-section-label {
  color: var(--color-text-subtle);
  font-size: 9px;
  font-weight: 500;
}
.nav-item {
  border-radius: 0;
  border-left: 2px solid transparent;
  margin: 1px 0;
  color: var(--sidebar-text);
}
.nav-item:hover {
  background: var(--sidebar-hover-bg);
  color: var(--color-text);
}
.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}
.nav-item.active::before {
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-accent);
  border-radius: 0;
}
.nav-badge {
  background: transparent;
  color: var(--color-text-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 500;
}
.nav-item.active .nav-badge {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.sidebar-footer {
  border-top: 1px solid var(--color-border);
}
.sidebar-user { border-radius: var(--radius-sm); }
.user-avatar {
  border-radius: var(--radius-sm);
  background: var(--color-text);
  font-family: var(--font-mono);
  font-weight: 600;
}
.user-name { color: var(--color-text); font-weight: 600; }
.user-role { color: var(--color-text-subtle); font-size: 9.5px; }

/* ── Топбар ─────────────────────────────────────────────────── */
#topbar {
  box-shadow: none;
  border-bottom: 1px solid var(--color-border);
}
.topbar-title,
.page-title {
  color: var(--color-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Кнопки: квадратные, «документные» ──────────────────────── */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: #000;
  border-color: #000;
  box-shadow: none;
}
.btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-accent:hover {
  background: #92400E;
  border-color: #92400E;
  box-shadow: none;
}
.btn-secondary:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-icon { border-radius: var(--radius-sm); }

/* ── Карточки и панели: линейки вместо теней ────────────────── */
.card {
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.card-header { border-bottom: 1px solid var(--color-border); }
.card-title {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
}

/* Статистические карточки: без цветной полосы, моно-цифры */
.stat-card {
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.stat-card::before { display: none; }
.stat-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}
/* Лаконичность: цифры — «чернила», цвет только у сигнальных состояний */
.stat-card .stat-value { color: var(--color-text); }
.stat-card.success .stat-value { color: var(--color-text); }
.stat-card.warning .stat-value { color: var(--color-accent); }
.stat-card.danger .stat-value  { color: var(--color-danger); }
.stat-label { font-size: 9.5px; font-weight: 500; }

/* ── Таблицы: реестровый стиль ──────────────────────────────── */
/* Сброс базового v1-правила (style.css): th { background: var(--blue); color:#fff } */
th {
  background: transparent;
  color: var(--color-text-subtle);
}
thead tr {
  background: transparent;
  color: var(--color-text-subtle);
}
thead th {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-text-subtle);
  border-bottom: 1.5px solid var(--color-text);
  padding-top: 8px;
  padding-bottom: 8px;
}
tbody tr:hover { background: var(--color-primary-light); }
tbody td { color: var(--color-text-mid); }

/* ── Бейджи: контурные, моно ────────────────────────────────── */
.badge {
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid currentColor;
}
.badge-success { color: var(--color-success); }
.badge-danger  { color: var(--color-danger); }
.badge-warning { color: var(--color-warning); }
.badge-info    { color: var(--color-info); }
.badge-neutral { color: var(--color-text-subtle); }
.badge-overdue { color: var(--color-danger); }

/* ── Формы ──────────────────────────────────────────────────── */
.form-control,
.search-input {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
}
.form-control:focus,
.search-input:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}
label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── Табы ───────────────────────────────────────────────────── */
.tabs { border-bottom: 1px solid var(--color-border); }
.tab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.tab.active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}
.tab:hover { color: var(--color-text); }

/* ── Модалки, дропдауны, тосты ──────────────────────────────── */
.modal { border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.modal-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.modal-title { color: var(--color-text); font-weight: 600; }
.modal-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.dropdown-menu { border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.toast { border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); border-left-width: 3px; }

/* ── Пагинация ──────────────────────────────────────────────── */
.page-btn { border-radius: var(--radius-sm); font-family: var(--font-mono); }
.page-btn.active { background: var(--color-primary); border-color: var(--color-primary); }
.page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Аккордеон (чек-лист) ───────────────────────────────────── */
.accordion-header { border-radius: var(--radius-sm); background: var(--color-surface); }
.accordion-header:hover { background: var(--color-primary-light); }
.accordion-content { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

/* ── Экран авторизации ──────────────────────────────────────── */
.auth-page,
#login-screen {
  background: var(--color-bg) !important;
}
.auth-card,
.login-card {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--color-border);
  box-shadow: none !important;
}
/* Белые надписи на тёмном фоне больше не нужны — возвращаем «чернила» */
.auth-page h1,
.auth-page .logo h1 { color: var(--color-text) !important; }
.auth-page p,
.auth-page .logo p { color: var(--color-text-muted) !important; }
.auth-page .logo img { border-radius: var(--radius-sm) !important; box-shadow: none !important; }
/* Базовый v1 стиль .auth-card: полупрозрачное стекло + градиентная кнопка — в тему D */
.auth-card {
  background: var(--color-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.auth-card label { color: var(--color-text-muted) !important; }
.auth-card .form-control {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-sm) !important;
}
.auth-card .form-control:focus { box-shadow: none !important; border-color: var(--color-primary) !important; }
.auth-card .btn-primary {
  background: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.auth-card .btn-primary:hover { background: #000 !important; }

/* ── Числовые значения — моно (деньги, даты, номера) ────────── */
.money, .sum, .amount, .num, .date, .mono { font-family: var(--font-mono); }

/* ── Скроллбар ──────────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 0; }