/* ======================================================================
 * Страницы аналитики: полосы карточек итога, блоки с заголовком, графики
 * Morris и таблицы разрезов в своей рамке.
 *
 * Общие для «Аналитики СМС» (sms/admin_analytics) и «Карты доставки»
 * (analytic/admin/delivery_map): одна разметка - один набор правил, а не
 * копия стилей в каждом виде. Префикс классов - an-.
 * ====================================================================== */

:root { --an-line: #dfe4e8; }
html[data-theme="dark"] { --an-line: var(--d-line); }

/* Карточки группы - одной полосой в общей рамке, ячейки разделены тонкой
   линией (тень ячейки слева и сверху; у края её срезает рамка), а не
   отдельной рамкой у каждой: так несколько групп помещаются в верх экрана.
   Ячейки тянутся и переносятся сами - пустых дыр в ряду не остаётся. */
.an-tiles { display: flex; flex-wrap: wrap; border: 1px solid var(--an-line); border-radius: 6px; overflow: hidden; }
.an-meter { display: block; height: 4px; border-radius: 2px; background: rgba(128, 128, 128, .2); overflow: hidden; margin: .15rem 0; }
.an-meter > span { display: block; height: 100%; background: #3c8dbc; }
.an-tile--warn .an-meter > span { background: #e0a800; }
.an-tile--bad .an-meter > span { background: #c0392b; }
.an-tile { flex: 1 1 7.25rem; min-width: 0; padding: .4rem .75rem .45rem; display: flex; flex-direction: column; gap: 1px;
    box-shadow: -1px 0 0 var(--an-line), 0 -1px 0 var(--an-line); }
.an-tile--wide { flex-grow: 2.4; }
.an-tile__label { font-size: .72rem; color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-tile__value { font-size: 1.1rem; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.an-tile__note { font-size: .7rem; line-height: 1.3; color: #6c757d; font-variant-numeric: tabular-nums; }
.an-tile--ok .an-tile__value { color: #1e7e34; }
.an-tile--warn .an-tile__value { color: #9a6700; }
.an-tile--bad .an-tile__value { color: #c0392b; }

.an-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; }
.an-block { margin-top: 1.25rem; min-width: 0; }
.an-block__title { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.an-chart { height: 240px; }

/* Таблица разреза листается в своей рамке, шапка закреплена; числа - без
   разделителей разрядов: сортировка (js/interactivetables.js) читает первое
   число ячейки. */
/* Тема даёт .table-responsive min-height 300px - под таблицей в две строки
   оставалась пустая полоса. Рамка разреза - по таблице, до max-height. */
.an-box { max-height: 28rem; min-height: 0; overflow: auto; }
.an-table td, .an-table th { font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-table .an-name { white-space: normal; min-width: 12rem; }
.an-table thead th { position: sticky; top: 0; z-index: 1; background: #fff; }

html[data-theme="dark"] .an-tile__label,
html[data-theme="dark"] .an-tile__note { color: var(--d-muted); }
html[data-theme="dark"] .an-tile--ok .an-tile__value { color: #56d364; }
html[data-theme="dark"] .an-tile--warn .an-tile__value { color: #e3b341; }
html[data-theme="dark"] .an-tile--bad .an-tile__value { color: #ff8a80; }
html[data-theme="dark"] .an-table thead th { background: var(--d-surface); }
html[data-theme="dark"] .an-chart svg text { fill: var(--d-muted); }
html[data-theme="dark"] .an-chart svg path[stroke="#aaaaaa"] { stroke: var(--d-line); }
html[data-theme="dark"] .an-chart .morris-hover { background: var(--d-surface-2); border-color: var(--d-line); color: var(--d-ink); }

/* Вкладки страницы (ul[data-page-tabs], js/page-tabs.js): итог - над ними,
   подробности - по панелям. У темы .tab-content - рамка, свой отступ и
   выключка по ширине; здесь панели внутри карточки, а отступ от
   переключателя даёт сам блок (.an-block). */
.an-tabs { margin-top: 1.25rem; gap: .25rem; }
.an-tabs + .tab-content { padding: 0; border: 0; text-align: inherit; }

/* ======================================================================
 * «Сроки выкупа» (analytic/admin/buyout_terms): таблица недель с группами
 * колонок - в ячейке крупно доля от заказов недели, мелко число, полоса-фон
 * по доле (--p ставит вид); колонки остатка - серые; свежие недели -
 * отдельным блоком на сером фоне; список заказов недели с датами попыток.
 * Все четыре группы помещаются в 1440 без прокрутки вбок: ячейки без
 * min-width, шапка переносится, неделя - в две строки. Префикс - bt-.
 *
 * Цвета: полоса доли - акцент (синий), состояние - отдельно: неудача
 * курьера красная, вручение зелёное, «ещё идут выкупы» янтарная.
 * ====================================================================== */
:root {
    --bt-bg: #fff;
    --bt-fresh-bg: #f6f7f8;
    --bt-bar: rgba(60, 141, 188, .13);
    --bt-bar-grey: rgba(128, 128, 128, .12);
    --bt-grey-ink: #6c757d;
    --bt-accent: #3c8dbc;
    --bt-failed: #c0392b;
    --bt-delivered: #1e7e34;
    --bt-fresh: #9a6700;
}
html[data-theme="dark"] {
    --bt-bg: var(--d-surface);
    --bt-fresh-bg: #212932;
    --bt-bar: rgba(77, 163, 255, .15);
    --bt-bar-grey: rgba(139, 152, 165, .12);
    --bt-grey-ink: var(--d-muted);
    --bt-accent: var(--d-accent);
    --bt-failed: #ff8a80;
    --bt-delivered: #56d364;
    --bt-fresh: #e3b341;
}
.bt-base { margin-bottom: .75rem; font-variant-numeric: tabular-nums; }
.bt-how summary { cursor: pointer; color: var(--bt-accent); display: inline-block; }
.bt-how ul { margin: .35rem 0 0; padding-left: 1.2rem; font-size: .85rem; }
.bt-how li { margin-bottom: .2rem; }
/* Подписи плиток - переносом, а не обрезкой. */
.bt-tiles .an-tile__label { white-space: normal; overflow: visible; }

.bt-legend { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .35rem; font-size: .75rem; }
.bt-legend__item { white-space: nowrap; }
.bt-legend__swatch { display: inline-block; width: .7rem; height: .7rem; margin-right: .3rem; border-radius: 2px; vertical-align: -1px; }
.bt-legend__swatch--fresh { background: var(--bt-fresh-bg); box-shadow: inset 0 0 0 1px var(--an-line); }

.bt-table-head__tools { display: inline-flex; flex-wrap: wrap; gap: .25rem .5rem; }
.bt-table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .35rem; }

/* Таблица - во всю ширину; не поместилась (узкий экран) - листается вбок в
   своей рамке, неделя закреплена слева. Шапка в две строки сверху не
   закрепляется: строк недель немного, а две липкие строки наезжали бы одна
   на другую. */
.bt-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--an-line); border-radius: 6px; }
.bt-table { width: 100%; font-variant-numeric: tabular-nums; }
.bt-table th, .bt-table td { padding: .25rem .14rem; vertical-align: middle; }
.an-table.bt-table thead th { position: static; white-space: normal; -webkit-hyphens: auto; hyphens: auto; text-align: center; vertical-align: bottom;
    font-size: .64rem; font-weight: 600; line-height: 1.15; background: transparent; }
.bt-table thead .bt-group { font-size: .76rem; vertical-align: middle; }
.bt-table .bt-week { position: sticky; left: 0; z-index: 1; text-align: left; white-space: nowrap;
    background: var(--bt-bg); box-shadow: inset -1px 0 0 var(--an-line); }
.an-table.bt-table thead th.bt-week { position: sticky; text-align: left; background: var(--bt-bg); }
.bt-table .bt-g { border-left: 2px solid var(--an-line); }
.bt-table thead th.bt-c--grey { color: var(--bt-grey-ink); font-weight: 500; }
.bt-c { text-align: right; white-space: nowrap;
    background-image: linear-gradient(to right, var(--bt-bar) var(--p, 0%), transparent var(--p, 0%)); }
.bt-c--grey { color: var(--bt-grey-ink); --bt-bar: var(--bt-bar-grey); }
.bt-p { display: block; font-size: .76rem; font-weight: 600; line-height: 1.2; }
.bt-n { display: block; font-size: .62rem; line-height: 1.2; color: var(--bt-grey-ink); }
.bt-c--part .bt-p, .bt-c--grey .bt-p { font-weight: 500; }
.bt-cell { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.bt-cell:hover .bt-p, .bt-cell--week:hover .bt-week__no { text-decoration: underline; }
.bt-cell:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 1px; }
.bt-week__no { display: block; font-weight: 600; font-size: .78rem; line-height: 1.2; }
.bt-week__dates { display: block; font-size: .66rem; line-height: 1.2; color: var(--bt-grey-ink); font-weight: 400; }
.bt-week__mark { display: block; font-size: .64rem; line-height: 1.2; color: var(--bt-fresh); font-weight: 400; }
.bt-total > * { border-top: 2px solid var(--an-line); }
.bt-total .bt-p { font-weight: 700; }
.bt-total .bt-week { font-size: .78rem; white-space: normal; }
.bt-row--fresh > *, .bt-total--fresh > *, .bt-table .bt-row--fresh > .bt-week, .bt-table .bt-total--fresh > .bt-week { background-color: var(--bt-fresh-bg); }
.bt-fresh-head > th { padding: .45rem .3rem .3rem; border-top: 2px solid var(--an-line); background: var(--bt-fresh-bg); }
.bt-fresh-head__text { position: sticky; left: .3rem; display: block; max-width: calc(100vw - 4rem); white-space: normal;
    font-size: .76rem; font-weight: 600; color: var(--bt-fresh); }
.bt-table tr.bt-active > .bt-week { box-shadow: inset 3px 0 0 var(--bt-accent), inset -1px 0 0 var(--an-line); }
.bt-table td.bt-active { outline: 2px solid var(--bt-accent); outline-offset: -2px; }
@media (max-width: 575.98px) {
    .bt-week__no { font-size: .74rem; }
    .bt-week__dates { font-size: .64rem; }
}

.bt-orders__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .5rem; }
.bt-orders__tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
/* Список - без своей высоты: листается страницами по 50. */
.bt-orders__box { max-width: 100%; overflow-x: auto; }
/* Ширины колонок - в colgroup вида (table-layout: fixed): между страницами
   не прыгают; длинные значения (статус, клиент, страна) переносятся. На
   узком экране таблица листается вбок в своей рамке. */
.bt-orders__table { table-layout: fixed; width: 100%; min-width: 66.4rem; }
.bt-orders__table td, .bt-orders__table th { white-space: normal; font-variant-numeric: tabular-nums; }
/* Рвать посреди слова - только значения (длинное имя клиента), не шапку:
   «Рабочих дней» переносится по словам. */
.bt-orders__table td { overflow-wrap: anywhere; }
.an-table.bt-orders__table thead th { white-space: normal; vertical-align: bottom; }
.an-table.bt-orders__table .an-name { min-width: 7rem; white-space: normal; }
.bt-orders--loading .bt-orders__table tbody { opacity: .45; }
.bt-orders__pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: .5rem; }
.bt-orders__pager[hidden] { display: none; }
.an-table .bt-atts { white-space: normal; min-width: 8.5rem; }
.bt-att { display: inline-block; margin: 0 .2rem .15rem 0; padding: 0 .3rem; border: 1px solid currentColor; border-radius: 3px;
    font-size: .75rem; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt-att--failed { color: var(--bt-failed); }
.bt-att--delivered { color: var(--bt-delivered); }
.bt-att--inferred { border-style: dashed; }

/* Определение - в подсказке: пунктир и курсор-вопрос, как у подписей с title. */
.bt-hint { border-bottom: 1px dotted currentColor; cursor: help; }
.bt-hint:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 1px; }
.bt-hover-base { color: #6c757d; font-size: .75rem; }
html[data-theme="dark"] .bt-hover-base { color: var(--d-muted); }
/* Подсказка графиков раздела в светлой теме - светлая: на тёмной подложке темы (plugins/morris) тёмно-синие ряды «долгих выкупов» не читались. */
html:not([data-theme="dark"]) .an-chart[data-bt-chart] .morris-hover.morris-default-style { background: rgba(255, 255, 255, .96); color: #333; border-color: #d9dee5; }

/* Тень у края таблицы, которую можно листать вбок (js: edgeShadow()). */
.bt-edge { position: relative; }
.bt-edge::before, .bt-edge::after { content: ''; position: absolute; top: 0; bottom: 0; width: 14px; pointer-events: none;
    opacity: 0; transition: opacity .15s; z-index: 2; }
.bt-edge::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .18), transparent); }
.bt-edge::before { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .18), transparent); }
.bt-edge.bt-more-right::after, .bt-edge.bt-more-left::before { opacity: 1; }
html[data-theme="dark"] .bt-edge::after { background: linear-gradient(to left, rgba(0, 0, 0, .55), transparent); }
html[data-theme="dark"] .bt-edge::before { background: linear-gradient(to right, rgba(0, 0, 0, .55), transparent); }
a[data-bt-download][aria-busy="true"] { cursor: progress; }
.bt-download-error { flex-basis: 100%; color: var(--bt-failed); font-size: .8rem; }