:root {
  --blue: #2952a3;
  --blue-dark: #1f3d7a;
  --orange: #e8802e;
  --ink: #1c2430;
  --ink-muted: #5b6472;
  --border: #dde2ea;
  --bg: #f4f6fa;
  --success-bg: #e7f6ec;
  --success-text: #1f7a3d;
  --error-bg: #fbeaea;
  --error-text: #b3261e;
  --radius: 10px;

  /* admin-only additions: a deeper navy + muted academic gold for the
     seal/header, kept separate from the public form's palette above */
  --navy: #16233d;
  --navy-2: #223257;
  --gold: #b8862f;
  --gold-soft: #f6ecd9;
  --admin-bg: #eef1f7;
  --display-font: "Source Serif 4", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}

/* ---------- public form ---------- */
/* Logo banner — only rendered when an admin has uploaded one (see
   site_logo_url() in config/db.php). White strip so PNG logos with
   transparent backgrounds stay legible, sits above .site-header. */
.site-logo-wrap {
  background: #fff;
  padding: 10px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.site-logo-wrap img { max-width: 100%; max-height: 90px; height: auto; }

/* full-width site chrome — sits outside .form-page's 480px cap, so it
   spans edge-to-edge on desktop, same pattern as .admin-topbar below */
.site-header {
  background: var(--blue);
  color: #fff;
  padding: 18px 16px;
  text-align: center;
}
.site-header h1 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; max-width: 640px; margin-left: auto; margin-right: auto; }
.site-header .sub { margin: 4px 0 0; font-size: 13px; opacity: 0.9; }

.site-footer {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: var(--ink-muted);
}

.form-page {
  padding: 12px;
  max-width: 480px;
  margin: 0 auto;
}

.form-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}

.form-header {
  background: var(--blue);
  color: #fff;
  padding: 18px 16px;
  text-align: center;
}
.form-header h1 { margin: 0; font-size: 18px; font-weight: 600; }
.form-header .sub { margin: 4px 0 0; font-size: 13px; opacity: 0.9; }

form { padding: 16px; }

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}
fieldset legend {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--blue);
  padding: 0 0 8px;
  width: 100%;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}
.req { color: var(--error-text); margin-left: 2px; }
.field-error {
  color: var(--error-text);
  font-size: 12px;
  font-weight: 600;
  margin: -6px 0 10px;
  min-height: 14px;
}
.field-success {
  color: var(--success-text);
  font-size: 12px;
  font-weight: 600;
  margin: -6px 0 10px;
}
.otp-row {
  display: flex;
  gap: 8px;
  margin-top: 5px;
}
.otp-row input { margin-top: 0; flex: 1; }
.btn-otp {
  white-space: nowrap;
  padding: 0 14px;
  border: 1px solid var(--blue);
  background: #fff;
  color: var(--blue);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-otp:disabled {
  border-color: var(--border);
  color: var(--ink-muted);
  cursor: not-allowed;
}

input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=file], input[type=password], select {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(41,82,163,0.15);
}
select:disabled { background: #f1f3f6; color: var(--ink-muted); }

.fee-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--success-bg);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--success-text);
}
.fee-box strong { font-size: 17px; }

.profile-card {
  background: #f5f7fa;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 4px;
  margin-bottom: 18px;
}
.profile-card .profile-card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0 0 10px;
}
.profile-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 20px;
}
@media (min-width: 640px) {
  .profile-card-grid { grid-template-columns: 1fr 1fr; }
}
.profile-card-item { margin-bottom: 10px; }
.profile-card-item span {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.profile-card-item strong { font-size: 14px; color: var(--ink); }
.profile-card-hint {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.btn-primary, .btn-secondary {
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-secondary { background: var(--orange); color: #fff; }

.alert-success, .alert-error {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}
.alert-success { background: var(--success-bg); color: var(--success-text); }
.alert-error { background: var(--error-bg); color: var(--error-text); }

/* Neutral "how this works" explainer — used on the student login page so
   first-time visitors understand register -> apply -> pay -> receipt
   before they hit the form. Not a status alert, so it gets its own
   quieter blue-tinted style rather than reusing alert-success/error. */
.info-box {
  margin: 12px 16px 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #f7f9fd;
  font-size: 13px;
}
.info-box summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--blue);
  list-style: none;
}
.info-box summary::-webkit-details-marker { display: none; }
.info-box summary::before { content: "ⓘ "; }
.info-box ol {
  margin: 10px 0 2px;
  padding-left: 18px;
}
.info-box li { margin-bottom: 6px; color: var(--ink); }
.info-box li:last-child { margin-bottom: 0; }

/* ---------- receipt print / download actions ---------- */
.receipt-actions {
  display: flex;
  gap: 10px;
  padding: 16px 16px 0;
}
.receipt-actions button { flex: 1; }

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  .no-print, .receipt-actions, .site-header { display: none !important; }
  .form-page { max-width: 100%; padding: 0; }
  .form-card { border: none; box-shadow: none; }
}

/* ================================================================
   ADMIN PANEL — mobile-first redesign
   Signature element: a circular "AU" seal (navy ring + gold inner
   ring) in the top bar, echoing a real university seal — the one
   deliberate flourish. Everything else stays quiet and functional,
   since this is a staff data-entry tool, not a marketing page.
   ================================================================ */

body.admin-body { background: var(--admin-bg); }

.admin-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  padding: 10px 16px;
  color: #fff;
}
.admin-seal-link {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
.admin-seal {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(255,255,255,0.06);
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}
/* Uploaded logo replaces the "AU" text seal above once one is set — kept
   rectangular (not forced into the circle) since real letterhead/crest
   logos are rarely square. */
.admin-seal-img {
  border-radius: 4px;
  border: none;
  background: #fff;
  padding: 3px;
  object-fit: contain;
}
.admin-wordmark {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.admin-wordmark strong {
  font-family: var(--display-font);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-wordmark span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-soft);
}
.admin-logout {
  grid-column: 3;
  justify-self: end;
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}
.admin-logout:hover { background: rgba(255,255,255,0.12); }

.admin-wrap, .login-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}
.login-wrap { padding-top: 48px; }
.admin-wrap h1, .login-wrap h1 {
  font-family: var(--display-font);
  font-size: 21px;
  font-weight: 700;
  margin: 4px 0 16px;
  color: var(--navy);
}
.login-wrap { max-width: 380px; }
.login-wrap .admin-seal { width: 52px; height: 52px; font-size: 17px; margin: 0 auto 14px; color: var(--navy); border-color: var(--gold); background: var(--gold-soft); }
/* Logos are usually wider than tall (letterhead banners, crests with
   wordmarks) so give the image variant room to breathe instead of
   squashing it into the 52x52 circle sized for the "AU" text mark. */
