@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
/* Явная светлая схема: меньше расхождений Chrome/Firefox у фона, скроллбаров и нативных контролов */
html {
  color-scheme: light;
}
:root {
  --font-sans: 'Geist', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --table-sticky-top: 60px;
  --crm-tabs-sticky-h: 48px;
  --crm-topbar-bg: #ffffff;
  --crm-topbar-fg: #111111;
  --crm-body-bg: #f5f5f5;
  --crm-content-bg: #ffffff;
  --crm-tab-grad-1: #4A4E69;
  --crm-tab-grad-2: #6B6D8B;
  --crm-tab-active-1: #6B6D8B;
  --crm-tab-active-2: #4A4E69;
  --crm-payments-row-work: #eff6ff;
  --crm-payments-row-paying: #c5e99b;
  --crm-payments-row-closed: #b7b6be;
  --crm-payments-row-problem: #ffcc99;
  --crm-payments-th-bg: #f2f4f8;
  --crm-mypayments-row-work: #eff6ff;
  --crm-mypayments-row-paying: #c5e99b;
  --crm-mypayments-row-closed: #b7b6be;
  --crm-mypayments-row-problem: #ffcc99;
  --crm-mypayments-th-bg: #f2f4f8;
  --crm-payout-row-closed: #b7b6be;
  --crm-payout-row-problem: #ffcc99;
  --crm-payout-stats-bg: #ffffff;
  --crm-payout-stats-border: #000000;
  --crm-payout-stats-text: #000000;
  --crm-payout-th-bg: #f2f4f8;
  --crm-dashboard-th-bg: #f2f4f8;
  --crm-history-th-bg: #f8f9fa;
  --crm-transactions-th-bg: #f2f4f8;
  --crm-summary-th-bg: #f2f4f8;
  --crm-courses-th-bg: #f2f4f8;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--crm-body-bg, #f5f5f5);
  color-scheme: light;
}
.topbar {
  background: #ffffff !important;
  color: #111111 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 16px 10px;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #d9dde3;
}
.topbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.topbar-userline {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex: 0 0 auto;
}
.topbar-user-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  width: 14px;
  height: 14px;
  color: #62748e;
  line-height: 1;
}
#userTopLabel {
  font-size: 13px;
  color: #334155;
}
#userTopPanelLabel {
  font-size: 13px;
  color: #64748b;
}
.topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.topbar-time-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
}
.topbar-time-wrap #mskTime {
  color: #475569 !important;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
}
.topbar-time-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #475569;
}
.logout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  width: 14px;
  height: 14px;
  line-height: 1;
  color: currentColor;
}
#logoutBtn {
  font-weight: 700;
  border: 1px solid #b8bec8 !important;
}
.content {
  margin-top: 60px;
  width: 98%;
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  background: var(--crm-content-bg, #fff);
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,.1);
  padding: 12px;
}
body.crm-logged-in .content {
  margin-top: var(--crm-topbar-total-h, 112px);
}
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.topbar .tabs {
  margin: 0;
  padding: 0;
  position: static;
  z-index: auto;
  background: transparent;
  box-shadow: none;
  margin-left: 0;
  margin-right: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.tab {
  border: 0;
  border-radius: 4px;
  color: #fff;
  padding: 8px 12px;
  background: linear-gradient(90deg, var(--crm-tab-grad-1, #4A4E69), var(--crm-tab-grad-2, #6B6D8B));
  cursor: pointer;
}
.tab.active {
  background: linear-gradient(90deg, var(--crm-tab-active-1, #6B6D8B), var(--crm-tab-active-2, #4A4E69));
}
/* Вкладки в синей шапке: белые с чёрным текстом; наведение — инверсия */
.topbar .tab {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #d8d8d8;
  box-shadow: none;
  font-size: 14px;
  padding: 4px 30px;
  min-height: 28px;
  line-height: 1.05;
  border-radius: 8px;
}
.topbar .tab:hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #d8d8d8;
}
.topbar .tab.active {
  background: #111 !important;
  color: #fff !important;
  border-color: #111;
  font-weight: 600;
}
#logoutBtn {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #d8d8d8 !important;
}
/* Референсный вид верхней панели для partner/support: светлая плашка, темный текст. */
body.role-partner .topbar,
body.role-support .topbar {
  background: #ffffff !important;
  color: #111 !important;
  border-bottom: 1px solid #ddd !important;
}
body.role-partner .topbar .tab,
body.role-support .topbar .tab {
  border-color: #d8d8d8;
  box-shadow: none;
}
body.role-partner .topbar #mskTime,
body.role-support .topbar #mskTime {
  color: #475569;
}
.panel-toolbar-sticky {
  position: sticky;
  top: var(--crm-topbar-total-h, 112px);
  z-index: 35;
  background: var(--crm-content-bg, #fff);
  padding-bottom: 6px;
  margin-bottom: 6px;
  box-shadow: 0 6px 8px -6px rgba(0,0,0,.12);
}
.tab-theme-toolbar { margin-bottom: 4px; }
.crm-tab-theme-hint { font-size: 12px; margin: 0 0 10px; color: #555; }
.crm-tab-theme-label { display: block; margin-bottom: 8px; font-size: 13px; }
.crm-tab-theme-select { display: block; width: 100%; margin-top: 4px; padding: 6px; }
/* Внутренний scroll ломает нативную палитру (Firefox / Safari); скролл у внешнего .modal-content */
.crm-tab-theme-fields { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; max-height: none; overflow: visible; }
.crm-tab-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; flex-wrap: wrap; }
.crm-color-inputs { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Общая рамка; в Safari border:none у ::-webkit-color-swatch давал кривой хитбокс/отрисовку */
input[type="color"] {
  box-sizing: border-box;
  color-scheme: light;
  padding: 2px;
  border: 1px solid #b8bcc4;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
  background-color: #fff;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border-radius: 2px;
}
input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 2px;
}

/* Модалка тем строк: без overflow:auto на контейнере — иначе в Safari/WebKit палитра глючит */
#crmTabThemeModal .modal-content {
  overflow: visible;
  max-height: none;
}
.crm-tab-theme-row input[type="color"] {
  width: 44px;
  height: 28px;
  padding: 2px;
}
/* Safari: вместо type=color — только превью, чтобы WebKit не подменял HEX */
.crm-tab-theme-row .crm-theme-color-preview {
  display: inline-block;
  width: 44px;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid #b8bcc4;
  border-radius: 4px;
  flex-shrink: 0;
  vertical-align: middle;
}
.crm-color-hex-input {
  width: 7.2em;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.crm-tab-theme-actions { justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.btn { border: 0; padding: 8px 10px; border-radius: 4px; cursor: pointer; transition: all .2s; }
.btn:hover { opacity: .9; transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-primary { background: #007bff; color: #fff; }
.btn-success { background: #28a745; color: #fff; }
.btn-danger { background: #dc3545; color: #fff; }
.btn-warning { background: #ffc107; color: #000; }
.btn-secondary { background: #6c757d; color: #fff; }
/* Не ставить overflow-y: clip на все .table-wrap — в Firefox нативный <input type="color"> в Ролях/банках не открывает палитру.
   clip только на обёртках без color inputs: payments / mypayments / payout / dashboard / history. */
.table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: #fff;
}
.table-wrap.history-table-wrap {
  overflow-y: clip;
}

/* Плавающий клон thead (Payments / My Payments / PayOut / Dashboard): сплошной фон, иначе при скролле просвечивают цвета строк */
/* У родителя pointer-events:none дочерние элементы по умолчанию всё равно ловят клики — перехватывали кнопки в первой колонке под «Действие I». */
#floatingStickyHead,
#floatingStickyHead * {
  pointer-events: none !important;
}
#floatingStickyHead {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
#floatingStickyHead table {
  background: #ffffff;
  /* Иначе наследуется min-width: 1300px от глобального `table` — клон шире сетки и ячейки растягиваются */
  min-width: 0 !important;
  max-width: none;
}
#floatingStickyHead thead,
#floatingStickyHead thead tr {
  background: #ffffff;
}
#floatingStickyHead thead th {
  background-color: #ffffff !important;
  background-image: none !important;
  border-radius: 0 !important;
}
/* Payments: как у .table-payments th — серый липкий заголовок и тот же порядок колонок, что у основной таблицы */
#floatingStickyHead.floating-sticky--payments {
  background: var(--crm-payments-th-bg, #f2f4f8);
}
#floatingStickyHead.floating-sticky--payments table {
  background: var(--crm-payments-th-bg, #f2f4f8);
}
#floatingStickyHead.floating-sticky--payments thead,
#floatingStickyHead.floating-sticky--payments thead tr {
  background: var(--crm-payments-th-bg, #f2f4f8);
}
#floatingStickyHead.floating-sticky--payments thead th {
  background-color: var(--crm-payments-th-bg, #f2f4f8) !important;
  background-image: none !important;
}
#floatingStickyHead.floating-sticky--mypayments {
  background: var(--crm-mypayments-th-bg, #f2f4f8);
}
#floatingStickyHead.floating-sticky--mypayments table,
#floatingStickyHead.floating-sticky--mypayments thead,
#floatingStickyHead.floating-sticky--mypayments thead tr {
  background: var(--crm-mypayments-th-bg, #f2f4f8);
}
#floatingStickyHead.floating-sticky--mypayments thead th {
  background-color: var(--crm-mypayments-th-bg, #f2f4f8) !important;
  background-image: none !important;
}
#floatingStickyHead.floating-sticky--payout {
  background: var(--crm-payout-th-bg, #f2f4f8);
}
#floatingStickyHead.floating-sticky--payout table,
#floatingStickyHead.floating-sticky--payout thead,
#floatingStickyHead.floating-sticky--payout thead tr {
  background: var(--crm-payout-th-bg, #f2f4f8);
}
#floatingStickyHead.floating-sticky--payout thead th {
  background-color: var(--crm-payout-th-bg, #f2f4f8) !important;
  background-image: none !important;
}
#floatingStickyHead.floating-sticky--dashboard {
  background: var(--crm-dashboard-th-bg, #f2f4f8);
}
#floatingStickyHead.floating-sticky--dashboard table,
#floatingStickyHead.floating-sticky--dashboard thead,
#floatingStickyHead.floating-sticky--dashboard thead tr {
  background: var(--crm-dashboard-th-bg, #f2f4f8);
}
#floatingStickyHead.floating-sticky--dashboard thead th {
  background-color: var(--crm-dashboard-th-bg, #f2f4f8) !important;
  background-image: none !important;
}
#floatingStickyHead.floating-sticky--history {
  background: var(--crm-history-th-bg, #f8f9fa);
}
#floatingStickyHead.floating-sticky--history table,
#floatingStickyHead.floating-sticky--history thead,
#floatingStickyHead.floating-sticky--history thead tr {
  background: var(--crm-history-th-bg, #f8f9fa);
}
#floatingStickyHead.floating-sticky--history thead th {
  background-color: var(--crm-history-th-bg, #f8f9fa) !important;
  background-image: none !important;
}
table { width: 100%; border-collapse: collapse; min-width: 1300px; border: 2px solid #000; }
th, td { border: 1px solid #000; padding: 6px; font-size: 12px; }
th { position: static; top: auto; background: #f8f9fa; z-index: auto; white-space: nowrap; }
/* Глобальный фон tr.row-* убран: классы используются только в Payments / My Payments / PayOut, там цвет задаётся на td + var(). Старые #fefbe8 / #e6ffe6 ломали Safari (просвет поверх темы). */
/* Payments: цвета строк (ТЗ); фон на ячейках, чтобы не конфликтовать с подсветкой дублей. Исключения: payments-cell-no-row-bg (панель, менеджеры, остаток с cell-remainder-*), payments-bank-cell */
.table-payments tbody,
.table-mypayments tbody {
  isolation: isolate;
}
/* macOS «Увеличить контрастность» / форсированные цвета — иначе Safari перекрашивает ячейки не как в Chrome */
.table-payments tbody td,
.table-mypayments tbody td,
.table-payout tbody td {
  forced-color-adjust: none;
}
.table-payments tbody tr.row-work,
.table-payments tbody tr.row-paying,
.table-payments tbody tr.row-problem,
.table-payments tbody tr.row-closed {
  background: transparent !important;
  background-color: transparent !important;
}
.table-payments tbody tr.row-closed > td:not(.payments-cell-no-row-bg):not(.payments-bank-cell) { background-color: var(--crm-payments-row-closed, #b7b6be) !important; }
.table-payments tbody tr.row-work > td:not(.payments-cell-no-row-bg):not(.payments-bank-cell) { background-color: var(--crm-payments-row-work, #eff6ff) !important; }
.table-payments tbody tr.row-paying > td:not(.payments-cell-no-row-bg):not(.payments-bank-cell) { background-color: var(--crm-payments-row-paying, #c5e99b) !important; }
.table-payments tbody tr.row-problem > td:not(.payments-cell-no-row-bg):not(.payments-bank-cell) { background-color: var(--crm-payments-row-problem, #ffcc99) !important; }
.table-payments tbody tr.row-work > td:not(.payments-cell-no-row-bg):not(.payments-bank-cell),
.table-payments tbody tr.row-paying > td:not(.payments-cell-no-row-bg):not(.payments-bank-cell),
.table-payments tbody tr.row-problem > td:not(.payments-cell-no-row-bg):not(.payments-bank-cell),
.table-payments tbody tr.row-closed > td:not(.payments-cell-no-row-bg):not(.payments-bank-cell) {
  background-image: none !important;
  background-clip: padding-box;
}
.table-payments tbody tr.row-work > td.payments-bank-cell,
.table-payments tbody tr.row-paying > td.payments-bank-cell,
.table-payments tbody tr.row-problem > td.payments-bank-cell,
.table-payments tbody tr.row-closed > td.payments-bank-cell {
  vertical-align: middle;
}
/* Safari: нативный select перекрывает фон td; наследование + без system chrome — как в Chromium */
.crm-table.table-payments select.assign-manager,
.crm-table.table-mypayments select.assign-manager {
  max-width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 12px;
  line-height: 1.25;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid #5c6570;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: inherit;
  color: inherit;
  cursor: pointer;
  color-scheme: light;
}
.crm-table.table-payments select.assign-manager:disabled,
.crm-table.table-mypayments select.assign-manager:disabled {
  opacity: 1;
  cursor: not-allowed;
  color: inherit;
}
/* My Payments: фон статуса на td, чтобы Партнёр ID (панель) и Остаток (классы ячейки) не перекрывались жёлтым/зелёным фоном строки */
.table-mypayments tbody tr.row-work,
.table-mypayments tbody tr.row-paying,
.table-mypayments tbody tr.row-problem,
.table-mypayments tbody tr.row-closed {
  background: transparent !important;
  background-color: transparent !important;
}
.table-mypayments tbody tr.row-work > td:not(.myp-cell-no-row-bg):not(.mypayments-bank-cell) { background-color: var(--crm-mypayments-row-work, #eff6ff) !important; }
.table-mypayments tbody tr.row-paying > td:not(.myp-cell-no-row-bg):not(.mypayments-bank-cell) { background-color: var(--crm-mypayments-row-paying, #c5e99b) !important; }
.table-mypayments tbody tr.row-problem > td:not(.myp-cell-no-row-bg):not(.mypayments-bank-cell) { background-color: var(--crm-mypayments-row-problem, #ffcc99) !important; }
.table-mypayments tbody tr.row-closed > td:not(.myp-cell-no-row-bg):not(.mypayments-bank-cell) { background-color: var(--crm-mypayments-row-closed, #b7b6be) !important; }
.table-mypayments tbody tr.row-work > td:not(.myp-cell-no-row-bg):not(.mypayments-bank-cell),
.table-mypayments tbody tr.row-paying > td:not(.myp-cell-no-row-bg):not(.mypayments-bank-cell),
.table-mypayments tbody tr.row-problem > td:not(.myp-cell-no-row-bg):not(.mypayments-bank-cell),
.table-mypayments tbody tr.row-closed > td:not(.myp-cell-no-row-bg):not(.mypayments-bank-cell) {
  background-image: none !important;
  background-clip: padding-box;
}
.table-mypayments tbody tr.row-work > td.mypayments-bank-cell,
.table-mypayments tbody tr.row-paying > td.mypayments-bank-cell,
.table-mypayments tbody tr.row-problem > td.mypayments-bank-cell,
.table-mypayments tbody tr.row-closed > td.mypayments-bank-cell {
  vertical-align: middle;
}
/* PayOut: цвет строки по статусу III и ячейки «Обработка» при ожидании действия партнёра */
.table-payout tbody {
  isolation: isolate;
}
.table-payout tbody tr { background: transparent !important; background-color: transparent !important; }
.table-payout tbody tr.row-closed > td:not(.payout-bank-cell) { background-color: var(--crm-payout-row-closed, #b7b6be) !important; }
.table-payout tbody tr.row-problem > td:not(.payout-bank-cell) { background-color: var(--crm-payout-row-problem, #ffcc99) !important; }
.table-payout tbody tr.row-closed > td:not(.payout-bank-cell),
.table-payout tbody tr.row-problem > td:not(.payout-bank-cell) {
  background-image: none !important;
  background-clip: padding-box;
}
.table-payout tbody tr.row-closed > td.payout-bank-cell,
.table-payout tbody tr.row-problem > td.payout-bank-cell {
  vertical-align: middle;
}
.tag {
  border-radius: 6px;
  min-height: 16px;
  padding: 0 3px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-right: 3px;
  line-height: 1;
  white-space: nowrap;
  border: 2px solid transparent;
  box-shadow: none;
  background: #fff;
  color: #fff;
  vertical-align: middle;
}
.tag-speed {
  border-color: #fe9900;
  background: #fe9900;
  color: #fff;
  min-width: 22px;
  min-height: 16px;
  padding: 0 2px;
  border-radius: 8px;
  position: relative;
  top: 0;
  align-self: center;
  justify-content: center;
}
.tag-speed::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 7 L8 2 L13 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 13 L8 8 L13 13' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tag-cancel {
  border-color: #e7000b;
  background: #e7000b;
  color: #fff;
}
.tag-edit {
  border-color: #00a5f4;
  background: #00a5f4;
  color: #fff;
}
.tag-black {
  border-color: #000;
  background: linear-gradient(180deg, #111 0%, #000 100%);
  color: #fff;
}
.tag-receipt {
  border-color: #00bc7d;
  background: #00bc7d;
  color: #fff;
  position: relative;
  min-width: 22px;
  min-height: 16px;
  padding: 0 2px;
  justify-content: center;
  gap: 0;
}
.tag-receipt::before {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1.5h6l3.5 3.5v9.5H3z' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 1.5V5h3.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M5.2 9.1l1.9 1.9 3.8-3.8' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tag-receipt::after {
  content: none;
}
.cell-blacklist { background: #000 !important; color: #fff !important; }
.cell-remainder-progress { background: #004aab !important; color: #fff !important; }
.cell-remainder-zero { background: #ff40ff !important; color: #fff !important; }
.free-sums { margin: 8px 0; background: transparent; border: 0; padding: 0; font-family: var(--font-sans); }
.free-sums { position: relative; display: inline-block; }
.free-sums-toggle { border: 1px solid #cfd6df; background: #fff; color: #111827; border-radius: 6px; padding: 4px 10px; font-weight: 600; cursor: pointer; font-size: 12px; line-height: 1.1; height: 26px; }
.free-sums-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 210px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid #d5dae3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 14px rgba(15, 23, 42, .12);
}
.free-sums-table { min-width: 210px; border: 0; border-collapse: separate; border-spacing: 0; }
.free-sums-table td { border: 0; border-bottom: 1px solid #eceff4; padding: 0; }
.free-sums-table tr:last-child td { border-bottom: 0; }
.free-sum-item { width: 100%; border: 0; background: #fff; color: #111; text-align: left; padding: 7px 12px; cursor: pointer; font-size: 21px; line-height: 1.1; }
.free-sum-item:hover { background: #f7f9fc; }
.free-sums-empty { padding: 8px 12px; color: #6b7280; font-size: 12px; }
.payments-toolbar-row {
  gap: 10px !important;
  flex-wrap: wrap !important;
  align-items: center;
  margin-bottom: 6px;
  padding: 6px 10px;
  border: 1px solid #d3d7de;
  border-radius: 8px;
  background: #f5f6f8;
  /* Не overflow-x:auto: иначе overflow-y становится auto и обрезает выпадающий список «Свободные суммы» */
  overflow: visible;
}
.payments-toolbar-btn {
  height: 26px;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  white-space: nowrap;
}
.payments-toolbar-btn-support {
  background: #10b981 !important;
  color: #fff !important;
}
.payments-toolbar-btn-support.is-off {
  background: #64748b !important;
  color: #fff !important;
}
.payments-toolbar-btn-support.is-on {
  background: #10b981 !important;
  color: #fff !important;
}
.payments-toolbar-btn-block {
  background: #1d9bf0 !important;
  color: #fff !important;
}
.payments-toolbar-btn-block.is-show {
  background: #f97316 !important;
  color: #fff !important;
}
.payments-toolbar-btn-block.is-hide {
  background: #1d9bf0 !important;
  color: #fff !important;
}
.payments-toolbar-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #1f2937;
  white-space: nowrap;
}
.payments-toolbar-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid #c3c8d1;
  border-radius: 4px;
  background: #fff;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.payments-toolbar-check input[type="checkbox"]:checked {
  border-color: #cf9a00;
  background-color: #f4bf1a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2.1L9 3.7' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}
.payments-toolbar-sep {
  width: 1px;
  height: 18px;
  background: #cfd4dd;
  margin-left: 2px;
  flex: 0 0 auto;
}
.payments-toolbar-row .free-sums {
  flex: 0 0 100%;
  margin: 2px 0 0 0;
  order: 99;
}
.po-comment-wrap { display: flex; gap: 6px; align-items: center; min-width: 240px; }
.po-comment-input { min-width: 160px; padding: 5px 7px; border: 1px solid #cbcfd5; border-radius: 6px; font-size: 12px; }
.spinner { width: 12px; height: 12px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; display: inline-block; animation: spin 1s linear infinite; vertical-align: middle; }
.hidden { display:none; }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.card { border:1px solid #ddd; border-radius:8px; padding:10px; background:#fff; }
.login-wrap {
  max-width: 360px;
  width: 100%;
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 12px;
}
.login-wrap input,
.login-wrap button {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}
.login-wrap input { margin: 6px 0; padding: 8px; }
.roles-grid { display:grid; grid-template-columns: repeat(2, minmax(360px, 1fr)); gap:12px; }
.roles-section { border:1px solid #ddd; border-radius:8px; padding:10px; background:#fff; }
.roles-section h3 { margin:0 0 10px; font-size:16px; }
.roles-inline { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.roles-inline input, .roles-inline select { padding:6px; }
/* По ТЗ: disabled селекты должны быть неактивными, но без "серого затемнения" */
select:disabled,
select[disabled] {
  opacity: 1 !important;
  background: inherit !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
}
.roles-full { grid-column: 1 / -1; }
.modal { display:none; position:fixed; z-index:1000; inset:0; background:rgba(0,0,0,.5); }
.modal.show { display:block; overflow-y:auto; }
.modal-content { background:#fff; width:90%; max-width:560px; margin:8% auto; border-radius:8px; padding:16px; max-height:80vh; overflow:auto; }
.mydata-modal-content {
  width: min(67vw, 854px);
  max-width: 854px;
  max-height: none;
  overflow: visible;
  margin: 10px auto 16px;
  padding: 8px 9px 7px;
  border-radius: 9px;
}
.mydata-modal-content h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.mydata-head { display:grid; grid-template-columns: 1fr; gap:4px; font-size:13px; border:0; box-shadow:none; padding:0 0 4px; }
.mydata-kv { display:grid; grid-template-columns: 1fr auto; gap:12px; align-items: baseline; }
.mydata-kv .k { color:#4b5f7a; font-size:11px; font-weight:500; line-height:1.1; }
.mydata-kv .v { color:#111; font-size:15px; font-weight:700; text-align:right; line-height:1.1; }
.mydata-kv-gap { margin-top: 5px; }
/* Подпись под блоком реквизитов — справа, как колонка значений */
.mydata-receipt-required {
  margin-top: 8px;
  text-align: right;
  width: 100%;
  color: #e91e63;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.35;
}
.mydata-table-wrap { overflow: visible; }
.mydata-table th, .mydata-table td { padding: 4px 4px; font-size: 13px; }
.mydata-table th { color:#5a6678; font-weight:600; }
.mydata-table input, .mydata-table select { width: 100%; min-width: 60px; box-sizing: border-box; height: 22px; border-radius: 5px; border: 1px solid #cfd6e4; font-size: 11px; padding: 0 5px; }
.mydata-table select { min-width: 72px; }
.mydata-table .my-confirm-row { width: 22px; min-width: 22px; height: 22px; border-radius: 5px; padding: 0; font-size: 12px; line-height: 1; }
#myDataClose { height: 22px; border-radius: 5px; padding: 0 8px; font-size: 12px; }
#myDataClose {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #cfd6df !important;
}

/* Force exact compact sizes inside Add Data modal */
#myDataModal .mydata-table th,
#myDataModal .mydata-table td {
  padding: 4px 4px !important;
  font-size: 13px !important;
}
#myDataModal .mydata-table-wrap {
  overflow-x: hidden !important;
  border: 0 !important;
  box-shadow: none !important;
}
#myDataModal .mydata-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 0 !important;
}
#myDataModal .mydata-table th,
#myDataModal .mydata-table td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border: 0 !important;
  border-bottom: 1px solid #e8edf4 !important;
  vertical-align: middle !important;
}
#myDataModal .mydata-table thead th {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #5d6980 !important;
  padding: 8px 8px !important;
  background: #fff !important;
  text-align: left !important;
}
#myDataModal .mydata-table thead th:nth-child(1) {
  padding-left: 10px !important;
}
#myDataModal .mydata-table thead th:nth-child(2),
#myDataModal .mydata-table thead th:nth-child(3),
#myDataModal .mydata-table thead th:nth-child(4) {
  padding-left: 14px !important;
}
#myDataModal .mydata-table tbody td {
  font-size: 12px !important;
  color: #101828 !important;
  padding: 7px 8px !important;
}
#myDataModal .mydata-table th:last-child,
#myDataModal .mydata-table td:last-child {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  text-align: right !important;
  padding-right: 6px !important;
}
#myDataModal .mydata-table tbody tr:last-child td {
  border-bottom: 0 !important;
}
#myDataModal .mydata-table input,
#myDataModal .mydata-table select {
  min-width: 60px !important;
  height: 30px !important;
  font-size: 11px !important;
  padding: 0 10px !important;
  border: 1px solid #cfd9e8 !important;
  border-radius: 7px !important;
  background: #fff !important;
}
#myDataModal .mydata-table .my-confirm-row {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  font-size: 14px !important;
  border-radius: 7px !important;
  padding: 0 !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#myDataModal #myDataClose {
  height: 34px !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  margin-left: auto !important;
}

/* Remove outer frame and tune modal heading */
#myDataModal .mydata-modal-content {
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14) !important;
}
#myDataModal .mydata-head.card {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
#myDataModal .mydata-modal-content h3 {
  font-size: 14px !important;
  margin-bottom: 4px !important;
}
@media (max-width: 900px) {
  .mydata-head { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .modal-content { width: 96vw; max-width: 96vw; margin: 8px auto; padding: 10px; }
  .mydata-modal-content { width: 96vw; max-width: 96vw; margin: 8px auto; padding: 8px; }
  .mydata-head { grid-template-columns: 1fr; gap: 4px 8px; font-size: 12px; }
  .mydata-kv .k { font-size: 20px; }
  .mydata-kv .v { font-size: 24px; }
  .mydata-table th, .mydata-table td { padding: 5px 6px; font-size: 12px; }
  .mydata-table input, .mydata-table select { min-width: 86px; font-size: 12px; padding: 5px; height: 34px; }
  .mydata-table .btn { font-size: 12px; padding: 5px 7px; height: 34px; min-width: 34px; }
  .payout-sticky-row { flex-direction: column; }
  #partnerCoursesCard,
  .payout-create-card { flex: 1 1 100%; max-width: 100%; }
}
.payments-confirm-modal { background: rgba(0,0,0,.25); }
#paymentsConfirmModal .payments-confirm-content {
  max-width: 360px;
  min-height: 210px;
  border-radius: 10px;
  box-shadow: none;
  padding: 10px 10px 9px;
  margin: 9% auto;
  display: flex;
  flex-direction: column;
}
#paymentsConfirmModal .payments-confirm-title {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #111 !important;
}
#paymentsConfirmModal .payments-confirm-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.2;
  color: #101010;
  flex: 1;
}
#paymentsConfirmModal .payments-confirm-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#paymentsConfirmModal .payments-confirm-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
}
#paymentsConfirmModal .payments-confirm-row .k {
  color: #6b7280;
  font-size: 10px;
}
#paymentsConfirmModal .payments-confirm-row .v {
  color: #111;
  text-align: right;
  font-weight: 600;
  font-size: 10px;
}
#paymentsConfirmModal .payments-confirm-row-gap {
  margin-top: 7px;
}
#paymentsConfirmModal .payments-confirm-row-course {
  margin-top: 10px;
}
#paymentsConfirmModal .payments-confirm-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
#paymentsConfirmModal .payments-confirm-cancel {
  flex: 0 0 auto;
  width: 78px;
  height: 24px;
  background: #fff;
  color: #111;
  border: 1px solid #d7dee9;
  border-radius: 5px;
  min-width: 0;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
}
#paymentsConfirmModal .payments-confirm-save {
  flex: 0 0 auto;
  width: 78px;
  height: 24px;
  background: #10b981;
  color: #fff;
  border: 1px solid #10b981;
  border-radius: 5px;
  min-width: 0;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
}
#paymentsConfirmModal .payments-confirm-save.is-danger {
  background: #ff2a3b !important;
  border-color: #ff2a3b !important;
  color: #fff !important;
}
#paymentsConfirmModal .payments-confirm-save.is-success {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #fff !important;
}
#paymentsConfirmModal .payments-confirm-save.is-primary {
  background: #2f7de8 !important;
  border-color: #2f7de8 !important;
  color: #fff !important;
}

/* Problem comment modal styling (same proportions as reference) */
#paymentsProblemCommentModal .payments-confirm-content {
  max-width: 560px;
  min-height: 248px;
  border-radius: 12px;
  padding: 14px;
}
#paymentsProblemCommentModal .payments-confirm-title {
  margin: 0 0 12px;
  font-size: 18px;
  color: #111 !important;
}
#paymentsProblemCommentModal #ppcTemplate {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid #d7dce5 !important;
  background: #eef2f7 !important;
  color: #334155 !important;
  font-size: 13px;
  font-weight: 500;
}
#paymentsProblemCommentModal #ppcComment {
  width: 100%;
  min-height: 90px;
  border: 1px solid #d7dce5;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  box-sizing: border-box;
}
#paymentsProblemCommentModal .payments-confirm-actions {
  margin-top: 8px !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
#paymentsProblemCommentModal #ppcCancel {
  width: 96px;
  height: 36px;
  border-radius: 7px;
  font-size: 13px;
}
#paymentsProblemCommentModal #ppcNext {
  width: 96px;
  height: 36px;
  border-radius: 7px;
  font-size: 13px;
  background: #ff2a3b !important;
  border-color: #ff2a3b !important;
  color: #fff !important;
}
#payoutCloseConfirmModal .payments-confirm-content {
  max-width: 480px;
  min-height: 330px;
  border-radius: 0;
  box-shadow: none;
  padding: 14px 14px 10px 14px;
  margin: 2% auto;
  display: flex;
  flex-direction: column;
}
#payoutCloseConfirmModal .payments-confirm-title {
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.08;
  color: #111 !important;
}
#payoutCloseConfirmModal .payments-confirm-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.24;
  color: #101010;
  flex: 1;
}
#payoutCloseConfirmModal .payments-confirm-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#payoutCloseConfirmModal .payments-confirm-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
}
#payoutCloseConfirmModal .payments-confirm-row .k {
  color: #4f6078;
  font-size: 14px;
}
#payoutCloseConfirmModal .payments-confirm-row .v {
  color: #111;
  text-align: right;
  font-weight: 600;
  font-size: 14px;
}
#payoutCloseConfirmModal .payments-confirm-row-gap {
  margin-top: 8px;
}
#payoutCloseConfirmModal .payments-confirm-actions {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
#payoutCloseConfirmModal .payments-confirm-cancel {
  flex: 0 0 calc(50% - 6px);
  height: 40px;
  background: #fff;
  color: #111;
  border: 2px solid #ccd5e3;
  border-radius: 10px;
  min-width: 0;
  padding: 0 12px;
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
}
/* Цвет только по режиму — иначе после частичного обновления таблицы оставался зелёный фон по умолчанию */
#payoutCloseConfirmModal #payoutCloseConfirmSave.payments-confirm-save {
  flex: 0 0 calc(50% - 6px);
  height: 40px;
  border-radius: 10px;
  min-width: 0;
  padding: 0 12px;
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
}
#payoutCloseConfirmModal #payoutCloseConfirmSave.payout-confirm-save--success {
  background: #00bc7d !important;
  color: #fff !important;
  border: 1px solid #00bc7d !important;
}
#payoutCloseConfirmModal #payoutCloseConfirmSave.payout-confirm-save--danger {
  background: #fb2c37 !important;
  color: #fff !important;
  border: 1px solid #fb2c37 !important;
}
.card h3 { margin: 0 0 8px; font-size: 16px; }
th[data-sort] { cursor: pointer; }
pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 11px; }
.table-mypayments-wrap { overflow-x: auto; max-width: 100%; }
.table-mypayments {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}
/* Firefox: при замене tbody без overflow-anchor страница «прилипает» и уезжает вниз */
.table-mypayments-wrap,
.table-payments-wrap,
.table-payout-wrap {
  overflow-anchor: none;
}

