/* ═══════════════════════════════════════════════════════════════════════════
   CV MAKER – Custom Styles
   Color palette mirrors the generated resume for visual consistency
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────────────────────── */
:root {
  --navy:         #1B2A4A;   /* Header bg, dark elements            */
  --blue:         #1B3872;   /* Section headings, accent            */
  --sidebar-bg:   #ECEEF2;   /* Resume sidebar colour               */
  --page-bg:      #F4F6F9;   /* App background                      */
  --card-bg:      #FFFFFF;
  --border:       #DDE2EE;
  --text-dark:    #1A202C;
  --text-body:    #374151;
  --text-muted:   #6B7280;
  --success:      #10B981;
  --danger:       #EF4444;
  --accent:       #1B3872;
  --accent-hover: #152d61;
  --nav-w:        220px;
  --topbar-h:     62px;
}

/* ── Reset / Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--page-bg);
  color: var(--text-body);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  padding-top: calc(var(--topbar-h) + 26px); /* topnav + profile bar */
}

/* ── Top navbar ─────────────────────────────────────────────────────────────── */
#topnav {
  background: var(--navy);
  height: var(--topbar-h);
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
  z-index: 1030;
}

#topnav .navbar-brand {
  font-size: 1.05rem;
  letter-spacing: .5px;
}

/* ── Profile switcher button ─────────────────────────────────────────────────── */
.btn-profile {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: 7px;
  padding: .28rem .7rem;
  font-size: .82rem;
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .15s;
}
.btn-profile:hover, .btn-profile:focus, .btn-profile.show {
  background: rgba(255,255,255,.22);
  color: #fff;
  border-color: rgba(255,255,255,.45);
}
.btn-profile::after { margin-left: .4rem; }

/* ── Profile dropdown menu ───────────────────────────────────────────────────── */
.profile-dropdown {
  min-width: 240px;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .4rem 0;
}

.profile-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .83rem;
  padding: .4rem 1rem;
}

.profile-item-active {
  background: #eef2fb;
  font-weight: 600;
  color: var(--blue) !important;
}

.profile-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.profile-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Profile context bar ─────────────────────────────────────────────────────── */
.profile-context-bar {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  background: var(--blue);
  color: rgba(255,255,255,.85);
  font-size: .78rem;
  padding: .22rem 1.25rem;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: .25rem;
}

.profile-context-bar strong { color: #fff; }

/* ── Accent / navy buttons ───────────────────────────────────────────────────── */
.btn-accent {
  background: var(--accent);
  color: #fff;
  border: none;
  transition: background .2s;
}
.btn-accent:hover, .btn-accent:focus {
  background: var(--accent-hover);
  color: #fff;
}

.btn-navy {
  background: var(--navy);
  color: #fff;
  border: none;
}
.btn-navy:hover { background: #243660; color: #fff; }

/* ── Modal header ────────────────────────────────────────────────────────────── */
.modal-header-navy {
  background: var(--navy);
  border-bottom: none;
  border-radius: .375rem .375rem 0 0;
}

/* ── Layout wrapper ──────────────────────────────────────────────────────────── */
.layout-wrapper {
  display: flex;
  min-height: calc(100vh - var(--topbar-h));
}

/* ── Sidebar nav ─────────────────────────────────────────────────────────────── */
.section-sidebar {
  width: var(--nav-w);
  min-width: var(--nav-w);
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}

.sticky-sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + 26px);
  height: calc(100vh - var(--topbar-h) - 26px);
  overflow-y: auto;
  padding: 1.25rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.sticky-sidebar .nav-link {
  color: var(--text-body);
  font-size: .82rem;
  padding: .45rem .75rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.sticky-sidebar .nav-link i { font-size: .9rem; }

.sticky-sidebar .nav-link:hover {
  background: var(--sidebar-bg);
  color: var(--blue);
}

.sticky-sidebar .nav-link.active {
  background: var(--blue);
  color: #fff !important;
  font-weight: 600;
}

/* ── Main form content ───────────────────────────────────────────────────────── */
.form-content {
  flex: 1;
  padding: 1.5rem 2rem 3rem;
  max-width: 860px;
}

/* ── Form sections ───────────────────────────────────────────────────────────── */
.form-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}

.section-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .35rem;
}

.section-hint {
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.text-accent { color: var(--accent) !important; }

.req { color: var(--danger); font-size: .9em; }

/* ── Photo upload ────────────────────────────────────────────────────────────── */
.photo-upload-area {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.25rem;
  background: var(--page-bg);
  border: 2px dashed var(--border);
  border-radius: 10px;
}

.photo-preview {
  width: 100px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-placeholder-icon {
  font-size: 2.5rem;
  color: var(--text-muted);
}

.photo-placeholder-text {
  font-size: .7rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: .25rem;
}

/* ── Dynamic entry cards ─────────────────────────────────────────────────────── */
.entry-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  position: relative;
  transition: box-shadow .2s;
}

.entry-card:hover {
  box-shadow: 0 3px 14px rgba(27,42,74,.08);
}

.entry-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.entry-card-label {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--blue);
}

