/* dashboard-growth.css */
/* ADMIN ONLY — the Growth card (#growthBlock, dashboard-growth.js): new
   accounts per day (stacked bars) and the running total (line). Card surface
   #131926; teachers #E8431F, students #3A8FD6 (dataviz-validated). */
#growthBlock .gr-range { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#growthBlock .gr-range .btn.is-on { background: rgba(232, 67, 31, 0.12); border-color: rgba(232, 67, 31, 0.45); color: var(--ink, #F4F6FA); }
#growthBlock .gr-body { transition: opacity 0.15s ease; }
#growthBlock .gr-body.is-loading { opacity: 0.55; }

.gr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 12px 0 6px; }
.gr-stat { background: var(--panel, #10151F); border: 1px solid var(--line, #1F2733); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.gr-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint, #909AAB); }
.gr-stat-value { font-size: 24px; font-weight: 800; color: var(--ink, #F4F6FA); font-variant-numeric: tabular-nums; }
.gr-stat-foot { font-size: 12px; color: var(--muted, #A7B0BE); }

.gr-chart { margin-top: 10px; }
.gr-chart h3 { margin: 0 0 4px; font-size: 14px; }
.gr-svg { width: 100%; height: auto; display: block; overflow: visible; }
.gr-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; shape-rendering: crispEdges; }
.gr-tick { fill: var(--faint, #909AAB); font-size: 11px; font-variant-numeric: tabular-nums; }
.gr-axis { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.gr-bar rect { shape-rendering: crispEdges; }
.gr-hit { fill: transparent; cursor: crosshair; outline: none; }
.gr-hit:hover, .gr-hit:focus { fill: rgba(255, 255, 255, 0.04); }
.gr-line { fill: none; stroke: #E8431F; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gr-ring { fill: var(--card, #131926); stroke: #E8431F; stroke-width: 2; }
.gr-direct { fill: var(--ink, #F4F6FA); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gr-cross { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.gr-cross-dot { pointer-events: none; }
.gr-legend { display: flex; gap: 14px; margin-top: 4px; font-size: 12px; color: var(--muted, #A7B0BE); }
.gr-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.gr-legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.gr-tip {
  position: fixed; z-index: 30; pointer-events: none;
  background: #0B0F16; color: var(--ink, #F4F6FA); border: 1px solid var(--line-2, #2B3543);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  min-width: 150px;
}
.gr-tip-title { font-weight: 700; margin-bottom: 4px; }
.gr-tip-row { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.gr-tip-key { color: var(--muted, #A7B0BE); }

.gr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.gr-table th, .gr-table td { padding: 5px 8px; border-bottom: 1px solid var(--line, #1F2733); text-align: left; }
.gr-table th { color: var(--faint, #909AAB); font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.gr-num { text-align: right !important; font-variant-numeric: tabular-nums; }

/* per-user sessions (dashboard-user-sessions.js) */
.us-usage .us-sess-btn { margin-top: 4px; }
.us-sess-row > td { background: rgba(255, 255, 255, 0.02); white-space: normal !important; }
.us-sess-table { min-width: 720px; font-size: 12.5px; }
.us-sess-table td { white-space: nowrap; }

/* 2026-09-13 — Chris: "Center all the column data when I expand Sessions+
   on a user's row." Every header and cell of the expanded list is centred;
   the .gr-num right-alignment is for the Growth table only. */
.us-sess-table th, .us-sess-table td { text-align: center !important; }
.us-sess-table td .us-sub { text-align: center; }
.us-sess-table td { white-space: normal; }
.us-sess-table td:first-child { white-space: nowrap; }

/* v2.75.0 — the admin "What happened" column (dashboard-user-sessions.js) */
.us-sess-table td.us-why { min-width: 200px; max-width: 320px; }
.us-why-bad { color: var(--danger, #E5484D); font-weight: 600; }
.us-why-sub { font-size: 11.5px; color: var(--faint, #909AAB); margin-top: 2px; }
.us-why-none { color: var(--faint, #909AAB); }