/* Липкий заголовок Payments / My Payments / PayOut — клон #floatingStickyHead в app.js (нативный sticky + overflow-x в Firefox даёт артефакты). */

/* Текст статусов (цвета из темы, настраиваются в «Роли») */
.table-payments .status-text.status-work { color: var(--crm-payments-status-work, #0d47a1); }
.table-payments .status-text.status-closed { color: var(--crm-payments-status-closed, #1b5e20); }
.table-payments .status-text.status-paying { color: var(--crm-payments-status-paying, #e65100); }
.table-payments .status-text.status-problem { color: var(--crm-payments-status-problem, #b71c1c); }
.table-payments td.pay-status-cell .status-text {
  display: inline-block;
  max-width: 58px; /* «В работе» полностью, «Оплачивается» уходит в троеточие */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.table-mypayments .status-text.status-work { color: var(--crm-mypayments-status-work, #0d47a1); }
.table-mypayments .status-text.status-closed { color: var(--crm-mypayments-status-closed, #1b5e20); }
.table-mypayments .status-text.status-paying { color: var(--crm-mypayments-status-paying, #e65100); }
.table-mypayments .status-text.status-problem { color: var(--crm-mypayments-status-problem, #b71c1c); }
.table-payout .status-text.status-closed { color: var(--crm-payout-status-closed, #1b5e20); }
.table-payout .status-text.status-problem { color: var(--crm-payout-status-problem, #b71c1c); }

/* PayOut: закреп — курсы + форма; статистика ниже */
.payout-sticky-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  width: 100%;
}
#partnerCoursesCard,
.payout-create-card {
  flex: 1 1 320px;
  min-width: 0;
  padding: 8px 10px;
  font-size: 12px;
}
#partnerCoursesCard { flex: 0 1 420px; }
.payout-create-card { flex: 1 1 300px; }
.payout-card-title {
  margin: 0 0 6px 0;
  font-size: 13px;
}
.payout-courses-mini {
  min-width: 0 !important;
  width: 100%;
  table-layout: fixed;
  font-size: 11px;
}
.payout-courses-mini th,
.payout-courses-mini td {
  word-break: break-word;
}
.payout-courses-actions {
  margin-top: 8px;
}
.btn-payout-xml {
  font-size: 11px;
  padding: 4px 8px;
}
.payout-create-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(120px, auto);
  gap: 8px;
  align-items: end;
}
.payout-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.payout-field-wide {
  grid-column: 1 / -1;
}
.payout-field-label {
  font-size: 13px;
  font-weight: 400;
  color: #5f6775;
  line-height: 1.2;
}
.payout-field-label-empty {
  visibility: hidden;
}
.payout-create-fields input,
.payout-create-fields select {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #d2d8e1;
  border-radius: 8px;
  height: 40px;
  padding: 0 10px;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-family: var(--font-sans);
}
.payout-create-fields #poExternalId {
  font-family: var(--font-sans);
}
.payout-create-fields select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #657084 50%),
    linear-gradient(135deg, #657084 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 11px) calc(50% - 3px),
    100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat: no-repeat;
}
.payout-create-fields #poCreate {
  width: 100%;
  min-width: 120px;
  align-self: auto;
}
.payout-create-btn {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111;
  border-radius: 8px;
  height: 40px;
  font-size: 16px;
  font-weight: 600;
}
.payout-create-btn:hover {
  background: #000 !important;
  border-color: #000;
}
.payout-stats-below {
  width: 100%;
  margin: 8px 0 10px;
}
.balance-top-row,
.balance-bottom-row {
  display: grid;
  gap: 24px;
  margin-bottom: 12px;
}
.balance-top-row { grid-template-columns: 118px minmax(0, 1fr); align-items: start; }
.balance-bottom-row {
  grid-template-columns: 1fr 1fr;
}
.balance-total-card #balanceValue {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
}
.balance-deposit-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 170px;
  gap: 10px;
  align-items: end;
}
.balance-deposit-grid input {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1000px) {
  .balance-top-row,
  .balance-bottom-row { grid-template-columns: 1fr; }
  .balance-deposit-grid { grid-template-columns: 1fr; }
}
.my-add-data {}
.my-confirm-row {}
.my-close-success {}
.my-return-work {}
.my-reject {}
.my-pay {}
@keyframes spin { to { transform: rotate(360deg); } }

.dashboard-table-wrap { overflow-x: auto; max-width: 100%; }
.dashboard-table { font-size: 12px; white-space: nowrap; }
.dashboard-toolbar { align-items: flex-start; }
.dashboard-cols-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  flex: 1 1 100%;
}
.dashboard-cols-panel.hidden { display: none !important; }
.dashboard-col-toggle { font-size: 11px; }
.modal-wide.modal-content { max-width: min(960px, 92vw); }
.text-muted { color: #666; font-size: 12px; }
.bank-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  border: 1px solid #cfd6e4;
  border-radius: 999px;
  background: #f7f9fc;
  font-size: 12px;
}
.bank-pill-remove {
  border: 0;
  background: transparent;
  color: #b42318;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  padding: 0;
}
.dashboard-row { cursor: pointer; }
/* Не заливаем строку серым — иначе теряется цвет столбцов; лёгкий hover по ячейкам */
.dashboard-table tbody tr.dashboard-row:hover td {
  filter: brightness(0.94);
}

/* Payments / My Payments / PayOut */
.table-payments-wrap,
.table-mypayments-wrap,
.table-payout-wrap,
.dashboard-table-wrap {
  border: 1px solid #e0e2e6;
  border-radius: 10px;
  box-shadow: none;
  overflow-x: auto;
  overflow-y: clip;
}
.copy-ext-id { cursor: pointer; user-select: text; }
.copy-ext-id.copied {
  background: #fff3cd !important;
  box-shadow: inset 0 0 0 2px #ffc107;
  border-radius: 4px;
  padding: 1px 3px;
}
/* Keep partner payout cards compact; avoid global table min-width stretch */
#partnerCoursesCard {
  border: 1px solid #cfd6df;
  border-radius: 16px;
}
.payout-courses-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.payout-course-item {
  border: 1px solid #d5dbe4;
  border-radius: 8px;
  background: #f3f5f8;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  line-height: 1;
}
.payout-course-code {
  font-weight: 700;
  color: #1a1a1a;
}
.payout-course-rate {
  color: #4f5562;
}
.payout-course-empty {
  grid-column: 1 / -1;
  border: 1px dashed #cfd6df;
  border-radius: 8px;
  padding: 10px 12px;
  color: #606a78;
  background: #fafbfc;
}
.payout-courses-actions {
  margin-top: 14px;
}
.btn-payout-xml {
  display: block;
  width: 100%;
  text-align: center;
  border: 1px solid #cfd6df;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  color: #1b1b1b;
}
.btn-payout-xml:hover {
  background: #f3f5f8;
  transform: none;
}

#balance .card {
  border-radius: 10px;
  border: 1px solid #d9dde3;
  box-shadow: none;
  padding: 12px 14px;
}
#balance .balance-total-card {
  padding: 8px 9px 4px;
  width: 118px;
  max-width: 118px;
  justify-self: start;
  min-height: 0;
  height: 60px;
  overflow: hidden;
  align-self: start;
}
#balance .balance-deposit-card {
  width: auto;
  margin-left: 0;
  min-width: 0;
  overflow: hidden;
  align-self: start;
}
#balance .balance-top-row {
  margin-bottom: 20px;
}
#balance .balance-total-card h3 {
  font-size: 14px;
  margin-bottom: 4px;
  font-weight: 600;
}
.balance-total-card #balanceValue {
  margin: 0;
  font-size: 18px;
  line-height: 1;
}
.balance-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.balance-field label {
  font-size: 12px;
  color: #5f6775;
  font-weight: 400;
}
#balance #depBtn {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111;
  height: 40px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
#balance #depBtn:hover {
  background: #000 !important;
  border-color: #000;
}
#balance .balance-top-row,
#balance .balance-bottom-row {
  gap: 30px;
}
#balance .balance-top-row {
  column-gap: 30px !important;
  margin-bottom: 24px !important;
}
#balance .table-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
#balance table {
  min-width: 0;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
#balance th,
#balance td {
  border: 0;
  border-bottom: 1px solid #e6e9ee;
  padding: 6px 4px;
  font-size: 12px;
  color: #2a2f38;
  text-align: left;
}
#balance thead th {
  color: #5e6673;
  font-weight: 500;
  background: transparent;
}
#balance tbody tr:last-child td {
  border-bottom: 0;
}
#balance .card h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}
#balance #partnerArchives .btn {
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.25;
  margin-right: 4px;
  background: #fff;
  color: #1f2430;
  border: 1px solid #cfd5de;
  border-radius: 4px;
  box-shadow: none;
  transform: none;
}
#balance #partnerArchives .btn:hover {
  background: #f3f5f8;
  color: #111;
  border-color: #c5ccd6;
}
#balance #depositHistory td:nth-child(2),
#balance #depositHistory th:nth-child(2) {
  width: 120px;
}
#balance #depositHistory td:nth-child(1),
#balance #depositHistory th:nth-child(1) {
  width: 80px;
}
#balance #partnerArchives td:nth-child(1),
#balance #partnerArchives th:nth-child(1) {
  width: 120px;
}
#balance #partnerArchives td:nth-child(2),
#balance #partnerArchives th:nth-child(2) {
  text-align: right;
}
#balance .balance-history-card,
#balance .balance-archive-card {
  padding: 10px 12px;
  border-radius: 14px !important;
  overflow: hidden;
}
#balance .balance-history-card h3,
#balance .balance-archive-card h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  font-family: var(--font-sans);
}
#balance .balance-history-card thead th,
#balance .balance-archive-card thead th {
  font-size: 12px !important;
  color: #5f6775;
  font-weight: 500;
  border-bottom: 1px solid rgba(50, 70, 95, 0.14) !important;
  padding-top: 4px !important;
  padding-bottom: 6px !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
}
#balance .balance-history-card td,
#balance .balance-archive-card td {
  font-size: 12px !important;
  font-weight: 400;
  color: #151922;
  line-height: 1.2;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(50, 70, 95, 0.12) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  font-family: var(--font-sans);
}
#balance .balance-archive-card #partnerArchives .btn {
  height: 32px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  vertical-align: middle;
}
#balance .balance-history-card #depositHistory td:nth-child(2) {
  font-weight: 600;
}
#balance .balance-history-card table,
#balance .balance-archive-card table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: 0 !important;
}
#balance .balance-history-card .table-wrap,
#balance .balance-archive-card .table-wrap {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  overflow: hidden;
}
#balance .balance-history-card tbody tr:last-child td,
#balance .balance-archive-card tbody tr:last-child td {
  border-bottom-color: transparent !important;
}
#balance .balance-archive-card #partnerArchives td:nth-child(1),
#balance .balance-archive-card #partnerArchives th:nth-child(1) {
  width: 170px !important;
  white-space: nowrap;
}
#balance .balance-archive-card #partnerArchives td,
#balance .balance-archive-card #partnerArchives th,
#balance .balance-history-card #depositHistory td,
#balance .balance-history-card #depositHistory th {
  white-space: nowrap;
}
#archiveModal .table-wrap {
  overflow-x: auto !important;
}
#archiveModal table {
  table-layout: auto !important;
  min-width: 1320px;
}
#archiveModal th,
#archiveModal td {
  white-space: nowrap;
}
#archiveModal th:nth-child(1), #archiveModal td:nth-child(1) { min-width: 240px; } /* Внеш. ID */
#archiveModal th:nth-child(5), #archiveModal td:nth-child(5) { min-width: 120px; } /* Сумма */
#archiveModal th:nth-child(6), #archiveModal td:nth-child(6) { min-width: 120px; } /* Банк */
#archiveModal th:nth-child(7), #archiveModal td:nth-child(7) { min-width: 160px; } /* Карта */
#archiveModal th:nth-child(12), #archiveModal td:nth-child(12) { min-width: 170px; } /* Время */
/* PayOut: карточная статистика как в эталоне */
.partner-stats-v2 {
  border: 1px solid #d9dde3;
  border-radius: 18px;
  background: #fff;
  padding: 14px 14px 12px;
}
.partner-stats-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #1f2a37;
}
.partner-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e7ebf1;
}
.partner-stats-grid:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.partner-stat-card {
  border: 1px solid #d6dde7;
  border-radius: 10px;
  background: #f8fafc;
  padding: 10px 12px;
}
.partner-stat-card.is-work {
  border-color: #bfdbfe;
  background: #eff6ff;
}
.partner-stat-card.is-closed {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.partner-stat-card.is-problem {
  border-color: #fecdd3;
  background: #fff1f2;
}
.partner-stat-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
  text-transform: none;
}
.partner-stat-value {
  font-size: 20px;
  line-height: 1.1;
  font-weight: 700;
  color: #0f172a;
}
.partner-stat-card.is-work .partner-stat-value { color: #1d4ed8; }
.partner-stat-card.is-closed .partner-stat-value { color: #0f9f59; }
.partner-stat-card.is-problem .partner-stat-value { color: #be123c; }
.crm-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 0;
}
.table-payments th,
.table-mypayments th,
.table-payout th {
  top: auto;
  z-index: auto;
  color: #2c3e50;
  border: 1px solid #cbcfd5;
}
.table-payments th { background: var(--crm-payments-th-bg, #f2f4f8); }
.table-mypayments th { background: var(--crm-mypayments-th-bg, #f2f4f8); }
.table-payout th { background: var(--crm-payout-th-bg, #f2f4f8); }
.dashboard-table th {
  top: auto;
  z-index: auto;
  background: var(--crm-dashboard-th-bg, #f2f4f8);
}

/* Original headers stay in normal place (floating clone handles stickiness) */
.table-payments th,
.table-mypayments th,
.table-payout th,
.dashboard-table th,
.history-table th {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

.history-table th {
  background: var(--crm-history-th-bg, #f8f9fa);
}

/* History toolbar: compact and unified for all roles */
#history .panel-toolbar-sticky {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
#history .panel-toolbar-sticky .roles-inline {
  margin-bottom: 0;
}
#history .panel-toolbar-sticky label {
  font-size: 12px;
  color: #5f6b7a;
}
#history #historyPlaceFilter {
  height: 28px;
  padding: 4px 8px;
  border: 1px solid #d9dee6;
  border-radius: 8px;
  background: #fff;
  color: #1f2a37;
  font-size: 12px;
}
#history .history-pager-bar {
  margin-top: 0 !important;
  gap: 8px !important;
  margin-left: auto;
}
#history .history-pager-bar span {
  font-size: 12px;
  color: #111827;
}
#history .history-pager-bar .btn {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#history .history-pager-bar .btn.btn-secondary {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #d8d8d8 !important;
  box-shadow: none !important;
}
#history .history-pager-bar .btn.btn-secondary:disabled {
  opacity: 1;
  color: #c0c6d1 !important;
  border-color: #e1e5eb !important;
  background: #fff !important;
}
#history .history-page-indicator {
  min-width: 44px;
  text-align: center;
  font-size: 14px !important;
  font-weight: 500;
  color: #111827 !important;
}
#transactions .table-wrap thead th,
#transactions .crm-table-tx thead th {
  background: var(--crm-transactions-th-bg, #f2f4f8);
}
#summary .table-wrap thead th {
  background: var(--crm-summary-th-bg, #f2f4f8);
}
#summary .summary-toolbar {
  box-shadow: none;
  margin-bottom: 8px;
}
#summary .summary-card {
  border: 1px solid #d9dde3;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
}
#summary .summary-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
#summary .summary-table {
  width: 100%;
  min-width: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}
