/* =====================================================
   DevExpress DxGrid — PayHub стиль (идентично PayScrowing)
   ===================================================== */

/* --- Отступы по краям для страниц с таблицами --- */
.dashboard-container,
.grid-wrapper {
    padding: 0 16px;
}

@media (min-width: 992px) {
    .dashboard-container,
    .grid-wrapper {
        padding: 0 24px;
    }
}

/* --- CSS-переменные на уровне грида --- */
.dxbl-grid {
    --dxbl-grid-border-radius:       12px;
    --dxbl-grid-border-color:        #ddd9f0;
    --dxbl-grid-bg:                  #ffffff;
    --dxbl-grid-color:               #2e2a45;
    --dxbl-grid-header-color:        #ffffff;
    --dxbl-grid-header-font-weight:  600;
    --dxbl-grid-hover-bg:            #ede9f8;
    --dxbl-grid-hover-color:         #1e1a38;
    --dxbl-grid-selection-bg:           #ddd8f5;
    --dxbl-grid-selection-color:        #2d1a5e;
    --dxbl-grid-selection-focus-bg:     #cec8ee;
    --dxbl-grid-selection-focus-color:  #2d1a5e;
    --dxbl-grid-focus-frame-color:      #9b84d8;

    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 16px rgba(40, 20, 80, 0.10), 0 1px 4px rgba(0,0,0,0.06) !important;
    border: 1px solid #ddd9f0 !important;
    margin-bottom: 16px;
}

/* --- Хедер: пастельный лавандовый --- */
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th,
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell) {
    background-color: #ece8f8 !important;
    color: #2d1a5e !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    border-right: 1px solid #d8d2f0 !important;
    border-bottom: 2px solid #c4bce8 !important;
    padding: 12px 14px !important;
    white-space: nowrap;
}

.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th::before {
    display: none !important;
}

.dxbl-grid .dxbl-grid-table > thead th .dxbl-image,
.dxbl-grid .dxbl-grid-table > thead th svg,
.dxbl-grid .dxbl-grid-table > thead th .dxbl-btn {
    color: rgba(45, 26, 94, 0.65) !important;
    fill: rgba(45, 26, 94, 0.65) !important;
}

/* --- Строка фильтров --- */
.dxbl-grid .dxbl-grid-filter-row > td,
.dxbl-grid .dxbl-grid-filter-row > th {
    background-color: #f4f3fb !important;
    border-bottom: 1px solid #ddd9f0 !important;
    padding: 5px 8px !important;
}

/* --- Строки данных --- */
.dxbl-grid .dxbl-grid-table tbody tr > td {
    padding: 8px 14px !important;
    font-size: 0.86rem !important;
    border-bottom: 1px solid #f0eef8 !important;
    border-right: 1px solid #f4f2fb !important;
    vertical-align: middle !important;
    color: #2e2a45 !important;
    background-color: #ffffff;
    transition: background-color 0.1s ease;
}

.dxbl-grid .dxbl-grid-table tbody tr > td:last-child {
    border-right: none !important;
}

/* --- Зебра --- */
.dxbl-grid .dxbl-grid-table tbody tr:nth-child(even) > td {
    background-color: #faf9fd !important;
}

/* Выделенная строка */
.dxbl-grid .dxbl-grid-table .dxbl-grid-selected-row:not(.dxbl-grid-focused-row) > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
    background-color: #ddd8f5 !important;
    color: #2d1a5e !important;
    border-left: 3px solid #9b84d8 !important;
}

.dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row.dxbl-grid-selected-row > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
    background-color: #cec8ee !important;
    color: #2d1a5e !important;
    border-left: 3px solid #9b84d8 !important;
}

.dxbl-grid .dxbl-grid-table .dxbl-grid-selected-row > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell)::before {
    display: none !important;
}

/* Кликнутая (focused) строка — всегда подсвечиваем сплошным цветом поверх зебры
   и статусных раскрасок, чтобы клик давал стабильное выделение, а не «зебру». */
.dxbl-grid .dxbl-grid-table tbody tr.dxbl-grid-focused-row > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
    background-color: #cec8ee !important;
    color: #2d1a5e !important;
    border-left: 3px solid #9b84d8 !important;
}

