/* =====================================================================
   app.css — Дизайн-система Контур.Staffcop поверх Bootstrap 5.1.3
   Гайд: цвета продукта, радиусы, модульная сетка 8px, типографика
   ===================================================================== */

@font-face {
    font-family: 'Lab Grotesque K';
    src: url('../fonts/LabGrotesqueK-Regular.woff2') format('woff2'),
         url('../fonts/LabGrotesqueK-Regular.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lab Grotesque K';
    src: url('../fonts/LabGrotesqueK-Medium.woff2') format('woff2'),
         url('../fonts/LabGrotesqueK-Medium.woff')  format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lab Grotesque K';
    src: url('../fonts/LabGrotesqueK-Bold.woff2') format('woff2'),
         url('../fonts/LabGrotesqueK-Bold.woff')  format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------
   2. ДИЗАЙН-ТОКЕНЫ (CSS-переменные)
   --------------------------------------------------------------------- */
:root {
    /* --- Цвета продукта --- */
    --kontur-primary:        #844BEC;   /* основной фиолетовый */
    --kontur-primary-dark:   #402675;   /* тёмный фиолетовый (hover/active) */

    /* Оттенки для состояний (производные от primary) */
    --kontur-primary-hover:  #7139d9;
    --kontur-primary-active: #5f2fb8;
    --kontur-primary-soft:   #f2ecfd;   /* очень светлый фон-акцент */

    /* --- Радиусы скругления (по гайду) --- */
    --radius-input: 2px;    /* инпуты — отличаем от кнопок */
    --radius-sm:    8px;    /* маленькие блоки и контролы (универсальный) */
    --radius-lg:   16px;    /* большие блоки и попапы */

    /* --- Модульная сетка: базовый модуль = 8px --- */
    --m-05: 4px;    /* полмодуля */
    --m-1:  8px;    /* 1 модуль  */
    --m-2:  16px;   /* 2 модуля  */
    --m-3:  24px;   /* 3 модуля  */
    --m-4:  32px;   /* 4 модуля  */
    --m-6:  48px;   /* 6 модулей */
    --m-8:  64px;   /* 8 модулей */

    /* --- Минимальные высоты блоков (правило «не слишком узкий») --- */
    --minh-input: 40px;   /* контролы */
    --minh-lg:    48px;   /* блоки с radius 16px — минимум 48px */

    /* --- Переопределяем токены Bootstrap --- */
    --bs-primary:      #844BEC;
    --bs-primary-rgb:  132, 75, 236;
    --bs-body-font-family: 'Lab Grotesque K', system-ui, -apple-system,
                           'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --bs-body-color:   #1f1f1f;
    --bs-border-radius:    var(--radius-sm);
    --bs-border-radius-sm: var(--radius-input);
    --bs-border-radius-lg: var(--radius-lg);
}

/* ---------------------------------------------------------------------
   3. БАЗОВАЯ ТИПОГРАФИКА
   Основной шрифт — Lab Grotesque K
   --------------------------------------------------------------------- */
body {
    font-family: var(--bs-body-font-family);
    color: var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Заголовки: размер / межстрочный интервал по гайду */
h1, .h1 { font-size: 32px; line-height: 40px; font-weight: 700; }
h2, .h2 { font-size: 24px; line-height: 32px; font-weight: 700; }
h3, .h3 { font-size: 20px; line-height: 28px; font-weight: 500; }

/* Ритм текста:
   между двумя параграфами — 1 модуль (8px),
   до заголовка — 2 модуля (16px). */
p { margin-bottom: var(--m-1); }

h1, h2, h3, .h1, .h2, .h3 { margin-bottom: var(--m-1); }
* + h1, * + h2, * + h3,
* + .h1, * + .h2, * + .h3 { margin-top: var(--m-2); }

/* ---------------------------------------------------------------------
   4. КНОПКИ — primary
   --------------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm);      /* 8px — контрол */
    min-height: var(--minh-input);        /* не слишком узкая */
    font-weight: 500;
    padding: var(--m-1) var(--m-2);       /* 8 / 16 — кратно модулю */
}

.btn-primary {
    --bs-btn-bg:            var(--kontur-primary);
    --bs-btn-border-color:  var(--kontur-primary);
    --bs-btn-hover-bg:      var(--kontur-primary-hover);
    --bs-btn-hover-border-color:  var(--kontur-primary-hover);
    --bs-btn-active-bg:     var(--kontur-primary-active);
    --bs-btn-active-border-color: var(--kontur-primary-active);
    --bs-btn-disabled-bg:   var(--kontur-primary);
    --bs-btn-disabled-border-color: var(--kontur-primary);
}

.btn-outline-primary {
    --bs-btn-color:         var(--kontur-primary);
    --bs-btn-border-color:  var(--kontur-primary);
    --bs-btn-hover-bg:      var(--kontur-primary);
    --bs-btn-hover-border-color: var(--kontur-primary);
    --bs-btn-active-bg:     var(--kontur-primary-active);
    --bs-btn-active-border-color: var(--kontur-primary-active);
}

/* Ссылки в фирменном цвете */
a { color: var(--kontur-primary); }
a:hover { color: var(--kontur-primary-dark); }

/* ---------------------------------------------------------------------
   5. ИНПУТЫ И КОНТРОЛЫ ФОРМ
   Радиус 2px — чтобы отличать от кнопок
   --------------------------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--radius-input);   /* 2px */
    min-height: var(--minh-input);        /* 40px */
    padding: var(--m-1) var(--m-2);       /* 8 / 16 */
}

.form-control:focus,
.form-select:focus {
    border-color: var(--kontur-primary);
    box-shadow: 0 0 0 3px rgba(132, 75, 236, 0.15);
}

/* Чекбоксы / переключатели в фирменном цвете */
.form-check-input:checked {
    background-color: var(--kontur-primary);
    border-color: var(--kontur-primary);
}
.form-check-input:focus {
    border-color: var(--kontur-primary);
    box-shadow: 0 0 0 3px rgba(132, 75, 236, 0.15);
}

/* Отступ между label и полем — полмодуля */
.form-label { margin-bottom: var(--m-05); font-weight: 500; }

/* ---------------------------------------------------------------------
   6. КАРТОЧКИ И БОЛЬШИЕ БЛОКИ
   Радиус 16px + оптическое выравнивание (-4px по горизонтали)
   + минимальная высота 48px
   --------------------------------------------------------------------- */
.card {
    border-radius: var(--radius-lg);      /* 16px */
    min-height: var(--minh-lg);           /* >= 48px */
    border: 1px solid #eceaf0;
}

/* Оптическое выравнивание больших блоков (radius 16):
   левая/правая границы выходят за линию выравнивания на 4px.
   Применяйте класс .block-optical к контейнеру большого блока. */
.block-optical {
    margin-left:  calc(-1 * var(--m-05));   /* -4px */
    margin-right: calc(-1 * var(--m-05));   /* -4px */
    padding-left:  var(--m-3);
    padding-right: var(--m-3);
}

/* Модальные окна / большие попапы — радиус 16px */
.modal-content { border-radius: var(--radius-lg); }
.dropdown-menu { border-radius: var(--radius-sm); }

/* ---------------------------------------------------------------------
   7. МОДУЛЬНЫЕ ОТСТУП-УТИЛИТЫ (кратные 8px)
   Используйте минимальное число разных отступов на экране: 8/16/32/64
   --------------------------------------------------------------------- */
.gap-m1  { gap: var(--m-1)  !important; }
.gap-m2  { gap: var(--m-2)  !important; }
.gap-m4  { gap: var(--m-4)  !important; }

.mt-m1 { margin-top: var(--m-1) !important; }
.mt-m2 { margin-top: var(--m-2) !important; }
.mt-m4 { margin-top: var(--m-4) !important; }
.mt-m8 { margin-top: var(--m-8) !important; }

.mb-m1 { margin-bottom: var(--m-1) !important; }
.mb-m2 { margin-bottom: var(--m-2) !important; }
.mb-m4 { margin-bottom: var(--m-4) !important; }

.p-m1 { padding: var(--m-1) !important; }
.p-m2 { padding: var(--m-2) !important; }
.p-m4 { padding: var(--m-4) !important; }

/* Смещение для вложенности (кратно модулю) */
.indent-m1 { margin-left: var(--m-1) !important; }
.indent-m2 { margin-left: var(--m-2) !important; }

/* ---------------------------------------------------------------------
   8. САЙДБАР (адаптация ваших существующих стилей под фирменный цвет)
   --------------------------------------------------------------------- */
.sidebar-link {
    text-decoration: none;
    display: block;
    padding: var(--m-1) var(--m-2);       /* 8 / 16 */
    color: #333;
    border-radius: var(--radius-sm);      /* 8px */
    margin-bottom: var(--m-05);           /* 4px — ритм внутри блока */
}
.sidebar-link:hover {
    background-color: var(--kontur-primary-soft);
    color: var(--kontur-primary);
}
.sidebar-link.active {
    background-color: var(--kontur-primary);
    color: #fff;
}

/* ---------------------------------------------------------------------
   9. ФИРМЕННЫЕ УТИЛИТЫ ЦВЕТА
   --------------------------------------------------------------------- */
.text-brand      { color: var(--kontur-primary) !important; }
.text-brand-dark { color: var(--kontur-primary-dark) !important; }
.bg-brand        { background-color: var(--kontur-primary) !important; }
.bg-brand-dark   { background-color: var(--kontur-primary-dark) !important; }
.bg-brand-soft   { background-color: var(--kontur-primary-soft) !important; }