/* Общая основа: подключается и публичным дашбордом (dashboard.css поверх),
   и админкой (admin.css поверх). Здесь — только то, что реально используется
   на страницах обоих типов: правь с оглядкой на оба web/*.html и web/admin/*.html. */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap");

:root {
    color-scheme: light;
    --surface-1: #fcfcfb;
    --page: #f9f9f7;
    --text-primary: #0b0b0b;
    --text-secondary: #52514e;
    --text-muted: #898781;
    --gridline: #e1e0d9;
    --baseline: #c3c2b7;
    --border: rgba(11, 11, 11, 0.10);
    --series-1: #2a78d6;
    --like-red: #e5484d;
    --series-1-track: #e9f0fb;
    --series-1-secondary: #6da7ec;

    /* Единая ширина контента для всех публичных страниц — используется и
       здесь в main, и в dashboard.css для шапки/меню (.header-inner,
       .site-nav-inner) и грида дашборда (main.dashboard-main), чтобы шапка,
       меню и содержимое всегда были одной ширины и не "скакали" при
       переходах между дашбордом и страницами шоу/человека. */
    --content-width-sm: 960px;
    --content-width-md: 1280px;
    --content-width-lg: 1600px;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --surface-1: #1a1a19;
        --page: #0d0d0d;
        --text-primary: #ffffff;
        --text-secondary: #c3c2b7;
        --text-muted: #898781;
        --gridline: #2c2c2a;
        --baseline: #383835;
        --border: rgba(255, 255, 255, 0.10);
        --series-1: #3987e5;
        --like-red: #ff6369;
        --series-1-track: #22314a;
        --series-1-secondary: #256abf;
    }
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Nunito", sans-serif;
    margin: 0;
    padding: 0;
    background: var(--page);
    color: var(--text-primary);
}

/* Базовый стиль ссылок — переопределяет браузерный дефолт (синий/фиолетовый
   visited, подчёркивание) единым акцентным цветом. Компоненты с собственным
   видом ссылок (.site-menu-link, .breadcrumbs a, .table-view-link, .brand,
   .bar-label и т.п.) переопределяют это через более специфичный селектор. */
a {
    color: var(--series-1);
    text-decoration: none;
}

a:visited {
    color: var(--series-1);
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

header {
    padding: 0;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

.subtitle {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
}

main {
    padding: 32px;
    max-width: var(--content-width-sm);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 900px) {
    main {
        max-width: var(--content-width-md);
    }
}

@media (min-width: 1400px) {
    main {
        max-width: var(--content-width-lg);
    }
}

.error {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    color: var(--text-primary);
}

.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
    /* Если таблица внутри не помещается по ширине (узкий экран) — скроллится
       сама карточка, а не вся страница. */
    overflow-x: auto;
}

.card h2 {
    margin: 0 0 16px;
    font-size: 16px;
    color: var(--text-secondary);
}

.card h3 {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Фильтры (поиск/селекты над таблицей) — есть и на публичных списках
   (person/, shows/), и в админских справочниках/модерации. */

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.filters label {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.filters-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-muted);
}

select, input[type="text"], textarea {
    font: inherit;
    color: var(--text-primary);
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
}

textarea {
    width: 100%;
    max-width: 480px;
    resize: vertical;
}

button {
    font: inherit;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    background: var(--surface-1);
    color: var(--text-primary);
}

button:hover {
    filter: brightness(1.08);
}

/* Tables */

/* width: auto + min-width: 100% вместо width: 100% — таблица растягивается на
   всю ширину карточки, если контент туда помещается, но не сжимается ниже
   своей естественной ширины, когда не помещается (узкие экраны, много
   nowrap-колонок). Иначе width: 100% в паре с overflow-wrap: anywhere ниже
   заставлял бы длинные названия шоу/выпусков ломаться посимвольно, вместо
   того чтобы карточка (.card, overflow-x: auto) просто скроллилась целиком. */
table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* Ширина 1% в паре с white-space: nowrap — приём для table-layout: auto
   (значение по умолчанию): такая колонка сжимается до ширины своего самого
   длинного значения (которое не переносится по словам), а остаток ширины
   таблицы забирают колонки без этого класса. Так короткие по содержимому
   колонки (дата, счётчики, просмотры) не растягиваются произвольно и не
   отжимают место у колонок с длинным текстом (названия, списки гостей).
   table-layout: fixed здесь не годится — он берёт ширины буквально и не
   учитывает содержимое, из-за чего короткие колонки схлопываются в 1% и
   текст в них наезжает на соседние. */
th, td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--gridline);
    overflow-wrap: anywhere;
}

