/*
|--------------------------------------------------------------------------
| FortuneSpace Theme V3 — Member Core
|--------------------------------------------------------------------------
|
| Phase 1E
|
| Profile system migrated to semantic FortuneSpace tokens.
| Works in both Midnight and Pearl.
|
*/


/* ================================================================
   PROFILE PAGE SHELL
   ================================================================ */

body.fs-profile-page {
  color:
    var(--fs-text);
}


/* ================================================================
   PROFILE HERO
   ================================================================ */

body.fs-profile-page .fs-profile-hero {
  margin-bottom:
    26px;

  padding:
    22px;

  color:
    var(--fs-text);

  background:
    var(--fs-surface);

  border:
    1px solid var(--fs-border);

  border-radius:
    var(--fs-radius-lg);

  box-shadow:
    var(--fs-shadow-sm);
}


body.fs-profile-page .fs-profile-identity {
  display:
    flex;

  align-items:
    center;

  gap:
    16px;

  min-width:
    0;
}


body.fs-profile-page .fs-profile-avatar {
  width:
    72px;

  height:
    72px;

  flex:
    0 0 72px;

  object-fit:
    cover;

  border:
    2px solid var(--fs-surface);

  border-radius:
    18px;

  box-shadow:
    0 7px 20px rgba(2,6,23,.13);
}


body.fs-profile-page .fs-profile-title {
  margin:
    0;

  color:
    var(--fs-text);

  line-height:
    1.15;
}


body.fs-profile-page .fs-profile-followers {
  margin:
    5px 0 0;

  color:
    var(--fs-text-secondary);

  font-size:
    14px;

  font-weight:
    700;
}


body.fs-profile-page .fs-profile-name {
  margin:
    4px 0 0;

  color:
    var(--fs-text);

  font-weight:
    700;
}


body.fs-profile-page .fs-profile-bio {
  max-width:
    680px;

  margin:
    5px 0 0;

  color:
    var(--fs-text-muted);

  line-height:
    1.5;
}


/* ================================================================
   PROFILE ACTIONS
   ================================================================ */

body.fs-profile-page .fs-profile-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px;

  margin-top:
    18px;
}


body.fs-profile-page .fs-profile-action {
  display:
    inline-flex;

  min-height:
    39px;

  padding:
    9px 14px;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--fs-text-secondary) !important;

  background:
    var(--fs-surface-raised) !important;

  border:
    1px solid var(--fs-border-strong) !important;

  border-radius:
    11px !important;

  box-shadow:
    none !important;

  font-weight:
    700;

  text-decoration:
    none;
}


body.fs-profile-page .fs-profile-action:hover {
  color:
    var(--fs-text) !important;

  border-color:
    var(--fs-border-emphasis) !important;
}


body.fs-profile-page
.fs-profile-action--primary {
  color:
    var(--fs-brand-contrast) !important;

  background:
    var(--fs-brand) !important;

  border-color:
    var(--fs-brand) !important;

  box-shadow:
    0 8px 20px rgba(34,197,94,.13) !important;
}


body.fs-profile-page
.fs-profile-action--primary:hover {
  color:
    var(--fs-brand-contrast) !important;

  background:
    var(--fs-brand-hover) !important;

  border-color:
    var(--fs-brand-hover) !important;
}


/* ================================================================
   PROFILE PAGE TITLES
   ================================================================ */

body.fs-profile-page .fs-profile-page-title {
  margin:
    0 0 20px;

  color:
    var(--fs-text);

  font-family:
    var(
      --fs-headline-font,
      system-ui
    );

  font-size:
    clamp(25px, 3vw, 32px);

  font-weight:
    850;

  letter-spacing:
    -.02em;
}


/* ================================================================
   PROFILE PANELS
   ================================================================ */

body.fs-profile-page .fs-profile-panel {
  width:
    min(100%, 720px);

  padding:
    22px;

  color:
    var(--fs-text);

  background:
    var(--fs-surface);

  border:
    1px solid var(--fs-border);

  border-radius:
    var(--fs-radius-lg);

  box-shadow:
    var(--fs-shadow-sm);
}


