/* Фирменная тема RBI поверх Bootstrap 5; палитра и правила — corporate styles/uxui.md.
   Подключается после Bootstrap, чтобы перекрыть его стили. */

/* ---- Шрифты ---- */
@font-face {
  font-family:'History Pro';
  src:url('../fonts/HistoryPro_02.otf') format('opentype');
  font-weight:100 900;
  font-display:swap;
}
@font-face {
  font-family:'Circe';
  src:url('../fonts/CRC25.otf') format('opentype');
  font-weight:200;
  font-display:swap;
}
@font-face {
  font-family:'Circe';
  src:url('../fonts/CRC35.otf') format('opentype');
  font-weight:300;
  font-display:swap;
}
@font-face {
  font-family:'Circe';
  src:url('../fonts/CRC55.otf') format('opentype');
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:'Circe';
  src:url('../fonts/Circe-Bold.otf') format('opentype');
  font-weight:600 700;
  font-display:swap;
}
@font-face {
  font-family:'Circe';
  src:url('../fonts/Circe-ExtraBold.otf') format('opentype');
  font-weight:800;
  font-display:swap;
}


:root {
  /* Палитра — corporate styles/website_color_usage_guide.md:
     navy, приглушённый серо-синий, белый, светлый нейтральный серый;
     taupe — только мелкие состояния (активная вкладка, hover, нейтральные метки). */

  /* ---- Поверхности ---- */

  --rbi-topbar:#2A3A49;
  --rbi-topbar-deep:#1C2B39;
  --rbi-page:#F6F7F7;
  --rbi-white:#FFFFFF;
  /* шапка таблицы, тихие элементы */
  --rbi-surface-secondary:#F2F4F5;
  /* раскрытая карточка под строкой */
  --rbi-expanded:#ECEFF1;


  /* ---- Текст ---- */

  --rbi-ink:#1C2B39;
  --rbi-text:#1C2B39;
  /* синий для обычного текста не используем */
  --rbi-text-secondary:#667782;
  --rbi-muted:#667782;


  /* ---- Синий: действия и фокус ---- */

  --rbi-slate:#4C7288;
  --rbi-slate-dark:#42677C;
  --rbi-secondary:#6F8794;

  --rbi-slate-07:rgba(76,114,136,.07);
  --rbi-slate-12:rgba(76,114,136,.12);


  /* ---- Taupe: мелкий акцент, не фон ---- */

  --rbi-taupe:#B3A596;
  --rbi-taupe-soft:#E8E2DC;
  --rbi-taupe-pale:#F4F0EB;
  --rbi-taupe-text:#5E554D;
  /* все метки, кроме «устарела» */
  --rbi-badge:#C4AE8B;


  /* ---- Границы ---- */

  --border-block:#D7DDE1;
  --border-inner:#E6EAEC;
  /* разделитель шапки таблицы, крупные границы */
  --border-strong:#BEC8CE;


  /* ---- Состояния ---- */

  --rbi-hover:var(--rbi-taupe-pale);
  --rbi-selected:var(--rbi-taupe-pale);
  /* устаревшая цена: состояние, а не warning */
  --rbi-stale:var(--rbi-taupe-pale);

  /* красный только для ошибок, опасных действий и метки «устарела» */
  --rbi-error:#985B58;
  --rbi-error-08:rgba(152,91,88,.08);


  /* ---- Шрифты и геометрия ---- */

  --font-display:'History Pro',Georgia,serif;
  --font-body:'Circe','Segoe UI',system-ui,sans-serif;

  --radius-md:4px;
  --shadow-sm:0 1px 3px rgba(28,43,57,.07);
  --tracking-display:.12em;

  --dur-fast:140ms;
  --ease:cubic-bezier(.22,.61,.36,1);


  /* ---- Bootstrap ---- */

  --bs-primary:#4C7288;
  --bs-primary-rgb:76,114,136;
  --bs-primary-text-emphasis:var(--rbi-slate-dark);
  --bs-primary-bg-subtle:var(--rbi-slate-07);
  --bs-primary-border-subtle:var(--border-strong);
  --bs-focus-ring-color:var(--rbi-slate-12);

  --bs-body-font-family:var(--font-body);
  --bs-body-font-size:16px;

  --bs-body-color:var(--rbi-text);
  --bs-body-bg:var(--rbi-page);

  --bs-link-color:var(--rbi-slate);
  --bs-link-color-rgb:76,114,136;
  --bs-link-hover-color:var(--rbi-slate-dark);
  --bs-link-hover-color-rgb:66,103,124;

  --bs-border-color:var(--border-inner);

  --bs-border-radius:4px;
  --bs-border-radius-sm:3px;
  --bs-border-radius-lg:6px;

  --bs-secondary-color:var(--rbi-muted);
}


