:root {
  --navy: #0b2d5c;
  --blue: #124a91;
  --gold: #d6a72c;
  --red: #b3212d;
  --bg: #f4f7fb;
  --surface: #fff;
  --line: #e1e7ef;
  --text: #172033;
  --muted: #667085;
  --ok: #16803c;
  --ok-bg: #e8f6ee;
  --bad: #c62828;
  --bad-bg: #fdecec;
  --warn: #9a6b00;
  --warn-bg: #fff4d6;
  --none-bg: #f1f4f8;
  --tab-h: 46px;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
}
button {
  font: inherit;
  cursor: pointer;
}

/* tab bar: brand · scrolling tab strip · signed-in user + logout (always visible) */
.portal-nav {
  height: var(--tab-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: linear-gradient(90deg, #08244a, var(--navy) 40%, #0f3a75);
  box-shadow: 0 2px 10px rgba(11, 45, 92, 0.25);
  position: relative;
  z-index: 10;
}
.portal-brand {
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex: none;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.portal-brand b {
  color: var(--gold);
  font-weight: 700;
}
.nav-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  padding: 0 8px;
}
.nav-tabs::-webkit-scrollbar {
  display: none;
}
.portal-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #cfd9ea;
  font-weight: 500;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
}
.portal-tab .ti {
  font-size: 14px;
  line-height: 1;
}
.portal-tab .ts,
.portal-tab .tm {
  display: none;
}
.portal-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.portal-tab[aria-selected="true"] {
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--gold);
}
.portal-tab:focus-visible,
.nav-out:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.nav-right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
/* narrower screens: short tab names, user name trimmed */
@media (max-width: 1560px) {
  .portal-tab .tl {
    display: none;
  }
  .portal-tab .ts {
    display: inline;
  }
}
@media (max-width: 900px) {
  .nav-user {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .portal-tab {
    padding: 7px 9px;
    font-size: 12px;
  }
}
/* small laptops: drop the brand text and tighten the tabs so every tab fits */
@media (max-width: 1150px) {
  .portal-brand {
    display: none;
  }
  .portal-tab {
    padding: 7px 10px;
  }
}
/* phones and tablets: icon tab bar that always fits the screen */
@media (max-width: 900px) {
  :root {
    --tab-h: 56px;
  }
  .portal-nav {
    gap: 4px;
    padding: 0 6px;
  }
  .portal-brand {
    display: none;
  }
  .nav-user {
    display: none;
  }
  .nav-out .tl2 {
    display: none;
  }
  .nav-right {
    padding-left: 6px;
  }
  .nav-tabs {
    -webkit-mask-image: none;
    mask-image: none;
    padding: 0;
    gap: 0;
  }
  .portal-tab {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding: 5px 2px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
  }
  .portal-tab .ti {
    font-size: 17px;
  }
  .portal-tab .ts {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .portal-tab .tm {
    display: inline;
  }
  .portal-tab .tm + *,
  .portal-tab .ts:has(+ .tm) {
    display: none;
  }
  .portal-tab[aria-selected="true"] {
    box-shadow: inset 0 -3px 0 var(--gold);
  }
}
.portal-frames {
  position: relative;
  height: calc(100% - var(--tab-h));
}
.portal-frames > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: none;
  background: var(--bg);
}
.portal-frames > .on {
  display: block;
}

/* dashboard */
.dash {
  overflow-y: auto;
  padding: 18px 22px 40px;
}
.dash > * {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
.dash-search {
  position: relative;
  margin-bottom: 6px;
}
#dashQ {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(11, 45, 92, 0.06);
}
#dashQ:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}
.dash-results {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(11, 45, 92, 0.16);
  max-height: 60vh;
  overflow: auto;
  padding: 6px;
}
.res {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 9px 10px;
  border-radius: 8px;
}
.res:hover,
.res:focus {
  background: #eef3fa;
  outline: none;
}
.kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #e6eefb;
  color: var(--blue);
  padding: 2px 7px;
  border-radius: 10px;
}
.kind.fac {
  background: #fdf1d6;
  color: var(--warn);
}
.dash-date {
  color: var(--muted);
  font-size: 12px;
  margin: 0 auto 14px;
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(11, 45, 92, 0.06);
  min-width: 0;
}
section.card {
  margin-bottom: 16px;
}
.card h2 {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--navy);
}
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.kpi {
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.kpi b {
  display: block;
  font-size: 20px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.kpi span {
  font-size: 11px;
  color: var(--muted);
}
.kpi.ok b {
  color: var(--ok);
}
.kpi.bad b,
.kpi.warn b {
  color: var(--bad);
}
.pbar {
  height: 8px;
  background: #e9eef5;
  border-radius: 6px;
  margin-top: 12px;
  overflow: hidden;
}
.pbar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #1c63b7);
}
.muted {
  color: var(--muted);
  font-size: 12px;
}
.card > .muted {
  margin-top: 10px;
}
.empty {
  color: var(--muted);
  padding: 14px 4px;
  line-height: 1.7;
}
.empty.good {
  color: var(--ok);
  font-weight: 500;
}
.btn {
  margin-top: 6px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
}
.lnk {
  border: 0;
  background: none;
  padding: 0;
  color: var(--blue);
  font-weight: 500;
  text-align: left;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.lnk:hover {
  color: var(--navy);
  text-decoration-style: solid;
}
.lnk.small {
  font-size: 11px;
  font-weight: 400;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
}
.chip {
  text-decoration: none;
  background: var(--none-bg);
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 12px;
}
.chip.bad {
  background: var(--bad-bg);
  color: var(--bad);
}
.tag {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--none-bg);
  color: var(--muted);
  white-space: nowrap;
}
.tag.ok {
  background: var(--ok-bg);
  color: var(--ok);
}
.tag.bad {
  background: var(--bad-bg);
  color: var(--bad);
}
.tag.warn {
  background: var(--warn-bg);
  color: var(--warn);
}
.amt {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 2px;
  border-bottom: 1px solid #eef1f6;
}
.list li:last-child {
  border-bottom: 0;
}
.when {
  font-weight: 700;
  font-size: 12px;
  color: var(--navy);
  min-width: 64px;
}
.what {
  color: var(--muted);
  font-size: 12px;
}

/* timetable / course tables */
.tt-wrap {
  overflow-x: auto;
}
.tt {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
}
.tt th,
.tt td {
  border: 1px solid #e6ebf2;
  padding: 7px 8px;
  vertical-align: top;
  text-align: left;
  font-size: 12px;
}
.tt thead th {
  background: #f1f5f9;
  color: var(--navy);
  white-space: nowrap;
}
.tt tbody th {
  background: #fafbfd;
  white-space: nowrap;
}
.tt-slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  margin-bottom: 4px;
  border-left: 3px solid #c4ccd8;
  background: var(--none-bg);
}
.tt-slot.ok {
  background: var(--ok-bg);
  border-left-color: var(--ok);
}
.tt-slot.bad {
  background: var(--bad-bg);
  border-left-color: var(--bad);
}
.tt-slot .tag {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.7);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.legend .tt-slot {
  flex-direction: row;
  font-size: 11px;
  margin: 0;
  padding: 3px 8px;
}

