/* CoreEd Registers – components the LMS doesn't have, built only from the
   CoreEd tokens defined in coreed.css (loaded first). */

/* ---------- Forms: the register uses <label>Text <input></label> ---------- */
input:not([type]), input[type=date], input[type=time], input[type=month], input[type=number], input[type=tel] {
  width: 100%; padding: .6rem .75rem; border: 1px solid #CBD5E1; border-radius: 8px; font: inherit; font-size: .92rem;
  background: #fff; color: var(--slate);
}
label > input, label > select, label > textarea { margin-top: .3rem; font-weight: 400; }
form label:has(> input:not([type=checkbox]):not([type=radio]), > select, > textarea) { margin-bottom: 1rem; }
label.check { display: flex; gap: .5rem; align-items: center; font-weight: 500; padding: 0; margin-bottom: 1rem; }
label.check input { width: auto; margin: 0; }
fieldset { border: 1px solid var(--border); border-radius: var(--r); padding: .75rem 1rem; margin: 0 0 1rem; }
legend { font-weight: 600; color: var(--navy); padding: 0 .35rem; }
.filters > input, .filters > select { width: auto; min-width: 170px; }
.filters label.inline { display: flex; gap: .4rem; align-items: center; margin: 0; font-weight: 500; }
.filters label.inline input { width: auto; margin: 0; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 220px; margin: 0; }
form.inline { display: inline; }
.w-num { width: 6rem !important; }
.w-ref { width: 8rem !important; }
.narrow { max-width: 600px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 1.25rem; }
.mt-sm { margin-top: 1rem; }
.nowrap { white-space: nowrap; }
section.card { margin-bottom: 1rem; }
.card.table-wrap { overflow-x: auto; }

/* ---------- Buttons & badges not in the LMS set ---------- */
.btn.danger { background: #fff; color: var(--red); border-color: #FBC4C4; }
.btn.danger:hover { background: var(--red-l); color: var(--red); border-color: var(--red); }
button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }
.badge.danger { background: var(--red-l); color: var(--red); }
.st-present { background: var(--green-l); color: var(--green-t); }
.st-late { background: var(--gold-bg); color: var(--gold-t); }
.st-absent { background: var(--red-l); color: var(--red); }
.st-authorised { background: var(--ice); color: var(--navy-m); }
.text-danger { color: var(--red); }
.stat .value .text-danger, .stat .value .text-ok { font-size: inherit; }
.text-ok { color: var(--navy); }
tr.dim td { opacity: .6; }

