:root {
    --color-bg: #f4f5f7;
    --color-surface: #ffffff;
    --color-text: #1b1f24;
    --color-muted: #6b7280;
    --color-border: #e2e4e9;
    --color-accent: #2563eb;
    --color-accent-contrast: #ffffff;
    --color-error: #dc2626;
    --color-error-bg: #fef2f2;
    --color-ok: #16a34a;
    --color-ok-bg: #f0fdf4;
    --radius: 8px;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
}

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

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

/* Навигация */
.topnav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0 20px;
    height: 56px;
}

.topnav-left .store-name {
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}

.topnav-center {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1;
}

.nav-tab {
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--color-muted);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.nav-tab:hover { background: var(--color-bg); text-decoration: none; }

.nav-tab.active {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    font-weight: 600;
}

.topnav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.settings-link { color: var(--color-muted); font-size: 14px; }

.user-menu { position: relative; }

.user-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text);
    padding: 6px 8px;
}

.user-menu-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    min-width: 160px;
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.user-menu-dropdown a,
.user-menu-dropdown .link-button {
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
}

.user-menu-dropdown a:hover,
.user-menu-dropdown .link-button:hover {
    background: var(--color-bg);
    text-decoration: none;
}

[x-cloak] { display: none !important; }

/* Layout */
.page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.page-header h1 { margin: 0; font-size: 22px; }

/* Карточки */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

.card h2 { margin-top: 0; font-size: 16px; }

/* Формы */
.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 14px;
}

.field input,
.field select {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}

.stack-form { display: flex; flex-direction: column; }

.settings-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}
.inline-form { display: inline-block; margin: 0 4px 0 0; }

.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
}

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

.btn-small { padding: 4px 10px; font-size: 13px; }

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

.btn-primary:hover { opacity: 0.9; }

.btn-secondary { background: var(--color-bg); }

.btn-block { width: 100%; }

/* Алерты */
.alert {
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 14px;
}

.alert-error { background: var(--color-error-bg); color: var(--color-error); }
.alert-ok { background: var(--color-ok-bg); color: var(--color-ok); }

/* Логин */
.login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 40px);
}

.login-card { width: 100%; max-width: 360px; }
.login-title { margin-top: 0; font-size: 20px; text-align: center; }

/* Плитки статистики */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stat-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.stat-tile-warn { border-left: 3px solid var(--color-error); }
.stat-tile-active { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }

.stat-value { font-size: 22px; font-weight: 700; }
.stat-label { font-size: 13px; color: var(--color-muted); }

.stat-tile-link { text-decoration: none; display: block; }
.stat-tile-link:hover { text-decoration: none; }

/* Статус каталога и панель управления на странице себестоимости */
.catalog-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.controls-card { padding: 14px 16px; }

.controls-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.controls-form .search-input { flex: 1 1 220px; }
.controls-form select { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; font-family: inherit; font-size: 14px; }

/* Строки себестоимости */
.costs-table .expand-cell { width: 32px; }

.chevron-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 14px;
    padding: 4px;
}

.row-no-cost td:nth-child(2) { border-left: 3px solid var(--color-error); }

.cost-cell { min-width: 140px; }
.cost-value { cursor: pointer; display: inline-block; padding: 4px 6px; border-radius: 6px; }
.cost-value:hover { background: var(--color-bg); }

.inline-edit-form { display: flex; gap: 6px; align-items: center; }
.cost-input {
    width: 110px;
    padding: 6px 8px;
    border: 1px solid var(--color-accent);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
}

.history-row { display: none; background: var(--color-bg); }
.history-row.open { display: table-row; }
.history-row td { padding: 12px; }

.history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.history-table th, .history-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--color-border); }
.history-current { font-weight: 600; }
.history-empty { margin: 0; }

.badge {
    display: inline-block;
    background: var(--color-ok-bg);
    color: var(--color-ok);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    margin-left: 6px;
}

/* Импорт/экспорт CSV */
.import-export-card { margin-top: 20px; }

.import-export-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.import-form { display: flex; align-items: center; gap: 8px; }

.import-summary { margin-top: 14px; }
.import-summary p { margin: 4px 0; }

.import-errors { margin: 6px 0; padding-left: 18px; font-size: 13px; color: var(--color-error); }

/* Таблицы */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.table th, .table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}

.table th { color: var(--color-muted); font-weight: 600; font-size: 13px; }
.table tr:last-child td { border-bottom: none; }

