/* INLINE CSS: css/app.css */

/* Custom select picker used by hidden native selects (mobile-safe). */
.custom-select-overlay {
    position: fixed;
    inset: 0;
    z-index: 10090;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(0,0,0,.28);
}
.custom-select-overlay.open { display: flex; }
.custom-select-box {
    width: min(420px, 100%);
    max-height: min(72vh, 620px);
    overflow: hidden;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 16px 45px rgba(0,0,0,.28);
    display: flex;
    flex-direction: column;
}
.custom-select-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.custom-select-header h3 { margin: 0; flex: 1; font-size: 16px; }
.custom-select-header .overlay-x { flex: 0 0 auto; }
.custom-select-box .custom-select-list {
    padding: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* === Professional SVG icons === */

.side-drawer-actions button .mb-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-right: 10px;
}
.side-drawer-actions button {
    overflow: visible;
    white-space: normal;
}
.tab-btn .mb-icon, .subtab-btn .mb-icon {
    width: 14px;
    height: 14px;
    min-width: 14px;
}

.mb-icon {
    display: inline-block;
    vertical-align: -0.2em;
    flex-shrink: 0;
    pointer-events: none;
}
.tab-btn .mb-icon,
.subtab-btn .mb-icon { margin-right: 4px; }
.side-drawer-actions button .mb-icon { margin-right: 10px; }
.tab-btn, .subtab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.side-drawer-actions button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.drawer-toggle-btn .mb-icon,
.search-submit-btn .mb-icon,
.overlay-x .mb-icon,
.side-drawer-close .mb-icon,
.mb-icon-only .mb-icon { margin: 0 !important; }
.orders-small-btn, .btn-main, .ttk-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}


/* ==========================================
   ГЛОБАЛЬНЫЙ ФИКС: убираем синюю подсветку тапа
   и лишнюю задержку/двойной тап после свайпа
   ========================================== */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
button, a, [onclick], .side-drawer-actions button,
.drawer-toggle-btn, .calc-btn, .side-drawer-close,
.overlay-x, .btn-main, .theme-option-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* ==========================================
   СЕКТОР 1: CSS СТИЛИ И ТЕМЫ
   ========================================== */

/* --- 1.1 Переменные и Цветовые темы (только светлая и тёмная) --- */
:root { 
    --primary: #007bff; 
    --primary-rgb: 0, 123, 255;
    --success: #28a745; 
    --danger: #dc3545; 
    --bg: #f4f7f6; 
    --text: #2d3436; 
    --card: #ffffff; 
    --border: #dfe6e9; 
    --accent-bg: rgba(0, 123, 255, 0.05);
    --search-bar-bg: #ffffff;
    --search-bar-border: #dfe6e9;
    --drawer-bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4f7f6;
}

[data-theme="dark"] { 
    --primary: #3b82f6;
    --primary-rgb: 59, 130, 246;
    --success: #22c55e; 
    --danger: #ef4444; 
    --bg: #1e272e; 
    --text: #d2dae2; 
    --card: #2f3640; 
    --border: #57606f; 
    --accent-bg: rgba(59, 130, 246, 0.15);
    --search-bar-bg: #2f3640;
    --search-bar-border: #57606f;
    --drawer-bg: #2a323c;
    --surface: #2f3640;
    --surface-2: #252c33;
}

/* Глобальные переходы */
body, .app-wrapper, .container, .tab-content, button, input {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body { 
    font-family: 'Segoe UI', system-ui, sans-serif; 
    background-color: #f4f7f6;
    background-color: var(--bg);
    color: #2d3436;
    color: var(--text);
    margin: 0; 
    padding: 15px; 
}

/* --- 1.2 Каркас приложения (Шапка, Поиск, Вкладки) --- */
.app-wrapper { 
    max-width: 850px; 
    margin: 0 auto; 
}

.header { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    margin: 0 auto 10px; 
}

.header-title-row { 
    display: flex; 
    align-items: center; 
    justify-content: flex-start; 
    gap: 8px; 
    width: 100%; 
    min-height: 34px;
}

/* Undo/Redo — как на референсе: тёмная «клавиша», изогнутая стрелка */
.header-history-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 34px;
    padding: 0;
    margin: 0;
    border: 1.5px solid rgba(140, 120, 200, 0.45);
    border-radius: 11px;
    background: linear-gradient(180deg, #3d4258 0%, #2b3044 55%, #252a3c 100%);
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: inherit;
}
.header-history-btn svg {
    width: 22px;
    height: 22px;
    display: block;
    pointer-events: none;
}
.header-history-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.header-history-btn:disabled {
    opacity: 0.42;
    cursor: default;
}
[data-theme="dark"] .header-history-btn {
    border-color: rgba(160, 140, 220, 0.4);
    background: linear-gradient(180deg, #3a3f55 0%, #282d40 55%, #1f2435 100%);
}

.header-status-cluster {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 58%;
    flex: 1 1 auto;
    justify-content: flex-end;
    height: 34px;
}
.header-net-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin: 0;
    align-self: center;
    background: var(--danger);
    transition: background-color 0.3s ease;
}
.header-net-dot.net-online { background: var(--success); }
.header-net-dot.net-pending { background: #f0ad4e; }
.header-status-user {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
}
.header-status-clock {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    line-height: 1.2;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
}

.header-title-row h1 { 
    margin: 0; 
    padding: 0;
    flex: 0 0 auto; 
    height: 34px;
    font-size: 18px; 
    font-weight: 700; 
    line-height: 34px;
    opacity: 0.92;
    display: inline-flex;
    align-items: center;
}

.global-search-bar,
form.global-search-bar {
    display: flex; 
    align-items: center; 
    gap: 4px;
    background: #ffffff;
    background: var(--search-bar-bg);
    border: 1px solid #dfe6e9;
    border: 1px solid var(--search-bar-border);
    border-radius: 28px; 
    padding: 4px 8px 4px 4px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    position: relative; 
    width: 100%; 
    box-sizing: border-box;
}

.drawer-toggle-btn, 
.search-submit-btn {
    width: 44px; 
    height: 44px; 
    border: none; 
    background: transparent; 
    color: #2d3436;
    color: var(--text);
    border-radius: 50%; 
    font-size: 22px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0;
}

.search-submit-btn { 
    width: 40px; 
    height: 40px; 
    font-size: 18px; 
    opacity: 0.7; 
}

#global-search-input {
    flex: 1; 
    min-width: 0; 
    border: none; 
    background: transparent; 
    color: #2d3436;
    color: var(--text);
    font-size: 15px; 
    outline: none; 
    padding: 10px 6px;
}

.tabs { 
    display: flex; 
    background: #dfe6e9;
    background: var(--border);
    border-radius: 12px; 
    padding: 4px; 
    gap: 4px; 
    overflow-x: auto; 
    margin-bottom: 12px; 
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
}

.tabs::-webkit-scrollbar { 
    display: none; 
}

.tab-btn { 
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    padding: 10px 4px; 
    border: none; 
    background: none; 
    color: #2d3436;
    color: var(--text);
    font-weight: 700; 
    cursor: pointer; 
    border-radius: 8px; 
    font-size: 12px; 
    line-height: 1.2;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    box-sizing: border-box;
}

.tab-btn.active { 
    background: #007bff;
    background: var(--primary);
    color: white; 
}

@media (max-width: 400px) {
    .tab-btn {
        font-size: 11px;
        padding: 9px 2px;
    }
}

.container { 
    background: #ffffff;
    background: var(--card);
    padding: 20px; 
    border-radius: 15px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    min-height: 400px; 
}

.tab-content { 
    display: none; 
} 

.tab-content.active { 
    display: block; 
    animation: fadeInTab 0.25s ease; 
}

/* Пока не восстановили реальную последнюю вкладку — прячем даже ту, что
   помечена active в разметке по умолчанию (drinks), иначе виден "прыжок". */
body.tabs-loading .tab-content.active {
    display: none;
}
/* То же самое для режима навигации (кнопки сверху / правая шторка) —
   по умолчанию в разметке зашита шторка; если у пользователя сохранён
   режим "кнопки сверху", без этого правила будет видна шторка на миг
   раньше, чем JS определит и применит его настоящий выбор. */
body.tabs-loading .tabs,
body.tabs-loading .tabs-drawer-toggle-btn {
    visibility: hidden;
}

/* Пока Auth/Firestore не сообщили права аккаунта, меню не показываем.
   Иначе на первом кадре остаются только общие кнопки "Журнал" и "Выйти". */
body.account-ui-loading #side-drawer .side-drawer-actions,
body.account-ui-loading #side-drawer .side-drawer-version {
    visibility: hidden !important;
}
body.account-ui-loading #side-drawer {
    visibility: hidden !important;
}
body.account-ui-loading .header-status-cluster {
    visibility: hidden !important;
}

@keyframes fadeInTab { 
    from { opacity: 0; transform: translateY(6px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* Заглушка разработки */
.under-construction { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    padding: 40px 20px; 
    opacity: 0.7; 
}

.under-construction span { 
    font-size: 48px; 
    margin-bottom: 15px; 
}

/* --- ТТК --- */
.ttk-toolbar-card { padding: 12px !important; }
.ttk-toolbar {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 10px;
}
.ttk-search-form {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: stretch;
}
.ttk-search-form .drinks-search-input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    margin: 0;
    border-radius: 10px;
}
.ttk-add-btn {
    flex: 0 0 auto;
    align-self: stretch;
    white-space: nowrap;
    height: 42px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
}
.ttk-list { display: flex; flex-direction: column; gap: 8px; }
.ttk-empty {
    text-align: center;
    opacity: 0.6;
    padding: 28px 12px;
    font-size: 14px;
}
.ttk-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg, var(--card));
    padding: 10px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ttk-card.is-open {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--accent-bg, rgba(124, 58, 237, 0.15));
}
.ttk-card-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}
.ttk-card-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
}
.ttk-card-meta {
    font-size: 11px;
    opacity: 0.65;
    margin-top: 2px;
}
.ttk-card-actions {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}
.ttk-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg, transparent);
    color: inherit;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ttk-icon-btn:active { opacity: 0.75; }
.ttk-card-body {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: 13px;
}
.ttk-card.is-open .ttk-card-body { display: block; }
.ttk-ings-view {
    margin: 0 0 8px;
    padding-left: 18px;
}
.ttk-ings-view li { margin: 2px 0; }
.ttk-tech-view, .ttk-notes-view {
    white-space: pre-wrap;
    line-height: 1.4;
    opacity: 0.9;
    margin: 6px 0 0;
}
.ttk-section-label {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 8px 0 4px;
}
.ttk-ings { display: flex; flex-direction: column; gap: 6px; }
.ttk-ings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.ttk-ing-row {
    display: grid;
    grid-template-columns: 1fr 72px 64px 32px;
    gap: 6px;
    align-items: center;
}
.ttk-ing-row input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: inherit;
    font: inherit;
    font-size: 13px;
}
.ttk-ing-del {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.ttk-yield-row {
    display: flex;
    gap: 6px;
}
.ttk-yield-row input {
    flex: 1;
    min-width: 0;
}

/* Кнопки модалки ТТК */
#ttk-overlay .overlay-box { max-width: 390px; max-height: 78vh; }
#ttk-overlay .ttk-modal-footer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border);
}
#ttk-overlay .ttk-modal-footer .ttk-btn-cancel,
#ttk-overlay .ttk-modal-footer .ttk-btn-save {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}
#ttk-overlay .ttk-modal-footer .ttk-btn-cancel {
    background: transparent;
    border: 1.5px solid var(--border);
    color: inherit;
}
#ttk-overlay .ttk-modal-footer .ttk-btn-save {
    background: var(--primary);
    border: 1.5px solid var(--primary);
    color: #fff;
}

/* --- 1.3 Боковая Шторка (Drawer) --- */
.drawer-edge-zone { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 28px; 
    height: 100%; 
    z-index: 850; 
    touch-action: pan-y; 
}

.drawer-overlay { 
    position: fixed; 
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; 
    background: rgba(0,0,0,0.45); 
    z-index: 9000; 
    opacity: 0; 
    visibility: hidden; 
    transition: 0.3s; 
}

.drawer-overlay.open { 
    opacity: 1; 
    visibility: visible; 
}

.side-drawer {
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: 69vw;
    max-width: 256px; 
    background: #ffffff;
    background: var(--drawer-bg);
    color: #2d3436;
    color: var(--text);
    z-index: 9010; 
    transform: translateX(-105%); 
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.2); 
    display: flex; 
    flex-direction: column; 
    touch-action: pan-y;
}

.side-drawer.open { 
    transform: translateX(0); 
}

.side-drawer.dragging { 
    transition: none !important; 
}

body.drawer-open { 
    overflow: hidden; 
}

body.modal-open {
    overflow: hidden;
}

.side-drawer-grip { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 22px; 
    height: 100%; 
    z-index: 5; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.side-drawer-grip::after { 
    content: ''; 
    width: 4px; 
    height: 40px; 
    border-radius: 4px; 
    background: #dfe6e9;
    background: var(--border);
    opacity: 0.85; 
}

.side-drawer-inner { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    padding: 20px 14px; 
    box-sizing: border-box; 
}

.side-drawer-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
}

.side-drawer-header h2 { 
    margin: 0; 
    font-size: 18px; 
}

.side-drawer-close { 
    background: #dfe6e9;
    background: var(--border);
    color: #2d3436;
    color: var(--text);
    border: none; 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    font-size: 16px; 
    cursor: pointer; 
}

.side-drawer-actions button { 
    width: 100%; 
    text-align: left; 
    padding: 14px 16px; 
    border-radius: 12px; 
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    background: #ffffff;
    background: var(--card);
    color: #2d3436;
    color: var(--text);
    font-size: 15px; 
    font-weight: 700; 
    cursor: pointer; 
    margin-bottom: 8px; 
}

/* Правая шторка (разделы) — уже левой, чтобы слева было видно экран */
.side-drawer-right {
    left: auto;
    right: 0;
    width: 32vw;
    max-width: 130px;
    min-width: 118px;
    transform: translateX(105%);
    box-shadow: -4px 0 24px rgba(0,0,0,0.2);
}
.side-drawer-right.open {
    transform: translateX(0);
    touch-action: pan-y;
}
.side-drawer-right .side-drawer-grip {
    left: 0;
    right: auto;
    width: 22px;
}
.side-drawer-right .side-drawer-grip::after {
    height: 48px;
    width: 4px;
}
.side-drawer-right .side-drawer-inner {
    padding: 16px 12px;
}
.side-drawer-right .side-drawer-header h2 {
    font-size: 16px;
}
.side-drawer-right .side-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.side-drawer-right .side-drawer-actions button,
.side-drawer-right .side-drawer-actions button.tabs-drawer-btn {
    width: 100%;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    letter-spacing: 0.01em;
}
/* Затемнение слабее — контент раздела читается слева */
#tabs-drawer-overlay.open {
    background: rgba(0,0,0,0.28);
}
.side-drawer-actions button.tabs-drawer-btn.active {
    border-color: var(--primary);
    background: var(--accent-bg);
    color: var(--primary);
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.25);
}
/* Режим навигации: bar = нижняя навигация, drawer = правая шторка */
body.nav-tabs-drawer .tabs {
    display: none !important;
}
body.nav-tabs-bar .tabs-drawer-toggle-btn {
    display: none !important;
}
body.nav-tabs-bar .drawer-edge-zone-right {
    display: none !important;
    pointer-events: none !important;
}




/* Фасовка + единица в одну строку */
.orders-add-vol-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
.orders-add-vol-row #orders-add-volume {
    flex: 1 1 auto;
    min-width: 0;
}
.orders-add-unit-wrap {
    position: relative;
    flex: 0 0 72px;
    width: 72px;
    min-width: 72px;
    max-width: 88px;
    z-index: 5;
}
.orders-add-vol-row .orders-add-unit-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    color: var(--text);
}
.orders-add-vol-row .orders-add-unit-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.orders-add-vol-row .orders-add-unit-btn:after {
    content: '';
    width: 12px; height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.45;
    flex: 0 0 auto;
    transition: transform .2s ease;
}
.orders-add-vol-row .orders-add-unit-btn.is-open:after {
    transform: rotate(180deg);
}
/* Выезжающая «дорожка» единиц — fixed, чтобы не резало overflow модалки */
#mb-unit-drop-track,
.orders-add-unit-drop {
    position: fixed;
    min-width: 72px;
    width: 72px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    border-radius: 10px;
    border: 1.5px solid var(--primary, #0984e3);
    background: var(--card, #fff);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    box-sizing: border-box;
    z-index: 10070;
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* old Edge */
}
#mb-unit-drop-track::-webkit-scrollbar,
.orders-add-unit-drop::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
#mb-unit-drop-track[hidden],
.orders-add-unit-drop[hidden] { display: none !important; }
#mb-unit-drop-track .orders-add-unit-drop-item,
.orders-add-unit-drop-item {
    display: block;
    width: 100%;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 9px 4px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#mb-unit-drop-track .orders-add-unit-drop-item:active,
#mb-unit-drop-track .orders-add-unit-drop-item.is-current,
.orders-add-unit-drop-item:active,
.orders-add-unit-drop-item.is-current {
    background: rgba(var(--primary-rgb), 0.14);
    color: var(--primary);
}


/* Supplier picker in add-item form — same look as text fields */
#orders-add-panel .orders-add-supplier-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    opacity: 0.85;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}
#orders-add-panel .orders-add-supplier-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
#orders-add-panel .orders-add-supplier-btn:after {
    content: '';
    width: 13px; height: 13px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.45;
    flex: 0 0 auto;
    margin-left: 8px;
    font-size: 12px;
}
#orders-add-panel .orders-add-supplier-btn.has-value {
    opacity: 1;
}
#orders-add-panel .orders-text-input {
    margin-bottom: 0;
}
#orders-add-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#orders-add-price.orders-text-input {
    /* same as siblings — avoid qty-style white card look */
    background: var(--bg);
}


.orders-add-half-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
.orders-add-half-row > .orders-text-input,
.orders-add-half-row > .orders-add-cat-wrap {
    flex: 1 1 0;
    min-width: 0;
}
.orders-add-half-row.orders-add-vol-row > #orders-add-volume {
    flex: 1 1 auto;
}
.orders-add-half-row.orders-add-vol-row > .orders-add-unit-wrap {
    flex: 0 0 72px;
}
.orders-add-cat-wrap {
    position: relative;
}
.orders-add-category-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    max-height: 160px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1.5px solid var(--primary, #0984e3);
    background: var(--card, #fff);
    color: var(--text);
    box-shadow: 0 8px 20px rgba(0,0,0,0.16);
    padding: 4px;
    box-sizing: border-box;
}
.orders-add-category-suggest[hidden] { display: none !important; }
.orders-add-category-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.orders-add-category-suggest-item:active {
    background: rgba(var(--primary-rgb), 0.14);
    color: var(--primary);
}
.orders-add-rest-block {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    background: var(--bg, transparent);
}
.orders-add-rest-title {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.75;
    margin-bottom: 8px;
}
.orders-add-rest-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 140px;
    overflow-y: auto;
}
.orders-add-rest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.orders-add-rest-item input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    flex-shrink: 0;
}
.orders-add-rest-empty {
    font-size: 12px;
    opacity: 0.6;
}


.orders-add-name-row .orders-text-input { flex: 1 1 auto; min-width: 0; }
.orders-add-cat-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
}
.orders-add-price-vol-row > #orders-add-price {
    flex: 1 1 0;
    min-width: 0;
}
.orders-add-price-vol-row > #orders-add-volume {
    flex: 1 1 0;
    min-width: 0;
}
.orders-add-price-vol-row > .orders-add-unit-wrap {
    flex: 0 0 64px;
}
.orders-cat-manager {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    background: var(--bg, transparent);
}
.orders-cat-manager[hidden] { display: none !important; }
.orders-cat-manager-title {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.75;
    margin-bottom: 8px;
}
.orders-cat-manager-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
}
.orders-cat-manager-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.orders-cat-manager-row .orders-text-input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    padding: 8px 10px;
}
.orders-cat-manager-row .orders-small-btn {
    flex: 0 0 auto;
    padding: 6px 8px;
}


/* Каталог заказа: скролл при раскрытых секциях */
#orders-admin-overlay.settings-overlay {
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#orders-admin-overlay .overlay-box {
    display: flex !important;
    flex-direction: column !important;
    max-height: min(90vh, 92dvh) !important;
    height: auto;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100%;
}
#orders-admin-overlay .overlay-header {
    flex: 0 0 auto !important;
}
#orders-admin-overlay .overlay-body.orders-admin-body,
#orders-admin-overlay .orders-admin-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
#orders-admin-overlay .overlay-actions {
    flex: 0 0 auto !important;
}
#orders-admin-overlay .orders-admin-section {
    flex-shrink: 0;
}
#orders-admin-overlay .orders-minimums-list,
#orders-admin-overlay .orders-cat-manager-list,
#orders-admin-overlay .orders-add-rest-list {
    max-height: 180px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* === Orders admin catalog: collapsible sections === */
.orders-admin-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px !important;
}
.orders-admin-section {
    border: 1.5px solid var(--primary);
    border-radius: 14px;
    background: var(--accent-bg);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.orders-admin-section:not(.is-collapsed) {
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.2);
    background: var(--card);
}
.orders-admin-sec-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: none;
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.orders-admin-sec-title {
    flex: 1;
    min-width: 0;
}
.orders-admin-sec-chevron {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
    opacity: 0.85;
    transition: transform 0.2s ease;
}
.orders-admin-section.is-collapsed .orders-admin-sec-chevron {
    transform: rotate(-90deg);
}
.orders-admin-sec-body {
    padding: 0 12px 12px;
    display: block;
}
.orders-admin-section.is-collapsed .orders-admin-sec-body {
    display: none;
}
.orders-admin-sec-body .orders-min-add {
    margin-bottom: 8px;
}
.orders-admin-sec-body .orders-minimums-list {
    margin-bottom: 0;
}