/* Tabs rendered as links */
a.tab { text-decoration: none; }
.tab[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* Temporary password display */
.secret { font: 600 1.3rem ui-monospace, Consolas, monospace; padding: .75rem 1rem; background: var(--lgray);
  border: 1px solid var(--border); border-radius: 8px; user-select: all; color: var(--navy); }
.pager { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 1rem; }

/* ---------- Register ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.seg-opt { margin: 0; font-weight: 500; display: inline-block; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span {
  display: inline-block; padding: .4rem .8rem; border: 1px solid #CBD5E1; border-radius: 8px; cursor: pointer; font-size: .85rem;
  font-weight: 600; min-width: 5rem; text-align: center; background: #fff; color: var(--slate);
}
.seg-opt span:hover { border-color: var(--accent); }
.seg-opt input:focus-visible + span { outline: 3px solid rgba(0, 115, 217, .45); outline-offset: 2px; }
.seg-opt.st-present, .seg-opt.st-late, .seg-opt.st-absent, .seg-opt.st-authorised { background: none; }
.seg-opt.st-present input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.seg-opt.st-late input:checked + span { background: var(--gold-l); border-color: var(--gold-l); color: var(--navy); }
.seg-opt.st-absent input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.seg-opt.st-authorised input:checked + span { background: var(--navy-m); border-color: var(--navy-m); color: #fff; }
form label.late-mins, .late-mins { display: none; margin: .5rem 0 0; font-weight: 500; font-size: .84rem; }
form label.late-mins.show, .late-mins.show { display: flex; gap: .5rem; align-items: center; }
.late-mins input { margin: 0; }
.register td { vertical-align: middle; }
.register td input[type=text], .register td input:not([type]) { margin: 0; }
.pastoral-timer .countdown { font-weight: 700; }

/* ---------- Six-month attendance trend (single series; heights via classes – CSP blocks inline styles) ---------- */
.trend { position: relative; display: flex; gap: 2px; align-items: flex-end; height: 160px; padding: 0 4px;
  border-bottom: 1px solid var(--border); }
.trend-target { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--gold-l); z-index: 1; pointer-events: none; }
.trend-target span { position: absolute; right: 0; top: -1.35rem; font-size: .72rem; font-weight: 600; color: var(--gold-t);
  background: #fff; padding: 0 4px; }
.bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  position: relative; cursor: default; }
.bar { width: 56%; max-width: 48px; min-height: 2px; background: var(--accent); border-radius: 4px 4px 0 0; }
.bar.below { background: var(--red); }
.bar.none { display: none; }
.bar-col:hover .bar, .bar-col:focus .bar { filter: brightness(1.12); }
.bar-col .tip {
  display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 3;
  background: var(--navy); color: #fff; font-size: .75rem; padding: .35rem .55rem; border-radius: 6px; white-space: nowrap;
  box-shadow: var(--sh);
}
.bar-col:hover .tip, .bar-col:focus .tip { display: block; }
.trend-labels { display: flex; gap: 2px; padding: 0 4px; }
.trend-labels div { flex: 1; text-align: center; font-size: .78rem; padding-top: .35rem; }
.trend-labels .v { font-weight: 700; color: var(--navy); }
.trend-labels .v.below { color: var(--red); }
.h-0 { height: 0%; }
.h-1 { height: 2%; }
.h-2 { height: 4%; }
.h-3 { height: 6%; }
.h-4 { height: 8%; }
.h-5 { height: 10%; }
.h-6 { height: 12%; }
.h-7 { height: 14%; }
.h-8 { height: 16%; }
.h-9 { height: 18%; }
.h-10 { height: 20%; }
.h-11 { height: 22%; }
.h-12 { height: 24%; }
.h-13 { height: 26%; }
.h-14 { height: 28%; }
.h-15 { height: 30%; }
.h-16 { height: 32%; }
.h-17 { height: 34%; }
.h-18 { height: 36%; }
.h-19 { height: 38%; }
.h-20 { height: 40%; }
.h-21 { height: 42%; }
.h-22 { height: 44%; }
.h-23 { height: 46%; }
.h-24 { height: 48%; }
.h-25 { height: 50%; }
.h-26 { height: 52%; }
.h-27 { height: 54%; }
.h-28 { height: 56%; }
.h-29 { height: 58%; }
.h-30 { height: 60%; }
.h-31 { height: 62%; }
.h-32 { height: 64%; }
.h-33 { height: 66%; }
.h-34 { height: 68%; }
.h-35 { height: 70%; }
.h-36 { height: 72%; }
.h-37 { height: 74%; }
.h-38 { height: 76%; }
.h-39 { height: 78%; }
.h-40 { height: 80%; }
.h-41 { height: 82%; }
.h-42 { height: 84%; }
.h-43 { height: 86%; }
.h-44 { height: 88%; }
.h-45 { height: 90%; }
.h-46 { height: 92%; }
.h-47 { height: 94%; }
.h-48 { height: 96%; }
.h-49 { height: 98%; }
.h-50 { height: 100%; }
.t-0 { bottom: 0%; }
.t-1 { bottom: 2%; }
.t-2 { bottom: 4%; }
.t-3 { bottom: 6%; }
.t-4 { bottom: 8%; }
.t-5 { bottom: 10%; }
.t-6 { bottom: 12%; }
.t-7 { bottom: 14%; }
.t-8 { bottom: 16%; }
.t-9 { bottom: 18%; }
.t-10 { bottom: 20%; }
.t-11 { bottom: 22%; }
.t-12 { bottom: 24%; }
.t-13 { bottom: 26%; }
.t-14 { bottom: 28%; }
.t-15 { bottom: 30%; }
.t-16 { bottom: 32%; }
.t-17 { bottom: 34%; }
.t-18 { bottom: 36%; }
.t-19 { bottom: 38%; }
.t-20 { bottom: 40%; }
.t-21 { bottom: 42%; }
.t-22 { bottom: 44%; }
.t-23 { bottom: 46%; }
.t-24 { bottom: 48%; }
.t-25 { bottom: 50%; }
.t-26 { bottom: 52%; }
.t-27 { bottom: 54%; }
.t-28 { bottom: 56%; }
.t-29 { bottom: 58%; }
.t-30 { bottom: 60%; }
.t-31 { bottom: 62%; }
.t-32 { bottom: 64%; }
.t-33 { bottom: 66%; }
.t-34 { bottom: 68%; }
.t-35 { bottom: 70%; }
.t-36 { bottom: 72%; }
.t-37 { bottom: 74%; }
.t-38 { bottom: 76%; }
.t-39 { bottom: 78%; }
.t-40 { bottom: 80%; }
.t-41 { bottom: 82%; }
.t-42 { bottom: 84%; }
.t-43 { bottom: 86%; }
.t-44 { bottom: 88%; }
.t-45 { bottom: 90%; }
.t-46 { bottom: 92%; }
.t-47 { bottom: 94%; }
.t-48 { bottom: 96%; }
.t-49 { bottom: 98%; }
.t-50 { bottom: 100%; }

