/* field-app — GitHub-style minimalism.
   Без SPA, без тяжёлых фреймворков. Моно-акценты, чистые таблицы, один акцентный цвет. */

:root {
    --color-bg: #ffffff;
    --color-fg: #1f2328;
    --color-muted: #656d76;
    --color-border: #d1d9e0;
    --color-border-muted: #d8dee4;
    --color-accent: #0969da;
    --color-accent-hover: #0550ae;
    --color-surface: #f6f8fa;
    --color-surface-hover: #eaeef2;
    --color-danger: #cf222e;
    --color-success: #1a7f37;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --radius: 6px;
    --max-width: 1012px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0d1117;
        --color-fg: #e6edf3;
        --color-muted: #7d8590;
        --color-border: #30363d;
        --color-border-muted: #21262d;
        --color-accent: #2f81f7;
        --color-accent-hover: #539bf5;
        --color-surface: #161b22;
        --color-surface-hover: #1c2128;
    }
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    /* Гасим rubber-band overscroll на мобиле (пустота под подвалом не «убегает») */
    overscroll-behavior-y: none;
    /* iOS не раздувает текст в standalone/landscape — масштаб 1:1 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Подвал прижат к низу даже на коротких страницах (sticky footer) */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
}

/* Header */
.app-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 12px 0;
}

/* Шапка в две строки: «field-app | Имя» сверху, навигация снизу */
.app-header .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.app-header-top {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;   /* строка во всю ширину — иначе margin-auto имени некуда толкать */
}

.brand {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-fg);
    text-decoration: none;
}

