/* ============================================================================
   merchant-dash.css — объединённый реестр мерчанта (/merchant-dash).
   Скин Tabulator на дизайн-токенах PayHub (tokens.css): грид перекрашивается
   переменными --ph-*, поэтому светлая/тёмная темы работают автоматически.
   Бейджи повторяют пластику dx-grid.css (pill: рамка + подкрашенный фон).
   ============================================================================ */

.mg-page .mg-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mg-total {
    color: var(--ph-text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}
.mg-total strong { color: var(--ph-text-primary); font-variant-numeric: tabular-nums; }

/* ── Tabulator: каркас ── */
.mg-grid.tabulator {
    background: var(--ph-bg-card);
    border: 1px solid var(--ph-border-color);
    border-radius: var(--ph-border-radius-sm);
    font-family: var(--ph-font-family);
    font-size: 0.8rem;
}

.mg-grid .tabulator-header {
    background: var(--ph-bg-card);
    border-bottom: 2px solid var(--ph-border-color);
    color: var(--ph-text-secondary);
}
.mg-grid .tabulator-header .tabulator-col {
    background: var(--ph-bg-card);
    border-right: 1px solid var(--ph-border-color);
}
.mg-grid .tabulator-header .tabulator-col .tabulator-col-title {
    color: var(--ph-text-secondary);
    font-weight: var(--ph-font-weight-bold);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.mg-grid .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background: var(--ph-glass-bg);
}
/* Стрелка сортировки — токеном, обе темы */
.mg-grid .tabulator-col .tabulator-col-sorter { color: var(--ph-text-muted); }
.mg-grid .tabulator-col[aria-sort="ascending"] .tabulator-col-sorter .tabulator-arrow {
    border-bottom-color: var(--ph-color-primary);
}
.mg-grid .tabulator-col[aria-sort="descending"] .tabulator-col-sorter .tabulator-arrow {
    border-top-color: var(--ph-color-primary);
}

/* Поля header-фильтров */
.mg-grid .tabulator-header-filter input,
.mg-grid .mg-minmax input {
    width: 100%;
    padding: 3px 6px;
    font-size: 0.76rem;
    color: var(--ph-text-primary);
    background: var(--ph-bg-body);
    border: 1px solid var(--ph-border-color);
    border-radius: 6px;
    outline: none;
}
.mg-grid .tabulator-header-filter input:focus,
.mg-grid .mg-minmax input:focus {
    border-color: var(--ph-color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ph-color-primary) 22%, transparent);
}
.mg-minmax { display: flex; gap: 4px; }
.mg-minmax input { min-width: 0; }

/* ── Тело ── */
.mg-grid .tabulator-tableholder { background: var(--ph-bg-card); }
.mg-grid .tabulator-row {
    background: var(--ph-bg-card);
    color: var(--ph-text-primary);
    border-bottom: 1px solid var(--ph-border-color);
    min-height: 34px;
}
.mg-grid .tabulator-row.tabulator-row-even { background: color-mix(in srgb, var(--ph-bg-body) 55%, var(--ph-bg-card)); }
.mg-grid .tabulator-row:hover { background: var(--ph-glass-bg); }
.mg-grid .tabulator-row .tabulator-cell {
    border-right: 1px solid transparent;
    padding: 5px 8px;
    font-variant-numeric: tabular-nums;
}
.mg-grid .tabulator-placeholder .tabulator-placeholder-contents {
    color: var(--ph-text-muted);
    font-size: 0.9rem;
}

/* ── Матчинг-строка: янтарная полоса слева + тёплая подложка ── */
.mg-grid .tabulator-row.mg-row-matching {
    background: rgba(176, 138, 42, 0.07);
    box-shadow: inset 3px 0 0 0 #d9a62e;
}
.mg-grid .tabulator-row.mg-row-matching.tabulator-row-even { background: rgba(176, 138, 42, 0.10); }
.mg-grid .tabulator-row.mg-row-matching:hover { background: rgba(176, 138, 42, 0.16); }
html.app-dark .mg-grid .tabulator-row.mg-row-matching { background: rgba(217, 166, 46, 0.08); }
html.app-dark .mg-grid .tabulator-row.mg-row-matching.tabulator-row-even { background: rgba(217, 166, 46, 0.11); }
html.app-dark .mg-grid .tabulator-row.mg-row-matching:hover { background: rgba(217, 166, 46, 0.17); }

