/* =====================================================================
   Checker UI — дизайн-токены и базовые компоненты
   Бренд: copy.ru (фиолетовый #632EE6 из логотипа + амбер #FDB913)
   Стиль: Data-Dense Dashboard — плотная иерархия, статусы цветом по смыслу.
   Подключать как единый источник переменных во фронтенде
   (admin/франчайзи UI и PWA оператора). Можно прокинуть в Tailwind config.
   ===================================================================== */

:root {
  /* ---------- Бренд ---------- */
  --brand-violet:        #632EE6; /* логотип copy.ru, навигация, ссылки, активное */
  --brand-violet-hover:  #5326C4;
  --brand-violet-tint:   #F2EDFE; /* светлый фон: выбранная строка, подсветка */
  --brand-amber:         #FDB913; /* главные CTA — только заливка кнопок */
  --brand-amber-hover:   #E5A711;

  /* ---------- Нейтральные ---------- */
  --bg:             #FFFFFF;
  --bg-light:       #F5F5F5;
  --bg-subtle:      #FAFAFA;
  --text-primary:   #1A1A1A;
  --text-secondary: #555555;
  --text-tertiary:  #8A8A8A;
  --border:         #E5E5E5;
  --border-strong:  #D4D4D4;

  /* ---------- Семантические (цвет = смысл) ---------- */
  --success:        #10B981; /* ok / готово / активно / резолв */
  --success-bg:     #E6F7F1;
  --success-border: #A7E8D2;

  --danger:         #EF4444; /* поломка / ошибка / просрочка / деструктив */
  --danger-hover:   #DC2626;
  --danger-bg:      #FEECEC;
  --danger-border:  #F6C6C6;

  --warning:        #FDB913; /* предупреждение — тот же амбер, но мягко (фон/текст/точка) */
  --warning-text:   #9A6700;
  --warning-bg:     #FEF6E0;
  --warning-border: #FBE3A2;

  --info:           #2F6FE0; /* инфо-подсказки */
  --info-bg:        #EAF1FB;
  --info-border:    #BCD6F2;

  /* ---------- Тёмный сайдбар ---------- */
  --sidebar-bg:          #1A1A1A;
  --sidebar-text:        #B8B8B8;
  --sidebar-text-active: #FFFFFF;
  --sidebar-active-bg:   rgba(99, 46, 230, 0.20);
  --sidebar-border:      rgba(255, 255, 255, 0.08);

  /* ---------- Типографика ---------- */
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-page-title: 20px; /* H1 страницы */
  --fs-section:    14px; /* заголовок секции */
  --fs-body:       14px; /* основной текст, таблицы */
  --fs-meta:       13px; /* метаданные */
  --fs-label:      12px; /* подписи полей */
  --fs-th:         10px; /* шапка таблицы, uppercase */
  --fs-kpi:        24px; /* значение KPI */

  /* ---------- Сетка 4px ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;

  /* ---------- Радиусы (макс 8px — серьёзный инструмент) ---------- */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;

  /* ---------- Движение (только функциональное, ≤200ms) ---------- */
  --transition: 150ms ease;
}

/* ---------- Базовое ---------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
}
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 36px; padding: 0 var(--space-4);
  font: 600 var(--fs-body)/1 var(--font-sans);
  border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary   { background: var(--brand-amber); color: var(--text-primary); }
.btn--primary:hover:not(:disabled)   { background: var(--brand-amber-hover); }
.btn--secondary { background: var(--bg); color: var(--brand-violet); border-color: var(--brand-violet); }
.btn--secondary:hover:not(:disabled) { background: var(--brand-violet-tint); }
.btn--danger    { background: var(--danger); color: #fff; }
.btn--danger:hover:not(:disabled)    { background: var(--danger-hover); }
.btn--ghost     { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover:not(:disabled)     { color: var(--text-primary); background: var(--bg-light); }

/* ---------- Status pill (универсальный) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px;
  font: 500 var(--fs-label)/1.4 var(--font-sans);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--success { color: var(--success);       background: var(--success-bg); }
.pill--warning { color: var(--warning-text);   background: var(--warning-bg); }
.pill--danger  { color: var(--danger);         background: var(--danger-bg); }
.pill--info    { color: var(--info);           background: var(--info-bg); }
.pill--active  { color: var(--brand-violet);   background: var(--brand-violet-tint); }
.pill--muted   { color: var(--text-secondary); background: var(--bg-light); }
.pill--active::before { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- KPI tile ---------- */
.kpi {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-3);
}
.kpi__label { font: 500 var(--fs-th)/1 var(--font-sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-secondary); }
.kpi__value { margin-top: var(--space-2); font: 600 var(--fs-kpi)/1 var(--font-sans); }
.kpi__value--success { color: var(--success); }
.kpi__value--warning { color: var(--warning-text); }
.kpi__value--danger  { color: var(--danger); }
.kpi__value--violet  { color: var(--brand-violet); }

/* ---------- Таблица ---------- */
.tbl { width: 100%; border-collapse: collapse; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.tbl th { background: var(--bg-subtle); text-align: left; padding: var(--space-2) var(--space-4);
  font: 500 var(--fs-th)/1 var(--font-sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.tbl td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border);
  font-size: var(--fs-body); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:nth-child(even) { background: var(--bg-subtle); }
.tbl tbody tr.is-selected { background: var(--brand-violet-tint); }
.tbl a { color: var(--brand-violet); text-decoration: none; }
.tbl a:hover { text-decoration: underline; }

/* ---------- Info bar ---------- */
.info-bar { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid; border-radius: var(--radius-md); font-size: var(--fs-meta); }
.info-bar--info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info); }
.info-bar--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.info-bar--danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger); }
.info-bar--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }

/* ---------- Карточка / секция ---------- */
.card { background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-4); }
.card__title { font: 600 var(--fs-section)/1.3 var(--font-sans); }
.card__desc  { margin-top: 2px; font-size: 11px; color: var(--text-secondary); }

/* ---------- Индикатор КЦ/оборудования (точка) ---------- */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--ok      { background: var(--success); }
.dot--warning { background: var(--warning); }
.dot--broken  { background: var(--danger); }