.orders-min-add {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    margin: 10px 0 8px;
}
.orders-min-add #orders-new-supplier-name,
.orders-min-add .orders-text-input {
    flex: 1 1 auto;
    min-width: 0;
}
.orders-min-add .orders-new-supplier-min,
.orders-min-add #orders-new-supplier-min {
    flex: 0 0 auto;
    width: 96px;
    min-width: 96px;
    max-width: 110px;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
}
.orders-min-add .orders-small-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* === Bottom tab bar (Yandex Market style) — mode: nav-tabs-bar === */
body.nav-tabs-bar {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}
body.nav-tabs-bar .tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8000;
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    margin: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    border-radius: 0;
    border-top: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    overflow: visible;
    -webkit-overflow-scrolling: auto;
}
[data-theme="dark"] body.nav-tabs-bar .tabs,
[data-theme="dark-purple"] body.nav-tabs-bar .tabs {
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}
body.nav-tabs-bar .tab-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px 4px;
    margin: 0;
    border: none;
    border-radius: 12px;
    background: transparent !important;
    color: var(--text);
    opacity: 0.55;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}
body.nav-tabs-bar .tab-btn .mb-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    margin: 0 !important;
    display: block;
}
body.nav-tabs-bar .tab-btn.active {
    opacity: 1;
    color: var(--primary);
    background: transparent !important;
    font-weight: 700;
}
body.nav-tabs-bar .tab-btn:active {
    opacity: 0.85;
    transform: scale(0.96);
}
/* Hide top margin that was for top tabs */
body.nav-tabs-bar .header {
    margin-bottom: 8px;
}
/* When drawer mode — keep original top tabs hidden (already) */

.tabs-drawer-toggle-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.drawer-edge-zone-right {
    position: fixed;
    top: 0;
    right: 0;
    width: 18px;
    height: 100%;
    z-index: 8990;
    pointer-events: auto;
    touch-action: none; /* только для открытия шторки, не для скролла/свайпа списка */
}
body.drawer-open .drawer-edge-zone-right {
    pointer-events: none;
}
/* когда правая шторка открыта — edge-зоны не мешают; оверлей блокирует список */
body.tabs-drawer-open .drawer-edge-zone,
body.tabs-drawer-open .drawer-edge-zone-right {
    pointer-events: none;
}
body.tabs-drawer-open #orders-list,
body.tabs-drawer-open .tab-content.active {
    pointer-events: none;
}
body.tabs-drawer-open #tabs-drawer,
body.tabs-drawer-open #tabs-drawer-overlay {
    pointer-events: auto;
}

/* --- 1.4 Модальные окна (Выбор темы) --- */
.theme-option-btn { 
    display: flex; 
    align-items: center; 
    gap: 14px; 
    width: 100%; 
    padding: 16px; 
    margin-bottom: 10px; 
    border-radius: 14px; 
    border: 2px solid #dfe6e9;
    border: 2px solid var(--border);
    background: #f4f7f6;
    background: var(--bg);
    color: #2d3436;
    color: var(--text);
    font-weight: 700; 
    cursor: pointer; 
    text-align: left;
}

.theme-option-btn.active { 
    border-color: #007bff;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.05);
    box-shadow: 0 0 0 2px var(--accent-bg);
}

.theme-option-swatch { 
    width: 40px; 
    height: 40px; 
    border-radius: 10px; 
}

.theme-option-swatch.dark { 
    background: linear-gradient(135deg, #1e272e 50%, #3b82f6 50%); 
}

.theme-option-swatch.light { 
    background: linear-gradient(135deg, #f4f7f6 50%, #007bff 50%); 
}

.theme-picker-cancel { 
    width: 100%; 
    padding: 14px; 
    border: none; 
    border-radius: 12px; 
    background: #dfe6e9;
    background: var(--border);
    color: #2d3436;
    color: var(--text);
    font-weight: 700; 
    cursor: pointer; 
    margin-top: 5px;
}

/* --- 1.5 Модальное окно «Об обновлении» --- */
.about-version {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #dfe6e9;
    border-bottom: 1px solid var(--border);
}
.about-version:last-of-type {
    border-bottom: none;
    margin-bottom: 8px;
}
.about-version-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 2px;
    color: #007bff;
    color: var(--primary);
}
.about-version-title.current {
    color: #007bff;
    color: var(--primary);
}
.about-version-date {
    font-size: 12px;
    opacity: 0.65;
    margin-bottom: 8px;
}
.about-version-list {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.9;
}
.about-version-list li {
    margin-bottom: 4px;
}
.about-close-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: #007bff;
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    margin-top: 10px;
}

/* --- Журнал изменений --- */
.activity-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #dfe6e9;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.activity-log-header h3 {
    margin: 0;
    font-size: 18px;
}
.activity-log-x {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.7;
    color: #2d3436;
    color: var(--text);
    padding: 4px 8px;
    line-height: 1;
}
.activity-log-list {
    padding: 14px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    font-size: 13px;
}
.activity-log-empty {
    text-align: center;
    padding: 28px 12px;
    opacity: 0.65;
}
.activity-log-entry {
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: #f4f7f6;
    background: var(--bg);
}
.activity-log-entry-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.activity-log-entry-ctx {
    color: #dc3545;
    color: var(--danger);
    font-weight: 700;
}
.activity-log-entry-time {
    opacity: 0.75;
    font-size: 12px;
}
.activity-log-entry-msg {
    font-weight: 600;
}
.activity-log-entry-stack {
    margin: 8px 0 0;
    padding: 8px;
    background: #ffffff;
    background: var(--card);
    border-radius: 8px;
    font-size: 11px;
    overflow: auto;
    max-height: 120px;
    white-space: pre-wrap;
    word-break: break-word;
}
.activity-log-actions {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.activity-log-btn {
    flex: 1;
    min-width: 100px;
    padding: 12px 10px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.activity-log-btn.primary {
    background: #007bff;
    background: var(--primary);
    color: #fff;
}
.activity-log-btn.secondary {
    background: #dfe6e9;
    background: var(--border);
    color: #2d3436;
    color: var(--text);
}
.activity-log-btn.danger {
    background: #dc3545;
    background: var(--danger);
    color: #fff;
}

/* --- 1.7 Модальное окно «Контакты» --- */
.contacts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #dfe6e9;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.contacts-header h3 {
    margin: 0;
    font-size: 18px;
}
.contacts-x {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.7;
    color: #2d3436;
    color: var(--text);
    padding: 4px 8px;
    line-height: 1;
}
form.contacts-form,
.contacts-form {
    padding: 12px 18px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.contacts-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f4f7f6;
    background: var(--bg);
    color: #2d3436;
    color: var(--text);
    font-size: 15px;
    outline: none;
}
.contacts-form input:focus {
    border-color: #007bff;
    border-color: var(--primary);
}
.contacts-list {
    padding: 8px 18px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    font-size: 14px;
}
.contacts-empty {
    text-align: center;
    padding: 24px 12px;
    opacity: 0.65;
}
.contacts-item {
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #f4f7f6;
    background: var(--bg);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.contacts-item-info {
    flex: 1;
    min-width: 0;
}
.contacts-item-name {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 2px;
}
.contacts-item-phone {
    opacity: 0.85;
    font-size: 14px;
}
.contacts-item-note {
    opacity: 0.65;
    font-size: 13px;
    margin-top: 4px;
}
.contacts-item-del {
    background: none;
    border: none;
    color: #dc3545;
    color: var(--danger);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 6px;
    flex-shrink: 0;
    opacity: 0.8;
}
.contacts-actions {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.contacts-btn {
    flex: 1;
    min-width: 100px;
    padding: 12px 10px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.contacts-btn.primary {
    background: #007bff;
    background: var(--primary);
    color: #fff;
}
.contacts-btn.secondary {
    background: #dfe6e9;
    background: var(--border);
    color: #2d3436;
    color: var(--text);
}
.contacts-btn.danger {
    background: #dc3545;
    background: var(--danger);
    color: #fff;
}

/* Телефон в контактах — кликабельный */
.contacts-item-phone {
    display: inline-block;
    color: #007bff;
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    opacity: 0.95;
}
.contacts-item-phone:active,
.contacts-item-phone:hover {
    text-decoration: underline;
    opacity: 1;
}

/* Версия приложения внизу шторки */
.side-drawer-version {
    margin-top: auto;
    padding: 16px 4px 8px;
    text-align: center;
    font-size: 11px;
    opacity: 0.45;
    letter-spacing: 0.02em;
    user-select: none;
}

/* Toast */
.toast-host {
    position: fixed;
    left: 50%;
    top: 16px;
    bottom: auto;
    transform: translateX(-50%);
    z-index: 30000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 90vw; max-width: 360px;
    pointer-events: none;
}
.toast {
    background: #ffffff;
    background: var(--card);
    color: #2d3436;
    color: var(--text);
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    text-align: center;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { border-color: var(--success); }
.toast-error { border-color: var(--danger); }
.toast-warning { border-color: #f59e0b; }
.toast-info { border-color: var(--primary); }

/* Confirm modal */
.confirm-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 9600;
    background: rgba(0,0,0,0.55);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.confirm-overlay.open { display: flex; }
.confirm-box {
    background: #ffffff;
    background: var(--card);
    color: #2d3436;
    color: var(--text);
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 18px 16px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.confirm-box h3 { margin: 0 0 10px; font-size: 17px; text-align: center; }
.confirm-box p { margin: 0 0 18px; font-size: 14px; text-align: center; opacity: 0.9; line-height: 1.45; }
.confirm-actions { display: flex; gap: 8px; }
.confirm-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.confirm-btn.primary { background: var(--primary); color: #fff; }
.confirm-btn.secondary { background: var(--border); color: var(--text); }

/* Search results dropdown */
.global-search-results {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 80;
    background: #ffffff;
    background: var(--card);
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 14px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
.search-result-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border: none;
    border-bottom: 1px solid #dfe6e9;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: #2d3436;
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--accent-bg); }
.search-result-title { font-weight: 700; }
.search-result-sub { font-size: 12px; opacity: 0.7; margin-top: 2px; }
.search-result-empty { padding: 16px; text-align: center; opacity: 0.65; font-size: 14px; }

/* Подсветка из поиска: явный мигающий контур (~2.4 сек) */
@keyframes mb-flash-pulse {
    0%, 100% {
        outline-color: transparent;
        box-shadow: 0 0 0 0 transparent;
        background-color: transparent;
    }
    20%, 45%, 70% {
        outline-color: rgba(var(--primary-rgb), 1);
        box-shadow:
            0 0 0 3px rgba(var(--primary-rgb), 0.55),
            0 0 18px 2px rgba(var(--primary-rgb), 0.45);
        background-color: rgba(var(--primary-rgb), 0.18);
    }
    32%, 57%, 85% {
        outline-color: rgba(var(--primary-rgb), 0.35);
        box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.25);
        background-color: rgba(var(--primary-rgb), 0.06);
    }
}
@keyframes mb-flash-pulse-dark {
    0%, 100% {
        outline-color: transparent;
        box-shadow: 0 0 0 0 transparent;
        background-color: transparent;
    }
    20%, 45%, 70% {
        outline-color: rgba(var(--primary-rgb), 1);
        box-shadow:
            0 0 0 3px rgba(var(--primary-rgb), 0.7),
            0 0 22px 3px rgba(var(--primary-rgb), 0.55);
        background-color: rgba(var(--primary-rgb), 0.28);
    }
    32%, 57%, 85% {
        outline-color: rgba(var(--primary-rgb), 0.4);
        box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.3);
        background-color: rgba(var(--primary-rgb), 0.1);
    }
}
.mb-flash-highlight {
    border-radius: 12px !important;
    outline: 3px solid transparent !important;
    outline-offset: 2px !important;
    animation: mb-flash-pulse 0.8s ease-in-out 3 !important;
    position: relative;
    z-index: 5;
}
[data-theme="dark"] .mb-flash-highlight,
[data-theme="dark-purple"] .mb-flash-highlight {
    animation-name: mb-flash-pulse-dark !important;
}

/* --- Напитки: каркас --- */
.drinks-search-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f4f7f6;
    background: var(--bg);
    color: #2d3436;
    color: var(--text);
    font-size: 15px;
    outline: none;
}
.drinks-search-input:focus {
    border-color: #007bff;
    border-color: var(--primary);
}

.subtab-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    background: #dfe6e9;
    background: var(--border);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 14px;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}
.subtab-btn {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 4px;
    border: none;
    background: transparent;
    color: #2d3436;
    color: var(--text);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    display: block;
}
.subtab-btn.active {
    background: #ffffff;
    background: var(--card);
    color: #007bff;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
@media (max-width: 380px) {
    .subtab-btn {
        font-size: 11px;
        padding: 7px 2px;
    }
}

.drinks-sub-content { display: none; }
.drinks-sub-content.active { display: block; animation: fadeInTab 0.25s ease; }

.drinks-card {
    background: #f4f7f6;
    background: var(--bg);
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}
.drinks-card-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 12px;
}

/* ==== Редизайн карточки коктейля/лимонада под референс-скриншот ==== */
.recipe-card-title-blue {
    color: var(--primary);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-delete-large {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 1.5px solid var(--border, #dfe6e9) !important;
    border-radius: 12px;
    background: var(--card, #ffffff) !important;
    color: var(--text, #2d3436) !important;
    font-size: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.btn-delete-large svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
    flex-shrink: 0;
    margin: 0 !important;
    opacity: 0.85;
}
.btn-delete-large:active {
    background: rgba(var(--primary-rgb), 0.10) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.btn-delete-large.btn-edit-large {
    background: var(--primary, #0984e3) !important;
    border-color: var(--primary, #0984e3) !important;
    color: #ffffff !important;
}
.btn-delete-large.btn-edit-large svg {
    stroke: #ffffff !important;
    opacity: 1;
}
/* Редактируемые количества в расчёте (не ТТК) */
.recipe-ing-amount-input {
    width: 72px;
    max-width: 30vw;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg, var(--card));
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    padding: 6px 8px;
    outline: none;
}
.recipe-ing-amount-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.18);
}
.recipe-ing-unit-lbl {
    font-weight: 700;
    font-size: 13px;
    opacity: 0.85;
    white-space: nowrap;
}
.recipe-ing-amount-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.recipe-calc-hint {
    margin-top: 8px;
    font-size: 11px;
    opacity: 0.55;
    font-weight: 600;
    line-height: 1.35;
}


.qty-row {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}
.qty-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-c-compact {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}
.qty-input-compact {
    width: 56px;
    height: 34px;
    text-align: center;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-weight: 700;
    font-size: 15px;
}
.premix-info-box {
    margin-top: 10px;
    background: var(--accent-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
}
.premix-info-box .premix-info-title {
    font-weight: 700;
    margin-bottom: 2px;
}
.recipe-card-title-green {
    color: var(--success);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.recipe-ing-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 12px;
    border-left: 3px solid var(--primary);
}
.recipe-ing-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
}
.recipe-ing-list li:last-child { border-bottom: none; }
.recipe-ing-name-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.recipe-ing-amount { font-weight: 700; white-space: nowrap; }
.ing-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 6px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.ing-badge.premix { background: var(--accent-bg); color: var(--primary); }
.ing-badge.serve { background: rgba(245, 166, 35, 0.16); color: #f5a623; }
.recipe-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}
.recipe-actions-grid .btn-recipe-add {
    background: var(--success);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}
.recipe-actions-grid .btn-recipe-edit {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}
.drinks-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    opacity: 0.9;
}
.select-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.select-large {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #ffffff;
    background: var(--card);
    color: #2d3436;
    color: var(--text);
    font-size: 15px;
}
.custom-select-trigger {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--text);
    font-size: 15px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}
.custom-select-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-trigger:after { content: ''; opacity: 0.6; flex: 0 0 auto; }
.custom-select-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
.custom-select-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.custom-select-option {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--text);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
.custom-select-option.active { border-color: var(--primary); background: var(--accent-bg); font-weight: 700; }
/* Статусы фильтра заказов — 2×2 */
.orders-filter-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 14px;
}
.orders-filter-status-grid .custom-select-option {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    word-break: break-word;
}
.select-large:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.mode-segmented-container {
    display: flex;
    gap: 4px;
    background: #dfe6e9;
    background: var(--border);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 14px;
}
.mode-segmented-btn {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    color: #2d3436;
    color: var(--text);
    font-weight: 700;
    font-size: 13px;
    border-radius: 9px;
    cursor: pointer;
}
.mode-segmented-btn.active {
    background: #007bff;
    background: var(--primary);
    color: #fff;
}

.qty-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    text-align: center;
}
.qty-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-c-compact {
    width: 40px;
    height: 40px;
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    background: var(--card);
    color: #2d3436;
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}
.qty-input-compact {
    width: 72px;
    height: 40px;
    text-align: center;
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    background: var(--card);
    color: #2d3436;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
}
.qty-input-compact:disabled {
    opacity: 0.65;
}

.recipe-res {
    min-height: 48px;
    font-size: 14px;
}
.drinks-empty-res {
    opacity: 0.6;
    text-align: center;
    padding: 16px 8px;
}

.wo-list { display: flex; flex-direction: column; }
.wo-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-bottom: 1px solid rgba(127,127,127,.12); }
.wo-item:last-child { border-bottom: 0; }
.wo-item-main { flex: 1; min-width: 0; }
.wo-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; }
.wo-item-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; font-size: 11px; opacity: .68; }
.wo-item-note { margin-top: 5px; font-size: 12px; opacity: .75; }
.wo-item-del { border: 0; background: transparent; color: #c62828; font-size: 17px; cursor: pointer; padding: 4px 6px; flex: 0 0 auto; }

/* Списания — компактный вид (вкладка занимала слишком много места на экране) */
#writeoffs .drinks-card { padding: 8px; margin-bottom: 6px; }
#writeoffs .drinks-card-title { font-size: 12px; margin-bottom: 6px; }
#writeoffs .task-form-grid { gap: 5px; }
#writeoffs .task-form-grid label { font-size: 10px; }
#writeoffs .task-form-grid input,
#writeoffs .task-form-grid select { padding: 6px; font-size: 12px; border-radius: 6px; }
#writeoffs .task-form-row { gap: 4px; }
#writeoffs .drinks-actions { gap: 5px; margin-top: 4px; }
#writeoffs .btn-main { padding: 7px 8px; font-size: 12px; min-width: 0; border-radius: 6px; }
#writeoffs .tasks-toolbar { gap: 4px; margin: 4px 0 6px; }
#writeoffs .tasks-toolbar input,
#writeoffs .tasks-toolbar select { padding: 5px; font-size: 12px; }
#writeoffs .orders-small-btn { padding: 4px 5px; font-size: 10px; }
#writeoffs .wo-item { padding: 5px 2px; gap: 5px; }
#writeoffs .wo-item-name { font-size: 12px; }
#writeoffs .wo-item-meta { font-size: 9px; gap: 3px; margin-top: 3px; }
#writeoffs .wo-item-note { font-size: 10px; margin-top: 3px; }
#writeoffs .wo-item-del { font-size: 13px; padding: 2px 3px; }
#writeoffs .task-chip { padding: 2px 5px; }

.drinks-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.btn-main {
    flex: 1;
    min-width: 160px;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    background: #007bff;
    background: var(--primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

#alert-overlay { z-index: 9700; }

/* Удаление коктейля */
/* btn-delete-large: основной стиль выше (danger/primary + svg) */

/* Результат расчёта */
.recipe-res-title {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 15px;
}
.recipe-ing-list {
    margin: 0;
    padding-left: 18px;
    line-height: 1.55;
}
.ing-premix-tag {
    font-size: 11px;
    color: #007bff;
    color: var(--primary);
    font-weight: 700;
    margin-left: 4px;
}

/* Модалка добавления коктейля */
.cocktail-add-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #dfe6e9;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.cocktail-add-header h3 { margin: 0; font-size: 17px; }
#drink-add-overlay .overlay-box { max-width: 380px; max-height: 72vh; }
.cocktail-add-body {
    padding: 10px 14px;
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}
.cocktail-add-name-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f4f7f6;
    background: var(--bg);
    color: #2d3436;
    color: var(--text);
    font-size: 15px;
}
.cocktail-ings-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.btn-add-ing {
    border: none;
    background: rgba(0, 123, 255, 0.05);
    background: var(--accent-bg, rgba(0,123,255,0.08));
    color: #007bff;
    color: var(--primary);
    font-weight: 700;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.cocktail-add-ingredients {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cocktail-ing-row {
    display: grid;
    grid-template-columns: 1fr 70px 54px auto 32px;
    gap: 6px;
    align-items: center;
}
.cocktail-ing-row input[type="text"],
.cocktail-ing-row input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 8px;
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f4f7f6;
    background: var(--bg);
    color: #2d3436;
    color: var(--text);
    font-size: 13px;
}
.cocktail-ing-premix {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    cursor: pointer;
}
.cocktail-ing-del {
    border: none;
    background: transparent;
    color: #dc3545;
    color: var(--danger);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
}
.cocktail-add-actions {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
    flex-shrink: 0;
}

@media (max-width: 420px) {
    .cocktail-ing-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .cocktail-ing-name { grid-column: 1 / -1; }
}

.recipe-res-volume {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #dfe6e9;
    border-top: 1px dashed var(--border);
    font-weight: 700;
    font-size: 14px;
    color: #28a745;
    color: var(--success);
    text-align: center;
}
.recipe-res-title {
    text-align: center;
}

.drinks-search-form {
    margin: 0 0 10px;
    width: 100%;
}
.drinks-search-form .drinks-search-input {
    margin-bottom: 0;
}

/* iOS Safari: сброс системного стиля search */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 12px;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

.cocktail-add-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* --- Склад / инвентаризация --- */
.collapsible-card-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 4px 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
.collapsible-card-toggle .collapsible-card-chevron {
    flex: 0 0 auto;
    font-size: 14px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}
.collapsible-card.is-collapsed .collapsible-card-chevron {
    transform: rotate(-90deg);
}
.collapsible-card-body {
    margin-top: 8px;
}
.inv-meta-card.collapsible-card {
    padding-top: 12px;
    padding-bottom: 12px;
}
.inv-meta-card.collapsible-card.is-collapsed {
    padding-bottom: 12px;
}

.inv-search-form {
    margin: 0 0 10px;
    width: 100%;
}
.inv-meta-card .inv-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #dfe6e9;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.inv-meta-card .inv-meta-row:last-child {
    border-bottom: none;
}
.inv-meta-label {
    opacity: 0.7;
}
.inv-meta-value {
    font-weight: 700;
    text-align: right;
}
.inv-list-wrap {
    position: relative;
    max-height: 50vh;
}
.inv-list {
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 20px;
    box-sizing: border-box;
}
.inv-alpha-rail {
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 18px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    pointer-events: auto;
}
.inv-alpha-rail span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.05;
    color: var(--primary);
    opacity: 0.85;
    cursor: pointer;
}
.inv-alpha-rail span.is-active {
    opacity: 1;
    transform: scale(1.25);
}
.inv-alpha-hint {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.inv-alpha-hint.show { display: flex; }

.inv-group-title {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #007bff;
    color: var(--primary);
    padding: 10px 4px 6px;
    margin-top: 4px;
    border-bottom: 1px solid #dfe6e9;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: #ffffff;
    background: var(--card);
    z-index: 1;
}
.inv-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 6px;
    border-bottom: 1px solid #dfe6e9;
    border-bottom: 1px solid var(--border);
}
.inv-item-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
}
.inv-item-name {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    min-width: 0;
}
.inv-item-article {
    font-size: 12px;
    opacity: 0.65;
    white-space: nowrap;
}
.inv-item-meta {
    font-size: 12px;
    opacity: 0.7;
}
.inv-item-fact {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.inv-item-fact input {
    width: 96px;
    padding: 8px 10px;
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f4f7f6;
    background: var(--bg);
    color: #2d3436;
    color: var(--text);
    font-size: 15px;
    text-align: center;
}
.inv-item-fact input:disabled {
    opacity: 0.55;
}
.btn-main.secondary {
    background: transparent;
    color: #007bff;
    color: var(--primary);
    border: 1px solid #007bff;
    border: 1px solid var(--primary);
}
.inv-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Остатки / Сверка --- */
.res-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    border-bottom: 1px solid #dfe6e9;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.res-item:last-child {
    border-bottom: none;
}
.res-item-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    font-weight: 700;
    font-size: 11px;
    opacity: 0.7;
    border-bottom: 1px solid #dfe6e9;
    border-bottom: 1px solid var(--border);
}
.res-col {
    width: 60px;
    flex-shrink: 0;
    text-align: center;
}
.res-col:last-child {
    width: 65px;
}
.res-col-name {
    flex: 1;
    min-width: 0;
    text-align: left;
    word-wrap: break-word;
}
.res-val-diff.plus {
    color: #28a745;
    color: var(--success);
    font-weight: 700;
}
.res-val-diff.minus {
    color: #dc3545;
    color: var(--danger);
    font-weight: 700;
}
.res-val-diff.ok { opacity: 0.4; }

