/* ── Login ───────────────────────────────────────────────────────────────── */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 0%, #0c1a35 0%, #090b14 70%);
    /* Deep aquatic gradient */
    transition: opacity 0.3s;
    position: relative;
    overflow: hidden;
}

/* Subtle background glowing orb */
.login-container::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: var(--primary);
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.15;
    z-index: 0;
    animation: pulseGlow 8s infinite alternate ease-in-out;
}

@keyframes pulseGlow {
    0% {
        transform: scale(0.8) translate(-10%, -10%);
    }

    100% {
        transform: scale(1.1) translate(10%, 10%);
    }
}

.login-card {
    background: var(--surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 48px 40px;
    width: 380px;
    box-shadow: var(--shadow-xl), 0 0 1px rgba(255, 255, 255, 0.06);
    z-index: 1;
    position: relative;
    transform: translateY(0);
    animation: cardFloatUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cardFloatUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header p {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-top: 8px;
}

.logo-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-bottom: 8px;
}

.logo-large svg {
    margin-bottom: 4px;
    filter: drop-shadow(0 4px 12px var(--primary-glow));
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.logo-large:hover .gear-icon,
.sidebar .logo:hover .gear-icon {
    animation: spin 5s linear infinite;
}

.logo-text-wrapper {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.logo-tsk {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
}

.logo-group {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.5px;
}

.login-footer {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    margin-top: 24px;
}

.form-group {
    margin-bottom: 6px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted);
}

.form-group input,
.form-control {
    width: 100%;
    padding: 7px 11px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow), 0 2px 8px rgba(14, 165, 233, 0.08);
    background: rgba(14, 165, 233, 0.02);
}

/* ── Input + Currency Select Group ──────────────────────────────────────── */
.input-group-currency {
    display: flex;
    align-items: stretch;
}

.input-group-currency .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    flex: 1;
    min-width: 80px;
    width: auto;
}

.input-group-currency-select {
    padding: 7px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    min-width: 80px;
}

.input-group-currency-select:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}

.input-group-currency-select:hover {
    background: var(--surface2);
}

.input-group-currency:focus-within .form-control,
.input-group-currency:focus-within .input-group-currency-select {
    border-color: var(--primary);
}

.input-group-currency:focus-within .form-control:not(:focus) {
    box-shadow: none;
}

.select-with-add {
    display: flex;
    gap: 6px;
    align-items: center;
}

.select-with-add> :first-child,
.select-with-add .ts-wrapper {
    flex: 1;
    min-width: 0;
}

.btn-add-quick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all .2s;
}

.btn-add-quick:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--surface);
}

.req {
    color: var(--danger);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #0284c7);
    color: #fff;
    box-shadow: 0 2px 12px var(--primary-glow);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity: 0; transition: opacity 0.2s;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #38bdf8, var(--primary));
    box-shadow: 0 4px 20px var(--primary-glow);
    transform: translateY(-1px);
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px var(--primary-glow); }

/* Кнопка — состояние "успешно" после действия */
.btn.btn-done {
    background: var(--success) !important;
    color: #fff !important;
    pointer-events: none;
    transition: all 0.3s;
}
.btn.btn-done::before {
    content: '✓ ';
}

/* Ripple при клике: живая реализация — .ripple + @keyframes rippleAnim ниже
   (вешается глобальным слушателем на .btn-primary в globals.js) */

.btn-detail-view {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.btn-detail-view:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.5);
}

[data-theme="light"] .btn-detail-view {
    background: rgba(14, 165, 233, 0.08);
    color: #0284c7;
    border: 1px solid rgba(14, 165, 233, 0.25);
}

[data-theme="light"] .btn-detail-view:hover {
    background: rgba(14, 165, 233, 0.14);
}

/* ── Invoice Preview Cards ─────────────────────────────────────────────── */
.ipc-list { display: flex; flex-direction: column; gap: 6px; }
.ipc {
    display: flex; gap: 12px; padding: 12px 14px;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface2); transition: all 0.15s;
}
.ipc:hover { background: rgba(14, 165, 233, 0.03); }
.ipc-green { border-left: 3px solid rgba(16, 185, 129, 0.4); }
.ipc-yellow { border-left: 3px solid rgba(245, 158, 11, 0.4); }
.ipc-red { border-left: 3px solid rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.02); }

