/* =============================================================================
 * Модуль «Государственные функции» (Задача 1) — стили по макету Figma (ЦПЦП).
 * Скоупится под .gf, чтобы не конфликтовать с остальным порталом.
 * ============================================================================= */
.gf {
    --gf-blue: #2563eb;
    --gf-blue-dark: #2563eb;
    --gf-blue-light: #eff6ff;
    --gf-navy: #0f172a;
    --gf-slate: #475569;
    --gf-muted: #94a3b8;
    --gf-border: #e2e8f0;
    --gf-surface: #f8fafc;
    --gf-green: #22c55e;
    --gf-green-bg: #dcfce7;
    --gf-green-tx: #15803d;
    --gf-amber: #eab308;
    --gf-amber-bg: #fef9c3;
    --gf-amber-tx: #a16207;
    --gf-red: #ef4444;
    --gf-red-bg: #fee2e2;
    --gf-red-tx: #b91c1c;
    --gf-radius: 12px;
    --gf-radius-sm: 8px;
    color: var(--gf-navy);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Модуль живёт в стандартном main > .container: место под сайдбар и карточку даёт обвязка портала. */

/* Без новой обвязки (HOME_REDESIGN выключен) карточку рисуем сами. */
body:not(.hx-chrome) .container.gf {
    background: #fff;
    border: 1px solid var(--gf-border);
    border-radius: var(--gf-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    padding: 24px 28px;
}

.gf__title { font-size: 22px; font-weight: 700; margin: 0 0 18px; color: var(--gf-navy); }

/* Вкладки */
.gf__tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--gf-border); margin-bottom: 22px; }
.gf__tab {
    padding: 10px 2px; font-size: 15px; font-weight: 500; color: var(--gf-slate);
    text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.gf__tab:hover { color: var(--gf-blue-dark); }
.gf__tab--active { color: var(--gf-blue-dark); border-bottom-color: var(--gf-blue-dark); font-weight: 600; }

/* Фильтры */
.gf__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.gf__filters .gf__filters-export { margin-left: auto; }
.gf__search { display: flex; gap: 8px; }
.gf__search input { width: 320px; }
.gf__field, .gf__filters input, .gf__filters select {
    height: 40px; border: 1px solid var(--gf-border); border-radius: var(--gf-radius-sm);
    padding: 0 12px; font-size: 14px; color: var(--gf-navy); background: #fff; min-width: 150px;
}
.gf__field:focus, .gf__filters input:focus, .gf__filters select:focus {
    outline: none; border-color: var(--gf-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.gf__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 0 18px; }

/* Поисковые фильтры на базе select2 — приводим к виду .gf__field */
.gf__filters .select2-container { flex: 1 1 220px; min-width: 200px; max-width: 480px; }
.gf__filters .select2-container--default .select2-selection--single {
    height: 40px; border: 1px solid var(--gf-border); border-radius: var(--gf-radius-sm);
    background: #fff; display: flex; align-items: center; position: relative;
    /* Справа место под крестик очистки и стрелку (оба позиционируются абсолютно). */
    padding: 0 52px 0 12px;
}
.gf__filters .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal; color: var(--gf-navy); font-size: 14px; padding: 0; flex: 1 1 auto;
    /* Длинные значения (АБП и т.п.) — одной строкой с многоточием, полное значение в title. */
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gf__filters .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--gf-muted); }
/* Кнопка очистки в select2 4.1 — это <button>, на него действует глобальный
   style.css (.btn, button: min-width 238px, padding 15px, font-size 20px, синий фон).
   Полный сброс + absolute: крестик не участвует в раскладке поля и не ломает её. */
.gf__filters .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute; top: 50%; right: 28px; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; min-width: 0; padding: 0; margin: 0; border: 0;
    border-radius: 50%; background: transparent; float: none;
    color: var(--gf-muted); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
}
.gf__filters .select2-container--default .select2-selection--single .select2-selection__clear:hover,
.gf__filters .select2-container--default .select2-selection--single .select2-selection__clear:focus,
.gf__filters .select2-container--default .select2-selection--single .select2-selection__clear:active {
    background: var(--gf-surface); color: var(--gf-navy);
}
.gf__filters .select2-container--default .select2-selection--single .select2-selection__clear > span {
    display: block; line-height: 1;
}
.gf__filters .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 8px; }
.gf__filters .select2-container--default.select2-container--open .select2-selection--single,
.gf__filters .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--gf-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.gf__filters .select2-dropdown {
    border: 1px solid var(--gf-border); border-radius: var(--gf-radius-sm);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12); overflow: hidden; z-index: 20;
}
.gf__filters .select2-search--dropdown { padding: 8px; }
.gf__filters .select2-search--dropdown .select2-search__field {
    height: 36px; border: 1px solid var(--gf-border); border-radius: var(--gf-radius-sm);
    padding: 0 10px; font-size: 14px; outline: none;
}
.gf__filters .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--gf-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.gf__filters .select2-results__option { font-size: 14px; color: var(--gf-navy); padding: 8px 12px; }
.gf__filters .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--gf-blue); color: #fff; }
.gf__filters .select2-container--default .select2-results__option[aria-selected=true] { background: var(--gf-blue-light); color: var(--gf-navy); }

