/* Личный кабинет ПРИНТ-ФОТО.
 *
 * Мобильная вёрстка в первую очередь: кабинет открывают с телефона, часто
 * установленным как приложение. Ширина и колонки добавляются на больших
 * экранах, а не отнимаются на маленьких — так ничего не «схлопывается».
 *
 * Палитра и токены те же, что в форме заказа: для клиента это один сайт.
 */

:root {
    --pc-accent: #1D4ED8;
    --pc-accent-dark: #1E40AF;
    --pc-ink: #0F172A;
    --pc-muted: #64748B;
    --pc-line: #E2E8F0;
    --pc-soft: #F8FAFC;
    --pc-ok-bg: #DCFCE7;
    --pc-ok-ink: #166534;
    --pc-warn-bg: #FEF3C7;
    --pc-warn-ink: #92400E;
    --pc-err-bg: #FEE2E2;
    --pc-err-ink: #991B1B;

    /* Тона состояний заказа. Пять оттенков, а не пять светлот одного синего:
       «принята», «в работе» и «готов» человек должен различать не читая.
       Плотный — заливка плашки под белые буквы, светлый и чернильный — пара
       для строки события в переписке. Карта тонов одна на плашку и на чат:
       иначе «Готов» в шапке и «Заказ готов» в ленте окажутся разного цвета. */
    --pc-tone-wait: #0369A1;  --pc-tone-wait-bg: #E0F2FE;  --pc-tone-wait-ink: #075985;
    --pc-tone-work: #4338CA;  --pc-tone-work-bg: #E0E7FF;  --pc-tone-work-ink: #3730A3;
    --pc-tone-warn: #B45309;  --pc-tone-warn-bg: #FEF3C7;  --pc-tone-warn-ink: #92400E;
    --pc-tone-ok:   #15803D;  --pc-tone-ok-bg:   #DCFCE7;  --pc-tone-ok-ink:   #14532D;
    --pc-tone-calm: #475569;  --pc-tone-calm-bg: #F1F5F9;  --pc-tone-calm-ink: #475569;
}

* { box-sizing: border-box; }

.pc-body {
    margin: 0;
    background: var(--pc-soft);
    color: var(--pc-ink);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    /* Установленное приложение открывается под системными панелями:
       без отступов «Выйти» уезжает под чёлку, а низ — под полосу жестов. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
    -webkit-text-size-adjust: 100%;
}

/* ── Шапка ─────────────────────────────────────────────────────────────── */

.pc-top { background: var(--pc-accent); color: #fff; position: sticky; top: 0; z-index: 5; }
.pc-top__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
}
.pc-logo { color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .02em; }

/* Заголовок страницы в шапке. Длинное название заказа обрезаем: перенос на
   вторую строку двигает вниз весь экран, а он и так на счету.
   `flex: 1` — чтобы «На сайт» прижималось вправо. */
.pc-top__title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Выход на сайт салона. Мельче заголовка и без рамки: это не действие
   страницы, а дверь наружу. */
.pc-top__site {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 44px;
    padding-left: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    opacity: .9;
}
.pc-top__site:hover { opacity: 1; }
.pc-top__title--brand { font-weight: 700; letter-spacing: .02em; }

/* Стрелка «назад»: цель нажатия 44×44 при значке 24×24 — меньше палец не
   берёт, а мимо промахивается в заголовок. */
.pc-top__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -12px;
    color: #fff;
    text-decoration: none;
    flex: 0 0 auto;
}

/* ── Каркас ────────────────────────────────────────────────────────────── */

/* Снизу оставлено место под меню: без него последняя карточка уезжает под
   него, и «Выйти» на профиле нажимается через полосу жестов. */
.pc-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 16px calc(84px + env(safe-area-inset-bottom));
}
.pc-main--narrow { max-width: 460px; padding-bottom: 40px; }

/* Нижнее меню живёт в отдельном файле `cabinet-nav.css`: оно стоит и на
   страницах заказа, у которых своя таблица стилей. */

.pc-h1 { font-size: 24px; margin: 8px 0 2px; }
.pc-h2 { font-size: 18px; margin: 0 0 10px; }
.pc-sub { color: var(--pc-muted); margin: 0 0 16px; }
.pc-muted { color: var(--pc-muted); font-size: 14px; }
.pc-link { color: var(--pc-accent); }

.pc-card {
    background: #fff;
    border: 1px solid var(--pc-line);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
}

