/* ============================================================
   TomiOmiDevs · design tokens + base components
   Извлечено из docs/TomiOmi_Статистика_месяца_дашборд_исправлено.html
   Подключать ПЕРЕД styles.css в _layout.html.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;850;900;950&display=swap");

:root {
  /* Палитра */
  --bg:           #FAFBFE;
  --ink:          #182636;
  --muted:        #6D7B8C;
  --line:         #E6EBF2;
  --pale:         #EFF3F8;
  --card:         #FFFFFF;

  --blue:         #005BAA;
  --blue2:        #0A70C8;
  --pink:         #E493C9;
  --pink-strong:  #FF5D93;
  --pink-light:   #F8EAF4;
  --coral:        #FF5D75;
  --orange:       #FFAE5E;
  --yellow:       #FFD75B;
  --mint:         #82DDD2;
  --green:        #21AA7B;
  --lav:          #F4F0FF;
  --bar-bg:       #EAF0F7;

  /* Радиусы */
  --radius:       26px;
  --radius-sm:    16px;
  --radius-xs:    14px;
  --radius-pill:  999px;

  /* Тень */
  --shadow:       0 18px 45px rgba(22, 35, 52, .07);
  --shadow-btn:   0 12px 24px rgba(0, 91, 170, .18);

  /* Сетка */
  --container:    1440px;
  --pad:          42px;
}

/* ---------- База ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
}

/* ---------- Фоновые «пузыри» (включать классом .has-bubbles на body) ---------- */
body.has-bubbles::before,
body.has-bubbles::after {
  content: "";
  position: fixed;
  border-radius: var(--radius-pill);
  pointer-events: none;
  z-index: -1;
}
body.has-bubbles::before {
  width: 310px; height: 310px;
  right: -70px; top: -90px;
  background: var(--pink); opacity: .92;
}
body.has-bubbles::after {
  width: 300px; height: 300px;
  left: -135px; bottom: -115px;
  background: var(--yellow); opacity: .92;
}
.bubble {
  position: fixed; border-radius: var(--radius-pill);
  pointer-events: none; z-index: -1; opacity: .9;
}
.bubble.b1 { width: 210px; height: 210px; right: 10%; bottom: -70px; background: var(--mint); }
.bubble.b2 { width: 16px;  height: 16px;  left: 16%;  top: 92px;     background: var(--pink); }
.bubble.b3 { width: 11px;  height: 11px;  left: 22%;  top: 155px;    background: var(--blue); }
.bubble.b4 { width: 12px;  height: 12px;  left: 8%;   top: 128px;    background: var(--mint); }

/* ---------- Контейнер ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--pad) var(--pad) 54px;
}

/* ---------- Типографика ---------- */
.h-hero {
  margin: 0;
  font-size: clamp(48px, 7vw, 92px);
  line-height: .95;
  letter-spacing: .01em;
  font-weight: 950;
}
.h-hero .pink { color: var(--pink-strong); }
.subtitle { margin-top: 22px; color: var(--muted); font-size: 22px; letter-spacing: .02em; }
.accent-line {
  width: 115px; height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--blue), var(--blue2));
  margin-top: 32px;
}
.section-title { font-size: 26px; font-weight: 950; margin: 0; }
.section-note  { color: var(--muted); font-size: 13px; margin-top: 7px; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Логотип / шапка ---------- */
.logo {
  font-weight: 950;
  color: var(--blue);
  letter-spacing: .03em;
  font-size: 25px;
  line-height: 1;
}
.logo small { display: block; font-size: 8px; letter-spacing: .05em; margin-top: 6px; }
.topbar {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-bottom: 38px;
}
.report-pill {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 13px 34px;
  color: var(--blue); font-weight: 800;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .03);
}
.topbar-right {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: flex-end;
}
.calm-toggle { font-size: 12px; padding: 9px 14px; }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.45fr .8fr;
  gap: 34px;
  align-items: start;
  margin-bottom: 28px;
}
.hero-aside { min-width: 0; }
@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; }
}

/* ---------- Спокойный режим: скрыть пузыри / убрать фон-акценты ---------- */
html.calm body.has-bubbles::before,
html.calm body.has-bubbles::after,
html.calm .bubble { display: none !important; }

/* ---------- Card ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.section-card { padding: 28px 32px; }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; margin-bottom: 20px;
}

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; margin-bottom: 28px; }
.kpi {
  min-height: 116px;
  padding: 21px 22px;
  position: relative; overflow: hidden;
}
.kpi::before {
  content: "";
  width: 54px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent, var(--blue));
  position: absolute; left: 22px; top: 21px;
}
.kpi-label {
  color: var(--muted); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  margin-top: 20px;
}
.kpi-value { font-size: 29px; font-weight: 950; margin-top: 7px; white-space: nowrap; }
.kpi-sub   { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* ---------- Buttons / pills ---------- */
.btn {
  border: 0; background: var(--blue); color: #fff;
  border-radius: var(--radius-sm); padding: 12px 16px;
  font-weight: 500; cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background-color .12s ease;
}
.btn:hover { background: #004A8E; color: #fff; }
.btn:active { background: #003F7A; color: #fff; }
.btn.secondary {
  background: var(--lav); color: var(--blue);
  box-shadow: none; border: 1px solid #ECE6FF;
}
.btn.secondary:hover { background: #E2D9FF; color: var(--blue); }
.pill {
  display: inline-block;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 8px 13px; font-weight: 500; font-size: 13px; cursor: pointer;
}
.pill.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---------- Progress / donut ---------- */
.progress {
  height: 12px; background: var(--bar-bg);
  border-radius: var(--radius-pill);
  overflow: hidden; position: relative;
}
.progress > span {
  display: block; height: 100%; width: 0%;
  border-radius: var(--radius-pill);
  background: var(--c, var(--blue));
  transition: width .4s;
}

.donut {
  --pct: 0deg;
  width: 118px; height: 118px; border-radius: 50%;
  background: conic-gradient(var(--blue) var(--pct), var(--bar-bg) 0deg);
  position: relative; display: grid; place-items: center;
}
.donut::after {
  content: "";
  width: 68px; height: 68px; background: #fff; border-radius: 50%;
  position: absolute;
}
.donut-text { position: relative; z-index: 1; text-align: center; font-weight: 950; font-size: 30px; }
.donut-text small { display: block; font-size: 11px; color: var(--muted); font-weight: 800; margin-top: 4px; }

/* ---------- Table ---------- */
.table-card { padding: 28px 32px; overflow: hidden; }
.table-wrap { overflow: auto; padding-bottom: 6px; }
.t {
  width: 100%; border-collapse: collapse; min-width: 1240px;
  font-variant-numeric: tabular-nums;
}
.t th {
  text-align: left; color: var(--blue); font-size: 12px;
  padding: 12px 10px; background: var(--lav);
  position: sticky; top: 0; z-index: 2;
}
.t th:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.t th:last-child  { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.t td {
  padding: 12px 10px; border-bottom: 1px solid var(--pale);
  font-size: 14px; vertical-align: middle;
}
.t tr:nth-child(even) td { background: #FFF8EC; }
.t .num { text-align: right; }

/* ---------- Адаптив ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .container { padding: 26px 18px 40px; }
  .topbar { flex-direction: column; }
  .kpis { grid-template-columns: 1fr; }
}

/* ---------- Печать ---------- */
@media print {
  .btn, .pill, .bubble { display: none !important; }
  body { background: #fff; }
  body.has-bubbles::before, body.has-bubbles::after { display: none; }
  .card { box-shadow: none; }
}