/* teacher-dashboard-theme.css — BLACK / WHITE / YELLOW pilot — 2026-10-12
   Teacher dashboard ONLY. Linked last, replaces dashboard-impressive.css there.
   One font family (Inter): bold weight for titles, regular for text.
   The page forces JetBrains Mono + flat panels with !important, so every
   rule that must win carries !important. Remove the <link> to undo. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;650;700&display=swap');

:root {
  --t-yellow: #ffd60a;
  --t-yellow-rgb: 255, 214, 10;
  --t-black: #000000;
  --t-panel: #0b0b0b;
  --t-white: #ffffff;
  --t-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- black page ---------- */
html,
html body {
  background: var(--t-black) !important;
  background-image: none !important;
  color: #f2f2f2;
}
html body::before,
html body::after {
  display: none !important;
}

/* ---------- one font family everywhere ---------- */
html body,
html body *,
html body *::before,
html body *::after,
html body input,
html body textarea,
html body select,
html body button {
  font-family: var(--t-font) !important;
}

/* regular text weight */
html body {
  font-weight: 450;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

/* title weight: same family, bold */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .tile-title,
html body [class*="title"],
html body .tile-kicker,
html body .nav-item,
html body .nav-list--tiles a {
  font-weight: 650 !important;
  letter-spacing: -.01em;
}

/* ---------- every panel / card goes black ---------- */
html body .dash-panel,
html body .sidebar,
html body .right-rail-tile,
html body .schedule-panel-yellow,
html body .rail-block,
html body .qcal-panel,
html body .glass,
html body .nav-list--tiles a,
html body .nav-list--tiles .nav-item {
  background: var(--t-panel) !important;
  background-image: none !important;
  color: #f2f2f2;
}
html body .dash-panel,
html body .right-rail-tile,
html body .schedule-panel-yellow {
  box-shadow: inset 5px 0 0 var(--t-yellow), 0 0 0 1px rgba(var(--t-yellow-rgb), .22) !important;
  border-radius: 14px !important;
}
html body .nav-list--tiles a,
html body .nav-list--tiles .nav-item {
  border-radius: 10px !important;
}
html body .nav-list--tiles a:hover {
  box-shadow: inset 4px 0 0 var(--t-yellow) !important;
  color: var(--t-yellow);
}

/* ---------- action tiles ---------- */
html body .glass.tile {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--t-yellow-rgb), .16), transparent 55%),
    linear-gradient(165deg, #141414, #050505) !important;
  box-shadow:
    inset 6px 0 0 var(--t-yellow),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 22px 40px -18px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(var(--t-yellow-rgb), .28) !important;
  transition: transform .4s cubic-bezier(.2, .9, .25, 1), box-shadow .4s cubic-bezier(.2, .9, .25, 1) !important;
}
html body .glass.tile::before {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 140px;
  height: 140px;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(var(--t-yellow-rgb), .36), transparent 68%);
  pointer-events: none;
}
html body .glass.tile::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .2), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.ring-card:hover .glass.tile::after,
.ring-card:focus-within .glass.tile::after,
.tile-btn:hover .glass.tile::after {
  opacity: 1;
  animation: t-sweep 1s cubic-bezier(.2, .9, .25, 1) forwards;
}
@keyframes t-sweep {
  from { left: -60%; }
  to   { left: 130%; }
}
.ring-card:hover .glass.tile,
.ring-card:focus-within .glass.tile,
.tile-btn:hover .glass.tile {
  transform: translateY(-7px) scale(1.015);
  box-shadow:
    inset 6px 0 0 var(--t-yellow),
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 30px 52px -18px rgba(0, 0, 0, 1),
    0 0 46px -4px rgba(var(--t-yellow-rgb), .55) !important;
}

html body .glass.tile .tile-kicker {
  display: inline-block;
  font-size: .68rem;
  font-weight: 650 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #000 !important;
  background: var(--t-yellow);
  padding: .22rem .65rem .2rem;
  border-radius: 999px !important;
  text-shadow: none;
  margin-bottom: .75rem;
}
html body .glass.tile .tile-title {
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--t-white) !important;
  -webkit-text-fill-color: var(--t-white) !important;
  background: none !important;
  margin-bottom: .55rem;
  transition: color .3s ease;
}
.ring-card:hover .glass.tile .tile-title,
.tile-btn:hover .glass.tile .tile-title {
  color: var(--t-yellow) !important;
  -webkit-text-fill-color: var(--t-yellow) !important;
}
html body .glass.tile .tile-desc {
  font-size: .95rem;
  line-height: 1.5;
  color: #d4d4d4 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .glass.tile,
  html body .glass.tile::after { transition: none !important; animation: none !important; }
  .ring-card:hover .glass.tile,
  .ring-card:focus-within .glass.tile,
  .tile-btn:hover .glass.tile { transform: none; }
}

/* ---------- registry / membership card: curved like the tiles ---------- */
html body .membership-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--t-yellow-rgb), .14), transparent 55%),
    linear-gradient(165deg, #141414, #050505) !important;
  background-image: none;
  box-shadow:
    inset 6px 0 0 var(--t-yellow),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 18px 36px -18px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(var(--t-yellow-rgb), .28) !important;
  border: 0 !important;
}
html body .membership-card .card-avatar {
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px var(--t-yellow);
}
html body .membership-card .card-name {
  color: var(--t-white) !important;
  font-weight: 650 !important;
  letter-spacing: -.015em;
}
html body .membership-card .card-meta {
  color: #c9c9c9 !important;
  font-weight: 450;
}
html body .membership-card .card-flourish {
  color: var(--t-yellow) !important;
  font-weight: 650;
  letter-spacing: .02em;
}

/* ---------- left panel type: nav links, status, registry, footer ---------- */
html body .sidebar .nav-list--tiles a,
html body .sidebar .nav-list--tiles .nav-item {
  font-size: .98rem;
  font-weight: 600 !important;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--t-white);
}
html body .sidebar .nav-list--tiles a.nav-gold,
html body .sidebar .nav-list--tiles .nav-gold {
  color: var(--t-yellow) !important;
}
html body .sidebar .nav-list--tiles a:hover {
  color: var(--t-yellow) !important;
}
html body .sidebar .registry-no {
  font-weight: 650 !important;
  font-size: .85rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--t-white);
}
html body .sidebar .status-pill {
  font-weight: 650 !important;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
html body .sidebar .sidebar-footer-line {
  font-weight: 450;
  font-size: .8rem;
  line-height: 1.45;
  color: #a8a8a8;
}

/* FIX: style.css paints .nav-gold as gradient-clipped text with a TRANSPARENT
   text fill. The theme removes the gradient background, so that text became
   invisible (Perk Center Control, Accounting). Give it a real yellow fill. */
html body .nav-list a.nav-gold,
html body .nav-list--tiles a.nav-gold,
html body .sidebar a.nav-gold {
  -webkit-text-fill-color: var(--t-yellow) !important;
  color: var(--t-yellow) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  animation: none !important;
  opacity: 1 !important;
}
html body .nav-list--tiles a.nav-gold::before {
  background: var(--t-yellow) !important;
  filter: none !important;
  z-index: 0 !important;
  opacity: .9;
}