/* public/css/user/app.css */

/*
  User app shell styles.

  This file should stay shell-specific:
  - auth loading screen
  - shell container
  - app view wrapper
  - route errors
  - generic shell states

  Keep car-loan search/contribute styling in their existing CSS files.
*/

.page-user-app {
  min-height: 100vh;

  /*
    One shared spacing system for every user-app route.
    Horizontal screen margins total 10px (5px per side). Major-panel
    content starts 25px inside each panel so page heroes, section headings
    and account product titles share one visible alignment line. Major
    vertical gaps remain 10px at every viewport size.
  */
  --user-shell-max-width: 1320px;
  --user-shell-edge-gap-total: 10px;
  --user-major-panel-inline-padding: 25px;
  --user-account-inner-card-inline-padding: 20px;
  --user-major-panel-gap: 10px;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   Auth loading
   ========================================================================== */

.auth-loading {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(32, 83, 177, 0.16), transparent 34%),
    linear-gradient(135deg, #f7f9ff 0%, #eef3ff 46%, #ffffff 100%);
}

.auth-loading-card {
  width: min(460px, 100%);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(26, 52, 99, 0.12);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 35, 75, 0.14);
  padding: 34px 30px;
  text-align: center;
}

.auth-loading-card img {
  width: 104px;
  height: auto;
  display: block;
  margin: 0 auto 18px;
}

.auth-loading-card h1 {
  margin: 0 0 8px;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.1;
  color: var(--ink, #17233c);
}

.auth-loading-card p {
  margin: 0;
  color: var(--muted, #667085);
  font-size: 1rem;
}

/* ==========================================================================
   Shell layout
   ========================================================================== */

.app-shell {
  min-height: 100vh;
}

.page-user-app .page-container.app-shell-container {
  width: min(
    var(--user-shell-max-width),
    calc(100% - var(--user-shell-edge-gap-total))
  );
  max-width: var(--user-shell-max-width);
  margin-inline: auto;
  padding-inline: 0;
}

/*
  The mount must stretch as well as the hero itself. Without this, the hero
  can shrink-wrap around short headings while the route panels remain wide.
*/
.page-user-app #pageHeroMount {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  align-self: stretch;
  justify-self: stretch;
}

.page-user-app #pageHeroMount > .page-hero,
.page-user-app #pageHeroMount .page-hero-inner {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
}

/* The app view owns the single 10px gap below the hero. */
.page-user-app #pageHeroMount > .page-hero {
  margin-bottom: 0;
}

/*
  Keep vertical spacing owned by each component, but use one horizontal
  content alignment for every major box in the user shell. The account page
  lets its nested product grids bleed back toward the panel edge, while their
  own 20px padding lands their titles on this same alignment line. The
  #appView scope deliberately gives this shell rule priority over route-specific
  breakpoints.
*/
.page-user-app #pageHeroMount .page-hero-inner,
.page-user-app #appView .account-card,
.page-user-app #appView .search-page-intro,
.page-user-app #appView .active-access-card,
.page-user-app #appView .form-panel,
.page-user-app #appView .carloan-profile-panel,
.page-user-app #appView .recap-panel,
.page-user-app #appView .results-card,
.page-user-app #appView .loan-outcome-panel,
.page-user-app #appView .contribution-context-box,
.page-user-app #appView .private-evidence-panel,
.page-user-app #appView .contribution-reward-panel,
.page-user-app #appView .contribute-submit-panel,
.page-user-app #appView .contribution-payment-card,
.page-user-app #appView .mortgage-step-progress,
.page-user-app #appView .mortgage-step-card,
.page-user-app .app-route-error {
  padding-inline: var(--user-major-panel-inline-padding) !important;
}

/*
  Uniform vertical spacing between major user-shell boxes. Row-gap is used
  so desktop column spacing can retain its route-specific value.
*/
.page-user-app #appView .account-dashboard,
.page-user-app #appView .account-dashboard-stack,
.page-user-app #appView .account-shell-grid,
.page-user-app #appView .search-layout,
.page-user-app #appView .search-workspace,
.page-user-app #appView .search-form-grid,
.page-user-app #appView .carloan-profile-grid,
.page-user-app #appView .contribute-workspace,
.page-user-app #appView .mortgage-wizard-shell {
  row-gap: var(--user-major-panel-gap);
}

.page-user-app #appView .contribute-workspace > form,
.page-user-app #appView #searchForm {
  gap: var(--user-major-panel-gap);
}

.app-view {
  margin-top: var(--user-major-panel-gap);
}

.app-view[aria-busy="true"] {
  opacity: 0.68;
  pointer-events: none;
}

/* ==========================================================================
   Route / shell feedback
   ========================================================================== */

.app-route-error {
  margin-top: var(--user-major-panel-gap);
  background: #ffffff;
  border: 1px solid rgba(190, 18, 60, 0.18);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(15, 35, 75, 0.08);
  padding: 28px;
}

.app-route-error h2 {
  margin: 0 0 8px;
  color: #9f1239;
  font-size: 1.4rem;
}

.app-route-error p {
  margin: 0 0 10px;
  color: var(--muted, #667085);
}

.app-route-error p:last-child {
  margin-bottom: 0;
}

.app-route-error a {
  color: var(--brand, #2053b1);
  font-weight: 800;
  text-decoration: none;
}

.app-route-error a:hover,
.app-route-error a:focus {
  text-decoration: underline;
}

/* ==========================================================================
   Account view
   ========================================================================== */

.account-shell-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 22px;
  align-items: start;
}

.account-card {
  background: #ffffff;
  border: 1px solid rgba(26, 52, 99, 0.12);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(15, 35, 75, 0.08);
  padding: 26px;
}

.account-card h2 {
  margin: 0 0 10px;
  color: var(--ink, #17233c);
  font-size: 1.35rem;
}

.account-card p {
  margin: 0 0 14px;
  color: var(--muted, #667085);
  line-height: 1.55;
}

.account-card p:last-child {
  margin-bottom: 0;
}

.account-detail-list {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
}

.account-detail-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid rgba(26, 52, 99, 0.1);
}

.account-detail-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.account-detail-label {
  color: var(--muted, #667085);
  font-size: 0.92rem;
  font-weight: 800;
}

.account-detail-value {
  color: var(--ink, #17233c);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.account-action-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.account-action-link,
.account-action-button {
  appearance: none;
  border: 1px solid rgba(32, 83, 177, 0.18);
  border-radius: 16px;
  background: #f7f9ff;
  color: var(--brand, #2053b1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  text-decoration: none;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.account-action-link:hover,
.account-action-link:focus,
.account-action-button:hover,
.account-action-button:focus {
  border-color: rgba(32, 83, 177, 0.36);
  background: #eef4ff;
  text-decoration: none;
}

.account-action-link span,
.account-action-button span {
  color: var(--muted, #667085);
  font-weight: 800;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

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

  .account-card {
    padding: 22px;
  }
}

@media (max-width: 560px) {
  .auth-loading {
    padding: 16px;
  }

  .auth-loading-card {
    padding: 28px 20px;
    border-radius: 20px;
  }

  .auth-loading-card img {
    width: 88px;
  }

  .app-view {
    margin-top: var(--user-major-panel-gap);
  }

  .account-detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}