/* ================================================================
   PROFILE SETTINGS
   ================================================================ */

body.fs-profile-page .fs-profile-form {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


body.fs-profile-page .fs-profile-form label {
  color:
    var(--fs-text-secondary);

  font-weight:
    700;
}


body.fs-profile-page .fs-profile-form .fs-input {
  width:
    100%;

  color:
    var(--fs-text);

  background:
    var(--fs-surface-soft);

  border:
    1px solid var(--fs-border-strong);

  border-radius:
    12px;
}


body.fs-profile-page
.fs-profile-form .fs-input:focus {
  background:
    var(--fs-surface);

  border-color:
    var(--fs-brand);

  box-shadow:
    var(--fs-focus);

  outline:
    0;
}


/* ================================================================
   PROFILE STATUS MESSAGE
   ================================================================ */

body.fs-profile-page .fs-profile-message {
  width:
    min(100%, 720px);

  margin-bottom:
    14px;

  padding:
    11px 14px;

  color:
    var(--fs-brand-text);

  background:
    var(--fs-success-soft);

  border:
    1px solid rgba(34,197,94,.2);

  border-radius:
    12px;
}


/* ================================================================
   PROFILE PHOTO MANAGEMENT
   ================================================================ */

body.fs-profile-page .fs-profile-photo-current,
body.fs-profile-page .fs-profile-photo-thumb {
  width:
    120px;

  height:
    120px;

  object-fit:
    cover;

  border:
    1px solid var(--fs-border-strong);

  border-radius:
    16px;

  background:
    var(--fs-surface-raised);

  box-shadow:
    var(--fs-shadow-sm);
}


body.fs-profile-page .fs-profile-photo-current {
  display:
    block;

  margin-bottom:
    18px;
}


body.fs-profile-page .fs-profile-photo-form {
  width:
    min(100%, 760px);
}


body.fs-profile-page
.fs-profile-photo-form input[type="file"] {
  max-width:
    100%;

  color:
    var(--fs-text-secondary);
}


body.fs-profile-page .fs-profile-cropper-stage {
  width:
    100%;

  max-width:
    720px;

  min-height:
    360px;

  overflow:
    hidden;

  background:
    var(--fs-surface-soft);

  border:
    1px dashed var(--fs-border-strong);

  border-radius:
    16px;
}


body.fs-profile-page .fs-profile-photo-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;
}


body.fs-profile-page
.fs-profile-photo-actions .btn-secondary {
  color:
    var(--fs-text-secondary);

  background:
    var(--fs-surface-raised);

  border:
    1px solid var(--fs-border-strong);
}


body.fs-profile-page
.fs-profile-photo-actions .btn-secondary:hover {
  color:
    var(--fs-text);

  background:
    var(--fs-surface-soft);
}


/* ================================================================
   PROFILE PHOTO GALLERY
   ================================================================ */

body.fs-profile-page .fs-profile-photo-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(120px, 1fr)
    );

  gap:
    14px;

  margin-top:
    14px;
}


body.fs-profile-page .fs-profile-photo-item {
  padding:
    10px;

  text-align:
    center;

  background:
    var(--fs-surface);

  border:
    1px solid var(--fs-border);

  border-radius:
    16px;
}


body.fs-profile-page .fs-profile-photo-thumb {
  margin:
    0 auto;

  cursor:
    zoom-in;
}


/* ================================================================
   PROFILE PAGINATION
   ================================================================ */

body.fs-profile-page .profile-pagination {
  display:
    flex;

  justify-content:
    center;

  gap:
    10px;

  margin:
    28px 0;
}


body.fs-profile-page
.profile-pagination .btn-ghost {
  min-width:
    110px;

  color:
    var(--fs-text-secondary) !important;

  background:
    var(--fs-surface) !important;

  border:
    1px solid var(--fs-border-strong) !important;

  box-shadow:
    var(--fs-shadow-sm);
}