@media (max-width: 600px) {
  .dash {
    padding: 12px 16px 32px;
  }
}

/* a signed-in student sees only their own details */
body.student-mode
  .portal-tab:not([data-app="dashboard"]):not([data-app="students"]):not([data-app="results"]):not(
    [data-app="notices"]
  ) {
  display: none;
}

/* nav: signed-in user + logout */
[hidden] {
  display: none !important;
}
.nav-user {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.nav-out {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.nav-out:hover {
  background: rgba(255, 255, 255, 0.12);
}
body.signed-out .portal-tab,
body.signed-out .nav-out {
  display: none;
}

/* sign-in screen */
.signin {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(135deg, #0b2d5c, #124a91 60%, #1c63b7);
}
body.signed-out .signin {
  display: flex;
}
.signin-box {
  background: #fff;
  border-radius: 16px;
  border-top: 4px solid var(--gold);
  width: 100%;
  max-width: 400px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}
.signin-h {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}
.signin-h b {
  font-size: 18px;
  color: var(--navy);
}
.signin-h span {
  font-size: 12px;
  color: var(--muted);
}
.ltabs {
  display: flex;
  gap: 4px;
  background: #eef2f7;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 12px;
}
.ltab {
  flex: 1;
  border: 0;
  background: none;
  padding: 8px;
  border-radius: 8px;
  font-weight: 600;
  color: #3d4a60;
}
.ltab.active {
  background: var(--navy);
  color: #fff;
}
.fl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #475467;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}
.fl input,
.fl select {
  font: inherit;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 10px;
}
.si-err {
  color: var(--red);
  font-size: 12px;
  font-weight: 600;
  min-height: 18px;
  margin-bottom: 6px;
}
.si-note {
  margin-top: 10px;
}
.btn.wide {
  width: 100%;
  padding: 10px;
  margin-top: 0;
}

/* idle warning */
.idle-warn {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 10px;
  align-items: center;
  background: #fff4d6;
  color: #7a5200;
  border: 1px solid #f0d993;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(11, 45, 92, 0.18);
}
.idle-warn button {
  border: 0;
  background: var(--navy);
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
}

/* pages: backups, users & access */
.page-h {
  max-width: 1500px;
  margin: 0 auto 14px;
}
.page-h h1 {
  margin: 0;
  font-size: 20px;
  color: var(--navy);
}
.page-h p {
  margin: 4px 0 0;
}
.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.toolbar-row select {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 10px;
  font: inherit;
}
.btn.ghost {
  background: #fff;
  color: var(--blue);
}
.btn.danger {
  background: var(--bad-bg);
  border-color: #f3c2c2;
  color: var(--bad);
}
.btn.sm {
  padding: 4px 9px;
  font-size: 12px;
  margin-top: 0;
}
.toolbar-row .btn {
  margin-top: 0;
}
.tt td.c,
.tt th.c {
  text-align: center;
}
.tt.access td,
.tt.access th {
  white-space: nowrap;
}
.tt.access select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 7px;
  font: inherit;
  font-size: 12px;
}
.acc-box {
  width: 17px;
  height: 17px;
  accent-color: var(--blue);
}
.row-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.row-inline select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
}
#bkStatus .kpi b {
  font-size: 15px;
}

