/* ============================================================================
   Logidex CRM — Дизайн-система 2026 (Linear/Vercel-style)
   ----------------------------------------------------------------------------
   Это БАЗОВЫЙ слой дизайн-системы: токены (CSS-переменные) + базовые
   компоненты с явными классами (.btn, .input, .card, .badge, .ds-table,
   .ds-modal, .toast, .empty-state) + утилитарные классы.

   ПРАВИЛО ВНЕДРЕНИЯ:
   - Не переопределяем тэг body/html, не сбрасываем * — это сделано в
     inline-стилях страниц и в theme.css. Дизайн-система действует
     ТОЛЬКО через классы.
   - Существующие inline-стили НЕ удаляются. Страницы мигрируют на
     дизайн-систему постепенно в следующих этапах Спринта 1.5.
   - Светлая тема активируется через [data-theme="light"] (как в theme.css).
   - Mobile-first: на ≤768px все touch-цели минимум 44px, input font 16px,
     чтобы iOS не зумил при фокусе.
   ============================================================================ */

/* ── Палитра 2026: светлая по умолчанию ────────────────────────────────────
   Токены префиксованы ds- чтобы не конфликтовать с уже существующими
   --bg/--card/--text/--blue из theme.css. */
:root {
  /* Backgrounds */
  --ds-bg-base:     #fcfcfd;
  --ds-bg-surface:  #ffffff;
  --ds-bg-elevated: #ffffff;
  --ds-bg-muted:    #f6f7f9;

  /* Borders */
  --ds-border-subtle:  #e5e7eb;
  --ds-border-default: #d1d5db;
  --ds-border-strong:  #9ca3af;

  /* Text */
  --ds-text-primary:    #0a0a0a;
  --ds-text-secondary:  #525252;
  --ds-text-tertiary:   #a3a3a3;
  --ds-text-on-accent:  #ffffff;

  /* Accent — холодный индиго Linear-style */
  --ds-accent:        #5e6ad2;
  --ds-accent-hover:  #4f5ac1;
  --ds-accent-soft:   rgba(94, 106, 210, 0.10);
  --ds-accent-ring:   rgba(94, 106, 210, 0.28);

  /* Semantic states */
  --ds-success: #16a34a;
  --ds-warning: #d97706;
  --ds-danger:  #dc2626;
  --ds-info:    #3b82f6;

  --ds-success-soft: #dcfce7;
  --ds-warning-soft: #fef3c7;
  --ds-danger-soft:  #fee2e2;
  --ds-info-soft:    #dbeafe;

  /* Typography sizes (px — статично для предсказуемости) */
  --ds-text-xs:   12px;
  --ds-text-sm:   13px;
  --ds-text-base: 14px;
  --ds-text-md:   16px;
  --ds-text-lg:   18px;
  --ds-text-xl:   20px;
  --ds-text-2xl:  24px;
  --ds-text-3xl:  32px;

  /* Font weights */
  --ds-fw-normal:   400;
  --ds-fw-medium:   500;
  --ds-fw-semibold: 600;
  --ds-fw-bold:     700;

  /* Spacing (шаг 4px) */
  --ds-space-1:  4px;
  --ds-space-2:  8px;
  --ds-space-3:  12px;
  --ds-space-4:  16px;
  --ds-space-5:  20px;
  --ds-space-6:  24px;
  --ds-space-8:  32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;

  /* Radii */
  --ds-radius-sm:  4px;
  --ds-radius-md:  6px;
  --ds-radius-lg:  8px;
  --ds-radius-xl:  12px;
  --ds-radius-2xl: 16px;

  /* Shadows */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ds-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06);
  --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --ds-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --ds-transition-fast: 150ms ease-out;
  --ds-transition-base: 200ms ease-out;
  --ds-transition-slow: 250ms ease-out;

  /* Z-index слои */
  --ds-z-dropdown: 100;
  --ds-z-sticky:   200;
  --ds-z-modal:    1000;
  --ds-z-toast:    1500;
  --ds-z-tooltip:  2000;

  /* Семейство шрифтов */
  --ds-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ds-font-mono: 'JetBrains Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
}

/* Тёмная тема — синхронизируется с [data-theme="dark"] из theme.css.
   Также поддерживается класс body.dark для независимого использования. */