/* ---------- Printing (reports print to PDF) ---------- */
@media print {
  .sidebar, .topbar, .noprint, .site-footer, .scrim { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; max-width: none; }
  .card { box-shadow: none; break-inside: avoid; }
  .hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Register on phones: one card per learner ---------- */
@media (max-width: 700px) {
  .register thead { display: none; }
  .register, .register tbody, .register tr, .register td { display: block; width: 100%; }
  .register tr { border: 1px solid var(--border); border-radius: var(--r); padding: .75rem .85rem; margin-bottom: .75rem; background: #fff; }
  .register tr:hover td { background: none; }
  .register td { border: 0; padding: .25rem 0; }
  .register .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .register .seg-opt span { width: 100%; min-width: 0; padding: .6rem .5rem; }
  .register td.note::before { content: "Note"; display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--slate-l); margin-bottom: .2rem; }
  .register td.recorded:empty { display: none; }
}

.stat .value.url { font-size: 1rem; word-break: break-all; line-height: 1.4; padding-top: .35rem; }

/* Two-step sign-in */
.qr { text-align: center; margin: 1rem 0; }
.qr img { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 6px; }
.secret.key { font-size: 1rem; letter-spacing: .08em; word-break: break-all; }
ul.codes { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
ul.codes li { font: 600 1rem ui-monospace, Consolas, monospace; background: var(--lgray); border: 1px solid var(--border);
  border-radius: 6px; padding: .45rem .6rem; text-align: center; color: var(--navy); user-select: all; }

/* Live pastoral alert pop-ups (bottom-right, stacked) */
.live-toast { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; align-items: center; gap: .75rem;
  max-width: 380px; background: var(--navy); color: #fff; border-left: 4px solid var(--gold-l); border-radius: 10px;
  padding: .85rem 1rem; box-shadow: 0 8px 30px rgba(35, 43, 80, .35); font-weight: 600; font-size: .9rem; }
.live-toast + .live-toast { bottom: 96px; }
.live-toast a { color: #fff; text-decoration: none; }
.live-toast a:hover { text-decoration: underline; }
.live-toast-close { background: none; border: 0; color: rgba(255, 255, 255, .7); font-size: 1.3rem; cursor: pointer; line-height: 1; }
@media print { .live-toast { display: none; } }