/* ==========================================================================
   Teacher dashboard (dashboard.html): a daily workspace. Same tokens as the
   rest of Fasl, but calm: no background grid, little glow, stronger
   secondary text, compact cards.
   ========================================================================== */

.dash {
  --d-side: 248px;
  --d-text-2: #c3c9e2;
  --d-card: rgb(255 255 255 / 0.035);
  --d-accent: rgb(var(--p-light));
  --d-tint: rgb(var(--p) / 0.12);
  --text-2: var(--d-text-2);
}
:root[data-theme='light'] .dash {
  --d-text-2: #3f4b5e;
  --d-card: rgb(255 255 255 / 0.82);
  --d-accent: #047857;
  --d-tint: rgb(var(--p) / 0.1);
}
.dash .aurora { display: none; }
.dash .btn-primary { background: linear-gradient(135deg, #047857, #0f766e 60%, #0e7490); box-shadow: 0 6px 18px -10px rgb(var(--p-deep) / 0.8); }
.dash .btn-primary:hover { background: linear-gradient(135deg, #047857, #0f766e 60%, #0e7490); filter: brightness(1.08); box-shadow: 0 8px 22px -10px rgb(var(--p-deep) / 0.9); }
.dash .btn { backdrop-filter: none; -webkit-backdrop-filter: none; }
.dash .logo-mark { box-shadow: none; }

.d-skip { position: absolute; top: -60px; inset-inline-start: 12px; z-index: 90; padding: 10px 16px; border-radius: 10px; background: #047857; color: #fff; font-weight: 700; }
.d-skip:focus { top: 10px; color: #fff; }

/* ---------------------------------------------------------------- shell */

.d-shell { display: grid; grid-template-columns: var(--d-side) 1fr; min-height: 100vh; }
.d-side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 14px;
  border-inline-end: 1px solid var(--border);
  background: rgb(255 255 255 / 0.02);
}
:root[data-theme='light'] .d-side { background: rgb(255 255 255 / 0.6); }
.d-side .logo { padding: 4px 8px; font-size: 21px; }
.d-nav { display: grid; gap: 2px; }
.d-nav a, .d-admin {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 11px;
  color: var(--text-2);
  font-weight: 700;
  font-size: 15px;
}
.d-nav a:hover, .d-admin:hover { background: var(--surface-2); color: var(--text); }
.d-nav a[aria-current='page'] { background: var(--d-tint); color: var(--d-accent); box-shadow: inset -3px 0 0 var(--d-accent); }
.d-admin { margin-top: auto; }

.d-main { min-width: 0; display: flex; flex-direction: column; }
.d-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
  background: rgb(5 6 15 / 0.85);
  backdrop-filter: blur(10px);
}
:root[data-theme='light'] .d-top { background: rgb(238 245 243 / 0.9); }
.d-top h1 { font-size: 19px; font-weight: 800; }
.d-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 6px 0 10px;
  padding-inline: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--d-card);
  color: var(--text);
  font-weight: 700;
}
.d-account .avatar { width: 32px; height: 32px; font-size: 12.5px; }
.d-account .icon { transform: rotate(-90deg); color: var(--text-3); }
.d-account-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-view { padding: 24px 28px 64px; outline: none; max-width: 1240px; width: 100%; }
/* focused after each navigation so screen readers start at the content; no ring around the page */
.d-view:focus, .d-view:focus-visible { box-shadow: none; }

.d-bottom { display: none; }

@media (max-width: 899px) {
  .d-shell { grid-template-columns: 1fr; }
  .d-side { display: none; }
  .d-top { padding: 0 16px; min-height: 56px; }
  .d-top h1 { font-size: 17px; }
  .d-account-name, .d-account .icon { display: none; }
  .d-account { padding: 0 4px; }
  .d-view { padding: 16px 16px calc(84px + env(safe-area-inset-bottom)); }
  .d-bottom {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: rgb(8 10 22 / 0.96);
  }
  :root[data-theme='light'] .d-bottom { background: rgb(255 255 255 / 0.97); }
  .d-bottom a, .d-bottom button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--text-2);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
  }
  .d-bottom a[aria-current='page'] { color: var(--d-accent); background: var(--d-tint); }
}

/* ---------------------------------------------------------------- page pieces */

.d-stack { display: grid; gap: 18px; }
.d-narrow { max-width: 760px; }
.d-grid-2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .d-grid-2 { grid-template-columns: 1fr; } }

.d-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.d-head h2 { font-size: 24px; font-weight: 900; }
.d-head p { color: var(--text-2); margin-top: 2px; }
.d-head-actions, .d-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.d-actions { margin-top: 14px; }
.d-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); margin-bottom: 6px; }
.d-back:hover { color: var(--text); }

.d-card { position: relative; padding: 18px 20px; border-radius: 16px; background: var(--d-card); border: 1px solid var(--border); min-width: 0; }
.d-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.d-card-head h3 { font-size: 16.5px; font-weight: 800; }
.d-link { font-size: 14px; font-weight: 700; color: var(--d-accent); }

