/* Спільні CSS-змінні та базові стилі для всіх сторінок реєстру */
:root {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --panel-bg: #2d2d2d;
    --text-main: #ffffff;
    --text-muted: #aaaaaa;
    --accent: #bb86fc;
    --accent-hover: #9965f4;
    --border-color: #444;
    --movie-color: #ffb74d;
    --series-color: #64b5f6;
    /* Попередження про несправність (смужка .lc-warn). Окремі змінні, а не --accent:
       це не стан інтерфейсу, а поломка, і читатись вона має інакше */
    --warn-bg: #4a3410;
    --warn-fg: #ffd48a;
    --warn-line: #e0a030;
}

:root.light-theme {
    --bg-color: #f5f5f5;
    --card-bg: #ffffff;
    --panel-bg: #e0e0e0;
    --text-main: #121212;
    --text-muted: #555555;
    --accent: #6200ea;
    --accent-hover: #3700b3;
    --border-color: #cccccc;
    --warn-bg: #fff3e0;
    --warn-fg: #7a4406;
    --warn-line: #c77b0c;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 20px;
    transition: background-color 0.3s, color 0.3s;
}

/* --- Шапка хаб-сторінок: заголовок + меню (канон порядку — в CLAUDE.md) --- */
.header-actions {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
}
.header-actions h1 { margin: 0; }
.header-small-btn {
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border-color); border-radius: 6px;
    padding: 6px 12px; font-size: 0.85em; cursor: pointer;
    transition: 0.2s; text-decoration: none; display: inline-flex;
    align-items: center; justify-content: center; white-space: nowrap;
}
.header-small-btn:hover { color: var(--accent); border-color: var(--accent); }
#themeToggle { width: 40px; height: 40px; border-radius: 50%; font-size: 1.2em; }

/* --- Кнопка «наверх» (JS перемикає клас .show) --- */
#scrollTopBtn {
    position: fixed; bottom: 30px; right: 30px;
    background-color: var(--accent); color: #ffffff;
    border: none; border-radius: 50%;
    width: 50px; height: 50px; font-size: 1.5em;
    cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    z-index: 1000;
    opacity: 0; visibility: hidden; transform: translateY(20px);
    transition: all 0.3s ease;
    display: flex; align-items: center; justify-content: center;
}
#scrollTopBtn.show { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; }
#scrollTopBtn:hover { background-color: var(--accent-hover); transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,0.5); }

/* --- Плашки років/місяців (stats, year) --- */
.heat-chip {
    padding: 4px 13px; border-radius: 20px; font-size: 0.88em;
    border: 1px solid var(--border-color); background: var(--card-bg);
    color: var(--text-muted); cursor: pointer; transition: 0.2s;
}
.heat-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.heat-chip:hover:not(.active) { border-color: var(--accent); color: var(--accent); }

/* --- Картки рекордів (stats, year) --- */
.record-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}
.record-card {
    background: var(--card-bg); border-radius: 8px; padding: 14px 16px;
    display: flex; align-items: center; gap: 14px;
}
.record-card .icon { font-size: 1.9em; }
.record-card .val { font-weight: bold; color: var(--text-main); font-size: 1.05em; }
.record-card .sub { color: var(--text-muted); font-size: 0.8em; margin-top: 2px; }
.record-card a { color: var(--text-main); text-decoration: none; }
.record-card a:hover { color: var(--accent); }

/* --- Службові написи --- */
.loading-msg { color: var(--text-muted); text-align: center; padding: 30px; }
.empty-msg { color: var(--text-muted); padding: 4px 0; }

/* --- Смужка «твій список не завантажився» (list-client.js, УСІ сторінки) ---
   Малюється сама з `load()`, а не з коду сторінки: правило, яке треба не забути
   додати на нову сторінку, — це правило, яке одного дня забудуть (index має власний
   #listNotice і малює багатший текст, тому там смужка відступає) */
.lc-warn {
    padding: 9px 16px; font-size: 0.9em; line-height: 1.45;
    background: var(--warn-bg); color: var(--warn-fg);
    border-bottom: 1px solid var(--warn-line);
}

/* --- Банер активного таймера перегляду (watch-timer.js, усі сторінки крім картки) --- */
.wt-banner {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    padding: 7px 14px; font-size: 0.88em;
    background: var(--card-bg); color: var(--text-main);
    border-bottom: 1px solid var(--accent);
}
.wt-banner a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.wt-banner a:hover { text-decoration: underline; }
.wt-banner .wt-x, .wt-banner .wt-fold {
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-muted); border-radius: 5px; padding: 1px 7px; font-size: 0.95em; cursor: pointer;
}
.wt-banner .wt-x:hover, .wt-banner .wt-fold:hover { color: var(--accent); border-color: var(--accent); }
/* Згорнутий стан: не смужка, а тиха пігулка у ПРАВОМУ ВЕРХНЬОМУ кутку;
   з потоку виходить, тож контент сторінки не зсувається */
.wt-banner.wt-folded {
    position: fixed; top: 14px; right: 18px; z-index: 1000;
    width: fit-content; padding: 3px 10px; gap: 0;
    border: 1px solid var(--border-color); border-radius: 20px;
    opacity: 0.4; transition: opacity 0.2s;
}
.wt-banner.wt-folded:hover { opacity: 1; }
.wt-banner .wt-mini {
    background: transparent; border: none; color: var(--text-muted);
    font-size: 0.75em; padding: 0 2px; cursor: pointer; font-family: inherit;
}
.wt-banner .wt-mini:hover { color: var(--accent); }

