/* ============================================================
   Стайл-гайд «Закупочные споры» v1.0 (design_handoff_styleguide)
   Токены + переопределение Bootstrap-компонентов.
   ============================================================ */

:root {
  /* нейтральные */
  --ink: #1A2233;        /* заголовки, основной текст, шапка */
  --ink-2: #5A6474;      /* вторичный текст */
  --ink-3: #8A93A3;      /* подписи, плейсхолдеры */
  --border: #E3E6EA;     /* рамки карточек, разделители */
  --border-strong: #C9CED6; /* рамки полей и secondary-кнопок */
  --bg: #F4F5F7;         /* фон страницы */
  --surface: #FFFFFF;    /* карточки, таблицы, формы */
  --row-hover: #F8F9FB;

  /* акцент */
  --primary: #2456C4;  --primary-hover: #1D49A8;  --primary-soft: #E8EEFB;

  /* семантика: насыщенный для текста, soft для фона бейджа */
  --success: #1E7F4F;  --success-soft: #E2F3EA;
  --warning: #9A6A00;  --warning-soft: #FDF1D7;
  --danger:  #B3362C;  --danger-soft:  #FBE7E5;
  --violet:  #6246C1;  --violet-soft:  #ECE7FA;
  --neutral: #5A6474;  --neutral-soft: #EEF0F3;

  /* шрифты */
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace; /* номера, даты, суммы, KPI */

  /* геометрия */
  --radius-card: 8px;  --radius-control: 6px;  --radius-pill: 999px;
  --h-control: 38px;   --h-button: 36px;  --h-button-sm: 28px;  --h-badge: 24px;
  --shadow-hover: 0 4px 12px rgba(16,24,40,.08);
}

/* ---------- База ---------- */
body {
  background: var(--bg);
  font-family: var(--font-ui);
  color: var(--ink);
  font-size: 14px;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }
h1, .h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 600; }
.mono, .font-monospace { font-family: var(--font-mono) !important; }