.table.resizable { table-layout: fixed; }
.table.resizable th { position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
}
.col-resize-handle:hover,
.col-resize-handle.resizing { background: var(--color-border); }

.actions-cell { white-space: nowrap; }

.thumb,
.thumb-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

.thumb {
    display: block;
    object-fit: cover;
}

.empty-state { text-align: center; padding: 40px 20px; }

/* Тост */
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 50;
}

.toast {
    background: var(--color-text);
    color: var(--color-surface);
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    max-width: 320px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Склад */
.stock-subnav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.consumable-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
}

.consumable-form .btn { grid-column: 1 / -1; justify-self: start; }

.consumable-card { cursor: default; }

.consumable-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.consumable-archived { opacity: 0.6; }

.consumable-body {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.link-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
}

.attach-form { display: flex; gap: 8px; }
.attach-form input, .attach-form textarea { flex: 1; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; font-family: inherit; font-size: 14px; resize: vertical; }

.attach-form-block { display: flex; flex-direction: column; gap: 8px; }
.offer-search { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; font-family: inherit; font-size: 14px; }
.offer-multiselect { width: 100%; padding: 4px; border: 1px solid var(--color-border); border-radius: 6px; font-family: inherit; font-size: 14px; }
.attach-form-block textarea { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; font-family: inherit; font-size: 14px; resize: vertical; }

.badge-muted { background: var(--color-bg); color: var(--color-muted); }
.badge-warn { background: var(--color-error-bg); color: var(--color-error); }

.batch-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.batch-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
}

.batch-spent { opacity: 0.65; }
.batch-spoiler { margin-top: 4px; }
.batch-spoiler summary { cursor: pointer; }

.move-forms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.move-form { display: flex; flex-direction: column; }
.move-form h4 { margin: 0 0 8px; font-size: 14px; }
.move-form button[type="submit"] { margin-top: auto; align-self: flex-start; }

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
}

.landed-cost-extra { margin: 6px 0; }
.landed-cost-extra summary { cursor: pointer; font-size: 13px; margin-bottom: 8px; }

/* Остатки по позициям */
.position-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.position-card { padding: 12px; cursor: default; }

.position-summary {
    display: flex;
    gap: 12px;
    cursor: pointer;
}

.position-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.position-metrics {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
}

.missing-note { color: var(--color-error); font-size: 13px; }

.position-table tbody tr.position-row { cursor: pointer; }
.position-table tbody tr.position-row:hover { background: var(--color-bg); }
.position-table .position-summary { display: flex; gap: 12px; align-items: center; }
.position-table .position-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.section-spoiler { margin-bottom: 16px; }
.section-spoiler summary { cursor: pointer; margin-bottom: 12px; }
.inline-h2 { display: inline; font-size: 16px; }

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    z-index: 40;
}

.modal-panel {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 20px;
    max-width: 640px;
    width: 100%;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-head h3 { margin: 0; }

.components-table td, .components-table th { font-size: 13px; }
.component-limiting {
    background: var(--color-error-bg);
    box-shadow: inset 3px 0 0 var(--color-error);
}

/* Поставки в пути */
.incoming-card { display: flex; flex-direction: column; gap: 10px; }

.incoming-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.incoming-eta { font-size: 13px; }
.eta-overdue { color: var(--color-error); font-weight: 600; }

/* Финансы */
.totals-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.amount-negative { color: var(--color-error); }
.period-label { margin-bottom: 8px; }

.radio-label { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }

.balance-note { margin-bottom: 16px; }

.balance-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.balance-tile { display: flex; flex-direction: column; gap: 6px; }
.balance-tile strong { font-size: 20px; }
.balance-tile-total { background: var(--color-bg); }

.balance-row-input {
    width: 100%;
    min-width: 140px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
}
.balance-row-input-amount { min-width: 100px; max-width: 140px; }

/* Мобильная адаптация */
@media (max-width: 640px) {
    .topnav { flex-wrap: wrap; height: auto; padding: 10px 16px; row-gap: 8px; }
    .topnav-left { order: 1; }
    .topnav-right { order: 2; }
    .topnav-center {
        order: 3;
        flex: 0 0 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
    }
    .nav-tab { white-space: nowrap; }

    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr {
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        margin-bottom: 10px;
        padding: 8px 12px;
    }
    .table td {
        border-bottom: none;
        padding: 4px 0;
    }
    .table td::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        color: var(--color-muted);
    }
}