/* ==============================================================
   Общие стили приложения.
   Стилизация имитирует внешний вид исходного Shiny-приложения
   на базе shinydashboard: бирюзовая шапка, тёмный сайдбар,
   "боксы" с цветным заголовком под контент.
   Цветовая палитра взята из www/custom.css оригинального проекта.
   ============================================================== */

:root {
    /* Фирменный бирюзовый — используется в шапке, заголовках боксов,
       активной подсветке меню. */
    --color-plst: #31abbd;
    --color-plst-dark: #2a96a6;

    /* Тёмные тона сайдбара — повторяют shinydashboard skin. */
    --color-sidebar: #222d32;
    --color-sidebar-hover: #1e282c;
    --color-sidebar-text: #b8c7ce;

    /* Геометрия фиксированных элементов. Меняя эти переменные,
       можно перекомпоновать весь макет без правок разметки. */
    --sidebar-width: 230px;
    --header-height: 50px;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #ecf0f5;   /* светло-серый фон контентной области */
    color: #333;
}

/* ==============================================================
   Шапка приложения (фиксированная сверху, на всю ширину).
   ============================================================== */
.app-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-height);
    background: var(--color-plst);
    color: #fff;
    display: flex;
    align-items: center;
    z-index: 1030;         /* выше контента и сайдбара */
}

/* Кнопка "гамбургер" для сворачивания сайдбара. */
.app-header .sidebar-toggle {
    background: transparent;
    border: 0;
    color: #fff;
    height: var(--header-height);
    width: 50px;
    font-size: 1.15rem;
    cursor: pointer;
}

.app-header .sidebar-toggle:hover {
    background: var(--color-plst-dark);
}

/* Растяжимый заполнитель — забирает свободное место справа,
   чтобы шапка корректно растянулась. */
.app-header .app-header-spacer {
    flex: 1 1 auto;
}

/* Логотип-картинка в левом верхнем углу.
   Картинка белая на прозрачном фоне, ложится на бирюзовую шапку.
   Чтобы логотип не уезжал под сайдбар и не казался "висящим в воздухе",
   его ширина равна ширине сайдбара (var(--sidebar-width)) —
   визуально он занимает ту же колонку, что и меню слева. */
.app-header .app-logo-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sidebar-width);
    height: var(--header-height);
    padding: 0 15px;
    text-decoration: none;
    background: var(--color-plst);
}

.app-header .app-logo-left img {
    max-height: 32px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

.app-header .app-logo-left:hover {
    background: var(--color-plst-dark);
}

/* В режиме без сайдбара логотип не растягивается на ширину сайдбара —
   показываем его как обычный блок слева с небольшим отступом. */
body.no-sidebar .app-header .app-logo-left {
    width: auto;
    justify-content: flex-start;
}

/* ==============================================================
   Боковая панель (сайдбар).
   Отображается только при наличии меню (see sidebar.twig);
   для неавторизованных пустая тёмная колонка, как в оригинале.
   ============================================================== */
.app-sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--color-sidebar);
    color: var(--color-sidebar-text);
    overflow-y: auto;      /* прокрутка при длинном меню */
    z-index: 1020;
}

/* "Плашка" пользователя над меню. */
.app-sidebar .user-panel {
    padding: 12px 15px;
    border-bottom: 1px solid #1a2226;
    font-size: 0.95rem;
}

.app-sidebar .user-panel .user-name {
    color: #fff;
    font-weight: 500;
}

.app-sidebar .user-panel .user-status {
    color: var(--color-sidebar-text);
    font-size: 0.85rem;
}

/* Ссылка "Выход" под именем пользователя.
   Рендерится как <button> внутри <form method="post">, поэтому
   сбрасываем дефолтные стили кнопки и оформляем как ссылку. */
.app-sidebar .user-logout-form {
    margin: 0;
}
.app-sidebar .user-logout-link {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--color-sidebar-text);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}
.app-sidebar .user-logout-link:hover {
    color: #fff;
}

/* Список пунктов меню. */
.app-sidebar .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-sidebar .menu > li > a {
    display: block;
    padding: 12px 15px 12px 18px;
    color: var(--color-sidebar-text);
    text-decoration: none;
    border-left: 3px solid transparent; /* полоска активного пункта */
    font-size: 0.95rem;
}

/* hover и активный пункт — с подсветкой слева фирменным цветом. */
.app-sidebar .menu > li > a:hover,
.app-sidebar .menu > li.active > a {
    background: var(--color-sidebar-hover);
    color: #fff;
    border-left-color: var(--color-plst);
}

.app-sidebar .menu > li > a i {
    width: 20px;
    margin-right: 8px;
    text-align: center;
}

/* ==============================================================
   Основная контентная область.
   Отступы слева и сверху равны размерам сайдбара и шапки,
   чтобы контент не заезжал под них.
   ============================================================== */
.app-main {
    margin-left: var(--sidebar-width);
    margin-top: var(--header-height);
    padding: 15px;
    min-height: calc(100vh - var(--header-height));
}

/* Режим свёрнутого сайдбара — включается JS, добавляющим
   класс .sidebar-collapsed на <body>. */
