/*
 * profile.css — Profile DISPLAY + Profile EDIT overlay (com_users view=profile, items 427/428)
 * Injected via addCustomTag in html/com_users/profile/default.php + edit.php.
 * All rules scoped to body.view-profile / .com-users-profile / .com-users-profile__edit
 * so zero cross-page risk. NO shared scss touched. php -l clean.
 *
 * .pen frames: Profile AXuQO(dark)/opWnB(light)/kuyn9(mobile);
 *              Profile Edit qPLWM(dark)/S3c4AP(light)/o3WweA(mobile).
 *
 * Fixes:
 *   PR1  Masthead eyebrow: --color-muted → --color-text-dim (.pen #6B7196/#888EA6)
 *   PR2  ProfileHeader badge bg: surface-2(#1A1C36) → card-2(#181A33) in dark (.pen Badge kDVXd)
 *   PR3  Edit-profile button: btn-outline/btn-sm + FA icon → Button/Secondary look (.pen I5kO8)
 *   PR4  Info-card border: --color-border → --color-border-soft (.pen #1C1E38/#ECEEF5)
 *   PR5  Info-row label (dt): --color-muted → --color-text-dim (.pen #6B7196/#888EA6)
 *   PR6  Email size 14 → 15 (.pen XHTtz 15px)
 *   PE-W Edit form/cards collapse to 310px + inputs capped max-width:240px → full-width (.pen 880 card, full inputs)
 *   PE1  Edit masthead eyebrow: --color-muted → --color-text-dim
 *   PE2  Cancel button: btn-outline → Button/Secondary look (.pen I5kO8)
 *   PE3  Time Zone Choices.js: radius 2.5 → 10, light-mode parity with sibling native selects
 */

/* ---- PR1 / PE1 — Masthead eyebrow muted → text-dim --------------------- */
body.view-profile .masthead-eyebrow {
  color: var(--color-text-dim) !important;
}

/* ---- PR0 / PE0 — Masthead H1 + sub exact-px (.pen AXuQO/qPLWM):
   H1 38px (shared scss gives 40px), sub Inter 16px / line-height 25px muted.
   Page-scoped so the shared com_users masthead (login/register 40px) is untouched. */
body.view-profile .t4-masthead-title {
  font-size: 38px !important;
}
body.view-profile .masthead-sub {
  font-size: 16px !important;
  line-height: 1.5625 !important;
  max-width: 560px !important;
}

/* ================= PROFILE DISPLAY ===================================== */

/* PR2 — Badge surface (Pro plan · Active pill): .pen card-2 #181A33 dark.
   surface-2 = #1A1C36 in dark; card-2 = #181A33. In light both = #EEF1F8. */
body.view-profile .profile-badge {
  background: var(--color-card-2) !important;
}

/* PR6 — email 15px (.pen XHTtz Inter 15) */
body.view-profile .profile-email {
  font-size: 15px !important;
}

/* PR3 — Edit-profile button → Button/Secondary (.pen I5kO8):
   transparent, 1px $border (#262945 dark / #E2E6F0 light), label $heading,
   Geist 15/600, pad[13,23], r10. NOT btn-outline (border-strong + dim text)
   and NOT btn-sm (shrunk). */
body.view-profile .profile-edit-btn.btn,
body.view-profile a.profile-edit-btn {
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-heading) !important;
  font-family: var(--font-heading);
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 13px 23px !important;
  line-height: 1.2;
}
body.view-profile .profile-edit-btn.btn:hover,
body.view-profile a.profile-edit-btn:hover {
  border-color: var(--color-border-strong) !important;
  color: var(--color-heading) !important;
  background: rgb(var(--color-heading-rgb, 11 13 26) / 0.04) !important;
}
/* PR3 — drop the stray FontAwesome user glyph (.pen has no icon on this btn) */
body.view-profile .profile-edit-btn .icon-user {
  display: none !important;
}

/* PR4 — Info-card border → border-soft (.pen #1C1E38 dark / #ECEEF5 light) */
body.view-profile .info-card {
  border-color: var(--color-border-soft) !important;
}
body.view-profile .info-card-title,
body.view-profile .info-row {
  border-color: var(--color-border-soft) !important;
}

/* PR5 — Info-row label (dt) muted → text-dim (.pen ghb3y #6B7196/#888EA6) */
body.view-profile .info-row dt {
  color: var(--color-text-dim) !important;
}

/* ================= PROFILE EDIT ======================================== */

/* PE-W — The form + edit cards collapse to fit-content (~310px) because they
   never get width:100%, and inputs are capped by the platform default
   .form-control{max-width:240px}. Force the form, cards, control rows, and
   every field to fill the 880px container so the layout matches the .pen
   (cards fill the inner; inputs full-width). */
body.view-profile .com-users-profile__edit-form,
body.view-profile .com-users-profile__edit .edit-card,
body.view-profile .com-users-profile__edit .edit-card.card {
  width: 100% !important;
  max-width: none !important;
}
body.view-profile .edit-card .control-group,
body.view-profile .edit-card .form-group,
body.view-profile .edit-card .controls,
body.view-profile .edit-card .control-label {
  width: 100% !important;
  max-width: none !important;
}
body.view-profile .edit-card input.form-control,
body.view-profile .edit-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),
body.view-profile .edit-card select,
body.view-profile .edit-card select.form-select,
body.view-profile .edit-card textarea,
body.view-profile .edit-card textarea.form-control,
body.view-profile .edit-card .input-group {
  width: 100% !important;
  max-width: none !important;
}