#summary .summary-table th,
#summary .summary-table td {
  border: 0;
  border-bottom: 1px solid #eceff4;
  padding: 9px 8px;
  font-size: 14px;
  color: #111827;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#summary .summary-table th {
  color: #667085;
  font-weight: 500;
  background: transparent !important;
  white-space: normal;
  line-height: 1.2;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}
#summary .summary-card:first-of-type .summary-table th:nth-child(4),
#summary .summary-card:first-of-type .summary-table td:nth-child(4) {
  width: 170px;
}
#summary .summary-card:first-of-type .summary-table th:nth-child(5),
#summary .summary-card:first-of-type .summary-table td:nth-child(5) {
  width: 90px;
}
#summary .summary-table tbody tr:last-child td {
  border-bottom: 0;
}
#summary .summary-archive-toolbar .btn {
  height: 28px;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
}
#summary #closeShift {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111 !important;
}
#summary #sumArchToggle {
  background: #fff;
  color: #111;
  border: 1px solid #cfd6df;
}
#summary .summary-archive-files .btn {
  height: 20px;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  line-height: 1;
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #cfd6df !important;
  margin-right: 4px;
}
#summary .summary-archive-files .btn:last-child {
  margin-right: 0;
}
#courses .table-wrap thead th {
  background: var(--crm-courses-th-bg, #f2f4f8);
}
#courses {
  font-family: var(--font-sans);
}
#courses .courses-section-card {
  border: 1px solid #d9dde3;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
}
#courses .courses-section-card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}
#courses .courses-table-wrap {
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
#courses .courses-table {
  width: 100%;
  min-width: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}
