/* ============================================================================
   ROCKSTONES CRM — ПАЛИТРА «БУМАГА»
   Единственный источник цвета для всего проекта.
   Компоненты не содержат хардкод-цветов: только эти переменные
   (напрямую или через утилиты Tailwind, перекартированные в base.html).
   ============================================================================ */

:root {
    /* --- Базовая палитра ------------------------------------------------ */
    --page:  #E9E9E4;   /* фон страницы, самый дальний слой                 */
    --card:  #FBFBF8;   /* фон карточек, панелей, секций, шапки             */
    --ink:   #26262A;   /* основной текст, заголовки                        */
    --muted: #5C5C56;   /* вторичный текст, подписи, плейсхолдеры           */
    --line:  #DCDCD4;   /* границы, разделители, обводки инпутов            */
    --brand: #3A3A3C;   /* логотип, акценты, активные состояния             */

    /* Те же цвета в виде RGB-каналов — нужны Tailwind и rgb()/alpha,
       чтобы работали модификаторы прозрачности (bg-white/60 и т.п.).
       Значения обязаны совпадать с hex выше. */
    --page-rgb:  233 233 228;
    --card-rgb:  251 251 248;
    --ink-rgb:    38  38  42;
    --muted-rgb:  92  92  86;
    --line-rgb:  220 220 212;
    --brand-rgb:  58  58  60;

    /* --- Акцентные цвета -------------------------------------------------
       Слой поверх «Бумаги»: фон, текст и рамки остаются нейтральными,
       цвет несут только смысловые элементы — кнопки, статусы, графики.
       Светлота подобрана так, чтобы каждый цвет давал >= 4.5:1 и как текст
       на --card/--page, и как заливка под текстом --card. */
    --accent:  #2D5BA1;   /* основные действия, ссылки, активные состояния */
    --success: #266843;   /* оплачено, отгружено, подтверждено             */
    --warning: #7B5410;   /* ожидает, требует внимания                     */
    --danger:  #A23634;   /* ошибки, долги, отмена, удаление               */
    --info:    #156662;   /* нейтральная информация                        */
    --violet:  #694AA4;   /* дополнительный оттенок для серий графиков     */
    --rose:    #9A3961;
    --olive:   #536125;

    --accent-rgb:   45  91 161;
    --success-rgb:  38 104  67;
    --warning-rgb: 123  84  16;
    --danger-rgb:  162  54  52;
    --info-rgb:     21 102  98;
    --violet-rgb:  105  74 164;
    --rose-rgb:    154  57  97;
    --olive-rgb:    83  97  37;

    /* Затемнение на hover — тот же тон, ступень вниз. */
    --accent-hover:  #23477E;
    --success-hover: #1E5134;
    --warning-hover: #60420C;
    --danger-hover:  #7E2A29;
    --info-hover:    #10504C;
    --violet-hover:  #523A80;
    --rose-hover:    #782C4C;
    --olive-hover:   #414C1D;

    /* Подложки бейджей: цвет с прозрачностью поверх слоя.
       Текст на них — тот же цвет в полную силу (проверено, >= 4.5:1). */
    --accent-soft:  rgb(var(--accent-rgb)  / .10);
    --success-soft: rgb(var(--success-rgb) / .10);
    --warning-soft: rgb(var(--warning-rgb) / .10);
    --danger-soft:  rgb(var(--danger-rgb)  / .10);
    --info-soft:    rgb(var(--info-rgb)    / .10);

    /* --- Тени: очень мягкие, нейтрально-холодные, без тёплого оттенка --- */
    --shadow-sm: 0 1px 2px rgb(var(--ink-rgb) / .06);
    --shadow:    0 1px 2px rgb(var(--ink-rgb) / .06),
                 0 8px 24px rgb(var(--ink-rgb) / .05);
    --shadow-lg: 0 1px 2px rgb(var(--ink-rgb) / .06),
                 0 16px 40px rgb(var(--ink-rgb) / .07);
    --shadow-inset: inset 0 1px 2px rgb(var(--ink-rgb) / .04);

    /* --- Производные состояния (только из палитры) ---------------------- */
    --overlay:      rgb(var(--ink-rgb) / .45);   /* затемнение под модалкой */
    --focus-ring:   rgb(var(--accent-rgb) / .28); /* кольцо фокуса          */
    --hover-tint:   rgb(var(--ink-rgb) / .04);   /* лёгкая подсветка строки */
    --active-tint:  rgb(var(--ink-rgb) / .07);

    /* --- Лестница для графиков ------------------------------------------
       Серии различаются тоном, а не только светлотой: на плотных диаграммах
       восемь оттенков одного графита становятся неразличимы.
       Порядок подобран так, чтобы соседние серии контрастировали по тону.
       Сетка и оси остаются нейтральными, чтобы не спорить с данными. */
    --chart-1: var(--accent);
    --chart-2: var(--success);
    --chart-3: var(--warning);
    --chart-4: var(--danger);
    --chart-5: var(--violet);
    --chart-6: var(--info);
    --chart-7: var(--rose);
    --chart-8: var(--olive);
    --chart-grid: rgb(var(--line-rgb));
    --chart-axis: rgb(var(--muted-rgb));
}

