/* ============================================================
   Стили каталога. Голый CSS, без зависимостей.
   ============================================================ */

:root {
    --bg:        #f4f6f9;
    --card:      #ffffff;
    --text:      #1f2937;
    --muted:     #6b7280;
    --accent:    #2c7be5;
    --accent-d:  #1a5fb4;
    --border:    #e5e9f0;
    --tag:       #eef3fb;
    --tag-text:  #2c7be5;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
    padding: 24px 20px 16px;
    text-align: center;
}
.site-header h1 { margin: 0; font-size: 26px; line-height: 1.25; }
.site-header h1 a { color: var(--text); }
.site-header h1 a:hover { text-decoration: none; }
.subtitle { margin: 8px auto 0; color: var(--muted); max-width: 720px; font-size: 15px; }

/* --- Раскладка --- */
.layout {
    display: flex;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px 60px;
    align-items: flex-start;
}
.catalog { flex: 1 1 auto; min-width: 0; }
/* Сам сайдбар (в первую очередь длинные списки фильтров) НЕ прилипает —
   он скроллится вместе со всей страницей. Прилипает только .sidebar-sticky.
   align-self: stretch даёт колонке высоту всего каталога — иначе прилипающему
   блоку внутри неё просто некуда «ехать». */
.sidebar {
    flex: 0 0 280px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Панели «чат» и «автор» прилипают одним блоком, когда фильтры уже прокручены */
.sidebar-sticky {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* На низких экранах не прилипаем: блок выше вьюпорта, и его низ был бы срезан */
@media (max-height: 760px) {
    .sidebar-sticky { position: static; }
}

.catalog-top {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--muted);
}
.count { font-weight: 600; color: var(--text); font-size: 18px; margin: 0; }

.search-row { margin-bottom: 14px; }
#search {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit;
    color: var(--text);
    background: #fff;
}
#search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44,123,229,.12); }
#reset-filter { font-weight: 400; font-size: 13px; }
#toggle-desc { margin-left: auto; }

/* --- Список каналов --- */
.channels { list-style: none; margin: 0; padding: 0; }
.channel {
    display: flex;
    gap: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}
.channel.hidden { display: none; }

.ch-avatar { flex: 0 0 64px; }
.ch-avatar img {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--tag);
    display: block;
}
.ch-body { flex: 1 1 auto; min-width: 0; }
.ch-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.ch-title { font-size: 17px; font-weight: 600; color: var(--text); }
.ch-subs { color: var(--muted); white-space: nowrap; font-size: 14px; }