#courses .courses-table th,
#courses .courses-table td {
  border: 0;
  border-bottom: 1px solid #eceff3;
  padding: 8px 6px;
  font-size: 14px;
  color: #111827;
  text-align: left;
}
#courses .courses-table th {
  color: #667085;
  font-weight: 500;
  background: transparent !important;
}
#courses .courses-table tbody tr:last-child td {
  border-bottom: 0;
}
#courses .course-rate {
  width: 100%;
  max-width: 110px;
  height: 30px;
  border: 1px solid #d4d8e1;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 14px;
  box-sizing: border-box;
}
#courses .course-save-btn {
  background: #000 !important;
  color: #fff !important;
  border: 0;
  border-radius: 5px;
  height: 30px;
  min-width: 84px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
}
#courses .partner-bank-add-select {
  height: 30px;
  min-width: 130px;
  border: 1px solid #d4d8e1;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 13px;
  background: #fff;
}
#courses .course-add-btn {
  margin-left: 6px;
  background: #10b981 !important;
  color: #fff !important;
  border: 0;
  border-radius: 5px;
  height: 30px;
  min-width: 76px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
}
#courses .bank-pill {
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid #e4e7ee;
  background: #f8fafc;
  font-size: 12px;
}
#courses .bank-pill-remove {
  margin-left: 4px;
  font-size: 12px;
  color: #ef4444;
}
#courses .courses-file-row {
  margin-top: 12px;
}
#courses .courses-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #111827;
  border: 1px solid #d4d8e1;
  border-radius: 6px;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
