/* =========================================================
   Profile Page Styles (/account/profile.php)
   Loaded after app.css
   ========================================================= */

.profile-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ------ Layout ------ */

.profile-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: flex-start;
}

.profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Left side: identity card stays its own card.
   Right side: becomes ONE large card that contains all forms. */
.profile-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Turn the forms wrapper into a single big card */
.profile-main__forms {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Remove card “box” look from each inner panel so they read
   as sections inside the single container */
.profile-main__forms .profile-panel.card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Add subtle separators between panels */
.profile-main__forms .profile-panel + .profile-panel {
  border-top: 1px dashed rgba(209, 213, 219, 0.9);
  padding-top: 1.1rem;
  margin-top: 0.3rem;
}

/* Wide panel flag is no longer needed as a visual change,
   but keep it harmless */
.profile-panel--wide {
  width: 100%;
}

/* General card styling (keeps identity card nice and soft) */
.profile-page .card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  padding: 1.4rem 1.5rem;
}

.profile-page .card:hover {
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

/* ------ Identity header (left big card) ------ */

.profile-card--identity {
  padding-bottom: 1.4rem;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, #dbeafe, #eff6ff);
  color: #1d4ed8;
  font-weight: 700;
  font-size: 1.6rem;
}

.profile-identity__eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #9ca3af;
}

.profile-identity__text h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.profile-identity__email {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: #6b7280;
}

/* ------ Chips, badges, meta ------ */

.profile-chip-row {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.profile-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid rgba(156, 163, 175, 0.65);
}

/* Slightly softer badges on this page */
.profile-page .badge {
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
}

.profile-page .badge.success {
  background: #ecfdf5;
  color: #15803d;
}

.profile-page .badge.danger {
  background: #fef2f2;
  color: #b91c1c;
}

/* Joined / last activity / data source / user id */
.profile-meta {
  margin: 1.2rem 0 0;
  display: grid;
  gap: 0.85rem;
  font-size: 0.9rem;
}

.profile-meta dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #9ca3af;
  margin-bottom: 0.2rem;
}

.profile-meta dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ------ Panels & forms inside big right container ------ */

.profile-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile-panel__header h2 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.profile-panel__subtitle {
  margin: 0;
  font-size: 0.88rem;
  color: #6b7280;
}

.profile-panel__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.profile-panel__body--columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}

.profile-panel__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding-top: 0.6rem;
}

/* Fields / labels */
.profile-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.profile-field label,
.profile-field > span:first-child {
  font-weight: 600;
  color: #4b5563;
}

.profile-help {
  font-size: 0.8rem;
  color: #9ca3af;
}

/* Inputs & selects scoped to profile */
.profile-page input[type="text"],
.profile-page input[type="email"],
.profile-page input[type="password"],
.profile-page select {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.profile-page input[type="text"]:focus,
.profile-page input[type="email"]:focus,
.profile-page input[type="password"]:focus,
.profile-page select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
  background: #ffffff;
}

/* Buttons: slightly smaller on this page */
.profile-page .btn {
  font-size: 0.9rem;
  padding: 0.45rem 1.05rem;
}

.profile-page .btn.primary,
.profile-page .btn-primary {
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
}

.profile-page .btn.primary:hover,
.profile-page .btn-primary:hover {
  transform: translateY(-1px);
}

/* Text tones */
.profile-page .muted,
.profile-page .text-muted {
  color: #9ca3af;
}

.profile-page .small {
  font-size: 0.8rem;
}

/* ------ Responsive adjustments ------ */

@media (max-width: 1024px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .profile-sidebar {
    order: 0;
  }

  .profile-main {
    order: 1;
  }
}

@media (max-width: 640px) {
  .profile-page {
    gap: 1.1rem;
  }

  .profile-page .card {
    padding: 1.1rem;
  }

  .profile-identity {
    align-items: flex-start;
  }

  .profile-avatar {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
  }

  .profile-panel__footer {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}