/*
 * Purpose: Authentication, onboarding and the student dashboard.
 */

/* ------------------------------------------------------------------ AUTH */

.rh-auth {
  padding-block: var(--space-48) var(--space-80);
  background-color: var(--rh-surface);
  min-height: 60vh;
}

.rh-container--narrow {
  max-width: 520px;
}

.rh-auth__card {
  padding: var(--space-32) var(--space-24);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .rh-auth__card {
    padding: var(--space-40);
  }
}

.rh-auth__title {
  font-size: var(--fs-h3);
}

.rh-auth__intro {
  margin-top: var(--space-8);
  margin-bottom: var(--space-24);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
  line-height: var(--lh-relaxed);
}

.rh-auth__foot {
  margin-top: var(--space-24);
  padding-top: var(--space-16);
  border-top: 1px solid var(--rh-border);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

/* ------------------------------------------------------------------- OTP */

.rh-field__prefixed {
  display: flex;
  align-items: stretch;
}

.rh-field__prefix {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-12);
  border: 1px solid var(--rh-border-input);
  border-right: 0;
  border-radius: var(--r-input) 0 0 var(--r-input);
  background-color: var(--rh-surface);
  color: var(--rh-text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.rh-field__prefixed .rh-input {
  border-radius: 0 var(--r-input) var(--r-input) 0;
  flex: 1;
  min-width: 0;
}

.rh-input--code {
  font-size: var(--fs-h4);
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.rh-otp__sent {
  margin-bottom: var(--space-16);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

/* The development notice is deliberately loud - it must never be mistaken
   for a real SMS having been sent. */
.rh-otp__dev {
  margin-bottom: var(--space-16);
  padding: var(--space-12) var(--space-16);
  border: 1px dashed var(--rh-warning);
  border-radius: var(--r-card);
  background-color: var(--rh-lime-light);
}

.rh-otp__dev strong {
  display: block;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--rh-warning-text);
}

.rh-otp__dev p {
  margin-block: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

.rh-otp__dev-code {
  display: inline-block;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--r-sm);
  background-color: var(--rh-white);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.rh-otp__actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: var(--space-16);
}

.rh-link-btn {
  border: 0;
  background: none;
  padding: var(--space-4);
  color: var(--rh-teal);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  cursor: pointer;
}

/*
 * A destructive text action. Kept quiet on purpose: cancelling a renewal or
 * removing something should be findable, not inviting. --rh-error-text is the
 * accessible variant of the error colour; plain --rh-error is 4.15:1 and fails
 * as body-sized text.
 */
.rh-link-btn--danger {
  color: var(--rh-error-text);
}

.rh-link-btn--danger:hover,
.rh-link-btn--danger:focus-visible {
  color: var(--rh-error-text);
  text-decoration-thickness: 2px;
}

.rh-field__error {
  margin-top: var(--space-8);
  font-size: var(--fs-caption);
  color: var(--rh-error-text);
}

.rh-field__success {
  margin-top: var(--space-8);
  font-size: var(--fs-caption);
  color: var(--rh-success);
}

/* ------------------------------------------------------------ ONBOARDING */

.rh-onboarding .rh-field + .rh-field,
.rh-onboarding .rh-field + fieldset,
.rh-onboarding fieldset + .rh-field {
  margin-top: var(--space-20);
}

.rh-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
}

@media (min-width: 480px) {
  .rh-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rh-choice-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: var(--space-12) var(--space-8);
  border: 1px solid var(--rh-border-input);
  border-radius: var(--r-button);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-align: center;
  cursor: pointer;
}

.rh-choice-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rh-choice-tile:has(input:checked) {
  border-color: var(--rh-teal);
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
}

.rh-choice-tile:has(input:focus-visible) {
  outline: 2px solid var(--rh-teal);
  outline-offset: 2px;
}

.rh-onboarding__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

/* ------------------------------------------------------------- DASHBOARD */

.rh-dashboard {
  padding-block: var(--space-32) var(--space-64);
}

.rh-dashboard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-32);
}

.rh-dashboard__title {
  font-size: var(--fs-h2);
}

.rh-dashboard__subtitle {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

/*
 * minmax(0, 1fr), not 1fr.
 *
 * A bare `1fr` track is `minmax(auto, 1fr)`, and that `auto` minimum refuses to
 * shrink below the min-content width of what is inside it. A wide table or a
 * horizontal nav scroller therefore pushed the whole track past the viewport -
 * the dashboard measured 739px inside a 320px window, on every dashboard page.
 * The desktop rule below already got this right; the base rule did not, so the
 * blowout only ever showed on small screens where nobody had looked with the
 * overflow mask lifted.
 */
.rh-dashboard__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

/* Both grid children must be allowed to be narrower than their content. */
.rh-dashboard__nav,
.rh-dashboard__main {
  min-width: 0;
}

@media (min-width: 1024px) {
  .rh-dashboard__layout {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: var(--space-40);
    align-items: start;
  }
}

.rh-dashboard__main {
  min-width: 0;
}

/* Navigation: sidebar on desktop, horizontal scroller on small screens. */
.rh-dashboard__nav-list {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-8);
  scrollbar-width: thin;
}