.ch-desc { margin: 6px 0; color: #374151; font-size: 15px; word-wrap: break-word; }
body.hide-desc .ch-desc { display: none; }

.ch-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
    border: none;
    cursor: pointer;
    font-size: 12.5px;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--tag);
    color: var(--tag-text);
    font-family: inherit;
}
.tag:hover { background: #dde9fb; }
.tag-region { background: #eafaf1; color: #1d9c5f; }
.tag-region:hover { background: #d6f5e3; }

.ch-contact { margin-top: 8px; font-size: 14px; color: var(--muted); }

.empty { color: var(--muted); padding: 30px 0; text-align: center; }
.empty.notfound { padding: 60px 20px; font-size: 16px; line-height: 1.6; }

/* --- Боковая панель --- */
.panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}
.panel h2 { margin: 0 0 10px; font-size: 16px; }
.rules p { margin: 0 0 10px; font-size: 14px; color: #374151; }
.chat-btn {
    display: inline-block;
    margin-top: 4px;
    background: var(--accent);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
}
.chat-btn:hover { background: var(--accent-d); text-decoration: none; }

.author p { margin: 0 0 10px; font-size: 14px; color: #374151; }

/* --- Подвал с SEO-текстом --- */
.site-footer {
    border-top: 1px solid var(--border);
    background: #fff;
    margin-top: 20px;
    padding: 28px 20px;
}
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-inner h2 { margin: 0 0 12px; font-size: 18px; }
.footer-inner p { margin: 0 0 12px; color: #4b5563; font-size: 14px; max-width: 900px; }
.copyright {
    margin: 18px 0 0; padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--muted); font-size: 13px;
}

/* Списки стран и регионов всегда показываются целиком — никаких скроллбаров
   внутри панели фильтров, сколько бы значений там ни было. */
.filters { max-height: none; overflow: visible; }

/* Сворачиваемые фильтры (details/summary) */
.panel.filters > summary {
    font-size: 16px; font-weight: 600; color: var(--text);
    cursor: pointer; list-style: none; margin: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.panel.filters > summary::-webkit-details-marker { display: none; }
.panel.filters > summary::after { content: "▾"; color: var(--muted); font-size: 13px; }
.panel.filters[open] > summary::after { content: "▴"; }
.panel.filters .filter-list { margin-top: 10px; }

/* Десктоп: фильтры всегда раскрыты и не сворачиваются (как раньше) */
@media (min-width: 821px) {
    .panel.filters > .filter-list { display: block !important; }
    .panel.filters::details-content { content-visibility: visible; }
    .panel.filters > summary { cursor: default; }
    .panel.filters > summary::after { display: none; }
}

.filter-list { list-style: none; margin: 0; padding: 0; }
.filter-list li { margin: 2px 0; }
.filter {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    padding: 5px 8px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.filter:hover { background: var(--tag); text-decoration: none; }
.filter.active { background: var(--accent); color: #fff; }
.tag, .tag:hover { text-decoration: none; }
.filter .num { color: var(--muted); font-size: 12px; }
.filter.active .num { color: #dbe7fb; }

.link-btn {
    background: none; border: none; cursor: pointer;
    color: var(--accent); font: inherit; padding: 0;
}
.link-btn:hover { text-decoration: underline; }

/* --- Адаптив --- */
@media (max-width: 820px) {
    .layout { flex-direction: column; align-items: stretch; }
    /* sidebar исчезает как контейнер — его панели становятся элементами .layout,
       чтобы расставить их по порядку относительно списка каналов */
    .sidebar { display: contents; }
    /* обёртка тоже растворяется, чтобы order работал на самих панелях */
    .sidebar-sticky { display: contents; }
    .catalog { order: 1; }                        /* список каналов — после фильтров */
    .panel.filters { order: 0; }                    /* фильтры (свёрнутые) — сверху */
    .panel.rules, .panel.author { order: 2; }       /* чат и автор — в самый конец */
}

/* ============================================================
   Админка
   ============================================================ */
body.admin { background: var(--bg); }
.admin-wrap { max-width: 900px; margin: 0 auto; padding: 0 20px 60px; }
.admin-wrap .panel { margin-bottom: 20px; }

.admin-login {
    max-width: 320px; margin: 80px auto; text-align: center;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 30px;
}
.admin-login input, .admin-login button { width: 100%; padding: 10px; margin-top: 10px; }

.admin-form label { display: block; margin-bottom: 12px; font-size: 14px; color: var(--muted); }
.admin-form input[type=text],
.admin-form input[type=number],
.admin-form input[type=password] {
    width: 100%; padding: 9px 11px; margin-top: 4px;
    border: 1px solid var(--border); border-radius: 8px;
    font: inherit; color: var(--text);
}
.admin-form input[readonly] { background: #f0f2f5; }
.two-col { display: flex; gap: 14px; }
.two-col label { flex: 1; }

/* --- Поле-теги (страны/регионы) --- */
.field { margin-bottom: 12px; }
.field-title { display: block; font-size: 14px; color: var(--muted); margin-bottom: 2px; }
.tagfield { position: relative; margin-top: 4px; }
.tf-box {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 8px; min-height: 42px; cursor: text; background: #fff;
}
.tf-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tag); color: var(--tag-text);
    border-radius: 16px; padding: 3px 6px 3px 11px; font-size: 14px;
}
.tf-x {
    border: none; background: none; cursor: pointer;
    color: var(--tag-text); font-size: 16px; line-height: 1; padding: 0 2px;
}
.tf-x:hover { color: #b42323; }
.tf-input {
    border: none !important; outline: none; flex: 1; min-width: 120px;
    padding: 4px !important; margin: 0 !important; font: inherit;
}
.tf-drop {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    margin-top: 4px; max-height: 220px; overflow: auto;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.tf-opt { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.tf-opt:hover { background: var(--tag); }

.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.admin-form button[type=submit] {
    background: var(--accent); color: #fff; border: none;
    padding: 10px 20px; border-radius: 8px; font: inherit; cursor: pointer;
}
.admin-form button[type=submit]:hover { background: var(--accent-d); }
.hint { color: var(--muted); font-size: 13px; margin: 10px 0 0; }

.msg { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; }
.msg-ok  { background: #eafaf1; color: #1d7a4d; border: 1px solid #c7ebd6; }
.msg-err { background: #fdeeee; color: #b42323; border: 1px solid #f3cfcf; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td {
    text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.admin-table th { color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); font-size: 13px; }
.row-actions { white-space: nowrap; }
.danger { color: #b42323; }