:root {
  --colour-navy: #00042a;
  --colour-ink: #1d1d1f;
  --colour-slate: #6e6e73;
  --colour-smoke: #86868b;
  --colour-snow: #f5f5f7;
  --colour-white: #ffffff;

  --colour-purple-deep: #510277;
  --colour-purple-mid: #8c00b4;
  --colour-purple-core: #b400c8;
  --colour-purple-bright: #c800dd;
  --gradient-brand: linear-gradient(135deg, #510277 0%, #8c00b4 35%, #b400c8 65%, #c800dd 100%);

  --colour-success: #1e8e3e;
  --colour-warning: #b5750a;
  --colour-danger: #c5221f;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 980px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--colour-ink);
  background: var(--colour-snow);
  line-height: 1.6;
}

.portal-header {
  background: var(--colour-navy);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-header img {
  height: 32px;
  display: block;
}

.portal-header .wordmark {
  color: var(--colour-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}

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

.portal-sidebar {
  background: var(--colour-navy);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 16px;
  padding: 16px 20px;
}

.portal-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-sidebar-brand img {
  height: 32px;
  display: block;
}

.portal-sidebar-brand .wordmark {
  color: var(--colour-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}

.portal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 100%;
  order: 3;
}

.portal-nav-link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
}

.portal-nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--colour-white);
}

.portal-nav-link.active {
  background: rgba(255, 255, 255, 0.14);
  color: var(--colour-white);
}

.portal-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  order: 2;
  margin-left: auto;
}

.portal-account-name {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.portal-logout-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  cursor: pointer;
}

.portal-content {
  flex: 1;
  padding: 20px;
}

.portal-content-inner {
  max-width: 760px;
  margin: 0 auto;
}

.portal-content-inner--wide {
  max-width: none;
}

@media (min-width: 900px) {
  .portal-shell {
    flex-direction: row;
  }

  .portal-sidebar {
    width: 240px;
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 24px 16px;
    gap: 24px;
  }

  .portal-sidebar-brand {
    padding: 0 8px;
  }

  .portal-nav {
    flex-direction: column;
    flex: none;
    order: 0;
  }

  .portal-sidebar-footer {
    margin-top: auto;
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 16px;
    order: 0;
  }

  .portal-content {
    padding: 32px 40px;
  }

  .portal-content-inner {
    margin: 0;
  }
}

.portal-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px;
}

/* Two-column signup layout (tutor/client sign-up pages) — deliberately
   its own header/page classes rather than reusing .portal-header, since
   the centered logo here is specific to this landing-style page and
   shouldn't affect the left-aligned header used on every other page. */
.signup-header {
  position: relative;
  background: var(--colour-navy);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.signup-header img {
  height: 32px;
  display: block;
}

.signup-header .wordmark {
  color: var(--colour-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
}

.signup-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 860px) {
  .signup-page {
    grid-template-columns: 1fr;
  }
}

.signup-form-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 40px;
}

.signup-form-side .portal-card {
  width: 100%;
  max-width: 480px;
  margin-bottom: 0;
}

.signup-form-sub {
  color: var(--colour-slate);
  font-size: 14px;
  margin: 0 0 20px;
}

.signup-info-side {
  display: flex;
  align-items: flex-start;
  padding: 56px 32px 56px 40px;
}

@media (max-width: 860px) {
  .signup-info-side {
    padding: 8px 40px 56px;
  }
}

.signup-info-inner {
  max-width: 440px;
}

.signup-info-inner h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 25px;
  margin: 0 0 12px;
  text-wrap: balance;
  color: var(--colour-navy);
}

.signup-info-inner h2:not(:first-child) {
  margin-top: 36px;
}

.signup-info-inner p {
  font-size: 16px;
  color: #3a3a3e;
  margin: 0;
  max-width: 60ch;
}

.signup-stripe-badge {
  font-weight: 600;
  color: var(--colour-purple-deep);
}

.signup-info-inner .signup-site-link {
  display: inline-block;
  margin-top: 28px;
  font-size: 14px;
  color: var(--colour-purple-mid);
  text-decoration: underline;
}

/* Tighter vertical rhythm on signup forms specifically — the shared
   .portal-form spacing (used across the whole authenticated portal too)
   stays untouched everywhere else. */
.signup-form-side .portal-form label {
  margin-bottom: 4px;
}