.login-wrap .admin-seal-img { width: auto; max-width: 220px; height: auto; max-height: 64px; border-radius: 4px; }
.login-wrap h1 { text-align: center; }

.back-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  margin-bottom: 10px;
}
.hint { font-size: 13px; color: var(--ink-muted); }

.section-heading {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 26px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.section-heading:first-of-type { margin-top: 4px; }

.settings-hint {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* stat strip on the dashboard */
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.stat-card {
  flex: 1 1 160px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.stat-card .stat-num {
  display: block;
  font-family: var(--display-font);
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
}
.stat-card .stat-label { font-size: 12px; color: var(--ink-muted); }
.stat-card a { font-size: 12px; font-weight: 600; color: var(--blue); text-decoration: none; }

.master-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.master-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.master-tile:hover { border-color: var(--blue); transform: translateY(-1px); }
.master-tile .tile-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 13px;
}
.master-tile.tile-settings .tile-badge { background: var(--gold); color: #fff; }

.card-form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .card-form { grid-template-columns: 1fr 1fr; align-items: end; }
  .card-form button, .card-form .cancel-link { grid-column: 1 / -1; justify-self: start; }
}
.card-form label { font-size: 12px; font-weight: 600; color: var(--ink); }
.card-form button {
  background: var(--blue);
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  width: fit-content;
}
.card-form button:hover { background: var(--blue-dark); }
.cancel-link { font-size: 13px; color: var(--ink-muted); align-self: center; text-decoration: none; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
}
.data-table th, .data-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.data-table th { background: var(--admin-bg); font-weight: 700; color: var(--navy); }
.data-table tbody tr:hover { background: #f9fafc; }
.data-table td a { margin-right: 10px; color: var(--blue); text-decoration: none; font-size: 12px; font-weight: 600; }

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}
.status-pill.status-pending, .status-pill.status-initiated { background: var(--gold-soft); color: #8a6412; }
.status-pill.status-confirmed, .status-pill.status-success, .status-pill.status-approved { background: var(--success-bg); color: var(--success-text); }
.status-pill.status-failed, .status-pill.status-cancelled, .status-pill.status-rejected { background: var(--error-bg); color: var(--error-text); }

.review-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.review-form input[type="text"] { padding: 5px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; }
.btn-approve, .btn-reject {
  border: none; border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; color: #fff;
}
.btn-approve { background: var(--success-text); }
.btn-reject { background: var(--error-text); }

.course-checklist {
  max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px;
  padding: 8px; margin-top: 4px; font-weight: 400; font-size: 13px;
}
.course-checklist-item { display: block; margin-bottom: 6px; font-weight: 400; }
.course-checklist-item input { width: auto; margin-right: 6px; }

/* On phones: each row becomes a labelled card instead of a squeezed
   table row — the label comes from data-label on each <td>, set by
   the pages that render these tables. */
@media (max-width: 640px) {
  .admin-wordmark span { display: none; }

  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table {
    border: none;
    background: transparent;
  }
  .data-table tr {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 12px;
    margin-bottom: 10px;
  }
  .data-table td {
    border: none;
    padding: 7px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: right;
  }
  .data-table td:not(:last-child) { border-bottom: 1px solid var(--border); }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--ink-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
  }
  .data-table td[data-label=""]::before,
  .data-table td:not([data-label])::before { content: none; }
}