/* Per-user dashboard styles.
 *
 * Sections inherit `.glass-panel` from 03-core-ui.css. This file only carries
 * the dashboard-specific extras: section titles, cost grid, settings forms,
 * activity chart frame.
 */

/* Lazy-panel placeholder shown while a tab's fragment is being fetched. */
.dashboard-loading {
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: rgb(148, 163, 184);
}
.dashboard-loading::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  vertical-align: -2px;
  border: 2px solid rgba(148, 163, 184, 0.35);
  border-top-color: rgb(148, 163, 184);
  border-radius: 50%;
  animation: dashboard-spin 0.7s linear infinite;
}
@keyframes dashboard-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dashboard-loading::before { animation: none; } }

/* ===== Shared dashboard component kit — used by student / teacher / admin tabs ===== */

/* Section header: small icon + the section title (the heading keeps its own type). */
.dash-section-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.9rem; }
.dash-section-head > svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: rgb(34, 211, 238); }
.dash-section-head .dashboard-section-title { margin: 0; }

/* Stat tiles (icon · value · label), with accent variants. */
.dash-stats { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dash-stat {
  display: flex; align-items: center; gap: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 0.9rem;
  padding: 0.8rem 0.95rem;
}
.dash-stat__icon {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 0.6rem;
  display: grid; place-items: center;
  background: rgba(34, 211, 238, 0.14); color: rgb(34, 211, 238);
}
.dash-stat__icon svg { width: 1.15rem; height: 1.15rem; }
.dash-stat__body { display: flex; flex-direction: column; min-width: 0; }
.dash-stat__value { font-family: 'Sora', system-ui, sans-serif; font-size: 1.35rem; font-weight: 600; color: #fff; line-height: 1.1; }
.dash-stat__label { font-size: 0.74rem; color: rgb(148, 163, 184); }
.dash-stat--emerald .dash-stat__icon { background: rgba(16, 185, 129, 0.16); color: rgb(52, 211, 153); }
.dash-stat--violet  .dash-stat__icon { background: rgba(168, 85, 247, 0.16); color: rgb(196, 181, 253); }
.dash-stat--amber   .dash-stat__icon { background: rgba(245, 158, 11, 0.16); color: rgb(251, 191, 36); }

/* Progress / comparison bar (track + fill). 0-safe: caller sets fill width %. */
.dash-bar { display: flex; align-items: center; gap: 0.6rem; }
.dash-bar__track { flex: 1 1 auto; height: 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.dash-bar__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22d3ee, #3b82f6); }
.dash-bar__fill--muted { background: rgba(148, 163, 184, 0.5); }
.dash-bar__fill--done { background: linear-gradient(90deg, #34d399, #10b981); }
.dash-bar__num { flex: 0 0 auto; font-size: 0.78rem; color: rgb(203, 213, 225); font-variant-numeric: tabular-nums; min-width: 2.4rem; text-align: right; }

/* Table: rounded container + header + hover + subtle separators. */
.dash-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.dash-table thead th {
  text-align: left; font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: rgb(100, 116, 139);
  padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dash-table tbody td { padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: rgb(203, 213, 225); }
.dash-table tbody tr:last-child td { border-bottom: 0; }
.dash-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }

/* Empty state: icon + message, centered. */
.dash-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1rem; text-align: center; color: rgb(148, 163, 184); }
.dash-empty > svg { width: 2rem; height: 2rem; opacity: 0.55; }
.dash-empty p { margin: 0; font-size: 0.9rem; }

.dashboard-section-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 0.85rem;
  letter-spacing: 0.01em;
}

/* ---------- Cost summary ---------- */
.dashboard-cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem;
}
.dashboard-cost-cell {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.9rem;
  padding: 0.85rem 1rem;
}
.dashboard-cost-cell-total {
  background: linear-gradient(140deg, rgba(34, 211, 238, 0.12), rgba(99, 102, 241, 0.10));
  border-color: rgba(34, 211, 238, 0.28);
}
.dashboard-cost-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(148, 163, 184);
}
.dashboard-cost-value {
  margin-top: 0.35rem;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  color: rgb(226, 232, 240);
  font-variant-numeric: tabular-nums;
}

/* ---------- Score / points (matches the header badge's gold star) ---------- */
.dashboard-score-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.dashboard-score-star {
  width: 2rem;
  height: 2rem;
  color: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
  flex-shrink: 0;
}
.dashboard-score-value {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: #fde68a;
  font-variant-numeric: tabular-nums;
}
.dashboard-score-caption {
  font-size: 0.85rem;
  color: rgb(148, 163, 184);
}

/* ---------- Action buttons inside job tables ---------- */
.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.dashboard-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgb(203, 213, 225);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    transform 0.15s ease;
}
.dashboard-action-btn svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}
.dashboard-action-btn:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: rgb(241, 245, 249);
  transform: translateY(-1px);
}
.dashboard-action-btn:active {
  transform: translateY(0);
}
.dashboard-action-btn:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.45);
  outline-offset: 2px;
}
/* Preview = primary (sky-tinted), echoes .dl-icon-btn--sky. Defined after the
   base rule so its border/bg/color win when both classes are applied. */
