/* ===========================================================================
   Morning Glory Training Portal — visual system
   School colours: navy blue carries the structure, gold is the accent.
   Full-bleed layout: the shell fills the viewport, no outer margin.
   Tailwind handles layout; this file owns the recurring components so the look
   cannot drift page to page.
   ======================================================================== */

:root {
  /* navy — structure: sidebar, buttons, headings, dark surfaces */
  --n-50:  #eef2f9;
  --n-100: #dbe3f1;
  --n-200: #b8c6e0;
  --n-300: #8b9fc7;
  --n-400: #4a6ba3;
  --n-500: #27508f;
  --n-600: #1b3c73;
  --n-700: #142e5b;
  --n-800: #0e2145;
  --n-900: #0a1a3c;   /* sidebar / proctor bar */

  /* gold — accent: active state, progress, highlights */
  --g-50:  #fdf8ec;
  --g-100: #f9edcf;
  --g-200: #f2dda6;
  --g-300: #e8c877;
  --g-400: #dbb14b;
  --g-500: #c99a2c;
  --g-600: #a87d1c;
  --g-700: #866215;

  --ink:   #1e2a44;
  --ink-2: #52607d;
  --muted: #8b96ac;
  --line:  #e6ebf4;

  /* supporting tints, only ever used inside small tiles */
  --sky:   #2f5fb3;  --sky-bg:   #e3ebf8;
  --grape: #6c4fd8;  --grape-bg: #e8e2fb;
  --rose:  #d6455f;  --rose-bg:  #fce3e7;
  --mint:  #0f7f6c;  --mint-bg:  #d9f2ec;

  --shadow-card: 0 1px 3px rgba(14, 33, 69, .06);
  --shadow-pop:  0 10px 34px rgba(10, 26, 60, .12);
}

body.mg-body {
  min-height: 100%;
  color: var(--ink);
  background:
    radial-gradient(1100px 480px at 6% -10%, #e7edf8 0%, rgba(231, 237, 248, 0) 60%),
    radial-gradient(900px 460px at 100% 100%, #f7efdc 0%, rgba(247, 239, 220, 0) 55%),
    #f5f7fb;
}

/* ------------------------------------------------------------------ shell */
/* Full width by design: no max-width, no outer padding, square corners. */
.mg-page  { width: 100%; margin: 0; padding: 0; }
.mg-shell {
  display: flex;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  min-height: 100vh;
}

.mg-sidebar {
  width: 244px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--n-900);
  color: #fff;
  position: sticky;
  top: 0;
  height: 100vh;
}
@media (max-width: 1023px) {
  .mg-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    box-shadow: 0 0 60px rgba(10, 26, 60, .45);
  }
}
.mg-brand {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.35rem 1.25rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mg-brand-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(140deg, var(--g-300), var(--g-500));
  color: var(--n-900); box-shadow: 0 4px 12px rgba(201, 154, 44, .35);
  font-size: .8rem; font-weight: 800;
}
.mg-navgroup {
  padding: 1rem 1.35rem .5rem;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .38); font-weight: 700;
}
.mg-nav { padding: 0 .8rem; display: flex; flex-direction: column; gap: 2px; }
.mg-nav a {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  padding: .64rem .75rem;
  border-radius: 11px;
  font-size: .855rem; font-weight: 500;
  color: rgba(255, 255, 255, .72);
  transition: background .15s, color .15s;
}
.mg-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.mg-nav a.active {
  background: rgba(219, 177, 75, .16);
  color: var(--g-300);
  font-weight: 600;
}
.mg-nav a.active::before {
  content: ""; position: absolute; left: -.8rem; top: 50%; translate: 0 -50%;
  width: 4px; height: 24px; border-radius: 0 4px 4px 0; background: var(--g-400);
}
.mg-nav a svg { width: 19px; height: 19px; flex-shrink: 0; }

/* ----------------------------------------------------------------- topbar */
.mg-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.75rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.mg-search { flex: 1; max-width: 480px; position: relative; }
.mg-search input {
  width: 100%;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: #f7f9fc !important;
  padding: .62rem 2.7rem .62rem 1.15rem !important;
  font-size: .85rem;
}
.mg-search button {
  position: absolute; right: 5px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--n-800); color: var(--g-300);
}
.mg-search button:hover { background: var(--n-600); }

.mg-iconbtn {
  position: relative;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  color: var(--ink-2); background: #fff;
  transition: background .15s, color .15s;
}
.mg-iconbtn:hover { background: var(--n-50); color: var(--n-700); }
.mg-dot {
  position: absolute; top: 5px; right: 5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--g-400); color: var(--n-900);
  font-size: 10px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}