/* PE2 — Cancel button → Button/Secondary look (same as PR3) */
body.view-profile .edit-actions .btn-outline,
body.view-profile .edit-actions a.btn {
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-heading) !important;
  font-family: var(--font-heading);
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 13px 23px !important;
}
body.view-profile .edit-actions .btn-outline:hover,
body.view-profile .edit-actions a.btn:hover {
  border-color: var(--color-border-strong) !important;
  color: var(--color-heading) !important;
  background: rgb(var(--color-heading-rgb, 11 13 26) / 0.04) !important;
}

/* PE4 — Save button → FLAT primary (.pen Button/Primary Cfh6P): the shared
   _nexora.scss .btn-primary paints a GRADIENT + a hover translateY(-1px). The
   .pen Save = a FLAT $accent fill (#2563EB light / #3B82F6 dark), NO border,
   Geist 15/600 label, pad[14,24], radius 10, no hover box-shift. Mirrors the
   auth L8 rule so Save matches the established primary. Base was Inter 700 16px
   with a border + gradient. */
body.view-profile .edit-actions .btn.btn-primary,
body.view-profile .edit-actions button[type="submit"].btn-primary {
  background: var(--color-primary) !important;
  background-image: none !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
  font-family: var(--font-heading) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  box-shadow: none !important;
  transform: none !important;
}
body.view-profile .edit-actions .btn.btn-primary:hover,
body.view-profile .edit-actions button[type="submit"].btn-primary:hover {
  background: var(--color-primary-hover) !important;
  background-image: none !important;
  border-color: var(--color-primary-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* PE5 — Avatar media-field empty preview: Joomla's <joomla-field-media>
   .field-media-preview ships a hardcoded #F2F2F2 box → a light-grey leak in
   dark ([DARK-STUCK-LIGHT]). Token-flip it (light #F5F6FB / dark #101023) so it
   reads in both themes; match the input border + radius. */
body.view-profile .edit-card .field-media-preview {
  background: var(--color-bg-alt) !important; /* $bg-elev: #F5F6FB / #101023 */
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
}
body.view-profile .edit-card .field-media-preview-icon {
  color: var(--color-text-dim) !important;
}

/* PE3 — Time Zone Choices.js widget: align with the sibling native selects.
   The dark surface is handled by darkmode.scss; here fix the geometry (r10,
   full-width) for BOTH themes and re-skin the light control so it matches the
   other r10 #FFF/#E2E6F0 selects (Choices ships #f9f9f9 / radius 2.5). */
body.view-profile .edit-card .choices,
body.view-profile .edit-card .choices__inner {
  width: 100% !important;
  max-width: none !important;
}
body.view-profile .edit-card .choices__inner {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  padding: 9px 14px !important;
  min-height: 0 !important;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--color-heading) !important;
}
body.view-profile .edit-card .choices__list--single .choices__item,
body.view-profile .edit-card .choices__list--single {
  color: var(--color-heading) !important;
}
body.view-profile .edit-card .choices__list--dropdown,
body.view-profile .edit-card .choices__list[aria-expanded] {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
}
body.view-profile .edit-card .choices__list--dropdown .choices__item {
  color: var(--color-text) !important;
}
body.view-profile .edit-card .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: var(--color-card-2) !important;
  color: var(--color-heading) !important;
}
body.view-profile .edit-card .choices__input {
  background: var(--color-surface) !important;
  color: var(--color-heading) !important;
}
/* focus ring on the Choices control (open / focused) */
body.view-profile .edit-card .choices.is-open .choices__inner,
body.view-profile .edit-card .choices.is-focused .choices__inner {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / .2) !important;
}
/* Choices ships a light-circle "clear" button (×) on the selected item — a
   stray white blob on the dark control, and not in the .pen. Joomla renames it
   .choices__button_joomla (NOT .choices__button). Suppress both. */
body.view-profile .edit-card .choices__button,
body.view-profile .edit-card .choices__button_joomla {
  display: none !important;
}
/* The in-dropdown filter input also ships a light surface — pin to dark. */
body.view-profile .edit-card .choices__list--dropdown .choices__input {
  background: var(--color-surface) !important;
  color: var(--color-heading) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
}

/* ---- Mobile (≤767.98) — per-frame masthead parity --------------------------
   .pen DISPLAY mobile (kuyn9): NO masthead — the centered $bg-elev ProfileHeader
     band IS the hero. Hide the desktop masthead on the display page.
   .pen EDIT mobile (o3WweA): SIMPLIFIED masthead — Title "Edit profile" 28px +
     sub, NO eyebrow, NO glow, transparent (page bg), left-aligned pad[36,20,8]. */
@media (max-width: 767.98px) {
  /* Display page: drop the masthead entirely (kuyn9 has none) */
  body.view-profile:has(.com-users-profile.profile) .t4-masthead { display: none !important; }

  /* Edit page: keep masthead but simplify to the o3WweA frame */
  body.view-profile:has(.com-users-profile__edit) .t4-masthead { text-align: left !important; }
  body.view-profile:has(.com-users-profile__edit) .t4-masthead::before { display: none !important; }
  body.view-profile:has(.com-users-profile__edit) .t4-masthead-inner {
    align-items: flex-start !important; padding: 36px 20px 8px !important; gap: 8px !important;
  }
  body.view-profile:has(.com-users-profile__edit) .masthead-eyebrow { display: none !important; }
  body.view-profile.com_users .t4-masthead-title { font-size: 28px !important; }
  body.view-profile:has(.com-users-profile__edit) .masthead-sub { font-size: 14px !important; }
}