/* ============================================================
   Документ
   ============================================================ */

body {
  font-family:var(--font-body);
  color:var(--rbi-text);
  background:var(--rbi-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection {
  background:var(--rbi-taupe-soft);
  color:var(--rbi-ink);
}

a {
  color:var(--rbi-slate);
  text-decoration:none;
}

a:hover {
  color:var(--rbi-slate-dark);
}

h1,h2,h3,h4,h5,
.h1,.h2,.h3,.h4,.h5 {
  font-family:var(--font-body);
  color:var(--rbi-ink);
  font-weight:700;
}

/* History Pro — только название в шапке и крупные заголовки страниц */
.rbi-display {
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:var(--tracking-display);
  font-weight:500;
}

.text-muted {
  color:var(--rbi-muted)!important;
}

.text-secondary {
  color:var(--rbi-text-secondary)!important;
}


/* ============================================================
   Верхняя навигация / app shell
   ============================================================ */

/* Тёмная navy-шапка, без нижней границы (website_color_usage_guide.md «Top bar») */
.rbi-topbar {
  background:var(--rbi-topbar);
  color:#fff;
}

/* только ссылки самой шапки: пункты выпадающих меню остаются тёмными на белом */
.rbi-topbar .navbar-brand,
.rbi-topbar .nav-link {
  color:rgba(255,255,255,.82);
}

.rbi-topbar .nav-link:hover {
  color:#fff;
}

/* активный пункт — тонкая taupe-черта, не заливка */
.rbi-topbar .nav-link.active {
  color:#fff;
  font-weight:600;
  box-shadow:inset 0 -2px 0 var(--rbi-taupe);
}


/* ============================================================
   Кнопки
   ============================================================ */

.btn {
  font-family:var(--font-body);
  font-weight:600;
  border-radius:var(--radius-md);

  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}


/* Primary = важное действие страницы */
.btn-primary {
  background:var(--rbi-slate);
  border-color:var(--rbi-slate);
  color:#fff;
  /* без них Bootstrap подставляет свой ярко-синий в состояния */
  --bs-btn-hover-bg:var(--rbi-slate-dark);
  --bs-btn-hover-border-color:var(--rbi-slate-dark);
  --bs-btn-active-bg:var(--rbi-slate-dark);
  --bs-btn-active-border-color:var(--rbi-slate-dark);
  --bs-btn-focus-shadow-rgb:76,114,136;
}

.btn-primary:not(:disabled):hover,
.btn-primary:focus,
.btn-primary:active {
  background:var(--rbi-slate-dark)!important;
  border-color:var(--rbi-slate-dark)!important;
  color:#fff;
}


/* Secondary action: значительно спокойнее */
.btn-outline-primary {
  border-color:var(--rbi-slate);
  color:var(--rbi-slate-dark);
  background:#fff;
  --bs-btn-active-bg:var(--rbi-slate-07);
  --bs-btn-active-border-color:var(--rbi-slate);
  --bs-btn-active-color:var(--rbi-ink);
  --bs-btn-focus-shadow-rgb:76,114,136;
}


/* неактивная — серая, а не бледно-синяя */
.btn-primary:disabled,
.btn-outline-primary:disabled {
  background:var(--rbi-surface-secondary);
  border-color:var(--border-block);
  color:var(--rbi-muted);
  opacity:1;
  pointer-events:auto;
  cursor:not-allowed;
}

.btn-outline-primary:not(:disabled):hover,
.btn-outline-primary:active {
  background:var(--rbi-slate-07)!important;
  border-color:var(--rbi-slate)!important;
  color:var(--rbi-ink)!important;
}


.btn-secondary,
.btn-outline-secondary {
  background:#fff;
  border-color:var(--border-block);
  color:var(--rbi-text);
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
  background:var(--rbi-surface-secondary);
  border-color:var(--rbi-slate);
  color:var(--rbi-ink);
}


.btn-danger {
  background:var(--rbi-error);
  border-color:var(--rbi-error);
}

.btn-outline-danger {
  color:var(--rbi-error);
  border-color:var(--rbi-error);
}

.btn-outline-danger:hover {
  background:var(--rbi-error);
  border-color:var(--rbi-error);
  color:#fff;
}


.btn-link {
  color:var(--rbi-slate);
}

.btn-link:hover {
  color:var(--rbi-slate-dark);
}


/* Focus — основной синий */
.btn:focus-visible {
  outline:2px solid var(--rbi-slate);
  outline-offset:2px;
  box-shadow:none;
}


/* ============================================================
   Таблицы
   ============================================================ */

/*
  Таблица остаётся белым самостоятельным блоком.

  Основное изменение:
  - нет тяжёлой сетки между каждой ячейкой;
  - строки разделены горизонтально;
  - header получает холодный secondary surface;
  - большой table block не получает shadow.
*/

.table {
  --bs-table-bg:#fff;
  --bs-table-color:var(--rbi-text);

  background:#fff;
  color:var(--rbi-text);
  border-color:var(--border-inner);
}


/* Контур таблицы остаётся */
.table.table-bordered {
  outline:1px solid var(--border-block);
  outline-offset:-1px;
  box-shadow:none;
}


/*
  Bootstrap table-bordered обычно рисует вертикальную сетку.
  Для dense data table она создаёт слишком много визуального шума.
*/
.table.table-bordered > :not(caption) > * > * {
  border-left-width:0;
  border-right-width:0;
}


/* Header заметно отличается и от страницы, и от table body */
.table > thead > tr > th {
  background:var(--rbi-surface-secondary);
  color:var(--rbi-ink);

  font-weight:700;

  border-top:0;
  border-left:0;
  border-right:0;
  border-bottom:1px solid var(--border-strong);
  padding:.65rem .75rem;
}


/* Более воздушные строки */
.table > tbody > tr > td {
  padding:.68rem .75rem;
  vertical-align:middle;

  border-left:0;
  border-right:0;
  border-bottom:1px solid var(--border-inner);
}


/* Cool hover хорошо отличается от warm page / stale state */
.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state:var(--rbi-hover);
}


/*
  Опциональные уровни информации внутри таблицы.

  Использовать для:
  .table-primary-text   — name / displayed price
  .table-secondary-text — source/date
  .table-supporting     — section/unit/original price
*/

.table-primary-text {
  color:var(--rbi-ink);
  font-weight:600;
}

.table-secondary-text {
  color:var(--rbi-text);
}

.table-supporting {
  color:var(--rbi-muted);
}


/* Числа цен — обычного начертания, как в карточках и расчёте. */
.table-price {
  color:var(--rbi-ink);
  font-weight:400;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}


/* Устаревшая цена без оттенка строки: жирная дата + метка (uxui.md) */
.stale-date {
  color:var(--rbi-ink);
  font-weight:600;
}

.badge-stale {
  background:var(--rbi-error);
  color:#fff;
}


/* No price — нейтральное состояние */
.table-no-price > * {
  background:var(--rbi-surface-secondary);
}


/*
  Row actions: вместо множества цветных прямоугольников можно
  использовать quiet icon buttons.
*/
.table-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:30px;
  height:30px;

  padding:.25rem;

  background:transparent;
  color:var(--rbi-slate);

  border:1px solid transparent;
  border-radius:var(--radius-md);
}