/* ---------- Шапка ---------- */
.navbar.app-header {
  background: var(--ink) !important;
  min-height: 64px;
  padding: 0 24px;
}
.app-header .navbar-brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-size: 17px; font-weight: 700;
}
.app-header .brand-mark {
  display: inline-flex; width: 26px; height: 26px; border-radius: 6px;
  background: var(--primary); color: #fff;
  align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.app-header .navbar-nav { align-items: stretch; height: 64px; }
.app-header .nav-link {
  display: inline-flex; align-items: center; height: 100%;
  padding: 0 12px !important;
  color: #9AA3B5; font-size: 14px; font-weight: 500;
}
.app-header .nav-link:hover { color: #fff; text-decoration: none; }
.app-header .nav-link.active {
  color: #fff; font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--primary);
}
.app-header .btn-new-case {
  height: 34px; padding: 0 16px; border: none; border-radius: 6px;
  background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.app-header .btn-new-case:hover { background: #3866D4; color: #fff; text-decoration: none; }
.app-header .nav-exit { color: #9AA3B5; font-size: 13px; align-self: center; padding-left: 16px; }
.app-header .nav-exit:hover { color: #fff; text-decoration: none; }

/* ---------- Карточки: рамка, без тени (тень только hover кликабельных) ---------- */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
  background: var(--surface);
}
.card-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 16px; font-weight: 600;
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
}
.card-clickable { cursor: pointer; transition: box-shadow .15s; }
.card-clickable:hover { box-shadow: var(--shadow-hover); }

/* ---------- Кнопки ---------- */
.btn {
  font-family: var(--font-ui);
  border-radius: var(--radius-control);
  font-size: 14px;
  white-space: nowrap; /* подписи кнопок не переносятся (высота фиксированная) */
}
.btn:not(.btn-sm):not(.btn-lg) { height: var(--h-button); padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; }
.btn-sm { height: var(--h-button-sm) !important; padding: 0 12px !important; font-size: 13px !important; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary {
  background: var(--primary); border: none; font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus { background: var(--primary-hover); }
.btn-primary:disabled { background: var(--border); color: var(--ink-3); }
.btn-secondary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-primary {
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--ink); font-weight: 500;
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-outline-primary:hover {
  background: var(--bg); border-color: var(--ink-3); color: var(--ink);
}
.btn-link { color: var(--primary); font-weight: 500; text-decoration: none; }
.btn-link:hover { background: var(--primary-soft); border-radius: var(--radius-control); }
.btn-danger, .btn-outline-danger {
  background: var(--surface); border: 1px solid #F0C9C5; color: var(--danger); font-weight: 500;
}
.btn-danger:hover, .btn-outline-danger:hover { background: var(--danger-soft); color: var(--danger); border-color: #F0C9C5; }
.btn-light, .btn-light.border {
  background: var(--surface); border: 1px solid var(--border) !important; color: var(--ink-3);
}
.btn-success { background: var(--success); border: none; }
.btn:disabled { cursor: not-allowed; }

/* ---------- Бейджи: soft-фон + насыщенный текст, пилюля 24px ---------- */
.badge {
  display: inline-flex; align-items: center;
  height: var(--h-badge); padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.badge.bg-primary   { background: var(--primary-soft) !important; color: var(--primary) !important; }
.badge.bg-success   { background: var(--success-soft) !important; color: var(--success) !important; }
.badge.bg-warning   { background: var(--warning-soft) !important; color: var(--warning) !important; }
.badge.bg-danger    { background: var(--danger-soft) !important;  color: var(--danger) !important; }
.badge.bg-secondary { background: var(--neutral-soft) !important; color: var(--neutral) !important; }
.badge.bg-dark      { background: var(--neutral-soft) !important; color: var(--neutral) !important; }
.badge.bg-info      { background: var(--primary-soft) !important; color: var(--primary) !important; }
.badge.bg-light     { background: var(--neutral-soft) !important; color: var(--neutral) !important; border: none !important; }
.badge-violet       { background: var(--violet-soft) !important;  color: var(--violet) !important; }

/* ---------- Таблицы ---------- */
.table { color: var(--ink); font-size: 14px; }
.table thead th {
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.table td { border-bottom: 1px solid var(--neutral-soft); }
.table-hover tbody tr:hover { background: var(--row-hover); --bs-table-accent-bg: var(--row-hover); }
.table .empty-val { color: var(--ink-3); }

/* Вкладки-фильтры над таблицей */
.tabs-filter {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 16px 0 16px;
  border-bottom: 1px solid var(--border);
}
.tabs-filter .tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 10px 14px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
}
.tabs-filter .tab:hover { color: var(--ink); }
.tabs-filter .tab.active {
  color: var(--ink); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--primary);
}
.tabs-filter .tab .count {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--neutral-soft); color: var(--neutral);
  border-radius: var(--radius-pill); padding: 1px 8px;
}

/* ---------- Формы ---------- */
.form-label, label.form-label { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.form-control, .form-select {
  height: var(--h-control);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  font-size: 14px; color: var(--ink);
}
.form-control-sm, .form-select-sm { height: 30px; font-size: 13px; }
textarea.form-control { height: auto; }
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.form-text { font-size: 12px; color: var(--ink-3); }
::placeholder { color: var(--ink-3) !important; }

/* ---------- Алерты ---------- */
.alert { border-radius: var(--radius-card); font-size: 14px; }
.alert-success { background: var(--success-soft); border-color: var(--success-soft); color: var(--success); }
.alert-danger  { background: var(--danger-soft);  border-color: var(--danger-soft);  color: var(--danger); }
.alert-warning { background: var(--warning-soft); border-color: var(--warning-soft); color: var(--warning); }
.alert-info    { background: var(--primary-soft); border-color: var(--primary-soft); color: var(--primary); }
.alert-light   { background: var(--surface); border-color: var(--border); color: var(--ink-2); }

/* ---------- Моно-элементы ---------- */
.num, .table .num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.kpi-num { font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.02em; }

/* ---------- Степпер этапов дела (8 сегментов) ---------- */
.stage-stepper { display: flex; align-items: center; gap: 4px; }
.stage-stepper .seg { flex: 1; height: 6px; border-radius: 3px; background: var(--border); }
.stage-stepper .seg.done { background: var(--primary); }
.stage-stepper-caption {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 12px; color: var(--ink-2);
}
.stage-stepper-caption .pct { font-family: var(--font-mono); }

/* Клэмп длинных названий организаций (2 строки) */
.clamp2 {
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sub-caption { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* dt/dd в карточках */
dt { font-weight: 500; color: var(--ink-2); }