/* portal dialog */
.pdlg {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(11, 45, 92, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pdlg-box {
  background: #fff;
  border-radius: 14px;
  border-top: 4px solid var(--gold);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: auto;
  padding: 16px 18px;
}
.pdlg-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pdlg-h b {
  color: var(--navy);
  font-size: 16px;
}
.pdlg-h button {
  border: 0;
  background: #f1f4f8;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
.chkrow {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eef1f6;
}
.acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.pdlg hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 14px 0;
}

/* backups: one section per app */
.bk-tabs {
  max-width: 1500px;
  margin: 0 auto 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bk-tab {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 600;
}
.bk-tab.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
#app-backups section {
  max-width: 1500px;
  margin: 0 auto;
}
.toolbar-row input[type="password"] {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 10px;
  font: inherit;
  min-width: 240px;
}
.btn.restore {
  background: #16803c;
  border-color: #16803c;
  color: #fff;
}

/* dashboard: reminders */
.rem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 16px;
}
.rem-col h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--navy);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.rem {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eef1f6;
  font-size: 13px;
}
.rem:last-child {
  border-bottom: 0;
}
.rem .who {
  font-weight: 600;
}
.rem .acts2 {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.rem a.btn {
  text-decoration: none;
  margin-top: 0;
}

/* dashboard: important now, suggestions & reports */
.imp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 8px;
}
.imp {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-left: 4px solid #c4ccd8;
  border-radius: 10px;
  padding: 9px 12px;
  background: #fff;
}
.imp.high {
  border-left-color: var(--bad);
  background: #fffafa;
}
.imp.mid {
  border-left-color: var(--gold);
  background: #fffdf5;
}
.imp.ok {
  border-left-color: var(--ok);
}
.imp b {
  display: block;
  font-size: 13px;
}
.imp .muted {
  display: block;
}
.imp .lnk {
  margin-top: 3px;
  font-size: 12px;
}
.fb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px;
}
.fb-col h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--navy);
}
.fb-item {
  border-bottom: 1px solid #eef1f6;
  padding: 8px 0;
}
.fb-item:last-child {
  border-bottom: 0;
}
.fb-item .txt {
  font-size: 13px;
  margin: 3px 0;
  white-space: pre-wrap;
}
.fb-item .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

/* users & access: create a login */
.nu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.chk {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
.tt.access .btn {
  margin-top: 0;
}

/* rights grid: tick-all row */
.tt.access tr.rg-all th,
.tt.access tr.rg-all td {
  background: #eef3fa;
}

/* popups, forgot password, field rights, toast */
.pd-acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.pd-acts .btn {
  margin-top: 0;
  padding: 8px 14px;
}
.pd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 12px;
}
.pdlg-box p {
  font-size: 13px;
  line-height: 1.45;
}
.si-forgot {
  display: block;
  margin: 10px auto 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rg-sub {
  margin: 18px 0 4px;
  font-size: 15px;
  color: var(--navy);
}
.tt.rg-fields {
  min-width: 0;
  max-width: 640px;
}
.tt.rg-fields td.c {
  width: 110px;
}
.tt.access tr.rg-grp th,
.tt.access tr.rg-grp td {
  background: #eef3fa;
  color: var(--navy);
  font-weight: 700;
}
.ptoast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
  z-index: 80;
}
.ptoast.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#spQ {
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  background: #fff;
}
#spQ:focus {
  outline: 2px solid #c9d8ef;
  border-color: var(--blue);
}
.req-star {
  display: none;
  color: var(--red);
  font-weight: 700;
  margin-left: 2px;
}
.miss .req-star {
  display: inline;
}
.fl.miss {
  color: var(--red);
}
.fl.miss input,
.fl.miss select {
  border-color: var(--red);
  background: #fff5f5;
  box-shadow: 0 0 0 3px rgba(179, 33, 45, 0.1);
}