.mg-avatar {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(140deg, var(--n-500), var(--n-800));
  color: var(--g-300); font-size: .72rem; font-weight: 800;
}
.mg-main { flex: 1; min-width: 0; padding: 1.5rem 1.75rem 2.5rem; }
@media (max-width: 640px) {
  .mg-main { padding: 1.1rem 1rem 2rem; }
  .mg-topbar { padding: .75rem 1rem; }
}

/* ------------------------------------------------------------------ cards */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.card-flat { box-shadow: none; }
.card-hover { transition: transform .18s, box-shadow .18s, border-color .18s; }
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(14, 33, 69, .12);
  border-color: var(--n-200);
}

/* Greeting banner — navy panel, gold headline */
.mg-banner {
  position: relative; overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(600px 220px at 88% 120%, rgba(219, 177, 75, .28) 0%, rgba(219, 177, 75, 0) 70%),
    linear-gradient(105deg, var(--n-900) 0%, var(--n-700) 58%, var(--n-500) 100%);
  padding: 1.7rem 1.9rem;
  color: #fff;
}
.mg-banner h2 { color: var(--g-300); }
.mg-banner strong { color: var(--g-300); font-weight: 700; }
.mg-banner-art { position: absolute; right: 1.4rem; bottom: 0; width: 200px; pointer-events: none; }
@media (max-width: 900px) { .mg-banner-art { display: none; } }