.signup-form-side .portal-form input[type="text"],
.signup-form-side .portal-form input[type="email"],
.signup-form-side .portal-form input[type="password"],
.signup-form-side .portal-form input[type="date"],
.signup-form-side .portal-form select {
  margin-bottom: 10px;
}

.signup-form-side .portal-divider {
  margin: 14px 0;
}

.signup-form-side .portal-card {
  padding: 28px;
}

/* Theme toggle button — only present on themeable-page headers. */
.theme-toggle {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: var(--colour-white);
  cursor: pointer;
  padding: 0;
}

.portal-header .theme-toggle {
  position: static;
  transform: none;
  margin-left: auto;
}

.theme-toggle-icon-sun {
  display: none;
}

.themeable-page[data-theme="dark"] .theme-toggle-icon-moon {
  display: none;
}

.themeable-page[data-theme="dark"] .theme-toggle-icon-sun {
  display: block;
}

.themeable-page[data-theme="light"] .theme-toggle-icon-moon {
  display: block;
}

.themeable-page[data-theme="light"] .theme-toggle-icon-sun {
  display: none;
}

/* Dark theme — scoped to .themeable-page only (signup/login pages), never
   the authenticated portal interior (dashboard, invoices, billing, etc.),
   which has no dark-mode pass yet. Deliberately no @media
   (prefers-color-scheme) rules here at all — the synchronous script in
   each base template always resolves and sets an explicit data-theme
   attribute (stored choice, or the system preference as a one-time
   default) before first paint, so this is the single source of truth.
   Two parallel sources (a media query AND an attribute) previously fought
   each other whenever someone's system preferred dark but they'd
   explicitly toggled to light: the page background went light correctly,
   but component rules gated on the media query alone stayed dark
   regardless, producing white-on-white text. */
.themeable-page {
  min-height: 100vh;
}

.themeable-page[data-theme="dark"] {
  background: var(--colour-navy);
  color: var(--colour-snow);
}

.themeable-page[data-theme="light"] {
  background: var(--colour-snow);
  color: var(--colour-ink);
}

.themeable-page[data-theme="dark"] .portal-card {
  background: #141a37;
  color: var(--colour-snow);
}
.themeable-page[data-theme="dark"] .portal-title,
.themeable-page[data-theme="dark"] .signup-info-inner h2 {
  color: var(--colour-white);
}
.themeable-page[data-theme="dark"] .signup-form-sub,
.themeable-page[data-theme="dark"] .signup-info-inner p,
.themeable-page[data-theme="dark"] .portal-divider {
  color: #9a9dbd;
}
.themeable-page[data-theme="dark"] .portal-divider::before,
.themeable-page[data-theme="dark"] .portal-divider::after {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.themeable-page[data-theme="dark"] .portal-form label {
  color: #c6c9de;
}
.themeable-page[data-theme="dark"] .portal-form input[type="text"],
.themeable-page[data-theme="dark"] .portal-form input[type="email"],
.themeable-page[data-theme="dark"] .portal-form input[type="password"],
.themeable-page[data-theme="dark"] .portal-form input[type="date"],
.themeable-page[data-theme="dark"] .portal-form select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--colour-white);
}
.themeable-page[data-theme="dark"] .portal-form input::placeholder {
  color: #7d81a0;
}
.themeable-page[data-theme="dark"] .btn-google {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--colour-white);
}
.themeable-page[data-theme="dark"] .btn-primary {
  border: 1.5px solid rgba(255, 255, 255, 0.22);
}
.themeable-page[data-theme="dark"] .back-link,
.themeable-page[data-theme="dark"] p a {
  color: var(--colour-purple-bright);
}

.portal-card {
  background: var(--colour-white);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.08);
}

h1.portal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--colour-navy);
  margin: 0 0 16px;
}

h2.portal-section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--colour-navy);
  margin: 0 0 12px;
}

/* FullCalendar control deck — navigation, date reset and view selection each
   have a distinct visual role while sharing the same compact geometry. */
#portal-calendar .fc-header-toolbar {
  gap: 16px;
  margin-bottom: 20px;
}

#portal-calendar .fc-toolbar-chunk {
  align-items: center;
  display: flex;
}