/* ===== Базовые слои ======================================================
   Правило глубины: --page (страница) темнее, чем --card (блоки на ней). */
html {
    background-color: var(--page);
    color: var(--ink);
}

body {
    background-color: var(--page);
    color: var(--ink);
}

/* Текст на любом слое — --ink, вторичный — --muted. */
h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
}

hr {
    border-color: var(--line);
}

::placeholder {
    color: var(--muted);
    opacity: 1;
}

::selection {
    background-color: rgb(var(--accent-rgb) / .18);
    color: var(--ink);
}

/* Кольцо фокуса — акцентное: его задача выделяться на любом слое. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ===== Без градиентов ====================================================
   Палитра принципиально монохромная и плоская. Любые утилиты
   bg-gradient-* / from-* / via-* / to-* сводятся к плоской заливке,
   чтобы старая разметка не протаскивала цветные переливы.
   Подложка задаётся через :where() (нулевая специфичность), поэтому
   явный bg-утилита на том же элементе продолжает выигрывать. */
[class*="bg-gradient-"] {
    background-image: none !important;
}

:where([class*="bg-gradient-"]) {
    background-color: var(--card);
}

/* ===== Логотип ===========================================================
   SVG-файлы не трогаем: заливка идёт от currentColor, который здесь
   задаётся из --brand. Любой inline-svg внутри унаследует цвет. */
.logo,
.header-logo,
.footer-logo,
.brand-mark {
    color: var(--brand);
}

.logo svg,
.header-logo svg,
.footer-logo svg,
.brand-mark svg {
    fill: currentColor;
    color: inherit;
}

/* Растровый логотип (PNG) не умеет currentColor — приводим его к графиту
   обесцвечиванием, чтобы он не выбивался из монохромной схемы. */
.logo-raster {
    filter: grayscale(1) contrast(1.02);
}

/* У иконок с обводкой (stroke="currentColor") заливка не нужна. */
.logo svg[fill="none"],
.header-logo svg[fill="none"],
.footer-logo svg[fill="none"],
.brand-mark svg[fill="none"] {
    fill: none;
    stroke: currentColor;
}

/* Пока Alpine не инициализировался, боковое меню скрыто — иначе на мобильных
   оно на миг показывается в открытом состоянии. */
[x-cloak] {
    display: none !important;
}

/* Атрибут hidden в браузерных стилях имеет нулевую специфичность, поэтому
   любой display у компонента его перебивал: заглушки «нет данных» и
   закрытые модалки оставались видимыми. Здесь он снова означает «скрыто». */
[hidden] {
    display: none !important;
}

/* Выдвижение бокового меню описано обычным CSS, а не утилитами Tailwind:
   у CDN-сборки transform собирается из --tw-* переменных, где углы заданы
   без единиц (rotate(0)), из-за чего вся функция невалидна и не применяется. */
.app-sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease-out;
}

.app-sidebar.is-open {
    transform: translateX(0);
}