.dashboard-action-btn--primary {
  border-color: rgba(56, 189, 248, 0.35);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.2) 0%, rgba(56, 189, 248, 0.08) 100%);
  color: rgb(125, 211, 252);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 12px -4px rgba(56, 189, 248, 0.25);
}
.dashboard-action-btn--primary:hover {
  border-color: rgba(125, 211, 252, 0.55);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.32) 0%, rgba(56, 189, 248, 0.16) 100%);
  color: rgb(224, 242, 254);
}

/* ---------- eXam activity sub-blocks ---------- */
.dashboard-subblock {
  margin-top: 1.25rem;
}
.dashboard-subblock:first-child {
  margin-top: 0;
}
.dashboard-subblock-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: rgb(226, 232, 240);
  margin-bottom: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
.dashboard-subblock-link {
  font-weight: 500;
  font-size: 0.8rem;
  color: rgb(103, 232, 249);
  text-decoration: underline;
}

.dashboard-test-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dashboard-test-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.dashboard-test-list li:last-child {
  border-bottom: none;
}
.dashboard-test-list a {
  color: rgb(226, 232, 240);
  font-weight: 500;
}
.dashboard-test-list a:hover {
  text-decoration: underline;
}
.dashboard-test-meta {
  color: rgb(100, 116, 139);
  font-size: 0.82rem;
}

.dashboard-practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem;
}
.dashboard-practice-cell {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.7rem;
  padding: 0.65rem 0.85rem;
}
.dashboard-practice-subject {
  font-weight: 500;
  color: rgb(226, 232, 240);
  margin-bottom: 0.2rem;
}
.dashboard-practice-stats {
  display: flex;
  gap: 0.85rem;
  font-size: 0.82rem;
  color: rgb(148, 163, 184);
}

.dashboard-chart-wrap {
  position: relative;
  width: 100%;
  height: 220px;
}

/* ---------- Profile + settings ---------- */
.dashboard-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.dashboard-profile-grid dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(100, 116, 139);
  margin-bottom: 0.15rem;
}
.dashboard-profile-grid dd {
  color: rgb(226, 232, 240);
  font-weight: 500;
}

.dashboard-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.dashboard-settings-form {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.9rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.dashboard-input {
  width: 100%;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(2, 6, 23, 0.85);
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  color: rgb(226, 232, 240);
}
.dashboard-input::placeholder {
  color: rgb(100, 116, 139);
}
.dashboard-input:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18);
}
.dashboard-input:focus-visible {
  outline: none;
  border-color: rgba(34, 211, 238, 0.75);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.4);
}
.dashboard-submit {
  align-self: flex-start;
  background: linear-gradient(140deg, rgba(34, 211, 238, 0.85), rgba(99, 102, 241, 0.75));
  color: white;
  border: none;
  border-radius: 0.65rem;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.dashboard-submit:hover {
  filter: brightness(1.1);
}
.dashboard-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dashboard-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.6);
}
.dashboard-form-err {
  color: rgb(252, 165, 165);
  font-size: 0.82rem;
  margin: 0;
}
.dashboard-form-ok {
  color: rgb(110, 231, 183);
  font-size: 0.82rem;
  margin: 0;
}
.dashboard-form-note {
  color: rgb(100, 116, 139);
  font-size: 0.75rem;
  margin: 0.25rem 0 0;
}

/* ---------- Logout ---------- */
.dashboard-logout-row {
  margin-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 1rem;
}
.dashboard-logout {
  background: transparent;
  border: 1px solid rgba(252, 165, 165, 0.35);
  color: rgb(252, 165, 165);
  border-radius: 0.65rem;
  padding: 0.45rem 1rem;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
}
.dashboard-logout:hover {
  background: rgba(252, 165, 165, 0.08);
}

/* ---------- Expired marker ---------- */
.dashboard-expired {
  color: rgb(100, 116, 139);
  font-style: italic;
}

/* ---------- Admin: Users overview table ---------- */
/* The Users tab is a wide 14-column data view. On wider screens let the table
   section break out of the dashboard's max-w-5xl content column (centred on the
   viewport, capped at 1400px) so every column has room. On narrow screens it
   stays inside the column and the wrap below scrolls. */
