/* ==========================================================================
   MyJobAlly — Candidate profile edit page styles
   ========================================================================== */

/* ---- Avatar + header ---- */
.profile-avatar-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.avatar-upload-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-md);
}
.avatar-upload-wrap img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--brand-pink-soft);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--border-light);
}
.avatar-upload-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand-pink);
  color: #fff;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.avatar-upload-btn .icon { width: 14px; height: 14px; }

.profile-avatar-card h2 { font-size: 18px; margin-bottom: 2px; }
.profile-avatar-card p { font-size: 13.5px; color: var(--text-muted); }

.profile-visibility-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
  font-size: 13.5px;
}

/* ---- Section cards (reused across profile sections) ---- */
.profile-section {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.profile-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}
.profile-section-header h2 {
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-section-header h2 .icon { width: 18px; height: 18px; color: var(--brand-pink); }

.btn-add-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-pink);
  background: none;
  border: none;
  cursor: pointer;
}
.btn-add-item .icon { width: 15px; height: 15px; }

/* ---- Form fields (shared) ---- */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.form-group { margin-bottom: var(--space-md); }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-family: inherit;
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--brand-pink); }

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-body);
}
.checkbox-inline input { accent-color: var(--brand-pink); }

/* ---- Repeating entry card (experience / education / certifications) ---- */
.entry-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  position: relative;
}
.entry-card-actions {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  gap: 6px;
}
.entry-icon-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
}
.entry-icon-btn:hover { color: var(--brand-pink); border-color: var(--brand-pink); }
.entry-icon-btn .icon { width: 14px; height: 14px; }

.entry-card h3 { font-size: 15px; margin-bottom: 2px; padding-right: 70px; }
.entry-card .entry-subtitle { font-size: 13.5px; color: var(--text-muted); margin-bottom: 6px; }
.entry-card .entry-daterange { font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px; }
/*
  Was p.entry-desc (tag-qualified) — changed on request, alongside
  switching the Work Experience "Description" field to the same rich
  text editor employer/post-job.php's Job Description already uses.
  The rendered content can now contain block-level tags (p, ul, ol,
  h2, h3, blockquote), which aren't valid nested inside a <p> — the
  markup itself switched to a <div> for that reason, so the selector
  has to stop requiring the tag to still match it.
*/
.entry-card .entry-desc { font-size: 13.5px; color: var(--text-body); }
.entry-card .entry-desc p { margin: 0 0 8px; }
.entry-card .entry-desc p:last-child { margin-bottom: 0; }
.entry-card .entry-desc ul, .entry-card .entry-desc ol { margin: 0 0 8px; padding-left: 20px; }
.entry-card .entry-desc h2, .entry-card .entry-desc h3 { font-size: 14px; margin: 10px 0 4px; }

/*
  Added on request — employer/profile-preview.php and
  employer/public-profile.php's "About the Company" weren't respecting
  paragraph breaks at all once switched to TinyMCE. Root cause: this
  site's own global reset in brand.css (`* { margin: 0; padding: 0; }`)
  zeroes out every element's margin by default, including <p> — so
  multiple real <p> tags from the editor were rendering with zero space
  between them, visually running together into what looked like one
  block despite being genuinely separate paragraphs underneath. Exact
  same fix as .entry-card .entry-desc above (built for candidate work
  experience), generalized under its own class name here since this
  now needs to cover more than one field.
*/
.rich-text-content p { margin: 0 0 12px; }
.rich-text-content p:last-child { margin-bottom: 0; }
.rich-text-content ul, .rich-text-content ol { margin: 0 0 12px; padding-left: 20px; }
.rich-text-content h2, .rich-text-content h3 { margin: 16px 0 6px; }
.rich-text-content h2:first-child, .rich-text-content h3:first-child { margin-top: 0; }
.rich-text-content blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--border-light); color: var(--text-muted); }