/* Section heading + "see all" link */
.mg-sect { display: flex; align-items: center; justify-content: space-between; margin: 1.7rem 0 .85rem; }
.mg-sect h3 { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.mg-seeall { font-size: .78rem; font-weight: 600; color: var(--n-600); }
.mg-seeall:hover { color: var(--g-600); text-decoration: underline; }

/* Course / video cover: a deterministic gradient stands in for artwork */
.mg-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  color: #fff;
  overflow: hidden;
}
.mg-cover span.mg-cover-label {
  font-weight: 800; font-size: 1.5rem; letter-spacing: .05em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.mg-cover video, .mg-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Coloured square icon tile used in rail lists and stat cards */
.tile {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  font-weight: 800; font-size: .8rem;
}
.tile svg { width: 21px; height: 21px; }
.tile-navy  { background: var(--n-50);    color: var(--n-600); }
.tile-gold,
.tile-peach { background: var(--g-50);    color: var(--g-600); }
.tile-sky   { background: var(--sky-bg);  color: var(--sky); }
.tile-grape { background: var(--grape-bg); color: var(--grape); }
.tile-rose  { background: var(--rose-bg); color: var(--rose); }
.tile-mint  { background: var(--mint-bg); color: var(--mint); }

/* Circular chevron button that ends a rail row */
.chev {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
  background: var(--n-800); color: #fff;
  box-shadow: 0 3px 8px rgba(14, 33, 69, .22);
  transition: background .15s, color .15s, transform .15s;
}
.chev:hover { background: var(--g-400); color: var(--n-900); transform: translateX(2px); }
.chev svg { width: 15px; height: 15px; }

.mg-rail-row {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff;
  transition: box-shadow .15s, border-color .15s;
}
.mg-rail-row:hover { box-shadow: var(--shadow-card); border-color: var(--n-200); }

/* --------------------------------------------------------------- progress */
.mg-progress { height: 9px; border-radius: 999px; background: var(--n-100); overflow: hidden; }
.mg-progress > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--g-300), var(--g-500));
  position: relative;
}
.mg-progress-label {
  font-size: 10px; font-weight: 800; color: var(--n-900);
  position: absolute; right: 6px; top: -1px; line-height: 11px;
}
.mg-progress-thin { height: 6px; }
.mg-progress.is-done { background: var(--mint-bg); }
.mg-progress.is-done > i { background: linear-gradient(90deg, #2aa38c, var(--mint)); }
.mg-progress.is-done .mg-progress-label { color: #fff; }

/* ----------------------------------------------------------------- inputs */
/* The selector deliberately targets `input` and excludes the non-text types,
   rather than listing [type="text"] etc: half the forms in this app use a bare
   <input> with no type attribute, and Tailwind's preflight strips borders from
   anything we don't style ourselves — which is what made fields look unstyled.
   input:not([attr]) also outranks the forms plugin's [type='…'] base rules, so
   these win no matter which stylesheet loads last. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not([type="hidden"]),
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border-radius: 12px;
  border: 1px solid #dde4ef;
  background-color: #fcfdff;
  padding: .6rem .85rem;
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
textarea { min-height: 5rem; resize: vertical; }

/* Native pickers keep their own widget, so leave the appearance alone. */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 2.55rem;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--n-500);
  box-shadow: 0 0 0 4px rgba(39, 80, 143, .13);
}
input:disabled, select:disabled, textarea:disabled {
  background-color: #f1f4f9; color: var(--muted); cursor: not-allowed;
}
::placeholder { color: #a8b2c4; }

/* Dropdowns: our own chevron, since appearance:none removes the native one. */
select {
  padding-right: 2.35rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2352607d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 18px 18px;
  cursor: pointer;
}
select:disabled { cursor: not-allowed; }
select[multiple] { background-image: none; padding-right: .85rem; min-height: 6rem; }
select[multiple] option { padding: .3rem .1rem; }

/* Tick boxes and radios, drawn in the school navy. */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  width: 1.1rem; height: 1.1rem;
  margin: 0;
  border: 1.5px solid #c3cddf;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
input[type="radio"] { border-radius: 999px; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--n-400); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: none; box-shadow: 0 0 0 4px rgba(39, 80, 143, .18);
}
input[type="checkbox"]:checked {
  background-color: var(--n-600);
  border-color: var(--n-600);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 4.8 6.3 11.2 3.5 8.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 88% 88%;
}
input[type="radio"]:checked { border-color: var(--n-600); border-width: 2px; }
input[type="radio"]:checked::after {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 999px;
  background-color: var(--n-600);
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
  background-color: #eef1f6; border-color: #d8dfea; cursor: not-allowed;
}

/* File pickers: dashed drop-zone look with a navy chip for the button. */
input[type="file"] {
  width: 100%;
  border: 1px dashed #cbd5e6;
  border-radius: 12px;
  background-color: #f7f9fc;
  padding: .5rem;
  font-size: .82rem;
  color: var(--ink-2);
  cursor: pointer;
}
input[type="file"]:hover { border-color: var(--n-400); background-color: var(--n-50); }
input[type="file"]:focus { outline: none; border-color: var(--n-500); box-shadow: 0 0 0 4px rgba(39, 80, 143, .13); }
input[type="file"]::file-selector-button {
  margin-right: .7rem;
  border: 0;
  border-radius: 9px;
  padding: .42rem .8rem;
  background: linear-gradient(135deg, var(--n-600), var(--n-900));
  color: #fff;
  font: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { filter: brightness(1.15); }

label { font-size: .78rem; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: .35rem; }
/* A label wrapping a tick box is a row, not a caption. */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: flex; align-items: center; gap: .55rem;
  margin-bottom: 0; font-weight: 500; color: var(--ink);
  cursor: pointer;
}
fieldset { border: 0; padding: 0; margin: 0; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 11px; padding: .6rem 1.1rem;
  font-size: .845rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--n-600), var(--n-900));
  color: #fff; box-shadow: 0 6px 16px rgba(14, 33, 69, .22);
}
.btn-primary:hover { box-shadow: 0 8px 20px rgba(14, 33, 69, .3); transform: translateY(-1px); }
/* Gold: for a primary action sitting on navy (the banner CTA) */
.btn-gold {
  background: linear-gradient(135deg, var(--g-300), var(--g-500));
  color: var(--n-900); box-shadow: 0 6px 16px rgba(201, 154, 44, .3);
}
.btn-gold:hover { box-shadow: 0 8px 22px rgba(201, 154, 44, .42); transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--ink-2); border-color: #dde4ef; }
.btn-ghost:hover { background: var(--n-50); color: var(--n-700); border-color: var(--n-200); }
.btn-soft { background: var(--n-50); color: var(--n-700); }
.btn-soft:hover { background: var(--n-100); }
.btn-danger { background: #fdeaed; color: #b8324a; border-color: #f6ccd3; }
.btn-danger:hover { background: #fadbe0; }
.btn-sm { padding: .38rem .75rem; font-size: .78rem; border-radius: 9px; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
/* On a navy banner a ghost button needs to be light-on-dark */
.mg-banner .btn-ghost {
  background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .28);
}
.mg-banner .btn-ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* ----------------------------------------------------------------- tables */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .855rem; }
.tbl thead th {
  text-align: left; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 700;
  padding: .7rem 1rem; background: var(--n-50); border-bottom: 1px solid var(--line);
}
.tbl tbody td { padding: .8rem 1rem; border-bottom: 1px solid #f0f3f8; vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #fafbfe; }

/* --------------------------------------------------------- proctor chrome */
/* The one page that must not look like the others. */
#mg-proctor { position: sticky; top: 0; z-index: 50; background: var(--n-900); color: #fff; }
#mg-overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(10, 26, 60, .9); backdrop-filter: blur(4px);
}
#mg-overlay.show { display: flex; }
.mg-pulse { animation: mgpulse 1.6s ease-in-out infinite; }
@keyframes mgpulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media print { #mg-proctor, .mg-sidebar, .mg-topbar, footer { display: none !important; } }