.btn-main.danger {
    background: #dc3545;
    background: var(--danger);
    color: #fff;
    border: none;
}

.inv-item-cat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-top: 4px;
}
.inv-cat-input {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f4f7f6;
    background: var(--bg);
    color: #2d3436;
    color: var(--text);
    font-size: 13px;
}
.inv-item-fact-block {
    margin-top: 6px;
}
.inv-item-fact-head {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}
.inv-fact-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.inv-fact-part {
    width: 100px;
    padding: 8px 10px;
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f4f7f6;
    background: var(--bg);
    color: #2d3436;
    color: var(--text);
    font-size: 15px;
    text-align: center;
}
.inv-fact-del {
    border: none;
    background: transparent;
    color: #dc3545;
    color: var(--danger);
    font-size: 14px;
    padding: 4px 8px;
    cursor: pointer;
}
.inv-fact-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.inv-fact-sum {
    font-size: 13px;
    font-weight: 700;
    color: #007bff;
    color: var(--primary);
}

.inv-fact-add {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #007bff;
    border: 1px solid var(--primary);
    background: transparent;
    color: #007bff;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}
.inv-fact-add:active {
    opacity: 0.7;
}
.inv-fact-line {
    pointer-events: auto;
}
.inv-item-fact-block {
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.inv-fact-parts {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.inv-fact-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.inv-fact-part {
    width: 64px;
    min-width: 64px;
    padding: 8px 4px;
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f4f7f6;
    background: var(--bg);
    color: #2d3436;
    color: var(--text);
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
}
.inv-fact-del {
    border: none;
    background: transparent;
    color: #dc3545;
    color: var(--danger);
    font-size: 12px;
    padding: 2px 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.inv-fact-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* --- Категории (Pills) и Единицы измерения --- */
.category-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}
.category-pills::-webkit-scrollbar { display: none; }
.pill-btn {
    background: #ffffff;
    background: var(--card);
    color: #2d3436;
    color: var(--text);
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
}
.pill-btn.active {
    background: #007bff;
    background: var(--primary);
    color: #fff;
    border-color: #007bff;
    border-color: var(--primary);
}
.cell-dim {
    font-size: 12px;
    opacity: 0.65;
    padding: 0 2px;
    font-weight: 700;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
}

.inv-tare-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    flex-wrap: nowrap;
}
.inv-tare-row .inv-fact-part {
    width: 72px;
    min-width: 56px;
}
.inv-fact-sum {
    font-size: 13px;
    font-weight: 700;
    color: #007bff;
    color: var(--primary);
    margin-top: 2px;
}

/* --- Склад v0.7.1: Умные ряды с индивидуальной тарой --- */
.inv-fact-places { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.inv-fact-places.solid-layout { flex-direction: row; flex-wrap: wrap; }

.inv-tare-row {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f4f7f6;
    background: var(--bg);
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    flex-wrap: nowrap;
}
.inv-tare-row input {
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 4px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: #2d3436;
    color: var(--text);
    background: #ffffff;
    background: var(--card);
    outline: none;
}
.inv-tare-row select {
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 2px;
    font-size: 13px;
    font-weight: 700;
    background: #ffffff;
    background: var(--card);
    color: #2d3436;
    color: var(--text);
    outline: none;
}
.vol-part { width: 65px; }
.qty-part { width: 50px; }

.inv-place-badge {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    background: var(--card);
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.inv-place-badge input {
    width: 60px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 4px;
    color: #2d3436;
    color: var(--text);
    outline: none;
}
.inv-place-badge button {
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
    color: var(--danger);
    border: none;
    border-left: 1px solid #dfe6e9;
    border-left: 1px solid var(--border);
    padding: 0 10px;
    font-size: 15px;
    cursor: pointer;
    align-self: stretch;
}

.inv-fact-del {
    background: transparent;
    color: #dc3545;
    color: var(--danger);
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: auto;
}
.inv-fact-add {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px dashed #007bff;
    border: 1px dashed var(--primary);
    background: transparent;
    color: #007bff;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    -webkit-appearance: none;
}
.inv-fact-total { font-size: 15px !important; font-weight: 800 !important; text-align: right; }
.inv-fact-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    width: 100%;
}

.cat-unit-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
}
.cat-unit-row label {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    opacity: 0.8;
}
.cat-unit-row input,
.cat-unit-row select {
    padding: 4px 6px;
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #f4f7f6;
    background: var(--bg);
    color: #2d3436;
    color: var(--text);
    font-size: 13px;
    outline: none;
}
.cat-unit-row .custom-select-trigger {
    flex: 0 0 auto !important;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    padding: 4px 4px;
    font-size: 11px;
    gap: 2px;
    justify-content: center;
}
.cat-unit-row .custom-select-trigger span {
    max-width: 28px;
}
.cat-unit-row .custom-select-trigger:after {
    font-size: 9px;
}
.inv-tare-row .custom-select-trigger {
    flex: 0 0 auto !important;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    padding: 4px 2px;
    font-size: 11px;
    gap: 1px;
    justify-content: center;
}

.action-buttons-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 0;
    margin-top: 12px;
}
.action-buttons-grid .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 130px;
    padding: 10px 6px;
    border-radius: 8px;
    border: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}