/* На десктопе меню всегда на месте. */
@media (min-width: 768px) {
    .app-sidebar {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar {
        transition: none;
    }
}

/* ===== Боковое меню ======================================================
   Пункт меню: обычный — вторичный текст, активный — графитовая плашка
   (--brand как «активное состояние» по спецификации палитры). */
.nav-item {
    color: var(--muted);
}

.nav-item:hover {
    background-color: var(--page);
    color: var(--ink);
}

/* Активный пункт — акцентная плашка: так текущий раздел виден сразу,
   а не считывается только по чуть более тёмному серому. */
.nav-item-active,
.nav-item-active:hover {
    background-color: var(--accent);
    color: var(--card);
}

/* Иконка наследует цвет пункта */
.nav-item svg {
    color: inherit;
}

/* ===== Скроллбар ========================================================= */
* {
    scrollbar-color: var(--line) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--line);
    border-radius: 999px;
    border: 2px solid var(--page);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--muted);
}

/* ===== Кнопки ============================================================
   Основная — акцентная заливка, текст --card. Вторичная остаётся
   нейтральной: цвет закреплён за действием, а не за каждым элементом,
   иначе акцент перестаёт читаться как акцент. */
.btn-primary,
.btn-brand {
    background-color: var(--accent);
    color: var(--card);
    border: 1px solid var(--accent);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-brand:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--card);
}

.btn-secondary,
.btn-outline {
    background-color: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}

.btn-secondary:hover,
.btn-outline:hover {
    background-color: var(--hover-tint);
    color: var(--ink);
    border-color: var(--line);
}

/* Смысловые кнопки: цвет соответствует последствию действия. */
.btn-success {
    background-color: var(--success);
    color: var(--card);
    border: 1px solid var(--success);
    box-shadow: var(--shadow-sm);
}

.btn-success:hover {
    background-color: var(--success-hover);
    border-color: var(--success-hover);
}

.btn-warning {
    background-color: var(--warning);
    color: var(--card);
    border: 1px solid var(--warning);
    box-shadow: var(--shadow-sm);
}

.btn-warning:hover {
    background-color: var(--warning-hover);
    border-color: var(--warning-hover);
}

.btn-danger {
    background-color: var(--danger);
    color: var(--card);
    border: 1px solid var(--danger);
    box-shadow: var(--shadow-sm);
}

.btn-danger:hover {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
}

/* ===== Смысловой текст и подложки ========================================
   Подложка — цвет с прозрачностью .12, текст — тот же цвет в полную силу. */
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.text-info    { color: var(--info); }
.text-accent  { color: var(--accent); }

.badge-success { background-color: var(--success-soft); color: var(--success); }
.badge-warning { background-color: var(--warning-soft); color: var(--warning); }
.badge-danger  { background-color: var(--danger-soft);  color: var(--danger); }
.badge-info    { background-color: var(--info-soft);    color: var(--info); }
.badge-accent  { background-color: var(--accent-soft);  color: var(--accent); }

/* Ссылки в контенте — акцентные, чтобы отличались от обычного текста. */
.prose a,
.content-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover,
.content-link:hover {
    color: var(--accent-hover);
}

/* ===== Формы =============================================================
   Браузер по умолчанию красит поля в чистый белый — он ярче, чем --card,
   и выбивается из схемы. Приводим к слою карточки. */
input,
select,
textarea {
    background-color: var(--card);
    color: var(--ink);
    border-color: var(--line);
}

/* Чекбоксы, радио и прогресс — акцентные. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--accent);
}

/* Кнопки без единого класса не должны оставаться серыми системными.
   :where() даёт нулевую специфичность — любой класс перебьёт это правило. */
:where(button:not([class])) {
    background-color: transparent;
    color: inherit;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Календарь flatpickr — приводим к палитре, а не к его синей теме. */
.flatpickr-calendar {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekday {
    background: var(--card);
    color: var(--ink);
    fill: var(--ink);
}

.flatpickr-weekday {
    color: var(--muted);
}

.flatpickr-day {
    color: var(--ink);
    border-radius: 8px;
}

.flatpickr-day:hover {
    background: var(--page);
    border-color: var(--line);
}

.flatpickr-day.today {
    border-color: var(--accent);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--card);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--muted);
    opacity: .55;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--accent);
}