.rh-dashboard__nav-foot {
  display: none;
}

@media (min-width: 1024px) {
  .rh-dashboard__nav {
    position: sticky;
    top: calc(var(--header-height) + var(--space-24));
    border: 1px solid var(--rh-border);
    border-radius: var(--r-card);
    background-color: var(--rh-white);
    padding: var(--space-8);
  }

  .rh-dashboard__nav-list {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
  }

  .rh-dashboard__nav-foot {
    display: block;
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--rh-border);
  }
}

.rh-dashboard__nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--touch-target);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--r-button);
  color: var(--rh-text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.rh-dashboard__nav-link:hover {
  background-color: var(--rh-surface);
  color: var(--rh-teal);
  text-decoration: none;
}

.rh-dashboard__nav-link.is-active {
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
}

.rh-dashboard__nav-link--muted {
  color: var(--rh-text-secondary);
  font-weight: var(--fw-regular);
}

/*
 * The route across to the owner side. It sits with Support and Sign out because
 * it leaves this dashboard rather than switching a section within it, but it is
 * a real destination rather than a utility link, so it keeps brand colour.
 */
.rh-dashboard__nav-link--owner {
  color: var(--rh-teal);
}

.rh-dashboard__nav-link--owner .rh-icon {
  color: currentcolor;
}

@media (min-width: 1024px) {
  .rh-dashboard__nav-link {
    width: 100%;
  }
}

/* --------------------------------------------------------------- WELCOME */

.rh-welcome {
  padding: var(--space-48) var(--space-24);
  border: 1px dashed var(--rh-border-strong);
  border-radius: var(--r-card);
  background-color: var(--rh-surface);
  text-align: center;
}

.rh-welcome__title {
  font-size: var(--fs-h4);
}

.rh-welcome__text {
  max-width: 44ch;
  margin: var(--space-8) auto var(--space-20);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

/* ----------------------------------------------------------------- STATS */

.rh-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  margin-bottom: var(--space-32);
}

@media (min-width: 768px) {
  .rh-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rh-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
  color: inherit;
}

.rh-stat:hover {
  border-color: var(--rh-teal);
  text-decoration: none;
}

.rh-stat__icon {
  color: var(--rh-teal);
}

.rh-stat__value {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.rh-stat__label {
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

/* -------------------------------------------------------------- SECTIONS */

.rh-dashboard__section {
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--rh-border);
}

.rh-dashboard__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

/*
 * The title carried no bottom margin, so the gap under it was whatever the
 * next block happened to bring - tight above a plan grid, loose above a record
 * list. It owns the spacing now, so every dashboard section reads the same.
 */
.rh-dashboard__section-title {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-16);
}

/* A note directly under the title belongs to it, so the two sit closer. */
.rh-dashboard__section-title:has(+ .rh-dashboard__section-note) {
  margin-bottom: var(--space-4);
}

.rh-dashboard__section-note {
  margin-bottom: var(--space-16);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

/* A button following a key-value list needs its own gap, not the list's. */
.rh-dashboard__section .rh-rules + .rh-btn {
  margin-top: var(--space-20);
}

/* ----------------------------------------------------------- RECORD LIST */

.rh-record-list {
  display: grid;
  gap: var(--space-8);
}

.rh-record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
}

.rh-record--past {
  background-color: var(--rh-surface);
}

.rh-record__main {
  min-width: 0;
  flex: 1 1 240px;
}

.rh-record__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--rh-text-primary);
}

.rh-record__title:hover {
  color: var(--rh-teal);
}

.rh-record__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

.rh-record__status {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-8);
  border-radius: var(--r-pill);
  background-color: var(--rh-surface);
  font-weight: var(--fw-semibold);
}

.rh-record__status--new,
.rh-record__status--requested {
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
}

.rh-record__status--confirmed,
.rh-record__status--converted {
  background-color: var(--rh-teal-light);
  color: var(--rh-success);
}

.rh-record__status--cancelled,
.rh-record__status--lost {
  color: var(--rh-error-text);
}

.rh-record__actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* --------------------------------------------------------------- PROFILE */

.rh-profile-form {
  max-width: 480px;
}

.rh-profile-form .rh-field + .rh-field {
  margin-top: var(--space-20);
}