/* 🔔 notifications */
.nav-bell {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #fff;
  border-radius: 8px;
  width: 34px;
  height: 30px;
  font-size: 15px;
  line-height: 1;
}
.nav-bell:hover {
  background: rgba(255, 255, 255, 0.12);
}
body.signed-out .nav-bell {
  display: none;
}
.nb-n {
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  border: 2px solid var(--navy);
}
.nt-panel {
  position: fixed;
  top: calc(var(--tab-h) + 6px);
  right: 10px;
  z-index: 70;
  width: min(420px, calc(100vw - 20px));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(11, 45, 92, 0.22);
  overflow: hidden;
}
.nt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.nt-head b {
  color: var(--navy);
  font-size: 15px;
}
.nt-read {
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
}
.nt-list {
  overflow: auto;
}
.nt-item {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #eef1f6;
  background: #fff;
  padding: 10px 14px;
}
.nt-item:hover {
  background: #f5f8fd;
}
.nt-item.new {
  background: #f3f7ff;
}
.nt-item.new .nt-t {
  font-weight: 600;
}
.nt-ic {
  font-size: 18px;
  line-height: 1.3;
  flex: none;
}
.nt-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.nt-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nt-from {
  display: inline-block;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
}
.nt-item.red .nt-from {
  background: var(--bad);
}
.nt-when {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.nt-t {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.nt-item.new .nt-when::before {
  content: "● ";
  color: #2f6fed;
}
.nt-empty {
  padding: 28px 14px;
  text-align: center;
  color: var(--muted);
}
@media (max-width: 600px) {
  .portal-tab {
    font-size: 9.5px;
    letter-spacing: -0.1px;
    padding: 5px 1px;
  }
  .nav-bell {
    width: 30px;
  }
  .nav-right {
    gap: 5px;
  }
}

/* 👨‍🏫 a signed-in faculty member sees only their own dashboard */
body.faculty-mode .portal-tab:not([data-app="mydash"]):not([data-app="notices"]) {
  display: none !important;
}
.fd-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.fd-month {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fd-month b {
  min-width: 130px;
  text-align: center;
  color: var(--navy, #0b2d5c);
}
.fd-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 10px 0 14px;
}
.fd-kpi {
  background: #fff;
  border: 1px solid #e1e7ef;
  border-top: 3px solid #d6a72c;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fd-kpi b {
  font-size: 22px;
  color: #0b2d5c;
}
.fd-kpi small {
  color: #667085;
  font-weight: 600;
}
.fd-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fd-msg {
  border: 1px solid #e1e7ef;
  border-left: 4px solid #16803c;
  border-radius: 10px;
  padding: 9px 12px;
  background: #fbfdfb;
}
.fd-msg.cut {
  border-left-color: #c62828;
  background: #fffafa;
}
.fd-msg.warn {
  border-left-color: #d6a72c;
  background: #fffdf5;
}
.fd-msg-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 13px;
}
.fd-note {
  margin-top: 5px;
  color: #172033;
}
.fd-note.small {
  font-size: 12px;
  color: #475569;
}
.fd-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eef1f6;
  color: #475467;
  white-space: nowrap;
}
.fd-pill.ok {
  background: #e8f6ee;
  color: #16803c;
}
.fd-pill.cut {
  background: #fdecec;
  color: #c62828;
}
.fd-pill.warn {
  background: #fff4d6;
  color: #9a6b00;
}
.fd-table td {
  vertical-align: top;
}
.fd-lec {
  margin-bottom: 4px;
}
.fd-t {
  font-size: 12px;
  color: #667085;
  font-weight: 600;
}
.fd-topic {
  font-size: 12.5px;
  color: #124a91;
  margin: 2px 0 0 4px;
}
.fd-pw {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.fd-pw .fl {
  flex: 1 1 180px;
}
.fl-phone {
  width: 150px;
}
@media (max-width: 760px) {
  .fd-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .fd-table thead {
    display: none;
  }
  .fd-table,
  .fd-table tbody,
  .fd-table tr,
  .fd-table td {
    display: block;
    width: 100%;
  }
  .fd-table tr {
    border: 1px solid #e1e7ef;
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 8px 10px;
  }
  .fd-table td {
    border: 0 !important;
    padding: 3px 0 !important;
  }
  .fd-table td[data-l]::before {
    content: attr(data-l);
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #667085;
  }
}

/* 👨‍🏫 faculty dashboard: tabs, days as accordions, add-class form */
.fd-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: #e9eef5;
  border-radius: 12px;
  overflow-x: auto;
  margin-bottom: 10px;
}
.fd-tab {
  flex: 1 0 auto;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 14px;
  border-radius: 9px;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
}
.fd-tab.active {
  background: #0b2d5c;
  color: #fff;
}
.fd-day {
  border: 1px solid #e1e7ef;
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}
.fd-day > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 12px;
  background: #f6f9fd;
  border-left: 4px solid #0b2d5c;
  font-size: 13.5px;
}
.fd-day > summary::-webkit-details-marker {
  display: none;
}
.fd-day > summary::before {
  content: "▸";
  color: #0b2d5c;
  font-weight: 800;
}
.fd-day[open] > summary::before {
  content: "▾";
}
.fd-day-b {
  padding: 10px 14px 12px;
}
.fd-rem {
  margin-top: 6px;
  font-size: 13px;
  color: #334155;
}
.fd-del {
  border: 1px solid #f2c4c4;
  background: #fff;
  color: #c62828;
  border-radius: 8px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  cursor: pointer;
}
.fd-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.fd-form input[hidden] {
  display: none !important;
}
.fd-form .fl input,
.fd-form .fl select {
  width: 100%;
}
.fd-panel textarea {
  width: 100%;
}
.fd-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
@media (max-width: 760px) {
  .fd-form {
    grid-template-columns: 1fr 1fr;
  }
  .fd-tab {
    padding: 8px 10px;
    font-size: 12.5px;
  }
}
.fd-row {
  border: 1px solid #e1e7ef;
  border-radius: 12px;
  padding: 8px 12px 4px;
  margin-bottom: 10px;
  background: #fbfcfe;
}
.fd-row-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  color: #0b2d5c;
}
.fd-form-top {
  grid-template-columns: 1fr 3fr;
  margin-bottom: 10px;
}
.fd-row input[hidden] {
  display: none !important;
}
@media (max-width: 760px) {
  .fd-form-top {
    grid-template-columns: 1fr;
  }
}