/* ── Пейджер ── */
.mg-grid .tabulator-footer {
    background: var(--ph-bg-card);
    border-top: 1px solid var(--ph-border-color);
    color: var(--ph-text-secondary);
}
.mg-grid .tabulator-footer .tabulator-footer-contents { padding: 6px 10px; }
.mg-grid .tabulator-footer .tabulator-page,
.mg-grid .tabulator-footer .tabulator-page-size {
    background: var(--ph-bg-body);
    border: 1px solid var(--ph-border-color);
    border-radius: 6px;
    color: var(--ph-text-primary);
    cursor: pointer;
}
.mg-grid .tabulator-footer .tabulator-page:not(.disabled):hover {
    background: var(--ph-glass-bg);
    color: var(--ph-color-primary);
}
.mg-grid .tabulator-footer .tabulator-page.active {
    background: var(--ph-color-primary);
    border-color: var(--ph-color-primary);
    color: #fff;
}
.mg-grid .tabulator-footer .tabulator-page-counter { color: var(--ph-text-muted); }

/* Прогресс загрузки поверх таблицы */
.mg-grid .tabulator-alert {
    background: color-mix(in srgb, var(--ph-bg-body) 60%, transparent);
}
.mg-grid .tabulator-alert .tabulator-alert-msg {
    background: var(--ph-bg-card);
    border: 1px solid var(--ph-border-color);
    border-radius: var(--ph-border-radius-sm);
    color: var(--ph-text-primary);
    font-size: 0.85rem;
    box-shadow: var(--ph-shadow-md);
}

/* ── Бейджи источника ── */
.mg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.72rem;
    white-space: nowrap;
    line-height: 1.5;
}
.mg-badge-matching {
    border: 1.5px solid #b08a2a;
    background-color: rgba(176, 138, 42, 0.10);
    color: #7a5c1e;
}
.mg-badge-order {
    border: 1px solid var(--ph-border-color);
    background: transparent;
    color: var(--ph-text-muted);
    font-weight: 500;
}
html.app-dark .mg-badge-matching {
    border-color: #9e7b1c;
    background-color: rgba(217, 166, 46, 0.15);
    color: #e3b341;
}

/* ── Статусы (палитра dx-grid.css) ── */
.mg-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.72rem;
    white-space: nowrap;
}
.mg-st-active     { border: 1.5px solid #b08a2a; background-color: rgba(176,138,42,0.08); color: #7a5c1e; }
.mg-st-confirmed  { border: 1.5px solid #2e7d4f; background-color: rgba(46,125,79,0.08);  color: #1e5c38; }
.mg-st-cancelled  { border: 1.5px solid #c0622a; background-color: rgba(192,98,42,0.08);  color: #9a3e18; }
.mg-st-arbitration{ border: 1.5px solid #7a4fb5; background-color: rgba(122,79,181,0.08); color: #5c3a8f; }
html.app-dark .mg-st-active      { border-color: #1158a8; background-color: rgba(31,111,235,0.15); color: #58a6ff; }
html.app-dark .mg-st-confirmed   { border-color: #238636; background-color: rgba(35,134,54,0.15);  color: #3fb950; }
html.app-dark .mg-st-cancelled   { border-color: #b62324; background-color: rgba(182,35,36,0.15);  color: #f78166; }
html.app-dark .mg-st-arbitration { border-color: #6e40c9; background-color: rgba(137,87,229,0.15); color: #bc8cff; }

/* Направление */
.mg-dir { font-weight: 600; font-size: 0.78rem; }
.mg-dir-in  { color: #1e5c38; }
.mg-dir-out { color: #9a3e18; }
html.app-dark .mg-dir-in  { color: #3fb950; }
html.app-dark .mg-dir-out { color: #f78166; }

.mg-muted { color: var(--ph-text-muted); }

/* ── Колонка чекбоксов выбора ── */
.mg-grid .mg-select-cell,
.mg-grid .tabulator-header .tabulator-col.mg-select-cell .tabulator-col-content {
    text-align: center;
}
.mg-grid .mg-select-cell input[type="checkbox"],
.mg-grid .tabulator-header input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--ph-color-primary);
    cursor: pointer;
    vertical-align: middle;
}
/* Выбранная строка — лёгкая синяя подложка (не спорит с янтарной подложкой матчинга). */
.mg-grid .tabulator-row.tabulator-selected {
    background: color-mix(in srgb, var(--ph-color-primary) 10%, var(--ph-bg-card));
}
.mg-grid .tabulator-row.tabulator-selected:hover {
    background: color-mix(in srgb, var(--ph-color-primary) 16%, var(--ph-bg-card));
}
.mg-grid .tabulator-row.tabulator-selected.mg-row-matching {
    background: color-mix(in srgb, var(--ph-color-primary) 10%, rgba(176, 138, 42, 0.10));
}

/* --- /merchant-dash-cny: постоянная ссылка на страницу заявок ---------------
   Рисуется как поле ввода (.form-control), но это <a target=_blank>:
   клик открывает страницу заявок в новой вкладке. */
.merchant-dash-page a.cny-flow-link {
    display: block;
    text-decoration: none;
    color: var(--ph-color-accent, #6f42c1);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.merchant-dash-page a.cny-flow-link:hover,
.merchant-dash-page a.cny-flow-link:focus-visible {
    text-decoration: underline;
    border-color: var(--ph-color-accent, #6f42c1);
}