.dxbl-grid .dxbl-grid-table tbody tr.dxbl-grid-focused-row:hover > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
    background-color: #c2bbe8 !important;
}

.dxbl-grid .dxbl-grid-table tbody tr.dxbl-grid-focused-row > td::before {
    display: none !important;
}

/* =====================================================
   Статусы строк
   ===================================================== */
.dxbl-grid .dxbl-grid-table tbody tr.row-in > td      { background-color: #edf8f1 !important; color: #1e5c38 !important; }
.dxbl-grid .dxbl-grid-table tbody tr.row-in:hover > td { background-color: #d8f0e3 !important; }

.dxbl-grid .dxbl-grid-table tbody tr.row-out > td      { background-color: #fdf0f2 !important; color: #7a2e2e !important; }
.dxbl-grid .dxbl-grid-table tbody tr.row-out:hover > td { background-color: #f7dde1 !important; }

.dxbl-grid .dxbl-grid-table tbody tr.row-delivery > td      { background-color: #fffdf0 !important; color: #5c4a1e !important; }
.dxbl-grid .dxbl-grid-table tbody tr.row-delivery:hover > td { background-color: #fdf5d8 !important; }

.dxbl-grid .dxbl-grid-table tbody tr.row-log > td      { background-color: #eef1f8 !important; color: #2e3570 !important; }
.dxbl-grid .dxbl-grid-table tbody tr.row-log:hover > td { background-color: #e2e6f5 !important; }
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr.row-log > td { background-color: #14182b !important; color: #9aa0cc !important; }

.dxbl-grid .dxbl-grid-table tbody tr.row-balance > td      { background-color: #f4f2fc !important; color: #2e2a45 !important; }
.dxbl-grid .dxbl-grid-table tbody tr.row-balance:hover > td { background-color: #ede9f8 !important; }

/* Статус реквизита (карты): good = активна, danger = на стопе, warning = резерв */
.dxbl-grid .dxbl-grid-table tbody tr.deadline-good-item > td       { background-color: #edf8f1 !important; color: #1e5c38 !important; }
.dxbl-grid .dxbl-grid-table tbody tr.deadline-good-item:hover > td { background-color: #d8f0e3 !important; }
.dxbl-grid .dxbl-grid-table tbody tr.deadline-danger-item > td       { background-color: #fdf0f2 !important; color: #7a2e2e !important; }
.dxbl-grid .dxbl-grid-table tbody tr.deadline-danger-item:hover > td { background-color: #f7dde1 !important; }
.dxbl-grid .dxbl-grid-table tbody tr.deadline-warning-item > td       { background-color: #fffdf0 !important; color: #5c4a1e !important; }
.dxbl-grid .dxbl-grid-table tbody tr.deadline-warning-item:hover > td { background-color: #fdf5d8 !important; }

/* =====================================================
   Тулбар
   ===================================================== */
.dxbl-grid .dxbl-toolbar {
    background-color: #f4f3fb !important;
    border-bottom: 1px solid #ddd9f0 !important;
    padding: 6px 10px !important;
    border-radius: 12px 12px 0 0 !important;
    min-height: unset !important;
}

.dxbl-grid .dxbl-toolbar .dxbl-btn {
    font-size: 0.78rem !important;
    padding: 3px 10px !important;
    border: 1px solid #ccc8e8 !important;
    border-radius: 7px !important;
    color: #4e3b8c !important;
    background: rgba(255, 255, 255, 0.6) !important;
    font-weight: 500 !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
    gap: 5px !important;
}
.dxbl-grid .dxbl-toolbar .dxbl-btn:hover {
    background: #ede9f8 !important;
    border-color: #9580cc !important;
    color: #3b2a6e !important;
}
.dxbl-grid .dxbl-toolbar .dxbl-btn:active {
    background: #ddd9f0 !important;
    border-color: #7c6bc4 !important;
}

.toolbar-toggle-btn .dxbl-btn {
    background: transparent !important;
    border: 1px solid #ccc8e8 !important;
    border-radius: 7px !important;
    color: #5a5278 !important;
    padding: 5px 9px !important;
    font-size: 0.88rem !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.toolbar-toggle-btn .dxbl-btn:hover {
    background: #ede9f8 !important;
    color: #3b2a6e !important;
    border-color: #a89ece !important;
}

.dxbl-grid .dxbl-toolbar .dxbl-edit-box {
    border-radius: 8px !important;
    font-size: 0.86rem !important;
    border-color: #ccc8e8 !important;
}

/* =====================================================
   Пагинация
   ===================================================== */
.dxbl-grid .dxbl-pager {
    background-color: #f4f3fb !important;
    border-top: 1px solid #ddd9f0 !important;
    padding: 6px 12px !important;
    font-size: 0.82rem !important;
    color: #5a5278 !important;
    border-radius: 0 0 12px 12px !important;
}

.dxbl-grid .dxbl-pager .dxbl-btn {
    border-radius: 6px !important;
    min-width: 28px !important;
    font-size: 0.8rem !important;
    color: #5a5278 !important;
    border-color: #ccc8e8 !important;
}

.dxbl-grid .dxbl-pager .dxbl-btn:hover {
    background-color: #ede9f8 !important;
}

.dxbl-grid .dxbl-pager .dxbl-btn.active,
.dxbl-grid .dxbl-pager .dxbl-btn[aria-current] {
    background: linear-gradient(135deg, #3b2a6e 0%, #4e3b8c 100%) !important;
    color: #ffffff !important;
    border-color: #3b2a6e !important;
    font-weight: 600 !important;
}

/* =====================================================
   Бэджи
   ===================================================== */
.badge-order-in {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    border: 1.5px solid #2e7d4f; background-color: rgba(46,125,79,0.07);
    color: #2e7d4f; font-weight: 600; font-size: 0.75rem; white-space: nowrap;
}
.badge-order-out {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    border: 1.5px solid #7a4a2a; background-color: rgba(122,74,42,0.07);
    color: #7a4a2a; font-weight: 600; font-size: 0.75rem; white-space: nowrap;
}
.status-active {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    border: 1.5px solid #b08a2a; background-color: rgba(176,138,42,0.08);
    color: #7a5c1e; font-weight: 600; font-size: 0.75rem; white-space: nowrap;
}
.status-confirmed {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    border: 1.5px solid #2e7d4f; background-color: rgba(46,125,79,0.08);
    color: #1e5c38; font-weight: 600; font-size: 0.75rem; white-space: nowrap;
}
.status-cancelled {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    border: 1.5px solid #c0622a; background-color: rgba(192,98,42,0.08);
    color: #9a3e18; font-weight: 600; font-size: 0.75rem; white-space: nowrap;
}
.status-pending {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    border: 1.5px solid #2a6ec0; background-color: rgba(42,110,192,0.08);
    color: #1e4c8a; font-weight: 600; font-size: 0.75rem; white-space: nowrap;
}

/* Прочее */
.dxbl-grid .dxbl-grid-table { border-collapse: collapse !important; width: 100% !important; }
.dxbl-grid ::-webkit-scrollbar { height: 5px; width: 5px; }
.dxbl-grid ::-webkit-scrollbar-track { background: #f4f3fb; border-radius: 3px; }
.dxbl-grid ::-webkit-scrollbar-thumb { background: #ccc8e8; border-radius: 3px; }
.dxbl-grid ::-webkit-scrollbar-thumb:hover { background: #a89ece; }
.dxbl-grid .dxbl-grid-empty-data-row td { text-align: center !important; color: #9a94b8 !important; font-style: italic !important; padding: 36px !important; }
.dxbl-grid .dxbl-data-cell .btn, .dxbl-grid .dxbl-data-cell .dxbl-btn { border-radius: 6px !important; font-size: 0.8rem !important; padding: 3px 10px !important; }

/* =====================================================
   Тёмная тема — DxGrid
   ===================================================== */
html.app-dark .dxbl-grid {
    --dxbl-grid-border-color:        #30363d;
    --dxbl-grid-bg:                  #0d1117;
    --dxbl-grid-color:               #c9d1d9;
    --dxbl-grid-header-color:        #e6edf3;
    --dxbl-grid-hover-bg:            #21262d;
    --dxbl-grid-hover-color:         #e6edf3;
    --dxbl-grid-selection-bg:        #1f3a5f;
    --dxbl-grid-selection-color:     #ffffff;
    --dxbl-grid-selection-focus-bg:  #264a78;
    --dxbl-grid-focus-frame-color:   #388bfd;
    border-color: #30363d !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.4) !important;
}
html.app-dark .dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th,
html.app-dark .dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell) {
    background: #161b22 !important; color: #8b949e !important;
    font-size: 0.72rem !important; letter-spacing: 0.06em !important;
    border-right-color: #21262d !important; border-bottom: 1px solid #30363d !important;
}
html.app-dark .dxbl-grid .dxbl-grid-table > thead th .dxbl-image,
html.app-dark .dxbl-grid .dxbl-grid-table > thead th svg,
html.app-dark .dxbl-grid .dxbl-grid-table > thead th .dxbl-btn {
    color: rgba(139,148,158,0.85) !important; fill: rgba(139,148,158,0.85) !important;
}
html.app-dark .dxbl-grid .dxbl-grid-filter-row > td,
html.app-dark .dxbl-grid .dxbl-grid-filter-row > th {
    background-color: #161b22 !important; border-bottom-color: #30363d !important;
}
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr > td {
    background-color: #0d1117 !important; border-bottom-color: #21262d !important;
    border-right-color: #21262d !important; color: #c9d1d9 !important;
}
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr:nth-child(even) > td { background-color: #111318 !important; }
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr:hover > td { background-color: #21262d !important; }
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr.dxbl-grid-selected-row > td {
    background-color: #1f3a5f !important; color: #e6edf3 !important; border-left: 2px solid #388bfd !important;
}
/* Кликнутая (focused) строка — стабильное выделение поверх зебры/статусов (тёмная тема) */
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr.dxbl-grid-focused-row > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
    background-color: #264a78 !important; color: #e6edf3 !important; border-left: 3px solid #388bfd !important;
}
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr.dxbl-grid-focused-row:hover > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
    background-color: #2d568a !important;
}
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr.row-in > td       { background-color: #0d2b1c !important; color: #3fb950 !important; }
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr.row-out > td      { background-color: #2d1214 !important; color: #f78166 !important; }
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr.row-delivery > td { background-color: #0d1f38 !important; color: #58a6ff !important; }
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr.row-balance > td  { background-color: #13161e !important; color: #8b949e !important; }
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr.deadline-good-item > td   { background-color: #0d2b1c !important; color: #3fb950 !important; }
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr.deadline-danger-item > td { background-color: #2d1214 !important; color: #f78166 !important; }
html.app-dark .dxbl-grid .dxbl-grid-table tbody tr.deadline-warning-item > td { background-color: #0d1f38 !important; color: #58a6ff !important; }
html.app-dark .dxbl-grid .dxbl-toolbar { background-color: #161b22 !important; border-bottom-color: #30363d !important; }

/* Тёмная тема — встроенный search box / тулбар-контейнер / поля грида (были белыми) */
html.app-dark .dxbl-grid .dxbl-grid-toolbar-container,
html.app-dark .dxbl-grid .dxbl-grid-header-panel,
html.app-dark .dxbl-grid .dxbl-grid-group-panel,
html.app-dark .dxbl-grid .dxbl-grid-search-box,
html.app-dark .dxbl-grid .dxbl-grid-search-box-container {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}
html.app-dark .dxbl-grid .dxbl-text-edit,
html.app-dark .dxbl-grid .dxbl-text-edit .dxbl-text-edit-input,
html.app-dark .dxbl-grid input,
html.app-dark .dxbl-grid input[type="search"],
html.app-dark .dxbl-grid input[type="text"] {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
}
html.app-dark .dxbl-grid input::placeholder { color: #6e7681 !important; }
html.app-dark .dxbl-grid .dxbl-text-edit .dxbl-image,
html.app-dark .dxbl-grid .dxbl-grid-search-box svg { color: #8b949e !important; fill: #8b949e !important; }
html.app-dark .dxbl-grid .dxbl-pager { background-color: #161b22 !important; border-top-color: #30363d !important; color: #8b949e !important; }
html.app-dark .dxbl-grid .dxbl-pager .dxbl-btn { color: #8b949e !important; border-color: #30363d !important; }
html.app-dark .dxbl-grid .dxbl-pager .dxbl-btn:hover { background-color: #21262d !important; color: #c9d1d9 !important; }
html.app-dark .dxbl-grid .dxbl-pager .dxbl-btn.active { background-color: #1f3a5f !important; color: #58a6ff !important; border-color: #388bfd !important; font-weight: 600 !important; }
html.app-dark .dxbl-grid .dxbl-grid-empty-data-row td { color: #484f58 !important; }
html.app-dark .dxbl-grid ::-webkit-scrollbar-track { background: #161b22; }
html.app-dark .dxbl-grid ::-webkit-scrollbar-thumb { background: #30363d; }
html.app-dark .dxbl-grid ::-webkit-scrollbar-thumb:hover { background: #484f58; }
html.app-dark .dxbl-grid .dxbl-toolbar .dxbl-btn { border-color: #30363d !important; color: #c9d1d9 !important; background: rgba(255,255,255,0.03) !important; }
html.app-dark .dxbl-grid .dxbl-toolbar .dxbl-btn:hover { background: #21262d !important; border-color: #484f58 !important; color: #e6edf3 !important; }
html.app-dark .badge-order-in { border-color: #238636; background-color: rgba(35,134,54,0.15); color: #3fb950; }
html.app-dark .badge-order-out { border-color: #b62324; background-color: rgba(182,35,36,0.15); color: #f78166; }
html.app-dark .status-active { border-color: #1158a8; background-color: rgba(31,111,235,0.15); color: #58a6ff; }
html.app-dark .status-confirmed { border-color: #238636; background-color: rgba(35,134,54,0.15); color: #3fb950; }
html.app-dark .status-cancelled { border-color: #b62324; background-color: rgba(182,35,36,0.15); color: #f78166; }
html.app-dark .status-pending { border-color: #1158a8; background-color: rgba(31,111,235,0.15); color: #58a6ff; }

/* =====================================================
   Отдельный DxPager (внешний пейджер серверной пагинации)
   ===================================================== */
.dxbl-pager .dxbl-pager-page-button,
.dxbl-pager .dxbl-btn {
    border-radius: 6px;
    min-width: 28px;
    font-size: 0.8rem;
    color: #5a5278;
    border-color: #ccc8e8;
}
.dxbl-pager .dxbl-pager-page-button:hover,
.dxbl-pager .dxbl-btn:hover { background-color: #ede9f8; }
.dxbl-pager .dxbl-pager-page-button.dxbl-active,
.dxbl-pager .dxbl-pager-page-button[aria-current],
.dxbl-pager .dxbl-btn.active,
.dxbl-pager .dxbl-btn[aria-current] {
    background: linear-gradient(135deg, #3b2a6e 0%, #4e3b8c 100%);
    color: #ffffff;
    border-color: #3b2a6e;
    font-weight: 600;
}

/* Тёмная тема — отдельный пейджер */
html.app-dark .dxbl-pager { color: #c9d1d9 !important; }
html.app-dark .dxbl-pager .dxbl-pager-page-button,
html.app-dark .dxbl-pager .dxbl-btn {
    color: #c9d1d9 !important;
    border-color: #30363d !important;
    background-color: transparent !important;
}
html.app-dark .dxbl-pager .dxbl-pager-page-button:hover,
html.app-dark .dxbl-pager .dxbl-btn:hover {
    background-color: #21262d !important;
    color: #ffffff !important;
}
html.app-dark .dxbl-pager .dxbl-pager-page-button.dxbl-active,
html.app-dark .dxbl-pager .dxbl-pager-page-button[aria-current],
html.app-dark .dxbl-pager .dxbl-btn.active,
html.app-dark .dxbl-pager .dxbl-btn[aria-current] {
    background: linear-gradient(135deg, #5a4aa0 0%, #7c6bc4 100%) !important;
    color: #ffffff !important;
    border-color: #7c6bc4 !important;
}
/* Селектор размера страницы */
html.app-dark .dxbl-pager input,
html.app-dark .dxbl-pager .dxbl-text-edit,
html.app-dark .dxbl-pager .dxbl-combobox { color: #c9d1d9 !important; }