/* ===================================================================
 * Softfootball CV Builder
 * 1. Editor   2. CV designs (also used for the PDF)   3. Print
 * ================================================================= */

/* 1. Editor ------------------------------------------------------- */
/* Panels stay closed until opened (their layout rules must not override "hidden"). */
.sft-cv-app [hidden] { display: none !important; }
.sft-cv-app { --sft-green: var(--sf-search-button, #8BB453); --sft-line: #E2E6DF; margin: 8px 0 48px; font-size: 15px; }
.sft-cv-loading, .sft-cv-noscript { padding: 40px; text-align: center; background: #F6F7F5; border-radius: 12px; }
.sft-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sft-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 16px; border: 1px solid #D5D9D2; border-radius: 8px; background: #FFFFFF; color: #222222; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.sft-btn:hover { border-color: #222222; }
.sft-btn--primary { background: var(--sft-green); border-color: var(--sft-green); color: #FFFFFF; }
.sft-btn--primary:hover { filter: brightness(.95); border-color: var(--sft-green); }
.sft-btn--add { width: 100%; border-style: dashed; color: #1F6F43; margin-top: 4px; }
.sft-link { border: 0; background: none; padding: 0 8px; color: #B3261E; font: inherit; text-decoration: underline; cursor: pointer; }
.sft-icon { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; color: #444444; }
.sft-icon:hover:not([disabled]) { background: #F1F3EF; border-color: #DDE2D9; }
.sft-icon[disabled] { opacity: .3; cursor: default; }
.sft-icon--danger:hover { color: #B3261E; }

.sft-cv__bar { position: sticky; top: var(--sf-side-top, 0px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #FFFFFF; border: 1px solid var(--sft-line); border-radius: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, .06); }
.sft-cv__barleft { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sft-cv__title { font-size: 17px; }
.sft-cv__status { font-size: 13px; color: #6B6F69; }
.sft-cv__status.is-ok { color: #2F5410; }
.sft-cv__status.is-warn { color: #8A5A00; }
.sft-cv__status.is-busy { color: #1E3E62; }
.sft-cv__baractions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sft-cv__morewrap { position: relative; }
.sft-cv__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 300px; padding: 6px; background: #FFFFFF; border: 1px solid var(--sft-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); }
.sft-cv__menu button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: none; text-align: left; font: inherit; cursor: pointer; }
.sft-cv__menu button:hover, .sft-cv__menu button:focus-visible { background: #F3F6F0; }
.sft-cv__score { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px 0 6px; border: 1px solid #D5D9D2; border-radius: 999px; background: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer; }
.sft-cv__scoreval { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 50%; color: #FFFFFF; font-size: 13px; }
.sft-cv__scoreval--low { background: #C2410C; }
.sft-cv__scoreval--ok { background: #B7791F; }
.sft-cv__scoreval--good { background: #2F7D32; }
.sft-cv__scorepanel, .sft-cv__design { margin-top: 10px; padding: 16px 18px; background: #FFFFFF; border: 1px solid var(--sft-line); border-radius: 12px; }
.sft-cv__scorepanel ul { margin: 8px 0 0 20px; padding: 0; }
.sft-cv__scorepanel li { margin: 4px 0; }
.sft-cv__note { margin: 10px 0 0; color: #8A5A00; }
.sft-cv__design { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; }
.sft-design__label { margin: 0 0 8px; font-weight: 700; }
.sft-design__opts { display: flex; flex-direction: column; gap: 6px; }
.sft-opt { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sft-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sft-swatch { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px #CCCCCC; cursor: pointer; }
.sft-swatch.is-on { box-shadow: 0 0 0 2px #222222; }
.sft-cv__signin { margin: 10px 0 0; padding: 10px 14px; background: #EAF2FB; color: #1E3E62; border-radius: 10px; }
.sft-cv__signin a { color: inherit; font-weight: 700; }
.sft-cv__tabs { display: none; }

.sft-cv__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; margin-top: 16px; align-items: start; }
.sft-cv__previewcol { position: sticky; top: calc(var(--sf-side-top, 0px) + 84px); }
.sft-cv__stage { position: relative; overflow: hidden; border-radius: 6px; }
.sft-cv__paper { position: relative; width: 794px; transform-origin: top left; background: #FFFFFF; box-shadow: 0 6px 30px rgba(0, 0, 0, .14); }
.sft-cv__break { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed #9AA39A; pointer-events: none; }
.sft-cv__break span { position: absolute; right: 8px; top: -11px; padding: 1px 8px; background: #FFFFFF; border: 1px solid #C9CEC5; border-radius: 999px; font: 600 12px/1.4 Nunito, Arial, sans-serif; color: #555555; }

.sft-section { margin: 0 0 10px; background: #FFFFFF; border: 1px solid var(--sft-line); border-radius: 12px; }
.sft-section.is-open { box-shadow: 0 4px 18px rgba(0, 0, 0, .05); border-color: #CFD6CA; }
.sft-section.is-hidden .sft-section__title { color: #8A8F88; }
.sft-section__head { display: flex; align-items: center; gap: 4px; padding-right: 8px; }
.sft-section__toggle { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.sft-section__icon { flex: 0 0 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #F1F4EE; font-size: 15px; }
.sft-section__title { font-weight: 700; font-size: 16px; }
.sft-section__done { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sft-green); color: #FFFFFF; font-size: 12px; font-weight: 700; }
.sft-section__hidden { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #EEEEEE; color: #666666; }
.sft-section__chev { margin-left: auto; color: #777777; }
.sft-section__tools { display: flex; gap: 2px; }
.sft-section__body { padding: 0 16px 16px; }
.sft-tip { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--sft-green); background: #F6F9F2; border-radius: 0 8px 8px 0; color: #3B4A35; font-size: 14px; }
.sft-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sft-f { margin: 0 0 12px; display: flex; flex-direction: column; gap: 5px; }
.sft-f--wide { grid-column: 1 / -1; }
.sft-f label { font-weight: 600; font-size: 14px; }
.sft-f input, .sft-f select, .sft-f textarea, .sft-chips__label select { width: 100%; box-sizing: border-box; min-height: 42px; padding: 8px 12px; border: 1px solid #D5D9D2; border-radius: 8px; background: #FFFFFF; font: inherit; color: inherit; }
.sft-f textarea { min-height: 0; resize: vertical; line-height: 1.5; }
.sft-f input:focus, .sft-f select:focus, .sft-f textarea:focus { outline: 2px solid var(--sft-green); outline-offset: 1px; border-color: var(--sft-green); }
.sft-f__help { font-size: 13px; color: #6B6F69; }
.sft-f__count { font-size: 13px; color: #8A5A00; }
.sft-f__count.is-ok { color: #2F5410; }
.sft-f--muted span { padding: 10px 0; color: #6B6F69; }
.sft-f__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sft-check { display: inline-flex; gap: 8px; align-items: center; margin: 0 0 12px; cursor: pointer; font-size: 14px; }
.sft-photo { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px dashed #CFD6CA; border-radius: 10px; }
.sft-photo > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sft-photo__img, .sft-photo__ph { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.sft-photo__ph { display: inline-flex; align-items: center; justify-content: center; background: #F1F3EF; font-size: 28px; }
.sft-example { margin: 0 0 6px; font-size: 14px; }
.sft-example summary { cursor: pointer; color: #1F6F43; font-weight: 600; }
.sft-example p { margin: 8px 0 0; padding: 10px 12px; background: #FAFAF8; border-radius: 8px; font-style: italic; }
.sft-chips__label { margin: 0 0 8px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sft-chips__label select { width: auto; min-height: 36px; padding: 4px 8px; }
.sft-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.sft-chip { padding: 6px 10px; border: 1px solid #D5D9D2; border-radius: 999px; background: #FFFFFF; font: inherit; font-size: 13px; cursor: pointer; }
.sft-chip:hover { border-color: #222222; }
.sft-chip.is-on { background: #EEF6E6; border-color: #9ACB6B; color: #2F5410; font-weight: 600; }
.sft-list { display: flex; flex-direction: column; gap: 10px; }
.sft-item { border: 1px solid #E6EAE3; border-radius: 10px; background: #FCFDFB; }
.sft-item__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; border-bottom: 1px solid #EEF1EB; }
.sft-item__name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sft-item__tools { display: flex; gap: 2px; flex: 0 0 auto; }
.sft-item__body { padding: 12px 12px 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sft-item__body > .sft-f__row, .sft-item__body > .sft-check, .sft-item__body > .sft-f--wide { grid-column: 1 / -1; }
.sft-list--inline .sft-item__body { grid-template-columns: 2fr 1fr; }
.sft-cv-signin { padding: 32px; text-align: center; background: #F6F7F5; border-radius: 12px; }

@media (max-width: 1100px) {
	.sft-cv__body { grid-template-columns: 1fr; }
	.sft-cv__previewcol { position: static; display: none; }
	.sft-cv-app.is-preview .sft-cv__previewcol { display: block; }
	.sft-cv-app.is-preview .sft-cv__editor { display: none; }
	.sft-cv__tabs { display: flex; gap: 6px; margin-top: 12px; padding: 4px; background: #F1F3EF; border-radius: 10px; }
	.sft-cv__tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
	.sft-cv__tabs [aria-selected="true"] { background: #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
}
@media (max-width: 640px) {
	.sft-grid2, .sft-item__body, .sft-f__row, .sft-list--inline .sft-item__body { grid-template-columns: 1fr; }
	.sft-cv__bar { position: static; }
	.sft-cv__baractions { width: 100%; }
	.sft-cv__baractions .sft-btn--primary { flex: 1 1 100%; }
	.sft-cv__menu { right: auto; left: 0; min-width: 260px; }
}

/* 2. CV designs ---------------------------------------------------- */
.sftcv { --cv-accent: #1F6F43; --cv-text: #1E2420; --cv-muted: #5E655C; --cv-fs: 10.5pt; box-sizing: border-box; width: 210mm; min-height: 297mm; padding: 16mm 15mm; background: #FFFFFF; color: var(--cv-text); font-family: "Nunito", "Helvetica Neue", Arial, sans-serif; font-size: var(--cv-fs); line-height: 1.45; text-align: left; }
.sftcv *, .sftcv *::before, .sftcv *::after { box-sizing: border-box; }
.sftcv--font-serif { font-family: Georgia, "Times New Roman", serif; }
.sftcv--size-s { --cv-fs: 9.5pt; }
.sftcv--size-l { --cv-fs: 11.5pt; }
.sftcv h1, .sftcv h2, .sftcv p, .sftcv ul { margin: 0; padding: 0; text-transform: none; letter-spacing: 0; }
.sftcv__name { font-size: 2.35em; line-height: 1.1; font-weight: 800; color: var(--cv-text); }
.sftcv__headline { margin-top: 3px !important; font-size: 1.2em; color: var(--cv-accent); font-weight: 600; }
.sftcv__contact { margin-top: 8px !important; color: var(--cv-muted); font-size: .95em; }
.sftcv__photo { width: 30mm; height: 30mm; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.sftcv__sec { margin-top: 6mm; break-inside: auto; }
.sftcv__h { margin-bottom: 2.5mm !important; padding-bottom: 1.2mm; font-size: .9em; font-weight: 800; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--cv-accent); border-bottom: 1.5px solid var(--cv-accent); font-family: inherit; }
.sftcv__entry { margin-bottom: 3.5mm; break-inside: avoid; }
.sftcv__entryhead { display: flex; justify-content: space-between; gap: 4mm; align-items: baseline; }
.sftcv__role { font-weight: 700; font-size: 1.05em; }
.sftcv__org { color: var(--cv-muted); }
.sftcv__when { flex: 0 0 auto; color: var(--cv-muted); font-size: .92em; white-space: nowrap; }
.sftcv__bullets { margin: 1.5mm 0 0 4.5mm !important; }
.sftcv__bullets li { margin: .6mm 0; padding-left: 1mm; }
.sftcv__details { margin-top: 1mm !important; color: var(--cv-muted); }
.sftcv__summary { white-space: pre-line; }
.sftcv__plain { list-style: none; }
.sftcv__plain li { margin: 1mm 0; }
.sftcv__muted { color: var(--cv-muted); font-weight: 400; }
.sftcv__skills { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6mm 6mm; }
.sftcv__skills li { display: flex; flex-direction: column; gap: .8mm; break-inside: avoid; }
.sftcv__meter { display: block; height: 1.6mm; border-radius: 1mm; background: #E7EAE5; overflow: hidden; }
.sftcv__meter span { display: block; height: 100%; background: var(--cv-accent); border-radius: 1mm; }
.sftcv__refs { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 6mm; }

/* Classic: centred header, single column */
.sftcv--classic .sftcv__header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4mm; padding-bottom: 5mm; border-bottom: 3px solid var(--cv-accent); }
.sftcv--classic .sftcv__h { border-bottom: 0; padding-bottom: 0; }
.sftcv--classic .sftcv__h::after { content: ""; display: block; height: 1px; margin-top: 1.5mm; background: #D9DED6; }

/* Compact: header left with photo, tighter spacing, two-column skills */
.sftcv--compact { padding: 10mm 12mm; --cv-fs: 9.6pt; line-height: 1.38; }
.sftcv--compact.sftcv--size-l { --cv-fs: 10.6pt; }
.sftcv--compact.sftcv--size-s { --cv-fs: 9pt; }
.sftcv--compact .sftcv__header { display: flex; align-items: center; gap: 6mm; padding: 5mm 12mm; margin: -10mm -12mm 0; background: var(--cv-accent); color: #FFFFFF; }
.sftcv--compact .sftcv__name, .sftcv--compact .sftcv__headline, .sftcv--compact .sftcv__contact { color: #FFFFFF; }
.sftcv--compact .sftcv__headline { opacity: .92; }
.sftcv--compact .sftcv__contact { opacity: .85; }
.sftcv--compact .sftcv__photo { width: 24mm; height: 24mm; border: 2px solid rgba(255, 255, 255, .7); }
.sftcv--compact .sftcv__sec { margin-top: 3.6mm; }
.sftcv--compact .sftcv__h { margin-bottom: 1.8mm !important; }
.sftcv--compact .sftcv__bullets li { margin: .3mm 0; }
.sftcv--compact .sftcv__entry { margin-bottom: 2.2mm; }
.sftcv--compact .sftcv__skills { grid-template-columns: 1fr 1fr 1fr; }

/* Modern: coloured sidebar (contact, skills, languages, licences, interests) */
.sftcv--modern { display: grid; grid-template-columns: 66mm 1fr; padding: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--cv-accent) 10%, #FFFFFF) 0 66mm, #FFFFFF 66mm); }
.sftcv--modern .sftcv__side { padding: 14mm 7mm 14mm 9mm; }
.sftcv--modern .sftcv__main { padding: 14mm 13mm 14mm 9mm; min-width: 0; }
.sftcv--modern .sftcv__side .sftcv__photo { display: block; width: 36mm; height: 36mm; margin: 0 auto 6mm; border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-accent) 35%, #FFFFFF); }
.sftcv--modern .sftcv__side .sftcv__sec:first-of-type { margin-top: 0; }
.sftcv--modern .sftcv__side .sftcv__h { border-bottom-color: color-mix(in srgb, var(--cv-accent) 45%, #FFFFFF); }
.sftcv--modern .sftcv__side .sftcv__skills { grid-template-columns: 1fr; }
.sftcv--modern .sftcv__contactlist li { overflow-wrap: anywhere; }
.sftcv--modern .sftcv__main .sftcv__header { padding-bottom: 4mm; margin-bottom: 1mm; border-bottom: 3px solid var(--cv-accent); }
.sftcv--modern .sftcv__main .sftcv__sec:first-of-type { margin-top: 5mm; }

/* 3. Print (the PDF) ---------------------------------------------- */
@page { size: A4; margin: 0; }
body.sftcv-print { margin: 0; background: #FFFFFF; }
@media print {
	html, body.sftcv-print { width: 210mm; }
	.sftcv { width: 210mm; min-height: 297mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.sftcv--modern { min-height: 297mm; }
}

/* 20px between the CV Builder and the footer. */
.sft-cv-app { margin-bottom: 0; }

.sft-cv-app .sft-section:last-child, .sft-cv-app :last-child > .sft-section:last-child { margin-bottom: 0; }

/* The default font, forced on the CV Builder and the CV (screen and PDF), whichever font option is chosen. */
.sft-cv, .sft-cv *, .sftcv, .sftcv *, .sftcv--font-serif, .sftcv--font-serif *, body.sftcv-print, body.sftcv-print * { font-family: Nunito, Arial, sans-serif !important; }