[data-theme="dark"],
body.dark {
  --ds-bg-base:     #0a0a0a;
  --ds-bg-surface:  #141414;
  --ds-bg-elevated: #1c1c1c;
  --ds-bg-muted:    #1a1a1a;

  --ds-border-subtle:  #2a2a2a;
  --ds-border-default: #3a3a3a;
  --ds-border-strong:  #525252;

  --ds-text-primary:   #f5f5f5;
  --ds-text-secondary: #a3a3a3;
  --ds-text-tertiary:  #737373;

  --ds-accent:       #6e7adf;
  --ds-accent-hover: #7e8ae8;
  --ds-accent-soft:  rgba(110, 122, 223, 0.15);
  --ds-accent-ring:  rgba(110, 122, 223, 0.32);

  --ds-success-soft: rgba(22, 163, 74, 0.15);
  --ds-warning-soft: rgba(217, 119, 6, 0.15);
  --ds-danger-soft:  rgba(220, 38, 38, 0.15);
  --ds-info-soft:    rgba(59, 130, 246, 0.15);

  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ds-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --ds-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.7);
}

/* ── Кнопки ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-default);
  background: var(--ds-bg-surface);
  color: var(--ds-text-primary);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-fw-medium);
  line-height: 1;
  cursor: pointer;
  transition: background var(--ds-transition-fast),
              border-color var(--ds-transition-fast),
              color var(--ds-transition-fast),
              transform var(--ds-transition-fast);
  min-height: 36px;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn:hover {
  background: var(--ds-bg-muted);
  border-color: var(--ds-border-strong);
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ds-accent-ring);
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: var(--ds-text-on-accent);
}
.btn-primary:hover {
  background: var(--ds-accent-hover);
  border-color: var(--ds-accent-hover);
  color: var(--ds-text-on-accent);
}

.btn-danger {
  background: var(--ds-danger);
  border-color: var(--ds-danger);
  color: #ffffff;
}
.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--ds-accent-soft);
  border-color: transparent;
  color: var(--ds-accent);
}

.btn-sm {
  padding: var(--ds-space-1) var(--ds-space-3);
  font-size: var(--ds-text-sm);
  min-height: 28px;
}
.btn-lg {
  padding: var(--ds-space-3) var(--ds-space-5);
  font-size: var(--ds-text-md);
  min-height: 44px;
}

/* На mobile все кнопки минимум 44px (touch-friendly) */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
    padding: var(--ds-space-3) var(--ds-space-4);
  }
}

/* ── Inputs / Select / Textarea ───────────────────────────────────────────
   Активируется явным классом .ds-input — НЕ переопределяем глобальные
   input{} чтобы не сломать существующую разметку страниц. */
.ds-input,
.ds-select,
.ds-textarea {
  display: block;
  width: 100%;
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg-surface);
  color: var(--ds-text-primary);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  line-height: 1.4;
  transition: border-color var(--ds-transition-fast),
              box-shadow var(--ds-transition-fast);
  min-height: 36px;
}
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  outline: none;
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px var(--ds-accent-ring);
}
.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--ds-text-tertiary);
}
.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--ds-bg-muted);
}

@media (max-width: 768px) {
  /* iOS не зумит input при фокусе если font ≥ 16px */
  .ds-input,
  .ds-select,
  .ds-textarea {
    min-height: 44px;
    font-size: 16px;
  }

  /* ── Глобальный фикс iOS-зума для всех native form-полей ────────────────
     На ≤768px iOS Safari автоматически зумит страницу, если в фокус попадает
     input с font-size < 16px. Это ломает UX на телефонах: пользователь
     теряет место на экране после каждого тапа в селект/инпут.
     Применяем токенный font-size: 16px ко всем нативным полям, кроме
     уже стилизованных дизайн-системой и кастомных input[type] (search/range/color),
     где override font-size не даёт никакого эффекта. Атрибут `data-no-ds-input`
     даёт точечный opt-out, если страница рисует свою клавиатуру.
     Аудит 07.06.2026 / Спринт 1.5 follow-up. */
  input:not(.ds-input):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([data-no-ds-input]),
  select:not(.ds-select):not([data-no-ds-input]),
  textarea:not(.ds-textarea):not([data-no-ds-input]) {
    font-size: 16px;
  }
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.ds-card {
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-4);
  box-shadow: var(--ds-shadow-sm);
}
.ds-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-space-3);
  padding-bottom: var(--ds-space-3);
  border-bottom: 1px solid var(--ds-border-subtle);
}
.ds-card-title {
  font-size: var(--ds-text-md);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-primary);
  margin: 0;
}