@media (min-width: 1100px) {
  .users-wide {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(95vw, 1400px);
  }
}
/* Scrolls horizontally only when it truly can't fit (narrow screens); on a
   normal-width dashboard all columns show across the full width. */
.users-table-wrap {
  overflow-x: auto;
}
.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.users-table thead th {
  padding: 0.55rem 0.6rem;
  text-align: left;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgb(100, 116, 139);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.users-table thead th.num,
.users-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.users-table tbody td {
  padding: 0.5rem 0.6rem;
  white-space: nowrap;
  color: rgb(148, 163, 184);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.users-table tbody tr:last-child td {
  border-bottom: 0;
}
.users-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.018);
}
.users-table tbody tr:hover td {
  background: rgba(56, 189, 248, 0.07);
}
.users-table .u-name {
  color: #fff;
  font-weight: 600;
}
.users-table .u-date {
  color: rgb(148, 163, 184);
  font-variant-numeric: tabular-nums;
}
.users-table td.zero {
  color: rgb(71, 85, 105); /* dim true zeros so real numbers stand out */
}
.users-table td.cost {
  color: rgb(103, 232, 249);
  font-weight: 500;
}
.users-table td.cost.zero {
  color: rgb(71, 85, 105);
  font-weight: 400;
}

/* Role badges */
.role-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.66rem;
  font-weight: 500;
}
.role-pill.student {
  background: rgba(34, 211, 238, 0.14);
  color: rgb(103, 232, 249);
}
.role-pill.teacher {
  background: rgba(167, 139, 250, 0.18);
  color: rgb(196, 181, 253);
}
.role-pill.admin {
  background: rgba(245, 158, 11, 0.16);
  color: rgb(252, 211, 77);
}

/* Keep the username column visible while scrolling on narrow screens. */
@media (max-width: 768px) {
  .users-table thead th:first-child,
  .users-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: rgb(12, 18, 33);
  }
}

/* ---------- Admin: Site-overview stats tables ---------- */
/* The Site tab's many tables (AI spend, top routes, recent jobs/errors) get the
   same treatment as .users-table above so they read just as cleanly: a tinted
   header shelf, zebra rows, a sky-tint hover, tabular numerics and a cyan cost
   accent. Each table sits in a .glass-panel or a bordered wrapper supplied by
   the template (admin/_stats_panel.html); this styles the table itself. The
   per-cell flavour comes from semantic classes (.num/.mono/.muted/.cost/.zero)
   instead of inline utilities, mirroring how the users table is built. */
.admin-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.admin-stats-table thead th {
  padding: 0.5rem 1rem;
  text-align: left;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(100, 116, 139);
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.admin-stats-table tbody td {
  padding: 0.5rem 1rem;
  color: rgb(148, 163, 184);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: top;
}
.admin-stats-table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-stats-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.018);
}
.admin-stats-table tbody tr:hover td {
  background: rgba(56, 189, 248, 0.07);
}

/* Column flavours (apply to both <th> and <td> where sensible) */
.admin-stats-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.admin-stats-table td.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  color: rgb(203, 213, 225);
}
.admin-stats-table td.ts {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.72rem;
  white-space: nowrap;
}
.admin-stats-table td.muted {
  color: rgb(100, 116, 139);
}
.admin-stats-table td.cost {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: rgb(103, 232, 249);
  font-weight: 500;
}
/* Dim true zeros so the real numbers stand out (matches .users-table). Placed
   last so it wins over .cost / .num / .muted colour for a zero cell. */
.admin-stats-table td.zero {
  color: rgb(71, 85, 105);
  font-weight: 400;
}
.admin-stats-table td.empty {
  padding: 1.75rem 1rem;
  text-align: center;
  color: rgb(100, 116, 139);
}

/* Keep the first (identifier) column visible while the wide tables scroll on
   narrow screens. Higher specificity + later source order than the zebra/hover
   rules above so the sticky cell stays opaque. Supersedes the bundled rule that
   used to live in 12-mobile.css. */
@media (max-width: 767px) {
  .admin-stats-table thead th:first-child,
  .admin-stats-table tbody tr td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: rgb(12, 18, 33);
  }
  .admin-stats-table tbody tr:hover td:first-child {
    background: rgb(12, 18, 33);
  }
}

/* ============================================================================
   "Bold & glowing" redesign. Everything is scoped under .dash-root (so it only
   touches the dashboard) and themed off --accent-rgb, which dashboard.html sets
   per effective role (admin=violet, teacher=emerald, student=cyan) and which
   cascades into the lazily-injected panel fragments. Page-scoped sheet → no
   Tailwind/bundle rebuild.
   ========================================================================== */