/* ---- Skills tag cloud ---- */
.skills-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  padding: 6px 8px 6px 14px;
  border-radius: 18px;
  font-size: 13px;
}
.skill-pill .proficiency {
  font-size: 10.5px;
  color: var(--brand-pink);
  background: var(--brand-pink-soft);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.skill-pill button {
  background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex;
}
.skill-pill .icon { width: 13px; height: 13px; }

/* ---- Resume upload ---- */
.resume-upload-box {
  position: relative;
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.resume-upload-box:hover { border-color: var(--brand-pink); background: var(--brand-pink-soft); }
.resume-upload-box .icon { width: 32px; height: 32px; color: var(--text-muted); margin-bottom: var(--space-sm); }
.resume-upload-box p { font-size: 14px; color: var(--text-body); margin-bottom: 4px; }
.resume-upload-box span { font-size: 12.5px; color: var(--text-muted); }

.resume-file-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}
.resume-file-row .icon.file-icon { width: 28px; height: 28px; color: var(--brand-pink); flex-shrink: 0; }
.resume-file-row-body { flex: 1; }
.resume-file-row-body strong { display: block; font-size: 14px; }
.resume-file-row-body span { font-size: 12.5px; color: var(--text-muted); }

/* Modernized resume/CV upload card, added on request — replaces a bare,
   unstyled native <input type="file"> with a proper dropzone-style
   control. Same hidden-input-plus-styled-control technique already
   used for the avatar upload above (.avatar-upload-btn), just styled
   for a document upload rather than a circular photo. */
.resume-upload-modern {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-soft, #FAFAFB);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.resume-upload-modern:hover,
.resume-upload-modern.is-dragover {
  border-color: var(--brand-pink);
  background: var(--brand-pink-soft);
}
.resume-upload-modern input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.resume-upload-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--brand-pink-soft);
  color: var(--brand-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.resume-upload-modern:hover .resume-upload-icon,
.resume-upload-modern.is-dragover .resume-upload-icon {
  background: var(--brand-pink);
  color: #fff;
}
.resume-upload-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.resume-upload-text strong { font-size: 14.5px; color: var(--text-dark); }
.resume-upload-text span { font-size: 12.5px; color: var(--text-muted); }
.resume-upload-browse { color: var(--brand-pink); font-weight: 600; text-decoration: underline; }
.resume-upload-filename {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-pink) !important;
  margin-top: 2px;
  word-break: break-all;
}

@media (max-width: 600px) {
  .resume-upload-modern { flex-direction: column; text-align: center; padding: var(--space-md); }
}

.form-actions-sticky {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* ---- Custom Profile URL ---- */
.url-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.url-input-group .url-prefix {
  background: var(--bg-alt);
  color: var(--text-muted);
  padding: 11px 14px;
  font-size: 14px;
  white-space: nowrap;
  border-right: 1px solid var(--border-light);
  display: flex;
  align-items: center;
}
.url-input-group input {
  border: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.url-input-group input:focus { border: none; }

.url-availability {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  margin-top: 6px;
}
.url-availability.available { color: #16A34A; }
.url-availability.taken { color: #DC2626; }
.url-availability .icon { width: 14px; height: 14px; }

/* ---- Contact Candidate button preview ---- */
.contact-btn-preview {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  background: var(--bg-alt);
  margin-top: var(--space-sm);
}
.contact-btn-preview-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
  display: block;
}
.contact-candidate-btn, .contact-employer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-pink);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.contact-candidate-btn:hover, .contact-employer-btn:hover { background: var(--brand-pink-light); color: #fff; }
.contact-candidate-btn .icon, .contact-employer-btn .icon { width: 16px; height: 16px; }

/* ---- Company logo upload (square, distinct from candidate's circular avatar) ---- */
.logo-upload-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-md);
}
.logo-upload-wrap img {
  width: 96px; height: 96px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
}
.logo-upload-wrap .avatar-upload-btn {
  position: absolute;
  bottom: -4px;
  right: -4px;
}

@media (max-width: 700px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}