/* Nino Nana RU Analytics — светлая тема «Offspring»: карточки, KPI-плитки. */

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f2f4f7;
  color: #1c2430;
}
a { color: inherit; text-decoration: none; }

/* ---------- шапка ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px;
  background: #fff; border-bottom: 1px solid #e4e8ee;
  padding: 0 20px; height: 52px;
  position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 700; font-size: 15px; white-space: nowrap; }
.brand span { color: #6b7686; font-weight: 500; }
.topbar nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.topbar nav a {
  padding: 15px 12px; color: #4a5568; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.topbar nav a:hover { color: #1c2430; }
.topbar nav a.active { color: #1c2430; font-weight: 600; border-bottom-color: #2f7cf6; }
.topbar-right { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.asof { color: #6b7686; font-size: 12.5px; }
.logout { color: #6b7686; font-size: 13px; }
.logout:hover { color: #c0392b; }

/* ---------- фильтр МП ---------- */
.mp-filter { display: flex; gap: 8px; padding: 14px 20px 0; flex-wrap: wrap; }
.pill {
  padding: 5px 14px; border-radius: 99px; background: #fff;
  border: 1px solid #dbe1e9; color: #4a5568; font-size: 13px;
}
.pill:hover { border-color: #9fb2c8; }
.pill.active { background: #1c2430; border-color: #1c2430; color: #fff; }

/* ---------- сетка ---------- */
main { padding: 16px 20px 48px; max-width: 1280px; margin: 0 auto; }

.kpi-row {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.kpi {
  background: #fff; border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(16, 30, 54, .06);
}
.kpi-label { color: #6b7686; font-size: 12.5px; margin-bottom: 6px; }
.kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.kpi-delta { font-size: 12.5px; margin-top: 5px; }
.kpi-delta .muted { color: #98a3b3; font-size: 11.5px; }
.good { color: #178a4c; }
.bad { color: #c0392b; }
.flat { color: #6b7686; }
.warn-text { color: #b7791f; font-weight: 600; }

.card {
  background: #fff; border-radius: 12px; padding: 16px 18px 14px;
  box-shadow: 0 1px 2px rgba(16, 30, 54, .06); margin-bottom: 16px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.card-head h2 { font-size: 15px; font-weight: 650; }

/* ---------- «?»-сноски ---------- */
.help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: #e4e8ee; color: #6b7686; font-size: 10.5px; font-weight: 600;
  cursor: help; position: relative; vertical-align: 1px; margin-left: 4px;
}
.help:hover::after {
  content: attr(data-tip);
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  width: 260px; padding: 8px 10px; border-radius: 8px;
  background: #1c2430; color: #f2f4f7; font-size: 12px; font-weight: 400;
  line-height: 1.4; z-index: 50; text-transform: none; white-space: normal;
}

/* ---------- графики ---------- */
.chart { width: 100%; }
.chart svg { display: block; }
.grid { stroke: #eef1f5; stroke-width: 1; }
.axis { fill: #98a3b3; font-size: 10.5px; }
.chart-line {
  fill: none; stroke: #1c2430; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 4px 2px; color: #4a5568; font-size: 12.5px; }
.legend .dot, td .dot, .chart-tip .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; vertical-align: 0;
}
.dot-line { background: #1c2430; height: 3px !important; border-radius: 2px !important; width: 14px !important; vertical-align: 2px !important; }
.switcher { display: flex; gap: 4px; }
.switcher button {
  border: 1px solid #dbe1e9; background: #fff; color: #4a5568;
  padding: 4px 12px; border-radius: 7px; font-size: 12.5px; cursor: pointer;
}
.switcher button.active { background: #1c2430; border-color: #1c2430; color: #fff; }
.chart-tip {
  position: absolute; background: #1c2430; color: #f2f4f7;
  padding: 8px 11px; border-radius: 8px; font-size: 12.5px;
  pointer-events: none; z-index: 60; max-width: 240px; line-height: 1.5;
}
.chart-tip .tip-line { border-top: 1px solid #3c4a5e; margin-top: 4px; padding-top: 4px; }

/* ---------- таблицы ---------- */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid #eef1f5; white-space: nowrap; }
th { color: #6b7686; font-weight: 600; font-size: 12px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #f7f9fb; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.muted { color: #98a3b3; }
.row-warn { background: #fff9ec; }
.row-warn:hover { background: #fdf3da !important; }
.row-bad { background: #fdf1f0; }
.row-bad:hover { background: #fbe5e3 !important; }

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600;
}
.badge-match { background: #e3f5ea; color: #178a4c; }
.badge-minor_drift { background: #fff3d6; color: #b7791f; }
.badge-moderate_drift { background: #ffe8cc; color: #b45309; }
.badge-major_drift { background: #fde3e1; color: #c0392b; }
.badge-L0_missing { background: #eef1f5; color: #6b7686; }

/* ---------- login ---------- */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: #f2f4f7;
}
.login-card {
  background: #fff; border-radius: 14px; padding: 32px 34px;
  box-shadow: 0 4px 20px rgba(16, 30, 54, .10); width: 340px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-card h1 { font-size: 19px; margin-bottom: 6px; }
.login-card h1 span { color: #6b7686; font-weight: 500; }
.login-card label { display: flex; flex-direction: column; gap: 5px; color: #4a5568; font-size: 13px; }
.login-card input {
  padding: 9px 11px; border: 1px solid #dbe1e9; border-radius: 8px; font-size: 14px;
}
.login-card input:focus { outline: 2px solid #2f7cf6; border-color: transparent; }
.login-card button {
  margin-top: 6px; padding: 10px; border: 0; border-radius: 8px;
  background: #1c2430; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.login-card button:hover { background: #2c3a4e; }
.login-error {
  background: #fdf1f0; color: #c0392b; border-radius: 8px;
  padding: 8px 11px; font-size: 13px;
}

@media (max-width: 720px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .topbar nav a { padding: 8px 9px; }
  main { padding: 12px 12px 40px; }
  .help:hover::after { width: 200px; }
}