#courses .courses-file-btn::before {
  content: '📄';
  font-size: 14px;
}
.table-payments td,
.table-mypayments td,
.table-payout td {
  color: #212529;
  border: 1px solid #e0e2e6;
}
/* Верх шапки без radius — скругление только у .table-wrap + нижние углы tbody (иначе уголки th дают просвет) */
.table-payments tbody tr:last-child td:first-child,
.table-mypayments tbody tr:last-child td:first-child,
.table-payout tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.table-payments tbody tr:last-child td:last-child,
.table-mypayments tbody tr:last-child td:last-child,
.table-payout tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }

.status-text { font-weight: 500; }
.status-work { color: #2563eb; }
.status-problem { color: #c62828; }
.status-closed { color: #1f8a4c; }
.status-paying { color: #b45309; }
.status-cancelled { color: #c62828; }

/* PayOut action buttons — символы строго по центру */
.p-action-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 5px;
  margin-right: 6px;
  box-shadow: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
}
.p-action-btn::before,
.p-action-btn::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}
.p-action-speed { background: #fe9900; }
.p-action-speed::before {
  content: '' !important;
  display: block !important;
  width: 18px;
  height: 18px;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 15l5-4.5 5 4.5M7 20.5l5-4.5 5 4.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.p-action-cancel-request { background: #f44801; }
.p-action-cancel-request::before {
  content: '' !important;
  display: block !important;
  width: 18px;
  height: 18px;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4L4.2 18h15.6L12 4z' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 9.5v4.2' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.6' r='1.1' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}
.p-action-cancel-remove { background: #61738a; }
.p-action-cancel-remove::before {
  content: '' !important;
  display: block !important;
  width: 18px;
  height: 18px;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 8.2H6.2V5.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M6.2 9.5a6.4 6.4 0 1 1 0 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.p-process-btn-success { background: #02bb7c; }
/* SVG вместо глифа ✓ — шрифт даёт визуальный сдвиг */
.p-process-btn-success::before {
  content: '' !important;
  display: block !important;
  width: 18px;
  height: 18px;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.p-process-btn-cancel {
  background: #fb2c37;
  width: 34px;
  min-width: 34px;
}
.p-process-btn-cancel::before {
  content: none !important;
  display: none !important;
}
/* SVG вместо глифа × */
.p-process-btn-cancel::after {
  content: '' !important;
  display: block !important;
  width: 16px;
  height: 16px;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  font-size: 0 !important;
  font-weight: 400 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.p-action-black { background: #111; }
.p-action-black::before {
  content: 'ЧС';
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  line-height: 1;
}
.p-action-black-remove { background: #374151; }
/* Два слоя: текст по центру, × в углу */
.p-action-black-remove::before {
  content: 'ЧС';
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}
.p-action-black-remove::after {
  content: '' !important;
  display: block !important;
  width: 9px;
  height: 9px;
  position: absolute !important;
  left: auto !important;
  top: 3px !important;
  right: 3px !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.p-action-rekv { background: #2563eb; }
.p-action-rekv::before {
  content: 'Р';
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  line-height: 1;
}
.p-action-rekv-remove { background: #1d4ed8; }
.p-action-rekv-remove::before {
  content: 'Р';
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}
.p-action-rekv-remove::after {
  content: '' !important;
  display: block !important;
  width: 9px;
  height: 9px;
  position: absolute !important;
  left: auto !important;
  top: 3px !important;
  right: 3px !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.p-action-receipt { background: #1f8a4c; }
.p-action-receipt::before {
  content: 'Ч';
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  line-height: 1;
}
.p-action-receipt-remove { background: #166534; }
.p-action-receipt-remove::before {
  content: 'Ч';
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}
.p-action-receipt-remove::after {
  content: '' !important;
  display: block !important;
  width: 9px;
  height: 9px;
  position: absolute !important;
  left: auto !important;
  top: 3px !important;
  right: 3px !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* PayOut: force center icons in Action I + Processing */
.table-payout .p-action-btn,
.table-payout .p-process-btn-success,
.table-payout .p-process-btn-cancel {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  margin-right: 4px !important;
  vertical-align: middle;
  line-height: 0;
}
/* PayOut в таблице: SVG/одиночный текст — центр через flex + static */
.table-payout .p-action-speed::before,
.table-payout .p-action-cancel-request::before,
.table-payout .p-action-cancel-remove::before,
.table-payout .p-process-btn-success::before,
.table-payout .p-process-btn-cancel::after,
.table-payout .p-action-black::before,
.table-payout .p-action-rekv::before,
.table-payout .p-action-receipt::before {
  width: 12px !important;
  height: 12px !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}
/* Кнопки remove: основной текст по центру, × в углу */
.table-payout .p-action-black-remove::before,
.table-payout .p-action-rekv-remove::before,
.table-payout .p-action-receipt-remove::before {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.table-payout .p-action-black-remove::after,
.table-payout .p-action-rekv-remove::after,
.table-payout .p-action-receipt-remove::after {
  position: absolute !important;
  left: auto !important;
  top: 3px !important;
  right: 3px !important;
  bottom: auto !important;
  transform: none !important;
}

/* PayOut: компактный столбец «Обр», но кнопки 20x20 помещаются */
.table-payout th:nth-child(5),
.table-payout td:nth-child(5) {
  width: 56px;
  min-width: 52px;
  max-width: 60px;
  text-align: center;
}
.table-payout td:nth-child(5) {
  white-space: nowrap;
}

/* Payments/My Payments action buttons */
.table-payments .btn,
.table-mypayments .btn {
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
  box-shadow: none;
}
.table-payments .btn:hover,
.table-mypayments .btn:hover {
  transform: none;
  opacity: 0.95;
}

/* Payments/MyPayments buttons mapped to Фото references */
.pm-icon-btn {
  width: 12px;
  min-width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 4px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2px;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
}
.pm-icon-btn .txt {
  line-height: 1;
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
}
.pm-icon-btn.pm-return .txt,
.pm-icon-btn.pm-problem .txt,
.pm-icon-btn.pm-done .txt,
.pm-icon-btn.pm-reject .txt,
.pm-icon-btn.pm-add .txt,
.pm-icon-btn.pm-paying .txt,
.pm-icon-btn.pm-not-paying .txt,
.pm-icon-btn.pm-receipt .txt,
.pm-icon-btn.pm-arrow .txt {
  display: inline-block;
  width: 12px;
  height: 12px;
  font-size: 0;
  color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.pm-icon-btn.pm-return .txt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='geometricPrecision' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 8.1H6.2V5.2' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.2 9.4a6.5 6.5 0 1 1 0 5.2' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pm-icon-btn.pm-problem .txt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4L4.2 18h15.6L12 4z' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 9.4v4.4' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.5' r='1.05' fill='%23fff'/%3E%3C/svg%3E");
}
.pm-icon-btn.pm-done .txt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.2 12.3l3.2 3.2L18.7 7.7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pm-icon-btn.pm-reject .txt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pm-icon-btn.pm-add .txt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pm-icon-btn.pm-paying .txt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 6.5l9 5.5-9 5.5z' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pm-icon-btn.pm-not-paying .txt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M7.3 7.3l9.4 9.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pm-icon-btn.pm-receipt .txt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='geometricPrecision' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h10v14l-1.2-1-1.3 1-1.3-1-1.3 1-1.3-1-1.3 1-1.3-1V4z' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linejoin='round'/%3E%3Crect x='8.8' y='7.8' width='6.4' height='6.4' rx='0.7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M12 8.7v4.6M10.6 10.3h2.8M10.6 12h2.8' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pm-icon-btn.pm-arrow .txt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h12M13.2 7l5 5-5 5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Payments: крупнее иконки действий */
.table-payments .pm-icon-btn {
  width: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 10px;
}
.table-payments .payments-wait-cd {
  opacity: 0.75;
  font-size: 14px;
  margin-right: 4px;
  vertical-align: middle;
}

.table-payments .pm-icon-btn.pm-arrow {
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0;
}
.table-payments .copy-ext-id { font-size: 10px; }

.table-mypayments .pm-icon-btn {
  width: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 10px;
}
.table-mypayments .pm-icon-btn.pm-arrow {
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0;
}
.table-mypayments .copy-ext-id { font-size: 10px; }
.table-payout .copy-ext-id { font-size: 10px; }
.table-payout .copy-ext-id,
.table-payments .copy-ext-id,
.table-mypayments .copy-ext-id {
  position: relative;
  display: inline-block;
}
.table-payout .copy-ext-id .ext-id-full-search,
.table-payments .copy-ext-id .ext-id-full-search,
.table-mypayments .copy-ext-id .ext-id-full-search {
  position: absolute;
  inset: 0;
  opacity: 1;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  pointer-events: none;
  z-index: 0;
}
.table-payout .copy-ext-id .ext-id-short,
.table-payments .copy-ext-id .ext-id-short,
.table-mypayments .copy-ext-id .ext-id-short {
  position: relative;
  z-index: 1;
  font-size: 10px;
  line-height: 1;
}

/* Акцент столбцов: +1px к базовому размеру ячейки и жирный шрифт */
.table-payments td.crm-cell-em,
.table-payout td.crm-cell-em {
  font-size: 13px;
  font-weight: 700;
}
.table-mypayments td.crm-cell-em {
  font-size: 11px !important;
  font-weight: 700 !important;
}
.table-payments th.crm-th-em,
.table-payout th.crm-th-em {
  font-size: 13px;
  font-weight: 700;
}
.table-mypayments th.crm-th-em {
  font-size: 9px !important;
  font-weight: 700 !important;
}

/* My Payments: compact toolbar and persistent column picker */
.myp-col-toolbar {
  position: relative;
}
.myp-col-trigger {
  background: #fff !important;
  color: #1f2937 !important;
  border: 1px solid #cfd6df !important;
  border-radius: 7px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
}
.myp-col-trigger.active {
  background: #f8fafc !important;
  border-color: #aeb8c5 !important;
}
.myp-cols-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 270px;
  max-width: 320px;
  background: #fff;
  border: 1px solid #cfd6df;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
  padding: 10px 12px;
  z-index: 60;
}
.myp-cols-menu-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #111827;
}
.myp-cols-menu-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 16px;
  color: #334155;
}
.myp-status-toolbar {
  font-size: 13px;
  color: #111827;
}
.myp-status-group b {
  margin-right: 6px;
}
.myp-status-group label {
  margin-right: 8px;
  white-space: nowrap;
}
.myp-status-sep {
  color: #94a3b8;
}

/* My Payments: fit all columns into one screen */
.table-mypayments th,
.table-mypayments td {
  padding: 3px 4px !important;
  font-size: 10px !important;
  line-height: 1.15;
  white-space: nowrap !important;
  word-break: normal !important;
}
.table-mypayments th {
  white-space: normal !important;
  line-height: 1.05;
  font-size: 8px !important;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-mypayments td {
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-mypayments th:nth-child(1),
.table-mypayments td:nth-child(1) {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  text-align: center;
  white-space: nowrap !important;
}
.table-mypayments th:nth-child(2),
.table-mypayments td:nth-child(2),
.table-mypayments th:nth-child(3),
.table-mypayments td:nth-child(3),
.table-mypayments th:nth-child(8),
.table-mypayments td:nth-child(8) {
  width: 44px;
  max-width: 44px;
  text-align: center;
}
/* Статус I / II (My Payments): как в Payments — «В работе» влезает, «Оплачивается» уходит в троеточие */
.table-mypayments th:nth-child(6),
.table-mypayments td:nth-child(6),
.table-mypayments th:nth-child(7),
.table-mypayments td:nth-child(7) {
  width: 50px;
  min-width: 48px;
  max-width: 52px;
  text-align: center;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal !important;
  vertical-align: middle;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.table-mypayments td:nth-child(6) .status-text,
.table-mypayments td:nth-child(7) .status-text {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  line-height: 1;
}
/* Для прочерка (без status-* класса) — отдельное центрирование в колонках Статус I/II */
.table-mypayments td:nth-child(6) .status-text:not(.status-work):not(.status-closed):not(.status-paying):not(.status-problem):not(.status-cancelled),
.table-mypayments td:nth-child(7) .status-text:not(.status-work):not(.status-closed):not(.status-paying):not(.status-problem):not(.status-cancelled) {
  text-align: center;
}
.table-mypayments th:nth-child(3),
.table-mypayments td:nth-child(3) {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
}
.table-mypayments th:nth-child(4),
.table-mypayments td:nth-child(4) {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
}
/* Теги: перенос в tbody; заголовок — по центру по вертикали (не top, иначе «Теги» прилипает к углу) */
.table-mypayments th:nth-child(5),
.table-mypayments td:nth-child(5) {
  width: 64px;
  min-width: 52px;
  max-width: 64px;
  text-align: center;
}
.table-mypayments th:nth-child(5) {
  vertical-align: middle;
}
.table-mypayments td:nth-child(5) {
  vertical-align: top;
  white-space: normal !important;
  overflow: visible;
  text-overflow: clip;
  word-break: normal !important;
  line-height: 1.25;
}
.table-mypayments td:nth-child(5) .tag {
  margin-bottom: 2px;
}
.table-mypayments td:nth-child(5) .tag:last-child {
  margin-right: 0;
}
/* Сумма / Остаток: уже по ширине, перенос длинных чисел */
.table-mypayments th:nth-child(9),
.table-mypayments td:nth-child(9),
.table-mypayments th:nth-child(10),
.table-mypayments td:nth-child(10) {
  width: 38px;
  min-width: 34px;
  max-width: 44px;
  text-align: center;
}
.table-mypayments td:nth-child(9),
.table-mypayments td:nth-child(10) {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-all !important;
  vertical-align: middle;
  line-height: 1.15;
}
.table-mypayments th:nth-child(9),
.table-mypayments th:nth-child(10) {
  vertical-align: middle;
}
.table-mypayments th:nth-child(11),
.table-mypayments td:nth-child(11) {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}
.table-mypayments td:nth-child(11) {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  line-height: 1.15;
  vertical-align: middle;
}
.table-mypayments th:nth-child(8),
.table-mypayments td:nth-child(8) {
  width: 24px;
  min-width: 24px;
  max-width: 26px;
}
.table-mypayments th:nth-child(12),
.table-mypayments td:nth-child(12) {
  width: 74px;
  min-width: 70px;
  max-width: 78px;
}
.table-mypayments th:nth-child(13),
.table-mypayments td:nth-child(13) {
  width: 54px;
  min-width: 54px;
  max-width: 54px;
}
.table-mypayments th:nth-child(14),
.table-mypayments td:nth-child(14) {
  width: 58px;
  min-width: 58px;
  max-width: 58px;
}
.table-mypayments th.myp-col-action2,
.table-mypayments td.myp-col-action2 {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  box-sizing: border-box;
}
.table-mypayments th.myp-col-action1,
.table-mypayments td.myp-col-action1 {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  box-sizing: border-box;
}
.table-mypayments th.myp-col-extid,
.table-mypayments td.myp-col-extid {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  box-sizing: border-box;
}
.table-mypayments th.myp-col-partnerid,
.table-mypayments td.myp-col-partnerid {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  box-sizing: border-box;
}
.table-mypayments th.myp-col-intid,
.table-mypayments td.myp-col-intid {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  box-sizing: border-box;
}
.table-mypayments th.myp-col-status1,
.table-mypayments td.myp-col-status1,
.table-mypayments th.myp-col-status2,
.table-mypayments td.myp-col-status2 {
  width: 50px !important;
  min-width: 48px !important;
  max-width: 52px !important;
  box-sizing: border-box;
}
.table-mypayments th.myp-col-count,
.table-mypayments td.myp-col-count {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 32px !important;
  box-sizing: border-box;
}
.table-mypayments th.myp-col-sum,
.table-mypayments td.myp-col-sum,
.table-mypayments th.myp-col-rem,
.table-mypayments td.myp-col-rem {
  width: 63px !important;
  min-width: 63px !important;
  max-width: 63px !important;
  box-sizing: border-box;
}
.table-mypayments td.myp-col-sum,
.table-mypayments td.myp-col-rem {
  text-align: left !important;
}
.table-mypayments th.myp-col-card,
.table-mypayments td.myp-col-card {
  width: 118px !important;
  min-width: 114px !important;
  max-width: 122px !important;
  box-sizing: border-box;
}
.table-mypayments th.myp-col-tags,
.table-mypayments td.myp-col-tags {
  width: 86px !important;
  min-width: 82px !important;
  max-width: 90px !important;
  box-sizing: border-box;
}
.table-mypayments th.myp-col-bank,
.table-mypayments td.myp-col-bank {
  width: 98px !important;
  min-width: 94px !important;
  max-width: 102px !important;
  box-sizing: border-box;
}
.table-mypayments th.myp-col-name,
.table-mypayments td.myp-col-name {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  white-space: nowrap !important;
  box-sizing: border-box;
}
/* My Payments: остальные колонки динамические (фикс только у перечисленных myp-col-*) */
.table-mypayments th.myp-col-rate,
.table-mypayments td.myp-col-rate,
.table-mypayments th.myp-col-time,
.table-mypayments td.myp-col-time {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
.table-mypayments td.myp-col-action2 {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap !important;
  overflow: hidden;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 0;
}
.table-mypayments td.myp-col-action2 .pm-icon-btn {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  margin: 0 1px !important;
}
/* Основная сумма / Добивка / Затраты — компактнее */
.table-mypayments th:nth-child(n+17),
.table-mypayments td:nth-child(n+17) {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
}
.table-mypayments th.myp-col-commission,
.table-mypayments td.myp-col-commission {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  padding-left: 1px !important;
  padding-right: 1px !important;
}
.table-mypayments th.myp-col-rate,
.table-mypayments td.myp-col-rate {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  padding-left: 1px !important;
  padding-right: 1px !important;
}
.table-mypayments th.myp-col-time,
.table-mypayments td.myp-col-time {
  width: 74px !important;
  min-width: 70px !important;
  max-width: 80px !important;
  box-sizing: border-box;
}
.table-mypayments td.myp-col-time {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: normal !important;
  font-size: 10px !important;
  vertical-align: middle;
  line-height: 1.2;
  padding-left: 2px !important;
  padding-right: 2px !important;
  text-align: center;
}
.table-mypayments td.myp-col-time .myp-dt-date,
.table-mypayments td.myp-col-time .myp-dt-time {
  display: block;
  white-space: nowrap;
}
.table-mypayments th.myp-col-time {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  vertical-align: middle;
}

/* Карта, время, имя: перенос при нехватке ширины (My Payments — 12-й столбец + .myp-col-time; везде — .crm-cell-wrap на td) */
.table-mypayments td:nth-child(12),
.table-mypayments th:nth-child(12) {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  vertical-align: middle;
}
.table-mypayments th:nth-child(12) {
  vertical-align: middle;
}
.table-payments td.crm-cell-wrap,
.table-payout td.crm-cell-wrap,
.table-mypayments td.crm-cell-wrap {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  vertical-align: middle;
}
.table-payout td:nth-child(13) {
  font-size: 9px;
}
/* PayOut: слегка уже столбец «Внеш. ID» */
.table-payout th:nth-child(2),
.table-payout td:nth-child(2) {
  width: 70px;
  min-width: 66px;
  max-width: 76px;
}
.table-payments th.crm-th-wrap,
.table-payout th.crm-th-wrap,
.table-mypayments th.crm-th-wrap {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  vertical-align: middle;
}

/* Горизонтальный скролл только при нехватке ширины — иначе обрезка справа */
.table-mypayments-wrap {
  overflow-x: auto !important;
  max-width: 100%;
}
.table-mypayments .pm-icon-btn {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 10px;
}

.payments-problem-comment-ta {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}

.pm-done { background: #10B981; }
.pm-problem { background: #F43F5E; }
.pm-return { background: #3B82F6; }
.pm-receipt { background: #8B5CF6; font-size: 9px; }
.pm-add { background: #3B82F6; }
.pm-paying { background: #F59E0B; font-size: 9px; }
.pm-not-paying { background: #F43F5E; }
.pm-reject { background: #64748B; }
.pm-arrow { background: #3B82F6; border-radius: 10px !important; }
.pm-edit { background: #f97316; font-size: 9px; }

/* Manual tag controls in Payments/My Payments */
.tag-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}
.tag-btn {
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tag-btn::before,
.tag-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.tag-btn-speed { background: #fe9900; }
.tag-btn-speed::before {
  content: '⇈';
  color: #fff;
  font-size: 12px;
  line-height: 1;
  position: static;
  transform: none;
}
.tag-btn-cancel { background: #e7000b; }
.tag-btn-cancel::before {
  inset: 0;
  left: 0;
  top: 0;
  transform: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.9) 0 2px, transparent 2px 5px);
}
.tag-btn-cancel-remove { background: #6c757d; }
.tag-btn-cancel-remove::before {
  inset: 0;
  left: 0;
  top: 0;
  transform: none;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.9) 0 2px, transparent 2px 5px);
}