body.fs-profile-page
.profile-pagination .btn-ghost:hover {
  color:
    var(--fs-text) !important;

  background:
    var(--fs-surface-raised) !important;
}


/* ================================================================
   PEARL-SPECIFIC FINISHING
   ================================================================ */

html[data-fs-theme="light"]
body.fs-profile-page .fs-profile-hero,
html[data-fs-theme="light"]
body.fs-profile-page .fs-profile-panel {
  box-shadow:
    0 5px 18px rgba(23,33,26,.05);
}


html[data-fs-theme="light"]
body.fs-profile-page .fs-profile-avatar {
  box-shadow:
    0 7px 20px rgba(23,33,26,.11);
}


/* ================================================================
   MIDNIGHT-SPECIFIC FINISHING
   ================================================================ */

html[data-fs-theme="dark"]
body.fs-profile-page .fs-profile-avatar {
  border-color:
    var(--fs-border-strong);
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 640px) {

  body.fs-profile-page .fs-profile-hero {
    padding:
      18px;

    border-radius:
      16px;
  }


  body.fs-profile-page .fs-profile-identity {
    align-items:
      flex-start;

    gap:
      13px;
  }


  body.fs-profile-page .fs-profile-avatar {
    width:
      64px;

    height:
      64px;

    flex-basis:
      64px;

    border-radius:
      15px;
  }


  body.fs-profile-page .fs-profile-actions {
    display:
      grid;

    grid-template-columns:
      repeat(2, minmax(0,1fr));

    gap:
      8px;
  }


  body.fs-profile-page .fs-profile-action {
    width:
      100%;
  }


  body.fs-profile-page
  .fs-profile-action--primary:first-child {
    grid-column:
      1 / -1;
  }


  body.fs-profile-page .fs-profile-panel {
    padding:
      18px;

    border-radius:
      16px;
  }


  body.fs-profile-page .fs-profile-cropper-stage {
    min-height:
      280px;
  }


  body.fs-profile-page .fs-profile-photo-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }
}


/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

  body.fs-profile-page
  :is(
    .fs-profile-action,
    .fs-input,
    .btn
  ) {
    transition:
      none !important;
  }
}


/* ================================================================
   M4.4C-4A — PROFILE PHOTO MOBILE RELIABILITY
   ================================================================ */

/*
 * Keep CropperJS's absolute interaction layers confined to the
 * cropper area. Older mobile browsers can otherwise produce strange
 * touch hit-testing near the controls below the cropper.
 */

body.fs-profile-photo-page
.fs-profile-cropper-stage {
  position:
    relative;

  overflow:
    hidden;

  isolation:
    isolate;
}


/*
 * Keep profile-photo actions above all cropper interaction layers.
 */

body.fs-profile-photo-page
.fs-profile-photo-actions {
  position:
    relative;

  z-index:
    30;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  pointer-events:
    auto;
}


body.fs-profile-photo-page
#use-photo,
body.fs-profile-photo-page
#cancel {
  position:
    relative;

  z-index:
    31;

  pointer-events:
    auto;

  touch-action:
    manipulation;

  -webkit-tap-highlight-color:
    transparent;
}


/*
 * Profile-photo editing is a focused task.
 * Global search/map/refresh tools must not sit on top of the cropper.
 */

body.fs-profile-photo-page
#fs-search-fab,
body.fs-profile-photo-page
.fs-nudge,
body.fs-profile-photo-page
.fs-map-fab,
body.fs-profile-photo-page
.floating-refresh-container,
body.fs-profile-photo-page
.floating-refresh-btn {
  display:
    none !important;
}


/*
 * Mobile action buttons need a comfortable touch target.
 */

@media (max-width: 640px) {

  body.fs-profile-photo-page
  .fs-profile-photo-actions
  button {
    min-height:
      44px;
  }

}