/*
 * Дизайн панели (docs/WEBADMIN_PLAN.md, редизайн после критики).
 *
 * Принципы:
 * 1. Навигация — по частоте: «Каждый день» выше «Управления», у очередей
 *    (поддержка, модерация) бейджи со счётчиками.
 * 2. Три уровня кнопок: основная (заливка), второстепенная (контур),
 *    опасная (красная). Одинаковые синие кнопки на всё — это «Найти»,
 *    визуально равное «Заблокировать».
 * 3. Статусы — мягкие пилюли (тонированный фон + цветной текст), а не
 *    сплошная заливка: таблица не должна кричать каждой строкой.
 * 4. Фон страницы отличим от карточек: иерархию несут поверхности,
 *    а не только рамки.
 *
 * Мобильный вид обязателен для модерации и поддержки (§5.1 плана):
 * сайдбар на узких экранах превращается в прокручиваемую строку.
 */

/* ============================== токены ============================== */

:root {
    /* поверхности */
    --bg: #f5f6f8;
    --surface: #ffffff;
    --sunken: #eef0f3;
    --line: #e4e7ec;

    /* текст */
    --fg: #1a1d23;
    --muted: #5f6b7c;
    --faint: #98a2b3;

    /* акцент */
    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-soft: #eef0fe;
    --on-accent: #ffffff;

    /* состояния */
    --danger: #d92d20;
    --danger-soft: #fee9e7;
    --success: #12805c;
    --success-soft: #e3f4ec;
    --warn: #b54708;
    --warn-soft: #fdf0e3;

    --radius: 10px;
    --radius-sm: 7px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --sidebar-w: 218px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #101318;
        --surface: #181c23;
        --sunken: #12151b;
        --line: #262c36;

        --fg: #e8eaee;
        --muted: #98a2b3;
        --faint: #5f6b7c;

        --accent: #7b74f0;
        --accent-hover: #918bf4;
        --accent-soft: #24263c;
        --on-accent: #ffffff;

        --danger: #f2726a;
        --danger-soft: #3a2226;
        --success: #4ec593;
        --success-soft: #1a2f28;
        --warn: #e8a75d;
        --warn-soft: #33291c;

        --shadow: none;
    }
}

/* ============================== база ============================== */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 15px/1.55 -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
}

h1 { font-size: 1.3rem; font-weight: 650; margin: 0 0 1.1rem; letter-spacing: -.01em; }
h2 { font-size: .95rem; font-weight: 650; margin: 0 0 .7rem; }
h3 {
    font-size: .72rem; font-weight: 650; margin: 1rem 0 .4rem;
    text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}

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

code {
    background: var(--sunken);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: .04em .35em;
    font-size: .86em;
}

.muted { color: var(--muted); }
.error { color: var(--danger); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ============================== каркас ============================== */

body.with-nav {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
}

.content { min-width: 0; display: flex; flex-direction: column; }

main {
    flex: 1;
    width: 100%;
    max-width: 1160px;
    padding: 1.1rem 1.5rem 3rem;
}

body.bare main { max-width: 720px; margin: 0 auto; padding-top: 3rem; }

/* ---------- сайдбар ---------- */

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--line);
    padding: 1rem .75rem;
    overflow-y: auto;
}

.brand {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fg);
    padding: .25rem .55rem 1rem;
    letter-spacing: -.01em;
}

.brand span { color: var(--accent); }
.brand:hover { text-decoration: none; }

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav-group {
    font-size: .68rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--faint);
    padding: .9rem .55rem .3rem;
}

.nav a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .55rem;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-weight: 500;
}

.nav a:hover { background: var(--sunken); color: var(--fg); text-decoration: none; }

.nav a.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.nav-badge {
    margin-left: auto;
    min-width: 1.35rem;
    padding: .05rem .35rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .72rem;
    font-weight: 650;
    text-align: center;
    line-height: 1.35;
}

.nav-badge.warn { background: var(--warn); }

.sidebar-foot {
    margin-top: auto;
    padding: .9rem .55rem 0;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .82rem;
}

/* ---------- шапка с поиском ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: .6rem 1.5rem;
}

.quick-search { max-width: 1160px; }

.quick-search input {
    width: 100%;
    max-width: 26rem;
    padding: .48rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
    font-size: .9rem;
}

.quick-search input::placeholder { color: var(--faint); }

.quick-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ============================== элементы ============================== */

/* Кнопка по умолчанию — второстепенная. Заливку получают только success
   (главное действие очереди) и danger (необратимое); остальное — контур. */
button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    font-size: .88rem;
    font-weight: 550;
    cursor: pointer;
    box-shadow: var(--shadow);
}