.ipc-num { font-size: var(--text-2xs); color: var(--text-muted); font-weight: 600; padding-top: 2px; min-width: 18px; }
.ipc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ipc-columns { display: flex; gap: 12px; align-items: flex-start; }
.ipc-col-our, .ipc-col-1c { flex: 1; min-width: 0; }
.ipc-col-arrow { display: flex; align-items: center; padding-top: 16px; flex-shrink: 0; }
.ipc-label { font-size: var(--text-4xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.ipc-article { font-family: monospace; font-size: var(--text-xs); color: var(--primary); font-weight: 600; }
.ipc-name { font-size: var(--text-xs); color: var(--text); line-height: 1.35; word-break: break-word; }
.ipc-not-found { display: flex; align-items: center; gap: 6px; color: #fb7185; font-size: var(--text-xs); font-weight: 500; padding: 4px 0; }

.ipc-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: var(--text-3xs); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-xs); margin-top: 4px;
}
.ipc-badge.ipc-green { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.ipc-badge.ipc-yellow { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.ipc-actions { display: flex; gap: 4px; margin-top: 6px; }

.ipc-create-1c {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px; padding: 3px 6px;
    font-size: var(--text-2xs); color: var(--text-muted);
    border-radius: var(--radius-xs);
    cursor: pointer; user-select: none;
    transition: background 0.15s, color 0.15s;
}
.ipc-create-1c:hover { background: rgba(14, 165, 233, 0.06); color: var(--text); }
.ipc-create-1c-cb { margin: 0; cursor: pointer; }
.ipc-create-1c:has(.ipc-create-1c-cb:checked) { color: var(--primary); font-weight: 600; }

.ipc-numbers {
    display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border);
}
.ipc-num-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ipc-num-label { font-size: var(--text-4xs); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.ipc-num-val { font-size: var(--text-sm); color: var(--text); font-weight: 500; }
.ipc-num-val.ipc-bold { font-weight: 700; color: var(--success); }
.ipc-vat-input {
    width: 48px; font-size: var(--text-xs); padding: 3px 4px; text-align: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs);
    color: var(--text); font-family: inherit;
}
.ipc-container { max-height: 50vh; }

@media (max-width: 768px) {
    .ipc-columns { flex-direction: column; gap: 8px; }
    .ipc-col-arrow { display: none; }
    .ipc-numbers { flex-wrap: wrap; }
}

/* Progress bar */
.inv-progress-bar {
    display: flex; height: 6px; border-radius: var(--radius-xs); overflow: hidden;
    background: var(--border); margin-bottom: 8px;
}
.inv-prog-seg { transition: width 0.4s ease; }
.inv-prog-seg.green { background: linear-gradient(90deg, #10b981, #34d399); }
.inv-prog-seg.yellow { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.inv-prog-seg.red { background: linear-gradient(90deg, #ef4444, #fb7185); }
.inv-progress-labels {
    display: flex; gap: 16px; font-size: var(--text-2xs); font-weight: 500;
}
.inv-prog-label { display: flex; align-items: center; gap: 5px; color: var(--text-muted); }
.inv-prog-label .inv-prog-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.inv-prog-label.green .inv-prog-dot { background: #10b981; }
.inv-prog-label.yellow .inv-prog-dot { background: #f59e0b; }
.inv-prog-label.red .inv-prog-dot { background: #ef4444; }
.inv-prog-label.green { color: var(--success); }
.inv-prog-label.yellow { color: #f59e0b; }
.inv-prog-label.red { color: #fb7185; }

/* Pick button */
.btn-inv-pick {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: var(--radius-sm); font-size: var(--text-3xs); font-weight: 600;
    background: rgba(14, 165, 233, 0.08); border: 1px solid rgba(14, 165, 233, 0.2);
    color: var(--primary); cursor: pointer; transition: all 0.2s;
    margin-top: 4px; font-family: inherit;
}
.btn-inv-pick:hover {
    background: rgba(14, 165, 233, 0.15); border-color: var(--primary);
    transform: translateY(-1px);
}
.inv-match-actions { display: flex; gap: 4px; margin-top: 4px; }
.btn-inv-request {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: var(--radius-sm); font-size: var(--text-3xs); font-weight: 600;
    background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b; cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.btn-inv-request:hover {
    background: rgba(245, 158, 11, 0.15); border-color: #f59e0b;
    transform: translateY(-1px);
}
.btn-inv-request:disabled {
    opacity: 0.6; cursor: default; transform: none;
    background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); color: var(--success);
}

/* 1С Nomenclature Picker */
.ipc-picker {
    margin-top: 8px; padding: 10px; border-radius: var(--radius-sm);
    background: var(--bg); border: 1px solid var(--primary);
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.1);
    animation: ratesDropIn 0.2s ease;
}
.ipc-picker-header {
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--text-xs); font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.ipc-picker-close {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    padding: 2px; border-radius: var(--radius-xs); display: flex;
}
.ipc-picker-close:hover { color: var(--text); background: var(--surface2); }
.ipc-picker-search {
    display: flex; gap: 4px; margin-bottom: 8px;
}
.ipc-search-input { font-size: var(--text-xs) !important; padding: 5px 8px !important; }
.ipc-picker-results {
    display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow-y: auto;
}
.ipc-pick-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid transparent;
    transition: all 0.15s; cursor: default;
}
.ipc-pick-item:hover { background: rgba(14, 165, 233, 0.04); border-color: rgba(14, 165, 233, 0.1); }
.ipc-pick-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ipc-pick-art { font-family: monospace; font-size: var(--text-2xs); color: var(--text-muted); }
.ipc-pick-art.match { color: var(--success); font-weight: 600; }
.ipc-pick-desc { font-size: var(--text-xs); color: var(--text); line-height: 1.3; word-break: break-word; }
.ipc-pick-btn { flex-shrink: 0; font-size: var(--text-3xs) !important; padding: 3px 10px !important; }

/* Task for accountant button */
.btn-inv-task-buh {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600;
    background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b; cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.btn-inv-task-buh:hover {
    background: rgba(245, 158, 11, 0.18); border-color: #f59e0b;
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}
.btn-inv-task-buh:disabled { opacity: 0.7; cursor: default; transform: none; box-shadow: none; }
.btn-inv-task-buh.done {
    background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3);
    color: var(--success);
}

.btn-secondary {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    border-color: var(--primary);
}

/* Старое поколение мягких кнопок (.btn-*-soft) удалено — единственная система
   теперь .btn-soft-* на color-mix (см. секцию «Семантические „мягкие" кнопки»). */

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px dashed var(--border);
}
.btn-ghost:hover {
    color: var(--text);
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.04);
}

/* ── Empty State ─────────────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    color: var(--text-muted);
}
.empty-state i,
.empty-state svg {
    width: 56px !important;
    height: 56px !important;
    color: var(--text-muted);
    opacity: 0.4;
    stroke-width: 1.5;
}
.empty-state p {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-muted);
}
.empty-state .empty-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    /* opacity здесь не ставим: --text-muted уже подобран по контрасту,
       а множитель 0.75 сбивал его ниже порога AA. Тусклее — через цвет. */
    max-width: 320px;
    line-height: 1.5;
}
.empty-state .btn {
    margin-top: 8px;
}
.empty-row {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ── Custom Tooltip ──────────────────────────────────────────────────────── */
/* JS перехватывает [title] и создаёт #appTooltip с задержкой ~500ms */
#appTooltip {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    background: #0f172a;
    color: #f1f5f9;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    max-width: 280px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    white-space: pre-wrap;
}
#appTooltip.show {
    opacity: 1;
    transform: translateY(0);
}
[data-theme="light"] #appTooltip {
    background: #1e293b;
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}
[data-theme="light"] .skeleton {
    background: linear-gradient(90deg,
        rgba(15, 23, 42, 0.04) 0%,
        rgba(15, 23, 42, 0.08) 50%,
        rgba(15, 23, 42, 0.04) 100%);
    background-size: 200% 100%;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-line {
    display: block;
    height: 14px;
    margin: 6px 0;
}
.skeleton-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.skeleton-row .skeleton {
    height: 14px;
    flex: 1;
}

/* ── Кликабельные строки таблиц ─────────────────────────────────────────────
   Проблема: `.doc-table tr:hover td` (orders.css) подсвечивает ЛЮБУЮ строку,
   поэтому hover сам по себе не отличает кликабельную строку от обычной.
   Здесь кликабельные строки получают курсор, более выраженный hover и
   клавиатурный фокус. Класс `is-clickable` проставляет a11y.js по списку
   селекторов — рендеры трогать не нужно (новый код может ставить класс сам). */
.doc-table tbody tr.is-clickable {
    cursor: pointer;
}
.doc-table tbody tr.is-clickable:hover td {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.doc-table tbody tr.is-clickable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
.doc-table tbody tr.is-clickable:focus-visible td {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}
/* Строка-заглушка (скелетон/пусто/ошибка) кликабельной быть не должна */
.doc-table tbody tr.skeleton-tr,
.doc-table tbody tr.table-state-row {
    cursor: default;
}
.doc-table tbody tr.skeleton-tr:hover td,
.doc-table tbody tr.table-state-row:hover td {
    background: transparent;
}
/* Единый вид строк-состояний таблицы (загрузка / пусто / ошибка) */
.table-state-row td {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-muted);
    font-size: var(--text-sm);
    white-space: normal;
}
.table-state-row .table-state-ic {
    width: 18px;
    height: 18px;
    vertical-align: -4px;
    margin-right: 8px;
    opacity: 0.6;
}
.table-state-row.is-error td {
    color: var(--danger);
}

/* Унифицированная кнопка синхронизации с 1С — единый цвет для всех разделов */
.btn-sync {
    background: rgba(14, 165, 233, 0.10);
    color: var(--primary);
    border: 1px solid rgba(14, 165, 233, 0.30);
}
.btn-sync:hover {
    background: rgba(14, 165, 233, 0.18);
    border-color: var(--primary);
    transform: translateY(-1px);
}
[data-theme="light"] .btn-sync {
    background: rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.25);
}
[data-theme="light"] .btn-sync:hover { background: rgba(2, 132, 199, 0.14); }

.btn-full {
    width: 100%;
    justify-content: center;
    padding: 12px;
}

.btn-sm {
    padding: 5px 10px;
    font-size: var(--text-xs);
}

/* File action buttons */
.file-actions-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.kp-name-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-3xs);
    color: var(--text-muted);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    transition: all 0.2s;
    user-select: none;
    white-space: nowrap;
}
.kp-name-toggle:hover { background: rgba(255,255,255,0.08); }
.kp-name-toggle input[type="checkbox"] { width: 12px; height: 12px; margin: 0; cursor: pointer; accent-color: var(--primary); }
.kp-name-toggle:has(input:checked) { background: rgba(14,165,233,0.1); border-color: rgba(14,165,233,0.3); color: var(--primary); }
[data-theme="light"] .kp-name-toggle { background: rgba(0,0,0,0.03); }
[data-theme="light"] .kp-name-toggle:hover { background: rgba(0,0,0,0.06); }
[data-theme="light"] .kp-name-toggle:has(input:checked) { background: rgba(2,132,199,0.08); border-color: rgba(2,132,199,0.2); color: #0284c7; }

/* ── Placement Table ─────────────────────────────────────────────────── */
.placement-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.placement-table th {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    padding: 10px 8px;
    text-align: left;
    font-weight: 600;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    z-index: 2;
}
.placement-editable-header { color: #f59e0b !important; }
.placement-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}
.placement-table tr:hover { background: rgba(255,255,255,0.02); }
[data-theme="light"] .placement-table tr:hover { background: rgba(0,0,0,0.02); }
.placement-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.placement-table .col-text { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.placement-editable { position: relative; }
.placement-input {
    width: 100%;
    min-width: 80px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(245,158,11,0.04);
    color: var(--text);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s, background 0.15s;
}
.placement-input:focus {
    outline: none;
    border-color: #f59e0b;
    background: rgba(245,158,11,0.08);
}
.placement-input-text { min-width: 100px; }
.placement-input[type="number"] { min-width: 90px; }
.placement-input-date { min-width: 110px; font-size: var(--text-xs); }

/* Placement supplier Tom Select compact */
.placement-table .ts-wrapper { min-width: 140px; }
.placement-table .ts-wrapper .ts-control {
    padding: 4px 8px !important;
    min-height: 28px !important;
    font-size: var(--text-xs) !important;
    border: 1px solid rgba(245,158,11,0.3) !important;
    background: var(--card, #1e1e2e) !important;
    color: var(--text, #e2e8f0) !important;
    border-radius: var(--radius-xs) !important;
}
.placement-table .ts-wrapper .ts-control input { font-size: var(--text-xs) !important; color: var(--text, #e2e8f0) !important; }
.placement-table .ts-wrapper .ts-control .item { color: var(--text, #e2e8f0) !important; }
.placement-table .ts-wrapper .ts-dropdown {
    font-size: var(--text-xs) !important;
    z-index: 3000 !important;
    background: var(--card, #1e1e2e) !important;
    border: 1px solid var(--border, #2e2e3e) !important;
    color: var(--text, #e2e8f0) !important;
    box-shadow: var(--shadow-lg) !important;
    max-height: 220px !important;
}
.placement-table-wrap { padding-bottom: 240px !important; }
.placement-table .ts-wrapper .ts-dropdown .option,
body > .ts-dropdown .option {
    padding: 6px 10px !important;
    color: var(--text, #e2e8f0) !important;
}
.placement-table .ts-wrapper .ts-dropdown .option.active,
.placement-table .ts-wrapper .ts-dropdown .option:hover,
body > .ts-dropdown .option.active,
body > .ts-dropdown .option:hover {
    background: rgba(245,158,11,0.15) !important;
    color: #f59e0b !important;
}
.placement-table .ts-wrapper .ts-dropdown .create,
body > .ts-dropdown .create {
    color: #f59e0b !important;
}
.placement-table .ts-wrapper.focus .ts-control {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245,158,11,0.15) !important;
}

/* History indicator */
.has-history { position: relative; }
.has-history::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    pointer-events: none;
}

/* History Tooltip */
.history-tooltip {
    position: fixed;
    z-index: 2000;
    background: #1a1a2e;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    min-width: 240px;
    max-width: 360px;
    box-shadow: var(--shadow-lg);
    font-size: var(--text-xs);
    pointer-events: none;
}
.history-tooltip .ht-title {
    font-weight: 700;
    font-size: var(--text-xs);
    color: #f59e0b;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.history-tooltip .ht-row {
    padding: 4px 0;
    border-bottom: 1px solid rgba(128,128,128,0.1);
}
.history-tooltip .ht-row:last-child { border-bottom: none; }
.history-tooltip .ht-meta {
    font-size: var(--text-3xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Customs (Растаможка) badges ─────────────────────────────────────── */
.customs-badge {
    display: inline-block;
    font-size: var(--text-4xs);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.customs-badge-1c {
    background: rgba(34,197,94,0.12);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.3);
}
.customs-badge-local {
    background: rgba(245,158,11,0.12);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.3);
}
.customs-badge-empty {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.3);
}

/* ── Transition Warning Modal ─────────────────────────────────────────── */
.tw-warning-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: rgba(245,158,11,0.06);
    border: 1px solid rgba(245,158,11,0.18);
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.5;
}
.tw-warning-item i { flex-shrink: 0; color: #f59e0b; margin-top: 2px; width: 20px; height: 20px; }
.tw-warning-item .tw-warn-text { font-weight: 500; }
[data-theme="light"] .tw-warning-item { background: rgba(245,158,11,0.05); }

.file-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border: none;
    border-radius: var(--radius-xs);
    font-size: var(--text-3xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff;
    white-space: nowrap;
}

.file-action-btn i {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.file-action-btn span {
    line-height: 1;
}

.file-action-btn--excel {
    background: linear-gradient(135deg, var(--success), var(--success));
}
.file-action-btn--excel:hover {
    background: linear-gradient(135deg, var(--success), var(--success));
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

.file-action-btn--pdf {
    background: linear-gradient(135deg, var(--danger), var(--danger));
}
.file-action-btn--pdf:hover {
    background: linear-gradient(135deg, #b91c1c, var(--danger));
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

.file-action-btn--scan {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
}
.file-action-btn--scan:hover {
    background: linear-gradient(135deg, #0e7490, #0891b2);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4);
    transform: translateY(-1px);
}
.file-action-btn--spec {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
}
.file-action-btn--spec:hover {
    background: linear-gradient(135deg, #6d28d9, #7c3aed);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
    transform: translateY(-1px);
}

.file-action-btn--attach {
    background: transparent;
    color: var(--text-secondary, #64748b);
    border: 1.5px dashed var(--border-color, #cbd5e1);
}
.file-action-btn--attach:hover {
    border-color: var(--accent, var(--info));
    color: var(--accent, var(--info));
    background: rgba(59, 130, 246, 0.06);
    transform: translateY(-1px);
}

.file-action-btn:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none !important;
    box-shadow: none !important;
}

/* @keyframes spin объявлен один раз выше (секция Login) */
.spin-icon { animation: spin 0.8s linear infinite; width: 10px; height: 10px; }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color .2s, background .2s;
}

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

/* :active — тактильный отклик при нажатии */
.btn:active {
    transform: scale(0.97);
    transition: transform 0.1s;
}

.btn-primary:active {
    box-shadow: 0 2px 8px var(--primary-glow);
}

/* :focus-visible — кольцо для клавиатурной навигации */
.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-icon:focus-visible,
.btn-icon-mini:focus-visible,
.btn-add-quick:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* :disabled — заблокированная кнопка */
.btn:disabled,
.btn-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* .btn-loading — спиннер внутри кнопки */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Toast */
.toast {
    background: var(--bg-card);
    border-left: 4px solid;
    box-shadow: var(--shadow-lg);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateX(120%);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--border);
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-success {
    border-left-color: var(--success);
}

.toast-error {
    border-left-color: var(--danger);
}

.toast-warning {
    border-left-color: var(--warning);
}

.toast-info {
    border-left-color: var(--primary);
}

/* ── Status Badge ────────────────────────────────────────────────────────── */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

#addItemModal {
    z-index: 1010;
}

.modal-content {
    background: var(--surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 28px;
    width: 100%;
    min-width: 360px;
    max-width: 500px;
    /* Высокая модалка не должна вылезать за экран без скролла (актуально на низких
       экранах/ноутбуках). TS-выпадашки рендерятся в body, поэтому не обрезаются. */
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    box-shadow: var(--shadow-xl), 0 0 1px rgba(255, 255, 255, 0.1), 0 0 40px rgba(14, 165, 233, 0.05);
    animation: modalPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalPopIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-sm {
    max-width: 380px;
    min-width: 320px;
}

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

.modal-header h2 {
    font-size: 17px;
    font-weight: 700;
}

.close-modal {
    cursor: pointer;
    color: var(--text-muted);
    width: 18px;
    height: 18px;
}

.close-modal:hover {
    color: var(--text);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    flex-shrink: 0;
}

/* ── Modal Sizes & Layout ──────────────────────────────────── */
.modal-md {
    max-width: 460px;
}

.modal-lg {
    max-width: 960px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    transition: max-width .35s cubic-bezier(0.4, 0, 0.2, 1), max-height .35s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content.expanded {
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 48px);
    height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
}

.modal-content.expanded .order-modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-content.expanded .order-products-list {
    flex: 1;
}

.modal-content.expanded .order-modal-left,
.modal-content.expanded .order-modal-right {
    overflow-y: auto;
    min-height: 0;
}

/* ── Tom Select Styling (Premium Glass) ─────────────────────────────────── */
.ts-wrapper {
    margin-bottom: 0;
}

.ts-control {
    background: var(--surface2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 10px !important;
    /* Reduced from 10px 14px */
    font-size: var(--text-sm) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
}

.ts-control:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-focus) !important;
    background: var(--surface) !important;
}

.ts-control input {
    color: var(--text) !important;
    font-family: inherit !important;
    font-size: var(--text-sm) !important;
    display: none !important;
    /* hide inline input since we use dropdown_input */
}

.ts-dropdown .dropdown-input-wrap {
    padding: 10px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ts-dropdown .dropdown-input {
    width: 100%;
    background: var(--surface2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 12px !important;
    font-size: var(--text-base) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
}

.ts-dropdown .dropdown-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--primary-glow) !important;
    outline: none !important;
}

.ts-dropdown .dropdown-input::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

.ts-dropdown {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
    margin-top: 6px !important;
    overflow: hidden !important;
    z-index: 3000 !important;
    animation: dropdownPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownPop {
    0% {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ts-dropdown .option {
    color: var(--text);
    padding: 10px 14px !important;
    font-size: var(--text-base);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.15s ease;
    cursor: pointer;
}

.ts-dropdown .option:last-child {
    border-bottom: none;
}

.ts-dropdown .option:hover,
.ts-dropdown .active {
    background: rgba(14, 165, 233, 0.1) !important;
    color: var(--primary) !important;
    /* Adaptable text for primary color */
    padding-left: 18px !important;
    /* Slight indent on hover */
}

.ts-wrapper.single .ts-control::after {
    border-color: var(--text-muted) transparent transparent transparent !important;
    right: 14px !important;
}

.ts-wrapper.single.focus .ts-control::after {
    border-color: transparent transparent var(--primary) transparent !important;
}

/* Rich items in TomSelect */
.dropdown-item-rich {
    display: flex;
    align-items: center;
}

/* ── Ripple Effect ──────────────────────────────────────────────────────── */
.btn-primary {
    overflow: hidden;
}
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: rippleAnim 0.5s ease-out;
    pointer-events: none;
}
@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ── Button Success Flash ───────────────────────────────────────────────── */
.btn-success-flash {
    animation: successFlash 0.6s ease;
}
@keyframes successFlash {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 2px 12px var(--primary-glow); }
}

/* ── Focus Ring Improvement ─────────────────────────────────────────────── */
.form-control:focus-visible,
.form-group input:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow), 0 2px 8px rgba(14, 165, 233, 0.08);
}

/* ── Smooth Table Row Highlight ─────────────────────────────────────────── */
.placement-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}
[data-theme="light"] .placement-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
}

/* ── Utilities (вынесены из повторяющихся инлайн-стилей) ─────────────────── */
.u-clickable { cursor: pointer; user-select: none; }
.u-flex-1 { flex: 1; }
.u-hstack { display: flex; align-items: center; gap: 6px; }
.u-hstack-8 { display: flex; align-items: center; gap: var(--space-2); }
.u-icon-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; }
.u-muted-xs { color: var(--text-muted); font-size: var(--text-xs); }
.u-card-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.u-text-right { text-align: right; }
.u-accent-danger { accent-color: var(--danger); }
.u-accent-success { accent-color: var(--success); }
/* Иконка в заголовке модалки (декор): отступ + приглушение */
.u-modal-head-ic { display: inline; vertical-align: middle; margin-right: 8px; opacity: 0.6; }

/* ── Семантические «мягкие» кнопки ──────────────────────────────────────────
   Фон/бордер выводятся из токена через color-mix → один источник правды и
   авто-адаптация под светлую/тёмную тему. Заменяют инлайновые rgba()/hex. */
.btn-soft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-soft-primary {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
}
.btn-soft-primary:hover { background: color-mix(in srgb, var(--primary) 22%, transparent); }
/* .btn-danger / .btn-success — семантические алиасы мягкого стиля
   (раньше дублировались в base.css и tasks.css с конфликтом каскада) */
.btn-soft-danger,
.btn-danger {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
}
.btn-soft-danger:hover,
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); }
.btn-soft-success,
.btn-success {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success) 32%, transparent);
}
.btn-soft-success:hover,
.btn-success:hover { background: color-mix(in srgb, var(--success) 22%, transparent); }
.btn-soft-warning {
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: var(--warning);
    border: 1px solid color-mix(in srgb, var(--warning) 34%, transparent);
}
.btn-soft-warning:hover { background: color-mix(in srgb, var(--warning) 24%, transparent); }
.btn-soft-info {
    background: color-mix(in srgb, var(--info) 12%, transparent);
    color: var(--info);
    border: 1px solid color-mix(in srgb, var(--info) 32%, transparent);
}
.btn-soft-info:hover { background: color-mix(in srgb, var(--info) 22%, transparent); }

/* Размеры иконок (CSS перебивает дефолтные width/height у Lucide svg).
   Шкала сжата: 11/13 — deprecated-алиасы 12px (разница в 1px не читается
   как иерархия); в новом коде — только 12/14/16/18/20. */
.u-ic-11 { width: 12px; height: 12px; }
.u-ic-12 { width: 12px; height: 12px; }
.u-ic-13 { width: 12px; height: 12px; }
.u-ic-14 { width: 14px; height: 14px; }
.u-ic-16 { width: 16px; height: 16px; }
.u-ic-18 { width: 18px; height: 18px; }
.u-ic-20 { width: 20px; height: 20px; }