/* Кнопки */
.gf__btn {
    height: 40px; min-width: auto; padding: 0 20px; border-radius: var(--gf-radius-sm); font-size: 14px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    border: 1px solid transparent; text-decoration: none; gap: 8px;
}
.gf__btn--primary { background: var(--gf-blue); color: #fff; }
.gf__btn--primary:hover { background: var(--gf-blue-dark); color: #fff; }
.gf__btn--outline { background: #fff; color: var(--gf-navy); border-color: var(--gf-border); }
.gf__btn--outline:hover { border-color: var(--gf-blue); color: var(--gf-blue-dark); }
.gf__btn--sm { height: 34px; padding: 0 12px; font-size: 13px; }

/* Таблица */
.gf__table-wrap { overflow-x: auto; border: 1px solid var(--gf-border); border-radius: var(--gf-radius-sm); }
.gf__table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 1000px; }
.gf__table th {
    text-align: left; padding: 14px 14px; color: var(--gf-slate); font-weight: 600;
    border-bottom: 1px solid var(--gf-border); white-space: nowrap; background: #fff;
}
.gf__table td { padding: 14px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.gf__table tr:last-child td { border-bottom: none; }
.gf__table tr:hover td { background: var(--gf-surface); }
.gf__id { color: var(--gf-blue-dark); font-weight: 600; text-decoration: none; }
.gf__id:hover { text-decoration: underline; }

/* Бейджи степени автоматизации */
.gf__badge {
    display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.gf__badge--high { background: var(--gf-green-bg); color: var(--gf-green-tx); }
.gf__badge--medium { background: var(--gf-amber-bg); color: var(--gf-amber-tx); }
.gf__badge--low { background: var(--gf-red-bg); color: var(--gf-red-tx); }
.gf__badge--muted { background: #f1f5f9; color: var(--gf-muted); }

/* Диаграмма — уровень оцифровки */
.gf__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; }
@media (max-width: 1100px) { .gf__grid { grid-template-columns: 1fr; } }
.gf__panel { border: 1px solid var(--gf-border); border-radius: var(--gf-radius); padding: 20px 22px; }
.gf__panel-title { font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.gf__seg { display: inline-flex; border: 1px solid var(--gf-border); border-radius: var(--gf-radius-sm); overflow: hidden; }
.gf__seg a { padding: 7px 16px; font-size: 13px; color: var(--gf-slate); text-decoration: none; background: #fff; }
.gf__seg a.active { background: var(--gf-blue-light); color: var(--gf-blue-dark); font-weight: 600; }

.gf__bars { max-height: 520px; overflow-y: auto; padding-right: 6px; }
.gf__bar-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f4f6f9; }
.gf__bar-row:last-child { border-bottom: none; }
.gf__bar-rank { width: 26px; flex-shrink: 0; text-align: right; font-size: 13px; color: var(--gf-muted); font-weight: 600; }
.gf__bar-name { width: 230px; font-size: 13px; color: var(--gf-navy); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf__bar-track { flex: 1; min-width: 80px; height: 10px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.gf__bar-fill { height: 100%; border-radius: 999px; }
.gf__bar-fill--high { background: var(--gf-green); }
.gf__bar-fill--medium { background: var(--gf-amber); }
.gf__bar-fill--low { background: var(--gf-red); }
.gf__bar-pct { width: 48px; text-align: right; font-size: 14px; font-weight: 600; }

/* KPI плитки аналитики */
.gf__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
@media (max-width: 760px) { .gf__kpis { grid-template-columns: 1fr; } }
.gf__kpi { border: 1px solid var(--gf-border); border-radius: var(--gf-radius); padding: 18px 20px; }
.gf__kpi-label { font-size: 13px; color: var(--gf-slate); margin-bottom: 8px; }
.gf__kpi-value { font-size: 30px; font-weight: 700; }

.gf__empty { padding: 48px; text-align: center; color: var(--gf-muted); }
.gf__alert { background: var(--gf-green-bg); color: var(--gf-green-tx); border-radius: var(--gf-radius-sm); padding: 12px 16px; margin-bottom: 16px; }

/* Пагинация (bootstrap-5 разметка) — на случай отсутствия глобального Bootstrap CSS */
.gf .pagination { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; align-items: center; }
.gf .pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--gf-border); border-radius: var(--gf-radius-sm); color: var(--gf-blue-dark); background: #fff; text-decoration: none; font-size: 14px; }
.gf .pagination .page-link:hover { background: var(--gf-blue-light); }
.gf .pagination .active .page-link { background: var(--gf-blue); border-color: var(--gf-blue); color: #fff; }
.gf .pagination .disabled .page-link { color: var(--gf-muted); pointer-events: none; opacity: .6; }
.gf .pagination svg { width: 16px; height: 16px; }

/* Пагинация + счётчик всего записей (вкладка «Список») */
.gf__pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.gf__total { font-size: 14px; color: var(--gf-slate); }
.gf__total strong { color: var(--gf-navy); font-weight: 700; }

/* Таблица «ГО → количество функций» (вкладка «Диаграмма», кликабельная) */
.gf__gov-table { min-width: 0; }
.gf__gov-table tbody tr { cursor: pointer; }
.gf__gov-no { color: var(--gf-muted); font-weight: 600; }
.gf__gov-count { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.gf__gov-row:focus-visible { outline: 2px solid var(--gf-blue); outline-offset: -2px; }
.gf__gov-row--active td { background: var(--gf-blue-light) !important; }
.gf__gov-row--active td:first-child { box-shadow: inset 3px 0 0 var(--gf-blue-dark); }

/* Поиск по ГО + клиентская пагинация таблицы (вкладка «Диаграмма») */
.gf__gov-search { position: relative; margin-bottom: 12px; }
.gf__gov-search .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gf-muted); font-size: 14px; pointer-events: none; }
.gf__gov-search .gf__field { width: 100%; padding-left: 34px; }
.gf__gov-pager { margin-top: 14px; display: flex; justify-content: center; }
.gf__gov-pager .pagination { gap: 4px; }
.gf__gov-pager .page-link { min-width: 34px; height: 34px; font-size: 13px; }

/* Аналитика по видам цифровой зрелости — легенда и подпись среза */
.gf__chart-scope { font-size: 13px; color: var(--gf-slate); margin-bottom: 10px; }
.gf__legend { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.gf__legend-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.gf__legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.gf__legend-name { color: var(--gf-navy); flex: 1; }
.gf__legend-val { color: var(--gf-slate); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Модалка выбора колонок для экспорта */
.gf__modal { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .45); align-items: flex-start; justify-content: center; padding: 60px 16px; }
.gf__modal--open { display: flex; }
.gf__modal-box { background: #fff; border-radius: var(--gf-radius); width: 100%; max-width: 440px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; }
.gf__modal-head { position: relative; display: flex; align-items: center; justify-content: center; padding: 18px 52px; border-bottom: 1px solid var(--gf-border); }
.gf__modal-title { font-size: 17px; font-weight: 700; margin: 0; text-align: center; }
/* Маленький крестик; перебиваем агрессивный глобальный `button` (min-width:238px,
   padding:15px, тёмный фон/ховер). Абсолют — вне flex, заголовок остаётся по центру. */
.gf__modal-close {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; min-width: 0; padding: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 6px;
    font-size: 22px; line-height: 1; color: var(--gf-muted); cursor: pointer;
}
.gf__modal-close:hover { background: var(--gf-surface); color: var(--gf-navy); }
.gf__modal-close:active { background: var(--gf-border); }
.gf__modal-list { max-height: 50vh; overflow-y: auto; padding: 6px 22px 12px; }
.gf__modal-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.gf__modal-item:last-child { border-bottom: none; }
.gf__modal-item input { width: 17px; height: 17px; }
.gf__modal-all { padding: 14px 22px 10px; border-bottom: 1px solid var(--gf-border); }
.gf__modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--gf-border); }


/* ---- Вкладка «Оценка по критерию F»: формула, памятка, подсказки ---- */
/* Блок формулы свёрнут: в строке — название критерия и сама формула, остальное по клику. */
.gf__formula { border: 1px solid var(--gf-border); border-radius: var(--gf-radius); margin-bottom: 22px; background: #fff; }
.gf__formula[open] { background: linear-gradient(180deg, var(--gf-blue-light) 0, #fff 120px); }
.gf__formula-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 12px 16px; cursor: pointer; list-style: none; }
.gf__formula-summary::-webkit-details-marker { display: none; }
.gf__formula-summary:focus-visible { outline: 2px solid var(--gf-blue); outline-offset: 2px; border-radius: var(--gf-radius); }
.gf__formula-summary-title { color: var(--gf-navy); font-size: 14px; font-weight: 700; line-height: 1.35; }
.gf__formula-summary-math { padding: 2px 10px; background: var(--gf-blue-light); border-radius: 999px; color: var(--gf-navy); font: italic 15px/1.4 var(--gf-font, "Inter", system-ui, sans-serif); white-space: nowrap; }
.gf__formula-summary-math sub { font-size: .7em; }
.gf__formula-summary-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--gf-blue-dark); font-size: 13px; font-weight: 600; white-space: nowrap; }
.gf__formula-summary-toggle::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.gf__formula[open] .gf__formula-summary-toggle::after { margin-top: 3px; transform: rotate(-135deg); }
.gf__formula-content { padding: 4px 16px 16px; border-top: 1px dashed var(--gf-border); }
.gf__formula-lead { margin: 12px 0 14px; color: var(--gf-slate); font-size: 13px; line-height: 1.5; max-width: 880px; }
.gf__formula-body { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 20px; align-items: center; }
@media (max-width: 760px) { .gf__formula-body { grid-template-columns: 1fr; } }
.gf__formula-math { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 10px; background: #fff; border: 1px solid var(--gf-border); border-radius: var(--gf-radius-sm); font: italic 26px/1 var(--gf-font, "Inter", system-ui, sans-serif); color: var(--gf-navy); }
.gf__formula-op { font-style: normal; color: var(--gf-slate); }
.gf__formula-var sub { font-size: .55em; }
.gf__frac { display: inline-flex; flex-direction: column; align-items: center; font-size: .8em; }
.gf__frac > :first-child { border-bottom: 2px solid var(--gf-navy); padding: 0 6px 3px; }
.gf__frac > :last-child { padding: 3px 6px 0; }
.gf__formula-legend { margin: 0; display: grid; gap: 4px; }
.gf__formula-legend > div { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: baseline; }
.gf__formula-legend dt { font: italic 700 15px/1.2 var(--gf-font, "Inter", system-ui, sans-serif); color: var(--gf-blue-dark); }
.gf__formula-legend dd { margin: 0; font-size: 13px; line-height: 1.45; }
.gf__formula-example { margin: 14px 0 0; max-width: 880px; padding: 6px 10px; background: #fff; border-left: 3px solid var(--gf-blue); border-radius: 0 6px 6px 0; color: var(--gf-slate); font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }

.gf__kpi-of { font-size: 15px; font-weight: 500; color: var(--gf-muted); }
.gf__score-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gf__score-toolbar .gf__gov-search { margin: 0; flex: 0 1 340px; }
.gf__num-col { text-align: right !important; font-variant-numeric: tabular-nums; }
.gf__score-col { min-width: 150px; }
.gf__score { display: inline-flex; align-items: baseline; gap: 4px; cursor: help; position: relative; }
.gf__score b { font-size: 16px; }
.gf__score-max { color: var(--gf-muted); font-size: 12px; }
.gf__score-track { display: block; height: 6px; margin-top: 6px; min-width: 0; }

/* Подсказка: значок «?» или балл с data-hint, показывается при наведении и фокусе */
.gf__hint { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 4px; border-radius: 50%; background: var(--gf-blue-light); color: var(--gf-blue-dark); font: 700 11px/1 var(--gf-font, "Inter", system-ui, sans-serif); cursor: help; position: relative; vertical-align: 1px; }
.gf__hint--soft { background: #f1f5f9; color: var(--gf-slate); font-style: italic; }
.gf__hint:focus-visible, .gf__score:focus-visible { outline: 2px solid var(--gf-blue); outline-offset: 2px; }
.gf__hint::after, .gf__score::after {
    content: attr(data-gf-hint); position: absolute; z-index: 20; top: calc(100% + 8px); right: -8px;
    width: max-content; max-width: 280px; padding: 8px 10px; border-radius: 8px;
    background: var(--gf-navy); color: #fff; font: 400 12.5px/1.45 Arial, sans-serif; text-align: left; white-space: normal;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18); opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.gf__hint:hover::after, .gf__hint:focus::after, .gf__score:hover::after, .gf__score:focus::after { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .gf__hint::after, .gf__score::after { transition: none; } }
.gf__table-wrap--hints { overflow: visible; }
.gf__table-wrap--hints .gf__score-table { min-width: 0; }
.gf__table-wrap--hints thead th:first-child { border-top-left-radius: var(--gf-radius-sm); }
@media (max-width: 960px) { .gf__table-wrap--hints { overflow-x: auto; } .gf__table-wrap--hints .gf__score-table { min-width: 860px; } }
.gf__nowrap { white-space: nowrap; }