/* --- ФОРМА В ГЛЯДАЦЬКОМУ РЕЖИМІ (2026-08-13) ---
   Глядач із власним списком редагує ТІЛЬКИ своє: статус, оцінки, сеанси. Каталожні
   поля (їх веде власник бази) позначені `data-catalog` у розмітці й гасяться тут.
   pointer-events, а не лише disabled: усередині цих блоків є контейнери, які форма
   заповнює вже ПІСЛЯ блокування (назви, персонажі, події) — атрибут на них не потрапив
   би, а правило каскаду накриває і майбутні вузли */
.catalog-locked { opacity: 0.5; pointer-events: none; }
/* Спільне поле каталогу у глядача: редагувати МОЖНА, але зміна піде заявкою на розгляд
   (proposeCatalogEdits у shared-form.js). Тому не замок, а ледь помітна межа — вона
   відрізняє «моє, збережеться одразу» від «спільне, чекатиме на власника» */
.catalog-proposable { border-left: 2px solid var(--border-color); padding-left: 10px; }
.catalog-proposable:focus-within { border-left-color: var(--accent); }
.catalog-locked input, .catalog-locked select, .catalog-locked textarea { cursor: not-allowed; }
/* Пояснення, чому половина форми сіра — інакше це виглядає як поламана сторінка */
.list-only-note {
    background: rgba(126, 87, 194, 0.12); border: 1px solid var(--accent);
    border-radius: 8px; padding: 10px 14px; margin-bottom: 20px;
    color: var(--text-main); font-size: 0.92em; line-height: 1.5;
}


/* ===== ЗАПРОШЕННЯ ЗАВЕСТИ СПИСОК =====
   Сторінки Статистика / Календар / Підсумки рахують ОСОБИСТЕ. Гостю без списку вони
   показували нулі й порожній хітмап — це читається як зламаний сайт, а не як «тут поки
   нічого твого». Банер ставить readonly.js (там же живе прапорець __noPersonal) */
.no-list-invite {
    max-width: 760px;
    margin: 20px auto;
    padding: 18px 20px;
    background: var(--panel-bg);
    border: 1px solid var(--accent);
    border-radius: 12px;
    line-height: 1.55;
}
.no-list-invite h3 { margin: 0 0 8px; font-size: 1.1em; color: var(--accent); }
.no-list-invite p { margin: 0 0 12px; color: var(--text-muted); }
.no-list-invite button {
    padding: 9px 18px;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 0.95em;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}
.no-list-invite button:hover:not(:disabled) { background: var(--accent); color: #fff; }
.no-list-invite button:disabled { opacity: 0.6; cursor: default; }
.no-list-invite code {
    display: block;
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--bg-color);
    border-radius: 6px;
    font-size: 0.8em;
    word-break: break-all;
}

/* ===== ТЕЛЕФОН =====
   У shared.css не було ЖОДНОГО медіа-запиту, хоча шапка з меню стоїть на всіх
   сторінках: на вузькому екрані кнопки не влазили в рядок і розпихали сторінку
   вшир. Правила тут — спільні для всіх; сторінкові особливості лишаються в самих
   сторінках (як мобільна верстка картки у view.html) */
@media (max-width: 700px) {
    body { padding: 12px; }

    .header-actions {
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-start;
    }
    .header-actions h1 { font-size: 1.35em; }

    /* Меню розділів: горизонтальна стрічка з прокруткою замість переносу на
       три ряди — так воно займає один рядок і не з'їдає перший екран */
    .header-small-btn {
        font-size: 0.78em;
        padding: 5px 9px;
        white-space: nowrap;
    }

    /* Довгі рядки даних не мають розпихати сторінку вшир */
    table, pre { max-width: 100%; overflow-x: auto; display: block; }
}

/* ===== АТРИБУЦІЯ ДЖЕРЕЛ =====
   Умова ліцензії TMDB (логотип + їхній рядок). Підвал тьмяний і дрібний свідомо:
   це юридична вимога, а не частина інтерфейсу, і він не має конкурувати з даними */
.source-attribution {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 900px;
    margin: 40px auto 10px;
    padding: 14px 16px 0;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.78em;
    line-height: 1.5;
    text-align: center;
}
.attr-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.attr-legal { opacity: 0.75; }
@media (max-width: 700px) {
    .attr-text { text-align: center; }
}
.source-attribution a { color: var(--text-muted); text-decoration: underline; }
.source-attribution a:hover { color: var(--accent); }

/* Черга офлайн-записів: та сама смужка, що .lc-warn, але це НЕ помилка — дані
   цілі й чекають на мережу, тож колір спокійніший за попереджувальний */
.lc-queue {
    background: var(--panel-bg);
    border-color: var(--accent);
    color: var(--text-muted);
}

/* Кнопки в смужці черги (↻ Спробувати ще / ✕ Відкинути). Розміри явні: сторінкові
   стилі форм задають input/button ширину 100%, і без цього кнопка розтягнулась би
   на весь рядок — та сама вада, що ловилась у модалці 💬 */
.lc-q-btn {
    display: inline-block; width: auto; margin-left: 6px;
    padding: 2px 9px; font-size: 0.92em; font-family: inherit; line-height: 1.5;
    background: transparent; color: inherit;
    border: 1px solid currentColor; border-radius: 4px; cursor: pointer;
}
.lc-q-btn:hover { background: rgba(128, 128, 128, 0.22); }

/* Підказка сеансу (.watch-hint, shared-form.js) стоїть у DOM ПІСЛЯ ✖ — інакше блок на
   всю ширину виштовхує кнопку на власний рядок. На вузькому екрані рядок сеансу і так
   стає стовпчиком, і там ✖ — широка червона смуга: підказка під нею відривається від
   дат, про які говорить. Тому на мобільному кнопка йде останньою, а підказка лишається
   одразу під датами. Той самий поріг, що в мобільних блоках обох форм (768px). */
@media (max-width: 768px) {
    .watch-row .btn-remove { order: 1; }
}