/* ===== Печать ============================================================
   На бумаге фон не печатается — оставляем чистый лист и графитовый текст. */
@media print {
    html,
    body {
        background: #FBFBF8;
        color: #26262A;
    }
}

/* ===== Модалка выбора оформления ==========================================
   Все цвета — из переменных темы, поэтому окно перекрашивается вместе
   с остальным интерфейсом прямо во время выбора. */
.theme-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* dvh учитывает адресную строку мобильного браузера: с обычным vh
       низ окна вместе с кнопкой «Готово» уезжает под её панель.
       max-height, а не height: на десктопе правило ничего не меняет,
       а на телефоне подрезает контейнер до видимой части экрана. */
    max-height: 100dvh;
}

.theme-modal[hidden] { display: none; }

.theme-modal__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay);
}

.theme-modal__panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.theme-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line);
}

.theme-modal__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.theme-modal__hint {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
}

.theme-modal__hint--tight { margin-top: 10px; }

.theme-modal__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.theme-modal__close:hover {
    background: var(--hover-tint);
    color: var(--ink);
}

.theme-modal__body {
    padding: 18px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.theme-group__label {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

/* Кнопка темы показывает саму себя: её фон, текст и рамка — из этой темы */
.theme-swatch {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid;
    border-radius: 11px;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: box-shadow .15s, transform .12s;
}

.theme-swatch:active { transform: scale(.985); }

.theme-swatch[aria-checked="true"] {
    box-shadow: 0 0 0 2px var(--accent);
}

.theme-swatch__chips {
    display: inline-flex;
    flex: none;
}

.theme-swatch__chips span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(128 128 128 / .35);
}

.theme-swatch__chips span + span { margin-left: -5px; }

.theme-swatch__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.theme-color {
    width: 34px;
    height: 34px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow .15s, transform .12s;
}

.theme-color:active { transform: scale(.92); }

.theme-color span {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(128 128 128 / .35);
}

.theme-color[aria-checked="true"] {
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}

/* «Как в теме» — цвет не задан, показываем букву вместо кружка */
.theme-color--auto {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    background: var(--page);
}

.theme-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 20px;
    border-top: 1px solid var(--line);
}

.theme-modal__status {
    font-size: 12.5px;
    color: var(--muted);
    min-height: 1em;
}

.theme-modal__done {
    padding: 8px 16px;
    border: 1px solid var(--accent);
    border-radius: 9px;
    background: var(--accent);
    color: var(--card);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.theme-modal__done:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* ===== Модалка на телефоне ================================================
   Порог 640px, а не 480: в альбомной ориентации и на крупных телефонах
   окно по центру упирается в края, и его удобнее показывать «шторкой»
   снизу — ближе к большому пальцу и без прыжков при показе клавиатуры. */
@media (max-width: 640px) {
    .theme-modal {
        padding: 0;
        align-items: flex-end;
    }

    .theme-modal__panel {
        max-width: none;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
        max-height: 92vh;
        max-height: 92dvh;
    }

    /* Шапка остаётся на месте при прокрутке содержимого */
    .theme-modal__head {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--card);
        padding: 14px 16px 12px;
    }

    .theme-modal__body {
        padding: 16px;
        gap: 18px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .theme-modal__foot {
        padding: 12px 16px;
        /* запас под системный индикатор жестов */
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    /* Две колонки тем на любом телефоне; на совсем узких — одна */
    .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Цели нажатия по рекомендации в 44px */
    .theme-swatch { padding: 11px 12px; }
    .theme-color { width: 44px; height: 44px; }
    .theme-modal__close { width: 36px; height: 36px; }
    .theme-modal__done { padding: 11px 18px; font-size: 14px; }
}

@media (max-width: 360px) {
    .theme-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-swatch,
    .theme-color { transition: none; }
}