/* ─────────────────────────────────────────────────────────────────────────────
   WorkNow — Κοινή διάταξη βιογραφικού.

   Πριν από αυτό, οι τρεις σελίδες του βιογραφικού (προβολή, φόρμα, βλέμμα
   εταιρείας) στοίβαζαν 8–10 κάρτες σε μία στήλη 800–1100px: μισή οθόνη κενή
   και ατελείωτο scroll. Εδώ η σελίδα γίνεται μια μπάρα ταυτότητας και ένα
   πλέγμα 6 στηλών. Στις σελίδες προβολής (resume, resume_view, 18/10):
   Σύνοψη | Εμπειρία, Εκπαίδευση | Δεξιότητες, και 3 στενές κάρτες από κάτω.

   Το αρχείο ΔΕΝ ορίζει το εσωτερικό των καρτών (.section-title, .tag-list
   κ.λπ.): αυτά μένουν στη σελίδα, ώστε να μη χαλάσει ό,τι ήδη δούλευε.
   ───────────────────────────────────────────────────────────────────────────── */

.resume-shell {
  max-width: 1400px;
  margin: 1.5rem auto 4rem;
  padding: 0 1.5rem;
}

/* Το χρωματικό φόντο έρχεται πλέον από το styles.css και ισχύει σε όλο το
   site — εδώ υπήρχε αντίγραφό του μόνο για τις σελίδες του βιογραφικού. */

/* ── Γυαλί ────────────────────────────────────────────────────────────────
   Ένας ορισμός για τις κάρτες προβολής ΚΑΙ τις κάρτες φόρμας, ώστε η
   επεξεργασία να μοιάζει με τη σελίδα που επεξεργάζεται. Οι κανόνες είναι
   σκόπιμα πιο ειδικοί (.resume-grid > …) από το `.profile-section` που ορίζει
   κάθε σελίδα inline — αλλιώς θα κέρδιζε το παλιό συμπαγές λευκό. */