.action-buttons-grid .btn-import { background-color: #3b82f6; }
.action-buttons-grid .btn-save { background-color: #10b981; }
.action-buttons-grid .btn-danger { background-color: #ef4444; }

.settings-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
/* .settings-item merged — see rule below */
.settings-item input[type="checkbox"] { width: 22px; height: 22px; cursor: pointer; accent-color: var(--primary); }

.btn-export-opt { background-color: var(--primary); color: #fff; flex: 1 1 calc(50% - 8px); min-width: 130px; padding: 10px 6px; border-radius: 8px; border: none; font-size: 13px; font-weight: 700; cursor: pointer; }

/* --- Стили для новых модальных окон (Настройки, Экспорт, ТТК) --- */
.overlay-box {
    background: #ffffff;
    background: var(--card);
    color: #2d3436;
    color: var(--text);
    border: 1px solid #dfe6e9;
    border: 1px solid var(--border);
    border-radius: 18px;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
    position: relative;
}
#activity-log-overlay .overlay-box { max-height: 92vh; max-width: 480px; }
#activity-log-list.activity-log-list { padding: 8px 10px; }
#activity-log-list .activity-log-entry { padding: 6px 12px; margin-bottom: 6px; }
.overlay-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #dfe6e9;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}
.overlay-header h3 {
    margin: 0;
    font-size: 18px;
    text-align: center;
}
.overlay-x {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.7;
    color: #2d3436;
    color: var(--text);
    padding: 4px 8px;
    line-height: 1;
    position: absolute;
    right: 10px;
}
.overlay-body {
    padding: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0; /* иначе во flex-колонке контент не скроллится и обрезается */
}
.overlay-actions {
    display: flex;
    gap: 8px;
    padding: 0 18px 18px;
    flex-shrink: 0;
}

.tab-btn.hidden-tab,
.tabs-drawer-btn.hidden-tab {
    display: none !important;
}

/* Permissions are authoritative: a denied section must stay invisible even
   when navigation-mode CSS tries to force flex display on .tab-btn. */
.tab-btn[data-permitted="false"],
.tabs-drawer-btn[data-permitted="false"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Улучшенная печать PDF */
@media print {
    body { background: #fff !important; color: #000 !important; padding: 0 !important; }
    .header, .tabs, .action-buttons-grid, .drawer-toggle-btn, .tabs-drawer-toggle-btn, .global-search-bar, .side-drawer, .drawer-overlay { display: none !important; }
    .container { box-shadow: none !important; border: none !important; padding: 0 !important; }
    .res-item-head { border-bottom: 2px solid #000 !important; }
    .res-item { border-bottom: 1px solid #ccc !important; page-break-inside: avoid; }
    .drinks-card { border: none !important; padding: 0 !important; margin: 0 !important; }
    /* ФИКС: .inv-list ограничен по высоте (max-height: 50vh) и скроллится —
       без этого правила при печати/PDF попадает только видимая часть списка,
       а не весь документ. Снимаем ограничение специально для печати. */
    .inv-list {
        max-height: none !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: auto !important;
    }
}

[data-theme="dark-purple"] {
    --primary: #a855f7;
    --primary-rgb: 168, 85, 247;
    --success: #22c55e;
    --danger: #ef4444;
    --bg: #13111C;
    --text: #eaddff;
    --card: #1f1b2e;
    --border: #332d4a;
    --accent-bg: rgba(168, 85, 247, 0.15);
    --search-bar-bg: #1f1b2e;
    --search-bar-border: #332d4a;
    --drawer-bg: #1a1726;
    --surface: #1f1b2e;
    --surface-2: #17141f;
}
.theme-option-swatch.dark-purple {
    background: linear-gradient(135deg, #13111C 50%, #a855f7 50%);
}
.settings-item { flex: 1 1 calc(50% - 8px); display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--bg); border-radius: 12px; border: 1px solid var(--border); font-weight: 600; font-size: 14px; box-sizing: border-box; }
.settings-item input[type="checkbox"] { width: 22px; height: 22px; margin: 0; cursor: pointer; accent-color: var(--primary); }

/* --- Унифицированные модальные оверлеи --- */
.theme-picker-overlay,
.about-overlay,
.activity-log-overlay,
.contacts-overlay,
.cocktail-add-overlay,
.settings-overlay,
.export-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 9200;
    background: rgba(0,0,0,0.55);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.theme-picker-overlay.open,
.about-overlay.open,
.activity-log-overlay.open,
.contacts-overlay.open,
.cocktail-add-overlay.open,
.settings-overlay.open,
.export-overlay.open {
    display: flex;
    opacity: 1;
    visibility: visible;
}
.theme-picker-overlay { z-index: 9200; }
.settings-overlay { z-index: 9250; }
/* custom-select-overlay может открываться ПОВЕРХ другой уже открытой
   модалки (например, выбор единицы измерения внутри формы шаблона
   списания) — без более высокого z-index он визуально прятался под
   родительской модалкой и был некликабелен. */
#custom-select-overlay { z-index: 9600; }
.about-overlay { z-index: 9300; }
.contacts-overlay { z-index: 9400; }
.activity-log-overlay { z-index: 9500; }
.cocktail-add-overlay { z-index: 9550; }
.export-overlay { z-index: 9560; }

/* --- Изолированный Калькулятор --- */
.calc-overlay {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 9270;
    background: rgba(0,0,0,0.55);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.calc-overlay.open { display: flex; opacity: 1; visibility: visible; }
.calc-box {
    background: var(--bg);
    width: 100%;
    max-width: 360px;
    max-height: 95vh;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.calc-display-area {
    position: relative;
    padding: 24px 24px 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    font-family: monospace;
    min-height: 100px;
    padding-top: 54px;
    box-sizing: border-box;
}
.calc-topbar{
    position:absolute;
    top:8px;
    left:8px;
    right:8px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    pointer-events:none;
}
.calc-topbar .overlay-x{
    position:static!important;
    pointer-events:auto;
    width:38px;
    height:38px;
    margin:0;
}
.calc-history {
    font-size: 20px;
    color: var(--text);
    opacity: 0.6;
    min-height: 28px;
    word-break: break-all;
    text-align: right;
    max-width: calc(100% - 4px);
}
.calc-display {
    font-size: 48px;
    color: var(--text);
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
    text-align: right;
    line-height: 1.1;
}
.calc-display::-webkit-scrollbar { display: none; }
.calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 20px 24px;
    background: var(--card);
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
}
.calc-btn {
    border: none;
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 400;
    transition: transform 0.1s, opacity 0.2s;
}
.calc-btn:active { transform: scale(0.95); opacity: 0.8; }
.btn-num { background: var(--border); color: var(--text); }
.btn-op, .btn-ac { background: var(--accent-bg); color: var(--primary); }
.btn-eq { background: var(--primary); color: #fff; border-radius: 28px; }
[data-theme="dark"] .btn-num { background: #3c4043; color: #e8eaed; }
[data-theme="dark"] .btn-op, [data-theme="dark"] .btn-ac { background: #4a4d50; color: #8ab4f8; }
[data-theme="dark"] .btn-eq { background: #8ab4f8; color: #202124; }
[data-theme="dark-purple"] .btn-num { background: #3b354a; color: #e2dbea; }
[data-theme="dark-purple"] .btn-op, [data-theme="dark-purple"] .btn-ac { background: #4a425c; color: #d8b4fe; }
[data-theme="dark-purple"] .btn-eq { background: #d8b4fe; color: #202124; }

/* Drawer: не перехватывать клики по меню */
.drawer-edge-zone {
    pointer-events: auto;
}
body.drawer-open .drawer-edge-zone {
    pointer-events: none;
}
.drawer-overlay {
    pointer-events: none;
}
.drawer-overlay.open {
    pointer-events: auto;
}
.side-drawer:not(.open) {
    pointer-events: none;
}
.side-drawer.open {
    pointer-events: auto;
}


/* ==========================================
   TASKS MODAL FIX v1.1.1
   Окно новой задачи не должно находиться в потоке страницы.
   Оно появляется только после нажатия «＋».
   ========================================== */
.task-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9280;
    background: rgba(0, 0, 0, 0.58);
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.task-overlay.open {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.task-overlay .overlay-box {
    width: 100%;
    max-width: 520px;
    max-height: min(90vh, 760px);
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    animation: taskModalIn .18s ease-out;
}
.task-overlay .overlay-header {
    min-height: 58px;
    box-sizing: border-box;
}
.task-overlay .overlay-header button {
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    padding: 6px 8px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .72;
}
.task-overlay .task-form-grid {
    padding: 16px 18px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
}
.task-overlay .overlay-actions {
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--card);
}
@keyframes taskModalIn {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
    .task-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .task-overlay .overlay-box {
        width: 100%;
        max-width: none;
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        animation-name: taskSheetIn;
    }
    .task-overlay .overlay-header {
        padding-top: 16px;
    }
    .task-overlay .task-form-grid {
        padding-left: 16px;
        padding-right: 16px;
    }
    .task-overlay .overlay-actions {
        padding-left: 16px;
        padding-right: 16px;
    }
}
@keyframes taskSheetIn {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   TASKS v1.1 — Задачи / Планировщик
   ========================================== */
.tasks-app{padding:8px 0 90px;}
.tasks-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.tasks-title h3{margin:0;font-size:24px;line-height:1.1}.tasks-title p{margin:4px 0 0;opacity:.65;font-size:13px}
.tasks-head-actions{display:flex;gap:7px}.tasks-icon-btn{border:0;border-radius:12px;padding:10px 12px;background:var(--card-bg,#f5f5f5);color:inherit;cursor:pointer;font-size:18px}.tasks-notify-btn{min-width:44px;text-align:center}
.tasks-views{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;overflow:visible;padding:3px 0 9px}
.tasks-view-btn{width:100%;min-width:0;box-sizing:border-box;border:1px solid rgba(127,127,127,.18);background:transparent;color:inherit;border-radius:999px;padding:8px 4px;white-space:nowrap;cursor:pointer;font-size:12px;text-align:center}
.tasks-view-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.tasks-week{display:grid;grid-template-columns:repeat(7,minmax(58px,1fr));gap:6px;margin:4px 0 14px}.tasks-day{border:1px solid rgba(127,127,127,.16);border-radius:13px;padding:8px 4px;text-align:center;cursor:pointer;background:var(--card-bg,#fff)}.tasks-day.active{border-color:var(--primary);box-shadow:0 0 0 2px rgba(var(--primary-rgb), .12)}.tasks-day.today .tasks-day-num{background:var(--primary);color:#fff}.tasks-day-name{font-size:11px;opacity:.6}.tasks-day-num{width:29px;height:29px;line-height:29px;margin:4px auto;border-radius:50%;font-weight:700}.tasks-day-count{font-size:10px;opacity:.6;min-height:12px}
.tasks-section{margin:12px 0}.tasks-section-title{display:flex;justify-content:space-between;align-items:center;margin:0 3px 8px;font-weight:700}.tasks-section-title small{font-weight:400;opacity:.55}
.task-swipe-shell{position:relative;overflow:hidden;border-radius:15px;margin-bottom:8px;touch-action:pan-y;isolation:isolate}.task-swipe-actions{position:absolute;inset:0 0 0 auto;width:112px;display:flex;align-items:stretch;justify-content:flex-end;z-index:2;transform:translateX(112px);opacity:0;pointer-events:none;will-change:transform,opacity;transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .18s ease}.task-swipe-shell.swiped .task-swipe-actions{transform:translateX(0);opacity:1;pointer-events:auto}.task-swipe-shell.swiped .task-card{transform:translateX(-112px)}.task-swipe-action{width:56px;flex:0 0 56px;border:0;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:filter .15s ease}.task-swipe-action:active{filter:brightness(.9)}.task-swipe-edit{background:var(--primary)}.task-swipe-delete{background:#c62828}.task-card{position:relative;z-index:1;display:flex;align-items:flex-start;gap:10px;padding:12px;margin-bottom:0;border-radius:15px;background:var(--card-bg,#fff);border:1px solid rgba(127,127,127,.14);box-shadow:0 1px 5px rgba(0,0,0,.04);transform:translateX(0);transition:transform .24s cubic-bezier(.22,.61,.36,1);will-change:transform;user-select:none}
.task-check{width:24px;height:24px;border:2px solid #999;border-radius:50%;background:transparent;flex:0 0 auto;cursor:pointer;margin-top:1px;display:flex;align-items:center;justify-content:center}.task-card.done .task-check{background:#4caf50;border-color:#4caf50;color:#fff}.task-check::after{content:'';width:12px;height:12px;display:none;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");}.task-card.done .task-check::after{display:block}
.task-main{min-width:0;flex:1;cursor:default}.task-name{font-weight:600;line-height:1.3;word-break:break-word}.task-card.done .task-name{text-decoration:line-through;opacity:.5}.task-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;font-size:11px;opacity:.68}.task-chip{padding:3px 7px;border-radius:999px;background:rgba(var(--primary-rgb), .10)}.task-priority-high{color:#f5a623}.tasks-empty{text-align:center;padding:34px 12px;opacity:.58}.tasks-empty .emoji{font-size:38px;display:block;margin-bottom:7px}
.tasks-quick-add{background:var(--card-bg,#fff);border:1px solid rgba(127,127,127,.16);border-radius:17px;padding:12px;margin:2px 0 10px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.tasks-quick-main{display:grid;gap:5px}.tasks-quick-main input,.tasks-quick-main textarea{width:100%;box-sizing:border-box;border:0;outline:0;background:transparent;color:inherit;font:inherit}.tasks-quick-main input{font-size:16px;font-weight:600;padding:2px 1px}.tasks-quick-main input::placeholder{opacity:.5}.tasks-quick-main textarea{font-size:13px;line-height:1.35;resize:none;min-height:24px;padding:1px}.tasks-quick-main textarea::placeholder{opacity:.42}.tasks-quick-controls{display:flex;align-items:center;gap:6px;margin-top:9px;overflow-x:auto;scrollbar-width:none}.tasks-quick-controls::-webkit-scrollbar{display:none}.tasks-quick-date{display:flex;gap:5px;flex:0 0 auto}.quick-date-btn,.quick-priority-btn,.quick-more-btn,.quick-add-btn{border:1px solid rgba(127,127,127,.17);background:rgba(127,127,127,.06);color:inherit;border-radius:10px;padding:7px 9px;font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}.quick-date-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.quick-date-context{border:1px solid rgba(127,127,127,.17);background:rgba(127,127,127,.06);color:inherit;border-radius:10px;padding:7px 9px;font:inherit;font-size:12px;white-space:nowrap;cursor:default}.quick-date-context:active{transform:none}.quick-priority-btn.active{background:rgba(198,40,40,.12);border-color:rgba(198,40,40,.35);color:#c62828}.quick-more-btn{padding-left:10px;padding-right:10px}.quick-add-btn{margin-left:auto;background:var(--primary);color:#fff;border-color:var(--primary);font-weight:700;padding-left:13px;padding-right:13px}.tasks-fab{position:sticky;float:right;bottom:16px;margin-right:8px;width:56px;height:56px;border:0;border-radius:18px;background:var(--primary);color:#fff;font-size:29px;box-shadow:0 5px 18px rgba(0,0,0,.22);cursor:pointer;z-index:5}.tasks-carryover-notice{margin:8px 0 12px;padding:12px 13px;border:1px solid rgba(var(--primary-rgb), .28);background:rgba(var(--primary-rgb), .10);border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.06)}.tasks-carryover-notice[hidden]{display:none}.tasks-carryover-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;margin-bottom:7px}.tasks-carryover-close{border:0;background:transparent;color:inherit;opacity:.65;font-size:20px;line-height:1;cursor:pointer;padding:2px 4px}.tasks-carryover-list{margin:0;padding:0 0 0 18px;font-size:13px;line-height:1.45}.tasks-carryover-list li{margin:3px 0}.tasks-carryover-sub{font-size:11px;opacity:.62;margin-top:7px}.tasks-toolbar{display:flex;gap:7px;align-items:center;margin:7px 0 10px}.tasks-toolbar select,.tasks-toolbar input{border:1px solid rgba(127,127,127,.18);background:var(--card-bg,#fff);color:inherit;border-radius:10px;padding:9px;min-width:0}.tasks-toolbar input{flex:1}
.tasks-calendar-head{display:flex;align-items:center;justify-content:space-between;margin:8px 0 10px}.tasks-calendar-head button{border:0;background:transparent;color:inherit;font-size:20px;cursor:pointer;padding:6px}.tasks-calendar-title{font-weight:700}.tasks-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.tasks-month-dow{text-align:center;font-size:11px;opacity:.55;padding:4px}.tasks-month-day{min-height:58px;border:1px solid rgba(127,127,127,.12);border-radius:9px;padding:5px;cursor:pointer;background:var(--card-bg,#fff);position:relative}.tasks-month-day.muted{opacity:.35}.tasks-month-day.selected{outline:2px solid var(--primary)}.tasks-month-day.today{background:rgba(var(--primary-rgb), .09)}.tasks-month-num{font-size:12px;font-weight:700}.tasks-dots{display:flex;gap:2px;margin-top:8px;align-items:center}.tasks-dot{width:5px;height:5px;border-radius:50%;background:var(--primary);display:inline-block}.tasks-dot.done{background:#4caf50}.tasks-dot.high{width:auto;height:auto;border-radius:0;background:none;color:#f5a623;font-size:9px;line-height:5px}
.tasks-year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tasks-month-card{border:1px solid rgba(127,127,127,.15);border-radius:13px;padding:10px;background:var(--card-bg,#fff);cursor:pointer}.tasks-month-card strong{display:block;margin-bottom:7px}.tasks-month-progress{height:6px;border-radius:99px;background:rgba(127,127,127,.15);overflow:hidden}.tasks-month-progress span{display:block;height:100%;background:var(--primary)}.tasks-month-card small{display:block;margin-top:6px;opacity:.6}
.task-form-grid{display:grid;gap:10px}.task-form-grid label{font-size:12px;opacity:.72}.task-form-grid input,.task-form-grid textarea,.task-form-grid select{width:100%;box-sizing:border-box;border:1px solid rgba(127,127,127,.22);border-radius:10px;padding:11px;background:var(--card-bg,#fff);color:inherit;font:inherit}.task-form-grid textarea{min-height:80px;resize:vertical}.task-form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.task-checkline{display:flex;align-items:center;gap:8px;font-size:14px}.task-checkline input{width:auto}.task-reminder-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tasks-notify-status{font-size:12px;opacity:.65;padding:8px 0}.tasks-note{font-size:11px;opacity:.55;margin-top:8px}
[data-theme="dark"] .tasks-day,[data-theme="dark"] .task-card,[data-theme="dark"] .tasks-month-day,[data-theme="dark"] .tasks-month-card,[data-theme="dark"] .task-form-grid input,[data-theme="dark"] .task-form-grid textarea,[data-theme="dark"] .task-form-grid select,[data-theme="dark"] .tasks-icon-btn,[data-theme="dark"] .tasks-toolbar input,[data-theme="dark"] .tasks-toolbar select{background:#292929}
[data-theme="dark-purple"] .tasks-day,[data-theme="dark-purple"] .task-card,[data-theme="dark-purple"] .tasks-month-day,[data-theme="dark-purple"] .tasks-month-card,[data-theme="dark-purple"] .task-form-grid input,[data-theme="dark-purple"] .task-form-grid textarea,[data-theme="dark-purple"] .task-form-grid select,[data-theme="dark-purple"] .tasks-icon-btn,[data-theme="dark-purple"] .tasks-toolbar input,[data-theme="dark-purple"] .tasks-toolbar select{background:#292533}
[data-theme="dark"] .tasks-quick-add{background:#292929}
[data-theme="dark-purple"] .tasks-quick-add{background:#292533}[data-theme="dark"] .tasks-carryover-notice{background:rgba(var(--primary-rgb), .16)}[data-theme="dark-purple"] .tasks-carryover-notice{background:rgba(var(--primary-rgb), .18)}
@media(max-width:600px){.tasks-week{grid-template-columns:repeat(7,62px);overflow-x:auto;padding-bottom:4px}.tasks-year-grid{grid-template-columns:repeat(2,1fr)}.task-form-row,.task-reminder-row{grid-template-columns:1fr}.tasks-head h3{font-size:21px}.tasks-quick-add{padding:11px}.tasks-quick-controls{gap:5px}.quick-add-btn{margin-left:auto}.tasks-fab{width:52px;height:52px;border-radius:17px}}


/* --- Заказы v1.1.4 --- */
.orders-app{display:flex;flex-direction:column;gap:12px}
.orders-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.orders-head h3{margin:0;font-size:20px}
.orders-head p{margin:4px 0 0;font-size:12px;opacity:.65}
.orders-head-actions{display:flex;gap:6px}
.orders-small-btn{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:10px;padding:8px 10px;font-weight:700;font-size:12px}
.wo-tpl-chip {
    position: relative;
    overflow: visible;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    display: flex;
    align-items: stretch;
    transition: box-shadow 0.15s ease;
}
.wo-tpl-chip.pressing { box-shadow: 0 0 0 2px var(--primary) inset; }
.wo-tpl-chip-main {
    padding: 8px 10px;
    font-weight: 700;
    font-size: 12px;
    color: var(--text);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.wo-tpl-chip-actions {
    display: flex;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.28s ease;
}
.wo-tpl-chip.actions-open .wo-tpl-chip-actions { max-width: 90px; }
.wo-tpl-chip-actions button {
    border: none;
    border-left: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    width: 34px;
    font-size: 13px;
    cursor: pointer;
    flex: 0 0 auto;
}
.wo-tpl-chip-actions button.danger { color: var(--danger); }
.orders-location-tabs{
    display:flex;
    flex-wrap:nowrap;
    gap:5px;
    background:var(--border);
    padding:4px;
    border-radius:12px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    max-width:100%;
}
.orders-location-tabs::-webkit-scrollbar{display:none;height:0}
.orders-location-btn{
    flex:0 0 auto;
    border:0;
    background:transparent;
    color:var(--text);
    padding:10px 12px;
    border-radius:9px;
    font-weight:800;
    font-size:12px;
    line-height:1.25;
    white-space:nowrap;
    max-width:none;
    text-align:center;
}
.orders-location-btn.active{
    background:var(--card);
    color:var(--primary);
    box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.orders-toolbar{display:flex;flex-direction:column;gap:7px}
.orders-toolbar-actions{display:flex;gap:7px;flex-wrap:nowrap}
.orders-toolbar-actions .orders-small-btn{flex:1;min-width:0;white-space:nowrap;text-align:center}
.orders-toolbar input,.orders-toolbar select,.orders-item select,.orders-qty{box-sizing:border-box;width:100%;padding:11px 10px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:13px;outline:none}
.orders-supplier-summary{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-bottom:2px}
.orders-supplier-card{min-width:0;border:1px solid var(--border);border-radius:10px;background:var(--bg);padding:6px 8px;cursor:pointer}
.orders-supplier-del{position:absolute;top:4px;right:4px;width:20px;height:20px;line-height:18px;padding:0;border:none;border-radius:50%;background:var(--card);color:var(--danger);font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.15);}
.orders-supplier-card.active{border-color:var(--primary);box-shadow:0 0 0 2px var(--accent-bg)}
.orders-supplier-name{font-weight:800;font-size:13px}
.orders-supplier-total{font-size:17px;font-weight:800;margin-top:4px}
.orders-supplier-min{font-size:11px;opacity:.7;margin-top:2px}
.orders-supplier-gap{font-size:12px;margin-top:5px;font-weight:700}
.orders-supplier-gap.ok{color:var(--success)}
.orders-supplier-gap.warn{color:var(--danger)}
.orders-total-card{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--border);border-radius:12px;padding:11px 13px;background:var(--card)}
.orders-total-card.dual{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.orders-total-card div{display:flex;flex-direction:column;gap:2px;min-width:0}
.orders-total-card span{font-size:11px;opacity:.65}
.orders-total-card strong{font-size:16px}
.orders-total-card .orders-total-pos{font-size:12px;font-weight:700;opacity:.85}
.orders-list{display:flex;flex-direction:column;gap:8px}
.orders-group-title{
    position:sticky;top:0;z-index:5;
    background:var(--card);
    padding:7px 4px 5px;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.02em;color:var(--primary);
    border-bottom:1px solid var(--border);
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 6px 10px -8px rgba(0,0,0,0.35);
}
.orders-group-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.orders-group-name{font-weight:800}
.orders-group-name-wrap{display:inline-flex;align-items:center;gap:4px;min-width:0}
.orders-group-del,.orders-group-edit{border:none;background:transparent;opacity:.55;font-size:12px;padding:0 3px;cursor:pointer;line-height:1;flex:0 0 auto}
.orders-group-del{color:var(--danger)}
.orders-group-edit{color:var(--primary)}
.orders-group-del:hover,.orders-group-del:active,
.orders-group-edit:hover,.orders-group-edit:active{opacity:1}
.orders-group-ratio{font-weight:700;font-size:12px;opacity:.95;white-space:nowrap}
.orders-group-ratio.warn{color:var(--danger)}
.orders-group-ratio.ok{color:var(--success)}

.orders-item{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:10px}
.orders-item.sent{opacity:.72}
.orders-item.sent .orders-item-name{text-decoration:line-through}
.orders-supplier-ratio{font-weight:700;font-size:12px;margin-left:6px;opacity:.9}
.orders-supplier-ratio.warn{color:var(--danger)}
.orders-supplier-ratio.ok{color:var(--success)}
.orders-supplier-card.supplier-sent{border-color:var(--success)}
.orders-supplier-card.supplier-delivered{border-color:var(--success);box-shadow:0 0 0 1px var(--success)}
.orders-supplier-delivered-badge{
  position:absolute;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  margin:0;
  font-size:11px;
  font-weight:800;
  color:var(--success);
  white-space:nowrap;
  pointer-events:none;
  line-height:1.2;
  text-align:right;
  max-width:42%;
}
.orders-item-top{display:flex;justify-content:space-between;gap:8px}
.orders-item-name{font-weight:800;font-size:14px;line-height:1.3}
.orders-item-meta{font-size:11px;opacity:.62;margin-top:3px}
.orders-item-price{font-weight:800;white-space:nowrap}
.orders-item-controls{display:grid;grid-template-columns:1.1fr .55fr auto;gap:7px;align-items:center;margin-top:9px}
.orders-item-qty-wrap{display:flex;align-items:center;gap:5px}
.orders-qty{width:70px;text-align:center}
.orders-unit{font-size:11px;opacity:.65;white-space:nowrap}
.orders-send-btn{border:0;border-radius:10px;padding:10px 11px;background:var(--primary);color:#fff;font-weight:800;font-size:12px;white-space:nowrap}
.orders-send-btn.sent{background:var(--success)}
.orders-item-note{font-size:11px;margin-top:7px;padding-top:7px;border-top:1px dashed var(--border);opacity:.72}
.orders-empty{padding:30px 10px;text-align:center;opacity:.65}
.orders-provider-label{font-size:10px;opacity:.6;margin-bottom:3px}
.orders-price-note{font-size:10px;opacity:.58;margin-top:3px}
@media(max-width:600px){
 .orders-toolbar-actions{flex-wrap:wrap}
 .orders-toolbar-actions .orders-small-btn{flex:1 1 30%;font-size:11px;padding:8px 6px}
 .orders-item-controls{grid-template-columns:1fr auto}
 .orders-item-controls .orders-send-btn{grid-column:2;grid-row:1 / span 2}
 .orders-item-controls select{grid-column:1}
 .orders-item-qty-wrap{grid-column:1}
}


.orders-item-controls-grid{display:grid;grid-template-columns:1.4fr 0.9fr 0.55fr 0.7fr auto;gap:8px;align-items:end}
.orders-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.orders-text-input{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;padding:8px 8px;font-size:13px;font-weight:600}
.orders-unit-input{text-align:center}
.orders-min-panel{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--bg)}
.orders-min-panel summary{cursor:pointer;font-weight:700;font-size:13px}
.orders-min-add{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.orders-minimums-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}
.orders-min-row{display:grid;grid-template-columns:1fr 100px 40px;gap:6px;align-items:center}
.orders-small-btn.danger{color:var(--danger);border-color:var(--danger)}
@media(max-width:640px){
  .orders-item-controls-grid{grid-template-columns:1fr 1fr; }
  .orders-min-row{grid-template-columns:1fr 80px 36px}
}


/* Orders compact cards v1.1.5 */
.orders-list{display:flex;flex-direction:column;gap:4px}
.orders-group-title{
    position:sticky;top:0;z-index:5;
    background:var(--card);
    padding:5px 2px 3px;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--primary);
    border-bottom:1px solid var(--border);
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 6px 10px -8px rgba(0,0,0,0.35);
}
.orders-item{border:1px solid var(--border);border-radius:8px;background:var(--card);padding:6px 8px}
.orders-item.sent{opacity:.65}
.orders-item.editing{border-color:var(--primary);box-shadow:0 0 0 2px var(--accent-bg)}
.orders-item-main{display:flex;align-items:center;gap:6px;min-width:0}
.orders-item-info{flex:1;min-width:0}
.orders-item-name{font-weight:700;font-size:12.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orders-item-meta{font-size:10px;opacity:.6;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orders-item-row{display:flex;align-items:center;gap:4px;flex-shrink:0}
.orders-item-row .orders-qty,
.orders-item-row .orders-text-input{width:58px;padding:5px 4px;font-size:12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);text-align:center;box-sizing:border-box}
.orders-item-row .orders-unit-input{width:42px}
.orders-item-row .orders-price-input{width:64px}
.orders-icon-btn{border:none;background:transparent;color:var(--text);opacity:.55;font-size:14px;padding:2px 4px;cursor:pointer;line-height:1}
.orders-icon-btn:hover,.orders-icon-btn:active{opacity:1}
.orders-icon-btn.danger{color:var(--danger);opacity:.7}
.orders-icon-btn.sent-on{color:var(--success);opacity:1}
.orders-item-edit{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    overflow:hidden;
    max-height:0;
    opacity:0;
    margin-top:0;
    padding-top:0;
    border-top:1px solid transparent;
    transform:translateY(-8px);
    pointer-events:none;
    transition:
        max-height .12s cubic-bezier(.2,.8,.3,1),
        opacity .1s ease,
        transform .1s cubic-bezier(.2,.8,.3,1),
        margin .1s ease,
        padding .1s ease,
        border-color .1s ease;
}
.orders-item.editing .orders-item-edit,
.orders-item-editing-open .orders-item-edit{
    max-height:360px;
    opacity:1;
    margin-top:8px;
    padding-top:8px;
    border-top:1px dashed var(--border);
    transform:translateY(0);
    pointer-events:auto;
}
.orders-item-edit label{display:flex;flex-direction:column;gap:2px;font-size:10px;opacity:.7;font-weight:700}
.orders-item-edit input,.orders-item-edit select{padding:6px 7px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:12px;font-weight:600}
.orders-item-edit .custom-select-trigger{width:100%;box-sizing:border-box;padding:6px 7px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:12px;font-weight:600;min-height:32px}
.orders-item-edit-actions{grid-column:1/-1;display:flex;gap:6px;justify-content:flex-end}
.orders-item-edit-actions button{padding:6px 10px;border-radius:8px;border:1px solid var(--border);font-size:12px;font-weight:700;cursor:pointer;background:var(--card);color:var(--text)}
.orders-item-edit-actions .primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.orders-item-controls-grid{display:none!important}
@media(max-width:520px){
  .orders-item-main{flex-wrap:wrap}
  .orders-item-row{width:100%;justify-content:flex-end}
}


.orders-add-panel{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--bg);margin:10px 0}
.orders-add-panel summary{cursor:pointer;font-weight:700;font-size:13px}
.orders-add-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.orders-add-form .orders-text-input,.orders-add-form .orders-qty{width:100%;box-sizing:border-box}
.orders-add-form .custom-select-trigger{
    width:100%;
    box-sizing:border-box;
    padding:8px 10px;
    border-radius:8px;
    background:var(--bg);
    color:var(--text);
    border:1px solid var(--border);
    font-size:13px;
    font-weight:600;
    min-height:0;
}
.orders-add-form .orders-small-btn{grid-column:1/-1}
.orders-small-btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
@media(max-width:600px){.orders-add-form{grid-template-columns:1fr}}


/* Orders admin row: min + add side by side */
.orders-admin-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.orders-admin-row .orders-min-panel,
.orders-admin-row .orders-add-panel{margin:0}
@media(max-width:700px){.orders-admin-row{grid-template-columns:1fr}}

/* Compact supplier cards — 2 columns, no long horizontal swipe */
.orders-supplier-summary{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:6px;
  overflow:visible !important;
  padding-bottom:0;
}
.orders-supplier-card{
  min-width:0 !important;
  padding:6px 8px !important;
  border-radius:10px !important;
}
.orders-supplier-name{font-size:11px !important;line-height:1.2}
.orders-supplier-total{font-size:13px !important;margin-top:2px !important}
.orders-supplier-min{font-size:10px !important;margin-top:1px !important}
.orders-supplier-gap{font-size:10px !important;margin-top:2px !important}
.orders-supplier-card .orders-send-btn{padding:6px 8px !important;font-size:11px !important;margin-top:4px !important}
.orders-supplier-actions{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.orders-supplier-actions .orders-send-btn,
.orders-supplier-actions .orders-view-btn{flex:1;min-width:0;margin-top:0 !important}
.orders-view-btn{border:0;border-radius:8px;padding:6px 8px;background:var(--border);color:var(--text);font-weight:700;font-size:11px;cursor:pointer}

/* Settings: 5th tab same half-width, not stretched */
.settings-list{display:flex;flex-wrap:wrap;gap:8px}
.settings-item{
  flex:0 0 calc(50% - 4px) !important;
  max-width:calc(50% - 4px) !important;
  box-sizing:border-box;
}


/* Orders swipe actions (как задачи) */
/* Drag-and-drop позиций между категориями / поставщиками */
.orders-drop-target {
    transition: background 0.18s ease, box-shadow 0.18s ease;
}
/* При переносе sticky-заголовки отключаем — иначе наезжают друг на друга */
body.orders-dnd-active #orders-list .orders-group-title {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    box-shadow: none;
}
.orders-group-title.orders-drop-hover {
    background: var(--accent-bg, var(--card)) !important;
    box-shadow: inset 0 0 0 1.5px var(--primary);
    border-radius: 8px;
}
.orders-swipe-shell.orders-dragging,
.orders-item.orders-dragging {
    opacity: 0.35;
    transition: opacity 0.2s ease;
}
.orders-swipe-shell[draggable="true"] {
    cursor: grab;
}
.orders-swipe-shell.orders-dragging {
    cursor: grabbing;
}
.orders-drag-ghost {
    position: fixed;
    z-index: 2147483000;
    pointer-events: none;
    left: 0;
    top: 0;
    will-change: transform;
    max-width: min(300px, 86vw);
    padding: 10px 14px;
    border-radius: 12px;
    border: 2px solid var(--primary);
    background: var(--card);
    color: var(--text);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.25;
    box-shadow: 0 12px 28px rgba(0,0,0,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.96;
}
body.orders-dnd-active {
    user-select: none;
    -webkit-user-select: none;
}
/* Сверху всегда видно, в какую группу сейчас цель */
#orders-dnd-target-bar {
    position: fixed;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    z-index: 2147483001;
    pointer-events: none;
    max-width: min(92vw, 420px);
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    opacity: 0;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#orders-dnd-target-bar.show {
    opacity: 1;
}

.orders-swipe-shell{position:relative;overflow:hidden;border-radius:10px;margin-bottom:4px;touch-action:pan-y;isolation:isolate}
.orders-swipe-actions{
  position:absolute;inset:0 0 0 auto;width:116px;
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  padding:4px 6px 4px 0;box-sizing:border-box;
  z-index:2;transform:translateX(116px);opacity:0;pointer-events:none;
  will-change:transform,opacity;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .22s ease;
}
.orders-swipe-shell.swiped .orders-swipe-actions{transform:translateX(0);opacity:1;pointer-events:auto}
.orders-swipe-shell.swiped .orders-item{
  transform:translateX(-116px);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.orders-item{transition:transform .28s cubic-bezier(.22,.61,.36,1);background:var(--card);position:relative;z-index:3}
.orders-swipe-action{
  width:50px;flex:0 0 50px;height:44px;max-height:100%;
  border:1px solid transparent;border-radius:10px;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:11px;font-weight:700;line-height:1;letter-spacing:0.01em;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
  transition:transform .15s ease, filter .15s ease, background .15s ease;
}
.orders-swipe-action .orders-swipe-ico{font-size:15px;line-height:1;font-weight:600}
.orders-swipe-action .orders-swipe-lbl{font-size:9px;font-weight:700;opacity:0.9;text-transform:uppercase;letter-spacing:0.04em}
.orders-swipe-edit{
  background:color-mix(in srgb, var(--primary) 16%, var(--card));
  color:var(--primary);
  border-color:color-mix(in srgb, var(--primary) 28%, var(--border));
}
.orders-swipe-delete{
  background:color-mix(in srgb, var(--danger, #e53935) 14%, var(--card));
  color:var(--danger, #e53935);
  border-color:color-mix(in srgb, var(--danger, #e53935) 28%, var(--border));
}
/* fallback without color-mix (старые WebView) */
@supports not (background: color-mix(in srgb, white 50%, black)) {
  .orders-swipe-edit{background:var(--accent-bg, var(--card));color:var(--primary);border-color:var(--border)}
  .orders-swipe-delete{background:rgba(229,57,53,0.12);color:var(--danger,#e53935);border-color:rgba(229,57,53,0.28)}
}
.orders-swipe-action:active{transform:scale(0.96);filter:brightness(0.97)}

.orders-item-editing-open{
    border-color:var(--primary)!important;
    box-shadow:0 0 0 2px var(--accent-bg);
    transition:border-color .14s ease, box-shadow .16s ease;
}
.orders-item-editing-open .orders-item-edit{
    max-height:360px;
    opacity:1;
    margin-top:8px;
    padding-top:8px;
    border-top:1px dashed var(--border);
    transform:translateY(0);
    pointer-events:auto;
}
.orders-swipe-shell{width:100%}
.orders-swipe-shell .orders-item{width:100%;box-sizing:border-box}


.calc-caret{
  display:inline-block;width:2px;height:1.05em;background:var(--primary);
  margin:0 1px;vertical-align:-0.1em;border-radius:1px;
  animation:calcCaretBlink 1s step-end infinite;
}
.calc-muted{opacity:.45}
@keyframes calcCaretBlink{50%{opacity:0}}
.calc-display{cursor:text;user-select:none;-webkit-user-select:none;min-height:1.2em}


/* --- Перенесено из версии 1.5.2 (интерфейс списаний): группировка по месяцам/неделям/дням, редактирование записи --- */
.wo-list { display: flex; flex-direction: column; gap: 10px; }
.wo-month-block { border: 1px solid var(--border); border-radius: 14px; background: var(--card); overflow: hidden; }
.wo-month-title {
    padding: 10px 12px;
    font-weight: 800;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
}
.wo-week-block { border-top: 1px solid var(--border); }
.wo-week-block:first-of-type { border-top: none; }
.wo-week-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.wo-week-head .wo-week-chevron {
    flex: 0 0 auto;
    opacity: 0.6;
    transition: transform 0.2s ease;
}
.wo-week-block.is-collapsed .wo-week-chevron { transform: rotate(-90deg); }
.wo-week-body {
    padding: 6px 6px 14px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
}
.wo-week-block.is-collapsed .wo-week-body { display: none; }

@media (min-width: 900px) {
  .wo-week-body {
    gap: 12px;
    padding: 8px 10px 16px;
    scrollbar-width: thin;
  }
  .wo-day-block {
    width: 260px;
    max-width: 280px;
    max-height: 60vh;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
  }
  .wo-day-items {
    overflow-x: hidden !important;
  }
}

.wo-day-block {
    flex: 0 0 auto;
    width: min(55vw, 200px);
    max-height: 52vh;
    margin-top: 0;
    padding: 0;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    scroll-snap-align: start;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    position: relative;
    z-index: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.14);
}
.wo-day-title {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 11px;
    line-height: 1.25;
    margin: 0;
    padding: 8px 8px 6px;
    opacity: 1;
    color: var(--text);
    background: var(--card);
    border-bottom: 1px solid rgba(127,127,127,.14);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wo-day-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 8px 8px;
    background: var(--card);
}
#writeoffs .wo-day-block .wo-item-name { font-size: 11px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; word-break: normal; }
#writeoffs .wo-day-block .wo-item-meta { font-size: 9px; gap: 3px; flex-wrap: wrap; }
#writeoffs .wo-day-block .task-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    padding: 2px 6px;
}
#writeoffs .wo-day-block .wo-item-edit-grid { grid-template-columns: 1fr; }
.wo-item {
    border-bottom: 1px solid rgba(127,127,127,.12);
    padding: 4px 0;
    transition: box-shadow 0.2s ease, background 0.2s ease;
}
.wo-item:last-child { border-bottom: 0; }
.wo-item.editing {
    border-radius: 10px;
    padding: 6px;
    margin: 2px 0;
    box-shadow: 0 0 0 2px var(--accent-bg);
    background: rgba(var(--primary-rgb), 0.04);
}
.wo-item-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.wo-item-main { flex: 1; min-width: 0; }
.wo-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; }
.wo-item-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; font-size: 11px; opacity: .68; }
.wo-item-note { margin-top: 5px; font-size: 12px; opacity: .75; }
.wo-item-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    padding-top: 1px;
}
.wo-item-edit-btn {
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    background: rgba(var(--primary-rgb), 0.16);
    color: var(--primary);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    padding: 5px 7px;
    line-height: 1;
    border-radius: 8px;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
}
.wo-item-edit-btn:active { background: rgba(var(--primary-rgb), 0.28); }

/* ПК: чёткие иконки карандаша/урны в списаниях (без смазывания) */
@media (hover: hover) and (pointer: fine) {
  .wo-day-block .wo-item-edit-btn,
  .wo-day-block .wo-item-del,
  #writeoffs .wo-day-block .wo-item-edit-btn,
  #writeoffs .wo-day-block .wo-item-del {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
  }
  .wo-day-block .wo-item-actions {
    min-width: 68px !important;
    gap: 6px !important;
  }
}

.wo-item-del {
    border: 0;
    background: rgba(198, 40, 40, 0.10);
    color: #c62828;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 5px;
    flex: 0 0 auto;
    line-height: 1;
    border-radius: 8px;
}
.wo-item-edit {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin-top 0.25s ease;
    opacity: 0;
    margin-top: 0;
}
.wo-item.editing .wo-item-edit {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 8px;
}
.wo-item-edit-inner { overflow: hidden; min-height: 0; }
.wo-item-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
}
.wo-item-edit-grid label {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 10px; opacity: 0.75; font-weight: 700;
}
.wo-item-edit-grid label.full { grid-column: 1 / -1; }
.wo-item-edit-grid input,
.wo-item-edit-grid select {
    padding: 7px 8px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font-size: 12px; font-weight: 600;
    box-sizing: border-box; width: 100%;
}
.wo-item-edit-actions {
    grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; margin-top: 2px;
}
.wo-item-edit-actions button {
    padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border);
    font-size: 12px; font-weight: 700; cursor: pointer; background: var(--card); color: var(--text);
}
.wo-item-edit-actions .primary { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Списания — компактный вид (вкладка занимала слишком много места на экране) */
#writeoffs .drinks-card { padding: 8px; margin-bottom: 6px; }
#writeoffs .drinks-card-title { font-size: 12px; margin-bottom: 6px; }
#writeoffs .task-form-grid { gap: 5px; }
#writeoffs .task-form-grid label { font-size: 10px; }
#writeoffs .task-form-grid input,
#writeoffs .task-form-grid select { padding: 6px; font-size: 12px; border-radius: 6px; }
#writeoffs .task-form-row { gap: 4px; }
#writeoffs .drinks-actions { gap: 5px; margin-top: 4px; }
#writeoffs .btn-main { padding: 7px 8px; font-size: 12px; min-width: 0; border-radius: 6px; }
#writeoffs .tasks-toolbar { gap: 4px; margin: 4px 0 6px; }
#writeoffs .tasks-toolbar input,
#writeoffs .tasks-toolbar select { padding: 5px; font-size: 12px; }
#writeoffs .orders-small-btn { padding: 4px 5px; font-size: 10px; }
#writeoffs .wo-item { padding: 4px 0; }
#writeoffs .wo-item.editing { padding: 6px; }
#writeoffs .wo-item-name { font-size: 12px; }
#writeoffs .wo-item-meta { font-size: 9px; gap: 3px; margin-top: 3px; }
#writeoffs .wo-item-note { font-size: 10px; margin-top: 3px; }
#writeoffs .wo-item-del,
#writeoffs .wo-item-edit-btn { font-size: 13px; padding: 0; width: 28px; height: 28px; }
#writeoffs .task-chip { padding: 2px 5px; }

/* --- Перенесено из версии 1.5.2: сворачиваемые карточки списаний, сетка количество/ед./причина --- */
.wo-collapsible-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wo-collapsible-head .collapsible-card-toggle {
    flex: 1;
    min-width: 0;
}
.wo-collapsible-head .orders-small-btn {
    flex: 0 0 auto;
}
/* Лёгкая подсказка под «Позиция» — плавный выезд без подёргиваний */
#wo-edit-overlay .task-form-grid > .full {
    grid-column: 1 / -1;
    min-width: 0;
}
#wo-edit-overlay .wo-rename-all-wrap {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition:
        grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
#wo-edit-overlay .wo-rename-all-wrap.is-open {
    grid-template-rows: 1fr;
    opacity: 0.85;
    transform: translateY(0);
    pointer-events: auto;
}
#wo-edit-overlay .wo-rename-all-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1.35;
}
#wo-edit-overlay .wo-rename-all-wrap.is-open .wo-rename-all-inner {
    padding: 4px 2px 2px 4px;
}
#wo-edit-overlay .wo-rename-all-wrap input[type="checkbox"] {
    width: 15px;
    height: 15px;
    min-width: 15px;
    margin: 0;
    flex: 0 0 15px;
    accent-color: var(--primary, #7c3aed);
}
#wo-edit-overlay .wo-rename-all-wrap span {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-weight: 400;
}
#wo-edit-overlay .wo-rename-all-wrap span b {
    font-weight: 600;
}

.wo-name-wrap {
    position: relative;
}

.wo-name-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    margin-top: 4px;
    max-height: 180px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(127,127,127,0.25));
    background: var(--card, #ffffff);
    color: var(--text, #2d3436);
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
    padding: 4px;
    box-sizing: border-box;
}
[data-theme="dark"] .wo-name-suggest,
[data-theme="dark-purple"] .wo-name-suggest {
    background: var(--card, #2f3640);
    color: var(--text, #d2dae2);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.wo-name-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--text, inherit);
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}
.wo-name-suggest-item:hover,
.wo-name-suggest-item:active {
    background: rgba(var(--primary-rgb, 0, 123, 255), 0.14);
}
#writeoffs .wo-qty-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    align-items: end;
}

/* Выравнивание: количество = ед.изм = причина */
#writeoffs .wo-qty-row {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    align-items: end !important;
}
#writeoffs .wo-qty-row > div {
    min-width: 0 !important;
    width: 100%;
}
#writeoffs .wo-qty-row input#wo-qty,
#writeoffs .wo-qty-row #wo-unit-trigger,
#writeoffs .wo-qty-row #wo-reason-trigger {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    margin: 0 !important;
}

.wo-qty-row > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.wo-qty-row input,
.wo-qty-row .custom-select-trigger {
    width: 100% !important;
    box-sizing: border-box;
    min-height: 44px !important;
    height: 44px;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 600;
    border-radius: 12px;
}
#writeoffs .wo-qty-row > div {
    min-width: 0;
}
#writeoffs .task-form-grid input,
#writeoffs .task-form-grid .custom-select-trigger {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}
#writeoffs .task-form-grid .custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 42px;
}
#writeoffs .task-form-grid .custom-select-trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 420px) {
    #writeoffs .wo-qty-row {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }
    #writeoffs .task-form-grid input,
    #writeoffs .task-form-grid .custom-select-trigger {
        padding: 10px 8px;
        font-size: 12px;
    }
}


#wo-template-overlay .overlay-box {
    max-width: 360px !important;
}
#wo-template-overlay .overlay-header {
    padding: 12px 14px 8px !important;
    min-height: 44px !important;
}
#wo-template-overlay .overlay-header h3 {
    font-size: 15px !important;
}
#wo-template-overlay .wot-compact-body {
    padding: 10px 14px !important;
}
#wo-template-overlay .overlay-actions {
    padding: 8px 14px 12px !important;
}
.wot-compact-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wot-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
.wot-cell {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg, var(--card));
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 12px;
    outline: none;
    min-height: 44px;
}
input.wot-cell::placeholder {
    color: var(--text);
    opacity: 0.45;
    font-weight: 600;
}
.wot-qty-unit-cell {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}
.wot-qty-inner {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 11px 10px;
    outline: none;
    text-align: center;
}
.wot-qty-inner::placeholder {
    color: var(--text);
    opacity: 0.45;
    font-weight: 600;
}
.wot-unit-inner {
    flex: 0 0 auto;
    min-width: 48px;
    border: none;
    border-left: 1px solid var(--border);
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    padding: 11px 10px;
    cursor: pointer;
    text-transform: lowercase;
}
.wot-reason-cell {
    display: flex;
    padding: 0;
    overflow: hidden;
}
.wot-reason-inner {
    flex: 1 1 auto;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 11px 12px;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wot-reason-inner .wot-ph,
.wot-reason-inner span.wot-ph {
    opacity: 0.45;
    font-weight: 600;
}
.wot-reason-inner span:not(.wot-ph) {
    opacity: 1;
    font-weight: 700;
}



.wo-reason-label-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px 0;
    padding: 0;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: 1.2;
    vertical-align: baseline;
}
.wo-reason-edit-btn {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 0 0 2px;
    border: none;
    background: transparent;
    color: var(--text);
    opacity: 0.45;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -2px;
    line-height: 1;
}
.wo-reason-edit-btn:hover,
.wo-reason-edit-btn:active {
    opacity: 0.85;
    color: var(--primary);
}
.wo-reason-edit-btn svg {
    display: block;
}

#wo-reason-trigger .wo-ph,
#wot-reason-trigger .wo-ph {
    opacity: 0.45;
    font-weight: 600;
}
#wo-reason-trigger span:not(.wo-ph) {
    opacity: 1;
}


.wo-history-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.wo-history-actions .orders-small-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    padding: 5px 8px;
}

/* --- Перенесено из версии 1.5.2: шаблоны списаний по категориям --- */
#wo-templates-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wo-tpl-cat {
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.10);
    overflow: hidden;
}
.wo-tpl-cat.is-open {
    border-color: rgba(var(--primary-rgb), 0.55);
    background: rgba(var(--primary-rgb), 0.14);
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.12);
}
.wo-tpl-cat-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-weight: 800;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}
.wo-tpl-cat-head:active {
    background: rgba(var(--primary-rgb), 0.12);
}
.wo-tpl-cat-head .wo-tpl-cat-chevron {
    flex: 0 0 auto;
    opacity: 0.85;
    color: var(--primary);
    transition: transform 0.2s ease;
}
.wo-tpl-cat.is-open .wo-tpl-cat-chevron { transform: rotate(0deg); }
.wo-tpl-cat:not(.is-open) .wo-tpl-cat-chevron { transform: rotate(-90deg); }
.wo-tpl-cat-count {
    margin-left: auto;
    margin-right: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    opacity: 0.8;
    background: rgba(var(--primary-rgb), 0.16);
    border-radius: 999px;
    padding: 2px 7px;
}
.wo-tpl-cat-body {
    display: none;
    padding: 0 8px 8px;
    background: var(--card);
    border-top: 1px solid rgba(var(--primary-rgb), 0.18);
}
.wo-tpl-cat.is-open .wo-tpl-cat-body { display: block; }
/* Сворачивание карточек списаний */
.collapsible-card.is-collapsed > .collapsible-card-body,
.collapsible-card.is-collapsed .collapsible-card-body {
    display: none !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
/* Отступ шаблонов от заголовка категории — компактнее */
.wo-tpl-cat-body {
    padding: 6px 8px 8px !important;
}
.wo-tpl-cat-grid {
    gap: 5px !important;
}
.wo-tpl-cat + .wo-tpl-cat { margin-top: 8px; }
.wo-templates-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Режим удаления шаблонов — крестик */
.wo-tpl-chip { position: relative; }
.wo-tpl-chip-del-x {
    display: none !important;
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 20;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
#wo-templates-list.delete-mode .wo-tpl-chip-del-x {
    display: flex !important;
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 20;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
#wo-templates-list.delete-mode .wo-tpl-chip-main {
    padding-right: 18px;
}
#wo-tpl-delete-mode-btn.active {
    background: rgba(239, 68, 68, 0.28) !important;
    color: #ef4444 !important;
    border-color: #ef4444 !important;
}
#wo-templates-list.delete-mode .wo-tpl-chip-del-x {
    display: flex !important;
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 20;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
#wo-templates-list.delete-mode .wo-tpl-chip { overflow: visible; }
#wo-tpl-delete-mode-btn.active {
    background: rgba(239, 68, 68, 0.28);
    color: #ef4444;
    border-color: #ef4444;
}

/* Шаблоны списаний: на телефоне 2 колонки + полный текст (перенос строк) */
.wo-templates-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wo-tpl-cat {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: visible;
}

.wo-tpl-cat-grid {
    display: grid;
    /* На телефоне 2 колонки — названия читаются целиком; шире экрана — больше колонок */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}
@media (max-width: 380px) {
    .wo-tpl-cat-grid {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 560px) {
    .wo-tpl-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 820px) {
    .wo-tpl-cat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.wo-tpl-chip {
    position: relative;
    overflow: visible !important;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    display: flex;
    align-items: stretch;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    transition: box-shadow 0.15s ease;
}
.wo-tpl-chip.pressing { box-shadow: 0 0 0 2px var(--primary) inset; }
.wo-tpl-chip-main {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 17px 6px 5px;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.25;
    color: var(--text);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: center;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto;
    display: block;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
}
/* Имя и количество в одной строке — меньше высота блока */
.wo-tpl-chip-name {
    display: inline;
    font-weight: 800;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.wo-tpl-chip-qty {
    display: inline;
    margin-left: 3px;
    font-weight: 600;
    font-size: 10px;
    opacity: 0.72;
    word-break: break-word;
}
/* Сколько раз шаблон уже списан в выбранный день */
.wo-tpl-chip-badge {
    position: absolute !important;
    top: -5px !important;
    left: -5px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 60 !important;
    min-width: 13px;
    width: 13px;
    height: 13px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--primary, var(--accent, #7c3aed));
    color: var(--primary-contrast, #fff);
    border: 1px solid var(--card-bg, var(--surface, #fff));
    font-size: 8px;
    font-weight: 800;
    line-height: 11px;
    text-align: center;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    pointer-events: none;
}
.wo-tpl-chip {
    position: relative !important;
    overflow: visible !important;
}
.wo-tpl-cat-grid,
.wo-tpl-cat-body,
#wo-templates-list {
    overflow: visible;
}
.wo-tpl-chip.has-uses {
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb, 124, 58, 237), 0.35);
}
@media (max-width: 559px) {
    .wo-tpl-chip-main {
        font-size: 11px;
        padding: 5px 6px;
        text-align: center;
    }
}
.wo-tpl-cat-body {
    padding: 6px 8px 8px !important;
}
.wo-tpl-cat-head {
    padding: 6px 10px !important;
}
.wo-tpl-chip-actions {
    display: flex;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.28s ease;
}
.wo-tpl-chip.actions-open .wo-tpl-chip-actions { max-width: 90px; }
.wo-tpl-chip-actions button {
    border: none;
    border-left: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    width: 34px;
}

#wo-templates-list.delete-mode .wo-tpl-chip { position: relative; }

/* Крестики удаления шаблонов — по id контейнера (класс мог не совпасть) */
#wo-templates-list.delete-mode .wo-tpl-chip {
    position: relative !important;
}
#wo-templates-list.delete-mode .wo-tpl-chip-del-x {
    display: flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    z-index: 50 !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
    pointer-events: auto !important;
}
#wo-templates-list.delete-mode .wo-tpl-chip-main {
    padding-right: 18px !important;
}

.settings-item.is-locked,
.settings-item.is-locked span { opacity: 0.45; cursor: not-allowed; }
.settings-item.is-locked input { pointer-events: none; opacity: 0.5; }
.settings-item.is-locked {
    background: rgba(127,127,127,0.08);
    border-radius: 8px;
}

/* === Крестики шаблонов (финальные правила) === */
#wo-templates-list .wo-tpl-chip-del-x {
    display: none !important;
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    z-index: 50 !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    align-items: center;
    justify-content: center;
}
#wo-templates-list.delete-mode .wo-tpl-chip-del-x {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#wo-templates-list.delete-mode .wo-tpl-chip {
    position: relative !important;
    overflow: hidden !important;
}
#wo-templates-list.delete-mode .wo-tpl-chip-main {
    padding-right: 18px !important;
}

#auth-overlay { z-index: 22000 !important; }
#confirm-overlay.open, #alert-overlay.open, #conflict-overlay.open { z-index: 23000 !important; }
/* --- Фикс: кнопки всегда в одной вертикали у правого края карточки дня ---
   Причина «пляски»: .wo-item был display:flex, из-за этого .wo-item-top
   сжимался по ширине текста, и кнопки стояли сразу после названия. */
.wo-day-block .wo-item,
#writeoffs .wo-day-block .wo-item,
.wo-day-block .wo-item.wo-item--day {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    position: relative !important;
    gap: 0 !important;
}
.wo-day-block .wo-item-top,
#writeoffs .wo-day-block .wo-item-top,
.wo-day-block .wo-item--day .wo-item-top {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 6px !important;
    flex: none !important;
    align-self: stretch !important;
}
.wo-day-block .wo-item-main,
#writeoffs .wo-day-block .wo-item-main,
.wo-day-block .wo-item--day .wo-item-main {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    overflow: hidden !important;
    display: block !important;
}
.wo-day-block .wo-item-actions,
#writeoffs .wo-day-block .wo-item-actions,
.wo-day-block .wo-item--day .wo-item-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 60px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    position: static !important;
    box-sizing: border-box !important;
}
.wo-day-block .wo-item-edit-btn,
.wo-day-block .wo-item-del,
#writeoffs .wo-day-block .wo-item-edit-btn,
#writeoffs .wo-day-block .wo-item-del {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    flex: 0 0 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
    -webkit-font-smoothing: antialiased;
    image-rendering: auto;

    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.wo-day-block .wo-item-edit-btn,
#writeoffs .wo-day-block .wo-item-edit-btn {
    border: 1px solid rgba(var(--primary-rgb), 0.35) !important;
    background: rgba(var(--primary-rgb), 0.16) !important;
    color: var(--primary) !important;
}
.wo-day-block .wo-item-del,
#writeoffs .wo-day-block .wo-item-del {
    border: 1px solid rgba(198, 40, 40, 0.28) !important;
    background: rgba(198, 40, 40, 0.10) !important;
    color: #c62828 !important;
}
/* --- Фикс 1.6.5 (восстановлено повторно): карандаш и урна в карточках
   списаний должны быть ОДНОГО размера и прижаты к правому краю во всех
   контекстах. --- */
.wo-item-top { flex-wrap: nowrap; }
.wo-item-actions,
#writeoffs .wo-day-block .wo-item-actions {
    margin-left: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    align-items: center !important;
}
.wo-item-edit-btn, #writeoffs .wo-item-edit-btn, #writeoffs .wo-day-block .wo-item-edit-btn,
.wo-item-del, #writeoffs .wo-item-del, #writeoffs .wo-day-block .wo-item-del {
    font-size: 14px !important;
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}

/* Полоска категорий над клавиатурой (имитация IME-подсказок для WebView) */
.wot-category-wrap { position: relative; }
#wot-kb-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10080;
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #1c1c1e;
    border-top: 1px solid rgba(255,255,255,0.12);
    box-sizing: border-box;
}
#wot-kb-bar::-webkit-scrollbar { display: none; }
#wot-kb-bar.is-visible { display: flex; }
.wot-kb-chip {
    flex: 0 0 auto;
    margin: 0;
    border: 1px solid rgba(255,255,255,0.22);
    background: #2c2c2e;
    color: #f2f2f7;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.wot-kb-chip:active {
    background: #3a3a3c;
    border-color: rgba(255,255,255,0.4);
}


.cocktail-ing-row{
    grid-template-columns: minmax(0,1fr) 70px 82px minmax(58px,auto) 30px !important;
    min-width: 0;
}
.cocktail-ing-unit-trigger{
    flex:0 0 82px !important;
    width:82px !important;
    min-width:82px !important;
    max-width:82px !important;
    min-height:38px;
    padding:6px 6px !important;
    font-size:12px;
    justify-content:center;
    gap:4px !important;
}
.cocktail-ing-unit-trigger span{
    display:block;
    flex:1 1 auto;
    min-width:0;
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
    text-align:center;
}

/* Только исправление верхней строки: кнопки Undo/Redo не изменяем. */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
}
#app-root {
    max-width: 100%;
    overflow-x: hidden;
}
.header,
.header-title-row {
    max-width: 100%;
    box-sizing: border-box;
}
.header-status-cluster {
    min-width: 0;
    overflow: hidden;
}
.header-status-user,
.header-status-clock {
    visibility: visible !important;
}

