/* ============================================================
   УКСИВТ — Единая тема поверх Remos Admin Template
   Единый источник истины. Значения — по template/STYLE_GUIDE.md.
   Подключать ПОСЛЕ remos/css/style.css.
   ============================================================ */

/* ---------- 1. CSS-переменные (палитра) ---------- */
:root {
    /* Текст */
    --color-title:   #1e293b;
    --color-body:    #475569;
    --color-muted:   #94a3b8;
    --color-link:    #1d4ed8;
    /* Фон */
    --color-bg:      #f8fafc;
    --color-white:   #ffffff;
    --color-border:  #e2e8f0;
    --color-divider: #f1f5f9;
    /* Статусные */
    --color-blue:    #1d4ed8;
    --color-green:   #15803d;
    --color-yellow:  #b45309;
    --color-orange:  #c2410c;
    --color-red:     #b91c1c;
    --color-purple:  #6d28d9;
    --color-gray:    #475569;
}

/* ---------- 2. Бейджи (hd-badge) ---------- */
.hd-badge {
    display:inline-flex; align-items:center;
    padding:3px 10px; border-radius:20px;
    font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.hd-badge-blue   { background:#e0edff; color:#1d4ed8; }
.hd-badge-green  { background:#dcfce7; color:#15803d; }
.hd-badge-yellow { background:#fef3c7; color:#b45309; }
.hd-badge-orange { background:#ffedd5; color:#c2410c; }
.hd-badge-red    { background:#fee2e2; color:#b91c1c; }
.hd-badge-purple { background:#ede9fe; color:#6d28d9; }
.hd-badge-gray   { background:#f1f5f9; color:#475569; }

/* ---------- 3. Иконочные кнопки справочников ---------- */
.ref-icon-btn {
    width:30px; height:30px; border-radius:7px; border:1px solid;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; padding:0; box-sizing:border-box;
}
.ref-btn-save { background:#eff6ff; border-color:#bfdbfe; color:#2563eb; }
.ref-btn-del  { background:#fff1f2; border-color:#fecdd3; color:#e11d48; }

/* ---------- 4. Таблицы данных ---------- */
.hd-table-wrap { border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; }
.hd-table, .my-table {
    table-layout:fixed; width:100%;
    border-collapse:separate; border-spacing:0; border:none !important;
}
.hd-table th, .hd-table td,
.my-table th, .my-table td {
    padding:10px 12px;
    border-bottom:1px solid #e2e8f0 !important;
    border-top:none !important; border-left:none !important; border-right:none !important;
}
.hd-table thead th, .my-table thead th {
    background:#f8fafc; color:#475569; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em;
    border-bottom:2px solid #e2e8f0 !important;
}
.hd-table tbody tr:hover, .my-table tbody tr:hover { background:#f8fafc; }
.hd-table tbody tr:last-child td,
.my-table tbody tr:last-child td { border-bottom:none !important; }

/* ---------- 5. Паттерн info-row (страницы деталей) ---------- */
.info-row   { display:flex; gap:8px; margin-bottom:10px; align-items:flex-start; }
.info-label { color:#94a3b8; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; min-width:150px; padding-top:2px; }
.info-value { font-size:14px; }

/* ---------- 6. Двухколоночный layout ---------- */
.two-col { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
@media(max-width:900px) { .two-col { grid-template-columns:1fr; } }

/* ---------- 7. Заголовок страницы ---------- */
.page-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:20px; }

/* ---------- 8. Усечение заголовка в шапке ---------- */
.header-left h6 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; }
@media(max-width:768px) { .header-left h6 { max-width:120px; } }

/* ---------- 9. Мобильное боковое меню (drawer) ---------- */
#mob-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9980; cursor:pointer; }
body.mob-menu-open #mob-overlay { display:block; }

/* Единое выдвижное меню на телефонах и планшетах — до 991px, где Remos
   сам переходит на мобильную раскладку (иначе на 769–991px работал его
   собственный режим .full-width: без затемнения и закрытия тапом мимо).
   Порог 991 продублирован в partials/scripts (window.innerWidth <= 991). */
@media(max-width:991px) {
    .section-menu-left {
        position:fixed !important; left:-280px !important; top:0; bottom:0;
        z-index:9990 !important; transition:left .28s ease; width:280px;
        overflow-y:auto; box-shadow:none;
    }
    body.mob-menu-open .section-menu-left { left:0 !important; box-shadow:4px 0 24px rgba(0,0,0,.18) !important; }
    .layout-wrap.full-width .section-menu-left { left:-280px !important; }
    /* Шапка меню с логотипом у Remos — position:fixed, и ниже 992px тема
       убирает её за экран (left:-100%). Наш drawer её не возвращал — меню
       открывалось без логотипа и кнопки закрытия. Едет вместе с меню. */
    .section-menu-left > .box-logo { left:-280px !important; transition:left .28s ease !important; }
    body.mob-menu-open .section-menu-left > .box-logo { left:0 !important; }
    .layout-wrap.full-width .section-content-right { margin-left:0 !important; width:100% !important; }
    .section-content-right { margin-left:0 !important; width:100% !important; min-height:100vh; }
}
@media(max-width:768px) {
    .main-content-wrap { padding:12px !important; }
    .wg-box { padding:14px !important; }
    .hd-table-wrap { overflow-x:auto !important; -webkit-overflow-scrolling:touch; border-radius:12px; }
}

/* ---------- 10. Мобильный card-view таблиц (.my-table) ---------- */
@media(max-width:640px) {
    .my-table, .my-table tbody { display:block !important; }
    .my-table thead { display:none !important; }
    .my-table tbody tr {
        display:block !important;
        border:1px solid #e2e8f0; border-radius:12px;
        margin-bottom:10px; padding:12px; background:#fff;
    }
    .my-table tbody td {
        display:flex !important; align-items:center; gap:8px;
        border:none !important; padding:3px 0 !important; font-size:13px;
        width:100%; box-sizing:border-box;
    }
    .my-table tbody td::before {
        content:attr(data-label); font-size:11px; font-weight:700;
        color:#94a3b8; text-transform:uppercase; letter-spacing:.04em;
        white-space:nowrap; flex:0 0 90px;
    }
    /* Первая значимая колонка — заголовок карточки без метки */
    .my-table tbody td[data-label="Наименование"],
    .my-table tbody td[data-label="Тема"] {
        flex-direction:column; align-items:flex-start;
        padding-bottom:6px !important;
        border-bottom:1px solid #f1f5f9 !important; margin-bottom:3px;
    }
    .my-table tbody td[data-label="Наименование"]::before,
    .my-table tbody td[data-label="Тема"]::before { display:none; }
    .hd-table-wrap { border:none !important; background:transparent; overflow:visible !important; }
}

/* ---------- 11. Справочные таблицы (inline-edit) ---------- */
@media(max-width:640px) {
    .ref-table, .ref-table tbody { display:block !important; }
    .ref-table thead { display:none !important; }
    .ref-table tbody tr {
        display:block !important;
        border:1px solid #e2e8f0; border-radius:12px;
        margin-bottom:10px; padding:12px; background:#fff;
    }
    .ref-table tbody td { display:block !important; border:none !important; padding:4px 0 !important; width:100%; box-sizing:border-box; }
    .ref-table tbody td:first-child { display:flex !important; align-items:center; gap:8px; }
    .ref-table tbody td:first-child::before { content:"№"; font-size:11px; font-weight:700; color:#94a3b8; text-transform:uppercase; }
    .ref-input { width:100% !important; box-sizing:border-box; }
    .ref-table tbody td:last-child > div { display:flex !important; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid #f1f5f9; }
    .ref-icon-btn { flex:1 !important; width:auto !important; max-width:none !important; height:36px !important; }
    .ref-add-form { flex-direction:column !important; }
    .ref-add-form input, .ref-add-form select, .ref-add-form button, .ref-add-form a {
        width:100% !important; max-width:100% !important; flex:none !important; box-sizing:border-box;
    }
}

/* ---------- 12. Фильтры (hd-filters) ---------- */
@media(max-width:640px) {
    .hd-filters { flex-direction:column !important; flex-wrap:wrap !important; overflow-x:visible !important; }
    .hd-filters > * { width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box; }
    .hd-filters button:not([data-scan-target]),
    .hd-filters a { width:100% !important; text-align:center; margin-left:0 !important; }
}

/* ---------- 13. Заголовок страницы на мобильном ---------- */
@media(max-width:640px) {
    .page-header { flex-direction:column !important; align-items:stretch !important; }
    .page-header > div { flex-direction:column !important; }
    .page-header a { width:100% !important; text-align:center; box-sizing:border-box; }
}

/* ---------- 14. Двойной HTML (desktop-table / mobile-cards) ---------- */
.mobile-cards { display:none; }
@media(max-width:640px) {
    .desktop-table-wrap { display:none !important; }
    .mobile-cards { display:block !important; }
}

/* ---------- 15. Минималистичный подвал (как в УКСИВТ.ID) ---------- */
.hd-minifooter {
    display:flex; align-items:center; justify-content:center; gap:10px;
    flex-wrap:wrap; text-align:center;
    padding:20px 24px 24px; font-size:12.5px; color:#94a3b8; letter-spacing:.01em;
}
.hd-minifooter a { color:#94a3b8; transition:color .15s ease; }
.hd-minifooter a:hover { color:#1e293b; text-decoration:none; }
.hd-minifooter-sep { opacity:.45; }

/* ---------- 16. Список-строки (list-row) ----------
   Компактный список «заголовок + подпись слева, действие справа».
   Для результатов поиска, подборок, выбора из справочника и т.п.
   Blade-обёртка — <x-list-row title="…" sub="…"><x-slot:action>…</x-slot></x-list-row>. */
.list-group-title {
    font-size:11px; font-weight:700; color:var(--color-muted);
    text-transform:uppercase; letter-spacing:.04em;
    margin:16px 0 2px;
}
.list-group-title:first-child { margin-top:0; }
.list-row {
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:12px 4px;
    border-bottom:1px solid var(--color-divider);
}
.list-row:last-child { border-bottom:none; }
.list-row__main  { min-width:0; flex:1 1 auto; }
.list-row__title {
    font-size:14.5px; font-weight:600; color:var(--color-title); line-height:1.35;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.list-row__sub {
    font-size:12.5px; color:var(--color-muted); margin-top:3px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.list-row__action { flex:0 0 auto; }
.list-note  { color:var(--color-muted); padding:12px 4px; }
.list-note.is-error { color:var(--color-red); }

/* ---------- 17. Страницы-витрины (дизайн ИС «Студенты») ----------
   Единый язык страниц: цветная шапка-«герой» с цифрами, плитки показателей,
   KPI с иконкой, сегмент-вкладки, поиск, секции, сетка карточек, панели,
   строки списка с «аватаркой», метки и полоски. Префикс ui-, чтобы не спорить
   со стилями конкретных страниц. Blade-обёртки: <x-hero>, <x-kpi>, <x-tile>.
   Подробно — STYLE_GUIDE.md, раздел 19. */

/* Шапка-«герой»: градиент, заголовок, подпись, пилюли, действия, цифры справа. */
.ui-hero { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
    padding:24px 28px; border-radius:18px; margin-bottom:14px;
    background:linear-gradient(120deg,#1d4ed8 0%,#3b82f6 60%,#60a5fa 100%); }
/* Remos красит текст тёмным — на цветной шапке белый задаём явно. */
.ui-hero, .ui-hero * { color:#fff; }
.ui-hero--dark   { background:linear-gradient(120deg,#1e3a8a 0%,#2563eb 55%,#60a5fa 100%); }
.ui-hero--violet { background:linear-gradient(120deg,#5b21b6,#8b5cf6); }
.ui-hero--teal   { background:linear-gradient(120deg,#0f766e 0%,#14b8a6 60%,#5eead4 100%); }
.ui-hero--slate  { background:linear-gradient(120deg,#334155 0%,#475569 60%,#64748b 100%); }
.ui-hero__main { min-width:0; flex:1 1 360px; }
.ui-hero__label { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }
.ui-hero h1, .ui-hero__title { font-size:26px; font-weight:800; line-height:1.15; margin:2px 0 6px !important; }
.ui-hero__title--big { font-size:34px; }
.ui-hero p, .ui-hero__sub { margin:0; font-size:14px; line-height:1.45; opacity:.92; max-width:720px; }
.ui-hero__chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.ui-hero__chips > * { font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:99px; background:rgba(255,255,255,.18); text-decoration:none; }
.ui-hero__chips a:hover { background:rgba(255,255,255,.3); }
.ui-hero__actions { display:flex; gap:8px; flex-wrap:wrap; }
.ui-hero__stats { display:flex; gap:26px; flex-wrap:wrap; }
.ui-hero__stats > div { display:flex; flex-direction:column; }
.ui-hero__stats b { font-size:26px; font-weight:800; line-height:1.1; }
.ui-hero__stats small { font-size:15px; opacity:.8; }
.ui-hero__stats span { font-size:12.5px; opacity:.85; }
/* Кнопки на шапке: белая и полупрозрачная. */
.ui-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:10px; border:0; cursor:pointer;
    background:#fff; font-size:13.5px; font-weight:700; text-decoration:none; }
.ui-hero .ui-btn { color:#1e293b !important; }
.ui-hero .ui-btn * { color:#1e293b !important; }
.ui-btn:hover { color:#1d4ed8 !important; }
.ui-btn--ghost, .ui-hero .ui-btn--ghost, .ui-hero .ui-btn--ghost * { background:rgba(255,255,255,.18); color:#fff !important; }
.ui-btn--ghost:hover { background:rgba(255,255,255,.3); }

/* Шапка-карточка: цветная полоса сверху, плитки показателей снизу. */
.ui-head { background:#fff; border-radius:18px; box-shadow:0 1px 3px rgba(15,23,42,.06); overflow:hidden; margin-bottom:14px; }
.ui-head > .ui-hero { border-radius:0; margin:0; }

/* Плитки показателей (строкой, с разделителями) — внутри .ui-head или .ui-panel. */
.ui-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.ui-tile { padding:14px 18px; border-right:1px solid var(--color-divider); border-top:1px solid var(--color-divider);
    display:flex; flex-direction:column; gap:4px; text-decoration:none; min-width:0; }
.ui-tile > span { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--color-muted); }
.ui-tile > b { font-size:22px; font-weight:800; color:#0f172a; line-height:1.1; }
.ui-tile > b small { font-size:13px; font-weight:600; color:var(--color-muted); }
.ui-tile > em { font-style:normal; font-size:12.5px; color:#64748b; line-height:1.35; }
a.ui-tile:hover { background:var(--color-bg); }
.ui-tile.is-ok b { color:var(--color-green); } .ui-tile.is-warn b { color:var(--color-orange); } .ui-tile.is-bad b { color:var(--color-red); }
.ui-tile.is-blue b { color:var(--color-blue); }
.ui-tile--wide { grid-column:span 2; }

/* KPI: плитка с цветной иконкой (дашборды). */
.ui-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:14px; }
.ui-kpi { display:flex; align-items:center; gap:12px; background:#fff; border-radius:14px; padding:14px 16px;
    box-shadow:0 1px 3px rgba(15,23,42,.06); min-width:0; text-decoration:none;
    --k:#1d4ed8; --k-bg:#dbeafe; }
.ui-kpi > i { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:18px; flex:none; background:var(--k-bg); color:var(--k); }
.ui-kpi b { display:block; font-size:22px; font-weight:800; color:#0f172a; line-height:1.1; }
.ui-kpi b small { font-size:13px; font-weight:600; color:var(--color-muted); }
.ui-kpi span { font-size:12.5px; color:#64748b; line-height:1.3; }
a.ui-kpi:hover { box-shadow:0 8px 20px rgba(15,23,42,.08); }
.ui-kpi--blue { --k:#1d4ed8; --k-bg:#dbeafe; } .ui-kpi--green { --k:#15803d; --k-bg:#dcfce7; } .ui-kpi--amber { --k:#b45309; --k-bg:#fef3c7; }
.ui-kpi--red { --k:#b91c1c; --k-bg:#fee2e2; } .ui-kpi--teal { --k:#0f766e; --k-bg:#ccfbf1; } .ui-kpi--purple { --k:#7e22ce; --k-bg:#f3e8ff; }
.ui-kpi--orange { --k:#c2410c; --k-bg:#ffedd5; } .ui-kpi--gray { --k:#475569; --k-bg:#f1f5f9; }

/* Сегмент-вкладки: белая капсула, активная — синяя; число — в пилюле. */
.ui-seg { display:inline-flex; max-width:100%; overflow-x:auto; gap:2px; background:#fff; border-radius:12px; padding:4px;
    box-shadow:0 1px 3px rgba(15,23,42,.06); scrollbar-width:none; }
.ui-seg::-webkit-scrollbar { display:none; }
.ui-seg--block { display:flex; margin-bottom:14px; }
.ui-seg > a, .ui-seg > button { padding:8px 14px; border-radius:9px; font-size:14px; font-weight:600; color:#64748b; text-decoration:none;
    display:inline-flex; gap:6px; align-items:center; white-space:nowrap; border:0; background:transparent; cursor:pointer; }
.ui-seg > a:hover { color:#1e293b; background:var(--color-bg); }
.ui-seg > a span, .ui-seg > button span { font-size:11.5px; padding:1px 7px; border-radius:99px; background:#f1f5f9; color:inherit; }
.ui-seg > .is-active, .ui-seg > .is-active:hover { background:#1d4ed8; color:#fff; }
.ui-seg > .is-active span { background:rgba(255,255,255,.2); }

/* Панель инструментов: вкладки + поиск + фильтры в одну строку. */
.ui-bar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.ui-search { flex:1; min-width:220px; max-width:440px; position:relative; }
.ui-search i { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#64748b; font-size:16px; pointer-events:none; z-index:1; }
/* Remos задаёт полям свой фон и отступы — перекрываем, иначе поле сливается с фоном. */
.ui-search input[type=text], .ui-search input[type=search] { width:100%; height:44px; padding:0 14px 0 42px !important;
    border-radius:12px !important; background:#fff !important; border:1px solid #cbd5e1 !important;
    box-shadow:0 1px 3px rgba(15,23,42,.06); font-size:14px; color:#0f172a; }
.ui-search input:focus { border-color:#1d4ed8 !important; box-shadow:0 0 0 3px rgba(29,78,216,.15); outline:none; }
/* Remos растягивает поля на всю ширину — в строке фильтров они по содержимому. */
.ui-bar select { width:auto !important; flex:0 1 auto; max-width:280px; height:44px; border-radius:12px !important; background:#fff;
    border:1px solid #cbd5e1 !important; padding:0 12px !important; font-size:14px; min-width:150px; }
/* Числовые поля и даты в строке фильтров — как select: белые, 44px, по содержимому. */
.ui-bar input[type=number], .ui-bar input[type=date], .ui-bar input[type=month] { width:auto !important; flex:0 1 auto; min-width:150px; max-width:280px;
    height:44px; border-radius:12px !important; background:#fff !important; border:1px solid #cbd5e1 !important; padding:0 12px !important; font-size:14px; color:#0f172a; }
.ui-bar input[type=number]:focus, .ui-bar input[type=date]:focus, .ui-bar input[type=month]:focus, .ui-bar select:focus { border-color:#1d4ed8 !important; box-shadow:0 0 0 3px rgba(29,78,216,.15); outline:none; }
.ui-bar .tf-button { height:44px; }
/* Кнопки Remos: компактная (small), опасная (style-3) и заблокированная — в самом Remos их нет. */
.tf-button.small { height:38px; padding:8px 16px; font-size:13px; font-weight:600; border-radius:10px; gap:6px; }
.tf-button.small i { font-size:15px; }
.ui-bar .tf-button.small { height:44px; }
.tf-button.style-3 { color:#dc2626; background:#fff; border-color:#fecaca; }
.tf-button.style-3:hover { color:#fff; background:#dc2626; border-color:#dc2626; }
.tf-button.style-3:hover span, .tf-button.style-3:hover i { color:#fff !important; }
.tf-button[disabled], .tf-button.is-disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }

/* Заголовок секции: мелкий капс (как в дашборде) или обычный с числом. */
.ui-section { font-size:13px !important; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:var(--color-muted) !important; margin:22px 0 10px !important; display:flex; gap:8px; align-items:center; }
.ui-section:first-child { margin-top:4px !important; }
.ui-section span, .ui-count { font-size:12px; font-weight:700; letter-spacing:0; text-transform:none; color:#64748b; background:#e2e8f0;
    border-radius:99px; padding:1px 8px; }

/* Заголовок группы карточек обычным шрифтом («1 курс» с числом). */
.ui-section--plain { font-size:14px !important; font-weight:700; letter-spacing:0; text-transform:none; color:#0f172a !important; margin:4px 0 10px !important; }
.ui-muted { color:var(--color-muted); font-size:13px; }
/* Пилюля-ссылка на шапке («Обновить», «Все отчёты»). */
.ui-hero__link { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:12.5px; padding:4px 12px; border-radius:999px;
    background:rgba(255,255,255,.18); text-decoration:none; }
.ui-hero__link:hover { background:rgba(255,255,255,.3); }

/* Панель — белая карточка раздела. */
.ui-panel { background:#fff; border-radius:16px; padding:18px 20px; box-shadow:0 1px 3px rgba(15,23,42,.06); margin-bottom:14px; min-width:0; }
.ui-panel--flush { padding:6px; }
.ui-panel__head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.ui-panel__head h3, .ui-panel__head h5, .ui-panel__head h6 { font-size:16px !important; font-weight:700; color:#0f172a !important; margin:0 !important; }
.ui-panel__head h6 { font-size:15px !important; }
.ui-panel__head a { font-size:13px; color:#1d4ed8; }
.ui-panel__head span, .ui-panel__head em { font-size:12.5px; color:var(--color-muted); font-style:normal; }
.ui-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ui-cols > .ui-panel { margin-bottom:0; }
@media (max-width:1100px) { .ui-cols { grid-template-columns:1fr; } }

/* Панель-раздел с цветной полосой сверху и иконкой в заголовке (страницы-хабы:
   «Отчёты» по ролям). Цвет — модификатором, плитки внутри — .ui-links. */
.ui-panel--accent { border-top:4px solid var(--c); --c:#2563eb; --bg:#eff6ff; }
.ui-panel--accent.is-green { --c:#16a34a; --bg:#f0fdf4; } .ui-panel--accent.is-purple { --c:#7c3aed; --bg:#f5f3ff; }
.ui-panel--accent.is-amber { --c:#d97706; --bg:#fffbeb; } .ui-panel--accent.is-teal { --c:#0f766e; --bg:#f0fdfa; }
.ui-panel--accent.is-red { --c:#dc2626; --bg:#fef2f2; }
.ui-panel__icon { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.ui-panel__icon > i { width:40px; height:40px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:18px; background:var(--bg, #eff6ff); color:var(--c, #2563eb); }
.ui-panel__icon > div { display:flex; flex-direction:column; gap:2px; }
.ui-panel__icon h2, .ui-panel__icon h3 { font-size:18px !important; font-weight:800; color:#0f172a !important; margin:0 !important; line-height:1.25 !important; }
.ui-panel__icon span { font-size:13px; color:#64748b; }
/* Плитки-ссылки хаба: иконка, название, пояснение. */
.ui-links { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.ui-link { display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:14px; border:1px solid var(--color-border); background:#fff;
    transition:.15s; min-height:120px; text-decoration:none; }
.ui-link:hover { border-color:var(--c, #2563eb); background:var(--bg, #eff6ff); transform:translateY(-1px); }
.ui-link > i { font-size:20px; color:var(--c, #2563eb); }
.ui-link > b { font-size:15px; color:#0f172a; }
.ui-link > span { font-size:12.5px; color:#64748b; line-height:1.4; }

/* Доска дашборда: 4 колонки (2 на среднем экране, 1 на телефоне); панели шириной
   в колонку, в две (.ui-span-2) или во всю строку (.ui-span-full). */
.ui-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.ui-board > .ui-panel { margin-bottom:0; }
.ui-span-2 { grid-column:span 2; } .ui-span-full { grid-column:1 / -1; }
@media (max-width:1200px) { .ui-board { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .ui-board { grid-template-columns:1fr; } .ui-board > * { grid-column:1 / -1; } }

/* Сетка карточек-ссылок с подъёмом при наведении. */
.ui-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.ui-card { display:flex; flex-direction:column; gap:6px; padding:14px 16px; background:#fff; border-radius:14px; text-decoration:none;
    color:inherit; box-shadow:0 1px 3px rgba(15,23,42,.06); border:1px solid transparent; transition:transform .12s, box-shadow .12s, border-color .12s; min-width:0; }
a.ui-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,23,42,.08); border-color:#bfdbfe; }
.ui-card.is-muted { background:#fbfcfe; }
.ui-card.is-warn { border-color:#fed7aa; }
.ui-card__top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.ui-card__title { font-size:16px; font-weight:800; color:#0f172a; line-height:1.25; }
.ui-card__sub { font-size:13px; color:#475569; line-height:1.35; }
.ui-card__sub em { font-style:normal; font-weight:700; color:#1d4ed8; }
.ui-card__title--big { font-size:18px; }
/* Строка «ответственный» в карточке (куратор группы, заведующий). */
.ui-card__person { display:flex; align-items:center; gap:5px; font-size:12.5px; color:#0e7490; }
.ui-card__foot { display:flex; gap:12px; flex-wrap:wrap; font-size:12.5px; color:#64748b; margin-top:auto; padding-top:4px; }
.ui-card__foot i { margin-right:3px; }

/* Строки списка: номер, «аватарка» с инициалами, кто, детали. */
.ui-list { display:flex; flex-direction:column; }
.ui-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; text-decoration:none; color:inherit; min-width:0; }
a.ui-row:hover { background:var(--color-bg); }
.ui-row + .ui-row { border-top:1px solid #f5f7fa; }
.ui-row.is-muted { opacity:.55; }
.ui-row__num { width:26px; flex:none; color:#cbd5e1; font-size:12.5px; text-align:right; font-variant-numeric:tabular-nums; }
.ui-row__main { flex:1; min-width:0; display:flex; flex-direction:column; }
.ui-row__main b { font-size:14.5px; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-row__main em { font-style:normal; font-size:12.5px; color:var(--color-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-row__side { flex:none; display:flex; gap:8px; align-items:center; font-size:13px; color:#334155; }
.ui-ava { width:40px; height:40px; flex:none; border-radius:12px; background:#e0edff; color:#1d4ed8; font-weight:800; font-size:14px;
    display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.ui-ava img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ui-ava--teal { background:#0e7490; color:#fff; }

/* Персона-карточка (куратор, ответственный): бирюзовая полоса с аватаркой. */
.ui-person { display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:14px;
    background:linear-gradient(120deg,#ecfeff 0%,#f0fdfa 100%); border:1px solid #a5f3fc; }
.ui-person.is-empty { background:#f8fafc; border-color:#e2e8f0; }
.ui-person__main { flex:1; min-width:0; }
.ui-person__label { display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#0e7490; }
.ui-person.is-empty .ui-person__label { color:var(--color-muted); }
.ui-person__main b { font-size:15.5px; color:#0f172a; }
.ui-person__meta { display:flex; flex-wrap:wrap; gap:12px; margin-top:3px; font-size:12.5px; color:#0e7490; }
.ui-head > .ui-person { margin:12px 18px; }

/* Метки и пилюли. */
.ui-tag { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:6px;
    background:#f1f5f9; color:#64748b; white-space:nowrap; line-height:1.5; }
.ui-tag--blue { background:#e0edff; color:#1d4ed8; } .ui-tag--green { background:#dcfce7; color:#15803d; }
.ui-tag--amber { background:#fef3c7; color:#b45309; } .ui-tag--red { background:#fee2e2; color:#b91c1c; }
.ui-tag--violet { background:#ede9fe; color:#6d28d9; } .ui-tag--teal { background:#ccfbf1; color:#0f766e; }

/* Полоска доли (заполненность, бюджет/платно, прохождение КТП). */
.ui-split { height:8px; border-radius:99px; background:#e2e8f0; overflow:hidden; margin:6px 0 2px; min-width:60px; }
.ui-split > i { display:block; height:100%; background:#2563eb; border-radius:99px; }
.ui-split--green > i { background:#16a34a; } .ui-split--amber > i { background:#f59e0b; } .ui-split--red > i { background:#dc2626; }

/* Пусто / предупреждение. */
.ui-empty { color:var(--color-muted); font-size:14px; padding:28px 12px; text-align:center; }
.ui-empty b { display:block; color:#475569; font-size:15px; margin-bottom:4px; }
.ui-note { display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.45;
    background:#eff6ff; color:#1e40af; margin-bottom:14px; }
.ui-note--warn { background:#fff7ed; color:#9a3412; } .ui-note--bad { background:#fef2f2; color:#b91c1c; }
.ui-note--ok { background:#f0fdf4; color:#166534; }

.ui-back { display:inline-flex; gap:6px; align-items:center; color:var(--color-muted); font-size:13px; margin-bottom:12px; text-decoration:none; }
.ui-back:hover { color:#1d4ed8; }

@media (max-width:640px) {
    .ui-hero { padding:20px; }
    .ui-hero h1, .ui-hero__title { font-size:22px; }
    .ui-hero__title--big { font-size:26px; }
    .ui-hero__stats { gap:16px; }
    .ui-hero__stats b { font-size:20px; }
    .ui-hero__actions { width:100%; }
    .ui-hero__actions > * { flex:1; justify-content:center; }
    .ui-tiles { grid-template-columns:1fr 1fr; }
    .ui-tile { padding:12px 14px; }
    .ui-tile > b { font-size:19px; }
    .ui-tile--wide { grid-column:1 / -1; }
    .ui-tiles > :last-child:nth-child(odd) { grid-column:1 / -1; }
    .ui-kpis { grid-template-columns:1fr 1fr; gap:10px; }
    .ui-kpi { padding:12px; gap:10px; }
    .ui-kpi > i { width:34px; height:34px; font-size:16px; }
    .ui-kpi b { font-size:19px; }
    .ui-panel { padding:14px; }
    .ui-search { min-width:100%; max-width:none; }
    .ui-bar select { width:100% !important; max-width:none; flex:1 1 100%; }
    .ui-person { flex-wrap:wrap; }
}

/* ===== Профиль в шапке на мобильных =====
   Remos (css/style.css) ниже 992px прячет .header-grid > .user — вместе с ним
   пропадали профиль и кнопка «Выйти». Возвращаем: аватар всегда виден,
   ФИО и роль — только если хватает места. */
@media (max-width:991px) {
    .layout-wrap .section-content-right .header-dashboard .wrap .header-grid > .popup-wrap.user { display:block !important; }
    .header-dashboard .wrap .header-grid { margin-left:auto; flex-shrink:0; }
    .header-dashboard .wrap .header-left { min-width:0; }
}
@media (max-width:575px) {
    .header-dashboard .header-user .flex-column { display:none !important; }
    .header-dashboard .popup-wrap.user .dropdown-menu { min-width:200px; }
}

/* ===== Заголовки разделов меню =====
   Все разделы сайдбара лежат в одном .center-item, поэтому отступ Remos между
   секциями (margin-bottom у .center-item) не срабатывает, а инлайн-отступы у ИС
   разные (0/8/16px) — заголовок прилипал к пункту над ним. Единый ритм:
   первый заголовок — 8px сверху, каждый следующий — 20px. */
.section-menu-left .center-item > .center-heading { margin-top:20px !important; }
.section-menu-left .center-item > .center-heading:first-child { margin-top:8px !important; }

/* ===== Профиль в шапке: длинное ФИО и роль =====
   У body overflow-x:hidden — переполнение шапки срезалось молча, и длинная роль
   (например, «Заместитель директора по …») уходила за край экрана. Профиль
   сжимается последним, текст — в одну строку с многоточием; полная роль —
   в подсказке (title) из partials/user-menu. Перенесено из library-app. */
.header-dashboard .wrap .header-left { width:auto; flex:1 100 auto; min-width:0; }
.header-dashboard .wrap .header-left h6 { min-width:0; }
.header-dashboard .header-grid { flex:0 1 auto; min-width:0; }
.popup-wrap.user.type-header .dropdown-toggle { display:flex !important; align-items:center; max-width:none !important; }
.popup-wrap.user.type-header .header-user { width:max-content; max-width:100%; }
.popup-wrap.user.type-header .flex-column { min-width:0; }
.popup-wrap.user.type-header .body-title,
.popup-wrap.user.type-header .text-tiny { display:block; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:1200px) {
    .popup-wrap.user.type-header .body-title,
    .popup-wrap.user.type-header .text-tiny { max-width:240px; }
}
@media (max-width:767px) {
    .popup-wrap.user.type-header .body-title,
    .popup-wrap.user.type-header .text-tiny { max-width:150px; }
}

/* ===== Индикатор перехода между страницами =====
   Вместо белой шторки Remos (#preload, висела ~1,6 с на каждом переходе).
   Логика — remos/js/uksivt-progress.js: полоска видна, только если страница
   грузится дольше 250 мс; быстро «набегает» до 90% и ждёт ответа. */
#uksivt-progress {
    position:fixed; top:0; left:0; z-index:100000; height:3px; width:0;
    background:var(--Main, #2377FC); box-shadow:0 0 8px rgba(35,119,252,.45);
    border-radius:0 3px 3px 0; opacity:0; pointer-events:none;
    transition:opacity .2s ease;
}
#uksivt-progress.is-active { width:90%; opacity:1; transition:width 8s cubic-bezier(.08,.8,.2,1), opacity .2s ease; }
#preload { display:none !important; }   /* на случай старой разметки */