.table-action:hover {
  background:var(--rbi-slate-07);
  color:var(--rbi-ink);
}

.table-action:focus-visible {
  outline:2px solid var(--rbi-slate);
  outline-offset:1px;
}


/* ============================================================
   Формы
   ============================================================ */

.form-label {
  font-weight:600;
  color:var(--rbi-ink);
  margin-bottom:.25rem;
}

.form-control,
.form-select {
  border-color:var(--border-strong);
  border-radius:var(--radius-md);

  color:var(--rbi-text);
  background-color:#fff;
}


/* Focus — основной синий */
.form-control:focus,
.form-select:focus {
  border-color:var(--rbi-slate);
  box-shadow:0 0 0 3px var(--rbi-slate-12);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color:var(--rbi-error);
}


/* Подсказка ближе к своему полю, чем поля друг к другу */
.form-text {
  color:var(--rbi-muted);
  margin-top:.15rem;
}


.form-check-input:checked {
  background-color:var(--rbi-slate);
  border-color:var(--rbi-slate);
}

.form-check-input:focus {
  border-color:var(--rbi-slate);
  box-shadow:0 0 0 3px var(--rbi-slate-12);
}


/* ============================================================
   Метки и сообщения
   ============================================================ */

.badge {
  font-weight:700;
  border-radius:999px;
}