.rh-profile-form button[type="submit"] {
  margin-top: var(--space-24);
}

.rh-profile-form__static {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

/*
 * Owner application states. These are the values roomhaina_kyc_statuses()
 * returns, and they had no styling - a status pill read as plain grey whatever
 * the decision was.
 */
.rh-record__status--submitted {
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
}

.rh-record__status--more_info {
  color: var(--rh-warning-text);
}

.rh-record__status--approved,
.rh-record__status--active {
  background-color: var(--rh-teal-light);
  color: var(--rh-success);
}

.rh-record__status--rejected {
  color: var(--rh-error-text);
}

/* ------------------------------------------------------------- UPDATES

   The notifications list, shared by the member and owner dashboards. Lives in
   account.css because both dashboards load it - owner.css builds on top of
   this file, and operations loads both.
   ------------------------------------------------------------------------ */

/* Unread badge on the sidebar link. */
.rh-dashboard__nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding-inline: var(--space-4);
  border-radius: var(--r-pill);
  background-color: var(--rh-teal);
  color: var(--rh-text-inverse);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

.rh-dashboard__nav-link.is-active .rh-dashboard__nav-count {
  background-color: var(--rh-teal);
  color: var(--rh-text-inverse);
}

.rh-updates {
  display: grid;
  gap: var(--space-12);
}

.rh-update {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
}

/*
 * An update that was still unread when the page loaded. Opening the section
 * marks everything read, so this is the only chance to show which ones were
 * new - the marker has to reflect the state on arrival, not on render.
 */
.rh-update--new {
  border-left: 3px solid var(--rh-teal);
}

.rh-update__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
}

.rh-update__body {
  min-width: 0;
}

.rh-update__message {
  font-weight: var(--fw-semibold);
}

.rh-update__flag {
  display: inline-block;
  margin-left: var(--space-8);
  padding: 1px var(--space-8);
  border-radius: var(--r-pill);
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
  font-size: var(--fs-12);
}

.rh-update__detail {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

.rh-update__note {
  margin-top: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--r-input);
  background-color: var(--rh-surface);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

.rh-update__meta {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

.rh-update__link {
  display: inline-block;
  margin-top: var(--space-8);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--rh-teal);
}

/* ------------------------------------------------------------------ INTENT

   The sign-up chooser. Two real links rather than radios, because picking one
   reloads with different copy and a different destination - there is nothing to
   submit, so a form control would be pretending.
   ------------------------------------------------------------------------ */

.rh-intent {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
}

.rh-intent__option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--space-12);
  padding: var(--space-16);
  border: 1px solid var(--rh-border-input);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
  color: var(--rh-text-body);
}

.rh-intent__option:hover {
  border-color: var(--rh-teal);
  text-decoration: none;
}

.rh-intent__option.is-selected {
  border-color: var(--rh-teal);
  background-color: var(--rh-teal-08);
}

.rh-intent__option .rh-icon {
  grid-row: span 2;
  margin-top: 2px;
  color: var(--rh-teal);
}

.rh-intent__label {
  font-weight: var(--fw-semibold);
  color: var(--rh-text-primary);
}

.rh-intent__note {
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--rh-text-secondary);
}

/* The two-step marker above the verification heading. */
.rh-auth__eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--rh-teal);
  margin-bottom: var(--space-4);
}

/*
 * Inside the sign-up card the verification form is already framed by the card,
 * so it drops its own panel and padding rather than boxing a box.
 */
.rh-auth__card .rh-verify {
  padding-block: 0;
}

.rh-auth__card .rh-verify .rh-container {
  max-width: none;
  padding-inline: 0;
}

.rh-auth__card .rh-verify__head {
  display: none;
}

.rh-auth__card .rh-verify__form {
  padding: 0;
  border: 0;
  background: none;
}

/*
 * Each OTP step owns its own rhythm.
 *
 * These were plain blocks, so the submit button sat flush against the help text
 * above it - "Indian mobile numbers only for now." ran straight into "Send me a
 * code" with no gap at all. Container gap rather than a margin on the button,
 * for the same reason as everywhere else: the next element added here would
 * have had the same problem.
 */
.rh-otp__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/*
 * A second foot link is a related aside, not another separator - one rule under
 * the block is enough.
 */
.rh-auth__foot--plain {
  margin-top: var(--space-8);
  padding-top: 0;
  border-top: 0;
}

/*
 * First and last name side by side. They are short, related and always filled
 * together, so stacking them made the sign-up form a column of six boxes when
 * five of them fit in four rows. Collapses on a phone, where two inputs on one
 * line leaves neither wide enough to read what has been typed.
 */
.rh-field-row {
  display: grid;
  gap: var(--space-16);
}

@media (min-width: 480px) {
  .rh-field-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}