.btn-remove-card {
  background: none;
  border: 1px solid #f0cccc;
  color: var(--danger);
  border-radius: 6px;
  padding: .2rem .55rem;
  font-size: .75rem;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.btn-remove-card:hover {
  background: #fef2f2;
  border-color: var(--danger);
}

/* ── Skill pair row ──────────────────────────────────────────────────────────── */
.skill-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

.skill-row input {
  flex: 1;
}

.skill-separator {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.btn-remove-inline {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: .25rem .45rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}

.btn-remove-inline:hover {
  color: var(--danger);
  border-color: #f0cccc;
}

/* ── Simple row items (languages, comp edu) ─────────────────────────────────── */
.simple-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

.simple-row input {
  flex: 1;
}

/* ── Bullet list within entry cards ─────────────────────────────────────────── */
.bullets-section {
  margin-top: 1rem;
}

.bullets-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: .5rem;
}

.bullet-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .45rem;
}

.bullet-row::before {
  content: '◦';
  color: var(--blue);
  font-size: 1rem;
  margin-top: .35rem;
  flex-shrink: 0;
}

.bullet-row textarea {
  flex: 1;
  resize: vertical;
  min-height: 38px;
}

/* ── Add row button ──────────────────────────────────────────────────────────── */
.btn-add-row {
  background: none;
  border: 1px dashed var(--blue);
  color: var(--blue);
  border-radius: 7px;
  padding: .35rem .9rem;
  font-size: .83rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.btn-add-row:hover {
  background: #eef2fb;
}

.btn-add-bullet {
  background: none;
  border: none;
  color: var(--blue);
  font-size: .78rem;
  padding: .2rem 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.btn-add-bullet:hover { text-decoration: underline; }

/* ── Save status ─────────────────────────────────────────────────────────────── */
.save-status {
  font-size: .78rem;
  transition: color .3s;
}

.save-status.saved { color: #6ee7b7 !important; }
.save-status.saving { color: #fbbf24 !important; }
.save-status.error { color: #fca5a5 !important; }

/* ── Generate footer ─────────────────────────────────────────────────────────── */
.generate-footer {
  text-align: center;
  padding: 2rem 1rem 1rem;
}

/* ── Loading overlay ─────────────────────────────────────────────────────────── */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27,42,74,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-box {
  text-align: center;
}

/* ── Toast ───────────────────────────────────────────────────────────────────── */
.custom-toast {
  min-width: 280px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* ── Form control tweaks ─────────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 .2rem rgba(27,56,114,.15);
}

.form-label { font-size: .85rem; font-weight: 600; color: var(--text-dark); }

/* ── Drag handle reorder hint ────────────────────────────────────────────────── */
.drag-hint {
  color: var(--border);
  cursor: grab;
  font-size: 1.1rem;
}

/* ── Section hide / show toggle ─────────────────────────────────────────────── */
.btn-section-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .25rem .48rem;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
  flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s;
}

.btn-section-toggle:hover {
  color: var(--blue);
  border-color: var(--blue);
  background: rgba(27,56,114,.06);
}

/* Hidden section: faded out, dashed border, eye-slash turns red */
.form-section.section-hidden {
  opacity: .5;
  border-style: dashed;
}

.form-section.section-hidden .btn-section-toggle {
  color: var(--danger);
  border-color: #f0cccc;
}

/* ── PDF Section Label ───────────────────────────────────────────────────────── */
.pdf-label-row {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex-shrink: 0;
}

.pdf-label-hint {
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}

.pdf-label-input {
  width: 200px;
  font-size: .78rem;
  padding: .22rem .5rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  color: var(--blue);
  font-weight: 600;
  letter-spacing: .4px;
  background: rgba(27,56,114,.04);
  transition: border-color .15s, box-shadow .15s;
}

.pdf-label-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 .15rem rgba(27,56,114,.15);
}

/* ── Skill Progress Bar Row ──────────────────────────────────────────────────── */
.skill-bar-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .75rem;
}

.skill-bar-inputs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.skill-level-group {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.skill-level-slider {
  flex: 1;
  height: 4px;
  accent-color: var(--blue);
  cursor: pointer;
}

.skill-pct-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--blue);
  min-width: 34px;
  text-align: right;
  flex-shrink: 0;
}

.skill-bar-preview-wrap {
  width: 110px;
  flex-shrink: 0;
}

.skill-bar-preview-track {
  width: 100%;
  height: 9px;
  background: #C8CFD9;
  border-radius: 5px;
  overflow: hidden;
}

.skill-bar-preview-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 5px;
  transition: width .15s ease;
}

/* ── Responsive tweaks ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-sidebar { display: none; }
  .form-content { padding: 1rem; max-width: 100%; }
  .photo-upload-area { flex-direction: column; align-items: center; }
  .pdf-label-input { width: 100%; }
  .skill-bar-preview-wrap { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PDF PREVIEW MODAL STYLES
   ══════════════════════════════════════════════════════════════════════════ */

.pdf-editor-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #0f1929;
}

.pdf-editor-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Preview panel ──────────────────────────────────────────────────────── */
.pdf-editor-preview {
  flex: 1;
  position: relative;
  background: #2a2a2a;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.preview-loading {
  position: absolute;
  inset: 0;
  background: rgba(10,18,35,.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(2px);
}

.preview-error {
  position: absolute;
  inset: 0;
  background: rgba(10,18,35,.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  text-align: center;
  padding: 2rem;
}

.pdf-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #2a2a2a;
}

.text-navy {
  color: var(--navy);
}