/* ==========================================================
   WISAXIS RESUME MAKER — PROFILE & RESUME HUB MOBILE STYLES (2026 SaaS)
   Profile Hero Banner, Resume History Cards, 4-Action Grid, Modals.
   ========================================================== */

/* Main Container */
.profile-container {
  padding: calc(var(--mobile-navbar-height, 64px) + 1rem) var(--space-3) calc(3rem + env(safe-area-inset-bottom, 16px)) !important;
  max-width: 100% !important;
}

/* ===== PROFILE HERO BANNER ===== */
.profile-hero {
  flex-direction: column !important;
  text-align: center !important;
  padding: 1.5rem 1.25rem !important;
  gap: 1.25rem !important;
  border-radius: var(--radius-xl) !important;
  margin-bottom: 2rem !important;
}

.profile-avatar {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  font-size: 1.75rem !important;
  margin: 0 auto !important;
}

.profile-name {
  font-size: 1.5rem !important;
  margin-bottom: 4px !important;
}

.profile-email {
  font-size: var(--text-xs) !important;
}

.profile-actions-bar {
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 1rem !important;
}

.btn-profile-pill {
  min-height: 38px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  -webkit-tap-highlight-color: transparent !important;
}

.btn-profile-pill:active {
  transform: scale(0.96) !important;
}

/* Symmetrical Stat Chips */
.profile-hero-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 0.5rem !important;
}

.profile-stat-item {
  padding: 0.65rem 0.5rem !important;
  min-width: unset !important;
  border-radius: var(--radius-md) !important;
}

.profile-stat-num {
  font-size: 1.25rem !important;
}

.profile-stat-lbl {
  font-size: 10px !important;
}

/* ===== RESUME HISTORY SECTION ===== */
.section-header {
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 1.25rem !important;
  gap: 12px !important;
}

.section-header h2 {
  font-size: 1.35rem !important;
}

/* History Grid */
.history-grid {
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
}

/* Resume History Card */
.resume-card {
  padding: 1.25rem !important;
  border-radius: var(--radius-lg) !important;
}

.resume-title {
  font-size: 1.15rem !important;
}

.resume-subtitle {
  font-size: var(--text-xs) !important;
  margin-bottom: 1rem !important;
}

/* 2x2 Touch Action Grid */
.resume-actions {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 0.85rem !important;
}

.btn-action {
  flex-direction: row !important;
  gap: 6px !important;
  padding: 0.65rem 0.75rem !important;
  min-height: 44px !important;
  font-size: 12px !important;
  border-radius: var(--radius-md) !important;
  -webkit-tap-highlight-color: transparent !important;
}

.btn-action:active {
  transform: scale(0.96) !important;
}

.btn-action svg {
  width: 15px !important;
  height: 15px !important;
}

/* Clone / Duplicate Row */
.clone-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}

.clone-row select {
  flex: 1 !important;
  min-height: 42px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 13px !important;
}

.btn-duplicate {
  min-height: 42px !important;
  padding: 0 16px !important;
  font-size: 12px !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ===== EMPTY STATE ===== */
.empty-state {
  padding: 3rem 1.25rem !important;
  border-radius: var(--radius-xl) !important;
}

.empty-title {
  font-size: 1.4rem !important;
}

.empty-desc {
  font-size: var(--text-sm) !important;
}

/* ===== MODAL MOBILE BOTTOM SHEET ===== */
.modal-overlay {
  padding: 0 !important;
  align-items: flex-end !important;
}

.modal-card {
  max-width: 100% !important;
  border-radius: 20px 20px 0 0 !important;
  max-height: 88vh !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
}

.modal-header {
  padding: 1.25rem 1.25rem !important;
}

.modal-body {
  padding: 1.25rem !important;
}

.modal-body input,
.modal-body textarea {
  font-size: 16px !important; /* iOS zoom prevention */
  min-height: 48px !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--radius-md) !important;
}

.modal-footer {
  padding: 1rem 1.25rem !important;
  gap: 8px !important;
}

.modal-footer button,
.modal-footer .btn {
  min-height: 46px !important;
  flex: 1 !important;
  font-size: var(--text-sm) !important;
  border-radius: var(--radius-md) !important;
  -webkit-tap-highlight-color: transparent !important;
}

.modal-footer button:active,
.modal-footer .btn:active {
  transform: scale(0.96) !important;
}

/* ===== ULTRA-NARROW PROFILE (≤380px) ===== */
@media (max-width: 380px) {
  .profile-container {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
  }

  .profile-hero {
    padding: 1.25rem 1rem !important;
  }

  .profile-avatar {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    font-size: 1.5rem !important;
  }

  .profile-name {
    font-size: 1.3rem !important;
  }

  .profile-hero-stats {
    gap: 6px !important;
  }

  .profile-stat-item {
    padding: 0.5rem 0.4rem !important;
  }

  .profile-stat-num {
    font-size: 1.1rem !important;
  }

  .profile-stat-lbl {
    font-size: 9px !important;
  }

  .resume-card {
    padding: 1rem !important;
  }

  .resume-title {
    font-size: 1.05rem !important;
  }

  .btn-action {
    padding: 0.55rem 0.6rem !important;
    font-size: 11px !important;
  }

  .btn-action svg {
    width: 14px !important;
    height: 14px !important;
  }

  .section-header h2 {
    font-size: 1.2rem !important;
  }

  .btn-profile-pill {
    font-size: 11px !important;
    padding: 0 12px !important;
  }
}