#portal-calendar .fc-button-primary {
  align-items: center;
  background: var(--colour-white);
  border: 1px solid rgba(0, 4, 42, 0.14);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 4, 42, 0.06), 0 5px 14px rgba(0, 4, 42, 0.06);
  color: var(--colour-navy);
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  height: 40px;
  justify-content: center;
  letter-spacing: -0.01em;
  padding: 0 16px;
  text-transform: capitalize;
  transition: background-color 160ms ease-out, border-color 160ms ease-out,
    box-shadow 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
}

#portal-calendar .fc-button-primary:not(:disabled):hover {
  background: rgba(180, 0, 200, 0.06);
  border-color: rgba(140, 0, 180, 0.38);
  color: var(--colour-purple-deep);
  transform: translateY(-1px);
}

#portal-calendar .fc-button-primary:not(:disabled):focus-visible {
  box-shadow: 0 0 0 3px rgba(180, 0, 200, 0.2),
    0 5px 14px rgba(0, 4, 42, 0.08);
  outline: none;
  position: relative;
  z-index: 2;
}

#portal-calendar .fc-button-primary:not(:disabled):active {
  background: rgba(180, 0, 200, 0.12);
  border-color: var(--colour-purple-mid);
  color: var(--colour-purple-deep);
  transform: translateY(0);
}

#portal-calendar .fc-prev-button,
#portal-calendar .fc-next-button {
  background: var(--colour-navy);
  border-color: var(--colour-navy);
  box-shadow: none;
  color: var(--colour-white);
  padding: 0;
  width: 42px;
}

#portal-calendar .fc-prev-button:not(:disabled):hover,
#portal-calendar .fc-next-button:not(:disabled):hover {
  background: var(--colour-purple-deep);
  border-color: var(--colour-purple-deep);
  color: var(--colour-white);
}

#portal-calendar .fc-button-group {
  background: var(--colour-snow);
  border: 1px solid rgba(0, 4, 42, 0.08);
  border-radius: 13px;
  box-shadow: inset 0 1px 2px rgba(0, 4, 42, 0.04);
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}

#portal-calendar .fc-button-group > .fc-button {
  border-radius: 9px;
  margin: 0;
}

#portal-calendar .fc-button-group > .fc-button:not(:first-child) {
  border-left-width: 1px;
}

#portal-calendar .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--gradient-brand);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(140, 0, 180, 0.24);
  color: var(--colour-white);
}

#portal-calendar .fc-button-primary:disabled {
  background: var(--colour-snow);
  border-color: rgba(0, 4, 42, 0.08);
  box-shadow: none;
  color: var(--colour-smoke);
  opacity: 0.7;
}

@media (max-width: 700px) {
  #portal-calendar .fc-header-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  #portal-calendar .fc-toolbar-chunk {
    justify-content: center;
  }

  #portal-calendar .fc-toolbar-chunk:first-child {
    order: 2;
  }

  #portal-calendar .fc-toolbar-chunk:nth-child(2) {
    order: 1;
  }

  #portal-calendar .fc-toolbar-chunk:last-child {
    order: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  #portal-calendar .fc-button-primary {
    transition: none;
  }
}

.portal-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--colour-snow);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
}

.portal-bulk-label {
  font-size: 13px;
  color: var(--colour-slate);
  font-weight: 500;
  margin-right: 4px;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
}

.portal-cancel-options-bulk {
  min-width: 220px;
}

.portal-cancel-options-bulk textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 10px;
  border: 1.5px solid var(--colour-smoke);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  resize: vertical;
}

.portal-lesson-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--colour-purple-core);
  cursor: pointer;
}

.portal-lesson-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--colour-snow);
  padding: 16px 0;
}

.portal-lesson-row:first-child {
  border-top: none;
  padding-top: 0;
}

.portal-lesson-row-clickable {
  cursor: pointer;
}

.portal-lesson-row-clickable:hover {
  background: var(--colour-snow);
}

.portal-lesson-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--colour-snow);
  color: var(--colour-purple-core);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-lesson-info {
  flex: 1;
  min-width: 180px;
}

.portal-lesson-date {
  color: var(--colour-slate);
  font-size: 14px;
}

.portal-lesson-time {
  font-weight: 700;
  font-size: 16px;
  color: var(--colour-navy);
}

.portal-lesson-caption {
  color: var(--colour-slate);
  font-size: 13px;
  margin-top: 2px;
}

