/* ============================================================
   03-COMPONENTS — кнопки, карточки, таблицы, формы,
                   бейджи, пагинация, сообщения, поиск
   ============================================================ */

/* ─────────── КНОПКИ ─────────── */
/*
   Набор из четырёх видов — по значимости действия:
     .btn            — главное действие экрана (синяя заливка)
     .btn-secondary  — второстепенное: Назад, Отмена, Сбросить, Выход
     .btn-ghost      — действие внутри ячейки таблицы (только текст)
     .btn-danger     — удаление, расторжение
   Размер: модификатор .btn-sm
   Выбор из вариантов (год, вкладка, страница) — это НЕ кнопка,
   для него ниже есть .chip
*/

.btn{
    display:inline-block;
    padding:8px 14px;
    background:var(--c-primary);
    color:var(--c-on-dark);
    text-decoration:none;
    border-radius:var(--r-md);
    font-size:var(--fs-sm);
    font-weight:600;
    line-height:1.35;
    border:1px solid transparent;
    cursor:pointer;
    transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover{
    background:var(--c-primary-hover);
    color:var(--c-on-dark);
    text-decoration:none;
}

/* Второстепенное действие — белая с рамкой */
.btn-secondary{
    background:var(--c-surface);
    color:var(--c-ink-2);
    border-color:var(--c-line);
}

.btn-secondary:hover{
    background:var(--c-surface-alt);
    border-color:var(--c-ink-3);
    color:var(--c-ink);
}

/* Действие внутри таблицы — не раздувает строку */
.btn-ghost{
    background:transparent;
    color:var(--c-primary);
    border-color:transparent;
    padding:3px 8px;
    font-weight:500;
}

.btn-ghost:hover{
    background:var(--c-primary-soft);
    color:var(--c-primary-hover);
}

.btn-ghost-danger{
    background:transparent;
    color:var(--c-danger);
    border-color:transparent;
    padding:3px 8px;
    font-weight:500;
}

.btn-ghost-danger:hover{
    background:var(--c-danger-bg);
    color:var(--c-danger-hover);
}

.btn-danger{
    background:var(--c-danger);
    color:var(--c-on-dark);
}

.btn-danger:hover{
    background:var(--c-danger-hover);
}

/* Размеры */
.btn-sm,
.btn-compact,
.btn-icon-sm,
.btn-icon-sm-wide{
    padding:4px 10px;
    font-size:var(--fs-xs);
}

.btn:disabled,
.btn[disabled]{
    opacity:0.5;
    cursor:not-allowed;
}

/* ─────────── ПЕРЕКЛЮЧАТЕЛИ (выбор из вариантов) ─────────── */
/*
   Год исполнения, вкладки карточки, номера страниц, «на странице».
   Выбранный вариант выделен заливкой, невыбранные — спокойные.
*/

.chip{
    display:inline-block;
    padding:6px 12px;
    background:var(--c-surface);
    color:var(--c-ink-2);
    border:1px solid var(--c-line);
    border-radius:var(--r-pill);
    font-size:var(--fs-sm);
    font-weight:500;
    line-height:1.35;
    text-decoration:none;
    cursor:pointer;
    transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover{
    background:var(--c-primary-soft);
    border-color:var(--c-info-line);
    color:var(--c-primary);
    text-decoration:none;
}

.chip--active,
.chip--active:hover{
    background:var(--c-primary);
    border-color:var(--c-primary);
    color:var(--c-on-dark);
    font-weight:600;
}

/* Кнопки перехода по страницам: « ‹ › » */
.pager-btn{
    display:inline-block;
    min-width:30px;
    padding:5px 9px;
    text-align:center;
    background:var(--c-surface);
    color:var(--c-ink-2);
    border:1px solid var(--c-line);
    border-radius:var(--r-sm);
    font-size:var(--fs-sm);
    text-decoration:none;
}

.pager-btn:hover{
    background:var(--c-primary-soft);
    border-color:var(--c-info-line);
    color:var(--c-primary);
    text-decoration:none;
}

.pager-btn.is-disabled{
    opacity:0.4;
    cursor:default;
    pointer-events:none;
}

.pager-gap{
    padding:3px 6px;
    color:var(--c-ink-3);
}

/* ─────────── КАРТОЧКИ ─────────── */

.card{
    background:var(--c-surface);
    padding:18px;
    border-radius:var(--r-lg);
    margin-bottom:var(--s-5);
    box-shadow:var(--sh-card);
    border:1px solid var(--c-line);
}

.subcard{
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:var(--r-lg);
    padding:var(--s-4);
    margin-bottom:var(--s-4);
    box-shadow:var(--sh-card);
}

.section-card{
    scroll-margin-top:120px;
}

.card-title{
    font-size:var(--fs-lg);
    font-weight:700;
    margin:0 0 var(--s-3);
    color:var(--c-ink);
}

/* Раскрывающийся блок <details class="card"> */
.accordion-summary{
    cursor:pointer;
    font-weight:700;
    font-size:15px;
    color:var(--c-ink);
    user-select:none;
}

.accordion-body{
    padding-top:var(--s-3);
    font-size:var(--fs-md);
    line-height:1.7;
    color:var(--c-ink);
}

.section-divider{
    height:1px;
    background:var(--c-line);
    margin:var(--s-5) 0;
}

/* ─────────── ВКЛАДКИ ─────────── */

.tabs-modern{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.tab-link{
    display:inline-block;
    padding:10px var(--s-3);
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:var(--r-md);
    text-decoration:none;
    font-size:var(--fs-md);
    color:var(--c-ink);
    box-shadow:var(--sh-card);
}

.tab-link:hover{
    background:var(--c-surface-alt);
    border-color:var(--c-info-line);
    text-decoration:none;
}

.card-actions-wrap{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}

/* ─────────── ТАБЛИЦЫ ─────────── */

.table{
    width:100%;
    border-collapse:collapse;
}

.table th{
    /* Обычный регистр вместо ЗАГЛАВНЫХ: русские заголовки вроде
       «Количество контрактов» так читаются заметно легче
       и занимают одну строку вместо двух */
    background:var(--c-line-soft);
    text-align:left;
    padding:10px var(--s-2);
    font-size:var(--fs-xs);
    font-weight:600;
    vertical-align:top;
    color:var(--c-ink);
    border-bottom:1px solid var(--c-line);

    /* Заголовок остаётся на виду при прокрутке длинного списка.
       Прилипает к верху области прокрутки .table-wrap (см. ниже) */
    position:sticky;
    top:0;
    z-index:20;
}

.table td{
    padding:10px var(--s-2);
    border-top:1px solid var(--c-line-soft);
    font-size:var(--fs-sm);
    vertical-align:top;
}

/* Чередование строк — глаз не теряет строку на широких таблицах */
.table tbody tr:nth-child(even){
    background:var(--c-surface-alt);
}

/* Наведение должно быть заметнее зебры */
.table tbody tr:hover,
.table tbody tr:nth-child(even):hover{
    background:var(--c-primary-soft);
}

/* Числовые колонки: вправо, моноширинные цифры */
.table .num{
    text-align:right;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.table th.num{
    text-align:right;
}

/*
   Область прокрутки таблицы.

   Важно: браузер не даёт сделать «только горизонтальную» прокрутку —
   если задан overflow-x:auto, то overflow-y тоже становится auto,
   и контейнер превращается в собственную область прокрутки.
   Поэтому прилипающий заголовок работает только внутри него,
   а не относительно страницы. Отсюда max-height: длинный список
   прокручивается внутри рамки, фильтры и пагинация остаются на виду.

   Невысокие таблицы ограничение не затрагивает — они короче предела.
*/
.table-wrap{
    overflow:auto;
    max-height:calc(100vh - 190px);
    scrollbar-color:var(--c-line) transparent;
}

.table-wrap.is-scrollable-x:not(.is-scrolled-end){
    box-shadow:inset -12px 0 12px -14px var(--c-brand-900);
}

.table-wrap:focus-visible{
    outline:2px solid var(--c-primary);
    outline-offset:2px;
}

.table-scroll-hint{
    display:none;
}

/* Короткие таблицы внутри карточек контракта — без внутренней прокрутки */
.table-wrap--auto{
    max-height:none;
}

@media (max-width: 700px){
    .table-wrap{
        max-height:none;
    }

    .table-scroll-hint.is-visible{
        display:flex;
        justify-content:flex-end;
        margin:0 0 var(--s-1);
        color:var(--c-ink-3);
        font-size:var(--fs-xs);
        font-weight:500;
    }
}

.summary-row{
    font-weight:bold;
    background:var(--c-neutral-bg);
}

.cell-wrap-sm{
    max-width:120px;
    white-space:normal;
    font-size:var(--fs-xs);
}

/* Таблица отчётов: фиксированные ширины, чтобы не «прыгала» */
.table-reports{
    table-layout:fixed;
    min-width:1080px;
}

.table-reports .report-col-number{ width:150px; }
.table-reports .report-col-date,
.table-reports .report-col-end-date{ width:120px; }
.table-reports .report-col-amount{ width:145px; }
.table-reports .report-col-status{ width:135px; }
.table-reports .report-col-overdue{ width:95px; }
.table-reports .report-col-actions{ width:120px; white-space:nowrap; }

.table-reports th,
.table-reports td{
    overflow-wrap:anywhere;
}

.table-reports .report-cell-text{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Сортировка в заголовках */
.sort-link{
    color:var(--c-ink);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.sort-link:hover{
    text-decoration:underline;
}

.sort-arrow{
    font-size:11px;
    color:var(--c-primary);
}

/* ─────────── ФОРМЫ ─────────── */

input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
select{
    padding:8px 10px;
    border:1px solid var(--c-line);
    border-radius:var(--r-sm);
    width:100%;
    box-sizing:border-box;
    min-height:38px;
    background:var(--c-surface);
    font-size:var(--fs-md);
    color:var(--c-ink);
}

input[type="file"]{
    padding:6px;
}

textarea{
    width:100%;
    min-height:90px;
    padding:8px 10px;
    border:1px solid var(--c-line);
    border-radius:var(--r-sm);
    box-sizing:border-box;
    resize:vertical;
    font-family:inherit;
    font-size:var(--fs-md);
    color:var(--c-ink);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:var(--c-primary);
    box-shadow:0 0 0 3px var(--c-primary-soft);
}

.form-row{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.form-row label,
.form-group label{
    font-size:var(--fs-sm);
    font-weight:bold;
    color:var(--c-ink-2);
}

.form-value-readonly{
    font-size:var(--fs-md);
    color:var(--c-ink);
    padding:var(--s-1) 0;
}

.field-label{
    font-size:var(--fs-sm);
    font-weight:bold;
    color:var(--c-ink-2);
}

/* Небольшое поле в одну строку с кнопкой (например, выбор файла) */
.input-inline{
    width:auto;
    min-height:auto;
    padding:6px;
    font-size:var(--fs-sm);
}

/* Имя файла / технический код внутри текста */
.code-chip{
    background:var(--c-neutral-bg);
    padding:3px var(--s-2);
    border-radius:var(--r-sm);
    font-size:var(--fs-md);
}

/* Узкие поля ввода в таблицах (количество, цена) */
.input-narrow{
    width:100px;
    padding:var(--s-1) 6px;
    min-height:auto;
}

.input-xnarrow{
    width:55px;
    padding:var(--s-1) 6px;
    min-height:auto;
}

/* Выпадающий список автодополнения (поставщик) */
.autocomplete-item{
    padding:var(--s-2) var(--s-3);
    cursor:pointer;
    font-size:var(--fs-sm);
    border-bottom:1px solid var(--c-line-soft);
}

.autocomplete-item:last-child{
    border-bottom:none;
}

.autocomplete-item:hover{
    background:var(--c-primary-soft);
}

.autocomplete-panel{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:var(--r-sm);
    z-index:200;
    max-height:220px;
    overflow-y:auto;
    box-shadow:var(--sh-pop);
}

/* ─────────── ИНФОРМАЦИОННЫЕ ПЛАШКИ ─────────── */

.note-box{
    padding:var(--s-3) var(--s-4);
    border-radius:var(--r-md);
    margin-bottom:var(--s-4);
    font-size:var(--fs-sm);
    border:1px solid transparent;
}

.note-box-info{
    background:var(--c-info-bg);
    border-color:var(--c-info-line);
    color:var(--c-ink-2);
}

.note-box-success{
    background:var(--c-success-bg);
    border-color:var(--c-success-line);
    color:var(--c-ink-2);
}

.note-box-warning{
    background:var(--c-warning-bg);
    border-color:var(--c-warning-line);
    color:var(--c-warning);
}

.note-box-neutral{
    background:var(--c-neutral-bg);
    border-color:var(--c-neutral-line);
    color:var(--c-ink-2);
}

/* Пустое состояние списка */
.empty-state{
    text-align:center;
    padding:32px var(--s-6);
    color:var(--c-ink-3);
    border:1px dashed var(--c-line);
    border-radius:var(--r-lg);
    background:var(--c-surface-alt);
}

.empty-state-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    margin:0 auto var(--s-3);
    border-radius:50%;
    background:var(--c-neutral-bg);
    color:var(--c-ink-3);
    font-size:24px;
    line-height:1;
}

.empty-state-title{
    color:var(--c-ink);
    font-size:var(--fs-lg);
    font-weight:700;
}

.empty-state-text{
    max-width:560px;
    margin:var(--s-2) auto 0;
    color:var(--c-ink-3);
    font-size:var(--fs-sm);
}

.empty-state-action{
    margin-top:var(--s-4);
}


.form-group{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.form-group-wide{
    grid-column:span 2;
}

.grid-form{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-3);
    align-items:end;
}

.form-actions{
    display:flex;
    align-items:end;
}

.filters-form{
    display:block;
}

.filters-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:var(--s-3);
    align-items:end;
}

.filters-actions{
    display:flex;
    gap:10px;
    margin-top:var(--s-4);
    flex-wrap:wrap;
}

/* Заголовок свёрнутого блока «Расширенный поиск» */
.filters-summary{
    cursor:pointer;
    font-weight:600;
    font-size:var(--fs-md);
    padding:var(--s-1) 0;
    color:var(--c-primary);
    user-select:none;
}

.filters-body{
    padding-top:var(--s-3);
}

.results-info{
    margin-bottom:var(--s-3);
    font-size:var(--fs-md);
    color:var(--c-ink-2);
}

.admin-log-filters{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

.deadlines-filters-grid{
    grid-template-columns:2fr 1fr;
}

.reports-filters-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

.search-box{
    display:flex;
    gap:10px;
}

.search-box input{
    flex:1;
}

.stage-number-input{
    max-width:100px;
}

/* ─────────── МУЛЬТИСЕЛЕКТ С ЧЕКБОКСАМИ ─────────── */

.multi-select{
    position:relative;
}

.multi-select-btn{
    width:100%;
    box-sizing:border-box;
    min-height:38px;
    padding:8px 10px;
    border:1px solid var(--c-line);
    border-radius:var(--r-sm);
    background:var(--c-surface);
    font-size:var(--fs-md);
    color:var(--c-ink);
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:6px;
    text-align:left;
}

.multi-select-btn:hover{
    border-color:var(--c-info-line);
}

.multi-select.open .multi-select-btn{
    border-color:var(--c-primary);
    outline:none;
}

.multi-select-btn-label{
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--c-ink);
}

.multi-select-btn-label.placeholder{
    color:var(--c-ink-3);
}

.multi-select-arrow{
    font-size:11px;
    color:var(--c-ink-3);
    flex-shrink:0;
    transition:transform 0.15s;
}

.multi-select.open .multi-select-arrow{
    transform:rotate(180deg);
}

.multi-select-panel{
    display:none;
    position:absolute;
    top:calc(100% + var(--s-1));
    left:0;
    right:0;
    min-width:220px;
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:var(--r-sm);
    box-shadow:var(--sh-pop);
    z-index:200;
    padding:var(--s-1) 0;
}

.multi-select.open .multi-select-panel{
    display:block;
}

.multi-select-option{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    padding:7px var(--s-3);
    font-size:var(--fs-md);
    color:var(--c-ink);
    cursor:pointer;
    user-select:none;
}

.multi-select-option:hover{
    background:var(--c-primary-soft);
}

.multi-select-option input[type="checkbox"]{
    width:16px;
    min-height:16px;
    height:16px;
    flex-shrink:0;
    cursor:pointer;
    accent-color:var(--c-primary);
}

/* ─────────── БЕЙДЖИ СТАТУСОВ ─────────── */

.status-badge{
    display:inline-block;
    padding:5px 9px;
    border-radius:var(--r-pill);
    font-size:var(--fs-xs);
    line-height:1.3;
    white-space:normal;
    font-weight:bold;
}

.badge-sm{
    font-size:11px;
}

.status-done,
.status-completed{
    background:var(--c-success-bg);
    color:var(--c-success);
}

.status-partial{
    background:var(--c-warning-bg);
    color:var(--c-warning);
}

.status-overdue{
    background:var(--c-danger-bg);
    color:var(--c-danger);
}

.status-active,
.status-in-progress{
    background:var(--c-info-bg);
    color:var(--c-info);
}

.status-pending{
    background:var(--c-neutral-bg);
    color:var(--c-neutral);
}

.status-terminated{
    background:var(--c-danger-bg);
    color:var(--c-danger);
    border:1px solid var(--c-danger-line);
}

/* Те же смыслы, но простым текстом (без подложки) */
.status-text-done{
    color:var(--c-success);
    font-weight:bold;
}

.status-text-partial{
    color:var(--c-warning);
    font-weight:bold;
}

.status-text-overdue{
    color:var(--c-danger);
    font-weight:bold;
}

.status-text-progress{
    color:var(--c-info);
}

.status-text-pending,
.status-text-terminated{
    color:var(--c-ink-3);
}

.ok-check{
    color:var(--c-success);
    margin-left:var(--s-1);
}

.claims-badge{
    background:var(--c-danger);
    color:var(--c-on-dark);
    border-radius:var(--r-pill);
    font-size:11px;
    padding:1px 6px;
    margin-left:var(--s-1);
}

/* ─────────── БЕЙДЖИ СРОКОВ ─────────── */

.deadline-badge{
    display:inline-block;
    padding:var(--s-1) var(--s-2);
    border-radius:var(--r-pill);
    font-size:var(--fs-xs);
    line-height:1.3;
    white-space:nowrap;
    font-weight:bold;
}

.deadline-normal{
    background:var(--c-success-bg);
    color:var(--c-success);
}

.deadline-soon{
    background:var(--c-warning-bg);
    color:var(--c-warning);
}

.deadline-overdue{
    background:var(--c-danger-bg);
    color:var(--c-danger);
}

.deadline-accepted{
    background:var(--c-info-bg);
    color:var(--c-info);
}

.deadline-accepted-late{
    background:var(--c-violet-bg);
    color:var(--c-violet);
}

.deadline-no-deadline{
    background:var(--c-neutral-bg);
    color:var(--c-neutral);
}

/* ─────────── СООБЩЕНИЯ ─────────── */

.flash-messages .alert{
    display:grid;
    grid-template-columns:28px minmax(0, 1fr) 28px;
    align-items:start;
    gap:var(--s-3);
    padding:var(--s-3);
    border-radius:var(--r-md);
    margin-bottom:var(--s-3);
    font-size:var(--fs-md);
    border:1px solid transparent;
    box-shadow:var(--sh-card);
    transition:opacity .15s ease, transform .15s ease;
}

.flash-messages .alert-success{
    background:var(--c-success-bg);
    border-color:var(--c-success-line);
    color:var(--c-success);
}

.flash-messages .alert-error{
    background:var(--c-danger-bg);
    border-color:var(--c-danger-line);
    color:var(--c-danger);
}

.flash-messages .alert-warning{
    background:var(--c-warning-bg);
    border-color:var(--c-warning-line);
    color:var(--c-warning);
}

.flash-messages .alert-info{
    background:var(--c-info-bg);
    border-color:var(--c-info-line);
    color:var(--c-info);
}

.alert-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border:1px solid currentColor;
    border-radius:50%;
    font-size:var(--fs-sm);
    font-weight:700;
    line-height:1;
}

.alert-content{
    align-self:center;
    min-width:0;
    line-height:1.45;
}

.alert-title{
    display:block;
    margin-bottom:2px;
    font-weight:700;
}

.alert-close{
    width:28px;
    height:28px;
    padding:0;
    border:0;
    border-radius:var(--r-sm);
    background:transparent;
    color:currentColor;
    font:400 20px/1 inherit;
    cursor:pointer;
    opacity:.7;
}

.alert-close:hover{
    background:rgba(255,255,255,.55);
    opacity:1;
}

.flash-messages .alert.is-dismissing{
    opacity:0;
    transform:translateY(-4px);
}

.alert-link{
    color:inherit;
    text-decoration:underline;
    font-weight:600;
}

@media (max-width: 520px){
    .flash-messages .alert{
        grid-template-columns:24px minmax(0, 1fr) 24px;
        gap:var(--s-2);
        font-size:var(--fs-sm);
    }

    .alert-icon{
        width:22px;
        height:22px;
    }
}

/* ─────────── ССЫЛКИ И МЕЛОЧИ ─────────── */

.file-link{
    color:var(--c-primary);
    text-decoration:none;
}

.file-link:hover{
    text-decoration:underline;
}

.inline-form{
    display:inline;
    margin:0;
}

.ext-link-wrap{
    margin-top:6px;
}

/* ─────────── ПАГИНАЦИЯ ─────────── */

.pagination-wrap{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-3);
    padding:var(--s-3) 0;
    border-top:1px solid var(--c-line);
    margin-top:var(--s-3);
}

.pagination-info{
    font-size:var(--fs-sm);
    color:var(--c-ink-2);
    white-space:nowrap;
}

.pagination-per-page{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:var(--fs-sm);
    color:var(--c-ink-2);
}

.pagination-pages{
    display:flex;
    align-items:center;
    gap:var(--s-1);
    flex-wrap:wrap;
}

.pagination-pages .chip{
    min-width:32px;
    text-align:center;
    padding:5px 9px;
    border-radius:var(--r-sm);
}

/* ─────────── ГЛОБАЛЬНЫЙ ПОИСК В ШАПКЕ ─────────── */

.top-nav-search{
    flex:1 1 360px;
    max-width:520px;
    min-width:260px;
}

.top-nav-search-form{
    position:relative;
    display:flex;
    gap:var(--s-2);
    align-items:center;
}

.top-nav-search-input{
    width:100%;
    min-height:34px;
    border:1px solid rgba(255,255,255,0.35);
    border-radius:var(--r-md);
    padding:0 var(--s-3);
    font-size:var(--fs-md);
    background:var(--c-surface);
    color:var(--c-ink);
}

.top-nav-search-input:focus{
    outline:none;
    border-color:var(--c-info-line);
    box-shadow:0 0 0 2px rgba(255,255,255,0.25);
}

.top-nav-search-btn{
    min-height:34px;
    padding:0 var(--s-3);
    white-space:nowrap;
}

.top-nav-search-suggest{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    z-index:1000;
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:var(--r-md);
    box-shadow:var(--sh-pop);
    max-height:360px;
    overflow:auto;
}

.top-nav-search-group-title{
    font-size:var(--fs-xs);
    color:var(--c-ink-3);
    padding:var(--s-2) var(--s-3) var(--s-1);
}

.top-nav-search-item{
    display:block;
    padding:9px var(--s-3);
    border-top:1px solid var(--c-line-soft);
    text-decoration:none;
}

.top-nav-search-item:first-of-type{
    border-top:none;
}

.top-nav-search-item:hover,
.top-nav-search-item.active{
    background:var(--c-primary-soft);
    text-decoration:none;
}

.top-nav-search-type{
    display:inline-block;
    font-size:11px;
    color:var(--c-info);
    background:var(--c-info-bg);
    border-radius:10px;
    padding:2px var(--s-2);
    margin-bottom:var(--s-1);
}

.top-nav-search-title{
    display:block;
    color:var(--c-ink);
    font-size:var(--fs-md);
    line-height:1.35;
}

.top-nav-search-subtitle{
    display:block;
    color:var(--c-ink-3);
    font-size:var(--fs-xs);
    margin-top:2px;
}

.global-search-history{
    margin-top:10px;
    border-top:1px dashed var(--c-line);
    padding-top:10px;
}

.global-search-history-title{
    font-size:var(--fs-sm);
    color:var(--c-ink-3);
    margin-bottom:var(--s-2);
}

.global-search-history-list{
    display:flex;
    gap:var(--s-2);
    flex-wrap:wrap;
}

.global-search-history-chip{
    display:inline-block;
    padding:var(--s-1) 10px;
    border:1px solid var(--c-info-line);
    border-radius:var(--r-pill);
    font-size:var(--fs-sm);
    text-decoration:none;
    color:var(--c-info);
    background:var(--c-info-bg);
}

.global-search-history-chip:hover{
    background:var(--c-primary-soft);
    text-decoration:none;
}