/* счётчики в меню */
.badge.bg-warning {
  background:var(--rbi-badge)!important;
  color:var(--rbi-ink)!important;
}


.text-bg-secondary {
  background:var(--rbi-surface-secondary)!important;
  color:var(--rbi-text)!important;
}


.text-danger {
  color:var(--rbi-error)!important;
}


.alert {
  border-radius:var(--radius-md);
  border-left-width:3px;
}


.alert-danger {
  background:var(--rbi-error-08);
  border-color:var(--rbi-error);
  color:var(--rbi-error);
}


.alert-warning {
  background:var(--rbi-stale);
  border-color:var(--rbi-taupe);
  color:var(--rbi-ink);
}


/* Info получает slate — семантически отличается от warning */
.alert-info {
  background:var(--rbi-slate-07);
  border-color:var(--rbi-slate);
  color:var(--rbi-ink);
}


/* ============================================================
   Cards / content blocks
   ============================================================ */

/*
  Forms/cards могут слегка отделяться от page background.
  В отличие от большой data table им разрешён shadow.
*/
.card {
  background:#fff;
  border:1px solid var(--border-block);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}

.card-header {
  background:var(--rbi-surface-secondary);
  border-bottom:1px solid var(--border-inner);
  color:var(--rbi-ink);
}


/* ============================================================
   Dropdowns
   ============================================================ */

.dropdown-menu {
  background:#fff;
  border:1px solid var(--border-block);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}

.dropdown-item {
  color:var(--rbi-text);
}

.dropdown-item:hover {
  background:var(--rbi-hover);
  color:var(--rbi-ink);
}

.dropdown-item.active,
.dropdown-item:active {
  background:var(--rbi-slate);
  color:#fff;
}


/* ============================================================
   Navigation / tabs / pills
   ============================================================ */

.nav-tabs .nav-link {
  color:var(--rbi-muted);
  border:0;
  border-bottom:2px solid transparent;
}

.nav-tabs .nav-link:hover {
  color:var(--rbi-ink);
}

.nav-tabs .nav-link.active {
  color:var(--rbi-ink);
  background:transparent;
  border-bottom-color:var(--rbi-taupe);
  font-weight:600;
}


.nav-pills .nav-link {
  color:var(--rbi-text);
  border-radius:var(--radius-md);
}

.nav-pills .nav-link:hover {
  background:var(--rbi-hover);
}

.nav-pills .nav-link.active {
  background:var(--rbi-taupe-pale);
  color:var(--rbi-ink);
  box-shadow:inset 2px 0 0 var(--rbi-taupe);
}


/* ============================================================
   Pagination
   ============================================================ */

.page-link {
  color:var(--rbi-slate);
  background:#fff;
  border-color:var(--border-block);
}

.page-link:hover {
  color:var(--rbi-ink);
  background:var(--rbi-slate-07);
  border-color:var(--border-block);
}

.page-item.active .page-link {
  background:var(--rbi-slate);
  border-color:var(--rbi-slate);
  color:#fff;
}


/* ============================================================
   Misc
   ============================================================ */

hr {
  border-color:var(--border-inner);
  opacity:1;
}

.border {
  border-color:var(--border-block)!important;
}

.bg-light {
  background:var(--rbi-surface-secondary)!important;
}

/* нейтральные метки источника: «вручную», «НДС рассчитан» */
.text-bg-light {
  background:var(--rbi-badge)!important;
  color:var(--rbi-ink)!important;
}