:root,
html[data-theme="light"] {
  --bg: #f7f7f8;
  --bg-elevated: #ffffff;
  --text: #1a1a1e;
  --text-muted: #5b5b63;
  --border: #e1e1e6;
  --accent: #1e3a5f;
  --accent-text: #ffffff;
  --success: #1c8a4b;
  --warning: #b8860b;
  --danger: #c93838;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --btn-secondary-bg: rgba(0, 0, 0, 0.045);
  --btn-secondary-bg-hover: rgba(0, 0, 0, 0.09);
}

html[data-theme="dark"] {
  --bg: #14151a;
  --bg-elevated: #1e1f26;
  --text: #eceef2;
  --text-muted: #a3a6b1;
  --border: #2e3038;
  --accent: #4a7fc4;
  --accent-text: #0d1117;
  --success: #3fcf7a;
  --warning: #e0b23a;
  --danger: #ef5c5c;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --btn-secondary-bg: rgba(255, 255, 255, 0.07);
  --btn-secondary-bg-hover: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.topbar .brand { font-weight: 700; font-size: 1.1rem; }
.topbar nav a { margin-right: 16px; color: var(--text-muted); font-size: 0.9rem; }
.topbar nav a:hover { color: var(--accent); }

.theme-toggle {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.85rem;
}
.theme-toggle:hover { border-color: var(--accent); }

.container { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}

h1, h2, h3 { font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.65rem; margin-bottom: 6px; }
h2 { font-size: 1.15rem; }

.muted { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], textarea, select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 6px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
textarea { min-height: 100px; font-family: inherit; }
label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text); margin: 14px 0 5px; }
label:first-child { margin-top: 0; }

input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s ease, transform 0.05s ease;
}
.btn:hover { opacity: 0.88; }
.btn:active { transform: translateY(1px); }
.btn-secondary {
  background: var(--btn-secondary-bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
}
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); border-color: var(--accent); color: var(--accent); opacity: 1; }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-uploaded { background: rgba(180,180,180,0.2); color: var(--text-muted); }
.badge-needs_review { background: rgba(184,134,11,0.18); color: var(--warning); }
.badge-released { background: rgba(28,138,75,0.16); color: var(--success); }
.badge-failed { background: rgba(201,56,56,0.16); color: var(--danger); }
.badge-priority-high { background: rgba(201,56,56,0.16); color: var(--danger); }
.badge-priority-medium { background: rgba(184,134,11,0.18); color: var(--warning); }
.badge-priority-low { background: rgba(28,138,75,0.16); color: var(--success); }

.list-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-item:last-child { border-bottom: none; }

.confidence-bar {
  height: 10px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  width: 100px;
}
/* Colored by tier rather than one flat color - a 30% fill in a flat colour that's close
   to the track colour is very hard to see; a distinct, deliberately saturated colour per
   tier stays visible at any fill amount, and also usefully signals low vs high confidence
   at a glance. */