button:hover, .button:hover { border-color: var(--faint); text-decoration: none; }

button[type="submit"]:not(.neutral):not(.danger):not(.success), .button {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

button[type="submit"]:not(.neutral):not(.danger):not(.success):hover,
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

button.neutral { background: var(--surface); color: var(--fg); }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.success { background: var(--success); border-color: var(--success); color: #fff; }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.card.narrow { max-width: 42rem; }

/* ---------- счётчики ---------- */

.counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .7rem;
    margin-bottom: 1rem;
}

.counter {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .8rem .95rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--fg);
}

.counter:hover { border-color: var(--accent); text-decoration: none; }

.counter .value {
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.counter .label { color: var(--muted); font-size: .8rem; }

.counter.alert { border-color: var(--danger); background: var(--danger-soft); }
.counter.alert .value { color: var(--danger); }

/* ---------- таблицы ---------- */

.table-wrap {
    overflow-x: auto;          /* широкая таблица скроллится внутри себя,
                                  страница по горизонтали не едет */
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}

table { width: 100%; border-collapse: collapse; font-size: .88rem; }

th, td {
    padding: .55rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

th {
    background: var(--sunken);
    font-size: .72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    position: sticky;
    top: 0;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--sunken); }

.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- фильтры и действия ---------- */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1rem;
    align-items: flex-end;
}

.filters label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .74rem;
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.filters input, .filters select,
.actions input, .actions select,
form.stack input, form.stack select {
    padding: .45rem .65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    font-size: .9rem;
}

.filters input:focus, .filters select:focus,
.actions input:focus, form.stack input:focus,
.reply textarea:focus, form.stack textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.actions form {
    display: flex;
    gap: .45rem;
    align-items: center;
    padding: .45rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--sunken);
}

/* Внутри блока действий залитыми остаются только danger и success:
   ряд из пяти одинаково ярких кнопок — это «Начислить», визуально равное
   «Заблокировать». Контур читается как «действие есть, но не главное». */
/* Селектор с [type="submit"] — не для точности, а для веса: общее правило
   заливки написано как button[type="submit"]:not()x3 и иначе перебивает
   это по специфичности. */
.actions button[type="submit"]:not(.danger):not(.success) {
    background: var(--surface);
    border-color: var(--line);
    color: var(--fg);
}

.actions button[type="submit"]:not(.danger):not(.success):hover {
    border-color: var(--faint);
    background: var(--surface);
}

.actions input[type="number"] { width: 5.2rem; }
.actions input[type="text"] { width: 12rem; }

.form-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

form.stack { display: flex; flex-direction: column; gap: .6rem; }

form.stack label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .74rem;
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

form.stack textarea {
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    resize: vertical;
}

form.stack .row { display: flex; gap: .45rem; }
form.stack .row input { flex: 1; min-width: 0; }
form.stack button { align-self: flex-start; }

/* ---------- теги-статусы: мягкие пилюли ---------- */

.tag {
    display: inline-block;
    padding: .08rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    background: var(--accent-soft);
    color: var(--accent);
    white-space: nowrap;
}

.tag.danger { background: var(--danger-soft); color: var(--danger); }
.tag.muted { background: var(--sunken); color: var(--muted); }

/* ---------- списки ---------- */

ul.plain {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .9rem;
}

ul.plain li { padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: none; padding-bottom: 0; }

/* ============================== галерея ============================== */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .7rem;
    margin-bottom: 1.2rem;
}

.tile {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--fg);
}

.tile:hover { border-color: var(--accent); text-decoration: none; }

.tile img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: var(--sunken);
}

.tile-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    text-align: center;
    height: 160px;
    padding: .5rem;
    color: var(--faint);
    font-size: .82rem;
    background: var(--sunken);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

.tile-meta {
    display: flex;
    gap: .4rem;
    align-items: center;
    padding: .4rem .55rem;
    font-size: .78rem;
}

/* просмотрщик: вход и выход рядом */
.pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.pair-item img {
    max-width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.outputs { display: flex; flex-wrap: wrap; gap: .5rem; }
.outputs img { max-width: 220px; }

/* пары «загрузил → получил» в карточке пользователя */
.pairs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .7rem;
    margin-bottom: 1rem;
}

.pair-card {
    display: block;
    padding: .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--fg);
}

.pair-card:hover { border-color: var(--accent); text-decoration: none; }

.pair-shots {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .4rem;
    align-items: center;
}

.pair-shots img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--sunken);
}

.pair-shots .tile-empty { height: 120px; font-size: .74rem; padding: .3rem; }
.pair-arrow { color: var(--faint); font-size: 1.05rem; }