th.col-fit,
td.col-fit {
    width: 1%;
    white-space: nowrap;
}

/* col-lg/col-md/col-sm — фиксированные доли ширины таблицы для колонок со
   свободным текстом переменной длины (название выпуска / гости / ведущие).
   table-layout: auto по умолчанию делит ширину между такими колонками по
   длине их самой длинной строки без переноса — колонка с длинным списком
   гостей могла бы забрать почти всю ширину, сузив соседние, а фиксированный
   max-width на неё же делает колонку слишком узкой и нечитаемой сама по
   себе. Явные проценты задают предсказуемые пропорции между колонками
   независимо от длины конкретной строки — контент просто переносится на
   несколько строк (растёт высота ячейки), не отжимая соседей. */
th.col-lg,
td.col-lg {
    width: 40%;
}

th.col-md,
td.col-md {
    width: 30%;
}

th.col-sm,
td.col-sm {
    width: 15%;
}

th.sortable {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover {
    color: var(--text-primary);
}

.sort-indicator {
    margin-left: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
}

/* th.numeric — заголовок должен быть выровнен так же, как и значения под
   ним (text-align: right), иначе в широких колонках (без col-fit) заголовок
   стоит слева, а числа под ним — справа, и не читается, какое число к
   какому столбцу относится. */
th.numeric,
td.numeric {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* .col-views переопределяет выравнивание колонок с просмотрами (иконка +
   число) на левое — при text-align: right (унаследованном от th.numeric/
   td.numeric) иконка «плавает» по горизонтали вместе с числом переменной
   ширины и не стоит ровно в одном месте по всем строкам таблицы; при левом
   выравнивании иконка всегда на одной вертикали. */
th.col-views,
td.col-views,
th.col-likes,
td.col-likes {
    text-align: left;
}

/* Иконка-глазик перед числом просмотров в таблицах (см.
   common.js:renderViewsContent) — подсказка с полным числом висит на самой
   иконке, поэтому именно она (не число рядом) меняет цвет при наведении. */
.views-icon {
    display: inline-flex;
    vertical-align: -2px;
    margin-right: 4px;
    color: var(--text-muted);
}

.views-icon:hover {
    color: var(--series-1);
}

.views-icon svg {
    display: block;
}

/* Сердечко перед числом лайков (см. common.js:renderLikesContent) — те же
   правила, что у .views-icon: подсказка и красный цвет — на самой иконке. */
.likes-icon {
    display: inline-flex;
    vertical-align: -2px;
    margin-right: 4px;
    color: var(--text-muted);
}

.likes-icon:hover {
    color: var(--like-red);
}

.likes-icon svg {
    display: block;
}

/* Раскрывающаяся строка-деталь под основной строкой таблицы — используется
   и на публичной странице шоу (пересечения гостей), и в админских
   справочниках/модерации. */

.panel-row td {
    background: var(--page);
    border-bottom: 1px solid var(--gridline);
}

.panel-row[hidden] {
    display: none;
}

/* Статус-бейджи (pending/confirmed/rejected) — публичный список шоу
   показывает badge-pending, админка использует весь набор при модерации. */

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.badge-pending {
    background: var(--gridline);
    color: var(--text-secondary);
}

.badge-confirmed {
    background: var(--series-1-track);
    color: var(--series-1);
}

.badge-rejected {
    background: rgba(179, 38, 30, 0.12);
    color: #b3261e;
}

.placeholder {
    color: var(--text-muted);
    font-size: 15px;
}