.resume-hero,
.completeness,
.resume-grid > .profile-section,
.resume-grid > .form-block {
  position: relative;
  overflow: hidden;
  background: linear-gradient(152deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  box-shadow:
    0 10px 30px rgba(20, 50, 90, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Λεπτή χρωματιστή γραμμή στην κορυφή κάθε κάρτας: ξεχωρίζουν με μια ματιά
   χωρίς να χρωματιστεί το κείμενο. */
.resume-grid > .profile-section::before,
.resume-grid > .form-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent, #1976d2), rgba(255, 255, 255, 0) 88%);
}

.resume-grid > *:nth-child(7n+1) { --accent: #1976d2; }
.resume-grid > *:nth-child(7n+2) { --accent: #00897b; }
.resume-grid > *:nth-child(7n+3) { --accent: #7e57c2; }
.resume-grid > *:nth-child(7n+4) { --accent: #ef6c00; }
.resume-grid > *:nth-child(7n+5) { --accent: #2e7d32; }
.resume-grid > *:nth-child(7n+6) { --accent: #c2185b; }
.resume-grid > *:nth-child(7n+7) { --accent: #0288d1; }

/* Οι κάρτες προβολής σηκώνονται στο πέρασμα του ποντικιού. Οι κάρτες φόρμας
   ΔΕΝ σηκώνονται — θα κουνιόταν το πεδίο κάτω από τον κέρσορα ενώ γράφεις —
   αλλά φωτίζονται όταν κάτι μέσα τους πάρει εστίαση. */
.resume-grid > .profile-section,
.resume-grid > .form-block {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.resume-grid > .profile-section:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent, #1976d2) 35%, transparent);
  box-shadow:
    0 16px 40px rgba(20, 50, 90, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.resume-grid > .form-block:focus-within {
  border-color: color-mix(in srgb, var(--accent, #1976d2) 45%, transparent);
  box-shadow:
    0 16px 40px rgba(20, 50, 90, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .resume-grid > .profile-section { transition: none; }
  .resume-grid > .profile-section:hover { transform: none; }
}

/* Υποχρεωτικό πεδίο. Μόνο δύο σε όλη τη φόρμα, οπότε ο αστερίσκος ξεχωρίζει
   αντί να γίνεται θόρυβος. */
.req {
  color: #d32f2f;
  margin-left: 0.2rem;
  font-weight: 700;
}

.req-note {
  font-size: 0.82rem;
  color: #7a8794;
  margin: 0.2rem 0 1.1rem;
}

/* Υπότιτλος ενότητας μέσα σε κάρτα που φιλοξενεί δύο ή τρία πεδία. */
.card-sub {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7a8794;
  margin: 1.4rem 0 0.55rem;
}

.card-sub:first-of-type { margin-top: 0.2rem; }

/* ── Μπάρα ταυτότητας ─────────────────────────────────────────────────────── */
.resume-hero {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  padding: 1.6rem 1.8rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.8rem;
  align-items: center;
}

.resume-hero .profile-photo-container {
  width: 104px;
  height: 104px;
  margin: 0;
}

.hero-name {
  font-size: 1.65rem;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1.2;
}

.hero-title {
  font-size: 1.05rem;
  color: #6c757d;
  font-weight: 500;
  margin-top: 0.25rem;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1rem;
}

.hero-fact {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.95rem;
  min-width: 0;
}

.hero-fact .hero-fact-label {
  color: #93a2b1;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hero-fact .info-value {
  color: #3d4d5c;
  font-weight: 600;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 190px;
}

/* ── Μπάρα πληρότητας ─────────────────────────────────────────────────────── */
.completeness {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  padding: 1.1rem 1.4rem;
  margin-top: 1.25rem;
}

.completeness-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.completeness-head strong { color: #2c3e50; font-size: 1.02rem; }
.completeness-percent { font-weight: 700; color: #1976d2; font-size: 1.05rem; }

.meter {
  height: 8px;
  background: #eef2f6;
  border-radius: 99px;
  overflow: hidden;
}

.meter > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #1976d2, #42a5f5);
  transition: width 0.45s ease;
}

.completeness-missing {
  margin-top: 0.75rem;
  font-size: 0.92rem;
  color: #6c757d;
  line-height: 1.7;
}

.completeness-missing .chip { cursor: default; }

/* ── Πλέγμα καρτών ────────────────────────────────────────────────────────── */
.resume-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
  /* Χωρίς align-items: οι κάρτες κάθε σειράς τεντώνονται στο ίδιο ύψος. */
}

/* Κάρτα φόρμας — ίδιο κουτί με τις κάρτες προβολής, ώστε η επεξεργασία να
   μοιάζει με τη σελίδα που επεξεργάζεται. */
.form-block {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  padding: 1.5rem;
}

.form-block .section-title:first-child { margin-top: 0; }
.form-block .form-group:last-child { margin-bottom: 0; }

/* Προεπιλογή: στενή κάρτα — τρεις στη σειρά. */
.resume-grid > .profile-section,
.resume-grid > .form-block { grid-column: span 2; margin: 0; }
.resume-grid > .rc-half { grid-column: span 3; }
.resume-grid > .rc-two-thirds { grid-column: span 4; }
.resume-grid > .rc-full { grid-column: span 6; }

@media (max-width: 1100px) {
  .resume-grid { grid-template-columns: repeat(2, 1fr); }
  .resume-grid > .profile-section,
  .resume-grid > .form-block,
  .resume-grid > .rc-half,
  .resume-grid > .rc-two-thirds { grid-column: span 1; }
  .resume-grid > .rc-full { grid-column: span 2; }
  /* Μονός αριθμός καρτών (σελίδες προβολής: 7): η τελευταία θα έμενε μόνη
     της σε μισή σειρά — πιάνει όλο το πλάτος. */
  .resume-grid > .profile-section:last-child:nth-child(odd) { grid-column: span 2; }
}

@media (max-width: 780px) {
  .resume-shell { padding: 0 1rem; }
  .resume-grid { grid-template-columns: 1fr; }
  .resume-grid > .profile-section,
  .resume-grid > .form-block,
  .resume-grid > .rc-half,
  .resume-grid > .rc-two-thirds,
  .resume-grid > .rc-full,
  .resume-grid > .profile-section:last-child:nth-child(odd) { grid-column: span 1; }

  .resume-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 1.1rem;
  }
  .hero-facts { justify-content: center; }
  .hero-actions { width: 100%; min-width: 0; }
}

/* ── Κοινά στοιχεία περιεχομένου ──────────────────────────────────────────── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #eef5fd;
  color: #1a5aa8;
  border: 1px solid #dbe9f9;
  border-radius: 20px;
  padding: 0.32rem 0.8rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.chip.chip-green { background: #e8f5e9; color: #2e7d32; border-color: #cfe8d1; }
.chip.chip-grey { background: #f2f4f7; color: #5a6472; border-color: #e3e8ee; }

.fact-list { display: grid; gap: 0.85rem; }

/* Γραμμή «ετικέτα — τιμή», με την τιμή δεξιά. Και οι λίστες (τύποι
   απασχόλησης, περιοχές, δίπλωμα, πιστοποιήσεις) γράφονται έτσι, ως κείμενο —
   όχι σε πλαίσια — ώστε όλες οι γραμμές μιας κάρτας να είναι ομοιόμορφες
   (επιθυμία του χρήστη, 17/10). Η ετικέτα πιάνει έως 45% του πλάτους (40% στο
   κινητό) και μετά σπάει σε δύο γραμμές, για να έχει χώρο μια μακριά λίστα. */
.fact {
  display: grid;
  grid-template-columns: fit-content(45%) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
}

.fact-label {
  color: #93a2b1;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.fact-value { color: #2c3e50; font-weight: 600; text-align: right; }

/* Μία τιμή της λίστας: η αλλαγή γραμμής πέφτει ανάμεσα στις τιμές, όχι μέσα
   σε μία. vertical-align: top — μια τιμή που σπάει σε δύο γραμμές (στενή
   οθόνη) έχει baseline την ΤΕΛΕΥΤΑΙΑ της γραμμή, και η πρώτη ανέβαινε πάνω
   στην προηγούμενη σειρά. */
.fact-item {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

@media (max-width: 780px) {
  .fact { grid-template-columns: fit-content(40%) minmax(0, 1fr); }
}
.fact-block { display: grid; gap: 0.45rem; }
.empty-note { color: #93a2b1; font-style: italic; }

/* ── Ομάδες επιλογών στις φόρμες ──────────────────────────────────────────── */
.opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 0.5rem;
}

.opt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #e3e8ee;
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  color: #3d4d5c;
  cursor: pointer;
}

.opt:hover { border-color: #1976d2; background: #f7fbff; }

/* Τα κουτάκια δεν είναι πεδία κειμένου: δεν πιάνουν το 100% πλάτος που
   ορίζουν οι σελίδες για input/textarea μέσα σε φόρμα. */
.opt input[type="checkbox"],
.opt input[type="radio"],
.section-content.editable .opt input,
.form-group .opt input {
  width: auto;
  margin: 0;
  accent-color: #1976d2;
}