/*
 * Визуальная система «Порядка».
 * Метафора — картотека/инвентарный ярлык: нейтральная «бумажная» подложка,
 * карточки с цветным корешком слева, акцент — сине-голубой «цвет печати»,
 * статусы вещи — отдельная светофорная палитра, не смешанная с акцентом.
 */

:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --ink: #1c2333;
    --muted: #667085;
    --border: #e2e5ea;

    --accent: #0284c7;
    --accent-strong: #0369a1;
    --accent-soft: #e0f2fe;

    --status-good: #059669;
    --status-good-soft: #ecfdf5;
    --status-warn: #d97706;
    --status-warn-soft: #fffbeb;
    --status-bad: #dc2626;
    --status-bad-soft: #fef2f2;
    --status-neutral: #667085;
    --status-neutral-soft: #f1f2f4;

    --radius-card: 14px;
    --font-body: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Unbounded', var(--font-body);

    --bs-primary: var(--accent);
    --bs-primary-rgb: 2, 132, 199;
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink);
    --bs-body-font-family: var(--font-body);
    --bs-border-color: var(--border);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-strong);
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    /* Длинное неразрывное слово (ссылка, артикул без пробелов) в любом
       месте страницы иначе может растянуть её по ширине и на мобильном
       сломать вертикальную прокрутку — подрезаем горизонтальный оверфлоу
       на уровне body как страховку. */
    overflow-x: hidden;
}

/*
 * Резиновый контейнер вместо жёсткого max-width:480px — на телефоне ведёт
 * себя точно так же, как раньше, но на планшете/ноутбуке/десктопе плавно
 * расширяется по шагам вместо того, чтобы вечно оставаться шириной с
 * телефон. .app-shell — обычные страницы (формы, карточка вещи и т.п.,
 * им незачем растягиваться на весь широкий экран — поле "Название" на
 * 1000px выглядело бы нелепо). .app-shell--wide — страницы-списки/плитки
 * (главная, комнаты, все вещи), где на большом экране есть что показать
 * в несколько колонок — сетки плиток уже сами умеют перестраиваться под
 * ширину контейнера (auto-fill/минмакс), так что тут просто даём им место.
 */
.app-shell {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 480px;
}
@media (min-width: 576px) {
    .app-shell { max-width: 540px; }
}
@media (min-width: 768px) {
    .app-shell { max-width: 640px; }
}
@media (min-width: 992px) {
    .app-shell { max-width: 680px; }
}

.app-shell.app-shell--wide {
    max-width: 480px;
}
@media (min-width: 576px) {
    .app-shell.app-shell--wide { max-width: 540px; }
}
@media (min-width: 768px) {
    .app-shell.app-shell--wide { max-width: 760px; }
}
@media (min-width: 992px) {
    .app-shell.app-shell--wide { max-width: 960px; }
}
@media (min-width: 1200px) {
    .app-shell.app-shell--wide { max-width: 1100px; }
}

h1, h2, h3, .brand {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

.brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
}

/* Карточка-«каталожная карта»: цветной корешок слева */
.card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(28, 35, 51, 0.04);
    /* Внутри вертикального flex-списка (.d-flex.flex-column) карточка сама
       тоже flex-элемент — без min-width:0 она отказывается сжиматься под
       длинный текст внутри (название/заметка без переносов), и хвост
       строки (например, кнопка удаления) вылезает за пределы экрана на
       телефоне. Это безопасно и вне flex-контекста — свойство просто не
       используется, если элемент не flex/grid-item. */
    min-width: 0;
}

/*
 * Bootstrap 5.3 не включает утилиту .min-w-0 — в проекте в нескольких
 * местах (packing-lists/show.php, items/kit.php и др.) на неё полагались,
 * думая, что это стандартный класс Bootstrap. Без определения правило
 * никогда не применялось: flex-элемент с длинным текстом не сжимался,
 * и text-truncate не срабатывал — сосед по строке (кнопка "+"/удалить)
 * выталкивался за экран на телефоне. Определяем сам класс один раз, а не
 * правим inline-style в каждом месте по отдельности.
 */
.min-w-0 {
    min-width: 0;
}

/*
 * Квадратные плитки-кнопки (иконка + подпись, aspect-ratio 1:1) — главная
 * страница ("Вещь", "Собрать", "Ссылки", "Настройки", списки для переезда)
 * и одноимённый вид на странице "Ссылки". Общий класс, чтобы оба места
 * выглядели идентично и не дублировали одну и ту же сетку.
 */
.pl-tile-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.pl-tile-grid > form,
.pl-tile-grid > a,
.pl-tile-grid > div {
    flex: 0 0 calc(50% - .25rem);
    max-width: calc(50% - .25rem);
}
@media (min-width: 560px) {
    .pl-tile-grid > form,
    .pl-tile-grid > a,
    .pl-tile-grid > div {
        flex-basis: calc(33.333% - .34rem);
        max-width: calc(33.333% - .34rem);
    }
}
@media (min-width: 760px) {
    .pl-tile-grid > form,
    .pl-tile-grid > a,
    .pl-tile-grid > div {
        flex-basis: calc(25% - .375rem);
        max-width: calc(25% - .375rem);
    }
}

/*
 * Три размера иконок на странице "Ссылки" (link-tile.php с разным
 * $tileSize) — своя адаптивная сетка (auto-fill), отдельная от .pl-tile-grid
 * выше (та осталась только для главной страницы, трогать её нельзя). Ширины
 * подобраны так, чтобы размер плитки на экране правда рос
 * small < medium < large, а не наоборот.
 */
.pl-icon-grid--small {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: .5rem;
}

.pl-icon-grid--medium {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: .5rem;
}

.pl-icon-grid--large {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
}

/*
 * Кнопка удаления ссылки — на плитках (link-tile.php) и в списке
 * (link-card.php) — видна только в режиме "Изменить ссылки" (body получает
 * класс links-editing из link-tabs.php). Один переключатель на оба вида,
 * а не своя логика в каждом.
 */
.link-tile__delete {
    display: none;
}
body.links-editing .link-tile__delete {
    display: block;
}

/* Сегментированная навигация вместо стандартных pill-кнопок Bootstrap */
.nav-pills {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px;
}

.nav-pills .nav-link {
    color: var(--muted);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
}

.nav-pills .nav-link.active {
    background: var(--accent);
    color: #fff;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

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

.btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
}

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

/* Статус-чип: точка + подпись — состояние читается и по форме, и по тексту, не только по цвету */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
}

.status-chip::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.status-good { background: var(--status-good-soft); color: var(--status-good); }
.status-warn { background: var(--status-warn-soft); color: var(--status-warn); }
.status-bad { background: var(--status-bad-soft); color: var(--status-bad); }
.status-neutral { background: var(--status-neutral-soft); color: var(--status-neutral); }

.item-thumb {
    border-radius: 10px;
    object-fit: cover;
}

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

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Самодельная модалка вместо нативного <dialog>/showModal() — на iOS в
   установленном как приложение (standalone) режиме showModal() иногда
   необратимо ломает прокрутку всей страницы (известный баг WebKit),
   и это лечится только перезапуском приложения. Обычный div с ручным
   управлением overflow работает надёжно. */
.app-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.app-modal-overlay.d-none {
    display: none;
}

.app-modal-panel {
    background: var(--surface);
    border-radius: var(--radius-card);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-modal-panel__body {
    overflow-y: auto;
}