.portal-lesson-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-complete,
.btn-cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  border: none;
  cursor: pointer;
  list-style: none;
}

.btn-complete::-webkit-details-marker,
.btn-cancel::-webkit-details-marker {
  display: none;
}

.btn-complete {
  background: var(--colour-success);
  color: var(--colour-white);
}

.btn-cancel {
  background: var(--colour-snow);
  color: var(--colour-ink);
}

.portal-cancel-disclosure {
  position: relative;
}

.portal-cancel-disclosure[open] .btn-cancel {
  background: var(--colour-ink);
  color: var(--colour-white);
}

.portal-cancel-options {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--colour-white);
  border-radius: var(--radius-sm);
  padding: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.1);
  min-width: 140px;
}

.btn-cancel-option {
  font-family: var(--font-body);
  font-size: 14px;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
}

.btn-cancel-option:hover {
  background: var(--colour-snow);
}

.portal-lesson-note {
  flex-basis: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 10px;
  border: 1.5px solid var(--colour-smoke);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.portal-empty {
  color: var(--colour-slate);
  font-size: 14px;
}

.btn-primary,
.btn-secondary,
.btn-accent {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.btn-primary {
  background: var(--colour-navy);
  color: var(--colour-white);
}

.btn-secondary {
  background: transparent;
  color: var(--colour-navy);
  border: 1.5px solid var(--colour-navy);
}

.btn-accent {
  background: var(--gradient-brand);
  color: var(--colour-white);
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--colour-ink);
  background: var(--colour-white);
  border: 1.5px solid var(--colour-smoke);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  text-decoration: none;
  box-sizing: border-box;
}

.btn-google img {
  height: 18px;
  width: 18px;
}

.portal-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--colour-smoke);
  font-size: 13px;
  margin: 20px 0;
}

.portal-divider::before,
.portal-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--colour-smoke);
}

.portal-divider span {
  padding: 0 12px;
}

.portal-form label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 6px;
}

.portal-form input[type="text"],
.portal-form input[type="email"],
.portal-form input[type="password"],
.portal-form input[type="date"],
.portal-form select,
.portal-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 10px 12px;
  border: 1.5px solid var(--colour-smoke);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  background: var(--colour-white);
  color: var(--colour-ink);
}

.portal-form-row {
  display: flex;
  gap: 16px;
}

.portal-form-row > div {
  flex: 1;
  min-width: 0;
}

/* An input paired with a button on one line (e.g. a coupon code field +
   "Apply") — unlike .portal-form-row, which splits into equal-width
   columns for paired fields like expiry/CVC, this keeps the button at
   its natural width and vertically centers it against the input. */
.portal-inline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.portal-inline-row input[type="text"] {
  flex: 1;
  margin-bottom: 0;
}

.portal-inline-row button {
  flex: none;
  white-space: nowrap;
}

.portal-price-line {
  font-size: 20px;
  font-weight: 600;
  color: var(--colour-navy);
  margin: 8px 0 0;
}

.portal-alert {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
}

.portal-alert.success {
  background: rgba(30, 142, 62, 0.1);
  color: var(--colour-success);
}

.portal-alert.error {
  background: rgba(197, 34, 31, 0.1);
  color: var(--colour-danger);
}

.portal-alert.info {
  background: rgba(0, 4, 42, 0.06);
  color: var(--colour-navy);
}

.portal-alert.warning {
  background: rgba(181, 117, 10, 0.12);
  color: var(--colour-warning);
}

dialog.portal-modal {
  border: none;
  border-radius: var(--radius-md);
  padding: 28px;
  width: 90%;
  max-width: 440px;
  font-family: var(--font-body);
  color: var(--colour-ink);
  box-shadow: 0 20px 60px rgba(0, 4, 42, 0.25);
}

dialog.portal-modal::backdrop {
  background: rgba(0, 4, 42, 0.5);
}

.portal-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.portal-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 16px;
}

.portal-checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.portal-card-element {
  padding: 10px 12px;
  border: 1.5px solid var(--colour-smoke);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  background: var(--colour-white);
}

.portal-address-element {
  margin-bottom: 16px;
}

.portal-modal-subtitle {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--colour-navy);
  margin: 0 0 12px;
}

.portal-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--colour-white);
  border-radius: 50%;
  animation: portal-spin 0.6s linear infinite;
}