.dash-root { --accent-rgb: 34, 211, 238; }  /* fallback; overridden inline per role */

/* --- Hero stats pill (mirrors the landing-hero pill) --- */
.dash-hero-pill {
  display: inline-flex; align-items: center; gap: 0.55rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.08);
  padding: 0.32rem 0.85rem;
  font-size: 0.78rem; color: rgb(203, 213, 225);
  box-shadow: 0 0 22px -10px rgba(var(--accent-rgb), 0.5);
}
.dash-hero-stat { display: inline-flex; align-items: baseline; gap: 0.32rem; }
.dash-hero-stat b {
  font-family: 'Sora', system-ui, sans-serif; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums;
}
.dash-hero-sep { width: 1px; height: 0.85rem; background: rgba(var(--accent-rgb), 0.32); }

/* --- Tab bar → glowing pill bar --- */
.dash-tabs { border-color: rgba(var(--accent-rgb), 0.16); }
.dash-tabs .tab-active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.12));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.32) inset,
              0 0 16px -6px rgba(var(--accent-rgb), 0.55);
}
.dash-tabs .tab-inactive:hover {
  color: rgb(226, 232, 240);
  background: rgba(var(--accent-rgb), 0.09);
  box-shadow: 0 0 14px -7px rgba(var(--accent-rgb), 0.45);
}

/* --- Cards: accent glow + hover-lift --- */
.dash-root .dash-stat,
.dash-root .dashboard-cost-cell,
.dash-root .dashboard-practice-cell {
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dash-root .dash-stat:hover,
.dash-root .dashboard-cost-cell:hover,
.dash-root .dashboard-practice-cell:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.32);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.55),
              0 0 26px -10px rgba(var(--accent-rgb), 0.38);
}
/* Default (un-variant) stat icon takes the role accent; --emerald/--violet/--amber keep theirs. */
.dash-root .dash-stat:not([class*="dash-stat--"]) .dash-stat__icon {
  background: rgba(var(--accent-rgb), 0.16);
  color: rgb(var(--accent-rgb));
}
.dash-root .dashboard-cost-cell-total {
  background: linear-gradient(140deg, rgba(var(--accent-rgb), 0.16), rgba(99, 102, 241, 0.10));
  border-color: rgba(var(--accent-rgb), 0.32);
  box-shadow: 0 0 34px -14px rgba(var(--accent-rgb), 0.45);
}
.dash-root .dashboard-score-star {
  color: rgb(var(--accent-rgb));
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.55));
}

/* --- Tables → modern glass --- */
.dash-root .dash-table thead th,
.dash-root .teacher-table thead th,
.dash-root .users-table thead th,
.dash-root .admin-stats-table thead th {
  background: rgba(var(--accent-rgb), 0.06);
  color: rgb(148, 163, 184);
}
.dash-root .dash-table tbody tr:nth-child(even) td,
.dash-root .teacher-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.018);
}
.dash-root .dash-table tbody tr:hover td,
.dash-root .teacher-table tbody tr:hover td,
.dash-root .users-table tbody tr:hover td,
.dash-root .admin-stats-table tbody tr:hover td {
  background: rgba(var(--accent-rgb), 0.07);
}

/* --- Section header → accent icon tile + bigger title --- */
.dash-root .dash-section-head { gap: 0.7rem; }
.dash-root .dash-section-head > svg {
  width: 1.9rem; height: 1.9rem; padding: 0.4rem; box-sizing: border-box;
  border-radius: 0.6rem;
  background: rgba(var(--accent-rgb), 0.14);
  color: rgb(var(--accent-rgb));
  box-shadow: 0 0 16px -5px rgba(var(--accent-rgb), 0.5);
}
.dash-root .dashboard-section-title { font-size: 1.05rem; }

/* --- Empty state → glowing icon --- */
.dash-root .dash-empty svg {
  color: rgb(var(--accent-rgb));
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.4));
}

/* --- Motion: gentle staggered entrance for the top stat / cost cards --- */
@media (prefers-reduced-motion: no-preference) {
  body:not(.page-entered) .dash-root .dash-stats > .dash-stat,
  body:not(.page-entered) .dash-root .dashboard-cost-grid > .dashboard-cost-cell {
    animation: page-slide-in 0.32s ease-out both;
  }
  .dash-root .dash-stats > .dash-stat:nth-child(2) { animation-delay: 60ms; }
  .dash-root .dash-stats > .dash-stat:nth-child(3) { animation-delay: 120ms; }
  .dash-root .dash-stats > .dash-stat:nth-child(4) { animation-delay: 180ms; }
}