.pc-flash { border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 15px; }
.pc-flash--ok  { background: var(--pc-ok-bg);  color: var(--pc-ok-ink); }
.pc-flash--bad { background: var(--pc-err-bg); color: var(--pc-err-ink); }

/* Плашка «заведите пароль»: пока пароля нет, кабинет открывает любой, кто
   знает номер, — она должна бросаться в глаза, а не прятаться внизу. */
.pc-warn {
    background: var(--pc-warn-bg);
    color: var(--pc-warn-ink);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.pc-warn p { margin: 6px 0 10px; font-size: 15px; }
.pc-warn p:last-child { margin-bottom: 0; }

/* Та же мысль строкой, а не блоком: на экране заказов плашка стоит над самым
   нужным, и отодвигать заказ на пол-экрана она не должна. */
.pc-note {
    display: block;
    background: var(--pc-warn-bg);
    color: var(--pc-warn-ink);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}

/* ── Кнопки и поля: крупные, под палец ─────────────────────────────────── */

.pc-btn {
    display: inline-block;
    min-height: 46px;
    padding: 12px 18px;
    border: 0;
    border-radius: 12px;
    background: var(--pc-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.pc-btn:hover { background: var(--pc-accent-dark); }
.pc-btn:disabled { opacity: .6; cursor: default; }
.pc-btn--wide { width: 100%; }
.pc-btn--sm { min-height: 38px; padding: 8px 14px; font-size: 14px; }
.pc-btn--ghost { background: #fff; color: var(--pc-accent); border: 1px solid var(--pc-accent); }
.pc-btn--ghost:hover { background: var(--pc-soft); }

.pc-form { display: grid; gap: 12px; }
.pc-field { display: grid; gap: 6px; }
.pc-field span { font-size: 14px; color: var(--pc-muted); }
.pc-input {
    width: 100%;
    /* 16px — не «на глаз»: при меньшем размере Safari на айфоне зумит страницу
       при фокусе на поле, и вёрстка уезжает. */
    font: 16px/1.4 inherit;
    padding: 12px 14px;
    border: 1px solid var(--pc-line);
    border-radius: 12px;
    background: #fff;
    color: var(--pc-ink);
}
.pc-input:focus { outline: 2px solid var(--pc-accent); outline-offset: 1px; border-color: transparent; }

/* ── Заказ ─────────────────────────────────────────────────────────────── */

/* Карточка-ссылка целиком: нажатие в любое место открывает заказ. Правило
   осталось общим — крупной карточки «текущего заказа» в списке больше нет
   (все заказы одинаковыми строками), но ссылкой бывает и обычная карточка. */
a.pc-card { display: block; color: inherit; text-decoration: none; }
a.pc-card:active { background: var(--pc-soft); }

.pc-order__head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.pc-order__no { font-weight: 700; font-size: 17px; }
.pc-order__date { color: var(--pc-muted); font-size: 14px; }
.pc-order__hint { color: var(--pc-muted); font-size: 14px; margin: 10px 0 0; }
.pc-order__params { font-size: 14px; color: var(--pc-muted); margin: 10px 0 0; }

.pc-status {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
/* Заливка плотная, буквы белые: бледные плашки («Принята» и «В работе» были
   #E0EAFF и #DBEAFE) на телефоне сливались и между собой, и с карточкой —
   заказчик так и сказал: «всё сливается воедино». Тона взяты разных оттенков,
   а не разной светлоты одного синего: различать их придётся боковым зрением.
   Контраст белого на каждой заливке от 5,02:1 при норме 4,5. */
.pc-status--wait { background: var(--pc-tone-wait); color: #fff; }
.pc-status--work { background: var(--pc-tone-work); color: #fff; }
.pc-status--warn { background: var(--pc-tone-warn); color: #fff; }
.pc-status--ok   { background: var(--pc-tone-ok);   color: #fff; }
.pc-status--calm { background: var(--pc-tone-calm); color: #fff; }

.pc-lines { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pc-lines li { display: flex; gap: 12px; justify-content: space-between; font-size: 15px; }
.pc-order__total {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid var(--pc-ink);
    font-size: 18px;
}

/* ── Список заказов ────────────────────────────────────────────────────── */

/* Строка целиком ссылка, а не текст со ссылкой внутри: попасть пальцем нужно
   в строку. Раньше история была просто текстом — провалиться в заказ было
   некуда. */
.pc-list { list-style: none; margin: 0; padding: 0; }
.pc-row {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--pc-line);
    color: inherit;
    text-decoration: none;
    min-height: 46px;
}
.pc-list li:last-child .pc-row { border-bottom: 0; }
.pc-row:active { background: var(--pc-soft); }
.pc-row--calm .pc-row__no { color: var(--pc-muted); font-weight: 600; }
.pc-row__main { display: grid; gap: 2px; min-width: 0; }
.pc-row__no { font-weight: 600; }
.pc-row__meta { color: var(--pc-muted); font-size: 14px; }
.pc-row__reply { color: var(--pc-accent); font-size: 13px; }
.pc-row__right { display: grid; gap: 6px; justify-items: end; text-align: right; flex: 0 0 auto; }

/* Свёрнутый хвост длинного списка. `<details>` работает без JavaScript —
   на слабой связи скрипт может не доехать, а заказы нужны. */
.pc-more { margin-top: 12px; }
.pc-more > summary {
    cursor: pointer;
    color: var(--pc-accent);
    font-size: 15px;
    padding: 10px 0;
    list-style: none;
}
.pc-more > summary::-webkit-details-marker { display: none; }
.pc-more > summary::after { content: ' ▾'; }
.pc-more[open] > summary::after { content: ' ▴'; }

.pc-empty { display: grid; gap: 12px; justify-items: start; }
.pc-empty p { margin: 0; color: var(--pc-muted); }

/* Определения на профиле: подпись слева мелко, значение под ней. */
.pc-def { margin: 0; display: grid; gap: 10px; }
.pc-def dt { color: var(--pc-muted); font-size: 14px; }
.pc-def dd { margin: 2px 0 0; }

/* ── Переписка ─────────────────────────────────────────────────────────── */

/* Высота ограничена: длинная переписка не должна выталкивать поле ввода
   за экран телефона. */
.pc-chat__list {
    display: grid;
    gap: 10px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 12px;
}
.pc-chat__empty { color: var(--pc-muted); font-size: 14px; margin: 0; }
.pc-msg { max-width: 85%; padding: 10px 12px; border-radius: 14px; font-size: 15px; }
.pc-msg--me    { justify-self: end; background: var(--pc-accent); color: #fff; border-bottom-right-radius: 4px; }
.pc-msg--salon { justify-self: start; background: var(--pc-soft); border: 1px solid var(--pc-line); border-bottom-left-radius: 4px; }
.pc-msg__text { white-space: pre-wrap; word-break: break-word; }
.pc-msg__time { font-size: 12px; opacity: .7; margin-top: 4px; }
.pc-chat__form { display: grid; gap: 10px; }

.pc-install { margin-top: 12px; display: grid; gap: 10px; justify-items: start; }
.pc-install p { margin: 0; font-size: 14px; color: var(--pc-muted); }

.pc-foot { text-align: center; color: var(--pc-muted); font-size: 14px; margin-top: 20px; }
.pc-foot a { color: var(--pc-accent); }

/* ── Экран пошире ──────────────────────────────────────────────────────── */

@media (min-width: 700px) {
    .pc-main { padding: 24px 20px 60px; }
    .pc-h1 { font-size: 28px; }
    .pc-card { padding: 20px; }
    /* Кнопки перестают быть во всю ширину: на большом экране это выглядит
       как недоделанная мобильная версия. */
    .pc-btn--wide { width: auto; min-width: 220px; }
}

.pc-push__row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Системная строка: отметка о событии, а не письмо. Поэтому по центру,
   мелко и без пузыря — иначе читается как реплика менеджера. */
.pc-msg--system {
    justify-self: center;
    max-width: 100%;
    text-align: center;
    background: transparent;
    color: var(--pc-muted);
    font-size: 13px;
    padding: 2px 8px;
}
.pc-msg--system .pc-msg__time { display: inline; margin-left: 4px; }

/* Событие в ленте красится тем же тоном, что и плашка статуса: клиент читает
   чат как ленту по заказу, и «Заказ готов» должен быть виден зелёным, а не
   таким же серым, как всё остальное. Серым остаются события без статуса —
   например, «Вы приложили файлы»: это не состояние заказа.
   Тон приходит кодом статуса (`photo_order_messages.status_code`), а не
   разбором текста: тексты правятся, и цвет отвалился бы молча. */
.pc-msg--system.pc-msg--wait { background: var(--pc-tone-wait-bg); color: var(--pc-tone-wait-ink); }
.pc-msg--system.pc-msg--work { background: var(--pc-tone-work-bg); color: var(--pc-tone-work-ink); }
.pc-msg--system.pc-msg--warn { background: var(--pc-tone-warn-bg); color: var(--pc-tone-warn-ink); }
.pc-msg--system.pc-msg--ok   { background: var(--pc-tone-ok-bg);   color: var(--pc-tone-ok-ink); }
.pc-msg--system.pc-msg--calm { background: var(--pc-tone-calm-bg); color: var(--pc-tone-calm-ink); }
.pc-msg--system.pc-msg--wait,
.pc-msg--system.pc-msg--work,
.pc-msg--system.pc-msg--warn,
.pc-msg--system.pc-msg--ok,
.pc-msg--system.pc-msg--calm {
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
}

/* ── Догрузка файлов к заказу ──────────────────────────────────────────── */

/* Файлы прикладываются к заказу, а не к черновику: заказ в один щелчок минует
   форму, а с ней и единственное место, где их можно было приложить. */
.pc-attach__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.pc-attach__head .pc-h2 { margin-bottom: 2px; }
.pc-attach__hint { color: var(--pc-muted); font-size: 14px; margin: 0; }
.pc-attach__panel { margin-top: 16px; }

/* Приложенное — списком с превью. Смотреть свои снимки клиент должен здесь, а
   не на менеджерской странице файлов: там архив и контактный лист, нужные
   тому, кто печатает заказ. */
/* Свёртка списка файлов. Значок рисуем сами: стрелка браузера по умолчанию
   мелкая и в разных браузерах разная. */
.pc-files-fold { margin-top: 12px; }
.pc-files-fold > summary {
    cursor: pointer;
    color: var(--pc-accent);
    font-size: 15px;
    padding: 10px 0;
    list-style: none;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.pc-files-fold > summary::-webkit-details-marker { display: none; }
.pc-files-fold > summary::after { content: ' ▾'; margin-left: 4px; }
.pc-files-fold[open] > summary::after { content: ' ▴'; }

.pc-files { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.pc-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--pc-line);
    border-radius: 12px;
}
.pc-file__peek { flex: 0 0 auto; line-height: 0; }
.pc-file__peek img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block; }
.pc-file__ext {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 8px;
    background: var(--pc-soft); color: var(--pc-muted);
    font-size: 12px; font-weight: 700; line-height: 1;
}
.pc-file__main { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pc-file__name { font-size: 15px; word-break: break-all; }
.pc-file__size { font-size: 13px; color: var(--pc-muted); }
/* 44px — минимальная цель для пальца: кабинет открывают с телефона. */
.pc-file__del {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border: 0; border-radius: 10px;
    background: transparent; color: var(--pc-muted);
    font-size: 24px; line-height: 1; cursor: pointer;
}
.pc-file__del:hover { background: var(--pc-err-bg); color: var(--pc-err-ink); }
.pc-file__del:disabled { opacity: .5; cursor: default; }
.pc-attach .pc-btn--wide { margin-top: 14px; }

/* Подтверждение «заказ оформлен» — один раз, сразу после оформления. */
.pc-done {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 14px;
    background: var(--pc-ok-bg);
    color: var(--pc-ok-ink);
}
.pc-done__mark { flex: 0 0 auto; line-height: 0; }
.pc-done b { display: block; font-size: 17px; }
.pc-done span { font-size: 14px; }
.pc-attach__note { margin: 10px 0 0; font-size: 14px; color: var(--pc-ok-ink); }
.pc-attach__note.is-bad { color: var(--pc-err-ink); }


/* ── Плашка «установите приложение» ────────────────────────────────────── */

/* Стоит над содержимым раздела, пока приложение не установлено. Заметная, но
   не во весь экран: она предлагает, а не требует — заказы человек пришёл
   смотреть, а не ставить приложение. */
.pc-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--pc-accent);
    color: #fff;
}
.pc-strip__text { display: grid; gap: 2px; flex: 1 1 200px; min-width: 0; }
.pc-strip__text b { font-size: 16px; }
.pc-strip__text span { font-size: 14px; opacity: .92; }
.pc-strip__btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: var(--pc-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.pc-strip__btn:disabled { opacity: .6; cursor: default; }