.d-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.d-welcome h2 { font-size: 26px; font-weight: 900; }
.d-welcome p { color: var(--text-2); }
.d-welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.d-live {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgb(244 63 94 / 0.45);
  background: rgb(244 63 94 / 0.1);
}
.d-live-dot { width: 12px; height: 12px; border-radius: 50%; background: #f43f5e; flex-shrink: 0; animation: pulse 1.4s infinite; }
.d-live-text { flex: 1; min-width: 0; display: grid; }
.d-live-text span { color: var(--text-2); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .d-live-dot { animation: none; } }

.d-next { display: flex; gap: 16px; align-items: flex-start; }
.d-next-when { flex-shrink: 0; display: grid; place-items: center; text-align: center; min-width: 92px; padding: 10px 8px; border-radius: 14px; background: var(--d-tint); color: var(--d-accent); }
.d-next-when b { font-size: 19px; font-weight: 900; }
.d-next-when span { font-size: 12.5px; font-weight: 700; }
.d-next-info { min-width: 0; display: grid; gap: 4px; }
.d-next-info h4 { font-size: 18px; font-weight: 800; }
.d-next-info p { color: var(--text-2); font-size: 14px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.d-list { list-style: none; margin: 0; padding: 0; display: grid; }
.d-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); min-width: 0; }
.d-row:last-child { border-bottom: 0; }
.d-row.is-muted { opacity: 0.65; }
.d-row-time { flex-shrink: 0; min-width: 64px; font-weight: 800; color: var(--d-accent); }
.d-row-main { flex: 1; min-width: 0; display: grid; color: var(--text); }
.d-row-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-row-main small { color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.d-row-main:hover b { color: var(--d-accent); }
.d-row-meta { display: flex; gap: 10px; color: var(--text-2); font-size: 13px; }
.d-row-meta span { display: inline-flex; align-items: center; gap: 4px; }

.d-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.d-stat { display: grid; gap: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--d-card); color: var(--text); }
.d-stat:hover { border-color: var(--border-strong); color: var(--text); }
.d-stat b { font-size: 24px; font-weight: 900; line-height: 1.3; }
.d-stat span { font-weight: 700; font-size: 14px; }
.d-stat small { color: var(--text-2); font-size: 12px; }
@media (max-width: 700px) { .d-stats { grid-template-columns: 1fr 1fr; } }

.d-linkbox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--inset); border: 1px solid var(--border); }
.d-link-text { font-weight: 700; overflow-wrap: anywhere; flex: 1; min-width: 0; }

.d-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-2); font-size: 14px; }

/* status badges: icon + text, never colour alone */
.st { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.st-info { color: #7dd3fc; background: rgb(56 189 248 / 0.12); border-color: rgb(56 189 248 / 0.3); }
.st-warn { color: #fcd34d; background: rgb(251 191 36 / 0.12); border-color: rgb(251 191 36 / 0.3); }
.st-live { color: #fda4af; background: rgb(244 63 94 / 0.14); border-color: rgb(244 63 94 / 0.4); }
.st-ok { color: #6ee7b7; background: rgb(52 211 153 / 0.12); border-color: rgb(52 211 153 / 0.3); }
.st-bad { color: #fda4af; background: rgb(244 63 94 / 0.1); border-color: rgb(244 63 94 / 0.3); }
.st-muted { color: var(--text-2); background: var(--ov-2); border-color: var(--border); }
:root[data-theme='light'] .st-info { color: #0369a1; }
:root[data-theme='light'] .st-warn { color: #92400e; }
:root[data-theme='light'] .st-live, :root[data-theme='light'] .st-bad { color: #be123c; }
:root[data-theme='light'] .st-ok { color: #047857; }

.d-empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 28px 16px; color: var(--text-2); }
.d-empty b { color: var(--text); font-size: 16px; }
.d-empty p { font-size: 14px; max-width: 30rem; }
.d-empty .btn { margin-top: 8px; }
.d-empty-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--d-tint); color: var(--d-accent); margin-bottom: 4px; }
.d-error .d-empty-icon { background: var(--danger-bg); color: #fda4af; }
.d-skeletons { display: grid; gap: 12px; }

.d-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--inset); border: 1px solid var(--border); overflow-x: auto; max-width: 100%; }
.d-tabs [role='tab'] { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font: inherit; font-weight: 700; font-size: 14px; }
.d-tabs [role='tab'][aria-selected='true'] { background: var(--surface-3); color: var(--text); box-shadow: inset 0 -2px 0 var(--d-accent); }
.d-tab-count { font-size: 12px; padding: 0 7px; border-radius: 99px; background: var(--ov-2); }

.d-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.d-filters .input, .d-filters .select { height: 40px; width: auto; min-width: 150px; }
.d-filters .d-search { flex: 1; min-width: 200px; }

.d-field-err { color: #fda4af; font-weight: 700; font-size: 13px; }
:root[data-theme='light'] .d-field-err { color: #be123c; }
.d-optional { color: var(--text-3); font-weight: 400; }
.field > label { font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.d-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.d-dl dt { color: var(--text-2); font-weight: 700; }
.d-dl dd { margin: 0; overflow-wrap: anywhere; }

.d-menu { min-width: 190px; }

/* tables: scroll inside their card on small screens */
.d-table-wrap { overflow-x: auto; margin-inline: -4px; }
.d-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.d-table th { text-align: start; font-size: 12.5px; color: var(--text-2); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.d-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.d-table tr:last-child td { border-bottom: 0; }

@media (max-width: 899px) {
  .d-welcome h2 { font-size: 22px; }
  .d-welcome-actions { width: 100%; }
  .d-welcome-actions .btn { flex: 1; }
  .d-welcome-actions .btn-ghost { flex-basis: 100%; }
  .d-card { padding: 16px; }
  .d-next-when { min-width: 76px; }
  .d-live { flex-wrap: wrap; }
  .d-live .btn { width: 100%; }
  .d-row { flex-wrap: wrap; }
  .d-row-main { flex-basis: calc(100% - 90px); }
  .d-head h2 { font-size: 21px; }
}

/* offline banner sits under the sticky top bar */
.dash .offline-banner { top: 64px; z-index: 29; }