/* An author `display` rule always wins over the browser's own
   `[hidden] { display: none }` default, regardless of specificity — so
   the unconditional `display: inline-block` above needs this explicit
   override, or the spinner (and its animation) never actually hides. */
.portal-spinner[hidden] {
  display: none;
}

@keyframes portal-spin {
  to {
    transform: rotate(360deg);
  }
}

a {
  color: var(--colour-purple-core);
}

.portal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.portal-card-header .portal-section-title,
.portal-card-header .portal-title {
  margin-bottom: 0;
}

.portal-view-all {
  font-size: 13px;
  font-weight: 500;
  color: var(--colour-purple-core);
  text-decoration: none;
  white-space: nowrap;
}

.portal-view-all:hover {
  text-decoration: underline;
}

.portal-status-tag {
  flex-shrink: 0;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--colour-snow);
  color: var(--colour-slate);
  text-transform: capitalize;
}

.portal-status-complete,
.portal-status-paid {
  background: rgba(30, 142, 62, 0.12);
  color: var(--colour-success);
}

.portal-status-cancelled,
.portal-status-void {
  background: rgba(0, 4, 42, 0.06);
  color: var(--colour-slate);
}

.portal-status-no_show,
.portal-status-due {
  background: rgba(181, 117, 10, 0.14);
  color: var(--colour-warning);
}

.portal-payment-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--colour-snow);
  padding: 14px 4px;
  margin: 0 -4px;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.portal-payment-row:first-child {
  border-top: none;
  padding-top: 0;
}

.portal-payment-row:hover {
  background: var(--colour-snow);
}

.portal-payment-info {
  flex: 1;
  min-width: 180px;
}

.portal-payment-id {
  font-weight: 700;
  font-size: 15px;
  color: var(--colour-navy);
}

.portal-payment-meta {
  font-size: 13px;
  color: var(--colour-slate);
  margin-top: 2px;
}

.portal-payment-amount {
  font-weight: 700;
  font-size: 15px;
  color: var(--colour-ink);
}

.portal-period-tabs {
  display: flex;
  gap: 4px;
  background: var(--colour-snow);
  border-radius: var(--radius-pill);
  padding: 4px;
}

.portal-period-tab {
  font-size: 13px;
  font-weight: 600;
  color: var(--colour-slate);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.portal-period-tab.active {
  background: var(--colour-navy);
  color: var(--colour-white);
}

.portal-package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.portal-package-card {
  border: 1px solid var(--colour-smoke);
  border-radius: var(--radius-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.portal-package-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--colour-navy);
  margin: 0 0 10px;
}

.portal-package-card p {
  color: var(--colour-slate);
  font-size: 14px;
  margin: 0 0 16px;
}

.portal-package-card dl {
  margin: 0 0 20px;
}

.portal-package-card dl div {
  border-top: 1px solid var(--colour-snow);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 8px 0;
}

.portal-package-card dt {
  color: var(--colour-slate);
  font-size: 13px;
}

.portal-package-card dd {
  color: var(--colour-navy);
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  text-align: right;
}

.portal-package-unavailable {
  cursor: default;
  margin-top: auto;
}

.portal-package-owned {
  align-items: center;
  border-top: 1px solid var(--colour-snow);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px 0;
}

.portal-package-owned:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.portal-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.portal-stat-card {
  background: var(--colour-snow);
  border-radius: var(--radius-sm);
  padding: 18px;
  text-align: center;
}

.portal-stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--colour-navy);
}

.portal-stat-label {
  font-size: 13px;
  color: var(--colour-slate);
  margin-top: 4px;
}

.portal-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.portal-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 14px;
}

.portal-table tr {
  border-top: 1px solid var(--colour-snow);
}

.portal-table tr:first-child {
  border-top: none;
}

.portal-table td {
  padding: 10px 8px;
}

.portal-table-actions {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

.portal-remove-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--colour-danger);
  cursor: pointer;
  text-decoration: underline;
}

.portal-inline-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.portal-inline-form input {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px 10px;
  border: 1.5px solid var(--colour-smoke);
  border-radius: var(--radius-sm);
  flex: 1;
  min-width: 120px;
}

.btn-primary:disabled {
  background: var(--colour-smoke);
  cursor: not-allowed;
}