.pair-meta {
    display: flex;
    gap: .4rem;
    align-items: center;
    margin-top: .45rem;
    font-size: .78rem;
}

.pair-meta .right { margin-left: auto; }

.mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.mini-grid .tile img { height: 90px; }
.mini-grid .tile-empty { height: 90px; font-size: .72rem; }

/* ============================== модерация ============================== */

.mod-item { display: flex; gap: 1rem; align-items: flex-start; }

.mod-preview img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.mod-body { flex: 1; min-width: 0; }

/* ============================== поддержка ============================== */

.dialog-list { list-style: none; padding: 0; margin: 0; }

.dialog-list li {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: .5rem;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.dialog-list li.unread { border-left: 3px solid var(--accent); }

.dialog-list a { display: block; padding: .65rem .9rem; color: var(--fg); }
.dialog-list a:hover { text-decoration: none; background: var(--sunken); border-radius: var(--radius); }

.dialog-head { display: flex; gap: .5rem; align-items: center; margin-bottom: .15rem; }
.dialog-head .right { margin-left: auto; font-size: .8rem; }
.dialog-snippet { font-size: .88rem; }

.dialog-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    gap: 1rem;
    align-items: start;
}

.thread { display: flex; flex-direction: column; gap: .5rem; }

.msg {
    max-width: 80%;
    padding: .5rem .75rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--sunken);
    font-size: .92rem;
}

.msg.out {
    align-self: flex-end;
    background: var(--accent-soft);
    border-color: transparent;
}

.msg-meta { font-size: .72rem; margin-top: .25rem; }

.reply { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }

.reply textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    resize: vertical;
}

.reply button { align-self: flex-start; }

.context .actions form { flex-wrap: wrap; width: 100%; }

.context .actions input[type="number"],
.context .actions input[type="text"] {
    flex: 1 1 4rem;
    width: auto;
    min-width: 0;
}

/* ============================== раскладки ============================== */

.two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

/* ============================== мобильный вид ============================== */

@media (max-width: 880px) {
    body.with-nav { grid-template-columns: 1fr; }

    /* Сайдбар складывается в прокручиваемую строку: заголовки групп
       прячутся, бейджи остаются — очереди видны и с телефона. */
    .sidebar {
        position: sticky;
        top: 0;
        z-index: 20;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: .6rem;
        padding: .5rem .75rem;
        border-right: none;
        border-bottom: 1px solid var(--line);
        overflow: visible;
    }

    .brand { padding: 0 .25rem; flex: 0 0 auto; }

    .nav {
        flex-direction: row;
        overflow-x: auto;
        gap: .15rem;
        scrollbar-width: none;
    }

    .nav::-webkit-scrollbar { display: none; }
    .nav a { white-space: nowrap; padding: .35rem .55rem; font-size: .9rem; }
    .nav-group { display: none; }
    .nav-badge { margin-left: .1rem; }

    .sidebar-foot { display: none; }

    .topbar { position: static; padding: .55rem .9rem; }
    main { padding: .9rem .9rem 3rem; }

    .filters label { flex: 1 1 45%; }
    .filters label input, .filters label select { width: 100%; }
    .actions form { width: 100%; }
    .actions input[type="text"] { flex: 1; width: auto; }

    .mod-item { flex-direction: column; }

    /* Превью во всю высоту экрана уводило кнопки решения за сгиб:
       на телефоне модерация — это «посмотрел и нажал», без прокрутки. */
    .mod-preview img {
        width: 100%;
        height: auto;
        max-height: 45vh;
        object-fit: contain;
    }

    /* Пояснения к экрану полезны один раз, а место занимают всегда. */
    .page-note { display: none; }

    .dialog-layout { grid-template-columns: 1fr; }
    .msg { max-width: 100%; }
}

/* ============================== лайтбокс ============================== */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 10, 14, .92);
}

.lightbox.on { display: flex; }

body.lb-open { overflow: hidden; }

.lb-stage {
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-stage img, .lb-stage video {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 8px;
}

.lb-close, .lb-prev, .lb-next {
    position: fixed;
    background: rgba(255, 255, 255, .08);
    border: none;
    color: #e8eaee;
    font-size: 1.6rem;
    line-height: 1;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: none;
}

.lb-close:hover, .lb-prev:hover, .lb-next:hover {
    background: rgba(255, 255, 255, .18);
    border: none;
}

.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

.lb-counter {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: #98a2b3;
    font-size: .85rem;
}

/* Инлайн-видео в просмотрщике и карточках */
.outputs video, .pair-item video {
    max-width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #000;
}

.outputs video { max-width: 340px; }