/* =========================================
           ЕДИНЫЙ ЦЕНТР УПРАВЛЕНИЯ ЦВЕТАМИ И ТЕМАМИ
           ========================================= */
        
        /* 1. ТЕМНАЯ ТЕМА (ПО УМОЛЧАНИЮ) */
        :root {
            color-scheme: dark;
            --bg-body: #0a0a0a;
            --bg-panel: #111111;
            --bg-card: #141414;
            --bg-hover: #1a1a1a;
            --bg-modal: #111111;
            --bg-overlay: rgba(0,0,0,0.85);

            --border-main: #222222;
            --border-light: #333333;
            --border-focus: #444444;

            --text-main: #ffffff;
            --text-muted: #888888;
            --text-placeholder: #555555;
            --text-dark: #000000;

            --accent-yellow: #f1c40f;
            --accent-green: #2ecc71;
            --accent-red: #e74c3c;
            --accent-blue: #3498db;

            --bg-success-dim: #1a3a20;
            --bg-danger-dim: #3a1a1a;
            --bg-return: #2c0b0b;

            --stock-bg: #003333;
            --stock-text: #00ffff;
            --stock-border: #008888;

            --font-weight-main: normal;
        }

        /* 2. СВЕТЛАЯ ТЕМА (IOS CLASSIC) */
        body.light-theme {
            color-scheme: light;
            --bg-body: #f2f2f7;
            --bg-panel: #ffffff;
            --bg-card: #ffffff;
            --bg-hover: #e5e5ea;
            --bg-modal: #ffffff;
            --bg-overlay: rgba(0,0,0,0.5);

            --border-main: #c6c6c8;
            --border-light: #d1d1d6;
            --border-focus: #a1a1a6;

            --text-main: #000000;
            --text-muted: #666666;
            --text-placeholder: #888888;
            --text-dark: #000000; 

            --accent-yellow: #9a7b00;
            --accent-green: #27ae60;
            --accent-red: #c0392b;
            --accent-blue: #007bff;

            --bg-success-dim: #e8f5e9;
            --bg-danger-dim: #ffebee;
            --bg-return: #ffebee; /* Сигнальный светло-красный фон для возврата */

            --stock-bg: #e0f7fa;
            --stock-text: #006064;
            --stock-border: #00bcd4;

            --font-weight-main: bold;
        }

        /* ========================================= */

        * { 
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Roboto Condensed', sans-serif !important; 
        }
        
        html {
            overscroll-behavior: none; /* Запрещаем эффект оттяжки на уровне документа */
            background: var(--bg-body); /* Чтобы за краями не мелькал белый фон */
        }

        body { 
            position: fixed; /* Намертво прибиваем приложение к экрану */
            top: 0; left: 0; right: 0; bottom: 0;
            width: 100vw;
            height: 100dvh; 
            background: var(--bg-body); 
            color: var(--text-main); 
            font-weight: var(--font-weight-main); 
            display: flex; 
            flex-direction: column; 
            overflow: hidden; 
            overscroll-behavior: none; /* Дублируем запрет оттяжки для body */
            transition: background-color 0.3s; 
        }
        
        /* ЗАПРЕТ ВЫДЕЛЕНИЯ ТЕКСТА КАК В НАСТОЯЩЕМ ПРИЛОЖЕНИИ */
        body {
            -webkit-user-select: none; /* Для Safari и старых браузеров */
            -moz-user-select: none;    /* Для Firefox */
            -ms-user-select: none;     /* Для Edge */
            user-select: none;         /* Стандартный синтаксис */
        }

        /* ИСКЛЮЧЕНИЕ: РАЗРЕШАЕМ ВЫДЕЛЕНИЕ ТОЛЬКО В ПОЛЯХ ВВОДА */
        input, textarea {
            -webkit-user-select: auto;
            -moz-user-select: auto;
            -ms-user-select: auto;
            user-select: auto;
        }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

        /* КАТЕГОРИИ ТОВАРОВ */
        .cat-bar { 
    display: flex; 
    align-items: center; 
    overflow-x: auto; 
    gap: 8px; 
    padding: 6px 15px; /* Уменьшили верхний и нижний отступы (было 10px) */
    border-bottom: 1px solid var(--border-main); 
    flex-shrink: 0; 
    min-height: 0; /* Полностью убрали жесткую высоту (было 52px) */
    background: var(--bg-body); 
}
        .cat-btn { 
            background: var(--bg-panel); color: var(--text-muted); border: 1px solid var(--border-light); 
            font-weight: var(--font-weight-main); font-size: 12px; cursor: pointer; white-space: nowrap; 
            transition: 0.2s; text-transform: uppercase; 
            padding: 0 16px; height: 32px; border-radius: 16px;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .cat-btn.active { 
            background: var(--accent-yellow); color: var(--text-dark); 
            font-weight: bold; border-color: var(--accent-yellow); 
        }
        .cat-bar::-webkit-scrollbar { height: 4px; }
        .cat-bar::-webkit-scrollbar-track { background: transparent; }
        .cat-bar::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }
        .cat-bar::-webkit-scrollbar-thumb:hover { background: var(--accent-yellow); }

        /* КОНТЕЙНЕР УЛЬТРА-МИНИМАЛИЗМА (ПРИЕМКА) */
        .minimal-input-container { display: flex; gap: 10px; align-items: center; width: 100%; margin-bottom: 15px; }
        .currency-minimal-container { flex: 0 0 70px; position: relative; }
        .currency-minimal-header { width: 100%; background: var(--bg-body); border: 1px solid var(--border-light); padding: 12px 10px; border-radius: 4px; font-size: 14px; font-weight: bold; color: var(--accent-yellow); cursor: pointer; box-sizing: border-box; transition: 0.2s; display: flex; justify-content: space-between; align-items: center; user-select: none; }
        .currency-minimal-header:hover, .currency-minimal-header.active { border-color: var(--accent-yellow); background: var(--bg-card); }
        .curr-arrow-mini { color: var(--text-placeholder); font-size: 8px; margin-left: 3px; }
        .currency-minimal-list { position: absolute; top: 100%; left: 0; width: 80px; background: var(--bg-panel); border: 1px solid var(--border-light); border-top: none; border-radius: 0 0 4px 4px; z-index: 10; display: none; flex-direction: column; margin-top: 1px; }
        .currency-minimal-list.show { display: flex; }
        .currency-minimal-item { padding: 10px; cursor: pointer; border-bottom: 1px solid var(--bg-hover); transition: background 0.2s; font-size: 13px; font-weight: bold; color: var(--text-main); text-align: center; }
        .currency-minimal-item:last-child { border-bottom: none; }
        .currency-minimal-item:hover { background: var(--bg-hover); color: var(--text-main); }
        .currency-minimal-item.selected { color: var(--text-dark); background: var(--accent-yellow); }
        
        .file-input-wrapper { flex: 1; position: relative; }
        .file-upload-label { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--bg-body); color: var(--text-main); border: 1px dashed var(--border-focus); padding: 12px; border-radius: 4px; font-size: 13px; cursor: pointer; box-sizing: border-box; transition: all 0.2s ease-in-out; overflow: hidden; white-space: nowrap; }
        .file-upload-label:hover { background: var(--bg-card); border-color: var(--accent-yellow); color: var(--text-main); }
        .file-placeholder-text { color: var(--text-placeholder); transition: 0.2s; }
        .file-upload-label:hover .file-placeholder-text { color: var(--text-main); }
        .file-content { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; }

        /* --- ЭКРАН ВХОДА И КЛАВИАТУРА --- */
        #pin-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--bg-body); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; }
        .login-label { color: var(--accent-green); font-size: 24px; margin-bottom: 25px; font-weight: bold; letter-spacing: 5px; }
        
        .pin-input { background: var(--bg-card); border: 1px solid var(--border-light); color: var(--accent-yellow); padding: 15px; font-size: 32px; width: 220px; text-align: center; margin-bottom: 10px; outline: none; letter-spacing: 12px; border-radius: 8px; }
        
        #login-error { color: var(--accent-red); font-size: 12px; visibility: hidden; font-weight: bold; min-height: 15px; margin-bottom: 15px; }

        @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
        .error-shake { animation: shake 0.4s; border-color: var(--accent-red) !important; color: var(--accent-red) !important; }

        .numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
        .num-btn { background: var(--bg-hover); border: 1px solid var(--border-light); color: var(--text-main); font-size: 28px; width: 70px; height: 70px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; user-select: none; transition: 0.1s; font-weight: bold; touch-action: manipulation; }
        .num-btn:active { background: var(--border-light); border-color: var(--accent-green); transform: scale(0.95); }
        .num-btn.btn-clear { color: var(--accent-red); font-size: 22px; }

        /* --- ШАПКА --- */
        .header-area { flex-shrink: 0; border-bottom: 1px solid var(--border-main); background: var(--bg-panel); }
        .modes { display: flex; padding: 4px; gap: 4px; }
        .m-btn { flex: 1; height: 35px; line-height: 1; padding: 0; border: 1px solid var(--border-light); background: var(--bg-panel); color: var(--text-muted); font-weight: 900; border-radius: 4px; font-size: 13px; text-transform: uppercase; transition: 0.2s; }
        .m-btn.active-s { background: var(--bg-success-dim); color: var(--accent-green); border-color: var(--accent-green); }
        .m-btn.active-r { background: var(--bg-danger-dim); color: var(--accent-red); border-color: var(--accent-red); }

        .btn-exit-top { flex: 0.25; background: var(--bg-danger-dim); color: var(--accent-red); border: 1px solid var(--accent-red); border-radius: 4px; font-size: 20px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; }

        /* Сжатая структура кнопок для увеличения поиска */
        .search-area { padding: 0 4px 4px; display: flex; gap: 4px; align-items: stretch; }
        .s-input-container { position: relative; flex-grow: 1; flex-shrink: 1; min-width: 0; }
        .s-input { width: 100%; height: 100%; background: var(--bg-card); color: var(--text-main); font-weight: var(--font-weight-main); border: 1px solid var(--border-light); border-radius: 4px; padding: 8px 30px 8px 10px; font-size: 14px; outline: none; box-sizing: border-box; }
        
        .header-action-btn { padding: 0 8px; background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
        .header-btn-sync { color: var(--accent-blue); font-size: 18px; font-weight: bold; }
        .header-btn-report { color: var(--accent-yellow); font-size: 16px; }
        .header-btn-income { background: var(--bg-success-dim); color: var(--accent-green); border-color: var(--accent-green); font-size: 11px; font-weight: bold; gap: 3px; padding: 0 6px; }
        .header-btn-settings { background: var(--border-main); color: var(--text-main); font-size: 16px; border-color: var(--text-muted); }

        .list-header { display: flex; align-items: center; gap: 8px; padding: 4px 14px; font-size: 10px; color: var(--text-muted); font-weight: bold; border-bottom: 1px solid var(--border-main); background: var(--bg-body); }
.badge { 
            font-size: 9px; 
            color: var(--text-muted); 
            background: var(--bg-hover); 
            padding: 2px 6px; 
            border-radius: 6px; 
            border: 1px solid var(--border-light); 
            text-transform: lowercase; 
            white-space: nowrap; 
        }
        
        .cashier-badge { 
            color: var(--accent-green); 
            border-color: var(--bg-success-dim); 
            text-transform: uppercase; 
            font-weight: 900; 
            margin-left: 10px; 
            white-space: nowrap; 
            overflow: hidden;    
            text-overflow: ellipsis; 
            max-width: 110px;    
        }
        /* --- КАССА --- */
        #catalog { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 4px; border-bottom: 1px solid var(--border-main); background: var(--bg-body); }
        .c-item { background: var(--bg-card); border: 1px solid var(--border-main); border-radius: 4px; padding: 8px 10px; margin-bottom: 3px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: 0.2s; }
        .c-item:hover { background: var(--bg-hover); }
        .i-name { flex-grow: 1; font-size: 12px; font-weight: bold; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .i-price { width: 85px; font-size: 13px; font-weight: bold; text-align: right; color: var(--accent-green); }
        /* ВЫРАВНИВАНИЕ ОСТАТКОВ ПО ПРАВОМУ КРАЮ */
        .i-stock { width: 50px; font-size: 14px; font-weight: bold; text-align: right; padding-right: 4px; color: var(--stock-text); background: var(--stock-bg); border: 1px solid var(--stock-border); border-radius: 3px; }

        .cart-sec { flex-shrink: 0; background: var(--bg-panel); border-top: 2px solid var(--accent-green); display: flex; flex-direction: column; max-height: 40dvh; }
        .cart-sec.r-theme { border-top-color: var(--accent-red); }
        #cart-list { overflow-y: auto; padding: 4px; padding-bottom: 15px; background: var(--bg-body); }
        #cart-list:empty { padding: 0; }
        
        .cart-row { background: var(--bg-panel); padding: 6px; border-radius: 4px; margin-bottom: 3px; border: 1px solid var(--border-main); color: var(--text-main); }
        .row-top { font-size: 11px; font-weight: bold; color: var(--text-muted); margin-bottom: 4px; display: flex; justify-content: space-between; gap: 10px; }
        .row-ctrl { display: flex; justify-content: space-between; align-items: center; }
        
        .cart-row { background: var(--bg-panel); border: 1px solid var(--border-main); border-radius: 4px; padding: 6px 10px; display: flex; flex-direction: column; gap: 6px; }
        
        .qty-box { display: flex; align-items: center; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 4px; height: 34px; width: 150px; flex-shrink: 0; overflow: hidden; }
        .q-btn { background: var(--bg-hover); color: var(--accent-yellow); width: 40px; flex-shrink: 0; height: 100%; border: none; font-size: 20px; font-weight: bold; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; }
        .q-btn:hover { background: var(--border-light); }
        .q-val { flex: 1; min-width: 0; height: 100%; text-align: center; font-size: 16px; font-weight: bold; background: transparent; border: none; color: var(--text-main); outline: none; border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light); font-family: 'Roboto', sans-serif; padding: 0; box-sizing: border-box; }
        
        .p-input { width: 100%; min-width: 0; height: 34px; background: var(--bg-card); color: var(--accent-yellow); border: 1px solid var(--border-light); text-align: right; padding: 0 24px 0 10px; border-radius: 4px; font-size: 16px; font-weight: bold; outline: none; font-family: 'Roboto', sans-serif; box-sizing: border-box; }
        
        .footer { flex-shrink: 0; padding: 6px 4px; border-top: 1px solid var(--border-main); background: var(--bg-panel); }
        .total-box { display: flex; justify-content: space-between; font-size: 18px; font-weight: 900; margin-bottom: 6px; padding: 0 4px; color: var(--text-main); }
        
        .pay-row-5 { display: flex; gap: 4px; width: 100%; }
        .pay-row-5 .pay-btn { flex: 1; border-radius: 4px; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50px; padding: 6px 0; color: #ffffff; cursor: pointer; min-width: 0; overflow: hidden; }
        .pay-row-5 .pay-title { font-size: 9px; font-weight: bold; letter-spacing: -0.3px; white-space: nowrap; text-transform: uppercase; }
        .pay-row-5 .pay-sum { font-size: 11px; font-family: 'Roboto', sans-serif; font-weight: bold; margin-top: 2px; white-space: nowrap; }

        /* --- МОДАЛЬНЫЕ ОКНА --- */
        .modal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-overlay); z-index: 100; display: none; flex-direction: column; justify-content: center; align-items: center; padding: 20px; }
        .receipt-box { width: 100%; max-width: 400px; border: 2px dashed var(--border-focus); background: var(--bg-modal); padding: 20px; border-radius: 8px; color: var(--text-main); }
        .r-title { text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 5px; color: var(--text-main); }
        .r-method { text-align: center; font-size: 12px; color: var(--accent-yellow); margin-bottom: 15px; text-transform: uppercase; }
        .r-item { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; border-bottom: 1px dotted var(--border-light); padding-bottom: 2px; color: var(--text-main); }
        .r-total { text-align: right; font-size: 18px; font-weight: bold; margin-top: 15px; border-top: 1px solid var(--border-focus); padding-top: 10px; color: var(--text-main); }
        
        .modal-btns { display: flex; gap: 10px; margin-top: 25px; }
        .cancel-btn { flex: 1; padding: 15px; background: var(--bg-hover); color: var(--text-main); border: 1px solid var(--border-focus); border-radius: 4px; font-weight: bold; cursor: pointer; text-transform: uppercase; font-size: 12px; }
        .confirm-btn { flex: 2; padding: 15px; background: var(--accent-green); color: var(--text-dark); border: none; border-radius: 4px; font-weight: bold; cursor: pointer; text-transform: uppercase; font-size: 14px; }

        .hist-block { background: var(--bg-card); border: 1px solid var(--border-light); border-left-width: 4px; border-radius: 4px; padding: 10px; margin-bottom: 8px; }
        .hb-head { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 6px; font-weight: bold; border-bottom: 1px dashed var(--border-light); padding-bottom: 6px; text-transform: uppercase; }
        .hb-item { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
        .hb-type-r { text-decoration: line-through; opacity: 0.6; }

        /* --- ОКНО МАССОВОЙ НАЦЕНКИ --- */
        .markup-box { width: 100%; max-width: 350px; background: var(--bg-modal); border: 1px solid var(--border-focus); padding: 20px; border-radius: 8px; color: var(--text-main); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
        .m-toggle { display: flex; background: var(--bg-hover); border-radius: 6px; padding: 4px; margin-bottom: 20px; border: 1px solid var(--border-light); }
        .m-toggle label { flex: 1; text-align: center; padding: 10px; font-size: 14px; font-weight: bold; color: var(--text-muted); cursor: pointer; border-radius: 4px; transition: 0.2s; }
        .m-toggle input[type="radio"] { display: none; }
        .m-toggle input[type="radio"]:checked + label { background: var(--bg-panel); color: var(--accent-yellow); box-shadow: 0 2px 5px rgba(0,0,0,0.2); border: 1px solid var(--border-focus); }

        .settings-box { width: 100%; max-width: 350px; background: var(--bg-modal); border: 1px solid var(--border-focus); padding: 20px; border-radius: 8px; color: var(--text-main); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
        .s-group { margin-bottom: 15px; border-bottom: 1px solid var(--border-main); padding-bottom: 15px; }
        .s-title { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; text-transform: uppercase; font-weight: bold; }
        .s-btn { width: 100%; padding: 12px; background: var(--bg-hover); color: var(--text-main); border: 1px solid var(--border-focus); border-radius: 4px; margin-bottom: 5px; cursor: pointer; text-align: left; display: flex; justify-content: space-between; font-size: 13px; align-items: center; font-weight: var(--font-weight-main); }
        .lang-row { display: flex; gap: 5px; }
        .lang-btn { flex: 1; padding: 12px; background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border-focus); border-radius: 4px; cursor: pointer; text-align: center; font-weight: bold; transition: 0.2s;}
        .lang-btn.active { background: var(--bg-success-dim); color: var(--accent-green); border-color: var(--accent-green); }
        
        .queue-badge { background: var(--accent-red); color: #fff; padding: 2px 6px; border-radius: 10px; font-size: 10px; font-weight: bold; display: none; margin-left: 5px; }

        input[type="date"] { position: relative; }
        input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
        
        .item-wrapper { margin-bottom: 4px; }
        .item-card { display: grid; grid-template-columns: 1fr 45px minmax(90px, auto); gap: 8px; padding: 6px 8px; border: 1px solid var(--border-light); border-radius: 5px; background: var(--bg-card); cursor: pointer; transition: background 0.2s; align-items: center; }        
        .item-wrapper.active .dropdown-icon { transform: rotate(180deg); color: var(--accent-green); }
        .item-wrapper.active .item-details { max-height: 120px; }
        .item-details { background: var(--bg-body); border: 1px solid var(--border-light); border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
    
        .rep-search-container { position: relative; width: 100%; }
        #rep-clear-search { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; cursor: pointer; display: none; padding: 5px; }
        .rep-table-header { position: sticky; top: 0; z-index: 10; background: var(--bg-panel); display: grid; grid-template-columns: 1fr 40px 85px; gap: 8px; font-size: 10px; color: var(--text-muted); font-weight: bold; padding: 8px 8px; border-bottom: 1px solid var(--border-light); text-transform: uppercase; }
    
        /* --- КНОПКА SOFT SYNC --- */
        @keyframes spin-sync { 100% { transform: rotate(360deg); } }
        .sync-spin { animation: spin-sync 1s linear infinite; color: var(--accent-green) !important; border-color: var(--accent-green) !important; pointer-events: none; }
    
    /* Стили для свайпа текста в отчете */
        .swipeable-text {
            flex: 1; 
            min-width: 0; 
            white-space: nowrap; 
            overflow-x: auto; 
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .swipeable-text::-webkit-scrollbar {
            display: none;
        }
    /* Широкий шрифт для всех цен, сумм и итогов */
.i-price, 
.total, 
.total-sum, 
.pay-btn,
.hb-item span:last-child {
    font-family: 'Roboto', sans-serif !important;
}

/* --- УМНЫЙ ФОКУС ПРИ ОТКРЫТОЙ КЛАВИАТУРЕ --- */
        body.keyboard-open .modes,
        body.keyboard-open .cat-bar,
        body.keyboard-open .pay-row-5,
        body.keyboard-open .list-header {
            display: none !important;
        }
        body.keyboard-open .cart-sec {
            border-top-width: 1px; /* Делаем рамку тоньше для экономии места */
        }
        /* --- БЛОКИРОВКА СИСТЕМНОГО МЕНЮ ANDROID --- */
        .cat-btn, .c-item {
            -webkit-touch-callout: none !important;
            -webkit-user-select: none !important;
            user-select: none !important;
            -webkit-tap-highlight-color: transparent;
        }
        /* =========================================
   ДАШБОРД ОТЧЕТОВ V3 (МАТРИЦА 2x2)
   ========================================= */
:root {
    --pay-cash: #2ecc71;
    --pay-card: #3498db;
    --pay-red: #9b59b6;
    --pay-qr: #e74c3c;
    --pay-trans: #f39c12;
}

.methods-scroll { 
    display: flex; 
    gap: 6px; 
    padding: 8px 10px 12px 10px; /* Увеличили нижний отступ для скролла */
    overflow-x: auto; 
    border-bottom: 1px solid var(--border-main);
    scrollbar-width: thin; /* Для Firefox */
    scrollbar-color: var(--border-focus) transparent; 
}
/* Стили скроллбара для Chrome/Safari/iOS */
.methods-scroll::-webkit-scrollbar { height: 4px; }
.methods-scroll::-webkit-scrollbar-track { background: transparent; }
.methods-scroll::-webkit-scrollbar-thumb { background: var(--border-focus); border-radius: 4px; }
.method-card { min-width: 85px; background: var(--bg-panel); border: 1px solid var(--border-main); border-radius: 4px; padding: 6px 8px; cursor: pointer; transition: 0.2s; flex-shrink: 0; text-align: center; }
.method-card .m-title { font-size: 10px; color: var(--text-muted); font-weight: bold; margin-bottom: 2px; text-transform: uppercase; }
.method-card .m-sum { font-size: 13px; font-weight: bold; color: var(--text-main); }

.method-card.active-all { border-color: var(--text-main); background: var(--bg-hover); }
.method-card.active-cash { border-color: var(--pay-cash); background: rgba(46, 204, 113, 0.1); }
.method-card.active-qr { border-color: var(--pay-qr); background: rgba(231, 76, 60, 0.1); }
.method-card.active-card { border-color: var(--pay-card); background: rgba(52, 152, 219, 0.1); }
.method-card.active-red { border-color: var(--pay-red); background: rgba(155, 89, 182, 0.1); }
.method-card.active-trans { border-color: var(--pay-trans); background: rgba(243, 156, 18, 0.1); }

.toggles-row { display: flex; gap: 6px; padding: 6px 10px; background: var(--bg-body); border-bottom: 1px solid var(--border-main); align-items: center; transition: 0.2s; }
.t-group { display: flex; flex: 1; background: var(--bg-panel); border-radius: 4px; border: 1px solid var(--border-main); overflow: hidden; }
.t-btn { flex: 1; text-align: center; padding: 6px 0; font-size: 11px; font-weight: bold; color: var(--text-muted); cursor: pointer; user-select: none; }
.t-btn.active.s-sale { background: rgba(46, 204, 113, 0.15); color: var(--accent-green); }
.t-btn.active.s-return { background: rgba(231, 76, 60, 0.15); color: var(--accent-red); }
.t-btn.active.s-item, .t-btn.active.s-date { background: var(--bg-hover); color: var(--text-main); }
.t-divider { color: var(--border-main); font-size: 12px; }

/* Дизайн списка аккордеона */
.list-header-v3 { display: flex; font-size: 9px; color: var(--text-muted); font-weight: bold; margin-bottom: 6px; text-transform: uppercase; padding: 0 4px; }
.acc-item { background: var(--bg-panel); border: 1px solid var(--border-main); border-radius: 4px; margin-bottom: 4px; overflow: hidden; }
.acc-header { display: flex; justify-content: space-between; align-items: center; padding: 8px; cursor: pointer; user-select: none; }
.acc-title-col { flex: 1; font-size: 12px; font-weight: bold; color: var(--text-main); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-method-tag { font-size: 9px; font-weight: normal; margin-left: 4px; }
.acc-qty-col { width: 35px; text-align: center; font-size: 12px; color: var(--text-muted); }
.acc-sum-col { width: 85px; text-align: right; font-size: 13px; font-weight: bold; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.arr { display: inline-block; font-size: 9px; color: var(--text-muted); transition: transform 0.2s ease; }
.acc-item.open .arr { transform: rotate(180deg); }
.acc-body { display: none; background: var(--bg-hover); border-top: 1px dashed var(--border-main); padding: 6px 8px; }
.acc-item.open .acc-body { display: block; }
.acc-detail-row { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 4px; color: var(--text-muted); }

/* Подвал и итоги */
.footer-fixed { background: var(--bg-body); border-top: 1px solid var(--border-main); padding: 10px 15px; z-index: 10; box-shadow: 0 -5px 15px rgba(0,0,0,0.5); }
.tot-row { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; color: var(--text-muted); }
.tot-main { display: flex; justify-content: space-between; font-size: 15px; font-weight: bold; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-main); color: var(--text-main); }
.btn-close-rep { width: 100%; padding: 12px; margin-top: 10px; background: var(--bg-hover); border: 1px solid var(--border-main); color: var(--text-main); font-size: 13px; font-weight: bold; border-radius: 4px; cursor: pointer; text-transform: uppercase; }

/* Календари */
.date-wrap { flex: 1; position: relative; background: var(--bg-hover); border: 1px solid var(--border-main); border-radius: 4px; overflow: hidden; }
.date-wrap input { width: 100%; padding: 6px 8px; background: transparent; border: none; color: var(--text-main); font-family: var(--font); font-size: 13px; outline: none; }
.date-wrap input::-webkit-calendar-picker-indicator { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* === СТИЛИ ДЛЯ БЫСТРОГО ПРИХОДА === */

/* 1. Затемнение и блокировка верхнего блока в модалке */
.form-disabled {
    opacity: 0.4;
    pointer-events: none; 
    transition: opacity 0.2s ease;
}

/* 2. Сетка для кастомной цифровой клавиатуры (3 колонки) */
.numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

/* 3. Кнопки кастомной клавиатуры */
.numpad-btn {
    background: #333;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 15px 0;
    font-size: 20px;
    font-weight: bold;
    /* touch-action убирает задержку в 300ms при тапе на экране iPhone */
    touch-action: manipulation; 
}

.numpad-btn:active {
    background: #555;
}

/* 4. Акцентный цвет для кнопок "С" и "⌫" */
.numpad-btn.action-btn {
    color: #ff9800; 
}

html.lock, body.lock {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* По умолчанию — ТЕМНАЯ ТЕМА (POS Noir) */
.supp-modal-bg { background: #121212 !important; color: #fff; }
.supp-modal-header { background: #1e1e1e !important; border-bottom: 1px solid #333; }
.supp-modal-input { background: #000 !important; color: #fff !important; border: 1px solid #333; }
.supp-list-item { border-bottom: 1px solid rgba(255,255,255,0.08); color: #fff !important; }

/* СВЕТЛАЯ ТЕМА (когда на body висит класс light-theme) */
body.light-theme .supp-modal-bg { background: #e4e6e8 !important; color: #000; }
body.light-theme .supp-modal-header { background: #ffffff !important; border-bottom: 1px solid #ccc; }
body.light-theme .supp-modal-input { background: #ffffff !important; color: #000 !important; border: 1px solid #aaa; }
body.light-theme .supp-list-item { border-bottom: 1px solid #ddd; color: #000 !important; }
body.light-theme #fullscreen-supplier-list { background: #e4e6e8 !important; }
/* Либо 100% рабочий вариант: добавляем рамки самим инпутам, чтобы они не сливались с фоном */
body.light-theme #qe-supplier-input,
body.light-theme .qe-input-group input {
    background: #ffffff !important;
    border: 1px solid #b0b0b0 !important;}
/* 1. Затемняем фон зеленой рамки (Оформление прихода) в светлой теме */
body.light-theme #qe-receive-block {
    background: #e4e6e8 !important; 
}

/* 2. Делаем поля ввода внутри этого блока белыми с контрастным текстом и рамкой */
body.light-theme #qe-receive-block input {
    background: #ffffff !important; 
    color: #000000 !important;      
    border: 1px solid #b0b0b0 !important;
    border-radius: 4px !important;
}

/* ПРИНУДИТЕЛЬНЫЕ ЦВЕТА ДЛЯ ОКНА ПОСТАВЩИКОВ (СВЕТЛАЯ ТЕМА) */
body.light-theme #fullscreen-supplier-modal {
    background-color: #e4e6e8 !important; /* Светло-серый фон самого окна */
}

/* Красим шапку (первый div внутри модалки, где лежит инпут и кнопка) */
body.light-theme #fullscreen-supplier-modal > div:first-child {
    background-color: #ffffff !important; /* Белая шапка */
    border-bottom: 1px solid #ccc !important;
}

/* На всякий случай делаем фон списка прозрачным, чтобы он перенял цвет окна */
body.light-theme #fullscreen-supplier-list {
    background-color: transparent !important;
}
/* ИСПРАВЛЕНИЕ: ВЫВОДИМ КАСТОМНУЮ КЛАВИАТУРУ ПОВЕРХ ВСЕХ ОКОН (ИСПРАВЛЕНИЕ ЗАВИСАНИЯ iOS) */
#custom-numpad {
    position: relative !important;
    z-index: 9999 !important; 
}
/* Отключаем задержку и зум для всего окна быстрого редактирования */
#qe-receive-block,
#custom-numpad {
    touch-action: manipulation !important;
}
/* ЖЕСТКАЯ БЛОКИРОВКА ЗУМА И ЗАДЕРЖЕК ДЛЯ iOS SAFARI */
button, 
.num-btn, 
.numpad-btn, 
.q-btn,
#custom-numpad,
#qe-receive-block {
    touch-action: manipulation !important;
}

/* Анимация непрерывного вращения */
@keyframes spin-sync {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Класс, который включает JavaScript */
.syncing-active {
    /* Обязательная строка, чтобы иконка могла вращаться! */
    display: inline-block !important; 
    
    /* 1s = скорость одного оборота, linear = равномерно без рывков */
    animation: spin-sync 1s linear infinite !important; 
    
    /* Если хочешь, чтобы она еще и меняла цвет при отправке, раскомментируй строку ниже: */
    /* color: #ff9800 !important; */
}