/* ======================================================================
 * Страницы аналитики: полосы карточек итога, блоки с заголовком, графики
 * 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); }