/* Account administration */
.account-admin-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.account-admin-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.account-admin-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.account-admin-main span,.account-admin-main small{font-size:12px;opacity:.72;}
.account-permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:10px;}
.account-permission-grid label,.account-permission-section label{font-size:13px;display:flex;align-items:center;gap:6px;}
.account-permission-section{padding:9px 0;border-top:1px solid var(--border);}
.account-permission-section>b{display:block;margin-bottom:7px;}
.account-permission-section{display:grid;grid-template-columns:1fr repeat(3,auto);gap:7px;}
.account-permission-section>b{grid-column:1/-1;}
@media(max-width:520px){.account-permission-grid{grid-template-columns:1fr;}.account-permission-section{grid-template-columns:1fr 1fr;}.account-permission-section>b{grid-column:1/-1;}}


/* Напитки: маленькая кнопка добавления рядом с выбором */
.drink-add-small{
    flex:0 0 40px !important;
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    padding:0 !important;
    border:1.5px solid var(--primary) !important;
    border-radius:10px !important;
    background:var(--card) !important;
    color:var(--primary) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:24px !important;
    font-weight:700 !important;
    line-height:1 !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
}
.drink-add-small:active{transform:translateY(1px);}


/* v49: кнопка + полностью повторяет кнопку удаления по размеру и стилю */
.select-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-items: center;
    overflow: visible;
}
.select-row > .custom-select-trigger {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
}
.select-row > .btn-delete-large,
.select-row > .drink-add-small {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid var(--border, #dfe6e9) !important;
    border-radius: 12px !important;
    background: var(--card, #ffffff) !important;
    color: var(--text, #2d3436) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}
.select-row > .drink-add-small span {
    display: block !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* v49: единица измерения должна показываться целиком, включая точку */
.cocktail-ing-row {
    grid-template-columns: minmax(0,1fr) 70px 96px minmax(58px,auto) 30px !important;
}
.cocktail-ing-unit-trigger {
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: nowrap !important;
    padding: 6px 10px !important;
}
.cocktail-ing-unit-trigger span {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    text-align: center !important;
}
@media (max-width: 420px) {
    .select-row { gap: 6px; }
    .select-row > .btn-delete-large,
    .select-row > .drink-add-small {
        flex-basis: 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }
    .cocktail-ing-row {
        grid-template-columns: minmax(0,1fr) 70px 96px minmax(58px,auto) 30px !important;
    }
}

/* Старые большие кнопки добавления/редактирования рецепта больше не используются. */
.recipe-actions-grid,.btn-recipe-add,.btn-recipe-edit{display:none !important;}

/* Все кнопки сохранения должны оставаться реально нажимаемыми на телефоне. */
.btn-main.primary,.ttk-btn-save{
    position:relative;
    z-index:2;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    -webkit-user-select:none;
    user-select:none;
}
.overlay-actions .btn-main.primary,.overlay-actions .ttk-btn-save{
    position:relative;
    z-index:5;
}

/* Заставка запуска: закрывает интерфейс до состояния UI_READY (см. js/app/00-boot-state.js) */
#boot-splash { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0f1115; color: #fff; transition: opacity .2s; animation: mb-boot-failsafe .01s 10s forwards; }
#boot-splash .boot-title { font: 700 28px/1.2 system-ui, sans-serif; letter-spacing: .5px; }
#boot-splash .boot-sub { margin-top: 8px; font: 14px/1.2 system-ui, sans-serif; opacity: .6; }
html.mb-ui-ready #boot-splash { opacity: 0; pointer-events: none; }
body:not(.mb-ui-ready) #app-root { visibility:hidden !important; }
#boot-splash { display:none !important; }
@keyframes mb-boot-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* v53.4.6 FINAL live-fix: settings redesign */
.settings-box{display:flex!important;flex-direction:column!important;max-width:520px!important;width:calc(100vw - 28px)!important;max-height:88vh!important;border-radius:22px!important;overflow:hidden!important}
.settings-body{display:flex;flex-direction:column;gap:12px;padding:14px!important;background:var(--bg,#f7f8fa)}
.settings-kicker{font-size:10px;letter-spacing:.12em;font-weight:800;opacity:.55;margin-bottom:2px}
.settings-card{background:var(--card,#fff);border:1px solid var(--border,#e5e7eb);border-radius:16px;padding:14px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.settings-card-title{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.settings-card-title span{font-weight:800;font-size:15px}.settings-card-title small,.settings-choice small,.settings-account small{opacity:.58;font-size:11px}
.settings-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.settings-choice{border:1px solid var(--border,#dfe3e8);background:transparent;border-radius:13px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:4px;color:inherit}.settings-choice span{font-size:18px}.settings-choice.primary{border-color:var(--primary,#0d7ff2);box-shadow:0 0 0 2px rgba(13,127,242,.12);background:rgba(13,127,242,.06)}
.settings-account{display:flex;align-items:center;gap:10px;padding:9px 0 12px}.settings-account-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;flex:none}.settings-account b{display:block;font-size:13px;word-break:break-all}.settings-wide-btn{width:100%;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border,#dfe3e8);background:transparent;border-radius:12px;padding:11px 12px;font-weight:700;color:inherit}.settings-wide-btn span{font-size:22px;opacity:.5}.settings-info-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--border,#edf0f2);font-size:13px}.settings-info-row:first-of-type{border-top:0}.settings-info-row b{font-size:12px;opacity:.65}
#boot-splash .boot-sub{display:none!important}.tabs-loading #boot-splash{display:flex}.tabs-loading.account-ui-loading #boot-splash{display:flex}
@media(max-width:430px){.settings-choice-grid{grid-template-columns:1fr}.settings-box{width:calc(100vw - 18px)!important}}

/* v53.4.6 startup: no duplicate technical text during bootstrap */
#boot-splash .boot-title,#boot-splash .boot-sub{display:none!important}
#boot-splash:after{content:'';width:28px;height:28px;border:3px solid rgba(255,255,255,.22);border-top-color:#fff;border-radius:50%;animation:mb-boot-spin .7s linear infinite}
@keyframes mb-boot-spin{to{transform:rotate(360deg)}}

.account-admin-note{font-size:12px;line-height:1.4;opacity:.62;margin:0 0 12px;padding:10px 12px;border-radius:10px;background:rgba(13,127,242,.06)}


/* MultiBar — Settings is an application screen, not a modal. */
.settings-screen{display:none;position:fixed;inset:0;z-index:12000;background:var(--bg);color:var(--text);overflow:hidden;align-items:stretch;justify-content:stretch;padding:0}
.settings-screen.open{display:flex;opacity:1;visibility:visible}
.settings-screen .settings-box{width:100%!important;max-width:none!important;height:100dvh!important;max-height:none!important;border-radius:0!important;overflow:hidden!important;box-shadow:none!important;background:var(--bg)!important;border:0!important}
.settings-screen .settings-body{flex:1;overflow:auto;padding:16px 16px 96px!important;max-width:900px;width:100%;margin:0 auto;box-sizing:border-box}
.settings-screen .overlay-header{padding:14px 16px;position:sticky;top:0;z-index:2;background:var(--card);border-bottom:1px solid var(--border)}
.settings-screen .overlay-actions{padding:10px 16px;position:sticky;bottom:0;z-index:2;background:var(--card);border-top:1px solid var(--border)}
.settings-account{display:grid!important;grid-template-columns:12px minmax(0,1fr);align-items:start!important;gap:12px!important}
.settings-account-dot{margin-top:5px}
.settings-account b,.settings-account small{display:block;max-width:100%}
.settings-account small{margin-top:3px;line-height:1.35}
.settings-wide-btn{box-sizing:border-box!important;text-align:left!important;min-height:46px}
.account-permission-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.account-permission-block-title{font-size:12px;font-weight:800;opacity:.65;margin:14px 0 7px}
.account-permission-section{display:block!important;padding:12px!important;border:1px solid var(--border)!important;border-radius:13px!important;margin:8px 0!important;background:rgba(127,127,127,.035)}
.account-permission-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-bottom:10px}
.account-permission-section-head>b{font-size:14px}
.account-permission-section-head>span{display:flex;gap:6px;flex-wrap:wrap}
.account-permission-actions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.account-permission-actions-grid label,.account-permission-grid label{box-sizing:border-box;min-height:40px;padding:8px 9px;border:1px solid var(--border);border-radius:10px;background:var(--bg);display:flex;align-items:center;gap:7px;overflow:hidden}
.account-permission-actions-grid input,.account-permission-grid input{flex:0 0 auto}
@media(max-width:560px){.account-permission-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.account-permission-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:380px){.account-permission-actions-grid,.account-permission-grid{grid-template-columns:1fr!important}}


/* Activity log filter — app-styled native control, no embedded web view. */
.activity-log-filter-wrap{padding:10px 12px 8px;display:grid;gap:7px;}
.activity-log-filter-label{display:block;font-size:12px;font-weight:650;color:var(--muted,#777);}
.activity-log-filter{width:100%;min-height:44px;box-sizing:border-box;border:1px solid var(--border,rgba(127,127,127,.24));border-radius:12px;padding:10px 38px 10px 12px;background:var(--card-bg,var(--surface,#fff));color:var(--text,inherit);font:inherit;font-size:14px;outline:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.activity-log-filter:focus{border-color:var(--primary,#6478ff);box-shadow:0 0 0 3px rgba(100,120,255,.14);}
[data-theme="dark"] .activity-log-filter,[data-theme="dark-purple"] .activity-log-filter{background:var(--card-bg,#292929);color:var(--text,#f5f5f5);}

/* MultiBar 0.1.1: Activity Log dedicated full-screen workspace */
#activity-log-overlay.activity-log-overlay.open{background:var(--bg);padding:0;align-items:stretch;justify-content:stretch;}
#activity-log-overlay .overlay-box{width:100%;max-width:none;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;}
#activity-log-overlay .overlay-header{justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 18px 14px;}
#activity-log-overlay .overlay-body.activity-log-filter-wrap{padding:14px 18px 10px;}
#activity-log-overlay .activity-log-filter{min-height:40px;min-width:0;width:100%;box-sizing:border-box;border-radius:12px;font-size:12px;padding:6px 7px;}
#activity-log-overlay .activity-log-filter-label{font-size:10px;line-height:1.2;min-height:24px;display:flex;align-items:flex-end;}
#activity-log-overlay .activity-log-filter-wrap{padding:8px 10px 8px!important;}
#activity-log-overlay .activity-log-filter-bottom{margin-top:7px;}
#activity-log-overlay #activity-log-list{padding:8px 14px 24px!important;}
#activity-log-overlay .activity-log-entry{border:1px solid var(--border);border-radius:14px;background:var(--card-bg,var(--surface));padding:12px 14px;margin:0 0 9px;}
#activity-log-overlay .overlay-actions{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
.orders-item-name.is-delivered{ text-decoration:line-through!important; opacity:.62!important; }

/* MultiBar 0.1.1: readable activity-log date/time range filters */
.activity-log-filter-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:6px;width:100%;align-items:end;}
.activity-log-filter-field{display:grid;gap:5px;min-width:0;}
.activity-log-date{display:block;min-width:0;padding-right:10px;font-variant-numeric:tabular-nums;}
.activity-log-filter-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted,#777);}
.activity-log-filter-bottom .btn-main{min-height:36px;padding:7px 12px;font-size:12px;}
#activity-log-overlay .activity-log-filter-wrap{flex:0 0 auto;background:var(--bg);border-bottom:1px solid var(--border);}
#activity-log-overlay .overlay-box{display:flex;flex-direction:column;overflow:hidden;}
#activity-log-overlay #activity-log-list{flex:1 1 auto;min-height:0;overflow:auto;}
.wo-tpl-chip{position:relative;}
.wo-tpl-chip-badge{top:3px;left:3px;right:auto;min-width:14px;width:14px;height:14px;line-height:14px;padding:0;font-size:9px;background:var(--primary,var(--accent,#7c3aed));border:1px solid var(--card,var(--surface,#fff));}
@media(min-width:560px){.activity-log-filter-grid{grid-template-columns:1.2fr 1fr 1fr;gap:10px;}#activity-log-overlay .activity-log-filter{font-size:14px;min-height:44px;}#activity-log-overlay .activity-log-filter-label{font-size:12px;min-height:0;}}

/* R17: permission-hidden tabs are removed from flex layout; visible tabs share the full width. */
body.nav-tabs-bar .tabs > .tab-btn.hidden-tab, body.nav-tabs-bar .tabs > .tab-btn[hidden], body.nav-tabs-bar .tabs > .tab-btn[aria-hidden="true"] { display:none !important; }
body.nav-tabs-bar .tabs > .tab-btn:not(.hidden-tab):not([hidden]):not([aria-hidden="true"]) { flex:1 1 0; }

/* 1.1.7: independent cloud-write confirmation indicator */
.header-save-indicator {
  display:inline-block; flex:0 0 8px; width:8px; height:8px; border-radius:50%;
  background:var(--border, #9ca3af); opacity:.7; margin-left:4px;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--border, #9ca3af) 18%, transparent);
  transition:background .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.header-save-indicator.is-saving { background:#eab308; opacity:1; box-shadow:0 0 0 3px rgba(234,179,8,.18); }
.header-save-indicator.is-saved { background:#16a34a; opacity:1; box-shadow:0 0 0 3px rgba(22,163,74,.2); }
.header-save-indicator.is-error { background:#dc2626; opacity:1; box-shadow:0 0 0 3px rgba(220,38,38,.2); }
.header-save-indicator.is-offline { background:#64748b; opacity:1; box-shadow:0 0 0 3px rgba(100,116,139,.28); }
.header-save-indicator.is-saving { animation:mbSavePulse 1.1s ease-in-out infinite; }
@keyframes mbSavePulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) { .header-save-indicator.is-saving { animation:none; } }

/* === Собственное окно выбора даты и времени (вместо системных пикеров WebView) === */
.mb-dt-trigger { width: 100%; text-align: left; }
.mb-dt-trigger .mb-dt-empty { opacity: .55; }
.activity-log-filter-field .mb-dt-trigger { min-height: 38px; }
.mb-picker-overlay { position: fixed; inset: 0; z-index: 9700; display: none; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: rgba(0,0,0,.4); }
.mb-picker-overlay.open { display: flex; }
.mb-picker-box { width: min(360px, 100%); max-height: min(88vh, 720px); display: flex; flex-direction: column; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 16px 45px rgba(0,0,0,.35); overflow: hidden; }
.mb-picker-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.mb-picker-header h3 { margin: 0; flex: 1; font-size: 16px; }
.mb-picker-body { padding: 10px 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mb-picker-nav { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.mb-picker-nav button { flex: 0 0 38px; height: 38px; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 10px; font-size: 18px; cursor: pointer; }
.mb-picker-month { flex: 1; text-align: center; font-weight: 600; font-size: 15px; }
.mb-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mb-picker-week span { text-align: center; font-size: 12px; opacity: .6; padding: 2px 0; }
.mb-picker-day, .mb-picker-cell { height: 38px; border: 1px solid transparent; background: transparent; color: var(--text); border-radius: 10px; font-size: 15px; cursor: pointer; }
.mb-picker-day:hover, .mb-picker-cell:hover { background: var(--accent-bg); }
.mb-picker-day.today { border-color: var(--primary); }
.mb-picker-day.sel, .mb-picker-cell.sel { background: var(--primary); color: #fff; font-weight: 600; }
.mb-picker-timehead { margin: 12px 0 4px; font-size: 15px; text-align: center; }
.mb-picker-timehead b { font-size: 22px; }
.mb-picker-sub { font-size: 12px; opacity: .6; margin: 8px 0 4px; }
.mb-picker-hours { grid-template-columns: repeat(6, 1fr); }
.mb-picker-mins { grid-template-columns: repeat(6, 1fr); }
.mb-picker-fine { display: flex; gap: 8px; margin-top: 8px; }
.mb-picker-fine button { flex: 1; height: 36px; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 10px; cursor: pointer; }
.mb-picker-actions { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.mb-picker-actions .btn-main { flex: 1 1 0; min-width: 0; padding: 10px 4px; font-size: 14px; white-space: nowrap; }

/* =====================================================================
   MultiBar 1.7.0 — внешний вид: поиск-«клавиша», кольцо сохранения, чат,
   «Внешний вид» (обои, прозрачность), свои элементы вместо системных.
   ===================================================================== */
:root { --card-rgb: 255,255,255; --bg-rgb: 244,247,246; --mb-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E %3Cg transform='translate(18 22) rotate(-12 13 14)'%3E%3Cpath d='M0 0h26L13 15v13M6 28h14M4 4h18'/%3E%3Ccircle cx='21' cy='-4' r='3.2'/%3E%3C/g%3E %3Cg transform='translate(92 30) rotate(18 14 14)'%3E%3Ccircle cx='14' cy='14' r='13'/%3E%3Ccircle cx='14' cy='14' r='8.5'/%3E%3Cpath d='M14 5.5v17M5.5 14h17M8 8l12 12M20 8L8 20'/%3E%3C/g%3E %3Cg transform='translate(170 16) rotate(10 12 12)'%3E%3Cpath d='M12 0l3.5 7.6 8.3 1-6.2 5.7 1.7 8.2L12 18.4 4.7 22.5l1.7-8.2L.2 8.6l8.3-1z'/%3E%3C/g%3E %3Cg transform='translate(244 34) rotate(-8 12 14)'%3E%3Cpath d='M0 8h20v10a8 8 0 01-8 8H8a8 8 0 01-8-8V8zM20 11h3a4 4 0 010 8h-3M6 0c0 2-2 2-2 4M12 0c0 2-2 2-2 4'/%3E%3C/g%3E %3Cg transform='translate(296 96) rotate(30 8 8)'%3E%3Cpath d='M8 0l2.3 5 5.5.7-4 3.8 1 5.5L8 12.3 3.2 15l1-5.5-4-3.8 5.5-.7z'/%3E%3C/g%3E %3Cg transform='translate(38 100) rotate(14 14 13)'%3E%3Cpath d='M2 6l12-6 12 6v14l-12 6-12-6z'/%3E%3Cpath d='M2 6l12 6 12-6M14 12v14'/%3E%3C/g%3E %3Cg transform='translate(118 108)'%3E%3Cpath d='M10 0l2.4 7.6L20 10l-7.6 2.4L10 20l-2.4-7.6L0 10l7.6-2.4z'/%3E%3C/g%3E %3Cg transform='translate(186 90) rotate(-16 11 20)'%3E%3Cpath d='M8 0h6M9 0v8l-4 6v22a3 3 0 003 3h6a3 3 0 003-3V14l-4-6V0M5 22h12'/%3E%3C/g%3E %3Cg transform='translate(248 120) rotate(25 15 15)'%3E%3Cpath d='M2 26C2 12 12 2 28 2c0 16-10 26-24 26zM2 26L16 12'/%3E%3C/g%3E %3Cg transform='translate(20 178) rotate(-6 14 16)'%3E%3Ccircle cx='7' cy='24' r='6'/%3E%3Ccircle cx='21' cy='26' r='6'/%3E%3Cpath d='M7 18C9 10 13 4 18 1M21 20c-1-7-2-13-3-19'/%3E%3C/g%3E %3Cg transform='translate(92 176) rotate(12 11 15)'%3E%3Cpath d='M2 0h18l-1.5 9a7.5 7.5 0 01-15 0zM11 16.5V29M5 29h12'/%3E%3C/g%3E %3Cg transform='translate(160 186) rotate(-14 13 12)'%3E%3Cpath d='M13 24S0 16 0 8a6 6 0 0113-3 6 6 0 0113 3c0 8-13 16-13 16z'/%3E%3C/g%3E %3Cg transform='translate(226 196)'%3E%3Ccircle cx='3' cy='3' r='2.4'/%3E%3Ccircle cx='14' cy='9' r='2.4'/%3E%3Ccircle cx='5' cy='16' r='2.4'/%3E%3C/g%3E %3Cg transform='translate(282 176) rotate(-20 10 10)'%3E%3Cpath d='M0 10a10 10 0 0020 0'/%3E%3Cpath d='M3 10a7 7 0 0014 0'/%3E%3C/g%3E %3Cg transform='translate(30 258) rotate(-4 22 8)'%3E%3Cpath d='M0 8c5-8 10-8 15 0s10 8 15 0 10-8 15 0'/%3E%3C/g%3E %3Cg transform='translate(112 250) rotate(-20 14 18)'%3E%3Cpath d='M0 14a14 14 0 0028 0z'/%3E%3Cpath d='M4 14a10 10 0 0020 0M14 14v9M7 14l-1 7M21 14l1 7'/%3E%3C/g%3E %3Cg transform='translate(190 254) rotate(-18 8 8)'%3E%3Cpath d='M8 0l2.3 5 5.5.7-4 3.8 1 5.5L8 12.3 3.2 15l1-5.5-4-3.8 5.5-.7z'/%3E%3C/g%3E %3Cg transform='translate(250 244) rotate(8 11 15)'%3E%3Cpath d='M2 8h18l-2 22H4zM14 8l6-8M3 16h16'/%3E%3C/g%3E %3Cg transform='translate(70 140)'%3E%3Ccircle cx='3' cy='3' r='2'/%3E%3C/g%3E%3Cg transform='translate(220 150)'%3E%3Ccircle cx='2' cy='2' r='1.8'/%3E%3C/g%3E%3Cg transform='translate(150 300)'%3E%3Ccircle cx='2' cy='2' r='1.8'/%3E%3C/g%3E%3Cg transform='translate(300 280)'%3E%3Ccircle cx='2' cy='2' r='1.8'/%3E%3C/g%3E%3Cg transform='translate(60 310)'%3E%3Ccircle cx='2' cy='2' r='1.6'/%3E%3C/g%3E %3C/svg%3E"); }
[data-theme="dark"] { --card-rgb: 47,54,64; --bg-rgb: 30,39,46; }
[data-theme="dark-purple"] { --card-rgb: 31,27,46; --bg-rgb: 19,17,28; }

/* ---------- Поиск: та же «3D-клавиша», что и кнопки назад/вперёд/калькулятор ---------- */
.global-search-bar,
form.global-search-bar {
    background: linear-gradient(180deg, #3d4258 0%, #2b3044 55%, #252a3c 100%) !important;
    border: 1.5px solid rgba(140, 120, 200, 0.45) !important;
    border-radius: 13px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
    padding: 3px 6px 3px 3px !important;
    min-height: 48px;
    color: #e6e9f5;
    transition: border-color .2s ease, box-shadow .2s ease;
}
[data-theme="dark"] .global-search-bar, [data-theme="dark"] form.global-search-bar {
    border-color: rgba(160, 140, 220, 0.4) !important;
    background: linear-gradient(180deg, #3a3f55 0%, #282d40 55%, #1f2435 100%) !important;
}
.global-search-bar.is-focused, .global-search-bar:focus-within {
    border-color: rgba(170, 150, 240, 0.8) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(140, 120, 200, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
}
.global-search-bar #global-search-input { color: #eef0fa !important; font-weight: 500; caret-color: #c4b5fd; }
.global-search-bar #global-search-input::placeholder { color: #a8b0c8; opacity: 1; }
.global-search-bar #global-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.global-search-bar .drawer-toggle-btn, .global-search-bar .search-submit-btn, .global-search-bar .tabs-drawer-toggle-btn {
    color: #a8b0c8 !important; background: transparent !important; border: 0 !important; opacity: 1 !important; position: relative;
    border-radius: 10px !important;
}
.global-search-bar .drawer-toggle-btn:active, .global-search-bar .search-submit-btn:active, .global-search-bar .tabs-drawer-toggle-btn:active {
    background: rgba(255,255,255,.08) !important; transform: translateY(1px);
}
.global-search-bar .drawer-toggle-btn { width: 42px !important; height: 42px !important; }
.global-search-bar .search-submit-btn { width: 38px !important; height: 38px !important; }
.menu-dot { position: absolute; top: 8px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px #2b3044; animation: mbDotIn .3s ease; }
.menu-dot[hidden] { display: none !important; }
@keyframes mbDotIn { from { transform: scale(0); } to { transform: scale(1); } }

/* Результаты поиска — группами */
.global-search-results { padding: 6px; border-radius: 16px !important; max-height: min(70vh, 560px) !important; overscroll-behavior: contain; }
.search-group + .search-group { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
.search-group-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 4px; font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--text); opacity: .75; }
.search-group-ico { display: inline-flex; color: var(--primary); }
.search-group-name { flex: 1; }
.search-group-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--accent-bg); color: var(--primary); font-size: 11px; text-align: center; }
.search-result-item { display: flex !important; align-items: center; gap: 10px; border-radius: 10px; border-bottom: 0 !important; padding: 9px 10px !important; }
.search-result-item + .search-result-item { margin-top: 2px; }
.search-result-text { display: flex; flex-direction: column; min-width: 0; }
.search-result-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-ico { display: inline-flex; width: 28px; height: 28px; flex: 0 0 28px; align-items: center; justify-content: center; border-radius: 8px; background: var(--accent-bg); color: var(--primary); }
.search-result-item.is-supplier .search-result-title { color: var(--primary); }
.search-group-more { display: block; width: 100%; margin-top: 2px; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--primary); font-weight: 700; font-size: 13px; cursor: pointer; }
.search-group-more:active { background: var(--accent-bg); }
.search-result-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ---------- Кольцо сохранения (вместо цветной точки) ---------- */
.header-save-indicator.si-v2 {
    width: 20px !important; height: 20px !important; min-width: 20px; border-radius: 50% !important;
    background: transparent !important; box-shadow: none !important; opacity: 1 !important; animation: none !important;
    position: relative; display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; margin: 0 2px 0 0 !important;
}
.header-save-indicator.si-v2 svg { position: absolute; inset: 0; width: 20px; height: 20px; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .22s ease, transform .22s ease; }
.header-save-indicator.si-v2 .si-track { stroke: rgba(var(--primary-rgb), .18); stroke-width: 2.6; }
.header-save-indicator.si-v2 .si-arc { stroke: var(--primary); stroke-width: 2.6; stroke-dasharray: 16 60; transform-origin: 12px 12px; }
.header-save-indicator.si-v2 .si-check { stroke: var(--primary); stroke-width: 2.4; }
.header-save-indicator.si-v2 .si-check .si-done { stroke: rgba(var(--primary-rgb), .35); stroke-width: 2; }
.header-save-indicator.si-v2 .si-alert { stroke: var(--danger); stroke-width: 2.4; }
.header-save-indicator.si-v2 .si-offline { stroke: currentColor; stroke-width: 2; opacity: 0; }
.header-save-indicator.si-v2.is-saving .si-ring { opacity: 1; transform: scale(1); animation: mbRingSpin .85s linear infinite; }
.header-save-indicator.si-v2.is-saving .si-arc { animation: mbRingDash 1.4s ease-in-out infinite; }
.header-save-indicator.si-v2.is-saved .si-check { opacity: 1; transform: scale(1); }
.header-save-indicator.si-v2.is-saved .si-check path { stroke-dasharray: 14; stroke-dashoffset: 14; animation: mbCheckDraw .35s ease forwards .05s; }
.header-save-indicator.si-v2.is-error .si-alert { opacity: 1; transform: scale(1); animation: mbShake .4s ease; }
.header-save-indicator.si-v2.is-offline .si-offline { opacity: .7; transform: scale(1); }
@keyframes mbRingSpin { to { transform: rotate(360deg); } }
@keyframes mbRingDash { 0% { stroke-dasharray: 4 60; stroke-dashoffset: 0; } 50% { stroke-dasharray: 34 60; stroke-dashoffset: -10; } 100% { stroke-dasharray: 4 60; stroke-dashoffset: -53; } }
@keyframes mbCheckDraw { to { stroke-dashoffset: 0; } }
@keyframes mbShake { 0%,100% { transform: translateX(0) scale(1); } 25% { transform: translateX(-2px) scale(1); } 75% { transform: translateX(2px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .header-save-indicator.si-v2.is-saving .si-ring, .header-save-indicator.si-v2.is-saving .si-arc { animation-duration: 2.4s; } }

/* ---------- Нижнее меню действий ---------- */
.mb-sheet-overlay { position: fixed; inset: 0; z-index: 12400; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 10, 18, 0); pointer-events: none; transition: background .22s ease; }
.mb-sheet-overlay.open { background: rgba(8, 10, 18, .45); pointer-events: auto; }
.mb-sheet { width: min(520px, 100%); box-sizing: border-box; background: var(--card); color: var(--text); border-radius: 22px 22px 0 0; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(0,0,0,.25); transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); border: 1px solid var(--border); border-bottom: 0; }
.mb-sheet-overlay.open .mb-sheet { transform: translateY(0); }
.mb-sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--border); margin: 2px auto 8px; }
.mb-sheet-head { padding: 2px 6px 10px; }
.mb-sheet-title { font-weight: 800; font-size: 16px; }
.mb-sheet-sub { font-size: 12.5px; opacity: .65; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mb-sheet-items { display: flex; flex-direction: column; gap: 4px; }
.mb-sheet-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px; border: 0; border-radius: 14px; background: var(--bg); color: var(--text); font-size: 15px; font-weight: 650; text-align: left; cursor: pointer; }
.mb-sheet-item:active:not(:disabled) { transform: scale(.985); background: var(--accent-bg); }
.mb-sheet-item:disabled { opacity: .45; cursor: default; }
.mb-sheet-item.danger { color: var(--danger); }
.mb-sheet-ico { display: inline-flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border-radius: 10px; background: var(--accent-bg); color: var(--primary); }
.mb-sheet-item.danger .mb-sheet-ico { background: rgba(239, 68, 68, .12); color: var(--danger); }
.mb-sheet-label { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mb-sheet-label small { font-size: 12px; font-weight: 500; opacity: .62; margin-top: 2px; }
.mb-sheet-badge { min-width: 24px; padding: 2px 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-size: 12px; font-weight: 800; text-align: center; }
.mb-sheet-cancel { width: 100%; margin-top: 8px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: transparent; color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; }

/* ---------- Смахивание ---------- */
.mb-swipeable { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.toast-host .toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; text-align: left !important; cursor: grab; }
.toast .toast-ico { display: inline-flex; flex: 0 0 auto; }
.toast-success .toast-ico { color: var(--success); }
.toast-error .toast-ico { color: var(--danger); }
.toast-warning .toast-ico { color: #f59e0b; }
.toast-info .toast-ico { color: var(--primary); }
.toast .toast-text { flex: 1; min-width: 0; }

/* ---------- Свои списки выбора (вместо системных) ---------- */
.custom-select-trigger:after { content: '' !important; width: 14px; height: 14px; flex: 0 0 14px; opacity: .55 !important; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.mb-dt-trigger:after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat !important; }
.mb-select-trigger { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; min-height: 42px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.mb-select-trigger:after { display: none !important; }
.mb-select-trigger .mb-select-chevron { flex: 0 0 auto; opacity: .55; transition: transform .2s ease; }
.mb-select-trigger:active { transform: translateY(1px); }
.mb-select-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#custom-select-overlay { z-index: 12200 !important; }
.custom-select-overlay { background: rgba(8,10,18,.4) !important; backdrop-filter: none; }
.custom-select-overlay.open .custom-select-box { animation: mbPop .2s cubic-bezier(.2,.8,.2,1); }
.custom-select-option { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.custom-select-option.active:after { content: ''; width: 16px; height: 16px; flex: 0 0 16px; background: var(--primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.mb-picker-overlay { z-index: 12200 !important; }
@keyframes mbPop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Флажки — свои, в цветах темы */
input[type="checkbox"]:not(.mb-native) {
    -webkit-appearance: none; appearance: none; width: 20px; height: 20px; min-width: 20px; margin: 0; border-radius: 6px;
    border: 2px solid var(--border); background: var(--card); display: inline-grid; place-content: center; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; vertical-align: middle; position: relative;
}
input[type="checkbox"]:not(.mb-native)::after {
    content: ''; width: 12px; height: 12px; background: #fff; transform: scale(0); transition: transform .15s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="checkbox"]:not(.mb-native):checked { background: var(--primary); border-color: var(--primary); }
input[type="checkbox"]:not(.mb-native):checked::after { transform: scale(1); }
input[type="checkbox"]:not(.mb-native):focus-visible { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .25); outline: none; }
input[type="checkbox"]:not(.mb-native):disabled { opacity: .45; cursor: default; }
.settings-item input[type="checkbox"]:not(.mb-native) { width: 22px; height: 22px; }

/* Переключатель */
.mb-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; cursor: pointer; }
.mb-switch-row > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.mb-switch-row b { font-size: 14px; }
.mb-switch-row small { font-size: 11.5px; opacity: .62; margin-top: 2px; }
.mb-switch-row code { font-size: 10.5px; }
.mb-switch { position: relative; flex: 0 0 auto; width: 48px; height: 28px; }
.mb-switch input[type="checkbox"] { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0; opacity: 0; z-index: 2; cursor: pointer; }
.mb-switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background-color .2s ease; pointer-events: none; }
.mb-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.mb-switch input:checked + i { background: var(--primary); }
.mb-switch input:checked + i::after { transform: translateX(20px); }
.mb-switch input:disabled + i { opacity: .5; }
.mb-switch input:focus-visible + i { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .25); }

/* Ползунок */
.mb-slider { position: relative; height: 36px; margin: 4px 10px 2px; touch-action: none; cursor: pointer; outline: none; }
.mb-slider-track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px; background: var(--border); overflow: hidden; }
.mb-slider-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(var(--primary-rgb), .55), var(--primary)); border-radius: 6px; }
.mb-slider-thumb { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .12s ease; }
.mb-slider.dragging .mb-slider-thumb, .mb-slider:focus-visible .mb-slider-thumb { transform: scale(1.15); }
.mb-slider.is-disabled { opacity: .45; }

/* ---------- Меню (шторка): значок непрочитанного ---------- */
.side-drawer-actions button .drawer-btn-label { flex: 1; text-align: left; }
.drawer-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; background: #ef4444; color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; animation: mbDotIn .25s ease; }
.drawer-badge[hidden] { display: none !important; }
.side-drawer-actions .drawer-logout-btn { color: var(--danger); }

/* ---------- Чат ---------- */
.chat-overlay { position: fixed; inset: 0; z-index: 9450; display: none; background: rgba(0,0,0,.25); }
.chat-overlay.open { display: block; animation: mbFade .18s ease; }
@keyframes mbFade { from { opacity: 0; } to { opacity: 1; } }
.chat-screen { position: absolute; inset: 0; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; background: var(--bg); color: var(--text); overflow: hidden; animation: mbSlideUp .26s cubic-bezier(.2,.8,.2,1); }
@keyframes mbSlideUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.chat-screen::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--wp-bg, var(--bg)); pointer-events: none; }
.chat-screen::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--wp-ink, rgba(var(--primary-rgb), .07)); -webkit-mask: var(--mb-doodle) 0 0 / 320px 320px repeat; mask: var(--mb-doodle) 0 0 / 320px 320px repeat; }
.chat-screen > * { position: relative; z-index: 1; }
.chat-header { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.chat-head-btn { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; }
.chat-head-btn:active { background: var(--accent-bg); }
.chat-head-btn[hidden] { display: none !important; }
#chat-clear-btn { color: var(--danger); }
.chat-head-main { flex: 1; min-width: 0; }
.chat-title { font-size: 17px; font-weight: 800; }
.chat-subtitle { font-size: 12px; opacity: .65; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-members { display: flex; gap: 8px; overflow-x: auto; padding: 8px 10px; background: rgba(var(--card-rgb), .82); border-bottom: 1px solid var(--border); scrollbar-width: none; flex: 0 0 auto; }
.chat-members::-webkit-scrollbar { display: none; }
.chat-member { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); max-width: 200px; }
.chat-member-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.chat-member-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-member-name em { font-style: normal; font-weight: 500; opacity: .6; }
.chat-member-name .mb-icon { color: #f59e0b; vertical-align: -1px; }
.chat-member small { font-size: 11px; opacity: .6; white-space: nowrap; }
.chat-member.is-online small { color: var(--success); opacity: 1; font-weight: 700; }
.chat-avatar { --av: 210; position: relative; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--av), 70%, 58%), hsl(calc(var(--av) + 35), 70%, 46%)); user-select: none; }
.chat-avatar.ghost { background: transparent; }
.chat-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #9ca3af; border: 2px solid var(--card); }
.chat-member.is-online .chat-dot { background: #22c55e; }
.chat-messages { flex: 1; overflow-y: auto; padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.chat-empty { margin: auto; max-width: 280px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px; border-radius: 18px; background: rgba(var(--card-rgb), .85); border: 1px solid var(--border); color: var(--text); }
.chat-empty .mb-icon { color: var(--primary); }
.chat-empty span { font-size: 13px; opacity: .7; }
.chat-day { align-self: center; margin: 10px 0 6px; }
.chat-day span { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(var(--card-rgb), .78); border: 1px solid var(--border); font-size: 12px; font-weight: 700; opacity: .9; }
.chat-msg { display: flex; align-items: flex-end; gap: 7px; max-width: 86%; align-self: flex-start; margin-top: 6px; }
.chat-msg.grouped { margin-top: 0; }
.chat-msg.own { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg .chat-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 12px; }
.chat-bubble { position: relative; min-width: 72px; padding: 7px 11px 6px; border-radius: 16px 16px 16px 6px; background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); border: 1px solid rgba(0,0,0,.04); }
.chat-msg.grouped .chat-bubble { border-radius: 16px 16px 16px 16px; }
.chat-msg.own .chat-bubble { border-radius: 16px 16px 6px 16px; background: linear-gradient(160deg, rgba(var(--primary-rgb), .95), rgba(var(--primary-rgb), .8)); color: #fff; border-color: transparent; }
.chat-msg.own.grouped .chat-bubble { border-radius: 16px; }
.chat-msg.pending .chat-bubble { opacity: .75; }
.chat-msg.failed .chat-bubble { box-shadow: 0 0 0 2px var(--danger); }
.chat-author { --av: 210; font-size: 12.5px; font-weight: 800; color: hsl(var(--av), 65%, 45%); margin-bottom: 2px; }
[data-theme="dark"] .chat-author, [data-theme="dark-purple"] .chat-author { color: hsl(var(--av), 75%, 70%); }
.chat-text { font-size: 15px; line-height: 1.38; white-space: normal; overflow-wrap: anywhere; }
.chat-text a { color: inherit; text-decoration: underline; }
.chat-meta { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 2px; font-size: 11px; opacity: .65; }
.chat-msg.own .chat-meta { opacity: .85; }
.chat-edited { font-style: italic; }
.chat-status { display: inline-flex; }
.chat-status.failed { color: #fecaca; cursor: pointer; }
.chat-more { flex: 0 0 auto; align-self: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(var(--card-rgb), .7); color: var(--text); opacity: .55; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-more:active { opacity: 1; background: var(--accent-bg); }
.chat-edit-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card); border-top: 1px solid var(--border); }
.chat-edit-bar[hidden] { display: none !important; }
.chat-edit-bar .chat-edit-ico { color: var(--primary); flex: 0 0 auto; }
.chat-edit-text { flex: 1; min-width: 0; display: flex; flex-direction: column; border-left: 3px solid var(--primary); padding-left: 8px; }
.chat-edit-text b { font-size: 12.5px; color: var(--primary); }
.chat-edit-preview { font-size: 12.5px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-edit-cancel { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--border); }
.chat-input-wrap { position: relative; flex: 1; min-width: 0; }
#chat-input { width: 100%; box-sizing: border-box; min-height: 42px; max-height: 140px; resize: none; padding: 10px 14px; border: 1px solid var(--border); border-radius: 21px; background: var(--bg); color: var(--text); font: inherit; font-size: 15px; line-height: 1.35; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
#chat-input:focus { border-color: rgba(var(--primary-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .14); }
.chat-counter { position: absolute; right: 12px; bottom: -14px; font-size: 10px; opacity: .6; }
.chat-send-btn { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(var(--primary-rgb), .35); transition: transform .12s ease; }
.chat-send-btn:active { transform: scale(.92); }
.chat-send-btn .mb-icon { transform: translateX(-1px); }
.chat-send-btn.is-edit { background: var(--success); box-shadow: 0 4px 12px rgba(34,197,94,.35); }

/* ---------- Внешний вид ---------- */
.theme-picker-overlay.appearance-overlay { z-index: 12100 !important; }
.appearance-box { width: min(520px, calc(100vw - 20px)) !important; max-height: 90vh !important; display: flex !important; flex-direction: column; }
.appearance-body { overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding-top: 10px !important; }
.appearance-section-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .75; margin: 0 2px 8px; }
.appearance-section-title span { flex: 1; }
.appearance-section-title b { font-size: 13px; letter-spacing: 0; color: var(--primary); opacity: 1; }
.appearance-section-title .mb-icon { color: var(--primary); }
.appearance-themes, .appearance-wallpapers { display: grid; gap: 10px; }
.appearance-themes { grid-template-columns: repeat(3, 1fr); }
.appearance-wallpapers { grid-template-columns: repeat(4, 1fr); }
.theme-option-btn.appearance-theme, .wallpaper-opt { display: flex !important; flex-direction: column; align-items: stretch; gap: 6px; padding: 7px !important; margin: 0 !important; border: 2px solid var(--border) !important; border-radius: 16px !important; background: var(--bg) !important; color: var(--text) !important; cursor: pointer; text-align: center; transition: border-color .15s ease, transform .12s ease; }
.theme-option-btn.appearance-theme.active, .wallpaper-opt.active { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18); }
.theme-option-btn.appearance-theme:active, .wallpaper-opt:active { transform: scale(.97); }
.appearance-opt-label { font-size: 12.5px; font-weight: 750; }
.theme-option-btn.appearance-theme small { font-size: 10.5px; opacity: .6; margin-top: -4px; }
.appearance-theme-preview { position: relative; display: block; height: 74px; border-radius: 11px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); }
.appearance-theme-preview i { position: absolute; display: block; border-radius: 5px; }
.appearance-theme-preview .tp-head { left: 8px; right: 8px; top: 7px; height: 11px; background: linear-gradient(180deg, #3d4258, #252a3c); border-radius: 5px; }
.appearance-theme-preview .tp-card { left: 8px; right: 8px; top: 24px; height: 16px; }
.appearance-theme-preview .tp-card.short { top: 44px; right: 26px; height: 12px; }
.appearance-theme-preview .tp-bar { left: 0; right: 0; bottom: 0; height: 9px; border-radius: 0; }
.tp-light { background: #f4f7f6; } .tp-light .tp-card { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); } .tp-light .tp-card.short { background: #007bff; } .tp-light .tp-bar { background: #fff; border-top: 1px solid #dfe6e9; }
.tp-dark { background: #1e272e; } .tp-dark .tp-card { background: #2f3640; } .tp-dark .tp-card.short { background: #3b82f6; } .tp-dark .tp-bar { background: #2a323c; }
.tp-dark-purple { background: #13111C; } .tp-dark-purple .tp-card { background: #1f1b2e; } .tp-dark-purple .tp-card.short { background: #a855f7; } .tp-dark-purple .tp-bar { background: #1a1726; }
.wallpaper-preview { position: relative; display: block; height: 74px; border-radius: 11px; overflow: hidden; background: var(--wp-bg, var(--bg)); border: 1px solid rgba(0,0,0,.08); }
.wallpaper-preview::after { content: ''; position: absolute; inset: 0; background: var(--wp-ink, transparent); -webkit-mask: var(--mb-doodle) 0 0 / 160px 160px repeat; mask: var(--mb-doodle) 0 0 / 160px 160px repeat; }
.wp-none { --wp-bg: var(--bg); --wp-ink: transparent; }
.wallpaper-preview.wp-none { background: var(--bg); }
.wallpaper-preview.wp-none::before { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px dashed var(--border); }
.appearance-hint { font-size: 12px; opacity: .62; margin: 6px 4px 0; line-height: 1.4; }
#appearance-transparency { margin-top: 2px; }

/* Обои: цвета (свои для светлой и тёмных тем) */
.wp-mint, html[data-wallpaper="mint"] { --wp-bg: linear-gradient(160deg, #dff5e8 0%, #bfe8d6 48%, #d4efd0 100%); --wp-ink: rgba(20, 105, 78, .17); }
.wp-peach, html[data-wallpaper="peach"] { --wp-bg: linear-gradient(150deg, #ffe7d9 0%, #ffd3dc 50%, #fde6c8 100%); --wp-ink: rgba(176, 72, 62, .15); }
.wp-night, html[data-wallpaper="night"] { --wp-bg: linear-gradient(170deg, #cfd8ff 0%, #ddcdf6 55%, #f4d9ea 100%); --wp-ink: rgba(62, 52, 150, .15); }
[data-theme="dark"] .wp-mint, [data-theme="dark-purple"] .wp-mint, html[data-theme="dark"][data-wallpaper="mint"], html[data-theme="dark-purple"][data-wallpaper="mint"] { --wp-bg: linear-gradient(160deg, #0e2a25 0%, #12362f 50%, #0c211d 100%); --wp-ink: rgba(126, 224, 186, .11); }
[data-theme="dark"] .wp-peach, [data-theme="dark-purple"] .wp-peach, html[data-theme="dark"][data-wallpaper="peach"], html[data-theme="dark-purple"][data-wallpaper="peach"] { --wp-bg: linear-gradient(150deg, #2c1922 0%, #3b1f2d 50%, #2a1a1d 100%); --wp-ink: rgba(255, 168, 158, .10); }
[data-theme="dark"] .wp-night, [data-theme="dark-purple"] .wp-night, html[data-theme="dark"][data-wallpaper="night"], html[data-theme="dark-purple"][data-wallpaper="night"] { --wp-bg: radial-gradient(1200px 600px at 80% -10%, rgba(120, 90, 255, .25), transparent 60%), linear-gradient(170deg, #0b1030 0%, #1b1446 52%, #110c29 100%); --wp-ink: rgba(186, 194, 255, .12); }

/* Обои на главном экране: фон + рисунок, карточки — с выбранной прозрачностью */
html[data-wallpaper]:not([data-wallpaper="none"]) body { background: transparent !important; }
html[data-wallpaper]:not([data-wallpaper="none"]) body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--wp-bg); pointer-events: none; }
html[data-wallpaper]:not([data-wallpaper="none"]) body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--wp-ink); -webkit-mask: var(--mb-doodle) 0 0 / 320px 320px repeat; mask: var(--mb-doodle) 0 0 / 320px 320px repeat; }
html[data-wallpaper]:not([data-wallpaper="none"]) #app-root {
    --card: rgba(var(--card-rgb), var(--mb-surface-alpha, 1));
    --surface: rgba(var(--card-rgb), var(--mb-surface-alpha, 1));
    --bg: rgba(var(--bg-rgb), var(--mb-surface-alpha-soft, 1));
    --surface-2: rgba(var(--bg-rgb), var(--mb-surface-alpha-soft, 1));
}
html[data-wallpaper]:not([data-wallpaper="none"]) .header h1 { text-shadow: 0 1px 8px rgba(var(--bg-rgb), .9); }
html[data-wallpaper]:not([data-wallpaper="none"]) .header-status-cluster > * { text-shadow: 0 0 6px rgba(var(--bg-rgb), .95), 0 0 2px rgba(var(--bg-rgb), .9); }

/* ---------- Настройки ---------- */
.settings-body { background: var(--bg) !important; }
.settings-card { background: var(--card) !important; border-color: var(--border) !important; }
.settings-choice-ico { display: inline-flex; color: var(--primary); }
.settings-wide-btn { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; color: var(--text) !important; background: var(--bg) !important; border-color: var(--border) !important; cursor: pointer; }
.settings-wide-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.settings-wide-label .mb-icon { color: var(--primary); }
.settings-wide-btn small { font-size: 11px; opacity: .6; font-weight: 600; }
.settings-wide-btn:disabled { opacity: .6; }
.settings-chevron { opacity: .45; }
.settings-appearance-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); color: var(--text); cursor: pointer; text-align: left; }
.settings-appearance-row:active { transform: scale(.99); }
.settings-appearance-preview { position: relative; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; overflow: hidden; background: var(--wp-bg, var(--bg)); border: 1px solid var(--border); }
.settings-appearance-preview::after { content: ''; position: absolute; inset: 0; background: var(--wp-ink, transparent); -webkit-mask: var(--mb-doodle) 0 0 / 120px 120px repeat; mask: var(--mb-doodle) 0 0 / 120px 120px repeat; }
.settings-appearance-preview i { position: absolute; left: 9px; right: 9px; top: 15px; height: 10px; border-radius: 4px; background: var(--card); box-shadow: 0 6px 0 -1px rgba(var(--primary-rgb), .8); z-index: 1; }
.settings-appearance-preview.wp-none { background: var(--bg); }
.settings-appearance-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.settings-appearance-text b { font-size: 14px; }
.settings-appearance-text small { font-size: 12px; opacity: .65; }
.rules-status { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; margin-bottom: 8px; border: 1px solid var(--border); background: var(--bg); }
.rules-status-ico { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(245, 158, 11, .14); color: #d97706; }
.rules-status-text { display: flex; flex-direction: column; min-width: 0; }
.rules-status-text b { font-size: 12px; letter-spacing: .06em; color: #d97706; }
.rules-status-text small { font-size: 12.5px; line-height: 1.4; margin-top: 3px; color: var(--text); opacity: .8; }
.rules-status[data-state="ok"] .rules-status-ico { background: rgba(34, 197, 94, .14); color: var(--success); }
.rules-status[data-state="ok"] .rules-status-text b { color: var(--success); }
.rules-status[data-state="bad"] .rules-status-ico { background: rgba(239, 68, 68, .14); color: var(--danger); }
.rules-status[data-state="bad"] .rules-status-text b { color: var(--danger); }
[data-theme="dark"] .rules-status-ico, [data-theme="dark-purple"] .rules-status-ico { color: #fbbf24; }
[data-theme="dark"] .rules-status-text b, [data-theme="dark-purple"] .rules-status-text b { color: #fbbf24; }
.rules-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rules-actions[hidden] { display: none !important; }
.rules-actions .mb-switch-row { border-top: 1px solid var(--border); }
.rules-details { margin-top: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); color: var(--text); overflow: hidden; }
.rules-details summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 11px 12px; cursor: pointer; font-weight: 700; font-size: 13px; }
.rules-details summary::-webkit-details-marker { display: none; }
.rules-details .rules-chevron { transition: transform .2s ease; color: var(--primary); }
.rules-details[open] .rules-chevron { transform: rotate(180deg); }
.rules-list { font-size: 12.5px; line-height: 1.5; padding: 0 14px 0 30px; margin: 0 0 8px; }
.rules-note { font-size: 12px; opacity: .7; margin: 0 12px 8px; }
.rules-source { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; font-size: 10.5px; line-height: 1.45; padding: 10px 12px; margin: 0 10px 10px; border-radius: 10px; background: var(--card); color: var(--text); border: 1px solid var(--border); }
.settings-comment { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.settings-comment label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
#settings-release-comment { width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 14px; line-height: 1.4; outline: none; }
#settings-release-comment:focus { border-color: rgba(var(--primary-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .14); }
#settings-release-comment::placeholder { color: var(--text); opacity: .45; }
.settings-comment-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.settings-comment-actions small { font-size: 12px; opacity: .65; }

/* ---------- Задачи ---------- */
.tasks-title h3 { display: flex; align-items: center; gap: 8px; }
.tasks-title-ico { color: var(--success); }
.tasks-head-actions { display: flex; gap: 8px; }
.tasks-clear-btn { color: var(--danger) !important; }
.task-chip { display: inline-flex !important; align-items: center; gap: 4px; }
.task-chip .mb-icon { flex: 0 0 auto; opacity: .8; }
.task-chip-reminder { color: #b45309; background: rgba(245, 158, 11, .12) !important; }
[data-theme="dark"] .task-chip-reminder, [data-theme="dark-purple"] .task-chip-reminder { color: #fbbf24; }
.task-chip-repeat { color: var(--primary); }
.task-desc { font-size: 12.5px; opacity: .7; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.task-priority-high .mb-icon { color: #f59e0b; fill: #f59e0b; }
.tasks-search-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.tasks-search-wrap #tasks-search { width: 100%; padding-left: 34px !important; }
.tasks-search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); opacity: .5; pointer-events: none; }
#tasks-filter-trigger { width: auto; min-width: 128px; flex: 0 0 auto; min-height: 40px; }
.tasks-toolbar { display: flex; gap: 8px; align-items: stretch; }
.tasks-fab { display: inline-flex !important; align-items: center; justify-content: center; }
.task-switch-row { padding: 6px 0; }
.tasks-note { display: flex; gap: 8px; align-items: flex-start; }
.tasks-note .mb-icon { flex: 0 0 auto; color: var(--primary); margin-top: 1px; }
.tasks-carryover-head > span { display: inline-flex; align-items: center; gap: 6px; }
.tasks-carryover-notice { cursor: grab; }
.tasks-carryover-close { display: inline-flex; align-items: center; justify-content: center; }
.tasks-calendar-head button { display: inline-flex; align-items: center; justify-content: center; }
.tasks-dot.high { background: #f59e0b !important; }
.quick-priority-btn { display: inline-flex; align-items: center; gap: 6px; }
.quick-priority-btn.active .mb-icon { fill: currentColor; }
#quick-task-date-label { display: inline-flex; align-items: center; gap: 4px; }
.mb-prompt-overlay { z-index: 12450; }
.mb-prompt-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; outline: none; }
.mb-prompt-input:focus { border-color: rgba(var(--primary-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .14); }
.mb-prompt-actions { display: flex; gap: 10px; margin-top: 12px; }
.mb-prompt-actions .btn-main { flex: 1; }

/* ---------- ТТК: подкатегории (1.7.0) ---------- */
.ttk-cats { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 10px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ttk-cats::-webkit-scrollbar { display: none; }
.ttk-cats[hidden] { display: none !important; }
.ttk-cat-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, transform .1s ease; }
.ttk-cat-chip b { min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent-bg); color: var(--primary); font-size: 11px; line-height: 18px; text-align: center; }
.ttk-cat-chip .mb-icon { opacity: .75; }
.ttk-cat-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(var(--primary-rgb), .3); }
.ttk-cat-chip.active b { background: rgba(255,255,255,.25); color: #fff; }
.ttk-cat-chip.active .mb-icon { opacity: 1; }
.ttk-cat-chip:active { transform: scale(.96); }
.ttk-cat-add { border-style: dashed; color: var(--primary); }
.ttk-cat-manage { padding: 7px 9px; }
.ttk-group { border: 1px solid var(--border); border-radius: 14px; background: var(--card); overflow: hidden; }
.ttk-group + .ttk-group { margin-top: 2px; }
.ttk-group-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; background: transparent; color: var(--text); font-size: 15px; font-weight: 800; cursor: pointer; text-align: left; }
.ttk-group-ico { display: inline-flex; width: 30px; height: 30px; flex: 0 0 30px; align-items: center; justify-content: center; border-radius: 9px; background: var(--accent-bg); color: var(--primary); }
.ttk-group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttk-group-count { min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); font-size: 12px; text-align: center; }
.ttk-group-chev { display: inline-flex; opacity: .5; transition: transform .2s ease; }
.ttk-group.is-collapsed .ttk-group-chev { transform: rotate(-90deg); }
.ttk-group-body { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; }
.ttk-group.is-collapsed .ttk-group-body { display: none; }
.ttk-cat-picker { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.ttk-pick-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; font-weight: 650; cursor: pointer; }
.ttk-pick-chip.is-suggested { opacity: .78; border-style: dashed; }
.ttk-pick-chip.active { background: var(--primary); border-color: var(--primary); border-style: solid; color: #fff; opacity: 1; }
.ttk-pick-chip.is-new { color: var(--primary); border-style: dashed; }
.ttk-cat-new-row { display: flex; gap: 8px; margin-top: 8px; }
.ttk-cat-new-row[hidden] { display: none !important; }
.ttk-cat-new-row input { flex: 1; min-width: 0; }
.ttk-cat-new-row .btn-main { flex: 0 0 auto; padding: 0 14px; }
.ttk-add-btn .mb-icon { margin-right: 2px; }

/* ---------- Заказы: категории каталога — выезжающая панель (1.7.0) ---------- */
#orders-admin-overlay .overlay-box { position: relative; overflow: hidden; }
.orders-add-cat-field { display: flex; gap: 8px; align-items: stretch; }
.orders-add-cat-field .orders-add-cat-wrap { flex: 1; min-width: 0; position: relative; }
.orders-add-cat-field .orders-add-cat-wrap .orders-text-input { width: 100%; box-sizing: border-box; }
.orders-add-cat-btn { flex: 0 0 auto; display: inline-flex !important; align-items: center; gap: 6px; padding: 0 12px !important; min-height: 40px; border: 1px solid rgba(var(--primary-rgb), .35) !important; border-radius: 12px !important; background: var(--accent-bg) !important; color: var(--primary) !important; font-size: 13px !important; font-weight: 800 !important; cursor: pointer; white-space: nowrap; transition: transform .12s ease, background-color .15s ease; }
.orders-add-cat-btn b { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.orders-add-cat-btn:active { transform: scale(.96); }
.orders-cat-panel { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--card); color: var(--text); transform: translateX(104%); visibility: hidden; transition: transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s linear .34s; box-shadow: -18px 0 40px rgba(0,0,0,.18); }
.orders-cat-panel.open { transform: translateX(0); visibility: visible; transition: transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.orders-cat-panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid var(--border); }
.orders-cat-panel-back { width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 12px; background: var(--bg); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.orders-cat-panel-back:active { transform: scale(.94); }
.orders-cat-panel-titles { min-width: 0; }
.orders-cat-panel-title { font-size: 17px; font-weight: 800; }
.orders-cat-panel-sub { font-size: 12px; opacity: .62; margin-top: 2px; }
.orders-cat-create { display: flex; align-items: center; gap: 8px; margin: 12px 14px 6px; padding: 6px 6px 6px 10px; border: 1.5px dashed rgba(var(--primary-rgb), .45); border-radius: 14px; background: var(--accent-bg); }
.orders-cat-create-ico { display: inline-flex; color: var(--primary); }
.orders-cat-create .orders-text-input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 8px 4px !important; font-size: 14px; }
.orders-cat-create-btn { display: inline-flex; align-items: center; gap: 5px; padding: 9px 13px; border: 0; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; box-shadow: 0 4px 12px rgba(var(--primary-rgb), .3); }
.orders-cat-create-btn:active { transform: scale(.95); }
.orders-cat-panel .orders-cat-manager-list { flex: 1; max-height: none !important; overflow-y: auto; padding: 6px 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.orders-cat-row { display: flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); animation: mbRowIn .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mbRowIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.orders-cat-row.is-current { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .15); }
.orders-cat-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; border-radius: 10px; }
.orders-cat-row-main:active { background: var(--accent-bg); }
.orders-cat-row-ico { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; border-radius: 9px; background: var(--accent-bg); color: var(--primary); }
.orders-cat-row.is-current .orders-cat-row-ico { background: var(--primary); color: #fff; }
.orders-cat-row-text { display: flex; flex-direction: column; min-width: 0; }
.orders-cat-row-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orders-cat-row-text small { font-size: 11.5px; opacity: .6; }
.orders-cat-row-act { width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 10px; background: transparent; color: var(--text); opacity: .7; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.orders-cat-row-act:active { background: var(--accent-bg); opacity: 1; }
.orders-cat-row-act.danger { color: var(--danger); }
.orders-cat-empty { margin: 24px auto; max-width: 260px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .8; }
.orders-cat-empty .mb-icon { color: var(--primary); }
.orders-cat-empty span { font-size: 12.5px; opacity: .7; }
.settings-wide-btn .settings-wide-label { font-size: 14px !important; opacity: 1 !important; font-weight: 700; color: var(--text); text-align: left; }
.settings-wide-btn .settings-chevron { opacity: .45; flex: 0 0 auto; }
.settings-wide-btn small { flex: 0 0 auto; }
/* Поля поиска с иконкой вместо эмодзи (1.7.0) */
#wo-search, #orders-search { padding-left: 36px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 12px center !important; background-size: 16px 16px !important; }
.orders-admin-sec-chevron, .collapsible-card-chevron, .wo-tpl-cat-chevron, .wo-week-chevron { display: inline-flex; align-items: center; justify-content: center; }
.orders-admin-sec-chevron .mb-icon, .collapsible-card-chevron .mb-icon, .wo-tpl-cat-chevron .mb-icon, .wo-week-chevron .mb-icon { margin: 0 !important; }
.calc-btn .mb-icon { margin: 0 auto; }
.overlay-header h3 .mb-icon { vertical-align: -3px; margin-right: 4px; color: var(--primary); }
.premix-info-title .mb-icon { vertical-align: -2px; color: var(--primary); }
.ttk-cat-auto { border-color: rgba(245, 158, 11, .55); color: #b45309; background: rgba(245, 158, 11, .1); }
[data-theme="dark"] .ttk-cat-auto, [data-theme="dark-purple"] .ttk-cat-auto { color: #fbbf24; }
.ttk-add-btn { background: var(--primary) !important; color: #fff !important; border: 0 !important; box-shadow: 0 4px 12px rgba(var(--primary-rgb), .3); gap: 4px; }
.ttk-add-btn:active { transform: scale(.96); }
/* Всплывающие списки поверх содержимого — всегда непрозрачные (даже при прозрачности интерфейса на обоях) */
html[data-wallpaper]:not([data-wallpaper="none"]) .global-search-results,
html[data-wallpaper]:not([data-wallpaper="none"]) .wo-name-suggest,
html[data-wallpaper]:not([data-wallpaper="none"]) .orders-add-category-suggest,
html[data-wallpaper]:not([data-wallpaper="none"]) .orders-add-unit-drop,
html[data-wallpaper]:not([data-wallpaper="none"]) #mb-unit-drop-track { background-color: rgb(var(--card-rgb)) !important; }
.mb-picker-nav button { display: inline-flex; align-items: center; justify-content: center; }
.mb-picker-nav button .mb-icon { margin: 0; }