/* ↺ Reset (Backups tab, Super Admin only) */
.bk-reset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-left: 4px solid #c62828;
}
.bk-reset .muted {
  font-size: 13px;
  margin-top: 2px;
  max-width: 820px;
}
.rs-ovl {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.rs-box {
  background: #fff;
  border-radius: 14px;
  border-top: 5px solid #c62828;
  padding: 18px 20px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.rs-box h3 {
  margin: 0 0 8px;
  color: #b3212d;
}
.rs-box p {
  margin: 0 0 8px;
  font-size: 13px;
}
.rs-f {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 700;
  font-size: 13px;
  margin-top: 6px;
}
.rs-f input {
  padding: 9px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: inherit;
}
.rs-err {
  color: #c62828;
  font-size: 12px;
  font-weight: 600;
  min-height: 18px;
  margin-top: 6px;
}
.rs-acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 🔔 Notifications tab */
.portal-tab .nb-tab {
  margin-left: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
  text-align: center;
}
.bk-tab .cnt:not(:empty) {
  margin-left: 4px;
  background: #e5484d;
  color: #fff;
  border-radius: 9px;
  padding: 0 6px;
  font-size: 11px;
}
#app-notices > *,
#app-results > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.nt-page {
  padding: 0;
  overflow: hidden;
}
.nt-page .nt-item {
  padding: 12px 16px;
}
.nt-form h2,
.rs-form h2 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--navy);
}
.nt-form .fl,
.rs-form .fl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 13px;
}
.nt-form input,
.nt-form textarea,
.nt-form select,
.rs-form input,
.rs-form select,
#rsBatch {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 400;
}
.nc-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.nc-row .btn {
  margin-bottom: 10px;
}
.nc-ok {
  color: var(--ok);
  font-weight: 600;
  font-size: 13px;
}
.nc-item.new {
  border-left: 4px solid #2f6fed;
}
.nc-item.focus {
  box-shadow: 0 0 0 3px rgba(214, 167, 44, 0.6);
}
.nc-h {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.nc-h b {
  font-size: 15px;
  color: var(--navy);
}
.nc-to {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}
.nc-body {
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.nc-meta {
  margin-top: 8px;
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* 📊 Results */
.rs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.rs-sub {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.rs-sub .rs-sn {
  flex: 1;
  min-width: 0;
}
.rs-sub .rs-sm {
  width: 120px;
}
.rs-title {
  color: var(--navy);
  font-size: 16px;
}
.rs-marks input.rs-mk {
  width: 64px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px;
  font: inherit;
}
.rs-marks input.rs-mk.miss {
  border-color: var(--bad);
  background: var(--bad-bg);
}
.rs-marks td.c,
.rs-marks th.c {
  text-align: center;
}
.rs-card-h {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.rs-card-h b {
  font-size: 16px;
  color: var(--navy);
}
.rs-card .kpis {
  margin-top: 10px;
}
.nc-item,
.nt-form,
.rs-card {
  margin-bottom: 12px;
}
.tt.rs-mini {
  min-width: 0;
}

/* ☰ More + 👤 account menus in the top bar */
.nav-more {
  flex: none;
  display: flex;
}
.nav-more-btn,
.nav-acct-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #cfd9ea;
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
}
.nav-more-btn .ts {
  display: inline;
}
.nav-more-btn:hover,
.nav-acct-btn:hover,
.nav-more-btn[aria-expanded="true"],
.nav-acct-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.nav-more-btn.on {
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--gold);
}
.nav-acct-btn {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 6px 10px;
}
.nav-acct-btn.on {
  border-color: var(--gold);
}
.nm-c {
  font-size: 10px;
  opacity: 0.8;
}
.nav-menu {
  position: fixed;
  z-index: 80;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(11, 45, 92, 0.22);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-menu[hidden] {
  display: none !important;
}
.nav-menu .portal-tab,
.nav-menu .nav-out {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  text-align: left;
}
.nav-menu .portal-tab .tl {
  display: inline !important;
}
.nav-menu .portal-tab .ts,
.nav-menu .portal-tab .tm {
  display: none !important;
}
.nav-menu .portal-tab:hover,
.nav-menu .nav-out:hover {
  background: #f1f5fb;
  color: var(--navy);
}
.nav-menu .portal-tab[aria-selected="true"] {
  background: #eaf1fc;
  color: var(--navy);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--gold);
}
.nav-menu .portal-tab.sub {
  padding-left: 30px;
}
.nav-menu .nav-out {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  color: var(--bad);
  font-weight: 600;
  background: none;
}
.nm-who {
  display: flex;
  flex-direction: column;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.nm-who b {
  color: var(--navy);
  font-size: 14px;
}
.nm-who span {
  color: var(--muted);
  font-size: 12px;
}
.nm-group {
  padding: 8px 12px 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nav-menu .portal-tab .nb-tab {
  margin-left: auto;
}
body.signed-out .nav-more,
body.signed-out .nav-acct {
  display: none;
}
.nav-menu .portal-tab {
  flex: none;
  min-width: 0;
}
@media (max-width: 900px) {
  .nav-more {
    flex: 1 1 0;
    min-width: 0;
  }
  .nav-more-btn {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding: 5px 2px;
    font-size: 10px;
    font-weight: 600;
  }
  .nav-more-btn .ti {
    font-size: 17px;
    line-height: 1;
  }
  .nav-more-btn .nm-c {
    display: none;
  }
  .nav-acct-btn::before {
    content: "👤";
  }
  .nav-acct-btn {
    padding: 6px 8px;
  }
}
.rs-sub label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.rs-sub .rs-sm,
.rs-sub .rs-smin {
  width: 80px;
}
.rs-marks input.rs-mk.low {
  color: var(--bad);
  font-weight: 700;
}
.rs-an-card summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
}
.rs-an {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
  gap: 16px;
  margin-top: 10px;
}
.rs-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.rs-top b {
  color: var(--navy);
}
.rs-memo-wrap {
  margin-bottom: 18px;
}
.rs-memo-wrap .memo {
  margin: 0;
}
@media (max-width: 700px) {
  .rs-an {
    grid-template-columns: 1fr;
  }
  .rs-sub {
    flex-wrap: wrap;
  }
  .rs-sub .rs-sn {
    flex-basis: 100%;
  }
}
.nav-menu .nav-out .tl2 {
  display: inline !important;
  margin-left: 6px;
}
/* 📅 events */
.nc-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 3px 6px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  line-height: 1.1;
}
.nc-date b {
  font-size: 16px;
}
.nc-up {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  border-left: 4px solid var(--gold);
}
.nc-up > b {
  color: var(--navy);
}
.nc-up-i {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
/* 📊 dashboard: top row, ⚙ Customise, student home */
.dash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dash-top .dash-date {
  margin: 0;
}
.dash-cust .dc-h {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.dash-cust .dc-h b {
  color: var(--navy);
}
.dc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 14px;
  margin-bottom: 10px;
}
#app-dashboard.dash-stu > :not(#dashStu):not(.dash-top) {
  display: none !important;
}
#app-dashboard.dash-stu #dashCust {
  display: none;
}
#dashStu > * {
  margin-bottom: 16px;
}
.sh-hello {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sh-hello h2 {
  margin: 0 0 6px;
}
.sh-hello > div:nth-child(2) {
  flex: 1;
  min-width: 220px;
}
.sh-av {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
}
.sh-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 13px;
}
.sh-info span {
  color: var(--muted);
  margin-right: 4px;
}
.sh-todo {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.sh-room {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sh-room b {
  font-size: 22px;
  color: var(--navy);
}
/* 👨‍🏫 My days: calendar grid + day table */
.fd-vsw {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.fdg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11.5px;
  margin-bottom: 8px;
  color: var(--muted);
}
.fdg-legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}
.fdg-legend .ok::before,
.fdg-c.ok {
  background: var(--ok-bg);
}
.fdg-legend .wait::before,
.fdg-c.wait {
  background: var(--warn-bg);
}
.fdg-legend .att::before,
.fdg-c.att {
  background: #e8efff;
}
.fdg-legend .cut::before,
.fdg-c.cut {
  background: var(--bad-bg);
}
.fdg {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.fdg-w {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.fdg-c {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fdg-c.empty {
  border: 0;
  background: none;
  cursor: default;
}
.fdg-c b {
  font-size: 14px;
  color: var(--navy);
}
.fdg-c span {
  font-size: 10.5px;
  color: var(--text);
}
.fdg-c.today {
  border-color: var(--gold);
  border-width: 2px;
}
.fdg-c.sel {
  outline: 3px solid var(--navy);
  outline-offset: -1px;
}
.fdt {
  margin-top: 14px;
}
.fdt-h {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.fdt-h b {
  font-size: 16px;
  color: var(--navy);
}
.fdt-tb {
  min-width: 640px;
}
.fdt-tb input {
  width: 100%;
  min-width: 140px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 8px;
  font: inherit;
}
.fdt-t {
  white-space: nowrap;
  font-weight: 600;
}
@media (max-width: 600px) {
  .fdg-c {
    min-height: 46px;
    padding: 4px;
  }
  .fdg-c span {
    font-size: 9px;
  }
}
/* 🕘 the three sessions of a faculty day */
.fd-sess {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.fd-ses {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
}
.fd-ses b {
  color: var(--navy);
  font-size: 14px;
}
.fd-ses.open {
  border-color: #2f6fed;
  background: #f3f7ff;
}
.fd-ses.done {
  border-color: var(--ok);
  background: var(--ok-bg);
}
.fd-ses.later {
  opacity: 0.65;
}
.fd-h3 {
  margin: 18px 0 8px;
  font-size: 15px;
  color: var(--navy);
}
/* 📒 student-wise results */
.rs-sw td.c,
.rs-sw th.c {
  text-align: center;
}
.rs-sw .rs-fail b,
.rs-sw td.rs-fail {
  color: var(--bad);
}
.rs-sw-r {
  cursor: pointer;
}
.rs-sw-r:hover td {
  background: #f5f8fd;
}
.rs-sw-d td {
  background: #f8fafc;
  font-size: 12.5px;
  line-height: 1.6;
}
.fd-ses.closed {
  background: #f3f4f6;
  color: var(--muted);
}
/* 🎓 portal-wide batch filter */
.nav-batch {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  border-radius: 8px;
  padding: 5px 6px;
  font: inherit;
  font-size: 12px;
  max-width: 140px;
}
.nav-batch option {
  color: var(--text);
}
.nav-batch.on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  font-weight: 700;
}
body.signed-out .nav-batch {
  display: none;
}
@media (max-width: 600px) {
  .nav-batch {
    max-width: 96px;
    font-size: 10.5px;
    padding: 4px 2px;
  }
}
/* phones: icons only (the names are in each tab's tooltip) – room for 🎓 batch, 🔔 and 👤 */
@media (max-width: 600px) {
  .portal-tab .ts,
  .portal-tab .tm,
  .nav-more-btn .ts {
    display: none !important;
  }
  .portal-tab .ti,
  .nav-more-btn .ti {
    font-size: 19px;
  }
  .portal-tab,
  .nav-more-btn {
    padding: 8px 1px;
  }
}

/* ☰ phones and tablets: burger button + side menu with every page (full names) */
.nav-burger,
.nav-cur,
.nav-dhead,
.nav-shade {
  display: none;
}
@media (max-width: 900px) {
  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .nav-burger:hover,
  .nav-burger[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.12);
  }
  .nav-burger:focus-visible,
  .nav-dclose:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
  }
  .nav-cur {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 6px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
  }
  .nav-cur span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-cur .ti {
    font-size: 17px;
  }
  body.signed-out .nav-burger,
  body.signed-out .nav-cur {
    display: none;
  }
  .portal-nav .nav-tabs {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: auto;
    width: min(300px, 84vw);
    z-index: 95;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 0 10px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-105%);
    visibility: hidden;
    transition:
      transform 0.22s ease,
      visibility 0.22s;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
  }
  body.nav-open .portal-nav .nav-tabs {
    transform: none;
    visibility: visible;
  }
  .nav-dhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    padding: 14px 4px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
  .nav-dbrand {
    color: var(--navy);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.08em;
  }
  .nav-dbrand b {
    color: #b7861a;
    font-weight: 700;
  }
  .nav-dclose {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #f1f5fb;
    color: var(--navy);
    font-size: 16px;
    cursor: pointer;
  }
  .nav-tabs .portal-tab,
  .nav-tabs .nav-menu .portal-tab {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text);
    border-radius: 10px;
    box-shadow: none;
  }
  .nav-tabs .portal-tab .ti {
    font-size: 18px;
    width: 24px;
    text-align: center;
  }
  .nav-tabs .portal-tab .tl {
    display: inline !important;
  }
  .nav-tabs .portal-tab .ts,
  .nav-tabs .portal-tab .tm {
    display: none !important;
  }
  .nav-tabs .portal-tab .nb-tab {
    margin-left: auto;
  }
  .nav-tabs .portal-tab:hover {
    background: #f1f5fb;
    color: var(--navy);
  }
  .nav-tabs .portal-tab[aria-selected="true"] {
    background: #eaf1fc;
    color: var(--navy);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--gold);
  }
  .nav-tabs .nav-more {
    flex: none;
    flex-direction: column;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
  .nav-tabs .nav-more-btn,
  .nav-tabs .nav-more-btn.on {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 12px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: none;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
  }
  .nav-tabs .nav-more-btn .ti {
    font-size: 13px;
  }
  .nav-tabs .nav-more-btn .ts {
    display: inline !important;
  }
  .nav-tabs .nav-menu {
    position: static;
    min-width: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  .nav-shade {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 94;
    background: rgba(8, 20, 40, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  body.nav-open .nav-shade {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .portal-nav .nav-tabs,
  .nav-shade {
    transition: none;
  }
}

/* 📊 dashboard on phones: tighter cards, two-column number tiles, short "all clear" lines */
@media (max-width: 600px) {
  .dash {
    padding: 12px 12px 28px;
  }
  .dash-search {
    margin-bottom: 8px;
  }
  #dashQ {
    padding: 11px 14px;
    font-size: 14px;
    border-radius: 12px;
  }
  .dash-top {
    margin-bottom: 12px;
    flex-wrap: nowrap;
  }
  .dash-top .dash-date {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-top #dashCust {
    flex: none;
    margin: 0;
    padding: 5px 10px;
    font-size: 12px;
  }
  .dash-grid {
    gap: 12px;
    margin-bottom: 12px;
  }
  .dash .card {
    padding: 14px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(11, 45, 92, 0.05);
  }
  .dash section.card {
    margin-bottom: 12px;
  }
  .dash .card h2 {
    font-size: 15px;
    margin-bottom: 10px;
  }
  .dash .kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  /* an odd last tile fills the row, number and name side by side */
  .dash .kpis > .kpi:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .dash .kpi {
    padding: 9px 11px;
    border-radius: 10px;
  }
  .dash .kpi b {
    font-size: 18px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .dash .kpi span {
    font-size: 11.5px;
    line-height: 1.3;
  }
  .dash .empty {
    padding: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
  }
  .dash .chips {
    margin-top: 10px;
    gap: 5px;
  }
  .dash .chip {
    font-size: 11.5px;
  }
  /* reminders and suggestions: one block under the other, with a thin line between */
  .rem-grid,
  .fb-grid {
    gap: 0;
  }
  .rem-col + .rem-col,
  .fb-col + .fb-col {
    border-top: 1px solid #eef1f6;
    margin-top: 10px;
    padding-top: 10px;
  }
  .rem-col h3,
  .fb-col h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-bottom: 4px;
    justify-content: space-between;
  }
  .rem .acts2 {
    margin-left: 0;
    width: 100%;
  }
  .imp {
    padding: 9px 11px;
  }
  /* batches table: smaller, scrolls sideways inside the card */
  #cardCourses .tt-wrap {
    overflow-x: auto;
    margin: 0 -4px;
  }
  #cardCourses .tt {
    font-size: 12px;
  }
  #cardCourses .tt th,
  #cardCourses .tt td {
    padding: 6px 8px;
    white-space: nowrap;
  }
}

/* 👨‍🏫 faculty dashboard on phones: icon beside the number, odd last tile full width, all tabs visible */
@media (max-width: 600px) {
  .fd-kpis {
    gap: 8px;
    margin: 8px 0 12px;
  }
  .fd-kpi {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    padding: 9px 11px;
    border-radius: 10px;
  }
  .fd-kpi > span {
    grid-row: span 2;
    font-size: 18px;
  }
  .fd-kpi b {
    font-size: 18px;
    line-height: 1.2;
  }
  .fd-kpi small {
    font-size: 11.5px;
    line-height: 1.25;
  }
  .fd-kpis > .fd-kpi:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .fd-tabs {
    flex-wrap: wrap;
    overflow: visible;
  }
  .fd-tab {
    flex: 1 1 30%;
    padding: 8px 6px;
    font-size: 12.5px;
  }
}