/* ── Badge ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-fw-medium);
  background: var(--ds-bg-muted);
  color: var(--ds-text-secondary);
  border: 1px solid var(--ds-border-subtle);
  line-height: 1.4;
  white-space: nowrap;
}
.badge-success { background: var(--ds-success-soft); color: var(--ds-success); border-color: transparent; }
.badge-warning { background: var(--ds-warning-soft); color: var(--ds-warning); border-color: transparent; }
.badge-danger  { background: var(--ds-danger-soft);  color: var(--ds-danger);  border-color: transparent; }
.badge-info    { background: var(--ds-info-soft);    color: var(--ds-info);    border-color: transparent; }
.badge-accent  { background: var(--ds-accent-soft);  color: var(--ds-accent);  border-color: transparent; }

/* ── Table (.ds-table — не перебивает .table из bootstrap-подобных стилей) ── */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-text-sm);
  font-family: var(--ds-font-sans);
}
.ds-table th,
.ds-table td {
  padding: var(--ds-space-2) var(--ds-space-3);
  text-align: left;
  border-bottom: 1px solid var(--ds-border-subtle);
  height: 36px;
  vertical-align: middle;
}
.ds-table th {
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-secondary);
  background: var(--ds-bg-base);
  position: sticky;
  top: 0;
  z-index: var(--ds-z-sticky);
}
.ds-table tbody tr:hover {
  background: var(--ds-accent-soft);
}
.ds-table td.num,
.ds-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Modal (префикс ds- чтобы не конфликтовать с существующими .modal) ──── */
.ds-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--ds-z-modal);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ds-modal {
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-xl);
  padding: var(--ds-space-6);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--ds-shadow-xl);
  width: 480px;
}
.ds-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ds-space-4);
}
.ds-modal-title {
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-fw-semibold);
  margin: 0;
}
.ds-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--ds-space-1);
  color: var(--ds-text-secondary);
  border-radius: var(--ds-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-modal-close:hover {
  background: var(--ds-bg-muted);
  color: var(--ds-text-primary);
}

@media (max-width: 768px) {
  .ds-modal-overlay { align-items: flex-end; }
  .ds-modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
  }
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: var(--ds-space-4);
  right: var(--ds-space-4);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-bg-elevated);
  border: 1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-lg);
  z-index: var(--ds-z-toast);
  color: var(--ds-text-primary);
  font-size: var(--ds-text-sm);
  animation: ds-slide-in-toast 0.2s ease-out;
  max-width: calc(100vw - var(--ds-space-8));
}
.toast-success { border-left: 4px solid var(--ds-success); }
.toast-error   { border-left: 4px solid var(--ds-danger); }
.toast-warning { border-left: 4px solid var(--ds-warning); }
.toast-info    { border-left: 4px solid var(--ds-info); }

@keyframes ds-slide-in-toast {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Tooltip (через data-атрибут, без JS) ───────────────────────────────── */
[data-ds-tooltip] {
  position: relative;
  cursor: help;
}
[data-ds-tooltip]:hover::after,
[data-ds-tooltip]:focus-visible::after {
  content: attr(data-ds-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--ds-space-1);
  padding: var(--ds-space-1) var(--ds-space-2);
  background: var(--ds-text-primary);
  color: var(--ds-bg-surface);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-fw-medium);
  border-radius: var(--ds-radius-sm);
  white-space: nowrap;
  z-index: var(--ds-z-tooltip);
  pointer-events: none;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-12) var(--ds-space-4);
  text-align: center;
  color: var(--ds-text-secondary);
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--ds-space-4);
  color: var(--ds-text-tertiary);
}
.empty-state-title {
  font-size: var(--ds-text-md);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-space-2);
}
.empty-state-message {
  margin: 0 0 var(--ds-space-4);
  font-size: var(--ds-text-sm);
  max-width: 360px;
}

