/* Значения 1:1 из утверждённого макета chargebacks-mockup.html */
:root {
  color-scheme: light;
  --bg: #F4F5F7;
  --card: #FFFFFF;
  --text: #151821;
  --text-2: #2A2E3A;
  --text-3: #4A4F5E;
  --muted: #6B7080;
  --muted-2: #7A7F8E;
  --line: #E5E7EC;
  --line-2: #EEF0F3;
  --input-line: #E0E3E9;
  --head-bg: #FAFBFC;
  --row-hover: #F8F9FB;
  --track: #ECEEF2;
  --accent: #2B55D6;
  --accent-hover: #1C3FA8;
  --ok: #1E9E5A;
  --ok-text: #177A46;
  --danger: #B3261E;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* плашки */
  --neutral-bg: #EEEFF2;  --neutral-fg: #4A4F5E;
  --warn-bg: #FDF1DC;     --warn-fg: #8A5600;
  --danger-bg: #FCE5E3;   --danger-fg: #B3261E;
  --ok-bg: #E2F4EA;       --ok-fg: #16703F;
  --tag-bg: #F0F1F4;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Onest', system-ui, sans-serif; font-size: 14px; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ шапка */
.top { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--line); }
/* в макете ширина 1280 — без учёта боковых отступов */
.top-inner, .page { box-sizing: content-box; }
.top-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-logo { width: 32px; height: 32px; border-radius: 9px; background: #151821; display: flex; align-items: center; justify-content: center; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 600; font-size: 15px; }
.brand-sub { font-size: 12px; color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.top-actions form { margin: 0; }

.sync { display: flex; align-items: center; gap: 16px; }
.sync-info { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.sync-line { font-size: 13px; color: var(--text); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-line.error { color: var(--danger); }
.sync-sub { font-size: 12px; color: var(--muted); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: 1px; }
.live-dot.warn { background: #D9921A; }
.live-dot.error { background: var(--danger); }
.live-dot.idle { background: #B8BCC6; }
.live-dot.run { background: var(--accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-primary { height: 38px; padding: 0 16px; border-radius: 10px; border: none; background: var(--accent); color: #FFFFFF; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary[disabled] { opacity: .7; cursor: default; background: var(--accent); }
.btn-icon { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: #FFFFFF; color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.btn-icon:hover { color: var(--text); border-color: var(--input-line); background: var(--row-hover); }

/* ------------------------------------------------------------ страница */
.page { max-width: 1280px; margin: 0 auto; padding: 32px 24px 48px; display: flex; flex-direction: column; gap: 24px; }
.stats { display: flex; flex-direction: column; gap: 24px; }
/* широкие таблицы прокручиваются внутри карточки, а не растягивают страницу */
.page > *, .stats > * { min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.page-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.back:hover { color: var(--text); }

/* ------------------------------------------------------------ KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.kpi { background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.kpi-label { font-size: 13px; color: var(--muted); }
.kpi-value { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.kpi-value.ok { color: var(--ok-text); }
.kpi-value.danger { color: var(--danger); }
.kpi-unit { font-size: 16px; color: var(--muted); font-weight: 500; }
.kpi-bar { display: flex; align-items: center; gap: 10px; }
.kpi-note { font-size: 12px; color: var(--muted); }

.track { flex: 1; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.track > span { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.track.lvl-mid > span { background: #D9921A; }
.track.lvl-high > span, .track.lvl-over > span { background: var(--danger); }

/* ------------------------------------------------------------ карточки и таблицы */
.card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.card-head { padding: 16px 20px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
th.num, td.num { text-align: right; }
th a { color: inherit; }
th a:hover { color: var(--text); }
th.sorted { color: var(--text); }
tr.row:hover td { background: var(--row-hover); }
td.empty { text-align: center; color: var(--muted); padding: 40px 20px; }

/* по месяцам */
.months { min-width: 760px; }
.months th { padding: 10px 20px; }
.months td { padding: 14px 20px; border-top: 1px solid var(--line-2); }
.months td.month { font-weight: 500; }
.months .usage-col { width: 40%; }
.months .usage { display: flex; align-items: center; gap: 12px; }
.months .usage-text { font-size: 13px; white-space: nowrap; }
.months .usage-text b { font-weight: 600; }
.months .usage-text span { color: var(--muted-2); }
.months a.plain { color: inherit; }
.months a.plain:hover { color: var(--accent); }
.months td.fraud { color: var(--muted-2); }
.months td.fraud.has { color: var(--danger); }
.months td.over { color: var(--danger); }
.months tr.extra td { border-top: none; padding-top: 0; font-size: 12px; color: var(--muted-2); }

/* переключатель сайтов над сводкой: Все / neapp.art / sonarapp.art */
.seg-switch { display: inline-flex; padding: 3px; gap: 2px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; }
.seg { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.seg:hover { color: var(--text); background: var(--row-hover); }
.seg.active { background: #151821; color: #FFFFFF; }
.seg-dot { width: 7px; height: 7px; border-radius: 50%; }
.seg-dot.lvl-mid { background: #D9921A; }
.seg-dot.lvl-over { background: var(--danger); }

/* несколько лимитов в одной карточке */
.kpi-row { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.kpi-row + .kpi-row { border-top: 1px solid var(--line-2); padding-top: 8px; margin-top: 2px; }
.kpi-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kpi-row-label { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-row-value { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }

/* процент: подсказка при наведении, цвет — относительно порога */
.pct, .kpi-note[data-tip] { cursor: help; text-decoration: underline dotted rgba(122,127,142,0.6); text-underline-offset: 3px; }
.pct:focus-visible, .kpi-note[data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* подсказка к процентам: появляется сразу при наведении, фокусе или нажатии */
.tip { position: fixed; z-index: 50; max-width: 320px; padding: 8px 10px; border-radius: 8px; background: #151821; color: #FFFFFF;
       font-size: 12px; line-height: 1.45; white-space: pre-line; box-shadow: 0 8px 24px rgba(21,24,33,0.18); pointer-events: none;
       opacity: 0; transition: opacity .12s; }
.tip.show { opacity: 1; }
.lvl-text-ok { color: var(--ok-text); }
.lvl-text-mid { color: #8A5600; }
.lvl-text-over { color: var(--danger); }

.months-sites { min-width: 1080px; }
.months-sites .usage-col { width: 24%; }
.months-sites td.month { vertical-align: top; white-space: nowrap; }
.months-sites td.num { white-space: nowrap; }
.months-sites tr.site-row td { border-top-style: dashed; }
.months-sites td.site-cell { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.months-sites td.remaining-cell { font-size: 13px; line-height: 1.5; white-space: nowrap; }

.months-all { min-width: 980px; }
.months-all .usage-col { width: 26%; }
.text-ok { color: var(--ok-text); }
.text-danger { color: var(--danger); }

/* вкладки каналов: Все / CloudPayments / СБП */
.tabs { display: flex; gap: 24px; padding: 0 20px; border-bottom: 1px solid var(--line-2); overflow-x: auto; }
.tab { position: relative; display: flex; align-items: center; gap: 8px; height: 48px; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: #151821; }
.tab-count { padding: 1px 7px; border-radius: 999px; background: var(--neutral-bg); color: var(--neutral-fg); font-size: 12px; font-weight: 500; }
.tab.active .tab-count { background: #151821; color: #FFFFFF; }

/* фильтры */
.toolbar { padding: 16px 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line-2); margin: 0; }
.search { flex: 1 1 280px; position: relative; display: block; }
.search-icon { position: absolute; left: 12px; top: 11px; color: var(--muted-2); pointer-events: none; }
.search input { width: 100%; height: 38px; border: 1px solid var(--input-line); border-radius: 10px; padding: 0 12px 0 36px; font-size: 14px; color: var(--text); background: #FFFFFF; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--muted-2); }
.search input:focus, .field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43,85,214,0.12); }

.filter-btn { position: relative; height: 38px; padding: 0 12px; border: 1px solid var(--input-line); border-radius: 10px; background: #FFFFFF; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.filter-btn:hover { border-color: #C9CDD6; }
.filter-btn:focus-within { border-color: var(--accent); }
.filter-btn .muted { color: var(--muted-2); }
.date-btn { gap: 8px; }
.select-btn select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 14px; }

.dropdown { position: relative; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 10; width: 300px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(21,24,33,0.10); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.segmented { display: flex; padding: 3px; background: var(--neutral-bg); border-radius: 9px; }
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; text-align: center; padding: 6px 8px; border-radius: 7px; font-size: 13px; color: var(--text-3); cursor: pointer; }
.segmented input:checked + span { background: #FFFFFF; color: var(--text); font-weight: 500; box-shadow: 0 1px 2px rgba(21,24,33,0.08); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); }
.range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.range label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.field { height: 38px; border: 1px solid var(--input-line); border-radius: 10px; padding: 0 10px; font-size: 14px; color: var(--text); background: #FFFFFF; width: 100%; min-width: 0; }
.link-btn { border: none; background: none; padding: 0; color: var(--accent); font-size: 13px; align-self: flex-start; }
.link-btn:hover { color: var(--accent-hover); }

/* итоги и экспорт */
.summary { padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.summary-text { font-size: 14px; color: var(--text-3); }
.summary-text b { color: var(--text); font-weight: 600; }
.summary-actions { display: flex; gap: 8px; }
.btn-sm { height: 34px; padding: 0 12px; border: 1px solid var(--input-line); border-radius: 9px; background: #FFFFFF; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn-sm:hover { color: var(--text); border-color: #C9CDD6; background: var(--row-hover); }

/* таблица чарджбеков */
.cb { min-width: 1080px; }
.cb thead tr { background: var(--head-bg); }
.cb th { padding: 10px 12px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.cb td { padding: 12px; border-bottom: 1px solid var(--line-2); }
.cb th:first-child, .cb td:first-child { padding-left: 20px; padding-right: 20px; }
.cb th:last-child, .cb td:last-child { padding-left: 20px; padding-right: 20px; }
.cb td.end { text-align: right; }
/* Ширина колонки «Статус» не зависит от выбранного статуса: иначе при длинной метке
   («На рассмотрении», «Требует проверки» — до 154 px) колонка расширяется и иконка письма
   сдвигается. Блок постоянной ширины, сама метка внутри — по размеру текста, как в макете. */
.status-cell { width: 158px; }
.cb th.mail-col { width: 72px; }
.txn { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.buyer { color: var(--text-2); }
.amount { text-align: right; font-weight: 600; white-space: nowrap; }
.when { white-space: nowrap; line-height: 1.3; }
.sub { font-size: 12px; color: var(--muted-2); }
.when .due { margin-top: 3px; }
.badge-warn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; background: var(--warn-bg); color: var(--warn-fg); font-size: 11px; font-weight: 700; cursor: help; vertical-align: 1px; }

.pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill.neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill.danger { background: var(--danger-bg); color: var(--danger-fg); }
.pill.ok { background: var(--ok-bg); color: var(--ok-fg); }

.tag { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--tag-bg); color: var(--neutral-fg); white-space: nowrap; }
.tag.fraud { background: var(--danger-bg); color: var(--danger-fg); }

/* статус: видна «пилюля» из макета, поверх неё — прозрачный нативный select */
.status-chip { position: relative; height: 28px; padding: 0 8px 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; vertical-align: middle; }
.status-chip .st-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-chip select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 14px; }
.status-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-new { background: #E8EEFD; color: #2347B8; }
.st-in_progress { background: #FDF1DC; color: #8A5600; }
.st-disputed { background: #E2F4EA; color: #16703F; }
.st-closed { background: #EEEFF2; color: #555A68; }
.st-review { background: #FCE5E3; color: #B3261E; }
.st-under_review { background: #EFEAFB; color: #5B3AA8; }

.icon-sm { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: #FFFFFF; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; }
.icon-sm:hover { color: var(--accent); border-color: var(--input-line); }

/* пагинация */
.pager { padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.pages { display: flex; gap: 6px; flex-wrap: wrap; }
.pg { height: 32px; min-width: 32px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--input-line); background: #FFFFFF; color: var(--text); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.pg.wide { padding: 0 10px; }
.pg:hover { color: var(--text); background: var(--row-hover); }
.pg.current { border: none; background: #151821; color: #FFFFFF; }
.pg.disabled { opacity: .45; pointer-events: none; }
.pg.gap { border: none; background: none; min-width: 16px; color: var(--muted); }

/* ------------------------------------------------------------ карточка транзакции */
.notice { background: var(--warn-bg); color: var(--warn-fg); border-radius: 12px; padding: 12px 16px; margin: 0; font-size: 14px; }
.fields { margin: 0; }
.fields > div { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--line-2); }
.fields > div:first-child { border-top: none; }
.fields dt { color: var(--muted); }
.fields dd { margin: 0; color: var(--text-2); word-break: break-word; }
.mono { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line-2); }
.list li:first-child { border-top: none; }
.list .subject-line { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ------------------------------------------------------------ письмо */
.email-head { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.email-head h1 { margin: 0; font-size: 18px; font-weight: 600; }
.email-head p { margin: 0; color: var(--muted); font-size: 13px; }
.email-frame { display: block; width: 100%; height: 75vh; border: none; background: #FFFFFF; }
.email-text { margin: 0; padding: 20px; white-space: pre-wrap; font-family: var(--mono); font-size: 13px; }

/* ------------------------------------------------------------ вход */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login { width: 100%; max-width: 360px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.login h1 { margin: 4px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.login .btn-primary { justify-content: center; width: 100%; }
.form-error { margin: 0; color: var(--danger); background: var(--danger-bg); border-radius: 10px; padding: 10px 12px; font-size: 13px; }

/* ------------------------------------------------------------ узкие экраны */
@media (max-width: 720px) {
  .top-inner { padding: 0 16px; gap: 12px; }
  .top-actions, .sync { gap: 8px; flex-wrap: nowrap; }
  .sync-info, .brand-sub { display: none; }
  .btn-primary .btn-text { display: none; }
  .btn-primary { width: 38px; padding: 0; justify-content: center; }
  .page { padding: 24px 16px 40px; }
  .fields > div { grid-template-columns: 1fr; gap: 2px; }
  .popover { width: min(300px, calc(100vw - 32px)); }
}