.confidence-fill { height: 100%; }
.confidence-fill.low { background: var(--danger, #c0392b); }
.confidence-fill.medium { background: var(--warning, #b8860b); }
.confidence-fill.high { background: var(--success, #2e7d32); }

.error-box {
  background: rgba(201,56,56,0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: 7px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}

.week-block { border-left: 3px solid var(--accent); padding-left: 12px; margin-bottom: 14px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }

/* ---------- v2: sidebar app shell, logo slot, footer, coming-soon ---------- */

html, body { height: 100%; margin: 0; }

.app-shell {
  display: flex;
  height: 100vh;
  width: 100%;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--border);
  /* Placeholder brand accent - a subtle diagonal stripe pattern, easy to swap once
     real brand colours/pattern are supplied (see README - drop assets in app/static/img/). */
  background: repeating-linear-gradient(
    135deg,
    var(--bg-elevated),
    var(--bg-elevated) 14px,
    var(--accent) 14px,
    var(--accent) 15px
  );
  background-size: 200% 200%;
  background-color: var(--bg-elevated);
  background-blend-mode: normal;
}

.brand-logo { height: 32px; width: 32px; object-fit: contain; border-radius: 6px; }
.brand-monogram {
  height: 32px; width: 32px; border-radius: 6px;
  background: var(--accent); color: var(--accent-text);
  align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
}

.sidebar-nav { display: flex; flex-direction: column; padding: 10px; gap: 2px; flex: 1; }
.sidebar-nav a {
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-nav a:hover { background: var(--bg); text-decoration: none; }
.sidebar-nav a.active { background: var(--accent); color: var(--accent-text); }
.sidebar-nav a.soon-link { color: var(--text-muted); cursor: pointer; }
.sidebar-divider { height: 1px; background: var(--border); margin: 8px 6px; }

/* Collapsible nav group (currently used for Admin) - one entry point that expands to its
   sub-links, instead of every sub-link sitting flat in the main list. Built as a single
   flat group for now (four items doesn't yet need sub-categories of its own - that would
   be structure decorating nothing real); .sidebar-group-items > .sidebar-group-heading
   is there so a genuine subdivision (e.g. "System" vs "People") can be dropped in later
   without restructuring anything, once there's enough in the group to actually warrant it. */
.sidebar-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 7px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.sidebar-group-toggle:hover { background: var(--bg); }
.sidebar-group-toggle.has-active-child { color: var(--accent); font-weight: 600; }
.sidebar-group-toggle .chevron { transition: transform 0.15s ease; flex-shrink: 0; }
.sidebar-group-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }

.sidebar-group-items {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.18s ease;
}
.sidebar-group-items[data-expanded="true"] { grid-template-rows: 1fr; }
.sidebar-group-items > div { overflow: hidden; }
.sidebar-group-items a {
  padding-left: 30px;
  font-size: 0.87rem;
}
.sidebar-group-heading {
  padding: 10px 12px 2px 30px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Every <details><summary> in this app is the same pattern - click to reveal a form or
   extra content below (Delete this scheme of work, Reset this user's password, Edit this
   week, etc). The browser's default disclosure triangle plus muted text reads as plain
   text rather than a control - the same defect as the flat .btn-secondary bug, just via a
   different element, so it needs the same fix rather than being patched per-instance. */
summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  padding: 8px 14px;
  border-radius: 7px;
  background: var(--btn-secondary-bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 0.88rem;
  user-select: none;
  width: fit-content;
}
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  margin-left: 2px;
  flex-shrink: 0;
}
summary:hover { background: var(--btn-secondary-bg-hover); border-color: var(--accent); color: var(--accent); }
details[open] > summary::after { transform: rotate(45deg); }
details[open] > summary { margin-bottom: 10px; }

.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
}
.main-content {
  flex: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px clamp(24px, 4vw, 56px) 60px;
}
.app-footer {
  border-top: 1px solid var(--border);
  padding: 14px 36px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Pairs short fields (dates, numbers, short text) side by side on wide screens instead of
   every field stacking full-width regardless of content - this is what actually uses the
   extra room a wider main-content gives us, rather than just stretching single inputs to
   an uncomfortable reading width. Anything that genuinely needs the full row (a textarea,
   a long help paragraph, a checklist) opts out via .full. */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
  align-items: start;
}
.field-grid > .full { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* Groups a long form into clearly labelled sections (Timing / Content / Assessment / etc.) -
   a 12-field wall of inputs with no structure is exactly what reads as "rough"; a short
   uppercase heading before each real change of topic costs nothing and fixes that. */
.form-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.form-section-title:first-child { margin-top: 4px; }

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

/* Readonly fields (used for released/approved submissions) - without this, browsers apply
   their own default readonly styling, which can render as low-contrast/washed-out text
   against a dark theme, making already-approved marks look unreadable. */
input[readonly], textarea[readonly] {
  background: var(--bg);
  color: var(--text);
  opacity: 1;
  cursor: text;
}

/* Course page redesign - section categories, stats strip, utility grid. Kept restrained
   (this is a working tool people use daily, not a marketing page) but gives real visual
   hierarchy instead of an undifferentiated stack of identical grey boxes. */

:root, html[data-theme="light"] { --accent-teal: #0d7377; --accent-teal-bg: rgba(13, 115, 119, 0.08); }
html[data-theme="dark"] { --accent-teal: #4fd1c5; --accent-teal-bg: rgba(79, 209, 197, 0.1); }

.stats-strip {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.stat-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 16px; font-size: 0.9rem;
}
.stat-pill .stat-value { font-weight: 700; font-size: 1.05rem; }
.stat-pill .stat-icon { color: var(--accent); flex-shrink: 0; }

.section-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.section-card.category-insight { border-left-color: var(--accent-teal); }
.section-card.category-danger { border-left-color: var(--danger); }

.section-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.section-header .section-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  background: var(--accent); color: var(--accent-text);
}
.category-insight .section-header .section-icon { background: var(--accent-teal); color: #08181a; }
.category-danger .section-header .section-icon { background: var(--danger); color: #2a0a0a; }
.section-header h2 { margin: 0; font-size: 1.15rem; }

.utility-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
@media (max-width: 820px) {
  .utility-grid { grid-template-columns: 1fr; }
}