/* ── Утилитарные классы (короткие префиксы — Tailwind-style) ─────────────
   Используем .ds-* префикс для редких имён, остальные общие имена даём
   только если они нейтральны (.flex, .gap-* и т.п. широко распространены). */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }

.gap-1  { gap: var(--ds-space-1); }
.gap-2  { gap: var(--ds-space-2); }
.gap-3  { gap: var(--ds-space-3); }
.gap-4  { gap: var(--ds-space-4); }
.gap-6  { gap: var(--ds-space-6); }

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

.p-2    { padding: var(--ds-space-2); }
.p-3    { padding: var(--ds-space-3); }
.p-4    { padding: var(--ds-space-4); }
.p-6    { padding: var(--ds-space-6); }

.w-full { width: 100%; }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

.text-xs   { font-size: var(--ds-text-xs); }
.text-sm   { font-size: var(--ds-text-sm); }
.text-md   { font-size: var(--ds-text-md); }
.text-lg   { font-size: var(--ds-text-lg); }
.text-xl   { font-size: var(--ds-text-xl); }

.text-primary   { color: var(--ds-text-primary); }
.text-secondary { color: var(--ds-text-secondary); }
.text-tertiary  { color: var(--ds-text-tertiary); }
.text-accent    { color: var(--ds-accent); }
.text-success   { color: var(--ds-success); }
.text-warning   { color: var(--ds-warning); }
.text-danger    { color: var(--ds-danger); }

.font-medium   { font-weight: var(--ds-fw-medium); }
.font-semibold { font-weight: var(--ds-fw-semibold); }
.font-bold     { font-weight: var(--ds-fw-bold); }

/* Моноширинные числа (tabular-nums) — для денег, остатков, счетов */
.num,
.tabular { font-variant-numeric: tabular-nums; }

/* Видимость по экрану */
.hidden { display: none !important; }
@media (max-width: 768px) {
  .hidden-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hidden-desktop { display: none !important; }
}

/* ── Sr-only (для скрин-ридеров) ──────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Универсальная мобильная адаптация таблиц (Спринт 1.5 / Этап 7) ─────
   На экранах ≤768px ЛЮБАЯ таблица превращается в карточки:
   • thead скрывается визуально (остаётся доступен скрин-ридерам);
   • tbody tr — карточка с фоном, бордером и тенью;
   • tbody td — flex-строка «Подпись : Значение»; подпись берётся из data-label.
   data-label автоматически прокидывает /js/mobile-table-labels.js,
   читая thead → th и заполняя td[data-label] при загрузке и при изменениях DOM.

   Опт-аут: <table class="no-mobile-cards"> — оставить как обычную таблицу.
   Используется на страницах, где есть собственная мобильная адаптация
   (например, /stock и /storage, где скрываются таблицы и рендерятся
   кастомные карточки .stock-cards).
*/
@media (max-width: 768px) {
  table:not(.no-mobile-cards) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
  }

  table:not(.no-mobile-cards),
  table:not(.no-mobile-cards) tbody {
    display: block;
    width: 100%;
  }

  table:not(.no-mobile-cards) tbody tr {
    display: block;
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-subtle);
    border-radius: var(--ds-radius-lg);
    margin-bottom: var(--ds-space-3);
    padding: var(--ds-space-3);
    box-shadow: var(--ds-shadow-sm);
  }

  table:not(.no-mobile-cards) tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-1) 0;
    border: none;
    text-align: right;
    min-height: auto;
    height: auto;
    width: 100%;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  table:not(.no-mobile-cards) tbody td::before {
    content: attr(data-label);
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-fw-medium);
    text-align: left;
    margin-right: var(--ds-space-2);
    flex: 0 0 auto;
    max-width: 45%;
  }

  /* Если у td нет data-label — обычно это ячейка с кнопками действий.
     Растягиваем её и выравниваем содержимое влево, без префикса. */
  table:not(.no-mobile-cards) tbody td:not([data-label]) {
    justify-content: flex-end;
    padding-top: var(--ds-space-2);
  }
  table:not(.no-mobile-cards) tbody td[data-label=""]::before {
    content: none;
  }
}