/* ============================================================
   05-UTILITIES - служебные классы
   ------------------------------------------------------------
   ВАЖНО: этот файл подключается ПОСЛЕДНИМ в base.html.
   Причина: при равной специфичности побеждает правило,
   объявленное позже. Если служебный класс объявить раньше
   компонентов, он проиграет им. Так уже ломался .is-hidden:
   он не мог скрыть .nav-bell и .form-row, потому что те
   задают display в более поздних файлах.
   ============================================================ */

/* ─────────── УТИЛИТЫ: РАСКЛАДКА ─────────── */

.row-inline{
    display:flex;
    gap:var(--s-2);
    flex-wrap:wrap;
    align-items:center;
}

.row-inline-lg{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.row-inline-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.row-gap-10{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.row-center-12{
    display:flex;
    gap:var(--s-3);
    align-items:center;
}

.radio-group{
    display:flex;
    gap:var(--s-3);
    flex-wrap:wrap;
}

.radio-label{
    display:flex;
    align-items:center;
    gap:var(--s-1);
    cursor:pointer;
    font-weight:normal;
}

.toggle-section{
    margin-top:var(--s-4);
    border-top:1px solid var(--c-line);
    padding-top:var(--s-4);
}

/* Группа мелких действий в ячейке таблицы или в шапке блока */
.row-actions{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    flex-shrink:0;
}

/* Две колонки, переносятся на узком экране */
.split-row{
    display:flex;
    gap:var(--s-5);
    flex-wrap:wrap;
    align-items:flex-start;
}

.split-col{
    flex:1;
    min-width:260px;
}

.mt-6{  margin-top:6px; }
.mt-8{  margin-top:var(--s-2); }
.mt-10{ margin-top:10px; }
.mt-12{ margin-top:var(--s-3); }
.mt-16{ margin-top:var(--s-4); }
.mb-12{ margin-bottom:var(--s-3); }
.mb-14{ margin-bottom:14px; }
.mb-16{ margin-bottom:var(--s-4); }
.ml-4{  margin-left:var(--s-1); }
.ml-6{  margin-left:6px; }
.ml-8{  margin-left:var(--s-2); }
.m-0{   margin:0; }
.ptb-12{ padding:var(--s-3) 0; }
.cell-nowrap{ white-space:nowrap; }
/* Скрытие обязано побеждать всегда — в том числе компоненты
   с собственным display (.nav-bell, .form-row и подобные) */
.is-hidden{ display:none !important; }

.row-inline-tight{
    display:flex;
    gap:6px;
}

.flex-1{ flex:1; }
.flex-2{ flex:2; }
.self-center{ align-self:center; }
.mb-8{ margin-bottom:var(--s-2); }
.mb-10{ margin-bottom:10px; }

.flex-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--s-2);
}

.flex-between-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:10px;
}

/* Сетка карточек-полей, подстраивается под ширину */
.grid-auto{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:var(--s-2) var(--s-6);
    font-size:var(--fs-sm);
}

.grid-auto-wide{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:var(--s-2) var(--s-6);
    font-size:var(--fs-sm);
}

.grid-auto-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:var(--s-4);
}

.grid-auto-fields{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:var(--s-4);
    margin-bottom:var(--s-3);
}

.mt-0{ margin-top:0; }
.mt-2{ margin-top:2px; }
.mt-4{ margin-top:var(--s-1); }
.mt-20{ margin-top:var(--s-5); }
.mt-24{ margin-top:var(--s-6); }
.mb-4{ margin-bottom:var(--s-1); }
.grid-one{ grid-template-columns:1fr; }
.mw-300{ min-width:300px; }
.mw-400{ max-width:400px; }
.mw-640{ max-width:640px; }
.col-w-40{  width:40px; }
.col-w-130{ width:130px; }
.col-w-140{ width:140px; }
.col-w-180{ width:180px; }
.col-w-200{ width:200px; }
.col-w-260{ width:260px; }
.col-w-280{ width:280px; }
.col-w-320{ width:320px; }

.list-loose{
    padding-left:var(--s-5);
    line-height:1.8;
}
.mt-auto{ margin-top:auto; }
.mb-2{  margin-bottom:2px; }
.mb-18{ margin-bottom:18px; }
.mb-20{ margin-bottom:var(--s-5); }
.pos-relative{ position:relative; }
.w-auto{ width:auto; min-height:auto; }
.scroll-x{ overflow-x:auto; }
.d-inline{ display:inline; }

.text-bold{ font-weight:bold; }
.text-medium{ font-weight:500; }
.text-normal{ font-weight:normal; }
.text-success{ color:var(--c-success); }
.text-warning{ color:var(--c-warning); }
.text-info{ color:var(--c-info); }
.text-muted{ color:var(--c-ink-3); }
.text-faint{ color:var(--c-line); }
.text-center{ text-align:center; }
.fs-sm{ font-size:var(--fs-sm); }
.fs-xs{ font-size:var(--fs-xs); }
.fs-md{ font-size:var(--fs-md); }

/* ─────────── УТИЛИТЫ: ТЕКСТ ─────────── */

.muted-sm,
.text-muted-sm{
    color:var(--c-ink-3);
    font-size:var(--fs-sm);
}

.muted-xs{
    color:var(--c-ink-3);
    font-size:var(--fs-xs);
}

.label-caption{
    color:var(--c-ink-3);
    font-size:11px;
    text-transform:uppercase;
    margin-bottom:2px;
}

.text-danger{
    color:var(--c-danger);
}

.required-star{
    color:var(--c-danger);
}

.empty-center{
    padding:var(--s-5);
    text-align:center;
    color:var(--c-ink-3);
}

/* Числа в таблицах: вправо и моноширинно, чтобы разряды
   выстраивались друг под другом и суммы не «плясали» */
.num{
    text-align:right;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}