* { box-sizing: border-box; }

html {
    font-size: calc(16px * var(--scale, 1));
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f3f3f3;
    color: #222;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- верхняя панель ---------- */
.topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px;
    background: #6200ee; color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.topbar .title {
    flex: 1 1 auto;
    font-size: 15px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .actions { display: flex; gap: 4px; align-items: center; }
.topbar button {
    background: transparent; border: none; color: white;
    font-size: 18px; padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.topbar button:active { background: rgba(255,255,255,0.2); }
.back-btn {
    font-size: 22px;
    padding: 2px 10px 2px 4px;
    color: white;
    text-decoration: none;
}
#btn-user {
    font-size: 13px;
    background: rgba(255,255,255,0.15);
    padding: 5px 10px;
    border-radius: 14px;
}
.topbar-link {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 6px 10px;
    font-size: 18px;
    border-radius: 6px;
}
.topbar-link:active { background: rgba(255,255,255,0.2); }

/* ---------- логин ---------- */
.login-body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 20px;
}
.login-box {
    width: 100%; max-width: 380px;
    background: white; padding: 28px 22px; border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    text-align: center;
}
.login-box h1 { margin: 0 0 20px; font-size: 22px; color: #6200ee; }
.login-box input {
    width: 100%; padding: 12px 14px; font-size: 16px;
    border: 2px solid #ddd; border-radius: 10px; outline: none;
    margin-bottom: 12px;
}
.login-box input:focus { border-color: #6200ee; }
.login-box button {
    width: 100%; padding: 12px;
    background: #6200ee; color: white; border: none;
    border-radius: 10px; font-size: 16px; font-weight: 600;
    cursor: pointer;
}
.login-box button:disabled { opacity: 0.5; }
.error { color: #d32f2f; font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ---------- блок создания задания ---------- */
.create-block { padding: 12px; }
.primary-btn {
    width: 100%; padding: 14px;
    background: #6200ee; color: white;
    border: none; border-radius: 12px;
    font-size: 15px; font-weight: 600; cursor: pointer;
}
.primary-btn:active { background: #4a00b8; }

/* ---------- вкладки ---------- */
.tabs {
    display: flex; background: white;
    border-bottom: 1px solid #e5e5e5;
    position: sticky; top: 46px; z-index: 9;
}
.tabs .tab {
    flex: 1; padding: 12px;
    background: transparent; border: none;
    font-size: 14px; font-weight: 600;
    color: #888; cursor: pointer;
    border-bottom: 3px solid transparent;
    text-align: center; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.tabs .tab.active { color: #6200ee; border-bottom-color: #6200ee; }
.chat-badge {
    background: #e53935; color: white;
    font-size: 11px; font-weight: 700;
    padding: 1px 6px; border-radius: 10px;
    min-width: 18px; text-align: center;
}

/* ---------- карточка задания ---------- */
.task-card {
    background: white; margin: 8px 12px;
    padding: 14px; border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.task-card h3 {
    margin: 0 0 6px; font-size: 16px;
    font-weight: 600; word-wrap: break-word;
}
.task-meta { font-size: 13px; color: #666; margin-bottom: 8px; }
.task-meta.small { font-size: 11px; color: #999; margin-bottom: 10px; }
.task-meta.busy { color: #d97706; }
.task-meta.free { color: #16a34a; }
.task-meta.mine { color: #6200ee; font-weight: 600; }

.task-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px; margin-bottom: 6px;
}
.task-head h3 { margin: 0; flex: 1 1 auto; min-width: 0; }
.task-head-meta {
    flex: 0 0 auto; text-align: right;
    font-size: 11px; color: #888; line-height: 1.3;
}
.task-head-author { font-weight: 600; color: #6200ee; }

.task-progress {
    height: 6px; background: #eee;
    border-radius: 3px; overflow: hidden;
    margin-bottom: 10px;
}
.task-progress-fill {
    height: 100%; background: #6200ee;
    transition: width 0.3s;
}

.task-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.task-buttons button {
    flex: 1; padding: 10px;
    border: none; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; min-width: 120px;
}
.btn-open { background: #6200ee; color: white; }
.btn-open:disabled { background: #ccc; cursor: not-allowed; }
.btn-delete {
    background: #fee; color: #c00;
    flex: 0 0 44px; min-width: 44px; font-size: 16px;
}
.btn-delete:disabled { opacity: 0.3; }

.task-card.completed {
    background: #f0fdf4; border: 1px solid #bbf7d0;
}
.task-card.completed h3 { color: #166534; }

/* ---------- экран сборки ---------- */
.status-bar {
    padding: 8px 14px; font-size: 13px;
    color: #555; background: #fff;
    border-bottom: 1px solid #eee;
    display: none;
}
.status-bar.show { display: block; }
.status-bar.locked { background: #fff7e6; color: #b45309; }

.progress-wrap {
    padding: 8px 14px 4px;
    background: white;
    border-bottom: 1px solid #eee;
}
.progress-bar {
    height: 6px; background: #eee;
    border-radius: 3px; overflow: hidden;
}
.progress-fill {
    height: 100%; background: #6200ee;
    width: 0; transition: width 0.3s;
}
.progress-text {
    font-size: 12px; color: #666;
    margin-top: 4px; text-align: right;
}
.progress-details {
    font-size: 11px; color: #999;
    text-align: right; margin-top: 2px;
}

/* ---------- список строк ---------- */
.list { list-style: none; margin: 0; padding: 8px; }

.card {
    display: flex; align-items: center; gap: 10px;
    background: #ffffff; border-radius: 10px;
    padding: 10px 12px; margin-bottom: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: background 0.25s, opacity 0.25s;
    user-select: none;
}
.card.clickable-row { cursor: pointer; }
.card.clickable-checkbox { cursor: default; }
.card.checked { background: #e0e0e0; opacity: 0.45; }
.card.locked { cursor: not-allowed; }

.card .checkbox {
    flex: 0 0 26px; width: 26px; height: 26px;
    border: 2px solid #888; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: white; background: white;
    transition: background 0.15s, border-color 0.15s;
}
.card.clickable-checkbox .checkbox { cursor: pointer; }
.card.checked .checkbox { background: #6200ee; border-color: #6200ee; }
.card.checked .checkbox::after { content: "✓"; }

.card .info { flex: 1 1 auto; min-width: 0; }
.card .article {
    font-size: 12px; color: #888;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card .name {
    font-size: 17px; font-weight: 500; line-height: 1.25;
    word-wrap: break-word;
}
.card .signed {
    font-size: 11px; color: #16a34a;
    margin-top: 3px; line-height: 1.2;
}
.card.checked .signed { color: #666; }

.card .qty {
    flex: 0 0 auto; font-size: 22px; font-weight: 700;
    color: #6200ee; min-width: 40px; text-align: right;
    padding: 2px 6px; border-radius: 8px; line-height: 1.1;
}
.card.checked .qty { color: #888; }
.card .qty.qty-multi {
    background: #ff9800; color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.card.checked .qty.qty-multi {
    background: #bdbdbd; color: #555; box-shadow: none;
}

.rack-badge {
    flex: 0 0 46px; width: 46px; height: 46px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1px; padding: 2px 0;
    background: #ede7f6; color: #4a148c;
    font-size: 14px; font-weight: 700;
    border-radius: 8px; border: 2px solid #6200ee;
    text-align: center; line-height: 1;
    letter-spacing: 0.5px;
}
.rack-badge.rack-empty {
    background: #f3f3f3; color: #bbb;
    border-color: #ddd; font-weight: 400; font-size: 16px;
}
.card.checked .rack-badge {
    background: #d0d0d0; color: #666; border-color: #aaa;
}
.rack-badge .rack-floor {
    font-size: 9px; font-weight: 500;
    color: inherit; opacity: 0.7;
    letter-spacing: 0; text-transform: none; line-height: 1;
}

.group-header {
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    margin: 16px 4px 8px; padding: 8px 12px;
    background: #ede7f6; color: #4a148c;
    font-size: 14px; font-weight: 700;
    border-radius: 10px; border-left: 4px solid #6200ee;
}
.group-header .group-count {
    background: #6200ee; color: white;
    font-size: 12px; padding: 2px 10px; border-radius: 10px;
}

.preset-badge {
    display: inline-block; margin-top: 4px;
    padding: 2px 8px; background: #16a34a; color: white;
    font-size: 10px; font-weight: 700;
    border-radius: 4px; letter-spacing: 0.5px;
}
.card.preset-done { background: #f0fdf4; }
.card.preset-done .checkbox { border-color: #16a34a; }
.card.preset-done.checked .checkbox {
    background: #16a34a; border-color: #16a34a;
}
.card.preset-done.checked .checkbox::after { content: "✓"; }

.barcode-line {
    font-size: 11px;
    color: #666;
    font-family: ui-monospace, Consolas, monospace;
    margin-top: 2px;
    letter-spacing: 0.2px;
}
.barcode-line.barcode-warn {
    color: #d97706;
    font-family: inherit;
    font-weight: 600;
}

.empty {
    padding: 40px 20px; text-align: center;
    color: #888; font-size: 15px;
}

/* ---------- toast ---------- */
.toast {
    position: fixed; left: 50%; bottom: 30px;
    transform: translateX(-50%) translateY(20px);
    background: #333; color: white;
    padding: 10px 18px; border-radius: 20px; font-size: 14px;
    opacity: 0; transition: opacity 0.25s, transform 0.25s;
    pointer-events: none; z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- индикатор офлайн ---------- */
.offline-banner {
    position: fixed; top: 0; left: 0; right: 0;
    background: #b91c1c; color: white;
    padding: 10px 14px; z-index: 9999;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    font-size: 14px; line-height: 1.3;
}
.offline-banner .offline-text { flex: 1; }
.offline-banner small { opacity: 0.85; font-size: 12px; }
.offline-banner button {
    background: white; color: #b91c1c;
    border: none; border-radius: 8px;
    padding: 8px 14px; font-size: 14px;
    font-weight: 700; cursor: pointer;
}

/* ============================================================
   ЧАТ (Telegram-style)
   ============================================================ */
.chat-body { padding-bottom: 80px; }

.chat-messages { padding: 10px 10px 20px; }

.chat-msg {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: flex-end;
    max-width: 100%;
    transition: transform 0.15s;
}
.chat-msg.mine { flex-direction: row-reverse; }

.chat-avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 15px;
    user-select: none;
}
.chat-avatar-spacer { flex: 0 0 36px; width: 36px; }

.chat-bubble-wrap {
    max-width: 78%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.chat-msg.mine .chat-bubble-wrap { align-items: flex-end; }

.chat-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
    color: #888;
    margin-bottom: 2px;
    padding: 0 4px;
}
.chat-msg.mine .chat-meta { justify-content: flex-end; }
.chat-msg.grouped .chat-meta { display: none; }
.chat-author { font-weight: 600; }
.chat-time { opacity: 0.8; }

.chat-bubble {
    background: white;
    padding: 8px 12px;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    position: relative;
    word-wrap: break-word;
    min-width: 60px;
}
.chat-msg.mine .chat-bubble { background: #d1c4e9; }

.chat-text {
    font-size: 15px;
    line-height: 1.35;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chat-reply {
    background: rgba(0,0,0,0.06);
    border-left: 3px solid #6200ee;
    border-radius: 6px;
    padding: 4px 8px;
    margin-bottom: 4px;
    cursor: pointer;
}
.chat-msg.mine .chat-reply {
    border-left-color: #4a00b8;
    background: rgba(255,255,255,0.4);
}
.chat-reply-author {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 1px;
}
.chat-reply-text {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.chat-image { margin-top: 4px; }
.chat-image img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 10px;
    display: block;
    object-fit: cover;
}
.chat-file {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.06);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    font-size: 13px;
}

.chat-reactions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.chat-reaction {
    background: #f0f0f0;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    color: #333;
    line-height: 1.4;
}
.chat-reaction.mine {
    background: #d1c4e9;
    border-color: #6200ee;
}
.chat-reaction:active { transform: scale(0.96); }

.chat-date-sep {
    display: flex;
    justify-content: center;
    margin: 14px 0 10px;
}
.chat-date-sep span {
    background: rgba(0,0,0,0.08);
    color: #555;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 12px;
}

.chat-msg.highlight .chat-bubble {
    animation: highlightPulse 1.5s;
}
@keyframes highlightPulse {
    0% { background: #fff59d; }
    100% { background: inherit; }
}

.reply-bar {
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    background: #ede7f6;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #d1c4e9;
    z-index: 19;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.05);
}
.reply-bar-content {
    flex: 1 1 auto;
    min-width: 0;
    border-left: 3px solid #6200ee;
    padding-left: 8px;
}
.reply-bar-author {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 1px;
}
.reply-bar-text {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reply-bar-close {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.06);
    color: #333;
    font-size: 14px;
    cursor: pointer;
}

.scroll-bottom-btn {
    position: fixed;
    right: 14px;
    bottom: 78px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: #6200ee;
    color: white;
    font-size: 20px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    z-index: 20;
    cursor: pointer;
}

.react-sheet {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
.react-sheet-inner {
    background: white;
    width: 100%;
    max-width: 560px;
    padding: 16px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
    animation: sheetUp 0.2s ease-out;
}
@keyframes sheetUp {
    from { transform: translateY(40px); opacity: 0.5; }
    to   { transform: translateY(0); opacity: 1; }
}
.react-sheet-title {
    font-size: 13px;
    color: #666;
    text-align: center;
    margin-bottom: 10px;
}
.react-sheet-emojis {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 12px;
}
.react-emoji {
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 24px;
    padding: 6px 10px;
    cursor: pointer;
    line-height: 1;
}
.react-emoji.active {
    border-color: #6200ee;
    background: #ede7f6;
}
.react-sheet-actions {
    display: flex;
    gap: 8px;
    flex-direction: column;
}
.react-action {
    background: #f5f5f5;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.react-action.danger { background: #fee; color: #c00; }

.react-info {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 310;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.react-info-inner {
    background: white;
    border-radius: 14px;
    padding: 18px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.react-info-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}
.react-info-list { max-height: 50vh; overflow-y: auto; }
.react-info-group {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}
.react-info-emoji { font-size: 20px; flex: 0 0 auto; }
.react-info-users { font-size: 14px; color: #333; word-break: break-word; }
.react-info-empty { color: #999; font-size: 14px; text-align: center; padding: 20px 0; }
.react-info-close {
    margin-top: 14px;
    width: 100%;
    padding: 10px;
    background: #6200ee;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.composer {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; background: white;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05); z-index: 20;
}
.composer input[type="text"] {
    flex: 1; padding: 10px 14px;
    border: 2px solid #e0e0e0; border-radius: 22px;
    font-size: 15px; outline: none;
}
.composer input[type="text"]:focus { border-color: #6200ee; }
.composer button {
    flex: 0 0 42px; width: 42px; height: 42px;
    border-radius: 50%; border: none; background: #6200ee;
    color: white; font-size: 18px; cursor: pointer;
}
.composer .attach-btn { background: #eee; color: #333; }

.file-badge {
    position: fixed; bottom: 66px; left: 10px; right: 10px;
    background: #f0fdf4; border: 1px solid #bbf7d0;
    border-radius: 10px; padding: 8px 12px; font-size: 13px;
    color: #166534; display: flex; align-items: center;
    gap: 8px; z-index: 19;
}
.file-badge button {
    margin-left: auto; background: transparent; border: none;
    color: #166534; font-size: 16px; cursor: pointer;
}
.file-badge-size { color: #666; font-size: 12px; }

.image-preview {
    position: fixed; inset: 0; background: rgba(0,0,0,0.9);
    z-index: 200; display: flex; align-items: center;
    justify-content: center; padding: 20px;
}
.image-preview img {
    max-width: 100%; max-height: 100%; object-fit: contain;
}

/* ---------- модальные окна ---------- */
.modal-bg {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 300; display: flex; align-items: center;
    justify-content: center; padding: 20px;
}
.modal {
    background: white; border-radius: 14px; padding: 20px;
    width: 100%; max-width: 360px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.modal h3 { margin: 0 0 14px; font-size: 17px; font-weight: 600; }
.modal input {
    width: 100%; padding: 10px 12px; font-size: 15px;
    border: 2px solid #e0e0e0; border-radius: 8px;
    outline: none; margin-bottom: 10px;
}
.modal input:focus { border-color: #6200ee; }
.modal .error { margin-bottom: 8px; }
.modal-buttons { display: flex; gap: 8px; margin-top: 6px; }
.modal-buttons button {
    flex: 1; padding: 10px; border: none; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    background: #eee; color: #333;
}
.modal-buttons .primary-btn {
    background: #6200ee; color: white;
    border-radius: 8px; font-size: 14px; padding: 10px; width: auto;
}
.modal-label {
    display: block; font-size: 13px; color: #666;
    margin-bottom: 8px; font-weight: 600;
}
.radio-group {
    display: flex; flex-direction: column;
    gap: 6px; margin-bottom: 12px;
}
.radio-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: #f5f5f5;
    border-radius: 8px; cursor: pointer; font-size: 14px;
}
.radio-item input { margin: 0; width: auto; }
.modal-hr { border: none; border-top: 1px solid #eee; margin: 12px 0; }

.modal-tall {
    max-width: 520px; max-height: 85vh;
    display: flex; flex-direction: column;
}
.modal-hint {
    font-size: 13px; color: #666; margin: 0 0 12px; line-height: 1.35;
}
.sets-controls {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; gap: 8px; flex-wrap: wrap;
}
.sets-counter { font-size: 13px; color: #666; font-weight: 600; }
.sets-controls-right {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sets-toggle {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: #666; cursor: pointer;
    user-select: none; background: #f5f5f5;
    padding: 6px 10px; border-radius: 8px;
}
.sets-toggle input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.sets-sort-btn {
    background: #ede7f6; color: #4a148c;
    border: none; padding: 6px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.sets-list { overflow-y: auto; flex: 1; margin: 0 -6px 10px; padding: 0 6px; }
.set-row {
    background: #f9f9f9; border: 2px solid #e5e5e5;
    border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.set-row.done { background: #f0fdf4; border-color: #16a34a; }
.set-row.todo { background: #fef3c7; border-color: #d97706; }
.set-row-info { margin-bottom: 8px; }

.set-row-head {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.set-row-article {
    font-size: 12px;
    color: #666;
    font-family: ui-monospace, Consolas, monospace;
    word-break: break-all;
    flex: 0 1 auto;
    min-width: 0;
}
.set-row-qty {
    background: #6200ee;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    flex: 0 0 auto;
    min-width: 32px;
    text-align: center;
}
.set-row-qty.qty-multi {
    background: #ff9800;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.set-row-bc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 3px 8px;
    background: #f0ebfa;
    color: #4a148c;
    font-size: 12px;
    font-family: ui-monospace, Consolas, monospace;
    border-radius: 6px;
    border: 1px solid #d1c4e9;
    cursor: pointer;
    user-select: none;
}
.set-row-bc.empty {
    background: #f5f5f5;
    color: #aaa;
    border-color: #eee;
    cursor: default;
}
.set-row-bc-copy {
    background: transparent;
    border: none;
    color: #7c4dff;
    font-size: 14px;
    padding: 0;
    margin-left: 2px;
    cursor: pointer;
    line-height: 1;
}
.set-row-bc-copy:active { opacity: 0.6; }

.set-row-name {
    font-size: 14px; font-weight: 500; line-height: 1.3;
    word-wrap: break-word;
}
.set-row-buttons { display: flex; gap: 8px; }
.set-btn {
    flex: 1; padding: 8px 6px;
    border: 2px solid transparent; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    background: #fff; color: #444;
}
.set-btn.done { border-color: #bbf7d0; color: #166534; }
.set-btn.done.active { background: #16a34a; border-color: #16a34a; color: white; }
.set-btn.todo { border-color: #fde68a; color: #92400e; }
.set-btn.todo.active { background: #d97706; border-color: #d97706; color: white; }

/* ---------- склад ---------- */
.storage-search { padding: 10px 12px 0; }
.storage-search input {
    width: 100%; padding: 12px 14px;
    border: 2px solid #e0e0e0; border-radius: 10px;
    font-size: 15px; outline: none;
}
.storage-search input:focus { border-color: #6200ee; }

.storage-filters {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.storage-filters::-webkit-scrollbar { display: none; }

.filter-btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    background: white;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-btn:active { background: #f0f0f0; }
.filter-btn.active {
    background: #6200ee;
    color: white;
    border-color: #6200ee;
}

.storage-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 12px 6px;
    padding: 8px 12px;
    background: #ede7f6;
    color: #4a148c;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    border-left: 4px solid #6200ee;
    list-style: none;
}
.storage-group-header .group-count {
    background: #6200ee;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
}

.storage-stats { padding: 10px 14px; font-size: 12px; color: #666; }
.storage-row {
    display: flex; align-items: center; gap: 8px;
    background: white; margin: 0 12px 6px;
    padding: 10px 12px; border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.storage-main { flex: 1 1 auto; min-width: 0; }
.storage-article {
    font-size: 12px; color: #888;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.storage-name {
    font-size: 15px; font-weight: 500; line-height: 1.25;
    word-wrap: break-word;
}
.storage-rack {
    flex: 0 0 52px; width: 52px; height: 40px;
    text-align: center; font-size: 15px; font-weight: 700;
    color: #4a148c; background: #f3f3f3;
    border: 2px solid #ddd; border-radius: 8px;
    outline: none; text-transform: uppercase;
}
.storage-rack.has-rack {
    background: #ede7f6; border-color: #6200ee; color: #4a148c;
}
.storage-rack:focus { border-color: #6200ee; }
.storage-rack[readonly] { cursor: default; opacity: 0.7; }
.storage-rack.modified { background: #fff7e6; border-color: #d97706; color: #92400e; }
.storage-save {
    flex: 0 0 40px; width: 40px; height: 40px;
    border: none; border-radius: 8px;
    background: #6200ee; color: white;
    font-size: 18px; font-weight: 700; cursor: pointer;
}
.storage-save:active { background: #4a00b8; }
.storage-del {
    flex: 0 0 36px; width: 36px; height: 36px;
    border: none; border-radius: 8px;
    background: #fee; color: #c00;
    font-size: 16px; cursor: pointer;
}
.storage-rack-wrap {
    display: flex; flex-direction: column;
    align-items: center; gap: 2px; flex: 0 0 auto;
}
.rack-floor-hint {
    font-size: 10px; color: #6200ee;
    font-weight: 600; line-height: 1;
    min-height: 12px; text-align: center;
    white-space: nowrap;
}
.rack-floor-hint.rack-floor-error { color: #d32f2f; }
.rack-floor-hint.rack-floor-error::after { content: " ✕"; }
.storage-rack-display {
    flex: 0 0 52px; width: 52px; height: 40px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border-radius: 8px; border: 2px solid #ddd;
    background: #f3f3f3; color: #4a148c;
    font-size: 15px; font-weight: 700;
    line-height: 1; text-transform: uppercase;
}
.storage-rack-display.has-rack {
    background: #ede7f6; border-color: #6200ee;
}
.storage-rack-display.no-rack {
    color: #bbb; border-color: #ddd; font-weight: 400; font-size: 16px;
}
.storage-rack-display .rack-floor {
    font-size: 9px; font-weight: 500;
    color: inherit; opacity: 0.7;
    letter-spacing: 0; text-transform: none; line-height: 1;
}

.storage-barcodes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.bc-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f0ebfa;
    color: #4a148c;
    font-size: 11px;
    font-family: ui-monospace, Consolas, monospace;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid #d1c4e9;
    line-height: 1.4;
}
.bc-chip .bc-del {
    background: transparent;
    border: none;
    color: #7c4dff;
    font-size: 13px;
    line-height: 1;
    padding: 0 0 0 2px;
    cursor: pointer;
}
.bc-chip .bc-del:active { color: #c00; }

.bc-add {
    flex: 0 0 auto;
    margin-left: 4px;
    background: #ede7f6;
    color: #4a148c;
    border: 1px solid #d1c4e9;
    border-radius: 6px;
    font-size: 11px;
    padding: 3px 6px;
    cursor: pointer;
    white-space: nowrap;
}
.bc-add:active { background: #d1c4e9; }

.bulk-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: #ede7f6;
    border-bottom: 1px solid #d1c4e9;
    position: sticky; top: 46px; z-index: 9;
    flex-wrap: wrap;
}
.bulk-select-all {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: #4a148c;
    cursor: pointer; user-select: none;
}
.bulk-select-all input {
    width: 18px; height: 18px; margin: 0; cursor: pointer;
}
.bulk-counter {
    font-size: 13px; color: #666;
    flex: 1; text-align: right; min-width: 100px;
}
.bulk-btn-secondary {
    background: #fff; color: #4a148c;
    border: 1px solid #d1c4e9;
    padding: 8px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.bulk-btn-danger {
    background: #d32f2f; color: white;
    border: none; padding: 8px 14px;
    border-radius: 8px; font-size: 13px;
    font-weight: 700; cursor: pointer;
}
.bulk-btn-danger:disabled { background: #ccc; cursor: not-allowed; }
.storage-row-selected {
    background: #fff3e0 !important;
    box-shadow: inset 0 0 0 2px #ff9800;
}
.storage-select {
    width: 20px; height: 20px; margin: 0;
    flex: 0 0 auto; cursor: pointer;
    accent-color: #6200ee;
}

.perm-toggle {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin: 6px 0;
    background: #f5f5f5; border-radius: 8px;
    font-size: 14px; cursor: pointer; user-select: none;
}
.perm-toggle input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.perm-note {
    margin: 10px 0; padding: 10px 12px;
    background: #ede7f6; color: #4a148c;
    border-radius: 8px; font-size: 13px; font-weight: 600;
}

.monitor-periods {
    display: flex; gap: 4px; padding: 10px 12px 0;
    background: white; border-bottom: 1px solid #eee;
}
.period-btn {
    flex: 1; padding: 8px 10px;
    background: transparent; border: none;
    font-size: 13px; font-weight: 600;
    color: #888; cursor: pointer;
    border-radius: 8px;
    border-bottom: 3px solid transparent;
}
.period-btn.active { color: #6200ee; border-bottom-color: #6200ee; }
.monitor-card {
    background: white; margin: 10px 12px;
    padding: 14px; border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.monitor-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 10px;
}
.monitor-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.monitor-online {
    background: #ede7f6; color: #4a148c;
    font-size: 13px; font-weight: 700;
    padding: 4px 10px; border-radius: 10px;
}
.monitor-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.monitor-cell {
    background: #f7f7f7; border-radius: 8px;
    padding: 8px 6px; text-align: center;
}
.monitor-val {
    font-size: 16px; font-weight: 700;
    color: #6200ee; line-height: 1.2;
}
.monitor-lbl { font-size: 10px; color: #888; margin-top: 2px; line-height: 1.2; }

.errors-block {
    margin: 20px 12px 40px;
    background: white; border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    overflow: hidden;
}
.errors-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; background: #fafafa;
    border-bottom: 1px solid #eee;
    font-weight: 600; font-size: 14px;
    gap: 8px; flex-wrap: wrap;
}
.errors-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.errors-head button {
    background: #6200ee; color: white;
    border: none; border-radius: 8px;
    padding: 6px 12px; font-size: 13px;
    font-weight: 600; cursor: pointer;
}
.errors-head button.danger { background: #d32f2f; }
.errors-count { color: #d32f2f; font-weight: 700; }
.errors-list { max-height: 500px; overflow-y: auto; }
.error-item {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
}
.error-item:last-child { border-bottom: none; }
.error-item-head {
    display: flex; justify-content: space-between;
    color: #888; margin-bottom: 4px; gap: 8px;
}
.error-item-src {
    font-weight: 700; color: #d32f2f;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
}
.error-item-src.err-kind-client { color: #f57c00; }
.error-item-meta { font-size: 11px; color: #999; }
.error-item-msg {
    margin: 0; white-space: pre-wrap;
    word-wrap: break-word;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px; color: #444;
    max-height: 220px; overflow: auto;
    background: #fafafa; padding: 6px 8px; border-radius: 6px;
}

.row-menu-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 320;
    display: flex; align-items: flex-end; justify-content: center;
}
.row-menu {
    background: white; width: 100%; max-width: 520px;
    border-radius: 16px 16px 0 0; padding: 16px;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
    animation: sheetUp 0.2s ease-out;
}
.row-menu-title {
    font-size: 13px; color: #666;
    text-align: center; margin-bottom: 12px;
    word-break: break-word;
}
.row-menu-btn {
    display: block; width: 100%;
    text-align: left; background: #f5f5f5;
    border: none; border-radius: 10px;
    padding: 14px 16px; font-size: 15px;
    font-weight: 600; color: #333;
    cursor: pointer; margin-bottom: 8px;
}
.row-menu-btn:active { background: #e0e0e0; }
.row-menu-cancel {
    display: block; width: 100%; text-align: center;
    background: transparent; border: none;
    padding: 12px; font-size: 15px;
    font-weight: 600; color: #6200ee; cursor: pointer;
}

#row-input-text {
    width: 100%; padding: 10px 12px;
    border: 2px solid #e0e0e0; border-radius: 8px;
    font-size: 15px; font-family: inherit;
    outline: none; resize: vertical;
    min-height: 80px; margin-bottom: 10px;
}
#row-input-text:focus { border-color: #6200ee; }

.btn-rename {
    background: transparent; border: none;
    font-size: 14px; padding: 0 4px;
    cursor: pointer; color: #6200ee;
    vertical-align: middle;
}
.btn-rename:active { opacity: 0.6; }

/* ============================================================
   ТЁМНАЯ ТЕМА
   ============================================================ */
body.dark { background: #121212; color: #e0e0e0; }

body.dark .topbar {
    background: #1e1e2e; color: #e0e0e0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
body.dark .login-box,
body.dark .modal,
body.dark .task-card,
body.dark .card,
body.dark .storage-row,
body.dark .monitor-card,
body.dark .errors-block {
    background: #1e1e1e; color: #e0e0e0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
body.dark .errors-head {
    background: #1a1a1a; border-bottom-color: #333; color: #e0e0e0;
}
body.dark .error-item { border-bottom-color: #2a2a2a; }
body.dark .error-item-msg { color: #ccc; background: #262626; }
body.dark .error-item-src { color: #f87171; }
body.dark .error-item-src.err-kind-client { color: #fbbf24; }
body.dark .error-item-meta { color: #777; }

body.dark .monitor-cell { background: #2a2a2a; }
body.dark .monitor-online { background: #2a1e3a; color: #c4a3f7; }
body.dark .monitor-val { color: #b794f6; }
body.dark .monitor-lbl { color: #888; }
body.dark .monitor-periods { background: #1a1a1a; border-bottom-color: #333; }
body.dark .period-btn { color: #888; }
body.dark .period-btn.active { color: #c4a3f7; }

body.dark .card.checked { background: #2a2a2a; }
body.dark .card.preset-done { background: #1a2a1e; }
body.dark .card .name { color: #e0e0e0; }
body.dark .card .article { color: #888; }
body.dark .card .qty { color: #b794f6; }
body.dark .card.checked .qty { color: #777; }
body.dark .card .qty.qty-multi {
    background: #b45309; color: #fff8e1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
body.dark .card.checked .qty.qty-multi {
    background: #4a4a4a; color: #a0a0a0; box-shadow: none;
}
body.dark .rack-badge { background: #2a1e3a; color: #c4a3f7; border-color: #7c4dff; }
body.dark .rack-badge.rack-empty { background: #222; color: #555; border-color: #333; }
body.dark .card.checked .rack-badge {
    background: #2a2a2a; color: #777; border-color: #444;
}
body.dark .preset-badge { background: #22c55e; }
body.dark .status-bar { background: #1a1a1a; color: #aaa; border-bottom-color: #333; }
body.dark .status-bar.locked { background: #2a2010; color: #fbbf24; }
body.dark .progress-wrap { background: #1a1a1a; border-bottom-color: #333; }
body.dark .progress-bar { background: #333; }
body.dark .progress-text { color: #888; }
body.dark .progress-details { color: #666; }
body.dark .task-meta { color: #999; }
body.dark .task-meta.small { color: #666; }
body.dark .task-meta.free { color: #4ade80; }
body.dark .task-meta.busy { color: #fbbf24; }
body.dark .task-meta.mine { color: #c4a3f7; }
body.dark .task-head-meta { color: #777; }
body.dark .task-head-author { color: #c4a3f7; }
body.dark .tabs { background: #1a1a1a; border-bottom-color: #333; }
body.dark .tabs .tab { color: #888; }
body.dark .tabs .tab.active { color: #c4a3f7; }
body.dark .modal input,
body.dark .login-box input,
body.dark .composer input[type="text"],
body.dark .storage-search input,
body.dark .storage-rack {
    background: #2a2a2a; color: #e0e0e0; border-color: #444;
}
body.dark .modal input:focus,
body.dark .login-box input:focus,
body.dark .composer input[type="text"]:focus,
body.dark .storage-search input:focus { border-color: #7c4dff; }
body.dark .radio-item,
body.dark .perm-toggle { background: #2a2a2a; color: #e0e0e0; }
body.dark .modal-hr { border-top-color: #333; }
body.dark .modal-buttons button { background: #333; color: #e0e0e0; }
body.dark .modal-buttons .primary-btn { background: #6200ee; color: white; }
body.dark .error { color: #f87171; }
body.dark .empty { color: #666; }
body.dark .toast { background: #333; color: white; }
body.dark .chat-bubble { background: #2a2a2a; box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
body.dark .chat-msg.mine .chat-bubble { background: #3a2850; }
body.dark .chat-text { color: #e0e0e0; }
body.dark .chat-author { color: #c4a3f7; }
body.dark .chat-time { color: #888; }
body.dark .chat-reply { background: rgba(255,255,255,0.06); border-left-color: #7c4dff; }
body.dark .chat-reply-text { color: #aaa; }
body.dark .chat-reaction { background: #333; color: #ddd; }
body.dark .chat-reaction.mine { background: #3a2850; border-color: #7c4dff; }
body.dark .chat-file { background: rgba(255,255,255,0.06); color: #e0e0e0; }
body.dark .chat-date-sep span { background: rgba(255,255,255,0.08); color: #aaa; }
body.dark .reply-bar { background: #2a1e3a; border-top-color: #3a2850; }
body.dark .reply-bar-close { background: rgba(255,255,255,0.1); color: #ddd; }
body.dark .react-sheet-inner,
body.dark .react-info-inner { background: #1e1e1e; color: #e0e0e0; }
body.dark .react-sheet-title,
body.dark .react-info-title { color: #ccc; }
body.dark .react-emoji { background: #2a2a2a; }
body.dark .react-emoji.active { background: #2a1e3a; border-color: #7c4dff; }
body.dark .react-action { background: #2a2a2a; color: #e0e0e0; }
body.dark .react-action.danger { background: #3a1a1a; color: #f87171; }
body.dark .react-info-group { border-bottom-color: #333; }
body.dark .react-info-users { color: #ccc; }
body.dark .react-info-empty { color: #888; }
body.dark .react-info-close { background: #6200ee; color: white; }
body.dark .scroll-bottom-btn { background: #7c4dff; }
body.dark .storage-rack.has-rack { background: #2a1e3a; border-color: #7c4dff; color: #c4a3f7; }
body.dark .storage-rack.modified { background: #2a2010; border-color: #f59e0b; color: #fbbf24; }
body.dark .storage-stats { color: #888; }
body.dark .storage-del { background: #3a1a1a; color: #f87171; }
body.dark .storage-save { background: #6200ee; color: white; }
body.dark .rack-floor-hint { color: #c4a3f7; }
body.dark .rack-floor-hint.rack-floor-error { color: #f87171; }
body.dark .storage-rack-display { background: #2a2a2a; border-color: #444; color: #c4a3f7; }
body.dark .storage-rack-display.has-rack { background: #2a1e3a; border-color: #7c4dff; }
body.dark .storage-rack-display.no-rack { background: #222; color: #555; border-color: #333; }
body.dark .bulk-bar { background: #2a1e3a; border-bottom-color: #3a2850; }
body.dark .bulk-select-all { color: #c4a3f7; }
body.dark .bulk-counter { color: #aaa; }
body.dark .bulk-btn-secondary { background: #2a2a2a; color: #c4a3f7; border-color: #3a2850; }
body.dark .bulk-btn-danger { background: #b71c1c; }
body.dark .bulk-btn-danger:disabled { background: #444; color: #777; }
body.dark .storage-row-selected { background: #2a2010 !important; box-shadow: inset 0 0 0 2px #f59e0b; }

body.dark .storage-filters {
    background: #1a1a1a;
    border-bottom-color: #333;
}
body.dark .filter-btn {
    background: #2a2a2a;
    color: #aaa;
    border-color: #444;
}
body.dark .filter-btn.active {
    background: #6200ee;
    color: white;
    border-color: #6200ee;
}
body.dark .storage-group-header {
    background: #2a1e3a;
    color: #c4a3f7;
    border-left-color: #7c4dff;
}
body.dark .storage-group-header .group-count {
    background: #7c4dff;
}

body.dark .set-row { background: #1e1e1e; border-color: #333; }
body.dark .set-row.done { background: #1a2a1e; border-color: #22c55e; }
body.dark .set-row.todo { background: #2a2010; border-color: #f59e0b; }
body.dark .set-row-name { color: #e0e0e0; }
body.dark .set-btn { background: #2a2a2a; color: #ccc; border-color: transparent; }
body.dark .set-btn.done { border-color: #22c55e; color: #4ade80; background: #1e1e1e; }
body.dark .set-btn.done.active { background: #22c55e; color: #000; }
body.dark .set-btn.todo { border-color: #f59e0b; color: #fbbf24; background: #1e1e1e; }
body.dark .set-btn.todo.active { background: #f59e0b; color: #000; }
body.dark .sets-sort-btn { background: #2a1e3a; color: #c4a3f7; }
body.dark .sets-counter { color: #aaa; }
body.dark .set-row-article { color: #888; }
body.dark .set-row-qty { background: #7c4dff; }
body.dark .set-row-qty.qty-multi { background: #b45309; color: #fff8e1; }
body.dark .set-row-bc {
    background: #2a1e3a;
    color: #c4a3f7;
    border-color: #3a2850;
}
body.dark .set-row-bc.empty {
    background: #262626;
    color: #666;
    border-color: #333;
}
body.dark .set-row-bc-copy { color: #b794f6; }

body.dark .sets-toggle { background: #2a2a2a; color: #aaa; }
body.dark .offline-banner { background: #7f1d1d; }
body.dark .row-menu { background: #1e1e1e; }
body.dark .row-menu-title { color: #aaa; }
body.dark .row-menu-btn { background: #2a2a2a; color: #e0e0e0; }
body.dark .row-menu-btn:active { background: #333; }
body.dark .row-menu-cancel { color: #c4a3f7; }
body.dark #row-input-text { background: #2a2a2a; color: #e0e0e0; border-color: #444; }
body.dark .btn-rename { color: #c4a3f7; }

body.dark .barcode-line { color: #888; }
body.dark .barcode-line.barcode-warn { color: #fbbf24; }

body.dark .storage-barcodes .bc-chip {
    background: #2a1e3a;
    color: #c4a3f7;
    border-color: #3a2850;
}
body.dark .storage-barcodes .bc-chip .bc-del { color: #b794f6; }
body.dark .bc-add {
    background: #2a1e3a;
    color: #c4a3f7;
    border-color: #3a2850;
}
body.dark .bc-add:active { background: #3a2850; }

/* ---------- модалка ручного определения колонок ---------- */
.modal-wide {
    max-width: 720px;
    width: 100%;
}

.col-preview-wrap {
    overflow: auto;
    max-height: 50vh;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
}

.col-preview {
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
}

.col-preview th,
.col-preview td {
    border: 1px solid #e5e5e5;
    padding: 4px 6px;
    vertical-align: top;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-preview thead th {
    position: sticky;
    top: 0;
    background: #fafafa;
    z-index: 1;
    padding: 6px;
}

.col-preview .col-num {
    width: 30px;
    text-align: center;
    color: #888;
    background: #fafafa;
    font-weight: 600;
}

.col-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.col-head-num {
    font-size: 11px;
    color: #888;
    text-align: center;
}

.col-select {
    font-size: 12px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: white;
    color: #333;
    outline: none;
    cursor: pointer;
    width: 100%;
}
.col-select:focus { border-color: #6200ee; }

/* тёмная тема */
body.dark .col-preview-wrap { border-color: #444; }
body.dark .col-preview th,
body.dark .col-preview td { border-color: #333; color: #ddd; }
body.dark .col-preview thead th { background: #1a1a1a; }
body.dark .col-preview .col-num { background: #1a1a1a; color: #888; }
body.dark .col-select {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #444;
}
body.dark .col-select:focus { border-color: #7c4dff; }

#btn-name-source {
    font-size: 18px;
}

/* ---------- баннер статуса связи (net.js) ---------- */
.net-banner {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 9999;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    font-size: 14px; line-height: 1.3;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    color: white;
}
.net-banner.warn { background: #d97706; }
.net-banner.error { background: #b91c1c; }
.net-banner.info { background: #6200ee; }
.net-banner .net-banner-text { flex: 1; }
.net-banner button {
    background: white; color: inherit;
    border: none; border-radius: 8px;
    padding: 6px 12px; font-size: 13px; font-weight: 700;
    cursor: pointer;
}
body.dark .net-banner.warn { background: #b45309; }
body.dark .net-banner.error { background: #7f1d1d; }

/* ---------- баннер присутствия ---------- */
.presence-bar {
    padding: 6px 14px;
    font-size: 12px;
    background: #ede7f6;
    color: #4a148c;
    border-bottom: 1px solid #d1c4e9;
    line-height: 1.35;
}
.presence-bar button {
    background: #6200ee;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
body.dark .presence-bar {
    background: #2a1e3a;
    color: #c4a3f7;
    border-bottom-color: #3a2850;
}
body.dark .presence-bar button { background: #7c4dff; }

.card.syncing {
    box-shadow: 0 0 0 2px #ffb74d inset;
    transition: box-shadow 0.15s;
}
body.dark .card.syncing {
    box-shadow: 0 0 0 2px #b45309 inset;
}
/* ---------- нацкаталог ---------- */

.nc-stats {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    background: white;
    border-bottom: 1px solid #eee;
}
.nc-stat-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.nc-stat-btn.active {
    background: #ede7f6;
    border-color: #6200ee;
}
.nc-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: #6200ee;
    line-height: 1.1;
}
.nc-stat-lbl {
    font-size: 11px;
    color: #666;
    line-height: 1.1;
}

.nc-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    background: white;
    margin: 6px 12px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    flex-wrap: wrap;
}

.nc-col-left {
    flex: 1 1 260px;
    min-width: 0;
}
.nc-gtin {
    font-size: 11px;
    color: #888;
    font-family: ui-monospace, Consolas, monospace;
    margin-bottom: 2px;
}
.nc-gtin code {
    background: #f0ebfa;
    color: #4a148c;
    padding: 1px 5px;
    border-radius: 4px;
}
.nc-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    word-wrap: break-word;
}
.nc-meta {
    font-size: 11px;
    color: #888;
    margin-top: 3px;
}

.nc-col-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nc-col-right.linked {
    flex: 1 1 260px;
    min-width: 0;
    background: #f0fdf4;
    border-radius: 8px;
    padding: 6px 10px;
}
.nc-col-right.unlinked {
    flex: 0 0 auto;
}
.nc-linked-arrow {
    color: #16a34a;
    font-size: 16px;
    font-weight: 700;
}
.nc-storage {
    flex: 1 1 auto;
    min-width: 0;
}
.nc-storage-article {
    font-size: 12px;
    color: #666;
    font-family: ui-monospace, Consolas, monospace;
}
.nc-storage-name {
    font-size: 13px;
    font-weight: 500;
    word-wrap: break-word;
}
.nc-storage-rack {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    color: #4a148c;
    background: #ede7f6;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.nc-btn-link {
    background: #6200ee;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.nc-btn-link:active { background: #4a00b8; }

.nc-btn-unlink {
    background: #fee;
    color: #c00;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}
.nc-btn-unlink:active { opacity: 0.7; }

.nc-actions {
    flex: 0 0 auto;
}

.nc-set-line {
    flex: 1 1 100%;
    padding-top: 6px;
    border-top: 1px dashed #e5e5e5;
    display: flex;
    justify-content: flex-end;
}
.nc-btn-set {
    background: #ede7f6;
    color: #4a148c;
    border: 1px solid #d1c4e9;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.nc-btn-set:active { background: #d1c4e9; }

.nc-set-hint {
    font-size: 12px;
    color: #999;
    font-style: italic;
}

/* ---------- модалка привязки ---------- */
.nc-link-results {
    max-height: 45vh;
    overflow-y: auto;
    margin-bottom: 8px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
}
.nc-link-item {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.1s;
}
.nc-link-item:last-child { border-bottom: none; }
.nc-link-item:hover { background: #ede7f6; }
.nc-link-article {
    font-size: 12px;
    color: #666;
    font-family: ui-monospace, Consolas, monospace;
}
.nc-link-name {
    font-size: 14px;
    font-weight: 500;
    margin-top: 1px;
    word-wrap: break-word;
}
.nc-link-rack {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    color: #4a148c;
    background: #ede7f6;
    padding: 1px 6px;
    border-radius: 4px;
}
/* Тёмная тема */
body.dark .nc-stats { background: #1a1a1a; border-bottom-color: #333; }
body.dark .nc-stat-btn { background: #2a2a2a; }
body.dark .nc-stat-btn.active { background: #2a1e3a; border-color: #7c4dff; }
body.dark .nc-stat-val { color: #c4a3f7; }
body.dark .nc-stat-lbl { color: #aaa; }
body.dark .nc-row { background: #1e1e1e; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
body.dark .nc-gtin code { background: #2a1e3a; color: #c4a3f7; }
body.dark .nc-col-right.linked { background: #1a2a1e; }
body.dark .nc-storage-rack { background: #2a1e3a; color: #c4a3f7; }
body.dark .nc-storage-article { color: #aaa; }
body.dark .nc-btn-link { background: #6200ee; }
body.dark .nc-btn-unlink { background: #3a1a1a; color: #f87171; }
body.dark .nc-btn-set { background: #2a2a2a; color: #888; border-color: #444; }
body.dark .nc-link-results { background: #1a1a1a; border-color: #333; }
body.dark .nc-link-item { border-bottom-color: #2a2a2a; }
body.dark .nc-link-item:hover { background: #2a1e3a; }
body.dark .nc-link-rack { background: #2a1e3a; color: #c4a3f7; }
body.dark .nc-link-article { color: #aaa; }

/* ---------- инфо нацкаталога в карточках склада ---------- */

.storage-nc-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
    color: #666;
    line-height: 1.3;
}
.storage-nc-label {
    flex: 0 0 auto;
    font-size: 12px;
}
.storage-nc-text {
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
}
.storage-nc-unlink {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: #999;
    font-size: 13px;
    padding: 0 4px;
    cursor: pointer;
    line-height: 1;
}
.storage-nc-unlink:active { color: #c00; }

.storage-nc-info.storage-nc-empty {
    margin-top: 4px;
}
.storage-nc-link {
    background: transparent;
    border: 1px dashed #ccc;
    color: #888;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
}
.storage-nc-link:active { background: #f0f0f0; }

/* Инфо нацкаталога в задании */
.nc-line {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
    font-family: ui-monospace, Consolas, monospace;
}

/* Плашка "Возможно" на странице /nc */
.nc-suggest {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #f5f5f5;
    padding: 6px 10px;
    border-radius: 8px;
    border-left: 3px solid #b0b0b0;
}
.nc-suggest-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nc-suggest-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    font-size: 12px;
}
.nc-suggest-article {
    font-family: ui-monospace, Consolas, monospace;
    color: #666;
}
.nc-suggest-name {
    color: #333;
}
.nc-suggest-rack {
    background: #ede7f6;
    color: #4a148c;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.nc-suggest-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.nc-btn-link-manual {
    background: transparent;
    color: #6200ee;
    border: 1px solid #d1c4e9;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}
.nc-btn-link-manual:active { background: #ede7f6; }

/* Тёмная тема */
body.dark .storage-nc-info { color: #aaa; }
body.dark .storage-nc-unlink { color: #777; }
body.dark .storage-nc-link {
    border-color: #444;
    color: #999;
}
body.dark .storage-nc-link:active { background: #2a2a2a; }
body.dark .nc-line { color: #aaa; }
body.dark .nc-suggest { background: #2a2a2a; border-left-color: #555; }
body.dark .nc-suggest-label { color: #888; }
body.dark .nc-suggest-article { color: #aaa; }
body.dark .nc-suggest-name { color: #e0e0e0; }
body.dark .nc-suggest-rack { background: #2a1e3a; color: #c4a3f7; }
body.dark .nc-btn-link-manual { color: #c4a3f7; border-color: #3a2850; }
body.dark .nc-btn-link-manual:active { background: #2a1e3a; }

/* ---------- состав набора (модалка) ---------- */
.set-modal-subhead {
    margin: 12px 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
}
.nc-set-items {
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
    padding: 8px;
    margin-bottom: 8px;
}
.set-items-total {
    font-size: 12px;
    color: #888;
    padding: 4px 8px;
    margin-bottom: 6px;
    border-bottom: 1px dashed #e0e0e0;
}
.set-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: white;
    border-radius: 6px;
    margin-bottom: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.set-item-info { flex: 1 1 auto; min-width: 0; }
.set-item-article {
    font-size: 11px;
    color: #888;
    font-family: ui-monospace, Consolas, monospace;
}
.set-item-name {
    font-size: 13px;
    font-weight: 500;
    word-wrap: break-word;
}
.set-item-rack {
    display: inline-block;
    margin-top: 2px;
    font-size: 10px;
    color: #4a148c;
    background: #ede7f6;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}
.set-item-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    align-items: center;
}
.set-item-qty {
    width: 56px;
    padding: 4px 6px;
    font-size: 14px;
    text-align: center;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    outline: none;
}
.set-item-qty:focus { border-color: #6200ee; }
.set-item-del {
    background: #fee;
    color: #c00;
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}
.set-item-del:active { opacity: 0.7; }

/* Тёмная тема */
body.dark .storage-nc-info { color: #aaa; }
body.dark .storage-nc-unlink { color: #777; }
body.dark .storage-nc-link { border-color: #444; color: #999; }
body.dark .storage-nc-link:active { background: #2a2a2a; }
body.dark .storage-set-btn {
    background: #2a1e3a;
    color: #c4a3f7;
    border-color: #3a2850;
}
body.dark .storage-set-btn:active { background: #3a2850; }
body.dark .nc-line { color: #aaa; }
body.dark .nc-suggest { background: #2a2a2a; border-left-color: #555; }
body.dark .nc-suggest-label { color: #888; }
body.dark .nc-suggest-article { color: #aaa; }
body.dark .nc-suggest-name { color: #e0e0e0; }
body.dark .nc-suggest-rack { background: #2a1e3a; color: #c4a3f7; }
body.dark .nc-btn-link-manual { color: #c4a3f7; border-color: #3a2850; }
body.dark .nc-btn-link-manual:active { background: #2a1e3a; }
body.dark .set-modal-subhead { color: #ccc; }
body.dark .nc-set-items { background: #1a1a1a; border-color: #333; }
body.dark .set-items-total { color: #888; border-bottom-color: #333; }
body.dark .set-item-row { background: #262626; box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
body.dark .set-item-article { color: #888; }
body.dark .set-item-rack { background: #2a1e3a; color: #c4a3f7; }
body.dark .set-item-qty {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #444;
}
body.dark .set-item-qty:focus { border-color: #7c4dff; }
body.dark .set-item-del { background: #3a1a1a; color: #f87171; }

.storage-edit {
    flex: 0 0 36px; width: 36px; height: 36px;
    border: none; border-radius: 8px;
    background: #ede7f6; color: #4a148c;
    font-size: 15px; cursor: pointer;
}
.storage-edit:active { background: #d1c4e9; }

body.dark .storage-edit {
    background: #2a1e3a; color: #c4a3f7;
}
body.dark .storage-edit:active { background: #3a2850; }

/* ---------- строка статистики задач ---------- */
.tasks-stats {
    padding: 10px 14px;
    font-size: 12px;
    color: #666;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

/* ---------- разделитель "Собранные" ---------- */
.tasks-sep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 12px 8px;
    padding: 8px 12px;
    background: #ede7f6;
    color: #4a148c;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    border-left: 4px solid #6200ee;
}
.tasks-sep .tasks-sep-count {
    background: #6200ee;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
}

/* Тёмная тема */
body.dark .tasks-stats {
    background: #1a1a1a;
    color: #888;
    border-bottom-color: #333;
}
body.dark .tasks-sep {
    background: #2a1e3a;
    color: #c4a3f7;
    border-left-color: #7c4dff;
}
body.dark .tasks-sep .tasks-sep-count {
    background: #7c4dff;
}
.card.unpacked {
    background: #fff3e0;
    opacity: 0.7;
}
.card.unpacked .checkbox {
    background: #ff9800;
    border-color: #ff9800;
}
.card.unpacked .checkbox::after {
    content: "✓";
}
.card.unpacked .signed {
    color: #b45309;
}
body.dark .card.unpacked {
    background: #2a2010;
}
body.dark .card.unpacked .checkbox {
    background: #f59e0b;
    border-color: #f59e0b;
}
body.dark .card.unpacked .signed {
    color: #fbbf24;
}
.card.unpacked {
    border-color: #ff9800;
    background: rgba(255, 152, 0, 0.06);
}
.card.unpacked.checked .article {
    text-decoration: line-through;
    text-decoration-color: #ff9800;
}
body.dark .card.unpacked {
    background: rgba(255, 152, 0, 0.12);
}

/* ===== v2: детализация прогресса ===== */
.progress-details {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    line-height: 1.35;
}
body.dark .progress-details { color: #aaa; }

/* ===== v2: кнопки экспорта КМ ===== */
#btn-export-units,
#btn-export-sets {
    font-size: 14px;
}
#btn-export-units:disabled,
#btn-export-sets:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
/* ===== v2: группа кнопок КМ/ШК в карточке задания ===== */
.task-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.task-export-group,
.task-collect-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Кнопки КМ — прямоугольные */
.btn-km {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #2e7d32;
    border-radius: 6px;
    background: #e8f5e9;
    color: #1b5e20;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn-km:hover:not(:disabled) {
    background: #c8e6c9;
}
.btn-km:active:not(:disabled) {
    background: #a5d6a7;
}

/* Неактивная (бледная) */
.btn-km.btn-km-disabled,
.btn-km:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: #bdbdbd;
    background: #f5f5f5;
    color: #9e9e9e;
}

/* Кнопка печати ШК — на будущее */
.btn-km.btn-km-print {
    border-color: #9e9e9e;
    background: #f5f5f5;
    color: #9e9e9e;
}
.btn-km.btn-km-print:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Тёмная тема */
body.dark .btn-km {
    border-color: #66bb6a;
    background: #1b3a1d;
    color: #c8e6c9;
}
body.dark .btn-km:hover:not(:disabled) {
    background: #2e5931;
}
body.dark .btn-km.btn-km-disabled,
body.dark .btn-km:disabled {
    border-color: #444;
    background: #2a2a2a;
    color: #777;
}

/* Мобильная раскладка: кнопки КМ в один ряд, блок «Собирать» — ниже */
@media (max-width: 520px) {
    .task-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .task-export-group,
    .task-collect-group {
        width: 100%;
    }
    .btn-km {
        flex: 1;
    }
}
/* ===== Карточка задания v3: меню «⋯», широкий прогресс, кнопки-заливки, аватары ===== */
.task-card {
    position: relative;
}

/* Меню «⋯» */
.task-menu-wrap {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
}
.task-menu-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(0,0,0,0.05);
    color: #555;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.task-menu-btn:active { background: rgba(0,0,0,0.12); }
.task-menu-popup {
    position: absolute;
    top: 36px;
    right: 0;
    min-width: 200px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
    padding: 6px;
    z-index: 10;
}
.task-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
}
.task-menu-item:hover { background: #f0f0f0; }
.task-menu-item.danger { color: #c00; }
.task-menu-item.danger:hover { background: #fee; }

/* Прогресс — шире, только одна строка счётчика */
.task-progress-wrap { margin-bottom: 10px; }
.task-progress-wrap .task-progress {
    height: 10px;
    background: #eee;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 6px;
}
.task-progress-wrap .task-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6200ee, #9c5bff);
    transition: width 0.3s;
}
.task-progress-label {
    font-size: 13px;
    color: #555;
    font-weight: 600;
}

/* Кнопки-заливки "Собирать …" */
.task-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}
.task-export-group,
.task-collect-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: stretch;
}
.task-collect-group {
    flex: 1 1 auto;
    min-width: 0;
}

.btn-collect {
    position: relative;
    flex: 1 1 160px;
    min-width: 150px;
    min-height: 46px;
    border: 2px solid #6200ee;
    background: #f5f0ff;
    color: #4a148c;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    text-align: left;
    transition: border-color 0.15s, color 0.15s;
}
.btn-collect:hover:not(:disabled) { border-color: #4a00b8; }
.btn-collect:disabled,
.btn-collect.btn-collect-empty {
    border-color: #ddd;
    background: #f5f5f5;
    color: #aaa;
    cursor: not-allowed;
}
.btn-collect.mine {
    border-color: #16a34a;
    color: #14532d;
}

.btn-collect-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #6200ee, #9c5bff);
    opacity: 0.28;
    transition: width 0.3s;
    z-index: 0;
    pointer-events: none;
}
.btn-collect.mine .btn-collect-fill {
    background: linear-gradient(90deg, #16a34a, #4ade80);
    opacity: 0.30;
}

.btn-collect-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    min-height: 42px;
}

.btn-collect-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-collect-pct {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 12px;
    opacity: 0.85;
}
.btn-collect-view {
    background: #ede7f6;
    border-color: #6200ee;
    color: #4a148c;
}

/* Аватары присутствующих */
.avatar-row {
    display: inline-flex;
    align-items: center;
    gap: -4px;
    margin-left: 4px;
}
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-weight: 700;
    width: 22px; height: 22px;
    border: 2px solid white;
    margin-left: -6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    line-height: 1;
    flex: 0 0 auto;
}
.avatar:first-child { margin-left: 0; }
.avatar-more {
    background: #888;
    font-size: 10px;
    width: 22px; height: 22px;
}

/* Тёмная тема */
body.dark .task-menu-btn { background: rgba(255,255,255,0.08); color: #ccc; }
body.dark .task-menu-btn:active { background: rgba(255,255,255,0.2); }
body.dark .task-menu-popup { background: #1e1e1e; box-shadow: 0 6px 24px rgba(0,0,0,0.6); }
body.dark .task-menu-item { color: #ddd; }
body.dark .task-menu-item:hover { background: #2a2a2a; }
body.dark .task-menu-item.danger { color: #f87171; }
body.dark .task-menu-item.danger:hover { background: #3a1a1a; }

body.dark .task-progress-wrap .task-progress { background: #333; }
body.dark .task-progress-wrap .task-progress-fill {
    background: linear-gradient(90deg, #7c4dff, #b794f6);
}
body.dark .task-progress-label { color: #aaa; }

body.dark .btn-collect {
    border-color: #7c4dff;
    background: #221a33;
    color: #c4a3f7;
}
body.dark .btn-collect:hover:not(:disabled) { border-color: #b794f6; }
body.dark .btn-collect:disabled,
body.dark .btn-collect.btn-collect-empty {
    border-color: #333;
    background: #1e1e1e;
    color: #666;
}
body.dark .btn-collect.mine {
    border-color: #22c55e;
    color: #86efac;
}
body.dark .btn-collect-fill { background: linear-gradient(90deg, #7c4dff, #b794f6); opacity: 0.35; }
body.dark .btn-collect.mine .btn-collect-fill { background: linear-gradient(90deg, #22c55e, #4ade80); opacity: 0.35; }
body.dark .btn-collect-view { background: #2a1e3a; border-color: #7c4dff; color: #c4a3f7; }

body.dark .avatar { border-color: #1e1e1e; }
body.dark .avatar-more { background: #555; }

/* ===== v4: правый отступ под меню «⋯», чтобы автор/дата не наезжали ===== */
.task-card .task-head {
    padding-right: 40px;
}
.task-card .task-head-meta {
    max-width: 55%;
}

/* ===== v4: ряд «КМ | Собирать» ===== */
.task-body-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== v4: вертикальная колонка квадратных КМ-кнопок ===== */
.task-export-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
}

.btn-km-square {
    width: 64px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid #2e7d32;
    border-radius: 10px;
    background: #e8f5e9;
    color: #1b5e20;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    user-select: none;
}
.btn-km-square:hover:not(:disabled) {
    background: #c8e6c9;
}
.btn-km-square:active:not(:disabled) {
    background: #a5d6a7;
}

.btn-km-icon {
    font-size: 22px;
    line-height: 1;
}
.btn-km-label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* неактивная / без права */
.btn-km-square.btn-km-disabled,
.btn-km-square:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: #bdbdbd;
    background: #f5f5f5;
    color: #9e9e9e;
}

/* «ШК» — на будущее, всегда бледная */
.btn-km-square.btn-km-print {
    border-color: #9e9e9e;
    background: #f5f5f5;
    color: #9e9e9e;
}
.btn-km-square.btn-km-print:disabled {
    opacity: 0.45;
}

/* ===== v4: «Собирать» — на всю оставшуюся ширину ===== */
.task-collect-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

/* ===== тёмная тема ===== */
body.dark .btn-km-square {
    border-color: #66bb6a;
    background: #1b3a1d;
    color: #c8e6c9;
}
body.dark .btn-km-square:hover:not(:disabled) {
    background: #2e5931;
}
body.dark .btn-km-square.btn-km-disabled,
body.dark .btn-km-square:disabled {
    border-color: #444;
    background: #2a2a2a;
    color: #777;
}
body.dark .btn-km-square.btn-km-print {
    border-color: #444;
    background: #2a2a2a;
    color: #777;
}

/* ===== мобильная раскладка: КМ-колонка остаётся слева, =====
   «Собирать» — под ней на всю ширину, если не помещается */
@media (max-width: 480px) {
    .task-body-row {
        gap: 8px;
    }
    .btn-km-square {
        width: 58px;
        height: 58px;
    }
    .btn-km-icon { font-size: 20px; }
    .btn-km-label { font-size: 9px; }
}

/* ===== v5: фикс мобильной верстки карточки задания ===== */

/* Карточка */
.task-card {
    padding: 14px;
    display: flex;
    flex-direction: column;
}

/* Шапка и меню (чтобы не наезжало) */
.task-card .task-head {
    padding-right: 36px; /* место под кнопку "..." */
    margin-bottom: 6px;
}

/* Основной контейнер: слева КМ, справа прогресс и кнопки */
.task-body-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Левая колонка с КМ/ШК */
.task-export-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 56px; /* жесткая ширина колонки */
}

/* Правая колонка с прогрессом и кнопками */
.task-main-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0; /* чтобы не растягивало родителя */
}

/* Прогресс-бар */
.task-progress-wrap {
    margin-bottom: 0;
    width: 100%;
}
.task-progress-wrap .task-progress {
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}
.task-progress-wrap .task-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6200ee, #9c5bff);
    transition: width 0.3s;
}
.task-progress-label {
    font-size: 12px;
    color: #666;
    font-weight: 600;
}

/* Кнопки "Собирать" в одну строку */
.task-collect-group {
    display: flex;
    flex-direction: row; /* в строку */
    gap: 8px;
    width: 100%;
}

.btn-collect {
    flex: 1 1 0; /* равномерно делят ширину */
    min-width: 0;
    min-height: 52px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid #6200ee;
    background: #f5f0ff;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn-collect-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.btn-collect-label {
    font-size: 12px;
    font-weight: 600;
    color: #4a148c;
    line-height: 1.2;
}
.btn-collect-pct {
    font-size: 12px;
    font-weight: 700;
    color: #6200ee;
}

/* Квадратные кнопки КМ/ШК */
.btn-km-square {
    width: 56px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 1px solid #2e7d32;
    border-radius: 8px;
    background: #e8f5e9;
    color: #1b5e20;
    cursor: pointer;
}
.btn-km-square:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: #bdbdbd;
    background: #f5f5f5;
    color: #9e9e9e;
}

.btn-km-icon-text {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 2px;
}
.btn-km-label {
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
}

/* Тёмная тема */
body.dark .task-progress-wrap .task-progress { background: #333; }
body.dark .task-progress-label { color: #aaa; }
body.dark .btn-collect { border-color: #7c4dff; background: #2a1e3a; }
body.dark .btn-collect-label { color: #c4a3f7; }
body.dark .btn-collect-pct { color: #b794f6; }
body.dark .btn-km-square {
    border-color: #66bb6a;
    background: #1b3a1d;
    color: #c8e6c9;
}
body.dark .btn-km-square:disabled {
    border-color: #444;
    background: #2a2a2a;
    color: #777;
}

/* Совсем узкие экраны (мобилки) */
@media (max-width: 400px) {
    .task-body-row { gap: 8px; }
    .task-export-group { flex: 0 0 48px; }
    .btn-km-square { width: 48px; height: 48px; }
    .btn-km-icon-text { font-size: 14px; }
    .btn-km-label { font-size: 8px; }
    .btn-collect-label { font-size: 11px; }
    .btn-collect-pct { font-size: 11px; }
}

/* ===== v6: Финальная верстка карточки (как в макете) ===== */

.task-card {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 10px;
}

.task-head {
    padding-right: 36px; /* место под ... */
    margin-bottom: 0;
}

/* Контейнер с кнопками КМ и контентом */
.task-body-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Левая колонка с КМ/ШК */
.task-export-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 54px; /* фиксированная ширина */
}

/* Правая колонка (прогресс + кнопки) */
.task-content-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0; /* важно, чтобы не растягивало */
}

/* Прогресс-бар */
.task-progress-wrap {
    width: 100%;
    margin-bottom: 0;
}
.task-progress-wrap .task-progress {
    height: 6px;
    background: #eee;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}
.task-progress-wrap .task-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6200ee, #9c5bff);
    transition: width 0.3s;
}
.task-progress-label {
    font-size: 12px;
    color: #666;
    font-weight: 600;
}

/* Группа кнопок "Собирать" (в одну строку) */
.task-collect-group {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
}

/* Кнопки "Собирать" */
.btn-collect {
    flex: 1;
    min-height: 44px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid #6200ee;
    background: #f5f0ff;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn-collect-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.btn-collect-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.btn-collect-label {
    font-size: 13px;
    font-weight: 600;
    color: #4a148c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-collect-pct {
    font-size: 13px;
    font-weight: 700;
    color: #6200ee;
    flex-shrink: 0;
}

/* Квадраты КМ/ШК */
.btn-km-square {
    width: 54px;
    height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 1px solid #2e7d32;
    border-radius: 8px;
    background: #e8f5e9;
    color: #1b5e20;
    cursor: pointer;
    flex-shrink: 0;
}
.btn-km-square:disabled,
.btn-km-square.btn-km-disabled {
    opacity: 0.4;
    border-color: #ccc;
    background: #f5f5f5;
    color: #999;
}

.btn-km-icon-text {
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 2px;
}
.btn-km-label {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}

/* Тёмная тема */
body.dark .task-progress-wrap .task-progress { background: #333; }
body.dark .task-progress-label { color: #aaa; }
body.dark .btn-collect { border-color: #7c4dff; background: #2a1e3a; }
body.dark .btn-collect-label { color: #c4a3f7; }
body.dark .btn-collect-pct { color: #b794f6; }
body.dark .btn-km-square { border-color: #66bb6a; background: #1b3a1d; color: #c8e6c9; }
body.dark .btn-km-square:disabled, body.dark .btn-km-square.btn-km-disabled { border-color: #444; background: #2a2a2a; color: #777; }

/* Мобильная адаптация (экран < 450px) */
@media (max-width: 450px) {
    .task-body-row { gap: 8px; }
    .task-export-group { flex: 0 0 48px; gap: 4px; }
    .btn-km-square { width: 48px; height: 48px; }
    .btn-km-icon-text { font-size: 13px; }
    .btn-km-label { font-size: 8px; }
    
    .task-collect-group { flex-direction: column; gap: 6px; }
    .btn-collect { padding: 6px 10px; min-height: 38px; }
    .btn-collect-label { font-size: 12px; }
    .btn-collect-pct { font-size: 12px; }
}

/* ===== Обертка для кнопок и меню ===== */
.btn-collect-wrap {
    position: relative;
    flex: 1;
    min-width: 140px;
    display: flex;
}

/* Сама кнопка "Собирать" */
.btn-collect {
    flex: 1;
    min-height: 52px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid #6200ee;
    background: #f5f0ff;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Если есть троеточие, оставляем место справа */
.btn-collect-wrap .btn-km-dots + .task-km-dropdown ~ .btn-collect,
.btn-collect-wrap:has(.btn-km-dots) .btn-collect {
    padding-right: 36px; 
}

/* Троеточие на кнопке */
.btn-km-dots {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.6);
    border: none;
    border-radius: 6px;
    color: #4a148c;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.15s;
}
.btn-km-dots:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* Выпадающее меню КМ */
.btn-collect-wrap .task-km-dropdown {
    position: absolute;
    top: 56px;
    right: 8px;
    width: 260px; /* Фиксированная ширина, чтобы текст переносился */
    z-index: 50;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.km-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    white-space: normal; /* Разрешаем перенос строк */
    line-height: 1.3;
    transition: background 0.15s;
}
.km-menu-item:hover:not(:disabled) {
    background: #f5f0ff;
    color: #4a148c;
}
.km-menu-item:disabled,
.km-menu-item.disabled {
    color: #aaa;
    cursor: not-allowed;
}

/* Статус выгрузки */
.task-export-status {
    font-size: 11px;
    color: #16a34a;
    background: #f0fdf4;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
    font-weight: 600;
    margin-bottom: 8px;
    border: 1px solid #bbf7d0;
}

/* Тёмная тема для меню и статуса */
body.dark .btn-collect-wrap .task-km-dropdown { background: #1e1e1e; border-color: #333; }
body.dark .km-menu-item { color: #ddd; }
body.dark .km-menu-item:hover:not(:disabled) { background: #2a1e3a; color: #c4a3f7; }
body.dark .km-menu-item:disabled { color: #666; }
body.dark .task-export-status { background: #1a2a1e; border-color: #22c55e; color: #86efac; }

/* Верстка текста и статуса внутри пункта меню */
.km-menu-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    /* остальные стили для .km-menu-item у тебя уже есть */
}

.km-menu-text {
    font-size: 13px;
    line-height: 1.3;
}

.km-status {
    font-size: 11px;
    color: #16a34a;
    background: #f0fdf4;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid #bbf7d0;
    margin-top: 2px;
    display: inline-block;
}

/* В disabled-кнопке статус тоже должен быть виден, но не ярко */
.km-menu-item:disabled .km-status {
    opacity: 0.7;
}

body.dark .km-status {
    background: #1a2a1e;
    border-color: #22c55e;
    color: #86efac;
}

/* Увеличенный чекбокс */
.card .checkbox {
    width: 100%;
    height: 100%;
    min-height: 60px; /* подгоняется под высоту карточки */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #888;
    border-radius: 8px;
    background: white;
    position: relative;
}

/* Если клик только по чекбоксу - сделать его кликабельным */
.card.clickable-checkbox .checkbox {
    cursor: pointer;
}

.card.checked .checkbox {
    background: #6200ee;
    border-color: #6200ee;
}
.card.checked .checkbox::after {
    content: "✓";
    color: white;
    font-size: 24px;
}

/* Размер количества (цифры) */
.card .qty {
    flex: 0 0 auto;
    font-size: 24px;
    font-weight: 700;
    color: #6200ee;
    min-width: 52px;
    text-align: center;
    padding: 8px 10px;
    border-radius: 8px;
    line-height: 1.1;
    border: 2px solid #6200ee; /* Добавили рамку */
    background: #f5f0ff;
}

.card.checked .qty {
    color: #888;
    border-color: #888;
    background: #f0f0f0;
}

.card .qty.qty-multi {
    background: #ff9800;
    color: #fff;
    border-color: #e65100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.card.checked .qty.qty-multi {
    background: #bdbdbd;
    color: #555;
    border-color: #999;
    box-shadow: none;
}

/* Тёмная тема */
body.dark .card .checkbox {
    background: #2a2a2a;
    border-color: #444;
}
body.dark .card.checked .checkbox {
    background: #6200ee;
    border-color: #6200ee;
}
body.dark .card .qty {
    background: #2a1e3a;
    border-color: #7c4dff;
    color: #c4a3f7;
}
body.dark .card.checked .qty {
    background: #2a2a2a;
    border-color: #555;
    color: #777;
}
body.dark .card .qty.qty-multi {
    background: #b45309;
    border-color: #7c2d12;
}
body.dark .card.checked .qty.qty-multi {
    background: #4a4a4a;
    border-color: #333;
}

/* Квадратный чекбокс */
.card .checkbox {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 2px solid #888;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    position: relative;
    margin-left: 8px;
}

.card.checked .checkbox {
    background: #6200ee;
    border-color: #6200ee;
}
.card.checked .checkbox::after {
    content: "✓";
    color: white;
    font-size: 26px;
    font-weight: bold;
}

/* Тёмная тема */
body.dark .card .checkbox {
    background: #2a2a2a;
    border-color: #444;
}
body.dark .card.checked .checkbox {
    background: #6200ee;
    border-color: #6200ee;
}

/* Меню ⋯ в топбаре */
.task-menu-popup {
    background: white;
    color: #333; /* Темный текст */
    /* остальные стили (тень, радиус и т.д.) */
}

.task-menu-popup .task-menu-item {
    color: #333; /* Темный текст для кнопок */
}
.task-menu-popup .task-menu-item.danger {
    color: #c00;
}

/* Темная тема */
body.dark .task-menu-popup {
    background: #1e1e1e;
    color: #e0e0e0;
}
body.dark .task-menu-popup .task-menu-item {
    color: #e0e0e0;
}
body.dark .task-menu-popup .task-menu-item.danger {
    color: #f87171;
}

/* Квадратный чекбокс */
.card .checkbox {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 2px solid #888;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    position: relative;
    margin-left: 8px;
}
.card.checked .checkbox {
    background: #6200ee;
    border-color: #6200ee;
}
.card.checked .checkbox::after {
    content: "✓";
    color: white;
    font-size: 24px;
    font-weight: bold;
}
body.dark .card .checkbox {
    background: #2a2a2a;
    border-color: #444;
}
body.dark .card.checked .checkbox {
    background: #6200ee;
    border-color: #6200ee;
}
.list {
    zoom: var(--scale, 1);
}

/* ===== ФИНАЛЬНЫЕ СТИЛИ ДЛЯ task.html ===== */

/* Квадратный чекбокс, который не растягивается */
.task-page .card .checkbox {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    border: 2px solid #888;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    position: relative;
    margin-left: 8px;
    padding: 0;
    box-sizing: border-box;
}

.task-page .card.checked .checkbox {
    background: #6200ee;
    border-color: #6200ee;
}

.task-page .card.checked .checkbox::after {
    content: "✓";
    color: white;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

body.dark .task-page .card .checkbox {
    background: #2a2a2a;
    border-color: #444;
}
body.dark .task-page .card.checked .checkbox {
    background: #6200ee;
    border-color: #6200ee;
}

.task-page .list {
    zoom: var(--scale, 1);
}

/* ===================== КОНСТРУКТОР ЭТИКЕТОК ===================== */
#label-modal {
    padding: 10px;
    align-items: flex-start;
}
.lbl-modal-inner {
    background: #f5f5f5;
    width: 100%;
    max-width: 1300px;
    height: 95vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
body.dark .lbl-modal-inner { background: #121212; color: #e0e0e0; }

.lbl-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
}
body.dark .lbl-modal-head { background: #1e1e1e; border-bottom-color: #333; }

.lbl-btn-primary {
    background: #6200ee; color: #fff;
    border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 14px; font-weight: 600;
    cursor: pointer;
}
.lbl-btn-ghost {
    background: transparent; color: #666;
    border: 1px solid #ccc; border-radius: 6px;
    padding: 8px 16px; font-size: 14px;
    cursor: pointer; margin-right: 8px;
}
body.dark .lbl-btn-ghost { color: #ccc; border-color: #444; }

.lbl-modal-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Левая панель */
.lbl-panel-left {
    width: 260px;
    background: #fff;
    border-right: 1px solid #eee;
    padding: 16px;
    overflow-y: auto;
}
body.dark .lbl-panel-left { background: #1e1e1e; border-right-color: #333; }
.lbl-panel-title {
    font-size: 13px; font-weight: 700;
    color: #6200ee; text-transform: uppercase;
    margin-bottom: 10px;
}
.lbl-panel-left .perm-toggle {
    display: flex; align-items: center; gap: 8px;
    padding: 8px; margin-bottom: 4px;
    background: #f9f9f9; border-radius: 6px;
    font-size: 13px; cursor: pointer; user-select: none;
}
.lbl-panel-left .perm-toggle input { margin: 0; }
body.dark .lbl-panel-left .perm-toggle { background: #2a2a2a; }

.lbl-search-item:hover { background: #f0e6ff !important; }
body.dark .lbl-search-item { background: #2a2a2a; border-bottom-color: #333; }
body.dark .lbl-search-item:hover { background: #3a2850 !important; }

/* Центр */
.lbl-panel-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #eaeaea;
    position: relative;
}
body.dark .lbl-panel-center { background: #111; }

.lbl-canvas-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.8);
    border-bottom: 1px solid #ddd;
    backdrop-filter: blur(4px);
}
body.dark .lbl-canvas-toolbar { background: rgba(30,30,30,0.8); border-bottom-color: #333; }

.lbl-zoom-btn {
    width: 28px; height: 28px;
    border: 1px solid #ccc; border-radius: 4px;
    background: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
body.dark .lbl-zoom-btn { background: #333; color: #fff; border-color: #555; }

.lbl-canvas-scroll {
    flex: 1;
    overflow: auto;
    padding: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.lbl-label-page {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    position: relative;
    /* border: 1px solid #ccc;  <-- УБРАНО */
    transform-origin: top center;
}

.lbl-block {
    cursor: move;
    box-sizing: border-box;
    user-select: none;
}
/* Блоки теперь всегда имеют видимую границу (dashed) */
.lbl-block:hover { 
    border-color: #6200ee !important; 
    border-style: solid !important;
}

.lbl-resize-handle {
    position: absolute;
    right: -5px; bottom: -5px;
    width: 10px; height: 10px;
    background: #6200ee;
    border: 1px solid #fff;
    border-radius: 2px;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 10;
}
.lbl-block:hover .lbl-resize-handle,
.lbl-block:focus .lbl-resize-handle { opacity: 1; }

/* Правая панель */
.lbl-panel-right {
    width: 280px;
    background: #fff;
    border-left: 1px solid #eee;
    padding: 16px;
    overflow-y: auto;
}
body.dark .lbl-panel-right { background: #1e1e1e; border-left-color: #333; }

.lbl-settings-group { margin-bottom: 12px; }
.lbl-settings-group label {
    display: block; font-size: 12px; color: #666;
    margin-bottom: 4px; font-weight: 600;
}
body.dark .lbl-settings-group label { color: #aaa; }

.lbl-align-btn.active { background: #ede7f6 !important; border-color: #6200ee !important; color: #6200ee; }
body.dark .lbl-align-btn { background: #333 !important; border-color: #555 !important; color: #fff; }
body.dark .lbl-align-btn.active { background: #3a2850 !important; border-color: #7c4dff !important; }

/* Адаптив */
@media (max-width: 900px) {
    .lbl-modal-body { flex-direction: column; }
    .lbl-panel-left { width: 100%; border-right: none; border-bottom: 1px solid #eee; max-height: 200px; }
    .lbl-panel-right { width: 100%; border-left: none; border-top: 1px solid #eee; max-height: 250px; }
}

/* ============ КОНСТРУКТОР ЭТИКЕТОК v3 ============ */
#label-modal { padding: 10px; align-items: flex-start; }
.lbl-modal-inner {
    background: #f5f5f5; width: 100%; max-width: 1300px; height: 95vh;
    border-radius: 12px; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
body.dark .lbl-modal-inner { background: #121212; color: #e0e0e0; }

.lbl-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; background: #fff; border-bottom: 1px solid #eee;
}
body.dark .lbl-modal-head { background: #1e1e1e; border-bottom-color: #333; }

.lbl-btn-primary {
    background: #6200ee; color: #fff; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}

.lbl-modal-body { display: flex; flex: 1; overflow: hidden; }

.lbl-panel-left { width: 240px; background: #fff; border-right: 1px solid #eee; padding: 14px; overflow-y: auto; }
body.dark .lbl-panel-left { background: #1e1e1e; border-right-color: #333; }
.lbl-panel-title { font-size: 12px; font-weight: 700; color: #6200ee; text-transform: uppercase; margin-bottom: 10px; }

.lbl-catalog-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 8px; background: #f9f9f9; border-radius: 6px; margin-bottom: 4px;
    font-size: 13px;
}
body.dark .lbl-catalog-item { background: #2a2a2a; }
.lbl-catalog-label { flex: 1; min-width: 0; }
.lbl-catalog-add {
    flex: 0 0 24px; width: 24px; height: 24px;
    border: none; border-radius: 50%;
    background: #6200ee; color: #fff;
    font-size: 16px; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.lbl-catalog-add:active { background: #4a00b8; }

.lbl-search-item { padding: 6px; border-bottom: 1px solid #eee; cursor: pointer; background: #fff; }
.lbl-search-item:hover { background: #f0e6ff; }
body.dark .lbl-search-item { background: #2a2a2a; border-bottom-color: #333; }
body.dark .lbl-search-item:hover { background: #3a2850; }

.lbl-panel-center { flex: 1; display: flex; flex-direction: column; background: #eaeaea; }
body.dark .lbl-panel-center { background: #111; }
.lbl-canvas-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; background: rgba(255,255,255,0.85);
    border-bottom: 1px solid #ddd;
}
body.dark .lbl-canvas-toolbar { background: rgba(30,30,30,0.85); border-bottom-color: #333; }
.lbl-zoom-btn {
    width: 28px; height: 28px; border: 1px solid #ccc; border-radius: 4px;
    background: #fff; cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
body.dark .lbl-zoom-btn { background: #333; color: #fff; border-color: #555; }
.lbl-canvas-scroll {
    flex: 1; overflow: auto; padding: 40px;
    display: flex; align-items: flex-start; justify-content: center;
}
.lbl-label-page {
    background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    position: relative;
}
.lbl-block { cursor: move; box-sizing: border-box; }
.lbl-block:hover { border-color: #6200ee !important; border-style: solid !important; }
.lbl-resize-handle {
    position: absolute; right: -5px; bottom: -5px;
    width: 10px; height: 10px; background: #6200ee;
    border: 1px solid #fff; border-radius: 2px;
    cursor: nwse-resize; opacity: 0; transition: opacity 0.1s;
}
.lbl-block:hover .lbl-resize-handle,
.lbl-block:focus .lbl-resize-handle { opacity: 1; }

.lbl-panel-right {
    width: 280px; background: #fff; border-left: 1px solid #eee;
    padding: 14px; overflow-y: auto;
}
body.dark .lbl-panel-right { background: #1e1e1e; border-left-color: #333; }
.lbl-settings-group { margin-bottom: 10px; }
.lbl-settings-group label {
    display: block; font-size: 12px; color: #666; margin-bottom: 4px; font-weight: 600;
}
body.dark .lbl-settings-group label { color: #aaa; }
.lbl-align-btn {
    flex: 1; padding: 6px; border: 1px solid #ccc; border-radius: 4px;
    background: #fff; cursor: pointer;
}
body.dark .lbl-align-btn { background: #333; color: #fff; border-color: #555; }

@media (max-width: 900px) {
    .lbl-modal-body { flex-direction: column; }
    .lbl-panel-left { width: 100%; max-height: 200px; border-right: none; border-bottom: 1px solid #eee; }
    .lbl-panel-right { width: 100%; max-height: 250px; border-left: none; border-top: 1px solid #eee; }
}

.kind-badge { font-size: 12px; margin-right: 4px; }
.kind-toggle {
    flex: 0 0 36px; width: 36px; height: 36px;
    border: 1px solid #ddd; border-radius: 8px;
    background: #f5f5f5; cursor: pointer; font-size: 13px;
    padding: 0;
}
.kind-toggle:active { background: #e0e0e0; }
body.dark .kind-toggle { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
body.dark .kind-toggle:active { background: #333; }

/* Read-only остатки в карточке склада */
.stock-readonly {
    user-select: none;
}
body.dark .stock-readonly {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0;
}

/* ===== Документы движений ===== */
.doc-row {
    display: flex; align-items: stretch; gap: 10px;
    padding: 12px 14px; margin: 8px 12px;
    background: #fff; border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    cursor: pointer;
}
.doc-row:hover { background: #fafafa; }
body.dark .doc-row { background: #1e1e1e; color: #e0e0e0; }
body.dark .doc-row:hover { background: #252525; }

.doc-row-left { flex: 1; min-width: 0; }
.doc-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-kind {
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
    background: #e3f2fd; color: #1565c0; text-transform: uppercase;
}
.doc-kind-receipt { background: #e8f5e9; color: #2e7d32; }
.doc-kind-writeoff { background: #ffebee; color: #c62828; }
.doc-kind-inventory { background: #fff3e0; color: #e65100; }
.doc-stock {
    font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
    background: #f5f5f5; color: #555;
}
.doc-number { font-size: 13px; font-weight: 600; }
.doc-comment { font-size: 12px; color: #666; margin-top: 4px; }
body.dark .doc-comment { color: #aaa; }
.doc-row-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: #888; }
.doc-status { padding: 1px 8px; border-radius: 4px; font-weight: 600; }
.doc-status-draft { background: #fff3e0; color: #e65100; }
.doc-status-posted { background: #e8f5e9; color: #2e7d32; }
.doc-status-cancelled { background: #eceff1; color: #546e7a; }
.doc-row-actions { display: flex; align-items: center; }
.doc-open {
    width: 36px; height: 36px; border: 1px solid #ddd; border-radius: 8px;
    background: #f5f5f5; cursor: pointer; font-size: 16px;
}
.doc-open:hover { background: #eee; }
body.dark .doc-open { background: #2a2a2a; border-color: #444; color: #e0e0e0; }

.doc-info { padding: 8px 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.doc-info-row b { color: #555; margin-right: 4px; }
body.dark .doc-info-row b { color: #bbb; }

.doc-lines-wrap { margin: 8px 0; max-height: 40vh; overflow-y: auto; }
.doc-line-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-bottom: 1px solid #eee;
}
body.dark .doc-line-row { border-color: #333; }
.doc-line-info { flex: 1; min-width: 0; }
.doc-line-article { font-weight: 600; font-size: 13px; }
.doc-line-name { font-size: 12px; color: #666; }
body.dark .doc-line-name { color: #aaa; }
.doc-line-rack { font-size: 11px; color: #888; }
.doc-line-qty { display: flex; align-items: center; gap: 6px; }
.doc-line-before { font-size: 11px; color: #888; }
.doc-line-input {
    width: 70px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px;
    text-align: center; font-size: 13px;
}
.doc-line-del {
    width: 28px; height: 28px; border: 1px solid #fcc; border-radius: 4px;
    background: #fff; color: #c00; cursor: pointer; font-size: 12px;
}

.moves-filter { display: flex; gap: 12px; padding: 8px 0; }
.moves-list { max-height: 60vh; overflow-y: auto; }
.move-row {
    padding: 8px 10px; border-bottom: 1px solid #eee;
}
body.dark .move-row { border-color: #333; }
.move-head { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.move-kind {
    font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
    background: #f5f5f5; color: #555;
}
.move-qty { font-weight: 700; }
.move-plus { color: #2e7d32; }
.move-minus { color: #c62828; }
.move-balance { color: #888; font-size: 12px; }
.move-date { margin-left: auto; color: #888; font-size: 12px; }
.move-meta { display: flex; gap: 10px; font-size: 11px; color: #888; margin-top: 4px; }

/* Строка остатков в карточке задания */
.stock-line {
    font-size: 11px; color: #666; margin-top: 2px;
}
body.dark .stock-line { color: #aaa; }

/* Дашборд умных остатков */
.dash-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin: 8px 12px;
    background: #fff; border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
body.dark .dash-row { background: #1e1e1e; color: #e0e0e0; }
.dash-info { flex: 1; min-width: 0; }
.dash-article { font-weight: 700; font-size: 14px; }
.dash-name { font-size: 12px; color: #666; margin-top: 2px; }
body.dark .dash-name { color: #aaa; }
.dash-rack { font-size: 11px; color: #888; margin-top: 2px; }
.dash-stocks { display: flex; gap: 8px; flex: 0 0 auto; }
.dash-stock {
    min-width: 70px; padding: 6px 8px; border-radius: 8px;
    border: 1px solid #e0e0e0; background: #fafafa; text-align: center;
}
body.dark .dash-stock { background: #252525; border-color: #333; }
.dash-stock.stock-low { background: #fff3e0; border-color: #ffcc80; }
body.dark .dash-stock.stock-low { background: #3a2a1a; border-color: #6a4a2a; }
.dash-stock-lbl { font-size: 10px; color: #888; }
.dash-stock-val { font-size: 18px; font-weight: 700; line-height: 1.2; }
.dash-stock-min { font-size: 10px; color: #888; }

/* min_stock инпуты в карточке склада */
.stock-min {
    width: 46px; padding: 2px 4px; border: 1px solid #ddd; border-radius: 4px;
    text-align: center; font-size: 11px; background: #fff;
}
body.dark .stock-min { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
.stock-min:focus { outline: 2px solid #6200ee; }

/* «Можно собрать: N» в карточке набора */
.set-build-line {
    font-size: 12px; margin-top: 4px; padding: 2px 6px; border-radius: 4px;
    display: inline-block;
}
.set-build-line.ok   { background: #e8f5e9; color: #2e7d32; }
.set-build-line.warn { background: #fff3e0; color: #e65100; }
body.dark .set-build-line.ok   { background: #1e3a1e; color: #a5d6a7; }
body.dark .set-build-line.warn { background: #3a2a1a; color: #ffcc80; }

/* Отрицательные остатки */
.stock-negative,
.dash-stock.stock-negative {
    background: #ffebee !important;
    border-color: #ef9a9a !important;
    color: #c62828 !important;
}
body.dark .stock-negative,
body.dark .dash-stock.stock-negative {
    background: #3a1a1a !important;
    border-color: #6a2a2a !important;
    color: #ef9a9a !important;
}

/* ===== Квадратные кнопки в шапке ===== */
.square-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    min-height: 34px;
}
.square-btn:hover { background: #f5f5f5; }
body.dark .square-btn { background: #2a2a2a; border-color: #444; color: #e0e0e0; }

.topbar-menu-wrap { position: relative; }
.topbar-menu-popup {
    position: absolute;
    right: 0; top: 100%;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 180px;
    z-index: 50;
}
body.dark .topbar-menu-popup { background: #1e1e1e; border-color: #333; }
.topbar-menu-item {
    display: block; width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: none; border: none;
    cursor: pointer; font-size: 13px;
    color: #333;
}
.topbar-menu-item:hover { background: #f5f5f5; }
body.dark .topbar-menu-item { color: #e0e0e0; }
body.dark .topbar-menu-item:hover { background: #2a2a2a; }

/* ===== Вкладки ===== */
.storage-tabs {
    display: flex; gap: 8px;
    padding: 12px 12px 0;
}
.storage-tab-btn {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.storage-tab-btn.active {
    background: #6200ee;
    color: #fff;
    border-color: #6200ee;
}
body.dark .storage-tab-btn { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
body.dark .storage-tab-btn.active { background: #7c43bd; border-color: #7c43bd; color: #fff; }

/* ===== Карточка товара ===== */
.storage-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    margin: 8px 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
body.dark .storage-card { background: #1e1e1e; color: #e0e0e0; }
.storage-card-selected { outline: 2px solid #6200ee; }

.storage-card > .storage-select {
    flex: 0 0 auto;
    margin-top: 6px;
    width: 18px; height: 18px;
    cursor: pointer;
}

.card-left { flex: 0 0 70px; }
.card-rack { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.card-rack .storage-rack { width: 60px; text-align: center; padding: 4px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; }
.card-rack .storage-rack.has-rack { border-color: #6200ee; font-weight: 700; }
.card-rack .rack-floor-hint { font-size: 10px; color: #888; }
.card-rack .rack-floor-error { color: #c00; }

.card-main { flex: 1; min-width: 0; }
.card-title { font-size: 14px; font-weight: 700; line-height: 1.3; }
.card-article { font-size: 12px; color: #888; margin-top: 1px; }
.card-nc { margin-top: 6px; font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-nc-text { color: #555; }
body.dark .card-nc-text { color: #aaa; }
.card-nc-unlink {
    width: 20px; height: 20px; padding: 0;
    border: 1px solid #fcc; border-radius: 4px;
    background: #fff; color: #c00; cursor: pointer; font-size: 11px;
}
.card-nc-link, .card-set-btn {
    padding: 3px 8px; border: 1px solid #ddd; border-radius: 6px;
    background: #fafafa; cursor: pointer; font-size: 12px;
}
body.dark .card-nc-link, body.dark .card-set-btn { background: #2a2a2a; border-color: #444; color: #e0e0e0; }

.card-barcodes { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.bc-chip {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px 6px; border-radius: 4px;
    background: #f0f0f0; font-size: 11px; font-family: monospace;
}
body.dark .bc-chip { background: #333; }
.bc-chip .bc-del { border: none; background: none; color: #c00; cursor: pointer; padding: 0 0 0 2px; font-size: 11px; }
.bc-add-inline {
    padding: 2px 8px; border: 1px dashed #ccc; border-radius: 4px;
    background: none; font-size: 11px; color: #6200ee; cursor: pointer;
}

.card-stock { flex: 0 0 auto; display: flex; gap: 8px; }
.stock-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stock-lbl { font-size: 10px; color: #888; }
.stock-val { font-size: 16px; font-weight: 700; min-width: 44px; padding: 4px 6px; border: 1px solid #ddd; border-radius: 6px; background: #fafafa; text-align: center; }
.stock-val.stock-negative { background: #ffebee !important; border-color: #ef9a9a !important; color: #c62828 !important; }
body.dark .stock-val { background: #252525; border-color: #333; }
body.dark .stock-val.stock-negative { background: #3a1a1a !important; border-color: #6a2a2a !important; color: #ef9a9a !important; }
.stock-min { width: 50px; padding: 3px 4px; border: 1px solid #ddd; border-radius: 4px; text-align: center; font-size: 11px; }
body.dark .stock-min { background: #2a2a2a; border-color: #444; color: #e0e0e0; }

/* ===== Меню ⋯ карточки ===== */
.card-menu-wrap { position: relative; flex: 0 0 auto; }
.card-menu-btn {
    width: 32px; height: 32px; padding: 0;
    border: 1px solid #ddd; border-radius: 8px;
    background: #fafafa; font-size: 16px; cursor: pointer;
}
body.dark .card-menu-btn { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
.card-menu-popup {
    position: absolute; right: 0; top: 100%; margin-top: 4px;
    background: #fff; border: 1px solid #ddd; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 200px; z-index: 100;
}
body.dark .card-menu-popup { background: #1e1e1e; border-color: #333; }
.card-menu-item {
    display: block; width: 100%; padding: 10px 14px;
    text-align: left; background: none; border: none;
    cursor: pointer; font-size: 13px; color: #333;
}
.card-menu-item:hover { background: #f5f5f5; }
.card-menu-item.danger { color: #c00; }
body.dark .card-menu-item { color: #e0e0e0; }
body.dark .card-menu-item:hover { background: #2a2a2a; }
body.dark .card-menu-item.danger { color: #ef9a9a; }

/* Фикс цвета пунктов подменю в шапке (было белое на белом) */
.topbar-menu-item {
    color: #333 !important;
    background: #fff;
}
.topbar-menu-item:hover {
    background: #f5f5f5 !important;
}
body.dark .topbar-menu-item {
    color: #e0e0e0 !important;
    background: #1e1e1e;
}
body.dark .topbar-menu-item:hover {
    background: #2a2a2a !important;
}

/* Состав набора прямо в карточке */
.card-set-composition {
    margin-top: 6px;
    padding: 6px 8px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
    font-size: 12px;
}
body.dark .card-set-composition {
    background: #252525;
    border-color: #333;
}
.card-set-composition-title {
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
    font-size: 12px;
}
body.dark .card-set-composition-title { color: #aaa; }
.card-set-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 0;
    line-height: 1.3;
}
.card-set-item-article {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    color: #666;
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
}
body.dark .card-set-item-article { color: #aaa; }
.card-set-item-qty {
    font-weight: 700;
    color: #6200ee;
    font-size: 12px;
    flex: 0 0 auto;
}
body.dark .card-set-item-qty { color: #c4a3f7; }
.card-set-item-rack {
    font-size: 10px;
    background: #ede7f6;
    color: #4a148c;
    padding: 1px 5px;
    border-radius: 4px;
    flex: 0 0 auto;
}
body.dark .card-set-item-rack { background: #2a1e3a; color: #c4a3f7; }
.card-set-composition.card-set-empty {
    color: #888;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-set-composition.card-set-empty .card-set-btn {
    font-style: normal;
    padding: 2px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
}
body.dark .card-set-composition.card-set-empty .card-set-btn {
    background: #2a2a2a; border-color: #444; color: #e0e0e0;
}

/* bulk-bar: чекбокс слева, счётчик, кнопки */
.bulk-bar {
    display: none;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.bulk-btn-secondary:disabled,
.bulk-btn-danger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* «Можно собрать: N» в карточке набора на складе */
.card-set-build {
    margin-top: 4px;
    padding: 4px 8px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 6px;
    font-size: 12px;
    display: inline-block;
}
.card-set-build b { font-size: 13px; }
body.dark .card-set-build {
    background: #1e3a1e;
    color: #a5d6a7;
}

/* Набор: только ГП, большой квадрат справа */
.card-stock-set {
    align-items: center;
    justify-content: center;
}
.stock-cell-gp-big {
    min-width: 76px;
}
.stock-val-big {
    font-size: 26px;
    font-weight: 800;
    min-width: 64px;
    padding: 10px 8px;
    border-radius: 10px;
    line-height: 1.1;
}
.stock-cell-gp-big .stock-min {
    margin-top: 4px;
}
body.dark .stock-val-big {
    background: #252525;
    border-color: #444;
}

/* Дашборд: инпуты минимумов */
.dash-min-input {
    width: 52px;
    padding: 2px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 11px;
    background: #fff;
    margin-top: 2px;
}
body.dark .dash-min-input {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}
.dash-min-input:focus {
    outline: 2px solid #6200ee;
}

/* Дашборд: табличный вид */
.dash-table-wrap {
    margin: 8px 12px 40px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow-x: auto;
}
body.dark .dash-table-wrap { background: #1e1e1e; }
.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.dash-table th, .dash-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
body.dark .dash-table th, body.dark .dash-table td { border-bottom-color: #333; }
.dash-table th {
    background: #fafafa;
    font-weight: 600;
    font-size: 12px;
    color: #555;
    position: sticky; top: 0;
    z-index: 1;
    user-select: none;
}
body.dark .dash-table th { background: #252525; color: #aaa; }
.dash-table th.sortable { cursor: pointer; }
.dash-table th.sortable:hover { background: #f0ebfa; }
body.dark .dash-table th.sortable:hover { background: #2a1e3a; }
.dash-table th.sorted { color: #6200ee; }
body.dark .dash-table th.sorted { color: #c4a3f7; }
.dash-table .th-arrow {
    font-size: 11px;
    margin-left: 4px;
    opacity: 0.7;
}
.dash-table .th-label { font-weight: 600; }

.dash-table td.td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.dash-table td.td-num.stock-negative {
    background: #ffebee;
    color: #c62828;
}
body.dark .dash-table td.td-num.stock-negative {
    background: #3a1a1a;
    color: #ef9a9a;
}
.dash-table .dash-article { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.dash-table .dash-name { font-size: 13px; }
.dash-table .dash-rack-chip {
    display: inline-block;
    background: #ede7f6;
    color: #4a148c;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
body.dark .dash-table .dash-rack-chip { background: #2a1e3a; color: #c4a3f7; }

.dash-min-input {
    width: 56px;
    padding: 2px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
    background: #fff;
}
body.dark .dash-min-input {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}
.dash-min-input:focus { outline: 2px solid #6200ee; }

.dash-table .empty {
    text-align: center;
    padding: 30px;
    color: #888;
}

/* Кнопки-квадраты в шапке дашборда — как на складе */
.topbar .square-btn,
.topbar .topbar-link.square-btn {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
}
.topbar .square-btn:hover,
.topbar .topbar-link.square-btn:hover {
    background: #f5f5f5 !important;
}
.topbar .square-btn:active {
    background: #e8e8e8 !important;
}
body.dark .topbar .square-btn,
body.dark .topbar .topbar-link.square-btn {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
body.dark .topbar .square-btn:hover {
    background: #333 !important;
}

/* Кнопка «←» — тоже квадрат */
.topbar .back-btn.square-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 18px;
}

/* ===== Блок «👥 Онлайн сейчас» в мониторе ===== */
.monitor-online-block {
    margin: 12px 12px 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    overflow: hidden;
}
body.dark .monitor-online-block { background: #1e1e1e; }

.monitor-online-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    font-weight: 700;
    font-size: 14px;
}
body.dark .monitor-online-head { background: #1a1a1a; border-bottom-color: #333; }

.monitor-online-count {
    background: #16a34a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}
.monitor-online-refresh {
    margin-left: auto;
    background: #ede7f6;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 14px;
    cursor: pointer;
}
body.dark .monitor-online-refresh { background: #2a1e3a; color: #c4a3f7; }

.monitor-online-list {
    max-height: 60vh;
    overflow-y: auto;
}
.monitor-online-list .empty {
    padding: 20px;
    text-align: center;
    color: #888;
}

.session-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid #f0f0f0;
}
body.dark .session-row { border-bottom-color: #2a2a2a; }
.session-row:last-child { border-bottom: none; }
.session-row.session-online { background: #f0fdf4; }
body.dark .session-row.session-online { background: #1a2a1e; }

.session-main { flex: 1; min-width: 0; }
.session-user {
    font-size: 14px;
    color: #222;
    word-wrap: break-word;
}
body.dark .session-user { color: #e0e0e0; }
.session-page {
    color: #666;
    font-size: 12px;
}
body.dark .session-page { color: #aaa; }
.session-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    word-wrap: break-word;
}

.session-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    align-items: center;
}
.session-logout-btn {
    background: #fee;
    color: #c00;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.session-logout-btn:active { background: #fcc; }
body.dark .session-logout-btn { background: #3a1a1a; color: #f87171; }

.monitor-online-adminbar {
    padding: 8px 14px;
    background: #fef3e6;
    border-top: 1px solid #fde68a;
    display: flex;
    justify-content: flex-end;
}
body.dark .monitor-online-adminbar { background: #2a2010; border-top-color: #5a4020; }

.monitor-online-danger {
    background: #d32f2f;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.monitor-online-danger:active { background: #b71c1c; }

/* ===== Единый стиль подменю ⋯ (и для <a>, и для <button>) ===== */
.topbar-menu-popup {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 6px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    z-index: 60;
}
body.dark .topbar-menu-popup {
    background: #1e1e1e;
    border-color: #333;
}

.topbar-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #222;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}
.topbar-menu-item:hover {
    background: #f5f0ff;
    color: #4a148c;
}
.topbar-menu-item:active {
    background: #ede7f6;
}
.topbar-menu-item.danger {
    color: #c00;
}
.topbar-menu-item.danger:hover {
    background: #fee;
    color: #c00;
}

body.dark .topbar-menu-item {
    color: #e0e0e0;
}
body.dark .topbar-menu-item:hover {
    background: #2a1e3a;
    color: #c4a3f7;
}
body.dark .topbar-menu-item.danger {
    color: #f87171;
}
body.dark .topbar-menu-item.danger:hover {
    background: #3a1a1a;
}

/* Если внутри пункта бейдж (например, ЧАТ) — прижать вправо */
.topbar-menu-item .chat-badge {
    margin-left: auto;
}

/* ===== Жёсткий фикс шрифтов в подменю ⋯ ===== */
.topbar .topbar-menu-popup .topbar-menu-item,
.topbar .topbar-menu-popup a.topbar-menu-item,
.topbar .topbar-menu-popup button.topbar-menu-item {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #222 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: auto !important;
}
.topbar .topbar-menu-popup .topbar-menu-item:hover {
    background: #f5f0ff !important;
    color: #4a148c !important;
}
.topbar .topbar-menu-popup .topbar-menu-item:active {
    background: #ede7f6 !important;
}
.topbar .topbar-menu-popup .topbar-menu-item.danger {
    color: #c00 !important;
}
.topbar .topbar-menu-popup .topbar-menu-item.danger:hover {
    background: #fee !important;
    color: #c00 !important;
}

/* Тёмная тема */
body.dark .topbar .topbar-menu-popup .topbar-menu-item {
    color: #e0e0e0 !important;
}
body.dark .topbar .topbar-menu-popup .topbar-menu-item:hover {
    background: #2a1e3a !important;
    color: #c4a3f7 !important;
}
body.dark .topbar .topbar-menu-popup .topbar-menu-item.danger {
    color: #f87171 !important;
}
body.dark .topbar .topbar-menu-popup .topbar-menu-item.danger:hover {
    background: #3a1a1a !important;
}

/* ===== Быстрая печать ===== */
.quick-print-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.quick-print-tab {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #333;
}
.quick-print-tab.active {
    background: #6200ee;
    color: #fff;
    border-color: #6200ee;
}
body.dark .quick-print-tab { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
body.dark .quick-print-tab.active { background: #7c43bd; border-color: #7c43bd; }

.quick-print-list {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
    padding: 4px;
    margin-bottom: 10px;
}
body.dark .quick-print-list { background: #1a1a1a; border-color: #333; }

.qp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 2px;
}
body.dark .qp-row { background: #252525; border-bottom-color: #333; }
.qp-row.qp-task-row { cursor: pointer; }
.qp-row.qp-task-row:hover { background: #f5f0ff; }
body.dark .qp-row.qp-task-row:hover { background: #2a1e3a; }

.qp-check { flex: 0 0 auto; }
.qp-check input { width: 20px; height: 20px; cursor: pointer; accent-color: #6200ee; }

.qp-info { flex: 1; min-width: 0; }
.qp-article { font-size: 12px; color: #888; font-family: ui-monospace, Consolas, monospace; }
.qp-name { font-size: 14px; font-weight: 500; word-wrap: break-word; }
.qp-nc { font-size: 11px; color: #6200ee; margin-top: 2px; }
.qp-bc { font-size: 11px; color: #666; margin-top: 2px; font-family: ui-monospace, Consolas, monospace; }
.qp-bc-warn { color: #d97706; font-weight: 600; }

.qp-dl {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border: 1px solid #6200ee;
    background: #f5f0ff;
    color: #6200ee;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
}
.qp-dl:hover { background: #ede7f6; }
.qp-dl:disabled { opacity: 0.4; cursor: wait; }
body.dark .qp-dl { background: #2a1e3a; border-color: #7c4dff; color: #c4a3f7; }

.qp-task-open {
    width: auto;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Компактные строки в модалке быстрой печати */
.qp-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.qp-row-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.qp-row-top .qp-article {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    color: #888;
    flex: 0 0 auto;
    white-space: nowrap;
}
.qp-row-top .qp-name {
    font-size: 14px;
    font-weight: 500;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.qp-row-bottom {
    display: flex;
    gap: 10px;
    font-size: 11px;
    align-items: center;
}
.qp-row-bottom .qp-nc {
    color: #6200ee;
    font-weight: 600;
}
.qp-row-bottom .qp-bc {
    color: #666;
    font-family: ui-monospace, Consolas, monospace;
}
.qp-row-bottom .qp-bc-warn {
    color: #d97706;
    font-weight: 600;
}
body.dark .qp-row-top .qp-name { color: #e0e0e0; }
body.dark .qp-row-top .qp-article { color: #aaa; }
body.dark .qp-row-bottom .qp-bc { color: #aaa; }
body.dark .qp-row-bottom .qp-nc { color: #c4a3f7; }

/* ===== Модалка нового документа ===== */
.doc-header-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.doc-header-col { display: flex; flex-direction: column; gap: 4px; }
.doc-col-num { flex: 0 0 140px; }
.doc-col-type { flex: 1 1 200px; }
.doc-col-set { flex: 1 1 200px; }
.doc-col-stock { flex: 1 1 200px; }

.doc-segmented {
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
body.dark .doc-segmented { background: #2a2a2a; }
.seg-btn {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
}
.seg-btn.active {
    background: #6200ee;
    color: #fff;
}
body.dark .seg-btn { color: #aaa; }
body.dark .seg-btn.active { background: #7c43bd; }

/* Таблица строк */
.doc-lines-table-wrap {
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    margin: 6px 0 10px;
    background: #fff;
}
body.dark .doc-lines-table-wrap { background: #1e1e1e; border-color: #333; }

.doc-lines-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.doc-lines-table th, .doc-lines-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
body.dark .doc-lines-table th, body.dark .doc-lines-table td { border-bottom-color: #333; }
.doc-lines-table th {
    background: #fafafa;
    font-weight: 600;
    font-size: 12px;
    color: #555;
    position: sticky; top: 0;
    z-index: 1;
    user-select: none;
}
body.dark .doc-lines-table th { background: #252525; color: #aaa; }
.doc-lines-table th.sortable { cursor: pointer; }
.doc-lines-table th.sortable:hover { background: #f0ebfa; }
.doc-lines-table th.sorted { color: #6200ee; }
.doc-lines-table .th-arrow { font-size: 11px; margin-left: 4px; opacity: 0.7; }
.doc-lines-table .td-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.doc-lines-table .doc-line-article {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
}
.doc-lines-table .doc-line-name { font-size: 13px; }
.doc-lines-table .td-del { width: 36px; text-align: center; }
.doc-line-input {
    width: 64px;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
}
body.dark .doc-line-input { background: #2a2a2a; color: #e0e0e0; border-color: #444; }
.doc-line-del {
    width: 26px; height: 26px; padding: 0;
    border: 1px solid #fcc; border-radius: 6px;
    background: #fff; color: #c00; cursor: pointer;
}
body.dark .doc-line-del { background: #3a1a1a; color: #f87171; border-color: #5a2020; }
.doc-lines-table .empty { text-align: center; color: #888; padding: 20px; }

/* Поиск внизу */
.doc-line-search-wrap {
    display: flex;
    gap: 6px;
    align-items: stretch;
    position: relative;
    margin-bottom: 6px;
}
.doc-line-search-wrap input {
    flex: 1 1 auto;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}
.doc-line-search-wrap input:focus { border-color: #6200ee; }
body.dark .doc-line-search-wrap input { background: #2a2a2a; color: #e0e0e0; border-color: #444; }
.doc-line-search-wrap .square-btn {
    flex: 0 0 44px;
    font-size: 16px;
    cursor: pointer;
}
.doc-search-results {
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    max-height: 40vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
    z-index: 50;
    margin-bottom: 4px;
}
body.dark .doc-search-results { background: #1e1e1e; border-color: #333; }

/* ===== Переключатели в один ряд ===== */
.doc-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.doc-header-num {
    flex: 0 0 100px;
    padding: 6px 10px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}
body.dark .doc-header-num { background: #2a2a2a; color: #e0e0e0; border-color: #444; }
.doc-header-num:focus { border-color: #6200ee; }

.doc-segmented {
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
body.dark .doc-segmented { background: #2a2a2a; }
.seg-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
}
.seg-btn.active { background: #6200ee; color: #fff; }
.seg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
body.dark .seg-btn { color: #aaa; }
body.dark .seg-btn.active { background: #7c43bd; }

/* ===== Таблица ===== */
.doc-lines-table-wrap {
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    margin: 6px 0 10px;
    background: #fff;
}
body.dark .doc-lines-table-wrap { background: #1e1e1e; border-color: #333; }
.doc-lines-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc-lines-table th, .doc-lines-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
body.dark .doc-lines-table th, body.dark .doc-lines-table td { border-bottom-color: #333; }
.doc-lines-table th {
    background: #fafafa;
    font-weight: 600;
    font-size: 12px;
    color: #555;
    position: sticky; top: 0;
    z-index: 1;
    user-select: none;
}
body.dark .doc-lines-table th { background: #252525; color: #aaa; }
.doc-lines-table th.sortable { cursor: pointer; }
.doc-lines-table th.sortable:hover { background: #f0ebfa; }
.doc-lines-table th.sorted { color: #6200ee; }
.doc-lines-table .th-arrow { font-size: 11px; margin-left: 4px; opacity: 0.7; }
.doc-lines-table .td-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.doc-lines-table .doc-line-article { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.doc-lines-table .doc-line-name { font-size: 13px; }
.doc-lines-table .td-del { width: 36px; text-align: center; }
.doc-line-input {
    width: 64px;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
}
body.dark .doc-line-input { background: #2a2a2a; color: #e0e0e0; border-color: #444; }
.doc-line-del {
    width: 26px; height: 26px; padding: 0;
    border: 1px solid #fcc; border-radius: 6px;
    background: #fff; color: #c00; cursor: pointer;
}
body.dark .doc-line-del { background: #3a1a1a; color: #f87171; border-color: #5a2020; }
.doc-lines-table .empty { text-align: center; color: #888; padding: 20px; }

/* ===== Поиск + результаты ===== */
.doc-line-search-wrap {
    position: relative;
    margin-bottom: 10px;
}
.doc-line-search-wrap input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.doc-line-search-wrap input:focus { border-color: #6200ee; }
body.dark .doc-line-search-wrap input { background: #2a2a2a; color: #e0e0e0; border-color: #444; }
.doc-search-results {
    position: fixed;   /* привязка к окну — не режется модалкой */
    max-height: 40vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 99999;    /* поверх модалки */
}
body.dark .doc-search-results { background: #1e1e1e; border-color: #333; }
.doc-search-results .nc-link-item {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
body.dark .doc-search-results .nc-link-item { border-bottom-color: #2a2a2a; }
.doc-search-results .nc-link-item:hover { background: #f5f0ff; }
body.dark .doc-search-results .nc-link-item:hover { background: #2a1e3a; }
.doc-search-results .empty { padding: 16px; text-align: center; color: #888; }

/* ===== Комментарий ===== */
.doc-comment-wrap {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
}
body.dark .doc-comment-wrap { border-top-color: #333; }
.doc-comment-wrap input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
    background: #fafafa;
}
.doc-comment-wrap input:focus { border-color: #6200ee; background: #fff; }
body.dark .doc-comment-wrap input { background: #252525; border-color: #444; color: #e0e0e0; }

.doc-row-authors {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 11px;
    color: #888;
}
.doc-author { white-space: nowrap; }
.doc-author-posted { color: #2e7d32; }
.doc-author-cancelled { color: #c62828; }
body.dark .doc-row-authors { color: #aaa; }

/* ============================================================
   ПАТЧ: читаемость фиолетового текста в тёмной теме
   ============================================================ */

/* ----- 1. Акцентный текст: заголовки, значения, счётчики ----- */
body.dark .login-box h1,
body.dark .lbl-panel-title,
body.dark .nc-stat-val,
body.dark .monitor-val,
body.dark .monitor-online-count,
body.dark .task-progress-label,
body.dark .btn-collect-pct,
body.dark .set-row-qty,
body.dark .storage-group-header .group-count,
body.dark .tasks-sep .tasks-sep-count,
body.dark .group-header .group-count {
    color: #d4b8ff !important;
}

/* ----- 2. Второстепенный фиолетовый текст ----- */
body.dark .nc-stat-lbl,
body.dark .monitor-lbl,
body.dark .task-meta.mine,
body.dark .task-head-author,
body.dark .chat-author,
body.dark .set-row-bc,
body.dark .storage-nc-text,
body.dark .nc-line,
body.dark .nc-suggest-name,
body.dark .presence-bar {
    color: #c9b3f5 !important;
}

/* ----- 3. Ссылки и кнопки-ссылки ----- */
body.dark .back-btn,
body.dark .topbar-link,
body.dark .btn-rename,
body.dark .nc-btn-link-manual,
body.dark .nc-btn-link,
body.dark .storage-nc-link,
body.dark .card-nc-link,
body.dark .card-set-btn {
    color: #c9b3f5 !important;
}

/* ----- 4. Фиолетовый текст в кнопках, бейджах, чипах ----- */
body.dark .btn-collect-label,
body.dark .btn-collect.mine .btn-collect-label,
body.dark .btn-km-label,
body.dark .rack-badge,
body.dark .storage-rack.has-rack,
body.dark .storage-rack-display.has-rack,
body.dark .card .qty,
body.dark .set-item-rack,
body.dark .card-set-item-rack,
body.dark .card-set-item-qty,
body.dark .nc-storage-rack,
body.dark .nc-suggest-rack,
body.dark .dash-rack-chip,
body.dark .nc-link-rack,
body.dark .bc-chip,
body.dark .set-row-bc-copy,
body.dark .storage-barcodes .bc-chip .bc-del,
body.dark .bc-add,
body.dark .storage-nc-unlink {
    color: #d4b8ff !important;
}

/* ----- 5. Фиолетовые фоны — темнее, текст светлее ----- */
body.dark .btn-collect {
    background: #221a33 !important;
    border-color: #7c4dff !important;
}
body.dark .btn-collect.mine {
    background: #1a2e1e !important;
    border-color: #22c55e !important;
}
body.dark .btn-collect-fill { opacity: 0.18 !important; }
body.dark .btn-collect.mine .btn-collect-fill { opacity: 0.18 !important; }

/* ----- 6. Фиолетовые рамки — ярче ----- */
body.dark .storage-rack.has-rack,
body.dark .storage-rack-display.has-rack,
body.dark .rack-badge,
body.dark .card .qty,
body.dark .btn-km-square,
body.dark .nc-stat-btn.active,
body.dark .period-btn.active,
body.dark .tabs .tab.active {
    border-color: #9c6bff !important;
}

/* ----- 7. Прогресс-бары ----- */
body.dark .task-progress-wrap .task-progress-fill {
    background: linear-gradient(90deg, #8b5cf6, #c4a3f7) !important;
}
body.dark .task-progress-wrap .task-progress {
    background: #3a3a3a !important;
}

/* ----- 8. Текст в карточках заданий ----- */
body.dark .task-card h3,
body.dark .task-head h3 { color: #e8e0f0 !important; }
body.dark .task-meta,
body.dark .task-meta.small { color: #b0b0b0 !important; }

/* ----- 9. Склад: артикулы, названия ----- */
body.dark .storage-article,
body.dark .card-article,
body.dark .set-row-article,
body.dark .doc-line-article,
body.dark .nc-gtin,
body.dark .nc-storage-article { color: #b8b8b8 !important; }

body.dark .storage-name,
body.dark .card-title,
body.dark .set-row-name,
body.dark .doc-line-name,
body.dark .nc-name,
body.dark .nc-storage-name { color: #e8e8e8 !important; }

/* ----- 10. Чат ----- */
body.dark .chat-text { color: #e8e8e8 !important; }
body.dark .chat-time { color: #a0a0a0 !important; }
body.dark .chat-reply-author { color: #d4b8ff !important; }
body.dark .chat-reply-text { color: #b8b8b8 !important; }

/* ----- 11. Инпуты и формы ----- */
body.dark input,
body.dark textarea,
body.dark select {
    color: #e8e8e8 !important;
    background-color: #2a2a2a !important;
    border-color: #555 !important;
}
body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus {
    border-color: #9c6bff !important;
    outline-color: #9c6bff !important;
}
body.dark input::placeholder,
body.dark textarea::placeholder { color: #888 !important; }

body.dark .radio-item,
body.dark .perm-toggle {
    color: #e0e0e0 !important;
    background: #2a2a2a !important;
}
body.dark .radio-item input,
body.dark .perm-toggle input { accent-color: #9c6bff !important; }

/* ----- 12. Модалки и заголовки ----- */
body.dark .modal h3,
body.dark .react-info-title,
body.dark .react-sheet-title { color: #e8e8e8 !important; }

body.dark .modal-label,
body.dark .modal-hint,
body.dark .set-modal-subhead { color: #b0b0b0 !important; }

/* ----- 13. Табы и фильтры ----- */
body.dark .tabs .tab { color: #a0a0a0 !important; }
body.dark .tabs .tab.active {
    color: #d4b8ff !important;
    border-bottom-color: #9c6bff !important;
}
body.dark .filter-btn {
    color: #b0b0b0 !important;
    background: #2a2a2a !important;
    border-color: #555 !important;
}
body.dark .filter-btn.active {
    color: #fff !important;
    background: #7c43bd !important;
    border-color: #7c43bd !important;
}

/* ----- 14. Кнопки с фиолетовым фоном — белый текст ----- */
body.dark .primary-btn,
body.dark .login-box button,
body.dark .btn-open,
body.dark .lbl-btn-primary,
body.dark .storage-tab-btn.active,
body.dark .seg-btn.active,
body.dark .quick-print-tab.active,
body.dark .react-info-close,
body.dark .set-btn.done.active,
body.dark .set-btn.todo.active { color: #fff !important; }

/* ----- 15. Бейджи и чипы ----- */
body.dark .rack-badge {
    background: #2a1e3a !important;
    color: #d4b8ff !important;
}
body.dark .card.checked .rack-badge {
    background: #2a2a2a !important;
    color: #888 !important;
}
body.dark .nc-stat-btn.active { background: #2a1e3a !important; }
body.dark .nc-stat-btn.active .nc-stat-lbl { color: #c9b3f5 !important; }
body.dark .nc-stat-btn.active .nc-stat-val { color: #d4b8ff !important; }

body.dark .monitor-online {
    background: #2a1e3a !important;
    color: #d4b8ff !important;
}
body.dark .tasks-sep,
body.dark .group-header,
body.dark .storage-group-header,
body.dark .presence-bar,
body.dark .reply-bar {
    background: #2a1e3a !important;
    color: #d4b8ff !important;
}
body.dark .tasks-sep .tasks-sep-count { background: #7c4dff !important; color: #fff !important; }
body.dark .presence-bar button { background: #7c4dff !important; color: #fff !important; }
body.dark .reply-bar-author { color: #d4b8ff !important; }
body.dark .reply-bar-text { color: #b8b8b8 !important; }

/* ----- 16. Статусы ----- */
body.dark .status-bar {
    background: #1a1a1a !important;
    color: #b0b0b0 !important;
}
body.dark .status-bar.locked {
    background: #2a2010 !important;
    color: #fbbf24 !important;
}

/* ----- 17. Ошибки ----- */
body.dark .error { color: #f87171 !important; }
body.dark .error-item-src { color: #f87171 !important; }
body.dark .error-item-src.err-kind-client { color: #fbbf24 !important; }

/* ----- 18. Кнопки КМ/ШК ----- */
body.dark .btn-km-square.btn-km-print {
    border-color: #555 !important;
    background: #2a2a2a !important;
    color: #888 !important;
}

/* ----- 19. Меню ⋯ ----- */
body.dark .topbar .topbar-menu-popup .topbar-menu-item {
    color: #e0e0e0 !important;
}
body.dark .topbar .topbar-menu-popup .topbar-menu-item:hover {
    background: #2a1e3a !important;
    color: #d4b8ff !important;
}
body.dark .topbar .topbar-menu-popup .topbar-menu-item.danger { color: #f87171 !important; }
body.dark .topbar .topbar-menu-popup .topbar-menu-item.danger:hover {
    background: #3a1a1a !important;
}

/* ----- 20. Быстрая печать и документы ----- */
body.dark .quick-print-tab { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
body.dark .quick-print-tab.active { background: #7c43bd; border-color: #7c43bd; }
body.dark .qp-row-top .qp-name { color: #e0e0e0; }
body.dark .qp-row-top .qp-article { color: #aaa; }
body.dark .qp-row-bottom .qp-bc { color: #aaa; }
body.dark .qp-row-bottom .qp-nc { color: #c4a3f7; }

/* === move-ref-link (patch) === */

a.move-ref-link {
    color: #6200ee;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-weight: 600;
}
a.move-ref-link:hover { color: #4a00b8; }
a.move-ref-link:active { color: #3a0090; }

body.dark a.move-ref-link { color: #c9b3f5; }
body.dark a.move-ref-link:hover { color: #d4b8ff; }
body.dark a.move-ref-link:active { color: #e8dcff; }

/* На всякий случай — общий вид ref, если ещё не задан */
.move-ref {
    word-break: break-word;
}

/* ===== Пагинация на странице заданий ===== */
.show-more-wrap {
    display: flex;
    justify-content: center;
    margin: 10px 12px 4px;
}
.show-more-btn {
    width: 100%;
    max-width: 420px;
    padding: 12px 16px;
    background: #f5f0ff;
    color: #4a148c;
    border: 2px dashed #9c6bff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.show-more-btn:hover { background: #ede7f6; border-color: #6200ee; }
.show-more-btn:active { background: #e0d4ff; }
.show-more-btn .show-more-count {
    color: #888;
    font-weight: 500;
    font-size: 13px;
}
.show-more-toggle {
    background: #ede7f6;
    border-style: solid;
    border-color: #d1c4e9;
    color: #4a148c;
}
.show-more-hide {
    margin-top: 8px;
    background: transparent;
    border-style: dashed;
    border-color: #ccc;
    color: #666;
    font-weight: 500;
}
.show-more-hide:hover { background: #f5f5f5; border-color: #999; color: #333; }

body.dark .show-more-btn {
    background: #2a1e3a;
    border-color: #7c4dff;
    color: #d4b8ff;
}
body.dark .show-more-btn:hover { background: #3a2850; }
body.dark .show-more-btn .show-more-count { color: #999; }
body.dark .show-more-toggle {
    background: #2a1e3a;
    border-color: #3a2850;
    color: #d4b8ff;
}
body.dark .show-more-hide {
    background: transparent;
    border-color: #444;
    color: #888;
}
body.dark .show-more-hide:hover { background: #2a2a2a; color: #ccc; }

/* ============================================================
   Пагинация склада: кнопка «Показать ещё» и «Конец списка»
   ============================================================ */
.storage-load-more-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 16px 26px;
    margin: 0;
}

.storage-load-more {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 24px;
    min-width: 240px;
    border-radius: 999px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.2;

    color: #4a148c;
    background: #f5f0ff;
    border: 2px solid #9c6bff;

    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.08s ease;
    box-shadow: 0 1px 3px rgba(98, 0, 238, 0.10);
}

.storage-load-more:hover {
    background: #ede7f6;
    border-color: #6200ee;
    box-shadow: 0 3px 10px rgba(98, 0, 238, 0.18);
}

.storage-load-more:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(98, 0, 238, 0.12);
}

.storage-load-more:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.35);
    border-color: #6200ee;
}

.storage-load-more:disabled {
    opacity: 0.55;
    cursor: default;
    box-shadow: none;
}

/* «＋» слева — как акцент */
.storage-load-more::before {
    content: "＋";
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #6200ee;
    margin-right: 2px;
    transition: transform 0.2s ease;
}

.storage-load-more:hover::before {
    transform: rotate(90deg);
}

/* Состояние загрузки: вместо «＋» — спиннер */
.storage-load-more.loading::before {
    content: "";
    width: 14px;
    height: 14px;
    margin-right: 4px;
    border-radius: 50%;
    border: 2px solid #6200ee;
    border-top-color: transparent;
    animation: storageSpin 0.7s linear infinite;
    transform: none;
}

@keyframes storageSpin {
    to { transform: rotate(360deg); }
}

/* Подпись счётчика внутри кнопки (если передаётся отдельным спаном) */
.storage-load-more .storage-load-more-count {
    color: #7c4dff;
    font-weight: 500;
    font-size: 13px;
}

/* Плашка «— конец списка —» */
.storage-list-end {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 16px 26px;
    color: #888;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 0.85;
}

.storage-list-end::before,
.storage-list-end::after {
    content: "";
    display: inline-block;
    width: 48px;
    height: 1px;
    background: #e0e0e0;
    margin: 0 12px;
}

/* Тёмная тема */
body.dark .storage-load-more {
    background: #2a1e3a;
    border-color: #7c4dff;
    color: #d4b8ff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
body.dark .storage-load-more:hover {
    background: #3a2850;
    border-color: #b794f6;
    box-shadow: 0 3px 12px rgba(124, 77, 255, 0.30);
}
body.dark .storage-load-more::before {
    color: #b794f6;
}
body.dark .storage-load-more.loading::before {
    border-color: #b794f6;
    border-top-color: transparent;
}
body.dark .storage-load-more .storage-load-more-count {
    color: #b794f6;
}
body.dark .storage-load-more:focus-visible {
    box-shadow: 0 0 0 3px rgba(183, 148, 246, 0.35);
    border-color: #b794f6;
}

body.dark .storage-list-end {
    color: #888;
}
body.dark .storage-list-end::before,
body.dark .storage-list-end::after {
    background: #333;
}

/* Мобильные: на всю ширину, но с отступами */
@media (max-width: 700px) {
    .storage-load-more-wrap {
        padding: 16px 16px 24px;
    }
    .storage-load-more {
        width: 100%;
        max-width: 420px;
        min-width: 0;
        padding: 13px 20px;
        font-size: 15px;
    }
}
/* end: pagination storage */





/* ============================================================
   ШАПКА TASK.HTML — АБСОЛЮТНЫЙ ФИКС
   ============================================================ */

.topbar.task-topbar-v2 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 4px 6px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #6200ee !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    height: 48px !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease !important;
}
.topbar.task-topbar-v2.topbar-hidden {
    transform: translateY(-100%) !important;
}

.task-topbar-v2 .task-topbar-left {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 6px !important;
    height: 100% !important;
}

.task-topbar-v2 .title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
    user-select: none !important;
}

.task-topbar-v2 .actions-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 100% !important;
    flex: 0 0 auto !important;
}

.task-topbar-v2 .zoom-controls {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 100% !important;
}

/* === ГЛАВНЫЙ ФИКС: Обнуляем старые absolute стили === */
.task-topbar-v2 .task-menu-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: auto !important;
}

/* === ВСЕ КНОПКИ === */
.task-topbar-v2 .square-btn,
.task-topbar-v2 .btn-back.square-btn,
.task-topbar-v2 .btn-zoom,
.task-topbar-v2 .task-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    color: #000000 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    flex: 0 0 40px !important;
    transition: background 0.15s, border-color 0.15s !important;
    -webkit-tap-highlight-color: transparent;
}

/* Кнопка внутри обертки */
.task-topbar-v2 .task-menu-wrap .task-menu-btn {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 40px !important;
    max-height: 40px !important;
    flex: 1 1 100% !important;
}

.task-topbar-v2 .square-btn:hover,
.task-topbar-v2 .btn-back.square-btn:hover,
.task-topbar-v2 .btn-zoom:hover,
.task-topbar-v2 .task-menu-btn:hover { background: #f5f5f5 !important; }
.task-topbar-v2 .square-btn:active,
.task-topbar-v2 .btn-back.square-btn:active,
.task-topbar-v2 .btn-zoom:active,
.task-topbar-v2 .task-menu-btn:active { background: #e0e0e0 !important; }

.task-topbar-v2 .task-menu-popup {
    position: absolute;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    min-width: 200px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
    border: 1px solid #ddd;
    padding: 6px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.task-topbar-v2 .task-menu-popup[style*="display: none"],
.task-topbar-v2 .task-menu-popup[style*="display:none"] { display: none !important; }
.task-topbar-v2 .task-menu-item {
    display: block; width: 100%; text-align: left;
    background: transparent; border: none; border-radius: 8px;
    padding: 10px 12px; font-size: 14px; font-weight: 500;
    color: #222; cursor: pointer; white-space: nowrap;
}
.task-topbar-v2 .task-menu-item:hover { background: #f5f0ff; color: #4a148c; }
.task-topbar-v2 .task-menu-item.danger { color: #c00; }
.task-topbar-v2 .task-menu-item.danger:hover { background: #fee; }

body.dark .task-topbar-v2 .square-btn,
body.dark .task-topbar-v2 .btn-back.square-btn,
body.dark .task-topbar-v2 .btn-zoom,
body.dark .task-topbar-v2 .task-menu-btn {
    background: #ffffff !important;
    border-color: #ddd !important;
    color: #000000 !important;
}
body.dark .task-topbar-v2 .task-menu-popup { background: #1e1e1e; border-color: #333; }
body.dark .task-topbar-v2 .task-menu-item { color: #e0e0e0; }
body.dark .task-topbar-v2 .task-menu-item:hover { background: #2a1e3a; color: #d4b8ff; }
body.dark .task-topbar-v2 .task-menu-item.danger { color: #f87171; }
body.dark .task-topbar-v2 .task-menu-item.danger:hover { background: #3a1a1a; }

@media (max-width: 480px) {
    .topbar.task-topbar-v2 { height: 44px !important; padding: 4px 6px !important; }
    .task-topbar-v2 .square-btn,
    .task-topbar-v2 .btn-back.square-btn,
    .task-topbar-v2 .btn-zoom,
    .task-topbar-v2 .task-menu-btn {
        width: 36px !important; height: 36px !important;
        min-width: 36px !important; min-height: 36px !important;
        max-width: 36px !important; max-height: 36px !important;
        flex-basis: 36px !important; font-size: 16px !important;
    }
    .task-topbar-v2 .task-menu-wrap {
        flex-basis: 36px !important; width: 36px !important; height: 36px !important;
    }
    .task-topbar-v2 .task-menu-wrap .task-menu-btn {
        max-width: 36px !important; max-height: 36px !important;
    }
    .task-topbar-v2 .title { font-size: 14px !important; padding: 0 2px !important; }
}


/* === QP CHECK ALL CSS === */
.qp-check-all-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}
.qp-check-all-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
}
.qp-check-all-label input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.qp-check-all-count {
    color: #666;
    font-variant-numeric: tabular-nums;
}
body.dark .qp-check-all-bar {
    background: #1e2a38;
    border-bottom-color: #2b3a4d;
}
body.dark .qp-check-all-count { color: #8a9aa8; }


/* === RACK SEP CSS === */
.rack-sep {
    list-style: none;
    margin: 10px 4px 4px;
    padding: 0;
    height: 0;
    border-top: 1px dashed #bdbdbd;
    pointer-events: none;
}
body.dark .rack-sep {
    border-top-color: #444;
}


/* === SET ASSEMBLY CSS === */
.btn-assemble {
    flex: 0 0 auto;
    min-width: 84px;
    height: 42px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: #6200ee;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    margin-left: 8px;
}
.btn-assemble:hover { background: #4a00b8; }
.btn-assemble:active { background: #3a0090; }
.btn-assemble.done {
    background: #16a34a;
}
.btn-assemble.done:hover { background: #15803d; }
body.dark .btn-assemble { background: #7c4dff; }
body.dark .btn-assemble:hover { background: #6a3ee8; }
body.dark .btn-assemble.done { background: #22c55e; }

/* Модалка состава */
.set-assembly-list {
    max-height: 55vh;
    overflow-y: auto;
    margin: 8px 0;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
    padding: 6px;
}
body.dark .set-assembly-list { background: #1a1a1a; border-color: #333; }

.set-comp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background 0.1s;
}
.set-comp-row:hover { background: #f5f0ff; }
body.dark .set-comp-row { background: #252525; }
body.dark .set-comp-row:hover { background: #2a1e3a; }

.set-comp-row input.set-comp-cb {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: #6200ee;
}
body.dark .set-comp-row input.set-comp-cb { accent-color: #7c4dff; }

.set-comp-rack {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 2px solid #ddd;
    background: #f3f3f3;
    color: #4a148c;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}
.set-comp-rack.has-rack {
    background: #ede7f6;
    border-color: #6200ee;
}
.set-comp-rack.rack-empty {
    color: #bbb;
    border-color: #ddd;
    font-weight: 400;
    font-size: 16px;
}
body.dark .set-comp-rack { background: #2a2a2a; border-color: #444; color: #c4a3f7; }
body.dark .set-comp-rack.has-rack { background: #2a1e3a; border-color: #7c4dff; }
body.dark .set-comp-rack.rack-empty { background: #222; border-color: #333; color: #555; }

.set-comp-info { flex: 1; min-width: 0; }
.set-comp-name {
    font-size: 14px;
    font-weight: 500;
    color: #222;
    word-wrap: break-word;
}
body.dark .set-comp-name { color: #e0e0e0; }
.set-comp-article {
    font-size: 11px;
    color: #888;
    font-family: ui-monospace, Consolas, monospace;
    margin-top: 2px;
}
body.dark .set-comp-article { color: #aaa; }

.set-comp-qty {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 700;
    color: #6200ee;
    padding: 4px 10px;
    background: #f5f0ff;
    border-radius: 6px;
}
body.dark .set-comp-qty { color: #c4a3f7; background: #2a1e3a; }

/* Мобильная адаптация */
@media (max-width: 480px) {
    .set-comp-rack { flex: 0 0 40px; width: 40px; height: 40px; font-size: 12px; }
    .set-comp-name { font-size: 13px; }
    .set-comp-qty { font-size: 14px; padding: 3px 8px; }
    .btn-assemble { min-width: 72px; padding: 0 10px; font-size: 12px; }
}

/* === SET COMP PF === */
.set-comp-pf {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
    font-family: ui-monospace, Consolas, monospace;
}
.set-comp-pf.pf-short {
    color: #d32f2f;
    font-weight: 700;
}
body.dark .set-comp-pf { color: #aaa; }
body.dark .set-comp-pf.pf-short { color: #f87171; }

.set-item-pf {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
    font-family: ui-monospace, Consolas, monospace;
}
body.dark .set-item-pf { color: #aaa; }


/* === SET COMP TABLE CSS === */
.set-comp-wrap {
    margin-top: 6px;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
body.dark .set-comp-wrap { background: #1e1e1e; border-color: #333; }

.set-comp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    font-size: 12px;
}
body.dark .set-comp-head { background: #252525; border-bottom-color: #333; }
.set-comp-head-title { font-weight: 600; color: #555; }
body.dark .set-comp-head-title { color: #aaa; }
.set-comp-head-build {
    font-size: 12px;
    color: #2e7d32;
    font-weight: 600;
}
.set-comp-head-build b { font-size: 13px; }
body.dark .set-comp-head-build { color: #86efac; }

.set-comp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.3;
}
.set-comp-table th,
.set-comp-table td {
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
body.dark .set-comp-table th,
body.dark .set-comp-table td { border-bottom-color: #2a2a2a; }
.set-comp-table tr:last-child td { border-bottom: none; }

.set-comp-table th {
    background: #f5f5f5;
    font-weight: 600;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
body.dark .set-comp-table th { background: #252525; color: #888; }

.set-comp-table .col-art {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    width: 1%;
}
body.dark .set-comp-table .col-art { color: #aaa; }

.set-comp-table .col-name {
    color: #222;
    word-break: break-word;
}
body.dark .set-comp-table .col-name { color: #e0e0e0; }

.set-comp-table .col-pf {
    text-align: right;
    font-weight: 700;
    color: #6200ee;
    white-space: nowrap;
    width: 1%;
}
body.dark .set-comp-table .col-pf { color: #c4a3f7; }
.set-comp-table .col-pf.low { color: #c62828; }
body.dark .set-comp-table .col-pf.low { color: #f87171; }

.set-comp-table .col-need {
    text-align: right;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    width: 1%;
}
body.dark .set-comp-table .col-need { color: #ccc; }

.set-comp-table .col-rack {
    text-align: center;
    font-family: ui-monospace, Consolas, monospace;
    font-weight: 700;
    color: #4a148c;
    background: #ede7f6;
    white-space: nowrap;
    width: 1%;
    border-radius: 4px;
}
body.dark .set-comp-table .col-rack { color: #c4a3f7; background: #2a1e3a; }

.set-comp-table .col-rack:empty,
.set-comp-table .col-rack.rack-empty {
    background: transparent;
    color: #bbb;
}

/* Мобильная адаптация */
@media (max-width: 520px) {
    .set-comp-table th,
    .set-comp-table td { padding: 3px 6px; font-size: 11px; }
    .set-comp-table .col-art { font-size: 10px; }
    .set-comp-head { padding: 5px 8px; font-size: 11px; }
    .set-comp-head-build { font-size: 11px; }
}


/* === SET COMP EDIT BTN CSS === */
.set-comp-edit-btn {
    flex: 0 0 auto;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #6200ee;
    background: #f5f0ff;
    border: 1px solid #9c6bff;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.set-comp-edit-btn:hover { background: #ede7f6; border-color: #6200ee; }
.set-comp-edit-btn:active { background: #e0d4ff; }

body.dark .set-comp-edit-btn {
    color: #c4a3f7;
    background: #2a1e3a;
    border-color: #7c4dff;
}
body.dark .set-comp-edit-btn:hover { background: #3a2850; border-color: #b794f6; }

/* Мобильная */
@media (max-width: 520px) {
    .set-comp-edit-btn { font-size: 10px; padding: 2px 6px; }
}


/* === DOC MODAL FULLSCREEN CSS === */
.modal-bg.doc-modal-fullscreen {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
.modal.modal-fullscreen {
    max-width: none;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none;
}
.modal.modal-fullscreen h3 {
    flex: 0 0 auto;
    margin: 0 0 8px;
}
.modal.modal-fullscreen .doc-header-row {
    flex: 0 0 auto;
}
.modal.modal-fullscreen .doc-lines-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin: 6px 0 8px;
}
.modal.modal-fullscreen .doc-line-search-wrap,
.modal.modal-fullscreen .doc-comment-wrap,
.modal.modal-fullscreen #doc-err,
.modal.modal-fullscreen .modal-buttons {
    flex: 0 0 auto;
}
.modal.modal-fullscreen .modal-buttons {
    margin-top: 8px;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.doc-dupes-warning {
    flex: 0 0 auto;
    margin: 4px 0 6px;
    padding: 6px 12px;
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
body.dark .doc-dupes-warning {
    background: #3a2a1a;
    border-color: #6a4a2a;
    color: #ffcc80;
}

.doc-lines-table .td-stock {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    width: 1%;
}
body.dark .doc-lines-table .td-stock { color: #ccc; }
.doc-lines-table .td-stock.stock-negative { color: #c62828; }
body.dark .doc-lines-table .td-stock.stock-negative { color: #ef9a9a; }

.doc-search-results .nc-link-stocks {
    display: flex;
    gap: 8px;
    margin-top: 2px;
    font-size: 11px;
    font-family: ui-monospace, Consolas, monospace;
}
.doc-search-results .nc-link-stock {
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
}
.doc-search-results .nc-link-stock.stock-pf { background: #ede7f6; color: #4a148c; }
.doc-search-results .nc-link-stock.stock-gp { background: #e8f5e9; color: #2e7d32; }
.doc-search-results .nc-link-stock.stock-negative { background: #ffebee; color: #c62828; }
body.dark .doc-search-results .nc-link-stock.stock-pf { background: #2a1e3a; color: #c4a3f7; }
body.dark .doc-search-results .nc-link-stock.stock-gp { background: #1e3a1e; color: #a5d6a7; }
body.dark .doc-search-results .nc-link-stock.stock-negative { background: #3a1a1a; color: #ef9a9a; }

@media (max-width: 560px) {
    .modal.modal-fullscreen .modal-buttons { flex-direction: column; }
    .modal.modal-fullscreen .modal-buttons button { width: 100%; }
}
/* === /DOC MODAL FULLSCREEN CSS === */

/* PATCH_08: reserved/available */
.stock-reserved {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #d97706;
    background: #fff3e0;
    padding: 0 4px;
    border-radius: 4px;
    margin-left: 2px;
    vertical-align: middle;
    line-height: 1.4;
}
.stock-available {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #2e7d32;
    margin-left: 2px;
    vertical-align: middle;
}
.stock-available.stock-available-neg { color: #c62828; }

body.dark .stock-reserved {
    color: #fbbf24;
    background: #3a2a1a;
}
body.dark .stock-available { color: #86efac; }
body.dark .stock-available.stock-available-neg { color: #ef9a9a; }

.stock-val-big .stock-reserved,
.stock-val-big .stock-available {
    font-size: 11px;
}

/* PATCH_09: dashboard reserved */
.dash-reserved {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #d97706;
    background: #fff3e0;
    padding: 1px 6px;
    border-radius: 4px;
}
.dash-reserved-empty {
    color: #bbb !important;
    font-weight: 400 !important;
}
.dash-available {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #2e7d32;
}
.dash-available.stock-available-neg {
    color: #c62828;
}
body.dark .dash-reserved {
    color: #fbbf24;
    background: #3a2a1a;
}
body.dark .dash-available { color: #86efac; }
body.dark .dash-available.stock-available-neg { color: #ef9a9a; }

/* PATCH_11c: reports */
.report-filters {
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #eee;
}
.report-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.report-filter-row:last-child { margin-bottom: 0; }
.report-label {
    font-size: 12px;
    color: #666;
    font-weight: 600;
}
.report-input {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    background: #fff;
    color: #222;
}
.report-input:focus { border-color: #6200ee; }
.report-input-wide { flex: 1 1 auto; min-width: 220px; }
.report-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: #6200ee;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.report-btn:hover { background: #4a00b8; }
.report-btn-ghost {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
}
.report-btn-ghost:hover { background: #eee; }

.report-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}
.report-channels-hint { font-size: 12px; color: #666; font-weight: 600; margin-right: 4px; }
.report-chip {
    padding: 5px 12px;
    border-radius: 16px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.report-chip:hover { background: #eee; }
.report-chip.active {
    background: #6200ee;
    border-color: #6200ee;
    color: #fff;
}

.report-block {
    margin: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: hidden;
}
.report-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    font-weight: 700;
    font-size: 14px;
    color: #333;
}
.report-total { font-size: 12px; color: #888; font-weight: 500; }

.report-table-wrap { overflow-x: auto; }
.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.report-table th, .report-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.report-table th {
    background: #fff;
    font-weight: 600;
    font-size: 12px;
    color: #666;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
}
.report-table th:hover { color: #6200ee; }
.report-table th .sort-arrow { color: #6200ee; font-weight: 700; }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.report-table tr:last-child td { border-bottom: none; }
.report-table .empty {
    text-align: center;
    color: #888;
    padding: 24px;
    font-style: italic;
}
.report-row-click { cursor: pointer; }
.report-row-click:hover { background: #f5f0ff; }

/* Тёмная тема */
body.dark .report-filters,
body.dark .report-block { background: #1e1e1e; border-color: #333; }
body.dark .report-filters { border-bottom-color: #333; }
body.dark .report-label { color: #aaa; }
body.dark .report-input {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #444;
}
body.dark .report-input:focus { border-color: #7c4dff; }
body.dark .report-btn { background: #7c4dff; }
body.dark .report-btn:hover { background: #6a3ee8; }
body.dark .report-btn-ghost { background: #2a2a2a; color: #ccc; border-color: #444; }
body.dark .report-btn-ghost:hover { background: #333; }
body.dark .report-chip {
    background: #2a2a2a;
    color: #aaa;
    border-color: #444;
}
body.dark .report-chip:hover { background: #333; }
body.dark .report-chip.active { background: #7c4dff; border-color: #7c4dff; color: #fff; }
body.dark .report-block-head {
    background: #1a1a1a;
    border-bottom-color: #333;
    color: #e0e0e0;
}
body.dark .report-total { color: #888; }
body.dark .report-table th {
    background: #1a1a1a;
    color: #aaa;
}
body.dark .report-table th:hover { color: #c4a3f7; }
body.dark .report-table th .sort-arrow { color: #b794f6; }
body.dark .report-table td { border-bottom-color: #2a2a2a; }
body.dark .report-table .empty { color: #888; }
body.dark .report-row-click:hover { background: #2a1e3a; }

/* PATCH_16: channel badge */
.channel-badge {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.4;
    vertical-align: middle;
}
body.dark .channel-badge {
    /* цвета задаются инлайном из JS, тут только нейтрализация */
    filter: brightness(0.9);
}

/* PATCH_22: no-reserve card */
.task-card.task-card-no-reserve {
    background: #f0f7ff;
    border-left: 4px solid #60a5fa;
}
.task-card.task-card-no-reserve-dirty {
    background: #fafafa;
    border-left: 4px solid #d1d5db;
}
body.dark .task-card.task-card-no-reserve {
    background: #14233a;
    border-left-color: #3b82f6;
}
body.dark .task-card.task-card-no-reserve-dirty {
    background: #222;
    border-left-color: #4b5563;
}

/* PATCH_24: header buttons align */
.topbar .actions {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
}
.topbar .actions > a.square-btn,
.topbar .actions > a.topbar-link,
.topbar .actions > button.square-btn,
.topbar .actions > button.topbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    line-height: 1;
    padding: 0 10px;
    margin: 0;
    box-sizing: border-box;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
@media (max-width: 480px) {
    .topbar .actions > a.square-btn,
    .topbar .actions > a.topbar-link,
    .topbar .actions > button.square-btn,
    .topbar .actions > button.topbar-link {
        height: 32px;
        padding: 0 8px;
        font-size: 11px;
    }
}

/* PATCH_25: header buttons hard-align */
.topbar > .actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 100% !important;
}
.topbar > .actions > a,
.topbar > .actions > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
}
.topbar > .actions > a:hover,
.topbar > .actions > button:hover {
    background: #f5f5f5 !important;
}
body.dark .topbar > .actions > a,
body.dark .topbar > .actions > button {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

/* кнопка ОТЧЁТ — без двойной рамки, как остальные */
.topbar .actions a[href="/reports"] {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
}
body.dark .topbar .actions a[href="/reports"] {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

/* z-index: task-menu-popup выше km-dropdown */
.task-menu-popup {
    z-index: 120 !important;
}
.task-km-dropdown {
    z-index: 110 !important;
}

/* PATCH_29: zindex menus */
/* Обёртка меню задания — выше, чем .btn-collect-wrap */
.task-card .task-menu-wrap {
    position: relative !important;
    z-index: 30 !important;
}
/* Обёртка кнопки «Собрать» (и её ⋯) — ниже */
.task-card .btn-collect-wrap {
    position: relative !important;
    z-index: 10 !important;
}
/* Сами попапы — над всем внутри карточки */
.task-card .task-menu-popup {
    position: absolute !important;
    z-index: 40 !important;
}
.task-card .task-km-dropdown {
    position: absolute !important;
    z-index: 20 !important;
}
/* Кнопка-триггер ⋯ от «Собрать» — не должна перекрывать меню задания */
.task-card .btn-km-dots {
    z-index: 5 !important;
}

/* PATCH_30: menu-wrap absolute */
/* Перебиваем патч 29: .task-menu-wrap должен оставаться absolute в правом верхнем углу */
.task-card .task-menu-wrap {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 30 !important;
}
/* Для мобилки — 6px (как было в старых стилях) */
@media (max-width: 480px) {
    .task-card .task-menu-wrap {
        top: 6px !important;
        right: 6px !important;
    }
}

/* PATCH_33: z-index + completed km */
.task-card .task-menu-popup,
.task-card .task-km-dropdown {
    z-index: 1000 !important;
}
.btn-km-dots {
    display: inline-flex !important;
}

/* PATCH_36: qp fullscreen */
#quick-print-modal .modal-wide {
    max-width: none !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
#quick-print-modal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}
@media (max-width: 700px) {
    #quick-print-modal .quick-print-tabs {
        flex-wrap: wrap;
    }
}

/* PATCH_37: modal above card */
.modal-bg,
.modal-bg .modal,
#quick-print-modal,
#quick-print-modal .modal-wide,
#label-modal,
#columns-modal,
#pwd-modal,
#channel-modal,
#moves-modal,
#set-assembly-modal,
#row-menu,
#row-input,
#sort-modal,
.modal-bg .modal-tall {
    z-index: 10000 !important;
}

/* PATCH_40: qty 7ch */
.doc-line-input {
    width: 7ch !important;
    min-width: 7ch !important;
    max-width: 7ch !important;
    box-sizing: border-box;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    padding: 4px 4px;
}
@media (max-width: 480px) {
    .doc-line-input {
        font-size: 16px; /* без зума на iOS */
        width: 7ch !important;
        min-width: 7ch !important;
        max-width: 7ch !important;
    }
}

/* PATCH_42: search ux */
.doc-search-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 6px 10px !important;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    outline: none;
}
.doc-search-item:hover,
.doc-search-item.dss-focused {
    background: #f5f0ff;
}
.doc-search-item .dss-art {
    flex: 0 0 auto;
    min-width: 90px;
    font-family: ui-monospace, Consolas, monospace;
    font-weight: 600;
    color: #4a148c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.doc-search-item .dss-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-search-item .dss-stocks {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    font-size: 11px;
}
.doc-search-item .dss-rack {
    flex: 0 0 auto;
    min-width: 36px;
    text-align: center;
    font-family: ui-monospace, Consolas, monospace;
    font-weight: 600;
    color: #4a148c;
    background: #ede7f6;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
}
.doc-search-item .dss-rack:empty {
    background: transparent;
}
body.dark .doc-search-item { border-bottom-color: #333; }
body.dark .doc-search-item:hover,
body.dark .doc-search-item.dss-focused { background: #2a1e3a; }
body.dark .doc-search-item .dss-art { color: #c4a3f7; }
body.dark .doc-search-item .dss-name { color: #e0e0e0; }
body.dark .doc-search-item .dss-rack { background: #2a1e3a; color: #c4a3f7; }

/* PATCH_46: card zindex */
/* Карточка создаёт stacking context — её внутренние элементы не могут
   перекрыть шапку (topbar), даже если у них z-index: 9999 */
.task-card {
    position: relative !important;
    z-index: 1;
}
/* Шапка всегда сверху */
.topbar {
    z-index: 1000 !important;
}
/* Внутри карточки .btn-collect-wrap больше не «вырывается» */
.task-card .btn-collect-wrap {
    z-index: 10 !important;
}

/* PATCH_REPORTS_02C: matrix fixes */
#matrix-table .matrix-name {
    font-weight: 600;
    color: #222;
    vertical-align: top;
    padding: 8px 10px;
}
#matrix-table .matrix-toggle {
    display: inline-block;
    width: 16px;
    text-align: center;
    cursor: pointer;
    color: #6200ee;
    font-size: 11px;
    user-select: none;
    margin-right: 2px;
}
#matrix-table .matrix-toggle:hover { color: #4a00b8; }
#matrix-table .matrix-art-total-row {
    background: #f5f5f5;
    font-weight: 700;
}
#matrix-table .matrix-art-total-row td {
    border-top: 1px solid #ddd;
}
#matrix-table .matrix-art-total-label {
    text-align: right;
    color: #666;
    padding-right: 10px;
}
#matrix-table .matrix-total-collapsed {
    background: #f5f0ff;
}

body.dark #matrix-table .matrix-name { color: #e0e0e0; }
body.dark #matrix-table .matrix-toggle { color: #c4a3f7; }
body.dark #matrix-table .matrix-toggle:hover { color: #e8dcff; }
body.dark #matrix-table .matrix-art-total-row { background: #2a2a2a; }
body.dark #matrix-table .matrix-art-total-row td { border-top-color: #333; }
body.dark #matrix-table .matrix-art-total-label { color: #888; }
body.dark #matrix-table .matrix-total-collapsed { background: #2a1e3a; }

/* PATCH_REPORTS_02D: borders + cols menu */
#matrix-table {
    border-collapse: collapse;
}
#matrix-table th,
#matrix-table td {
    border: 1px solid #e5e5e5;
    padding: 6px 10px;
}
#matrix-table th {
    background: #fafafa;
    font-size: 12px;
    text-transform: none;
}
#matrix-table td.matrix-art {
    background: #fafafa;
    vertical-align: top;
    font-weight: 700;
    white-space: nowrap;
}
#matrix-table td.matrix-name {
    font-weight: 600;
    vertical-align: top;
    min-width: 180px;
    max-width: 320px;
    word-wrap: break-word;
}
#matrix-table td.matrix-size {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    color: #666;
    text-align: center;
    white-space: nowrap;
}
#matrix-table td.matrix-total {
    font-weight: 700;
    background: #f5f0ff;
}
#matrix-table td.matrix-cell {
    cursor: pointer;
    color: #6200ee;
    font-weight: 600;
}
#matrix-table td.matrix-cell:hover {
    background: #ede7f6;
}
#matrix-table td.matrix-cell-empty {
    color: #ccc;
}
#matrix-table tr.matrix-art-total-row td {
    background: #f0ebfa;
    border-top: 2px solid #d1c4e9;
    font-weight: 700;
}
#matrix-table tr.matrix-art-total-row td.matrix-art-total-label {
    text-align: right;
    color: #555;
    padding-right: 10px;
}

/* Меню колонок */
.report-cols-wrap {
    position: relative;
    display: inline-block;
}
.report-cols-popup {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    padding: 6px;
    min-width: 200px;
    z-index: 100;
}
.report-cols-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.report-cols-item:hover {
    background: #f5f0ff;
}
.report-cols-item input {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Тёмная тема */
body.dark #matrix-table th,
body.dark #matrix-table td {
    border-color: #333;
}
body.dark #matrix-table th {
    background: #1a1a1a;
    color: #aaa;
}
body.dark #matrix-table td.matrix-art {
    background: #252525;
}
body.dark #matrix-table td.matrix-total {
    background: #2a1e3a;
    color: #e0e0e0;
}
body.dark #matrix-table td.matrix-cell {
    color: #c4a3f7;
}
body.dark #matrix-table td.matrix-cell:hover {
    background: #2a1e3a;
}
body.dark #matrix-table tr.matrix-art-total-row td {
    background: #2a1e3a;
    border-top-color: #3a2850;
}
body.dark .report-cols-popup {
    background: #1e1e1e;
    border-color: #333;
}
body.dark .report-cols-item:hover {
    background: #2a1e3a;
}

/* PATCH_REPORTS_02E: resize */
#matrix-table th {
    position: relative;
    user-select: none;
}
#matrix-table th .th-resize {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 2;
}
#matrix-table th .th-resize:hover {
    background: rgba(98, 0, 238, 0.2);
}
body.dark #matrix-table th .th-resize:hover {
    background: rgba(124, 77, 255, 0.35);
}

/* Авто-ширина + прижатие влево */
#matrix-table {
    table-layout: auto;
    margin: 0;
    width: auto;
    min-width: 100%;
}
.report-table-wrap {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin-left: 0;
}

/* PATCH_REPORTS_02F: thick resize */
#matrix-table th {
    position: relative;
    user-select: none;
}
#matrix-table th .th-resize {
    position: absolute;
    top: 0;
    right: -5px;                /* центр полосы — на границе */
    width: 10px;                /* шире */
    height: 100%;
    cursor: col-resize !important;
    user-select: none;
    z-index: 5;
    background: transparent;
    transition: background 0.12s;
}
#matrix-table th .th-resize:hover,
#matrix-table th .th-resize:active {
    background: rgba(98, 0, 238, 0.35);
    box-shadow: -1px 0 0 #6200ee, 1px 0 0 #6200ee;
}
#matrix-table th .th-resize:active {
    background: rgba(98, 0, 238, 0.55);
}
/* При hover на handle — курсор col-resize на всей th */
#matrix-table th:has(.th-resize:hover) {
    cursor: col-resize;
}
/* Тёмная тема */
body.dark #matrix-table th .th-resize:hover,
body.dark #matrix-table th .th-resize:active {
    background: rgba(124, 77, 255, 0.45);
    box-shadow: -1px 0 0 #b794f6, 1px 0 0 #b794f6;
}

/* PATCH_REPORTS_02F: body cursor */
body.col-resizing,
body.col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}
#matrix-table th.th-resizing {
    background: rgba(98, 0, 238, 0.08);
}
body.dark #matrix-table th.th-resizing {
    background: rgba(124, 77, 255, 0.15);
}

/* PATCH_REPORTS_03B: summary style */
#summary-table {
    border-collapse: collapse;
}
#summary-table th,
#summary-table td {
    border: 1px solid #e5e5e5;
    padding: 6px 10px;
}
#summary-table th {
    background: #fafafa;
    font-size: 12px;
    text-transform: none;
}
#summary-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
#summary-table tr:hover td {
    background: #f5f0ff;
}
body.dark #summary-table th,
body.dark #summary-table td {
    border-color: #333;
}
body.dark #summary-table th {
    background: #1a1a1a;
    color: #aaa;
}
body.dark #summary-table tr:hover td {
    background: #2a1e3a;
}

/* PATCH_REPORTS_03C: chart */
#chart-block .report-chart-wrap {
    position: relative;
    padding: 10px 14px 14px;
}
.report-chart-svg {
    display: block;
    width: 100%;
    height: 200px;
    background: #fafafa;
    border-radius: 8px;
}
body.dark .report-chart-svg {
    background: #252525;
}
.report-chart-tooltip {
    position: absolute;
    background: #333;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.dark .report-chart-tooltip {
    background: #1e1e1e;
    border: 1px solid #444;
}

/* PATCH_REPORTS_04B: sales block */
.report-chart-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}
.report-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: #555;
}
.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.chart-legend-color {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}
body.dark .report-chart-legend {
    color: #aaa;
}
.report-cols-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    padding: 4px 10px;
    margin-top: 4px;
}

/* PATCH_08_REPORT: autowidth */
/* Таблицы — по содержимому, не растягиваются на всю ширину */
#matrix-table,
#summary-table {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    table-layout: auto !important;
    margin: 0 !important;   /* прижать влево */
}

/* Контейнер — не центрирует, скролл по горизонтали если нужно */
.report-table-wrap {
    text-align: left;
    display: block;
    overflow-x: auto;
    margin: 0;
}

/* Ячейки — не раздуваются */
#matrix-table th,
#matrix-table td,
#summary-table th,
#summary-table td {
    white-space: nowrap;    /* не переносим, чтобы ширина была «по контенту» */
}
#matrix-table td.matrix-name,
#matrix-table td.matrix-art {
    white-space: normal;    /* для длинных названий/артикулов — перенос */
    max-width: 320px;
    word-wrap: break-word;
}

/* Если пользователь расширил колонки — таблица может стать шире контейнера (скролл) */