/* UniHop partner portal.
   Brand tokens are lifted verbatim from the marketing site's styles.css so the
   two read as one product. The motion layer is deliberately NOT ported: the arc
   is a persuasion device, and a table someone reads every day should be quiet.
   One brand gesture survives — the yellow dot as an active/complete marker. */

@font-face { font-family: Poppins; src: url("/fonts/poppins/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url("/fonts/poppins/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url("/fonts/poppins/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url("/fonts/poppins/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --navy: #031c32;
  --navy-2: #0a2a44;
  --royal: #1c4f8c;
  --blue-bright: #2e6fbf;
  --yellow: #feb002;
  --yellow-up: #ffbe2e;
  --mist: #f5f7fa;
  --cloud: #dfe6ed;
  --white: #fff;

  --ink: var(--navy);
  --body: #2b3f52;
  --muted: #55677a;
  --hairline: #e3e9f0;

  --ok: #1c7a4a;
  --warn: #a86800;
  --bad: #a52a2a;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(3, 28, 50, 0.05), 0 4px 12px rgba(3, 28, 50, 0.05);
  --glide: cubic-bezier(0.22, 1, 0.36, 1);
  --sidebar: 244px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: 27px; letter-spacing: -0.015em; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0 0 14px; }
a { color: var(--royal); }
a:hover { color: var(--blue-bright); }
small, .muted { color: var(--muted); font-size: 13px; }

:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--yellow); color: var(--navy); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Shell ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar); flex: 0 0 var(--sidebar);
  background: var(--navy); color: #c6d4e2;
  padding: 22px 16px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 26px; overflow-y: auto;
}
.sidebar .brand { display: block; padding: 0 8px 4px; }
.sidebar .brand img { width: 124px; height: auto; }
.sidebar .scope {
  padding: 0 8px; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #7b93ab;
}
.sidebar nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: #c6d4e2; text-decoration: none; font-size: 14px;
  transition: background 0.16s var(--glide), color 0.16s var(--glide);
}
.sidebar nav a:hover { background: var(--navy-2); color: #fff; }
.sidebar nav a.active { background: var(--navy-2); color: #fff; font-weight: 500; }
/* The one surviving brand gesture: the dot marks where you are. */
.sidebar nav a.active::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--yellow); flex: 0 0 7px;
}
.sidebar nav a:not(.active)::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: transparent; flex: 0 0 7px;
}
.sidebar .foot { margin-top: auto; font-size: 12px; color: #7b93ab; padding: 0 8px; }
.sidebar .foot form { margin-top: 8px; }
.sidebar .foot button {
  background: none; border: 0; color: #c6d4e2; padding: 0;
  font: inherit; cursor: pointer; text-decoration: underline;
}

.main { flex: 1; min-width: 0; }
.topbar {
  background: #fff; border-bottom: 1px solid var(--hairline);
  padding: 16px 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.topbar h1 { margin: 0; font-size: 20px; }
.content { padding: 26px 30px 60px; max-width: 1180px; }

/* ---------- Cards, grids ---------- */

.card {
  background: #fff; border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 18px; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }

.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 18px 20px; }
.stat .label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.stat .value { font-size: 28px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; margin-top: 4px; }
.stat .note { font-size: 12px; color: var(--muted); }
.stat.accent { background: var(--navy); border-color: var(--navy); }
.stat.accent .label { color: #8fa8bf; }
.stat.accent .value { color: #fff; }
.stat.accent .note { color: #8fa8bf; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-weight: 600; color: var(--muted);
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 11px 14px; border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--mist); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: 34px; text-align: center; color: var(--muted); }

/* ---------- Badges ---------- */

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--cloud); color: var(--navy-2);
}
.badge.ok      { background: #e2f2e9; color: var(--ok); }
.badge.warn    { background: #fdf0d9; color: var(--warn); }
.badge.bad     { background: #f8e4e4; color: var(--bad); }
.badge.info    { background: #e3edf9; color: var(--royal); }
.badge.neutral { background: var(--cloud); color: var(--muted); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  text-decoration: none; transition: background 0.16s var(--glide), border-color 0.16s var(--glide);
}
/* One yellow button per view. Always navy text on yellow. */
.btn-primary { background: var(--yellow); color: var(--navy); }
.btn-primary:hover { background: var(--yellow-up); color: var(--navy); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-2); color: #fff; }
.btn-outline { background: #fff; border-color: var(--cloud); color: var(--ink); }
.btn-outline:hover { border-color: var(--royal); color: var(--royal); }
.btn-danger { background: #fff; border-color: #e6c4c4; color: var(--bad); }
.btn-danger:hover { background: #fdf3f3; }
.btn-sm { padding: 6px 13px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Forms ---------- */

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 5px; }
.field .hint { color: var(--muted); font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  width: 100%; padding: 10px 13px; font: inherit; font-size: 14px;
  color: var(--body); background: #fff;
  border: 1px solid var(--cloud); border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus { border-color: var(--royal); outline-offset: 0; }
textarea { min-height: 92px; resize: vertical; }
.field-error { color: var(--bad); font-size: 13px; margin-top: 5px; }
.field.has-error input, .field.has-error select { border-color: var(--bad); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.notice { padding: 13px 16px; border-radius: var(--radius-md); font-size: 14px; margin-bottom: 18px; }
.notice.ok   { background: #e2f2e9; color: var(--ok); }
.notice.bad  { background: #f8e4e4; color: var(--bad); }
.notice.info { background: #e3edf9; color: var(--royal); }

/* ---------- Filters ---------- */

.filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.filters a {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; text-decoration: none;
  background: #fff; border: 1px solid var(--hairline); color: var(--muted);
}
.filters a.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- Checklist ---------- */

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.checklist li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.checklist .mark {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px;
  border: 2px solid var(--cloud); display: grid; place-items: center;
}
.checklist li.done .mark { background: var(--yellow); border-color: var(--yellow); }
.checklist li.done { color: var(--muted); }

/* ---------- Onboarding banner ---------- */
/* Page state, not page content: a full-width strip welded to the title bar.
   In flow, not fixed. */

.onboarding-banner {
  background: #fff;
  border-bottom: 1px solid var(--hairline);
  padding: 20px 30px 22px;
}
.onboarding-banner h2 { margin: 0 0 6px; }
.onboarding-banner p { margin: 0; max-width: 78ch; color: var(--body); }

/* ---------- Agreement accept bar ---------- */
/* Docked wall to wall across the main pane, flush with the viewport bottom,
   always visible while the contract scrolls behind it. The spacer keeps the
   last lines of the document scrollable above the bar. */

.accept-bar {
  position: fixed;
  left: var(--sidebar);
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #fff;
  border-top: 1px solid var(--cloud);
  padding: 14px 30px;
  box-shadow: 0 -6px 18px rgba(3, 28, 50, 0.1);
}
.accept-bar-spacer { height: 130px; }
.accept-bar form {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}
.accept-bar input[type=text] { flex: 1 1 200px; min-width: 160px; }
.accept-bar .confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 2 1 280px;
  font-size: 13px;
  color: var(--body);
  cursor: pointer;
}
.accept-bar .confirm input { width: 16px; height: 16px; flex: 0 0 16px; }
.accept-bar .fine {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Timeline ---------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 0 0 16px 20px; border-left: 2px solid var(--hairline); position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--cloud);
}
.timeline li:first-child::before { background: var(--yellow); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline .when { font-size: 12px; color: var(--muted); }

/* ---------- Auth pages ---------- */

.auth-page {
  min-height: 100vh; display: grid; place-items: center;
  padding: 40px 20px; background: var(--navy);
}
.auth-card { width: 100%; max-width: 430px; background: #fff; border-radius: var(--radius-lg); padding: 34px; }
.auth-card .brand { display: block; margin-bottom: 22px; }
.auth-card .brand img { width: 132px; height: auto; }
.auth-wide { max-width: 640px; }

dl.detail { display: grid; grid-template-columns: 180px 1fr; gap: 8px 18px; margin: 0; font-size: 14px; }
dl.detail dt { color: var(--muted); }
dl.detail dd { margin: 0; color: var(--ink); }


/* Agreement body. A contract is read, not skimmed: narrower measure, more
   leading, and clause headings that are easy to navigate back to. */
.agreement-body { line-height: 1.75; }
.agreement-body h1 { font-size: 24px; margin: 0 0 6px; }
.agreement-body h2 {
  font-size: 17px; margin: 30px 0 10px; padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.agreement-body h2:first-of-type { border-top: 0; padding-top: 0; }
.agreement-body h3 { font-size: 15px; margin: 20px 0 8px; }
.agreement-body p { max-width: 68ch; margin: 0 0 12px; }
.agreement-body strong { color: var(--ink); }

.field.checkbox label {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 400; line-height: 1.5; cursor: pointer;
}
.field.checkbox input { margin-top: 3px; flex: none; }


/* A locked nav item. Visibly present but plainly not a link, so the partner can
   see what the portal will contain without it looking broken. */
.sidebar nav .nav-locked {
  display: block; padding: 9px 12px; border-radius: 10px;
  font-size: 14px; color: rgba(255, 255, 255, 0.34); cursor: not-allowed;
}


/* Student journey ladder. Vertical because the steps have explanatory text and
   a horizontal stepper cannot carry it without truncating. */
.journey { list-style: none; margin: 6px 0 0; padding: 0; }
.journey li { display: flex; gap: 14px; padding-bottom: 18px; position: relative; }
.journey li:last-child { padding-bottom: 0; }
.journey li::before {
  content: ""; position: absolute; left: 6px; top: 18px; bottom: 0;
  width: 2px; background: var(--hairline);
}
.journey li:last-child::before { display: none; }
.journey .dot {
  flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 3px;
  background: #fff; border: 2px solid var(--hairline); position: relative; z-index: 1;
}
.journey li.done .dot { background: var(--royal); border-color: var(--royal); }
.journey li.done::before { background: var(--royal); }
.journey li.current .dot { background: var(--yellow); border-color: var(--yellow); }
.journey li.current strong { color: var(--ink); }
.journey strong { display: block; font-size: 14px; color: var(--muted); }
.journey li.done strong { color: var(--ink); }
.journey p { margin: 4px 0 0; font-size: 13px; max-width: 62ch; }

@media (max-width: 900px) {
  .accept-bar { left: 0; padding: 12px 18px; }
  .accept-bar-spacer { height: 230px; }
  .onboarding-banner { padding: 16px 18px 18px; }
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: static; flex-direction: column; }
  .sidebar nav ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .content, .topbar { padding-left: 18px; padding-right: 18px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  dl.detail { grid-template-columns: 1fr; gap: 2px 0; }
  dl.detail dd { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}