body.sidebar-collapsed .app-sidebar { display: none; }
body.sidebar-collapsed .app-main { margin-left: 0; }

/* Режим "без сайдбара" — когда сайдбар вообще не рендерится
   (страница входа). Контент занимает всю ширину. Шапка при этом
   остаётся на месте, просто её левая часть — пустая. */
body.no-sidebar .app-main { margin-left: 0; }

/* ==============================================================
   "Бокс" — основной контейнер контента.
   Имитирует карточку shinydashboard с цветным заголовком.
   Используется для форм, таблиц и секций отчётов.
   ============================================================== */
.box {
    background: #fff;
    /* Тонкая цветная полоса сверху — для "обычных" (не solid) боксов. */
    border-top: 3px solid var(--color-plst);
    border-radius: 0;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
}

/* Вариант box-solid: вся шапка заливается цветом, тонкой полосы нет. */
.box.box-solid {
    border-top: 0;
}

.box-header {
    padding: 10px 15px;
    background: var(--color-plst);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.box-header .box-title {
    font-size: 1.05rem;
    font-weight: 400;
    margin: 0;
}

.box-body {
    padding: 15px;
}

/* ==============================================================
   Форма входа (узкий бокс по центру-слева).
   ============================================================== */
.login-box {
    max-width: 540px;
    margin: 10px 0 0 0;
}

/* ==============================================================
   Таблицы в стиле оригинала (class="table-plst").
   Используются для истории выплат, долей, отчётов.
   ============================================================== */
.table-plst {
    width: 100%;
    border-collapse: collapse;
}

.table-plst thead th {
    font-weight: 600;
    border-bottom: 2px solid #3c8dbc;
    padding: 0.5rem;
    text-align: left;
    white-space: nowrap;
}

.table-plst tbody td {
    padding: 0.4rem 0.5rem;
    vertical-align: top;
    border-bottom: 1px solid #f0f0f0;
}

/* Подсветка строки при наведении. */
.table-plst tbody tr:hover {
    background-color: #def3ff;
}

/* Выравнивание числовых колонок по правому краю читабельнее. */
.table-plst .num {
    text-align: right;
    white-space: nowrap;
}

/* ==============================================================
   Карточка релиза в сетке "Релизы".
   Повторяет releasesItem() из R/moduleReleases.R:20 —
   бирюзовый заголовок, квадратная обложка, имя артиста под ней.
   ============================================================== */
.release-card {
    background: #fff;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    cursor: pointer;
    transition: transform .1s;
}

.release-card:hover {
    transform: translateY(-2px);
}

.release-card .release-title {
    background: var(--color-plst);
    color: #fff;
    padding: 6px 10px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.release-card .release-cover {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;       /* всегда квадрат, даже если картинка не загрузилась */
    object-fit: cover;
    background: #eee;
}

.release-card .release-artist {
    padding: 6px 10px;
    font-size: 0.85rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==============================================================
   Таблица информации о релизе внутри модалки.
   Колонка-лейбл — обычный вес, колонка-значение — жирнее
   (повторяет renderReleasTable() из R/moduleReleases.R:105).
   ============================================================== */
.release-info-table {
    width: 100%;
    border-collapse: collapse;
}

.release-info-table td {
    padding: 4px 8px;
    vertical-align: top;
}

.release-info-table td:first-child {
    color: #888;
    white-space: nowrap;
    width: 35%;
}

.release-info-table td:last-child {
    font-weight: 600;
}

/* ==============================================================
   Страница "Начисления/выплаты".
   Фильтры оформлены мягкими боксами без заливки заголовка
   (в оригинале status="orange" давал светлую границу —
   см. R/moduleFilterPay.R:10).
   ============================================================== */
.filter-box {
    background: #fff;
    border-top: 3px solid #f39c12;   /* оранжевая полоса, как tabStatus$orange */
    padding: 12px 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
}

.filter-box label {
    font-weight: 600;
    margin-bottom: 6px;
}

/* Tom Select: согласование цветов чипов с темой приложения.
   По умолчанию bootstrap5-тема рисует чипы в сером —
   перекрашиваем в бирюзовый. */
.ts-wrapper.multi .ts-control > .item {
    background-color: var(--color-plst);
    color: #fff;
    border: 0;
}
.ts-wrapper.multi .ts-control > .item.active {
    background-color: var(--color-plst-dark);
}
.ts-wrapper.multi .ts-control > .item .remove {
    border-left-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* "ValueBox" — крупный блок с суммой по фильтру. */
.value-box {
    background: #3c8dbc;   /* light-blue из оригинала (color="light-blue") */
    color: #fff;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
}

.value-box .value-box-num {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.value-box .value-box-label {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* ==============================================================
   Адаптив для узких экранов.
   На мобильных сайдбар прячется, показывается по классу
   .sidebar-open (JS-переключатель по кнопке в шапке).
   ============================================================== */
@media (max-width: 768px) {
    .app-sidebar { display: none; }
    .app-main { margin-left: 0; }
    body.sidebar-open .app-sidebar { display: block; }
}