/* Бренд слева, имя оператора и выход — группой вправо (один авто-отступ на имени) */
.app-user {
    color: var(--color-muted);
    font-size: 14px;
    margin-left: auto;
}
.app-user::before {
    content: "|";
    color: var(--color-muted);
    margin-right: 10px;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

/* Разделители «|» между пунктами навигации */
.nav > a,
.nav > .inline-form {
    padding: 0 12px;
    border-left: 1px solid var(--color-muted);
    line-height: 1.2;
}
.nav > a:first-child,
.nav > .inline-form:first-child {
    padding-left: 0;
    border-left: none;
}

.nav a {
    color: var(--color-fg);
    text-decoration: none;
}

.nav a:hover {
    color: var(--color-accent);
}

/* Кнопка выхода — иконка в верхней строке шапки, прижата к правому краю */
.logout-form {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}
.app-header-top .logout-btn {
    background: none;
    border: none;
    padding: 6px;
    margin: 0;
    width: auto;
    min-height: 0;
    color: var(--color-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.app-header-top .logout-btn:hover { color: var(--color-accent); }
.app-header-top .logout-btn svg { width: 20px; height: 20px; display: block; }

/* Активный пункт навигации */
.nav a[aria-current="page"] {
    font-weight: 600;
    color: var(--color-accent);
}

/* Main */
main {
    padding: 24px 16px 48px;
    flex: 1 0 auto;
}

/* Footer */
.app-footer {
    border-top: 1px solid var(--color-border);
    padding: 16px 0;
    background: var(--color-surface);
    text-align: center;
}

/* Typography */
h1, h2, h3, h4 {
    margin: 0 0 16px;
    font-weight: 600;
    line-height: 1.25;
}

h1 { font-size: 24px; }
h2 { font-size: 20px; margin-top: 24px; }
h3 { font-size: 16px; }

p { margin: 0 0 16px; }

.text-muted {
    color: var(--color-muted);
}

code {
    font-family: var(--font-mono);
    font-size: 85%;
    background: var(--color-surface);
    padding: 2px 6px;
    border-radius: var(--radius);
}

hr {
    border: none;
    border-top: 1px solid var(--color-border-muted);
    margin: 24px 0;
}

/* Links */
a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* Карточки и кнопки теперь даёт Pico: <article> и <button>/<a role="button">.
   Оставляем только модификатор опасного действия для связки btn-link/secondary. */
.btn-danger {
    color: var(--color-danger);
}

/* Компактная кнопка «+ Добавить …» — ровно под размер нативной кнопки выбора
   файла. Pico даёт file-selector-button половинный вертикальный отступ
   (calc(spacing * .5)); обычная <button> в полтора раза выше. Повторяем тот же
   отступ и авто-ширину, чтобы кнопки добавления совпадали с «Выбрать файлы». */
.btn-compact {
    width: auto;
    padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
}

/* Поле выбора файла: имя файла слева, кнопка справа. Внутри нативного input
   порядок [кнопка][имя файла] фиксирован браузером — меняем его через
   direction: rtl (кнопка уезжает вправо, имя остаётся слева). Сам текст в
   кнопке и в имени — кириллица (strong LTR), поэтому читается нормально. */
.file-right {
    direction: rtl;
}
.file-right::file-selector-button {
    margin-right: 0;
    margin-left: calc(var(--pico-spacing) / 2);
}

/* Контурная опасная кнопка (напр. «Отклонить заявку») — прозрачный фон,
   красные рамка и текст; на тёмном secondary красный текст был нечитаем. */
.btn-danger.outline,
.outline.btn-danger {
    background: transparent;
    color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-danger.outline:hover,
.outline.btn-danger:hover {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}

/* Forms */
.form-group {
    margin-bottom: 16px;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Базовые поля форм стилизует Pico. Оставляем только iOS-фикс date/time
   (своя intrinsic min-width «съезжает» из контейнера на узких экранах). */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    min-width: 0;
}

/* Таблицы стилизует Pico (адаптив/полоски/отступы). */

/* Status badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-draft     { background: #e5e7eb; color: #374151; }
.badge-submitted { background: #dbeafe; color: #1e40af; }
.badge-in_review { background: #fef3c7; color: #92400e; }
.badge-approved  { background: #dcfce7; color: #14532d; }
.badge-processed { background: #f3e8ff; color: #6b21a8; }
.badge-partial   { background: #fef3c7; color: #92400e; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }
.badge-invoice_requested { background: #fef3c7; color: #92400e; }
/* Финансовый статус счёта (supplier_invoices.payment_status) */
.badge-received    { background: #dbeafe; color: #1e40af; }
.badge-on_approval { background: #fef3c7; color: #92400e; }
.badge-in_payment  { background: #ddd6fe; color: #4c1d95; }
.badge-paid        { background: #dcfce7; color: #14532d; }
.badge-master    { background: #fef3c7; color: #78350f; }
.badge-admin     { background: #ddd6fe; color: #4c1d95; }
.badge-subcontractor { background: #ccfbf1; color: #134e4a; }
.badge-client    { background: #fce7f3; color: #831843; }
.badge-warning   { background: #fef3c7; color: #78350f; }

/* Object.status — группы состояний (см. backend/services/status_labels.py) */
.badge-planning  { background: #fef3c7; color: #78350f; }  /* планирование: incoming, analyzing, proposing, kp_drafting, negotiating */
.badge-ready     { background: #dbeafe; color: #1e40af; }  /* договор подписан, работы не начаты */
.badge-active    { background: #dcfce7; color: #14532d; }  /* работы идут */
.badge-finishing { background: #ddd6fe; color: #4c1d95; }  /* сдача / акты */
.badge-done      { background: #e5e7eb; color: #374151; }  /* закрыт */
.badge-stopped   { background: #fee2e2; color: #991b1b; }  /* paused / lost */
.badge-unknown   { background: #f3f4f6; color: #6b7280; }

/* Login page — центрирование */
.login-box {
    max-width: 420px;
    margin: 48px auto;
}

/* Page header с кнопкой справа */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    margin-bottom: 24px;
}

.page-header h1 {
    margin: 0;
}

/* Inline form (для logout / toggle-active кнопок-ссылок) */
.inline-form {
    display: inline;
    margin: 0;
    padding: 0;
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-accent);
    padding: 0;
    margin: 0;                /* Pico даёт кнопке margin-bottom — сбрасываем, иначе «Выход» съезжает */
    font: inherit;
    line-height: 1.2;
    width: auto;
    vertical-align: baseline;
    cursor: pointer;
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
    color: var(--color-accent-hover);
}

/* Stats grid на dashboard */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}

.stat-value {
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 12px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Card grid (для списка объектов мастера) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

/* Карточки-article в сетке: кнопка прижата к низу — кнопки в ряду выровнены */
.card-grid > article {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
.card-grid > article > a[role="button"]:last-child,
.card-grid > article > button:last-child {
    margin-top: auto;
    align-self: flex-start;
}

/* Футер действий карточки: несколько кнопок одним блоком, прижатым к низу —
   кнопки выровнены по всем карточкам ряда независимо от объёма текста.
   Использовать .card-actions ВСЕГДА когда в карточке 2+ кнопки. */
.card-grid > article > .card-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.card-actions > a[role="button"],
.card-actions > button {
    width: 100%;
    margin: 0;
}

/* Nav — spacing для logout формы */
.nav {
    align-items: center;
}

.nav .inline-form {
    display: inline-flex;
    align-items: center;
}

/* Шапка карточки отчёта (дата + статус в одну строку) */
.report-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
/* Карточка заявки мастера: статус ВСЕГДА справа на строке заголовка (заголовок
   ужимается с многоточием, чтобы не толкать статус вниз/влево). «Срочно» — своей
   строкой ниже, по правому краю. Так положение статуса одинаково на всех карточках
   и в портрете, и в ландшафте. */
.req-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.req-status { flex: 0 0 auto; }
.req-urgent { text-align: right; margin-top: 4px; }

/* Заявка ждёт приёмки мастером — мяч на его стороне. Оранжевый акцент по всей
   карточке + пульсирующая плашка-призыв, чтобы мастер не пропустил свой шаг. */
.badge-receiving,
.badge-partially_received {
    background: #ea580c;
    color: #fff;
    font-weight: 700;
    animation: receiving-pulse 1.8s ease-in-out infinite;
}
.req-card-action {
    border-left: 4px solid #ea580c;
    background: #fff7ed;
}
.req-action-call {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: .5rem 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #ffedd5;
    color: #7c2d12;
    font-weight: 600;
}
.req-action-call .req-action-cta {
    margin-left: auto;
    font-size: 18px;
    line-height: 1;
}
@keyframes receiving-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.30); }
}
@media (prefers-reduced-motion: reduce) {
    .badge-receiving,
    .badge-partially_received { animation: none; }
}

/* Формирование новой заявки — это отдельный шаг: пока раскрыт блок выбора
   объекта, списки «В работе / Завершённые» не показываем (не мешают выбору). */
details.new-request[open] ~ .mr-lists { display: none; }

small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

/* Form rows — горизонтальная группа полей */
.form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.form-row .form-group {
    min-width: 180px;
}

/* Группы объектов на /admin/objects — складные секции <details> */
.objects-group {
    margin-top: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 16px;
    background: var(--color-bg);
}

.objects-group > summary {
    list-style: none;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}

.objects-group > summary::-webkit-details-marker { display: none; }
.objects-group > summary::marker { content: ""; }

.objects-group > summary > h2 {
    display: inline;
    font-size: 18px;
    margin: 0;
}

.objects-group > summary::before {
    content: "▶";
    display: inline-block;
    width: 1.2em;
    color: var(--color-muted);
    transition: transform 0.15s;
}

.objects-group[open] > summary::before {
    content: "▼";
}

.objects-group[open] {
    padding-bottom: 16px;
}

/* Form actions — кнопки «Сохранить / Отмена» под формой */
.form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

/* Подсказка под полем — небольшой воздух от input/select сверху */
.form-group small.text-muted {
    display: block;
    margin-top: 6px;
}

/* Repeatable rows в форме отчёта */
.row-item {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-muted);
}

.row-item:last-of-type {
    border-bottom: none;
    margin-bottom: 8px;
}

.row-item .form-group {
    margin-bottom: 0;
}

/* #8 — поля внутри строк не тащат Pico-отступ снизу (var(--pico-spacing)),
   иначе в flex-строке (align-items:flex-end) поля съезжают по вертикали
   относительно друг друга на десктопе у Яны. */
.row-item input,
.row-item select,
.row-item textarea {
    margin-bottom: 0;
}

.row-controls {
    padding-bottom: 6px;
    white-space: nowrap;
}

.row-controls .btn-link {
    font-size: 18px;
    padding: 4px 8px;
}

/* Form actions — кнопки снизу формы */
.form-actions {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Photo grid — превью фото */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.photo-thumb {
    display: block;
    text-decoration: none;
    color: var(--color-muted);
    font-size: 11px;
}

.photo-thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    display: block;
    margin-bottom: 4px;
}

.photo-thumb:hover img {
    border-color: var(--color-accent);
}

/* Mobile — form-row в колонку */
@media (max-width: 640px) {
    .row-item {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .row-controls {
        text-align: right;
        padding-bottom: 0;
    }
}

/* Lists */
ul, ol {
    padding-left: 24px;
}

li {
    margin-bottom: 4px;
}

/* Alerts */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    border: 1px solid;
}

.alert-error {
    background: #ffebe9;
    border-color: #ffaeb0;
    color: var(--color-danger);
}

.alert-success {
    background: #dafbe1;
    border-color: #a6e9b6;
    color: var(--color-success);
}

.alert-warning {
    background: #fff8c5;
    border-color: #f0e08a;
    color: #7a5c00;
}

/* Responsive */
@media (max-width: 640px) {
    .app-header .container {
        flex-direction: column;
        gap: 8px;
    }
    main { padding: 16px; }
    .card { padding: 16px; }
}

/* Work block — обёртка для строки работы + её исполнителей (T8) */
.work-block {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 10px;
    background: var(--color-surface);
}

/* Панель быстрой вставки спецсимволов (Ø × ² ³) под полем работы (#3, мобайл) */
.symbol-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.symbol-bar button {
    min-width: 44px;
    min-height: 40px;
    width: auto;
    padding: 4px 10px;
    margin: 0;
    font-size: 17px;
    line-height: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-fg);
    cursor: pointer;
}
.symbol-bar button:hover {
    background: var(--color-surface-hover);
}

/* Свой выпадающий список подсказок (вместо нативного datalist) — №10.
   Появляется под полем, своя фильтрация, одинаково на ПК/Android/iOS. */
[x-cloak] { display: none !important; }
.ac-wrap { position: relative; width: 100%; }
.ac-wrap > input { width: 100%; }
.ac-dropdown {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.ac-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border-muted);
    padding: 10px 12px;
    margin: 0;
    font: inherit;
    color: var(--color-fg);
    cursor: pointer;
    min-height: 40px;
    line-height: 1.3;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item:focus { background: var(--color-surface-hover); }

/* Индикатор «значение из справочника» — точка справа от поля.
   Зелёная — значение есть в справочнике, красная — вписано своё/с опечаткой,
   прозрачная (пусто) — поле не заполнено или ось без закрытого списка. */
.field-with-dot { display: flex; align-items: center; gap: 10px; }
.field-with-dot > .ac-wrap,
.field-with-dot > input { flex: 1 1 auto; min-width: 0; }
/* Pico даёт input свой margin-bottom — внутри строки с точкой он делает обёртку
   выше поля, и точка съезжает вниз от центра. Обнуляем (отступ между группами
   держит .form-group), тогда точка центрируется ровно по высоте поля. */
.field-with-dot .ac-wrap input,
.field-with-dot > input { margin-bottom: 0; }
.val-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
}
.val-dot.ok {
    background: #16a34a;
    animation: val-dot-pulse-soft 2.4s ease-in-out infinite;
}
.val-dot.bad {
    background: #dc2626;
    animation: val-dot-pulse 1.2s ease-out infinite;
}
/* Красная точка (значение не из справочника — надо поправить) пульсирует заметно,
   расходящимся кольцом. Зелёная — едва заметно, спокойно. */
@keyframes val-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
@keyframes val-dot-pulse-soft {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
}
@media (prefers-reduced-motion: reduce) {
    .val-dot.ok, .val-dot.bad { animation: none; }
}

/* Тост — короткий отклик действия (напр. «Работа скопирована») */
.toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(31, 35, 40, 0.95);
    color: #fff;
    padding: 14px 22px;
    border-radius: 14px;
    font-size: 15px;
    z-index: 100;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    max-width: 90vw;
    text-align: center;
    pointer-events: none;
}

/* Подсветка только что добавленной (скопированной) работы */
.work-block.flash {
    animation: flash-bg 1.2s ease;
}
@keyframes flash-bg {
    0% { box-shadow: 0 0 0 2px var(--color-accent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Секция «Выполнено»: поля в строке выравниваем по ВЕРХУ. Иначе колонка
   «Что делали» (input + кнопки-символы Øײ³ + подсказки) высокая, а flex-end
   утягивал «Сколько»/«Единица» вниз — они съезжали относительно поля работы. */
.work-block .row-item {
    align-items: flex-start;
}
/* Под-строки внутри работы (кабели в щит, отверстия) — на десктопе выровнены по
   низу, чтобы поле с подписью и без неё стояли ровно. На мобиле (<=768) общий
   мобильный .row-item переводит их в колонку со stretch (на всю ширину) — здесь
   НЕ трогаем, иначе на телефоне поля жмутся вправо. Раньше это задавалось инлайн
   align-items:flex-end, который перебивал мобильный stretch (баг выравнивания). */
@media (min-width: 769px) {
    .work-block .row-item.sub-row,
    .row-item.sub-row {
        align-items: flex-end;
    }
}

/* Шапка блока работы: подпись «Что делали» слева, кнопки дублировать/удалить —
   в углу справа; поле «Что делали» идёт отдельной строкой на всю ширину (как
   поля уточнений). Специфичность выше мобильного правила .row-controls —
   нейтрализует его order/align/margin и на телефоне. */
.work-block .work-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
    margin-bottom: 6px;
}
.work-block .work-head .work-head-label {
    margin: 0;
    font-size: 15px;        /* чуть крупнее обычной подписи поля */
    font-weight: 600;
}
.work-block .work-head .row-controls {
    order: 0;
    align-self: center;
    margin: 0 0 0 auto;     /* кнопки всегда вправо, в т.ч. когда подписи нет */
    padding: 0;
}

/* Executor chips — чипы-переключатели исполнителей на строке работы (T8) */
.executor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    min-height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-bg);
    color: var(--color-fg);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s, border-color 0.1s;
}

.chip:hover {
    border-color: var(--color-accent);
}

.chip-active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.chip-active:hover {
    background: var(--color-accent-hover);
}

/* Photo preview grid (T9) */
.photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.photo-preview {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
}

.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-preview .photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* ================================================================ */
/* T10 — Мобильная адаптация                                         */
/* Цели:                                                             */
/* - Target size минимум 44x44 (Apple HIG / Material) на всех        */
/*   интерактивных элементах на мобилке                              */
/* - Инпуты — минимум 44px высоты (не 32) для удобного тапа          */
/* - Шрифт инпутов — 16px (иначе iOS зумит страницу при фокусе)      */
/* - Форма — одна колонка на <768px                                  */
/* - Таблицы — горизонтальный скролл, без обрезки данных             */
/* ================================================================ */

/* Базовые поля — на мобилке делаем комфортнее для пальца */
@media (max-width: 768px) {
    html, body {
        font-size: 15px;
    }

    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px;  /* iOS не зумит при фокусе */
        min-height: 44px;
        padding: 10px 12px;
    }

    textarea {
        min-height: 80px;
    }

    /* Кнопки — не меньше 44x44 */
    .btn, button.btn, button[type="submit"], .btn-primary {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 15px;
    }

    /* Крестик удаления — компактная иконка в правом верхнем углу строки,
       не занимает отдельную пустую строку (замечание К 25.05) */
    .row-controls .btn-link {
        min-width: 36px;
        min-height: 30px;
        font-size: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Form row-item — одна колонка, компактно */
    .row-item {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding-bottom: 10px;
        border-bottom: 1px dashed var(--color-border);
        margin-bottom: 10px;
        position: relative;
    }

    .row-item:last-child {
        border-bottom: none;
    }

    /* Крестик — прижат вверх-вправо, тянем отрицательным margin чтобы не было
       пустой строки над полями */
    .row-controls {
        order: -1;
        align-self: flex-end;
        text-align: right;
        padding: 0;
        margin: -2px -2px -8px 0;
    }

    /* Десктопная строка-шапка с лейблами «ФИО / Часы» — на мобиле лишняя
       (поля понятны по подсказкам), прячем чтобы не плодить пустоту */
    .row-head {
        display: none;
    }

    /* Form-row — тоже одна колонка, с воздухом между полями */
    .form-row {
        flex-direction: column;
        gap: 12px;
    }

    /* === Адаптив: ничего не шире экрана === */
    /* Флекс-дети должны мочь ужиматься (иначе min-content распирает строку) */
    .form-row .form-group,
    .row-item .form-group,
    .attr-field,
    .work-block .form-group {
        min-width: 0;
    }
    /* Блоки/сетки/медиа — не шире контейнера */
    .card,
    .card-grid,
    .work-block,
    .stats-grid,
    pre {
        max-width: 100%;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    /* Карточные сетки — строго одна колонка на телефоне */
    .card-grid {
        grid-template-columns: 1fr;
    }
    /* Длинные неразрывные токены (№18GA/SUB/2026 и т.п.) могут переноситься */
    .card,
    .work-block {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Cards и card-grid */
    .card {
        padding: 14px;
        margin-bottom: 14px;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    /* Header — колонка + компактнее */
    .app-header .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .nav {
        flex-wrap: wrap;
        gap: 8px 18px;
        width: 100%;
    }
    /* На мобильной убираем border-разделители: при переносе строки они давали
       стрелую «|» в начале строк и шапку «вело». Чистый отступ через gap. */
    .nav > a,
    .nav > .inline-form {
        border-left: none;
        padding: 0;
    }

    /* Таблицы — горизонтальный скролл в обёртке */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Chip на мобильной — компактнее по ширине, но сохраняет target size */
    .chip {
        padding: 8px 12px;
        font-size: 14px;
    }

    /* Work-block — меньше отступов */
    .work-block {
        padding: 10px;
    }

    /* На мобиле поля в блоке работы тянутся на всю ширину. На десктопе у
       .work-block .row-item стоит align-items:flex-start (для ровных кнопок
       Øײ³), и оно перебивало мобильный stretch — поля (особенно «Что делали»
       с панелью символов) не растягивались. Возвращаем растяжение. */
    .work-block .row-item {
        align-items: stretch;
    }

    /* Main / container */
    main {
        padding: 16px 12px;
    }

    .container {
        padding: 0 12px;
    }
}

/* Ещё компактнее на очень узких (iPhone SE 375px) */
@media (max-width: 380px) {
    h1 { font-size: 20px; }
    h2 { font-size: 17px; }
    .card { padding: 12px; }
    main { padding: 12px 10px; }
}

/* ================================================================ */
/* Единый адаптивный слой (2026-06-12)                              */
/* Брейкпоинт телефон/планшет — 768 (как у Bootstrap/Tailwind).      */
/* Принципы (см. _design-lab/* эталоны, согласовано с К):           */
/*  - списки-таблицы широкие (.container-wide), формы узкие          */
/*    (.container-narrow), на телефоне всё разворачивается           */
/*    вертикально;                                                   */
/*  - таблица с классом .cards на телефоне превращается в карточки   */
/*    (подпись колонки — из data-label на <td>); непомеченные        */
/*    таблицы сохраняют прежнее поведение (горизонтальный скролл).   */
/* ================================================================ */

/* Ширина страницы — задаётся классом на <body>, чтобы шапка, контент и подвал
   (все используют .container) тянулись СИНХРОННО и левый край совпадал.
   Списки шире дефолта, формы — уже (читабельность). */
.page-wide   .container { max-width: 1280px; }
.page-narrow .container { max-width: 760px; }

/* Заголовок «действие — объект» (форма отчёта): на узком объект с новой строки
   подзаголовком, на широком (>=768) — в одну строку через « — ». */
.report-title .obj { display: block; font-size: 18px; font-weight: 600; color: var(--color-muted); margin-top: 1px; }
@media (min-width: 768px) {
    .report-title .obj { display: inline; font-size: inherit; font-weight: inherit; color: inherit; margin-top: 0; }
    .report-title .obj::before { content: "— "; }
}

/* Персонал в форме отчёта: ФИО слева, часы компактным полем справа — в строку
   ДАЖЕ на телефоне (в отличие от обычных полей, которые на телефоне в столбик). */
.person-head { display: flex; gap: 12px; color: var(--color-muted); font-size: 12px;
    text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.person-head .ph-name { flex: 1; }
.person-head .ph-hours { width: 96px; flex: 0 0 auto; text-align: center; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 8px 0;
    border-bottom: 1px solid var(--color-border-muted); }
.person-row .pr-name { flex: 1; min-width: 0; }
.person-row .pr-name label { display: flex; align-items: center; gap: 9px; cursor: pointer; margin: 0; }
.person-row .pr-name input[type="text"] { margin: 0; }
.person-row .pr-hours { width: 96px; flex: 0 0 auto; }
.person-row .pr-hours input { width: 100%; text-align: center; margin: 0; }
.person-row .pr-del { flex: 0 0 auto; }

@media (max-width: 768px) {
    /* Таблица-в-карточки: только для помеченных классом .cards.
       Переопределяет глобальное table{display:block;overflow-x:auto} выше. */
    table.cards { display: block; overflow: visible; white-space: normal; }
    table.cards thead { position: absolute; left: -9999px; }
    table.cards tbody,
    table.cards tr,
    table.cards td { display: block; }
    table.cards tr {
        border: 1px solid var(--color-border);
        border-radius: 10px;
        margin-bottom: 12px;
        padding: 12px 14px;
        /* тема-зависимый фон: в тёмной теме НЕ белый (иначе рамка-отступ белела) */
        background: var(--color-surface);
    }
    table.cards td {
        border: none;
        background: transparent;   /* не даём Pico закрасить ячейку фоном страницы */
        padding: 3px 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        display: flex;
        gap: 10px;
        text-align: left;
    }
    /* Подпись колонки в карточке — из data-label */
    table.cards td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        min-width: 108px;
        color: var(--color-muted);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .02em;
    }
    /* Ячейки без подписи (точка-индикатор, чисто действие) — без префикса */
    table.cards td:not([data-label])::before,
    table.cards td[data-label=""]::before { display: none; }
    /* Числовые — в карточке слева (на десктопе остаются справа) */
    table.cards td.num { justify-content: flex-start; text-align: left; }
    /* Главная ячейка карточки (объект/работа) — крупнее, отдельной строкой */
    table.cards td.t-title { display: block; }
    table.cards td.t-title::before { display: none; }
    /* Ячейка действия — кнопка вправо, отделена сверху */
    table.cards td.t-act {
        justify-content: flex-end;
        margin-top: 8px;
        border-top: 1px solid var(--color-border-muted);
        padding-top: 10px;
    }
    table.cards td.t-act::before { display: none; }
    /* Строка-итог — без префиксов, как акцент; пустые ячейки прячем */
    table.cards tr.row-total { background: var(--color-surface); }
    table.cards tr.row-total td::before { display: none; }
    table.cards tr.row-total td:empty { display: none; }

    /* Фиксированную раскладку колонок отчётов на телефоне отменяем —
       в карточном виде проценты не нужны и мешают (ellipsis резал бы). */
    .report-table.cards { table-layout: auto; }
    .report-table.cards td { overflow: visible; text-overflow: clip; }
}

/* ============================================================
   Owner dashboard
   ============================================================ */

.back-link {
    margin-bottom: 8px;
}
.back-link a {
    color: var(--color-muted);
    text-decoration: none;
}
.back-link a:hover { text-decoration: underline; }

.alert-list {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.alert {
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    border-left: 4px solid var(--color-border);
    background: var(--color-surface);
}
/* Семантические алёрты — светлый фон + тёмный текст: читаемо в обеих темах */
.alert-red    { border-left-color: #dc2626; background: #fef2f2; color: #7f1d1d; }
.alert-yellow { border-left-color: #ca8a04; background: #fefce8; color: #713f12; }

.positive { color: #2da44e; }
.negative { color: #e5534b; }

td.num, th.num { text-align: right; white-space: nowrap; }

/* Заголовки таблиц всегда в одну строку (короткие подписи: «Дата смены», «Прислано») */
th { white-space: nowrap; }
/* Таблицы отчётов — атомарные значения (дата, объект, мастер, время, статус)
   не переносим; места по горизонтали хватает. На мобиле таблицы и так
   nowrap + горизонтальный скролл (см. @media выше). */
.report-table td { white-space: nowrap; }
/* Обе таблицы отчётов (ожидают/одобренные) — одинаковая фикс-раскладка колонок,
   чтобы последняя колонка «открыть» стояла на одном вертикальном уровне у обеих
   (при авто-ширине она плыла: статусы и «Прислано/Одобрено» разной ширины).
   Колонки: Дата · Объект · Участок · Мастер · Время · Статус · действие. */
.report-table { table-layout: fixed; width: 100%; }
.report-table th:nth-child(1) { width: 9%; }
.report-table th:nth-child(2) { width: 22%; }
.report-table th:nth-child(3) { width: 16%; }
.report-table th:nth-child(4) { width: 16%; }
.report-table th:nth-child(5) { width: 11%; }
.report-table th:nth-child(6) { width: 16%; }
.report-table th:nth-child(7) { width: 10%; }
/* Подстраховка от наложения, если имя длиннее колонки */
.report-table td { overflow: hidden; text-overflow: ellipsis; }

/* Строчное действие в таблицах админки — ЕДИНЫЙ стиль для всех (открыть,
   изменить, выключить/включить). Работает и на <a>, и на <button>. Ховер:
   серый фон заезжает слева через clip-path (референс button-48), текст —
   акцентный. Текст обёрнут в <span> — он над слоем фона (z-index). */
.row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-accent);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    padding: 7px 16px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.row-action::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-surface-hover);
    clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
    transition: clip-path .45s cubic-bezier(.165, .84, .44, 1);
    z-index: 0;
}
.row-action:hover::before {
    clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
}
.row-action,
.row-action:hover { text-decoration: none; }
.row-action > span { position: relative; z-index: 1; }

/* Карточки на главной */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.dash-card {
    display: block;
    padding: 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.1s;
}
.dash-card:hover {
    border-color: var(--color-accent);
}
.dash-card-minus {
    border-left: 4px solid #dc2626;
}
.dash-card-incomplete {
    border-left: 4px solid #ca8a04;
    background: var(--color-surface);
}
.dash-card-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-muted);
}
.dash-card-object {
    font-size: 12px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.dash-card-sub {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-fg);
    margin-top: 2px;
}
.dash-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 14px;
}
.dash-card-label { color: var(--color-muted); }
.dash-card-value { font-weight: 500; }
.dash-card-profit {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-muted);
    font-size: 15px;
}
.dash-card-profit .dash-card-value { font-weight: 700; }
.dash-card-margin {
    color: var(--color-muted);
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
}
.dash-card-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-muted);
    font-size: 12px;
    color: var(--color-muted);
    font-style: italic;
}

.dash-section-skipped {
    margin-top: 32px;
    color: var(--color-muted);
}

/* Детальный экран — итоги */
.dash-totals { margin: 16px 0; }
.totals-table {
    width: auto;
    margin: 8px 0;
}
.totals-table td {
    padding: 6px 16px 6px 0;
    border: none;
}
.totals-table td.totals-label {
    color: var(--color-muted);
    font-size: 14px;
}
.totals-table td.totals-value {
    font-size: 18px;
    font-weight: 600;
    text-align: right;
}
.totals-profit td {
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
}
.totals-profit .totals-value { font-size: 22px; }
.totals-margin {
    font-size: 13px;
    color: var(--color-muted);
    font-weight: 400;
    margin-left: 6px;
}
.totals-note {
    font-size: 13px;
    color: var(--color-muted);
    font-style: italic;
    margin-top: 6px;
}

/* Лента по дням */
.dash-days { margin-top: 24px; }
.dash-note {
    font-size: 13px;
    margin: 4px 0 12px;
}
.days-table { width: 100%; }
.days-table th { font-size: 13px; color: var(--color-muted); }
/* Минусовая строка — светлый фон + тёмный текст, читаемо в тёмной теме */
.day-minus td { background: #fef2f2; color: #7f1d1d; }
.day-detail-cell {
    padding: 8px 12px;
    background: var(--color-surface);
}
.day-detail {
    padding: 8px 0;
}
.day-detail-header {
    display: flex;
    gap: 16px;
    align-items: baseline;
    margin-bottom: 6px;
}
.day-detail-date { font-weight: 600; }
.day-detail-meta { color: var(--color-muted); font-size: 13px; }
.day-detail-table {
    width: auto;
    margin: 6px 0;
}
.day-detail-table th {
    font-size: 12px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 4px 12px 4px 0;
}
.day-detail-table td { padding: 3px 12px 3px 0; border: none; }
.day-detail-hint {
    font-size: 12px;
    color: var(--color-muted);
    font-style: italic;
    margin-top: 6px;
}

/* Позиции */
.dash-positions { margin-top: 32px; }
.positions-table { width: 100%; font-size: 14px; }
.positions-table th { font-size: 13px; color: var(--color-muted); }
/* Превышение объёма — светлый фон + тёмный текст, читаемо в тёмной теме */
.position-overrun td { background: #fefce8; color: #713f12; }
.positions-total td {
    border-top: 2px solid var(--color-border);
    background: var(--color-surface);
}

/* Mobile (<768px) — карточки в одну колонку, цифры компактнее */
@media (max-width: 767px) {
    .card-grid { grid-template-columns: 1fr; }
    .totals-table td.totals-value { font-size: 16px; }
    .totals-profit .totals-value { font-size: 19px; }
    .days-table th, .days-table td { font-size: 13px; padding: 6px 4px; }
    .positions-table { font-size: 13px; }
    .positions-table th, .positions-table td { padding: 6px 4px; }
}

/* ================================================================ */
/* Спиннер загрузки + оверлей (отправка отчёта, обработка фото)      */
/* ================================================================ */
.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
/* Маленький спиннер в строку текста (напр. «Готовлю фото…») */
.spinner-inline {
    width: 14px;
    height: 14px;
    border-width: 2px;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 4px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Полноэкранный оверлей на время отправки формы — чтобы не выглядело
   «зависло» и чтобы нельзя было нажать кнопку повторно. */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(13, 17, 23, 0.55);
    color: #fff;
    font-size: 16px;
}
.loading-overlay .spinner {
    width: 40px;
    height: 40px;
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}

/* ================================================================ */
/* Возвращённый на доработку отчёт — выделение в «Моих отчётах»      */
/* ================================================================ */
.returned-heading { color: #d29922; }
.badge-returned { background: #fef3c7; color: #78350f; }
.report-returned {
    border-left: 4px solid #d29922;
}
.report-return-reason {
    margin: .4rem 0;
    padding: 8px 10px;
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 14px;
}

/* ================================================================ */
/* Inbox — панель фильтра одобренных отчётов по периоду             */
/* ================================================================ */
.inbox-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    margin-bottom: .5rem;
}
.inbox-filter-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.inbox-filter-presets a[role="button"] {
    margin: 0;
    padding: 4px 12px;
    font-size: 14px;
    width: auto;
}
.inbox-filter-range {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.inbox-filter-range label {
    margin: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.inbox-filter-range input[type="date"],
.inbox-filter-range select { margin: 0; }
.inbox-filter-range button {
    margin: 0;
    padding: 6px 16px;
    width: auto;
}

/* Десктоп: пресеты, поля дат и «Показать» — РОВНО одной высоты. Padding не
   уравнивает (нативный input[type=date] и кнопки Pico имеют разную внутреннюю
   геометрию), поэтому задаём явную height + box-sizing:border-box всем трём и
   центрируем содержимое. .inbox-filter align-items:center ставит их на одну
   линию. Подписи «с»/«по» — слева от полей в строку. На мобиле высоту задаёт
   общий тач-блок (min-height:44) — сюда не лезем. */
@media (min-width: 769px) {
    .inbox-filter-presets a[role="button"],
    .inbox-filter-range input[type="date"],
    .inbox-filter-range select,
    .inbox-filter-range button {
        height: 40px;
        box-sizing: border-box;
        font-size: 14px;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .inbox-filter-presets a[role="button"],
    .inbox-filter-range button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Мобиле: фильтр в столбик, поля на всю ширину, «Показать» во всю ширину.
   Подписи «с»/«по» — узкая фикс-колонка (поля дат стартуют с одной вертикали),
   а длинные подписи (Объект/Договор в счетах) — нормальной ширины. */
@media (max-width: 768px) {
    .inbox-filter-range { width: 100%; flex-direction: column; align-items: stretch; }
    .inbox-filter-range label { display: flex; align-items: center; gap: 8px; width: 100%; }
    .inbox-filter-range label > input,
    .inbox-filter-range label > select { flex: 1 1 auto; min-width: 0; width: auto; }
    .inbox-filter-range label:has(> input[type="date"]) { display: grid; grid-template-columns: 24px 1fr; }
    .inbox-filter-range button { width: 100%; }
}

/* ================================================================ */
/* Постраничная навигация (pager) под таблицей одобренных          */
/* ================================================================ */
.pager {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 1rem;
}
.pager a[role="button"],
.pager span[role="button"] {
    margin: 0;
    padding: 4px 12px;
    font-size: 14px;
    width: auto;
}
.pager span[aria-disabled="true"] { opacity: .45; cursor: default; }
.pager-gap { padding: 0 4px; color: var(--color-text-muted, #888); }

/* ================================================================ */
/* Разбор заявки на материал — попозиционные блоки                  */
/* ================================================================ */
.mr-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--color-surface);
    transition: opacity .12s;
}
/* Снятая галка «к закупке» — позиция приглушена */
.mr-item-off { opacity: .55; }

.mr-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    margin: 0;
    cursor: pointer;
}
.mr-item-head input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; }
.mr-item-name { font-weight: 600; }

.mr-item-chars { margin: 4px 0 8px 30px; font-size: 13px; }

.mr-item-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-left: 30px;
}
.mr-item-fields input { margin: 0; }
.mr-item-asked { font-size: 14px; color: var(--color-muted); }
.mr-item-take { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.mr-item-note { flex: 1; min-width: 180px; }

/* Read-only таблица: отклонённая позиция — приглушена */
.mr-row-off td { opacity: .5; }

@media (max-width: 640px) {
    .mr-item-fields { margin-left: 0; }
    .mr-item-chars { margin-left: 30px; }
    .mr-item-note { width: 100%; flex-basis: 100%; }
}

/* === Витрина собственника: договоры (owner_facts) === */
.contracts-sub-title {
    margin-top: 8px;
    color: var(--color-muted);
    font-weight: 500;
}

.contract-block {
    margin-bottom: 28px;
}
.contract-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.contract-head h2 { margin: 0; }

.money-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 16px 0 8px;
}
.money-box {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 14px;
}
.money-label {
    font-size: 13px;
    color: var(--color-muted);
}
.money-value {
    font-size: 20px;
    font-weight: 700;
    margin-top: 4px;
}
.money-hint {
    font-size: 11px;
    color: var(--color-muted);
    margin-top: 4px;
}

.table-scroll { overflow-x: auto; }
.positions-table { width: 100%; font-size: 14px; }
.positions-table .row-overrun td { background: rgba(229, 83, 75, 0.07); }
.positions-table .row-excluded td { opacity: .5; }

/* Дневная сводка собственника */
.day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 4px;
}
.day-head h1 { margin: 0; text-align: center; }
.day-nav a {
    font-size: 15px;
    white-space: nowrap;
    padding: 4px 8px;
}
.day-nav-off { color: var(--color-muted); opacity: .4; padding: 4px 8px; }

.day-verdict {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.verdict-box {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 18px 20px;
    text-align: center;
    background: var(--color-surface, #fff);
}
.verdict-box.positive { background: rgba(45, 164, 78, 0.10); border-color: rgba(45, 164, 78, 0.35); }
.verdict-box.negative { background: rgba(229, 83, 75, 0.10); border-color: rgba(229, 83, 75, 0.35); }
.verdict-label { font-size: 13px; color: var(--color-muted); }
.verdict-value { font-size: 30px; font-weight: 800; margin: 4px 0; }
.verdict-box.positive .verdict-value { color: #2da44e; }
.verdict-box.negative .verdict-value { color: #e5534b; }
.verdict-hint { font-size: 12px; color: var(--color-muted); }

tr.row-total td { font-weight: 700; border-top: 2px solid var(--color-border); }
.work-name { display: block; }
.work-detail {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-muted);
}
/* Совокупный индикатор строки работы: всё в справочнике (зелёная) или что-то
   мимо (красная). Пульсация — те же кадры, что у точек полей в форме (val-dot). */
.dot-col { width: 22px; text-align: center; padding-left: 6px; padding-right: 6px; }
.row-dot {
    display: inline-block;
    width: 11px; height: 11px;
    border-radius: 50%;
    vertical-align: middle;
}
.row-dot.ok { background: #16a34a; animation: val-dot-pulse-soft 2.4s ease-in-out infinite; }
.row-dot.bad { background: #dc2626; animation: val-dot-pulse 1.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .row-dot.ok, .row-dot.bad { animation: none; }
}
.approx { color: var(--color-muted); font-size: 13px; }
.day-warn {
    background: rgba(229, 83, 75, 0.08);
    border: 1px solid rgba(229, 83, 75, 0.30);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin: 12px 0;
}

.day-ok {
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.30);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin: 12px 0;
}

/* Инбокс счетов на согласование (owner) */
.invoice-inbox {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}
.invoice-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px 18px;
}
.invoice-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.invoice-supplier { font-size: 17px; font-weight: 700; }
.invoice-amount { font-size: 22px; font-weight: 800; white-space: nowrap; }
.invoice-meta { font-size: 13px; margin-top: 8px; }
.invoice-notes {
    font-size: 13px;
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.03);
    border-radius: 6px;
}
.invoice-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.invoice-actions form { margin: 0; }
.btn-approve {
    background: #2da44e;
    color: #fff;
    border: 1px solid #2da44e;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.btn-approve:hover { background: #278a42; }
.btn-return {
    background: transparent;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 15px;
    cursor: pointer;
}
.btn-return:hover { border-color: #e5534b; color: #e5534b; }