/* HRConnect Core — frontend design system.
   Mobile-first, WCAG 2.2 AA, Blocksy-compatible. Override the tokens below
   from the child theme to rebrand without touching plugin files. */

.hrc-auth, .hrc-dashboard, .hrc-jobs, .hrc-job-single {
	--hrc-primary: #1d4ed8;
	--hrc-primary-dark: #1e40af;
	--hrc-primary-soft: #eff6ff;
	--hrc-success: #047857;
	--hrc-success-soft: #ecfdf5;
	--hrc-danger: #b91c1c;
	--hrc-danger-soft: #fef2f2;
	--hrc-warning: #b45309;
	--hrc-warning-soft: #fffbeb;
	--hrc-ink: #111827;
	--hrc-muted: #6b7280;
	--hrc-line: #e5e7eb;
	--hrc-bg: #f9fafb;
	--hrc-card: #ffffff;
	--hrc-radius: 12px;
	--hrc-radius-sm: 8px;
	--hrc-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 4px 12px rgba(17, 24, 39, .06);
	--hrc-shadow-hover: 0 2px 4px rgba(17, 24, 39, .08), 0 10px 24px rgba(17, 24, 39, .10);
	--hrc-font: inherit;

	max-width: 100%;
	font-family: var(--hrc-font);
	color: var(--hrc-ink);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- Notices */
.hrc-notice {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: .9rem 1.1rem;
	border-radius: var(--hrc-radius-sm, 8px);
	margin: 1rem 0;
	border: 1px solid var(--hrc-line, #e5e7eb);
	border-left-width: 4px;
	background: var(--hrc-card, #fff);
	box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
}
.hrc-notice p { margin: 0 0 .5rem; }
.hrc-notice p:last-child { margin-bottom: 0; }
.hrc-notice--info    { border-left-color: #1d4ed8; background: #eff6ff; }
.hrc-notice--success { border-left-color: #047857; background: #ecfdf5; }
.hrc-notice--error   { border-left-color: #b91c1c; background: #fef2f2; }
.hrc-notice--warn    { border-left-color: #b45309; background: #fffbeb; }
/* Οι δύο δρόμοι έξω από το κλειδωμένο «Στοιχεία επικοινωνίας». flex-wrap, γιατί
   στο κινητό δύο κουμπιά των 44px δεν χωρούν πλάι-πλάι και το δεύτερο θα έβγαινε
   έξω από το πλαίσιο.
   Ο πρόγονος γράφεται ΡΗΤΑ: το «.hrc-notice p» δύο γραμμές πιο πάνω ορίζει
   margin:0 0 .5rem και είναι πιο ειδικό, οπότε ένας σκέτος κανόνας κλάσης έχανε
   το margin-top και τα κουμπιά κολλούσαν στο κείμενο. */
.hrc-notice .hrc-contact-cta,
/* Ίδιος κανόνας για την προτροπή «Συνέχεια:» του ανενεργού προφίλ — και με τον
   πρόγονο γραμμένο ρητά, γιατί το «.hrc-notice p» παραπάνω είναι πιο ειδικό και
   θα έτρωγε το margin-top. */
.hrc-notice .hrc-steps__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: .85rem 0 0; }

/* ----------------------------------------------------------------- Header */
.hrc-header { background: #fff; border-bottom: 1px solid var(--hrc-line, #e5e7eb); }
.hrc-header--sticky { position: sticky; top: 0; z-index: 900; }
.hrc-header__inner { display: flex; align-items: center; gap: 1rem; max-width: 1200px; margin: 0 auto; padding: .5rem 1rem; }
.hrc-header__brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; flex: 0 0 auto; }
/* Ο περιορισμός γράφεται ΚΑΙ πάνω στην .custom-logo, όχι μόνο στον απόγονο του
   brand: ένα λογότυπο 512×512 χωρίς όριο ύψους γεμίζει μισή οθόνη, και αυτό
   ακριβώς συνέβη όταν ο parser πέταξε τον σύνδεσμο του λογοτύπου έξω από το
   .hrc-header__brand. Ο κανόνας πιάνει πλέον και τις δύο θέσεις. */
.hrc-header__brand img,
.hrc-header .custom-logo { max-height: 48px; width: auto; height: auto; display: block; }
.hrc-header .custom-logo-link { display: block; line-height: 0; }
.hrc-header__name { font-weight: 800; color: var(--hrc-primary-dark, #1e40af); font-size: 1.05rem; }
.hrc-header__disclosure { flex: 1 1 auto; min-width: 0; }
/* Η γραμμή κλεισίματος ανήκει στο μενού πλήρους οθόνης· σε desktop δεν υπάρχει. */
.hrc-header__panelbar { display: none; }
/* Κρύβεται ΟΠΤΙΚΑ, όχι με display:none: ένα input με display:none δεν παίρνει
   εστίαση, οπότε το μενού θα ήταν απρόσιτο από πληκτρολόγιο. */
.hrc-header__checkbox { position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; overflow: hidden; }
.hrc-header__toggle { display: none; }
.hrc-header__checkbox:focus-visible + .hrc-header__toggle { outline: 3px solid #93c5fd; outline-offset: 2px; }
.hrc-header__panel { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.hrc-header__menu { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.hrc-header__menu a { text-decoration: none; color: var(--hrc-ink, #111827); font-weight: 600; padding: .4rem 0; display: inline-block; }
.hrc-header__menu a:hover { color: var(--hrc-primary, #1d4ed8); }
.hrc-header__menu .current-menu-item > a { color: var(--hrc-primary, #1d4ed8); box-shadow: inset 0 -2px 0 var(--hrc-primary, #1d4ed8); }
.hrc-header__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Κάθετος διαχωριστής πριν τις ενέργειες, όπως στο kariera.gr: ξεχωρίζει τι
   είναι πλοήγηση από το τι είναι απόφαση. */
.hrc-header__actions::before { content: ""; width: 1px; align-self: stretch; margin: .35rem .35rem .35rem 0; background: var(--hrc-line, #e5e7eb); }
.hrc-header__link { color: var(--hrc-muted, #6b7280); text-decoration: none; font-size: .9rem; padding: .4rem; }
.hrc-header__link:hover { color: var(--hrc-danger, #b91c1c); }

/* Αναπτυσσόμενο «Σύνδεση». Ίδιο μοτίβο checkbox με το μενού κινητού, και για
   τον ίδιο λόγο: ένα κλειστό <details> δεν αποδίδεται και δεν παρακάμπτεται. */
.hrc-header__drop { position: relative; display: inline-flex; }
.hrc-header__dropcheck { position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; }
.hrc-header__droplabel { cursor: pointer; }
/* Το βελάκι ΣΧΕΔΙΑΖΕΤΑΙ, δεν γράφεται. Ο χαρακτήρας «⌄» αποδίδεται διαφορετικά
   σε κάθε γραμματοσειρά και σε αρκετές είναι μια αδέξια γωνία σε λάθος βασική
   γραμμή. Δύο περιγράμματα στραμμένα 45°: ίδιο πάχος με το κείμενο, καθαρό σε
   κάθε μέγεθος, και στρίβει ομαλά όταν ανοίγει. */
.hrc-header__caret { width: 7px; height: 7px; margin-left: .15rem; margin-top: -2px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .18s ease; }
.hrc-header__dropcheck:checked + .hrc-header__droplabel .hrc-header__caret { transform: rotate(-135deg); margin-top: 2px; }
/* Χωρίς σκιά στα κουμπιά της κεφαλίδας.
   Μετρημένα, τα δύο κουμπιά είναι πανομοιότυπα: ίδιο top, ίδιο ύψος, ίδιο κέντρο
   κειμένου στο δέκατο του pixel. Αυτό που τα έκανε να διαβάζονται σαν άνισα ήταν
   η σκιά «0 2px 6px» κάτω από το γεμάτο: επεκτείνει το μπλε δύο pixel προς τα
   κάτω και το μάτι διαβάζει το ζευγάρι σαν μετατοπισμένο. Δίπλα-δίπλα, τα δύο
   κουμπιά πρέπει να είναι ίσα· η σκιά μένει όπου το κύριο κουμπί στέκεται μόνο
   του (φόρμες, πλαίσια). */
.hrc-header__actions .hrc-button--primary { box-shadow: none; }
.hrc-header__actions .hrc-button--primary:hover { transform: none; }
.hrc-header__dropcheck:focus-visible + .hrc-header__droplabel { outline: 3px solid #93c5fd; outline-offset: 2px; }
.hrc-header__dropmenu { display: none; position: absolute; top: calc(100% + .5rem); right: 0; min-width: 232px;
	background: #fff; border: 1px solid var(--hrc-line, #e5e7eb); border-radius: 10px;
	box-shadow: 0 12px 28px rgba(17, 24, 39, .14); padding: .35rem; z-index: 950; }
.hrc-header__dropcheck:checked ~ .hrc-header__dropmenu { display: block; }
.hrc-header__dropmenu a { display: flex; align-items: center; gap: .6rem; padding: .7rem .75rem; min-height: 44px;
	border-radius: 7px; text-decoration: none; color: var(--hrc-ink, #111827); font-weight: 600; font-size: .95rem; }
.hrc-header__dropmenu a:hover { background: var(--hrc-primary-soft, #eff6ff); color: var(--hrc-primary, #1d4ed8); }
.hrc-header__dropicon { font-size: 1.05rem; line-height: 1; width: 1.3em; text-align: center; }
/* Κάτω από 900px: το <details> γίνεται πραγματικό μενού «χάμπουργκερ». Καθαρό
   CSS πάνω σε native στοιχείο — δεν χρειάζεται script, δεν αναβοσβήνει όσο
   φορτώνει, και επιβιώνει σε optimiser που καθυστερεί τα αρχεία μας. */
@media (max-width: 900px) {
	/* Ο χάμπουργκερ ΤΕΡΜΑ ΔΕΞΙΑ.
	   Το margin-left:auto ήταν και στα δύο στοιχεία: το πρώτο auto απορροφά όλο
	   τον ελεύθερο χώρο, οπότε το κουμπί σταματούσε στη μέση και το κενό
	   .hrc-header__disclosure καθόταν δεξιά του. Ένα auto, στο κουμπί. */
	/* gap:0 στη γραμμή. Το .hrc-header__disclosure είναι μηδενικού πλάτους εδώ
	   (το πάνελ του είναι absolute), αλλά το gap του flex μετρά ΚΑΙ γι' αυτό:
	   κρατούσε τον χάμπουργκερ 16 pixel μέσα από την άκρη, που είναι ακριβώς το
	   «δεν είναι τέρμα δεξιά» που αναφέρθηκε. */
	.hrc-header__inner { gap: 0; }
	.hrc-header__disclosure { flex: 0 0 auto; margin-left: 0; }
	.hrc-header__toggle { display: block; cursor: pointer; width: 44px; height: 44px; margin-left: auto;
		border: 1px solid var(--hrc-line, #e5e7eb); border-radius: 8px; position: relative; }
	.hrc-header__toggle span,
	.hrc-header__toggle span::before,
	.hrc-header__toggle span::after { position: absolute; left: 11px; width: 20px; height: 2px;
		background: var(--hrc-ink, #111827); content: ''; }
	.hrc-header__toggle span { top: 21px; }
	.hrc-header__toggle span::before { top: -6px; left: 0; }
	.hrc-header__toggle span::after { top: 6px; left: 0; }
	/* ΠΛΗΡΗΣ ΟΘΟΝΗ, με ορατό κλείσιμο.
	   Ήταν πτυσσόμενο πλαίσιο κάτω από την κεφαλίδα: το περιεχόμενο της σελίδας
	   φαινόταν από κάτω και τραβούσε το μάτι, και ο μόνος τρόπος να κλείσει ήταν
	   να ξαναβρεί κανείς τον χάμπουργκερ. Καλύπτοντας την οθόνη, το μενού γίνεται
	   το μόνο πράγμα που υπάρχει, και το X λέει πώς φεύγεις.
	   position: fixed και όχι absolute: με absolute το πάνελ κύλαγε μαζί με τη
	   σελίδα και το X έβγαινε εκτός οθόνης στη μέση μιας μεγάλης λίστας. */
	.hrc-header__panel { display: none; position: fixed; inset: 0; z-index: 1000; flex-direction: column;
		align-items: stretch; gap: .5rem; background: #fff; padding: 1rem;
		overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box;
		/* Χωρίς αυτό, φτάνοντας στο τέλος της λίστας η κίνηση περνά στη σελίδα από
		   κάτω και ο χρήστης βλέπει το περιεχόμενο να κυλά πίσω από ένα ανοιχτό
		   μενού. Είναι το μόνο κλείδωμα κύλισης που γίνεται χωρίς JavaScript. */
		overscroll-behavior: contain; }
	.hrc-header__panelbar { display: flex; align-items: center; justify-content: space-between;
		margin: -.25rem 0 .5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--hrc-line, #e5e7eb); }
	.hrc-header__paneltitle { font-weight: 800; font-size: 1.05rem; color: var(--hrc-ink, #111827); }
	/* Το X σχεδιάζεται από δύο ψευδοστοιχεία, για τον ίδιο λόγο με το βελάκι:
	   ο χαρακτήρας «×» κάθεται σε λάθος βασική γραμμή και αλλάζει ανά γραμματοσειρά. */
	.hrc-header__close { position: relative; width: 44px; height: 44px; cursor: pointer;
		border: 1px solid var(--hrc-line, #e5e7eb); border-radius: 10px; flex: 0 0 auto; }
	.hrc-header__close span::before,
	.hrc-header__close span::after { content: ""; position: absolute; top: 21px; left: 13px;
		width: 18px; height: 2px; background: var(--hrc-ink, #111827); }
	.hrc-header__close span::before { transform: rotate(45deg); }
	.hrc-header__close span::after { transform: rotate(-45deg); }
	.hrc-header__close:hover { background: var(--hrc-primary-soft, #eff6ff); }
	/* Ο κανόνας που ανοίγει το μενού. Ζει σε ΔΙΚΟ ΜΑΣ CSS, όχι σε συμπεριφορά
	   στοιχείου: το προηγούμενο <details> κρατούσε το περιεχόμενο κρυφό μέσα από
	   τη μηχανή απόδοσης και κανένας κανόνας μας δεν το άνοιγε. */
	.hrc-header__checkbox:checked ~ .hrc-header__disclosure > .hrc-header__panel { display: flex; }
	/* Το πάνελ κινητού ήταν γυμνή λίστα. Γραμμές με χωρίστρα, βελάκι στα δεξιά
	   και σαφής τομή πριν τις ενέργειες: ο χρήστης βλέπει πού πατάει αντί να
	   διαβάζει πέντε λέξεις στη σειρά. */
	.hrc-header__menu { flex-direction: column; gap: 0; }
	.hrc-header__menu li + li { border-top: 1px solid var(--hrc-line, #e5e7eb); }
	.hrc-header__menu a { padding: .85rem .25rem; min-height: 48px; display: flex; align-items: center;
		justify-content: space-between; font-size: 1rem; }
	.hrc-header__menu a::after { content: "›"; color: var(--hrc-muted, #9ca3af); font-size: 1.15rem; line-height: 1; }
	.hrc-header__menu .current-menu-item > a { box-shadow: none; }
	.hrc-header__actions { flex-direction: column; align-items: stretch; gap: .6rem;
		border-top: 1px solid var(--hrc-line, #e5e7eb); padding-top: .9rem; margin-top: .2rem; }
	/* Ο κάθετος διαχωριστής είναι για την οριζόντια διάταξη· εδώ τη σπάει. */
	.hrc-header__actions::before { display: none; }
	/* Το αναπτυσσόμενο ξεδιπλώνεται στη ροή: ένα απόλυτο μενού μέσα σε ήδη
	   ανοιγμένο πάνελ κρέμεται πάνω από τη σελίδα και κόβεται στην άκρη. */
	.hrc-header__drop { display: block; position: static; }
	.hrc-header__droplabel { width: 100%; box-sizing: border-box; }
	.hrc-header__dropmenu { position: static; min-width: 0; margin-top: .4rem; box-shadow: none;
		background: var(--hrc-primary-soft, #eff6ff); border-color: transparent; }
	/* border-box μαζί με το 100%: το .hrc-button έχει 1.25rem padding και 1.5px
	   περίγραμμα, που προστίθενται στο πλάτος και έβγαζαν τα κουμπιά 15px έξω
	   από την οθόνη — οριζόντια κύλιση με ανοιχτό μενού. */
	.hrc-header__actions .hrc-button { width: 100%; box-sizing: border-box; }
}

/* ---------------------------------------------------------------- Buttons */
.hrc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .6rem 1.25rem;
	border-radius: 999px;
	border: 1.5px solid var(--hrc-primary, #1d4ed8);
	background: #fff;
	color: var(--hrc-primary, #1d4ed8);
	cursor: pointer;
	text-decoration: none;
	font: inherit;
	font-weight: 600;
	min-height: 44px;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.hrc-button:hover { background: var(--hrc-primary-soft, #eff6ff); text-decoration: none; }
.hrc-button--primary {
	background: linear-gradient(180deg, var(--hrc-primary, #1d4ed8), var(--hrc-primary-dark, #1e40af));
	color: #fff;
	border-color: var(--hrc-primary-dark, #1e40af);
	box-shadow: 0 2px 6px rgba(29, 78, 216, .35);
}
.hrc-button--primary:hover { filter: brightness(1.07); background: linear-gradient(180deg, var(--hrc-primary, #1d4ed8), var(--hrc-primary-dark, #1e40af)); color: #fff; transform: translateY(-1px); }
/* The <noscript> buttons (avatar upload, hero notification switch) have always
   carried this modifier and the stylesheet never defined it, so the one control
   a JavaScript-less visitor gets rendered at full size — 44px tall and 1.25rem
   of horizontal padding — inside the app bar. It stays above the 44px touch
   minimum; it is simply not the page's primary action. */
.hrc-button--small { padding: .45rem .9rem; font-size: .88rem; }
.hrc-button--ghost { border-color: var(--hrc-danger, #b91c1c); color: var(--hrc-danger, #b91c1c); }
.hrc-button--ghost:hover { background: var(--hrc-danger-soft, #fef2f2); }
.hrc-button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.hrc-button[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ------------------------------------------------------------------ Forms */
.hrc-form { max-width: 480px; }
.hrc-form label { display: block; font-weight: 600; margin-bottom: .3rem; }
.hrc-form p { margin: 0 0 1.1rem; }
/* Opt-out rather than an enumerated type list: number/date/time/tel/url fields
   were falling through unstyled and below the 44px touch target. The
   :not([type="hidden"]) is load-bearing — a styled hidden input takes up space
   and pushes the layout apart. */
.hrc-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.hrc-form select, .hrc-form textarea,
.hrc-jobs__filters input, .hrc-jobs__filters select, .hrc-job-single textarea {
	width: 100%;
	padding: .6rem .85rem;
	border: 1.5px solid #d1d5db;
	border-radius: var(--hrc-radius-sm, 8px);
	font: inherit;
	min-height: 46px;
	background: #fff;
	color: var(--hrc-ink, #111827);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.hrc-form input:focus, .hrc-form select:focus, .hrc-form textarea:focus,
.hrc-jobs__filters input:focus, .hrc-jobs__filters select:focus {
	border-color: var(--hrc-primary, #1d4ed8);
	box-shadow: 0 0 0 3px rgba(29, 78, 216, .18);
	outline: none;
}
.hrc-form fieldset {
	border: 1.5px solid var(--hrc-line, #e5e7eb);
	border-radius: var(--hrc-radius-sm, 8px);
	padding: .9rem 1.1rem;
	margin: 0 0 1.1rem;
	background: var(--hrc-bg, #f9fafb);
}
.hrc-form fieldset legend { font-weight: 700; padding: 0 .4rem; }
/* Δύο πεδία στη σειρά όπου έχει νόημα (από/έως, όνομα/επώνυμο). Πέφτει σε μία
   στήλη κάτω από 560px· ένα «Ώρα από» δίπλα σε «Ώρα έως» σε οθόνη κινητού είναι
   δύο πεδία των 90 pixel. */
.hrc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .hrc-grid2 { grid-template-columns: 1fr; } }
.hrc-postjob { max-width: 720px; }
.hrc-postjob h3 { margin: 2rem 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--hrc-line, #e5e7eb); }
.hrc-postjob .hrc-form { max-width: none; }
.hrc-form fieldset label { display: inline-flex; align-items: center; gap: .4rem; margin-right: 1.5rem; font-weight: 500; }
/* Form hints. The templates have always used WordPress' `.description` class,
   but the stylesheet never defined it, so every hint rendered at full body
   weight — and inside a label it inherited the 600 from `.hrc-form label`,
   reading as a second heading. */
.hrc-form .description, .hrc-dashboard .description, .hrc-signup .description {
	display: block;
	margin-top: .25rem;
	font-size: .88rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--hrc-muted, #6b7280);
}
.hrc-hp { position: absolute !important; left: -9999px !important; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------- Auth tabs */
.hrc-auth { max-width: 560px; margin-inline: auto; }
.hrc-auth__tabs {
	display: flex;
	gap: .25rem;
	flex-wrap: wrap;
	margin-bottom: 1.4rem;
	border-bottom: 2px solid var(--hrc-line, #e5e7eb);
}
.hrc-tab {
	padding: .65rem 1.1rem;
	border-radius: var(--hrc-radius-sm, 8px) var(--hrc-radius-sm, 8px) 0 0;
	margin-bottom: -2px;
	border-bottom: 3px solid transparent;
	text-decoration: none;
	color: var(--hrc-muted, #6b7280);
	font-weight: 600;
}
.hrc-tab:hover { color: var(--hrc-primary, #1d4ed8); background: var(--hrc-primary-soft, #eff6ff); }
.hrc-tab.is-active { border-bottom-color: var(--hrc-primary, #1d4ed8); color: var(--hrc-primary, #1d4ed8); }

/* -------------------------------------------------------- Dashboard layout */
/* Named grid areas: the app bar spans the full width, the nav and the main
   column sit beneath it. Without areas the bar became the first grid cell
   and collapsed into the sidebar column. */
.hrc-dashboard { display: block; }
.hrc-dashboard__main { min-width: 0; }
.hrc-dashboard__main h2 { margin-top: 0; }
.hrc-dashboard__nav ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.hrc-dashboard__nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .55rem .85rem;
	border-radius: var(--hrc-radius-sm, 8px);
	text-decoration: none;
	color: var(--hrc-ink, #111827);
	font-weight: 500;
	transition: background .15s ease, color .15s ease;
}
.hrc-dashboard__nav a:hover { background: var(--hrc-primary-soft, #eff6ff); color: var(--hrc-primary, #1d4ed8); }
.hrc-dashboard__nav a.is-active {
	background: linear-gradient(180deg, var(--hrc-primary, #1d4ed8), var(--hrc-primary-dark, #1e40af));
	color: #fff;
	box-shadow: 0 2px 6px rgba(29, 78, 216, .3);
}
.hrc-count {
	display: inline-block;
	min-width: 1.5em;
	padding: .05em .45em;
	border-radius: 999px;
	background: var(--hrc-danger, #b91c1c);
	color: #fff;
	text-align: center;
	font-size: .78em;
	font-weight: 700;
}
/* Unread badge riding the tab-bar icon. Absolute in BOTH layouts — pinned to
   the icon box, which is the one element that exists at the same size in the
   sidebar and in the bottom bar — so the tab label keeps its full width and
   is never pushed into an ellipsis by a two-digit count. */
.hrc-nav__badge {
	position: absolute;
	top: -5px;
	left: 100%;
	margin-left: -9px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--hrc-danger, #b91c1c);
	/* Reads as a badge sitting ON the bar rather than a red smudge inside the
	   glyph, and keeps its edge against the active tab's blue icon. */
	box-shadow: 0 0 0 2px #fff;
	color: #fff;
	font-size: .62rem;
	font-weight: 800;
	line-height: 17px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) {
	.hrc-dashboard {
		display: grid;
		grid-template-columns: 264px minmax(0, 1fr);
		grid-template-areas: "bar bar" "nav main";
		gap: 1.4rem 2.25rem;
		align-items: start;
	}
	.hrc-appbar { grid-area: bar; margin-bottom: 0; }
	.hrc-dashboard__nav { grid-area: nav; }
	.hrc-dashboard__main { grid-area: main; }
	.hrc-dashboard__nav {
		position: sticky;
		top: 1rem;
		background: var(--hrc-card, #fff);
		border: 1px solid var(--hrc-line, #e5e7eb);
		border-radius: var(--hrc-radius, 12px);
		padding: .6rem;
		box-shadow: var(--hrc-shadow);
	}
	.hrc-dashboard__nav ul { display: block; margin: 0; }
	.hrc-dashboard__nav li { margin-bottom: .15rem; }
	.hrc-dashboard__nav a { justify-content: flex-start; }
	.hrc-nav__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; flex: 0 0 auto; }
	.hrc-icon { width: 20px; height: 20px; display: block; }
	.hrc-nav--secondary { display: none; }
}

/* ------------------------------------------------------------------ Cards */
.hrc-cards { list-style: none; margin: 1.1rem 0; padding: 0; display: grid; gap: 1rem; }
.hrc-cards--jobs { grid-template-columns: 1fr; }
@media (min-width: 720px) { .hrc-cards--jobs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .hrc-cards--jobs { grid-template-columns: 1fr 1fr 1fr; } }
.hrc-card {
	border: 1px solid var(--hrc-line, #e5e7eb);
	border-radius: var(--hrc-radius, 12px);
	padding: 1.15rem 1.25rem;
	background: var(--hrc-card, #fff);
	box-shadow: var(--hrc-shadow);
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.hrc-cards--jobs .hrc-card { position: relative; cursor: pointer; }
.hrc-cards--jobs .hrc-card:hover { box-shadow: var(--hrc-shadow-hover); transform: translateY(-2px); border-color: #c7d2fe; }
.hrc-cards--jobs .hrc-card:hover .hrc-card__title a { color: var(--hrc-primary, #1d4ed8); }
/* Stretched link: the whole card is clickable, but the markup keeps ONE
   semantic <a> so keyboard and screen-reader navigation stay correct. */
.hrc-cards--jobs .hrc-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.hrc-cards--jobs .hrc-card:focus-within { box-shadow: 0 0 0 3px #93c5fd, var(--hrc-shadow-hover); }
.hrc-card__title { margin: 0 0 .4rem; font-size: 1.15rem; line-height: 1.35; }
.hrc-card__title a { text-decoration: none; color: var(--hrc-ink, #111827); }
.hrc-card__title a:hover { color: var(--hrc-primary, #1d4ed8); }
.hrc-card__title a:focus-visible { outline: none; }
.hrc-card__meta { color: var(--hrc-muted, #6b7280); font-size: .9rem; margin: 0 0 .6rem; }
.hrc-card__pay { margin: .2rem 0 .6rem; color: var(--hrc-success, #047857); font-size: 1.02rem; }
.hrc-card__excerpt { margin: 0; color: #374151; font-size: .95rem; }
.hrc-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.hrc-card__actions .hrc-button { padding: .45rem 1rem; min-height: 40px; font-size: .92rem; }

/* Pills & badges */
.hrc-pill {
	display: inline-block;
	padding: .18rem .7rem;
	border-radius: 999px;
	background: var(--hrc-primary-soft, #eff6ff);
	color: var(--hrc-primary-dark, #1e40af);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
}
.hrc-pill--warning { background: var(--hrc-warning-soft, #fffbeb); color: var(--hrc-warning, #b45309); border: 1px solid #fcd34d; }
.hrc-badge--verified {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	color: var(--hrc-success, #047857);
	background: var(--hrc-success-soft, #ecfdf5);
	border: 1px solid #a7f3d0;
	border-radius: 999px;
	padding: .1rem .6rem;
	font-weight: 700;
	font-size: .85rem;
	margin-left: .4rem;
}
/* «Συμπληρώθηκε το όριο» on the subscription table. Same geometry as the
   verified badge so the two read as one family, warning palette instead of
   success. Kept as a --warn modifier rather than a bare .hrc-badge rule
   because .hrc-badge has never carried styling of its own. */
.hrc-badge--warn {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	color: var(--hrc-warning, #b45309);
	background: var(--hrc-warning-soft, #fffbeb);
	border: 1px solid #fcd34d;
	border-radius: 999px;
	padding: .1rem .6rem;
	font-weight: 700;
	font-size: .85rem;
	margin-left: .4rem;
}

/* Status banner */
.hrc-status-banner {
	padding: .8rem 1.1rem;
	border-radius: var(--hrc-radius-sm, 8px);
	background: var(--hrc-bg, #f9fafb);
	border: 1px solid var(--hrc-line, #e5e7eb);
	margin-bottom: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
}
.hrc-status--active  { border-left: 4px solid var(--hrc-success, #047857); }
.hrc-status--incomplete, .hrc-status--pending { border-left: 4px solid var(--hrc-warning, #b45309); }
.hrc-status--suspended, .hrc-status--rejected { border-left: 4px solid var(--hrc-danger, #b91c1c); }

/* ---------------------------------------------------------------- Filters */
.hrc-jobs__filters {
	display: grid;
	gap: .7rem;
	margin-bottom: 1.5rem;
	padding: 1rem 1.1rem;
	background: var(--hrc-card, #fff);
	border: 1px solid var(--hrc-line, #e5e7eb);
	border-radius: var(--hrc-radius, 12px);
	box-shadow: var(--hrc-shadow);
}
@media (min-width: 900px) { .hrc-jobs__filters { grid-template-columns: 2fr 2fr 2fr 2fr auto; align-items: end; } }
.hrc-empty { padding: 2.5rem 1rem; text-align: center; color: var(--hrc-muted, #6b7280); background: var(--hrc-bg, #f9fafb); border-radius: var(--hrc-radius, 12px); }

/* -------------------------------------------------------------- Single job */
.hrc-job-single { max-width: 860px; }
.hrc-job-single header h2 { margin-bottom: .35rem; }
.hrc-job-single__pay {
	display: inline-block;
	padding: .55rem 1rem;
	background: var(--hrc-success-soft, #ecfdf5);
	border: 1px solid #a7f3d0;
	border-radius: var(--hrc-radius-sm, 8px);
	color: var(--hrc-success, #047857);
	font-size: 1.05rem;
}
.hrc-job-single__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .35rem 1.25rem;
	margin: 1.1rem 0;
	padding: 1rem 1.15rem;
	background: var(--hrc-bg, #f9fafb);
	border-radius: var(--hrc-radius-sm, 8px);
}
.hrc-job-single__facts dt { font-weight: 700; }
.hrc-job-single__facts dd { margin: 0; }
.hrc-job-single__contact, .hrc-job-single__actions {
	margin-top: 1.5rem;
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--hrc-line, #e5e7eb);
	border-radius: var(--hrc-radius, 12px);
	background: var(--hrc-card, #fff);
	box-shadow: var(--hrc-shadow);
}
.hrc-job-single__contact h3, .hrc-job-single__actions h3 { margin-top: 0; }
.hrc-accept-confirm {
	background: var(--hrc-primary-soft, #eff6ff);
	border: 1px solid #bfdbfe;
	border-radius: var(--hrc-radius-sm, 8px);
	padding: 1rem 1.15rem;
	margin-bottom: 1rem;
}

/* ----------------------------------------------------------------- Tables */
.hrc-table { border-collapse: collapse; width: 100%; max-width: 640px; background: var(--hrc-card, #fff); border-radius: var(--hrc-radius-sm, 8px); overflow: hidden; box-shadow: var(--hrc-shadow); }
.hrc-table th, .hrc-table td { text-align: left; padding: .6rem 1rem; border-bottom: 1px solid var(--hrc-line, #e5e7eb); }
.hrc-table tr:last-child th, .hrc-table tr:last-child td { border-bottom: 0; }
.hrc-table th { background: var(--hrc-bg, #f9fafb); font-weight: 600; width: 40%; }

/* ------------------------------------------------------------- Pagination */
.hrc-pagination { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.5rem 0; }
.hrc-pagination a {
	padding: .45rem .4rem;
	border: 1.5px solid var(--hrc-line, #e5e7eb);
	border-radius: var(--hrc-radius-sm, 8px);
	text-decoration: none;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--hrc-ink, #111827);
	font-weight: 600;
	transition: border-color .15s ease, background .15s ease;
}
.hrc-pagination a:hover { border-color: var(--hrc-primary, #1d4ed8); color: var(--hrc-primary, #1d4ed8); }
.hrc-pagination a.is-active { background: var(--hrc-primary, #1d4ed8); color: #fff; border-color: var(--hrc-primary, #1d4ed8); }

/* ----------------------------------------------------------------- Switch */
.hrc-switch { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; cursor: pointer; }
.hrc-switch input { width: 2.9rem; height: 1.6rem; accent-color: var(--hrc-primary, #1d4ed8); }

/* ------------------------------------------------- App-like dashboard v2 */
.hrc-appbar {
	/* Bottom padding is smaller than the top: the statistics strip inside the
	   hero brings its own .9rem, and doubling them made the blue block a third
	   taller than it reads in the reference. */
	padding: 1.05rem 1.15rem .9rem;
	margin-bottom: 1rem;
	border-radius: 16px;
	background: var(--hrc-primary-dark, #1e40af);
	background-image: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,0) 60%);
	color: #fff;
	/* A hairline, not a drop shadow. The hero is already the darkest object on
	   the page; a soft shadow under it only adds the 2014-template blur. */
	box-shadow: none;
}
/* ONE token for every rule inside the blue card that draws a line — the
   divider under the greeting and the three rules between the statistics are
   the same hairline and must never drift apart. */
.hrc-appbar { --hrc-hero-line: rgba(255, 255, 255, .18); }
/* Identity is ONE unit: photo, then name, then state. The header is chrome — it
   earns the space its content needs and not a pixel more, because every row it
   takes is a row of the member's actual work pushed below the fold. */
.hrc-appbar__row { display: flex; align-items: center; justify-content: space-between; gap: .9rem; flex-wrap: wrap; }
/* flex-basis 12rem, not `auto`: the switch (and, on the employer side, the
   «Νέα αγγελία» action) sits to the RIGHT of the greeting and is vertically
   centred against it wherever there is room for both. Below roughly 380px
   there is not, and the basis is what makes the identity block claim the row
   and push the control onto its own line — right-aligned and still centred —
   instead of crushing a Greek first name to three characters and an ellipsis. */
.hrc-appbar__id { display: flex; align-items: center; gap: .8rem; min-width: 0; flex: 1 1 12rem; }
.hrc-appbar__greet { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.hrc-appbar__meta { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
/* The plain sentence under the greeting that says what the control beside it
   means. Translucent rather than a second colour: one type scale, one ink. */
.hrc-appbar__sub {
	font-size: .8rem;
	line-height: 1.35;
	font-weight: 400;
	/* .82 over #1e40af composites to ≈ #d2d9ef — 6:1 against the hero, which
	   small text needs and .6 did not give. */
	color: rgba(255, 255, 255, .82);
}

/* 56px. The service ships 40/72/128 for the profile screens; the largest of
   those filled half the hero and pushed the greeting into a two-line wrap
   beside it. 56 clears the 44px touch minimum with room to spare and still
   leaves the name on one line at 360px. */
.hrc-avatar-form { margin: 0; flex: 0 0 auto; }
.hrc-avatar-btn { position: relative; display: block; cursor: pointer; line-height: 0; border-radius: 50%; }
.hrc-avatar-btn:focus-within { outline: 3px solid rgba(255,255,255,.8); outline-offset: 3px; }
.hrc-avatar-btn__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hrc-appbar .hrc-photo { width: 56px; height: 56px; flex: 0 0 auto; border-color: rgba(255,255,255,.5); }
.hrc-appbar .hrc-photo.hrc-photo--placeholder { background: rgba(255,255,255,.2); color: #fff; font-size: 1.15rem; }
/* Bottom RIGHT, overlapping the rim — the conventional place for «edit this
   image». Bottom-left read as a stray artefact stuck to the circle. */
.hrc-avatar-btn__badge {
	position: absolute; right: -1px; bottom: -1px;
	width: 22px; height: 22px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #fff; color: var(--hrc-primary-dark, #1e40af);
	box-shadow: 0 0 0 2px var(--hrc-primary-dark, #1e40af);
}
.hrc-avatar-btn__badge .hrc-icon { width: 12px; height: 12px; }
.hrc-avatar-btn:hover .hrc-avatar-btn__badge { background: #eff6ff; }

/* The employer's primary action. */
.hrc-appbar__cta {
	display: inline-flex; align-items: center; gap: .4rem;
	background: #fff; color: var(--hrc-primary-dark, #1e40af);
	font-weight: 700; font-size: .88rem; text-decoration: none;
	padding: .55rem .9rem; border-radius: 999px;
}
.hrc-appbar__cta:hover, .hrc-appbar__cta:focus { background: #eff6ff; color: var(--hrc-primary-dark, #1e40af); }
.hrc-appbar__cta .hrc-icon { width: 17px; height: 17px; }

/* State, not controls. Quiet enough to read as metadata under the name. */
.hrc-pill {
	display: inline-flex; align-items: center;
	font-size: .72rem; font-weight: 600; line-height: 1;
	padding: .28rem .55rem; border-radius: 999px;
	background: rgba(255,255,255,.15); color: rgba(255,255,255,.95);
	border: 1px solid rgba(255,255,255,.2);
}
.hrc-pill--ok { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.45); color: #fff; }
.hrc-pill--link { text-decoration: none; }
.hrc-pill--link:hover, .hrc-pill--link:focus { background: rgba(255,255,255,.3); color: #fff; }
.hrc-appbar__hello { font-size: 1.2rem; font-weight: 800; }

/* Real iOS-style switch (styled checkbox — still a native control, so it
   stays keyboard-operable and screen-reader correct). */
.hrc-switch-input {
	appearance: none; -webkit-appearance: none;
	position: relative; flex: 0 0 auto; margin: 0;
	width: 46px; height: 26px; border-radius: 999px;
	background: rgba(255, 255, 255, .35);
	border: 0; cursor: pointer;
	transition: background .2s ease;
}
.hrc-switch-input::after {
	content: ''; position: absolute; top: 3px; left: 3px;
	width: 20px; height: 20px; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 3px rgba(17, 24, 39, .35);
	transition: transform .2s ease;
}
.hrc-switch-input:checked { background: #22c55e; }
.hrc-switch-input:checked::after { transform: translateX(20px); }
.hrc-switch-input:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.hrc-switch-input[disabled] { opacity: .6; cursor: wait; }
/* Outside the blue hero the off-state needs a visible track. */
.hrc-switch .hrc-switch-input { background: #cbd5e1; }
.hrc-switch .hrc-switch-input:checked { background: #22c55e; }
.hrc-switch__state { font-size: .78rem; font-weight: 800; letter-spacing: .04em; min-width: 2.2em; }

/* Ο ΙΔΙΟΣ ΔΙΑΚΟΠΤΗΣ ΜΕΣΑ ΣΤΟ WP-ADMIN.
   Ο πυρήνας ζωγραφίζει τα δικά του checkbox με πλαίσιο, γωνίες, σκιά και ένα ✓
   σε ::before, με επιλογέα «input[type=checkbox]» — πιο ειδικό από μια σκέτη
   κλάση, οπότε κέρδιζε. Στην οθόνη εισαγωγής CSV ο «διακόπτης» έβγαινε
   τετράγωνο με τικ· μετρήθηκαν border-radius 2px και πλαίσιο 1px, δεν είναι
   εντύπωση.

   Δεμένο στο .wp-admin επίτηδες, και όχι σκέτο «input.hrc-switch-input»: ο
   γενικός επιλογέας θα ήταν πιο ειδικός από το .hrc-switch-input--hero και θα
   έσβηνε το πλαίσιο του μεγάλου διακόπτη στην μπλε κάρτα του εργαζόμενου, που
   υπάρχει για αντίθεση. Η παράκαμψη αφορά μόνο το wp-admin, άρα εκεί μένει. */
.wp-admin input.hrc-switch-input {
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	min-width: 0;
	padding: 0;
}
.wp-admin input.hrc-switch-input::before { content: none; }
.wp-admin input.hrc-switch-input:checked { background: #22c55e; }

/* ------------------------------------------- Hero switch (saves on change) */
/* The large pill in the blue card. It is the SAME native checkbox as above —
   only bigger, and with the word ON/OFF printed inside the track. No separate
   «Αποθήκευση»: the form posts on change (JS) or through the <noscript>
   button (no JS), so there is never a button here whose scope a reader has to
   guess. */
.hrc-hero-switch { margin: 0; flex: 0 0 auto; margin-left: auto; }
/* The LABEL is the touch target, not the 34px track: 44px minimum, and the
   extra height is padding around the pill rather than a taller pill. */
.hrc-hero-switch__label {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 44px;
	margin: 0;
	cursor: pointer;
}
.hrc-hero-switch__ui { position: relative; display: inline-flex; line-height: 0; }
.hrc-switch-input--hero {
	width: 74px;
	height: 34px;
	/* OFF is a RECESSED track, not a pale one. A translucent white track over
	   the indigo hero left the word OFF at about 3:1 — under the 4.5:1 that
	   11px bold text needs — while darkening it puts white on ≈ #16307c. */
	background: rgba(15, 23, 42, .38);
	border: 1px solid rgba(255, 255, 255, .28);
	box-sizing: border-box;
}
.hrc-switch-input--hero::after {
	top: 3px; left: 3px;
	width: 26px; height: 26px;
}
/* green-700, not green-500. The knob and the word ON are both white and both
   sit on this track; #22c55e would carry the word at 2.2:1. */
.hrc-switch-input--hero:checked { background: #15803d; border-color: #15803d; }
.hrc-switch-input--hero:checked::after { transform: translateX(40px); }
/* Printed INSIDE the pill, on the side the knob is not. aria-hidden in the
   markup and pointer-events:none here — the accessible name comes from the
   label, and the checkbox itself must stay the thing a tap lands on. */
.hrc-hero-switch__state {
	position: absolute;
	top: 0; bottom: 0;
	display: flex;
	align-items: center;
	pointer-events: none;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .06em;
	color: #fff;
	right: 11px;
}
.hrc-switch-input--hero:checked ~ .hrc-hero-switch__state { right: auto; left: 12px; }
.hrc-hero-switch noscript { display: block; }
.hrc-hero-switch noscript .hrc-button { margin-top: .4rem; }

/* ------------------------------------------------- Hero statistics strip */
/* BACK inside the blue card, under a hairline, split by hairlines rather than
   by card borders. On white cards these four numbers became four boxes with
   eight edges competing with the numbers themselves; the hero is compact
   enough that they read here, and rules are the quietest possible separator. */
.hrc-hero-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: .85rem;
	padding-top: .8rem;
	border-top: 1px solid var(--hrc-hero-line, rgba(255, 255, 255, .18));
}
.hrc-hero-stat { text-align: center; padding: 0 .2rem; min-width: 0;  min-height: 3.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.hrc-hero-stat + .hrc-hero-stat { border-left: 1px solid var(--hrc-hero-line, rgba(255, 255, 255, .18)); }
.hrc-hero-stat__n {
	display: block;
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
/* SIZED TO THE LONGEST LABEL, not guessed. «Ολοκληρωμένες» is 13 characters
   and has to fit a quarter of the hero at 360px — about 70px of usable column
   — so the type is tied to the viewport instead of to a hope: 2.6vw is 9.4px
   there, where the word measures ≈ 61px. The cap stops it growing past the
   number it labels on a tablet, and the floor keeps it legible if a theme
   renders the dashboard inside a narrow column. Nothing is nowrap: a label
   that ran out of room would then be CLIPPED, and a second line is the one
   failure mode that still says what it says. */
.hrc-hero-stat__l {
	/* Sized to the longest label the two dashboards actually ship —
	   «Προς επιβεβαίωση» (16 glyphs) — not to «Ολοκληρωμένες». The earlier
	   arithmetic forgot the stat's own horizontal padding and left roughly 66px
	   of usable track at 360px, not 70. Rather than shave the type until it is
	   unreadable, the label is allowed TWO lines and the row is given a fixed
	   min-height so four stats stay on one baseline whether their labels wrap or
	   not — a ragged row of differently-tall cells is what a clipped label was
	   meant to avoid in the first place. */
	display: block;
	font-size: clamp( .58rem, 2.4vw, .74rem );
	line-height: 1.2;
	color: rgba( 255, 255, 255, .8 );
	margin-top: .2rem;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* The standalone white .hrc-stats / .hrc-stat grid that used to sit BELOW the
   hero is gone, together with its only two call sites: both dashboards now
   render .hrc-hero-stats inside the blue card (see «Hero statistics strip»
   above). Nothing else in the plugin ever used those two class names — the
   rules are removed rather than left behind so a future template cannot pick
   up a treatment the product no longer has. */

/* Section panels with a "see all" link, as in the app mockup */
/* HAIRLINE, NOT SHADOW. A 1px border at ~10% ink is what makes a stacked list
   of cards read as one surface; a soft drop shadow under each of them is the
   single clearest tell of a 2014 template. The bottom tab bar keeps its own
   shadow — it floats over content and has to. */
.hrc-panel {
	background: var(--hrc-card, #fff);
	border: 1px solid var(--hrc-line, #e5e7eb);
	border-radius: 16px;
	box-shadow: none;
	padding: .85rem 1rem;
	margin-bottom: 1rem;
}
.hrc-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .15rem; }
.hrc-panel__head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
/* 44px tall and padded on the left so the tap area is a real target rather
   than the 11 characters of «Προβολή όλων». */
.hrc-panel__more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-left: .75rem;
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--hrc-primary, #1d4ed8);
	white-space: nowrap;
}
.hrc-panel__more:hover, .hrc-panel__more:focus { text-decoration: underline; }
.hrc-panel .hrc-list { border: 0; border-radius: 0; box-shadow: none; }
.hrc-panel .hrc-list__item { padding: .7rem 0; }

/* ------------------------------------------------------ Dashboard list rows */
/* The row shape both dashboards use inside a .hrc-panel: an optional
   thumbnail, a stacked text column, and a right-hand column carrying the wage
   or the state. The WHOLE row is one <a>, so the touch target is the row and
   not the title — which is also why there is exactly one anchor per row and
   no nested links to trap a screen reader in. */
.hrc-rows { list-style: none; margin: 0; padding: 0; }
.hrc-row + .hrc-row { border-top: 1px solid var(--hrc-line, #e5e7eb); }
/* FLEX, not a three-column grid. Not every row has all three parts — an
   assignment row has no thumbnail, an advert with no readable compensation has
   no wage pill — and with fixed grid tracks a missing first child slid the text
   column into the thumbnail's track and the wage into the text's. Flex sizes
   whatever children are actually there, so one rule serves every row shape. */
.hrc-row__link {
	display: flex;
	align-items: center;
	gap: .8rem;
	min-height: 44px;
	padding: .7rem 0;
	text-decoration: none;
	color: var(--hrc-ink, #111827);
}
.hrc-row__link:hover, .hrc-row__link:focus { text-decoration: none; }
.hrc-row__link:hover .hrc-row__title { color: var(--hrc-primary, #1d4ed8); }
.hrc-row__link:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; border-radius: 10px; }
/* 12px radius, per the radius scale: 16 for cards, 999 for pills, 12 here.
   The image itself is a .hrc-photo, whose own rule is a 50% circle, so the
   square is re-imposed on this one call site only. */
.hrc-row__thumb { display: flex; flex: 0 0 auto; line-height: 0; }
.hrc-row__thumb .hrc-photo {
	/* 56 CSS px from a 72px (md) source. render() prints 72 into the width and
	   height attributes and those still describe a SQUARE, so the reserved box
	   has the right aspect ratio and nothing reflows when the bytes arrive —
	   and the extra source pixels are what keep the thumbnail sharp on a 2×
	   phone screen. */
	width: 56px;
	height: 56px;
	border-radius: 12px;
}
/* The one child that grows, and the one that may shrink: min-width:0 is what
   lets a long Greek job title wrap inside the row instead of forcing the wage
   pill off the right edge. */
.hrc-row__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.hrc-row__title { font-weight: 700; font-size: .98rem; line-height: 1.3; overflow-wrap: anywhere; }
.hrc-row__sub { font-size: .85rem; color: var(--hrc-muted, #6b7280); overflow-wrap: anywhere; }
.hrc-row__when { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--hrc-muted, #6b7280); }
.hrc-row__when .hrc-icon { width: 15px; height: 15px; flex: 0 0 auto; }
/* The right-hand column: wage, or state over chevron.
   `flex: 0 1 auto` and a 45% cap, NOT `0 0 auto`: the longest status this
   product can print is «Λίστα αναπληρωματικών» and the longest wage is a whole
   phrase, and at 360px an unshrinkable right column would take more than half
   the row and squeeze the job title — the thing the row is actually about —
   into a two-character sliver. The cap guarantees the title always keeps the
   majority of the row. */
.hrc-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex: 0 1 auto; max-width: 45%; }
.hrc-row__chev { display: flex; color: var(--hrc-muted, #6b7280); }
.hrc-row__chev .hrc-icon { width: 16px; height: 16px; }
/* The wage the advert really carries, straight from
   CompensationValidator::display(). It is a sentence («80 € ανά ημέρα
   (μικτά)»), not a token, so the pill is capped and allowed to wrap rather
   than pushing the title column to nothing. */
.hrc-pay {
	/* 8rem is «80 € ανά ημέρα» on one line at this size, so the common advert
	   reads as two lines rather than three. */
	max-width: 8rem;
	padding: .22rem .6rem;
	border-radius: 999px;
	background: var(--hrc-success-soft, #ecfdf5);
	border: 1px solid #a7f3d0;
	color: var(--hrc-success, #047857);
	font-size: .76rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}
/* Row state. Green only for a finished job; everything else is neutral, so
   «green» keeps meaning one thing on this screen. */
.hrc-state {
	display: inline-block;
	padding: .2rem .55rem;
	border-radius: 999px;
	background: var(--hrc-bg, #f9fafb);
	border: 1px solid var(--hrc-line, #e5e7eb);
	color: #374151;
	font-size: .74rem;
	font-weight: 700;
	line-height: 1.3;
	/* Deliberately NOT nowrap. AssignmentService::STATUSES holds «Αναμονή
	   επιβεβαίωσης» and «Λίστα αναπληρωματικών»; a nowrap pill carrying either
	   at 360px would either overflow the card or force an ellipsis, and a
	   truncated status is a status that lies. It wraps to two lines instead. */
	text-align: center;
}
.hrc-state--done { background: var(--hrc-success-soft, #ecfdf5); border-color: #a7f3d0; color: var(--hrc-success, #047857); }

/* An empty section is part of the design: it says what will appear here, so
   the member is not staring at a white rectangle wondering what broke. */
.hrc-empty-state { margin: 0; padding: .9rem 0 .4rem; color: var(--hrc-muted, #6b7280); font-size: .9rem; line-height: 1.5; }

/* Visually-hidden text. The plugin's markup has always used WordPress' own
   `screen-reader-text` class and relied on the THEME to define it; a theme
   that does not leaves the hero switch's label printed across the blue card.
   Scoped to the plugin's own roots so it cannot alter anything else on the
   page, and it is the standard clip pattern, so a theme that does define the
   class agrees with this one. */
.hrc-dashboard .screen-reader-text,
.hrc-auth .screen-reader-text,
.hrc-jobs .screen-reader-text,
.hrc-job-single .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Onboarding steps */
.hrc-steps { background: var(--hrc-card, #fff); border: 1px solid var(--hrc-line, #e5e7eb); border-radius: var(--hrc-radius, 12px); padding: 1.1rem 1.2rem; box-shadow: var(--hrc-shadow); margin-bottom: 1.3rem; }
.hrc-steps__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.hrc-steps__pct { font-weight: 800; color: var(--hrc-primary-dark, #1e40af); }
.hrc-progress { height: 8px; border-radius: 999px; background: #e5e7eb; overflow: hidden; margin-bottom: 1rem; }
.hrc-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--hrc-primary, #1d4ed8), var(--hrc-success, #047857)); transition: width .3s ease; }
.hrc-steps__list { list-style: none; margin: 0; padding: 0; counter-reset: hrcstep; }
.hrc-step { display: flex; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--hrc-line, #e5e7eb); }
.hrc-step:first-child { border-top: 0; }
.hrc-step__mark { flex: 0 0 1.85rem; height: 1.85rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; background: var(--hrc-primary-soft, #eff6ff); color: var(--hrc-primary-dark, #1e40af); }
.hrc-step.is-done .hrc-step__mark { background: var(--hrc-success-soft, #ecfdf5); color: var(--hrc-success, #047857); }
.hrc-step__body { display: flex; flex-direction: column; gap: .15rem; }
.hrc-step__label { font-weight: 600; }
.hrc-step.is-done .hrc-step__label { color: var(--hrc-muted, #6b7280); text-decoration: line-through; }
.hrc-step__hint { font-size: .88rem; color: var(--hrc-muted, #6b7280); }
.hrc-steps__list--plain .hrc-step__label { text-decoration: none; color: inherit; }

/* Compact lists */
.hrc-section-title { margin: 1.4rem 0 .6rem; font-size: 1.05rem; }
.hrc-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hrc-line, #e5e7eb); border-radius: var(--hrc-radius, 12px); overflow: hidden; background: var(--hrc-card, #fff); box-shadow: var(--hrc-shadow); }
.hrc-list__item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 1rem; border-top: 1px solid var(--hrc-line, #e5e7eb); flex-wrap: wrap; }
.hrc-list__item:first-child { border-top: 0; }
.hrc-list__link { display: flex; flex-direction: column; gap: .1rem; text-decoration: none; color: var(--hrc-ink, #111827); flex: 1 1 60%; min-width: 0; }
.hrc-list__link:hover .hrc-list__title { color: var(--hrc-primary, #1d4ed8); }
.hrc-list__title { font-weight: 600; }
.hrc-list__meta { font-size: .85rem; color: var(--hrc-muted, #6b7280); }
.hrc-list__pay { font-weight: 700; color: var(--hrc-success, #047857); white-space: nowrap; }
.hrc-empty-inline { color: var(--hrc-muted, #6b7280); padding: 1.2rem 0; }
.hrc-role-switch { display: flex; gap: .3rem; margin-bottom: 1rem; border-bottom: 2px solid var(--hrc-line, #e5e7eb); }

/* Nav icons: sidebar on desktop, bottom bar on mobile */
/* position:relative is the anchor for .hrc-nav__badge above; it changes
   nothing on its own. */
.hrc-nav__icon { display: none; position: relative; }
@media (max-width: 899px) {
	/* Fixed bottom tab bar with 5 primary destinations, like a native app.
	   Secondary sections are reachable from the “Λογαριασμός” tab. */
	.hrc-dashboard { padding-bottom: 78px; }
	.hrc-dashboard__nav {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
		background: rgba(255,255,255,.97); backdrop-filter: saturate(180%) blur(8px);
		border-top: 1px solid var(--hrc-line, #e5e7eb);
		padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -2px 14px rgba(17,24,39,.1);
	}
	.hrc-dashboard__nav ul { display: flex; justify-content: space-around; gap: 0; margin: 0; }
	.hrc-dashboard__nav li { flex: 1 1 0; min-width: 0; }
	/* Only the five primary destinations appear in the tab bar. */
	.hrc-dashboard__nav .hrc-nav-extra { display: none; }
	.hrc-dashboard__nav a { flex-direction: column; gap: .1rem; padding: .45rem .2rem; text-align: center; font-size: .68rem; line-height: 1.15; border-radius: 10px; color: var(--hrc-muted, #6b7280); }
	.hrc-dashboard__nav .hrc-nav__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
	.hrc-nav__icon { display: flex; align-items: center; justify-content: center; }
	.hrc-dashboard__nav .hrc-icon { width: 22px; height: 22px; }
	/* The list inside the account tab reads at body size, so its icons
	   match the text rather than the tab bar. */
	.hrc-nav--secondary .hrc-icon { width: 20px; height: 20px; }
	.hrc-dashboard__nav a.is-active { background: none; color: var(--hrc-primary, #1d4ed8); font-weight: 700; box-shadow: none; }
	/* Secondary sections: full-width list inside the account tab. */
	.hrc-nav--secondary { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hrc-line, #e5e7eb); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--hrc-shadow); }
	.hrc-nav--secondary li + li { border-top: 1px solid var(--hrc-line, #e5e7eb); }
	.hrc-nav--secondary a { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; text-decoration: none; color: var(--hrc-ink, #111827); font-weight: 600; }
	.hrc-nav--secondary a::after { content: '›'; margin-left: auto; color: var(--hrc-muted, #6b7280); font-size: 1.2rem; }
	.hrc-dashboard__title { font-size: 1.35rem; }
	.hrc-form input, .hrc-form select, .hrc-form textarea { font-size: 16px; } /* prevents iOS zoom */
	.hrc-appbar { border-radius: 14px; }
}

/* -------------------------------------------------- Term / location picker */
.hrc-picker { border: 1.5px solid var(--hrc-line, #e5e7eb); border-radius: var(--hrc-radius, 12px); background: var(--hrc-card, #fff); box-shadow: var(--hrc-shadow); max-width: 560px; overflow: hidden; }
.hrc-picker__top { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-bottom: 1px solid var(--hrc-line, #e5e7eb); background: var(--hrc-bg, #f9fafb); }
.hrc-picker__search { flex: 1 1 auto; min-width: 0; padding: .5rem .75rem; border: 1.5px solid #d1d5db; border-radius: 8px; font: inherit; min-height: 42px; }
.hrc-picker__search:focus { border-color: var(--hrc-primary, #1d4ed8); box-shadow: 0 0 0 3px rgba(29,78,216,.18); outline: none; }
.hrc-picker__count { flex: 0 0 auto; font-size: .82rem; font-weight: 700; color: var(--hrc-primary-dark, #1e40af); background: var(--hrc-primary-soft, #eff6ff); padding: .25rem .7rem; border-radius: 999px; white-space: nowrap; }
.hrc-picker__list { max-height: 380px; overflow-y: auto; padding: .4rem; -webkit-overflow-scrolling: touch; }

/* Checkbox rows: full-width touch targets, no Ctrl+click gymnastics. */
.hrc-check { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 8px; cursor: pointer; font-weight: 500; transition: background .12s ease; }
.hrc-check:hover { background: var(--hrc-primary-soft, #eff6ff); }
.hrc-check input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--hrc-primary, #1d4ed8); cursor: pointer; }
.hrc-check:has(input:checked) { background: var(--hrc-primary-soft, #eff6ff); font-weight: 700; color: var(--hrc-primary-dark, #1e40af); }
.hrc-check.is-hidden { display: none; }

/* Location tree */
.hrc-tree { border-bottom: 1px solid var(--hrc-line, #e5e7eb); }
.hrc-tree:last-child { border-bottom: 0; }
.hrc-tree__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; list-style: none; cursor: pointer; padding-right: .5rem; }
.hrc-tree__head::-webkit-details-marker { display: none; }
.hrc-tree__head .hrc-check { flex: 1 1 auto; }
.hrc-check--region { font-weight: 700; }
.hrc-tree__arrow { color: var(--hrc-muted, #6b7280); font-size: 1.3rem; transition: transform .15s ease; padding: 0 .3rem; }
.hrc-tree[open] > .hrc-tree__head .hrc-tree__arrow { transform: rotate(90deg); }
.hrc-tree__body { padding: 0 0 .4rem 1.4rem; }
.hrc-tree__hint { margin: .1rem .7rem .35rem; font-size: .8rem; color: var(--hrc-muted, #6b7280); }
.hrc-check--town { padding-left: 1.9rem; font-weight: 400; }
@media (max-width: 640px) { .hrc-picker__list { max-height: 320px; } .hrc-check { min-height: 46px; } }

/* --------------------------------------------------------------- Chat UI */
.hrc-chat { border: 1px solid var(--hrc-line, #e5e7eb); border-radius: 16px; background: var(--hrc-card, #fff); box-shadow: var(--hrc-shadow); overflow: hidden; max-width: 640px; }
.hrc-chat__head { display: flex; flex-direction: column; gap: .1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--hrc-line, #e5e7eb); background: var(--hrc-bg, #f9fafb); }
.hrc-chat__scroll { max-height: 420px; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; -webkit-overflow-scrolling: touch; }
.hrc-msg { max-width: 78%; padding: .55rem .8rem; border-radius: 14px; display: flex; flex-direction: column; gap: .1rem; }
.hrc-msg--mine { align-self: flex-end; background: var(--hrc-primary, #1d4ed8); color: #fff; border-bottom-right-radius: 4px; }
.hrc-msg--theirs { align-self: flex-start; background: #f3f4f6; color: var(--hrc-ink, #111827); border-bottom-left-radius: 4px; }
.hrc-msg__time { font-size: .7rem; opacity: .75; align-self: flex-end; }
.hrc-chat__composer { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--hrc-line, #e5e7eb); align-items: flex-end; }
.hrc-chat__composer textarea { flex: 1 1 auto; min-width: 0; padding: .55rem .75rem; border: 1.5px solid #d1d5db; border-radius: 10px; font: inherit; resize: none; }

/* Review form */
.hrc-review-form { border-top: 1px solid var(--hrc-line, #e5e7eb); padding-top: .8rem; margin-top: .8rem; }
.hrc-review-form:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.hrc-review-form__grid { display: grid; gap: .35rem; margin: .5rem 0; }
.hrc-review-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hrc-review-row select { min-height: 40px; padding: .3rem .5rem; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 1rem; letter-spacing: .1em; }
.hrc-review-form textarea { width: 100%; padding: .55rem .75rem; border: 1.5px solid #d1d5db; border-radius: 10px; font: inherit; }
@media (min-width: 640px) { .hrc-review-form__grid { grid-template-columns: 1fr 1fr; } }

/* Primary action panel (e.g. one-click verification) */
.hrc-panel--primary { border: 2px solid var(--hrc-primary, #1d4ed8); background: linear-gradient(180deg, var(--hrc-primary-soft, #eff6ff), #fff); }
.hrc-panel--primary .hrc-panel__head h3 { color: var(--hrc-primary-dark, #1e40af); }
.hrc-fallback { border: 1px solid var(--hrc-line, #e5e7eb); border-radius: var(--hrc-radius, 12px); background: var(--hrc-card, #fff); margin-top: 1rem; }
.hrc-fallback > .hrc-tree__head { padding: .85rem 1rem; }
.hrc-fallback .hrc-tree__body { padding: 0 1rem 1rem; }

/* ------------------------------------------------ Landing-page signup block */
.hrc-signup {
	--hrc-primary: #1d4ed8; --hrc-primary-dark: #1e40af; --hrc-primary-soft: #eff6ff;
	--hrc-ink: #111827; --hrc-muted: #6b7280; --hrc-line: #e5e7eb; --hrc-card: #fff;
	--hrc-success: #047857; --hrc-radius: 12px; --hrc-shadow: 0 1px 2px rgba(17,24,39,.06), 0 4px 12px rgba(17,24,39,.06);
	color: var(--hrc-ink); line-height: 1.6;
}
.hrc-signup__grid { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 900px) { .hrc-signup__grid { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }

.hrc-signup__title { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.18; margin: 0 0 .6rem; font-weight: 800; }
.hrc-signup__subtitle { font-size: 1.08rem; color: #374151; margin: 0 0 1.4rem; }

.hrc-signup__benefits { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .6rem; }
.hrc-signup__benefits li { display: flex; align-items: flex-start; gap: .6rem; font-size: 1rem; }
.hrc-signup__benefits span { flex: 0 0 1.5rem; height: 1.5rem; border-radius: 50%; background: #ecfdf5; color: var(--hrc-success); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; }

.hrc-signup__steps { background: var(--hrc-primary-soft); border-radius: var(--hrc-radius); padding: 1.1rem 1.3rem; }
.hrc-signup__steps h3 { margin: 0 0 .6rem; font-size: 1rem; font-weight: 800; color: var(--hrc-primary-dark); }
.hrc-signup__steps ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.hrc-signup__steps li { color: #374151; }

.hrc-signup__form { background: var(--hrc-card); border: 1px solid var(--hrc-line); border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 24px rgba(17,24,39,.10); }
.hrc-signup__form .hrc-form { max-width: none; }
.hrc-signup__form-title { margin: 0 0 1.1rem; font-size: 1.2rem; font-weight: 800; }
.hrc-signup__terms { font-weight: 400 !important; display: flex; gap: .55rem; align-items: flex-start; font-size: .93rem; }
.hrc-signup__login { text-align: center; margin: .9rem 0 0; font-size: .93rem; color: var(--hrc-muted); }
.hrc-button--lg { padding: .85rem 1.6rem; font-size: 1.05rem; min-height: 52px; }
.hrc-button--block { width: 100%; }
.hrc-signup__done { text-align: center; background: var(--hrc-card); border: 1px solid var(--hrc-line); border-radius: 16px; padding: 2rem 1.5rem; box-shadow: var(--hrc-shadow); max-width: 560px; margin-inline: auto; }
.hrc-signup__done .hrc-progress { max-width: 320px; margin: 1rem auto; }
@media (max-width: 899px) { .hrc-signup__form input { font-size: 16px; } }

/* --------------------------------------------------------- Profile photos */
/* The three pixel values below MUST stay identical to ProfilePhotoService::SIZES
   (sm 40, md 72, lg 128). render() prints the very same number into the img
   width AND height attributes, which is what reserves the box before the bytes
   arrive; a stylesheet that disagreed would resize every avatar after layout and
   push the whole applicants list under the reader's cursor. */
.hrc-photo {
	display: inline-block;
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	/* The stored file keeps its aspect ratio (the service caps the longest edge
	   and deliberately does not crop, so a portrait is not decapitated). The
	   square box is filled here instead, centred, rather than squashing a face. */
	object-fit: cover;
	object-position: center;
	background: var(--hrc-bg, #f9fafb);
	border: 1px solid var(--hrc-line, #e5e7eb);
	vertical-align: middle;
}
.hrc-photo--sm { width: 40px; height: 40px; }
.hrc-photo--md { width: 72px; height: 72px; }
.hrc-photo--lg { width: 128px; height: 128px; }

/* Initials fallback. It is also what a viewer who may NOT see the photo gets,
   so it must look like an ordinary «no photo yet» avatar and never hint that
   something is being withheld. */
.hrc-photo--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--hrc-primary-soft, #eff6ff);
	color: var(--hrc-primary-dark, #1e40af);
	font-weight: 800;
	line-height: 1;
	letter-spacing: .02em;
	/* Uppercased HERE on purpose, not in PHP: correct Greek uppercasing drops
	   the tonos (Ά → Α), which the browser does per Unicode, while
	   mb_strtoupper() would print «ΆΠ» — a spelling no Greek reader accepts. */
	text-transform: uppercase;
	-webkit-user-select: none;
	user-select: none;
}
.hrc-photo--placeholder.hrc-photo--sm { font-size: .95rem; }
.hrc-photo--placeholder.hrc-photo--md { font-size: 1.6rem; }
.hrc-photo--placeholder.hrc-photo--lg { font-size: 2.8rem; }

/* An avatar and the name it belongs to, kept on one baseline inside a card.
   The cards on «Ενδιαφερόμενοι», «Επιλεγμένοι υποψήφιοι» and «Αναθέσεις» are
   plain inline flow (<strong>, <em>, pills), so this wrapper is inline-flex and
   NOT flex: a block-level box here would push the advert title and the status
   pills onto their own lines and rebuild three list layouts as a side effect. */
.hrc-card__person {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	vertical-align: middle;
	margin-right: .45rem;
	/* min-width: 0 so a long Greek display name can shrink instead of pushing
	   the pills out of the card on a narrow phone. */
	min-width: 0;
}
.hrc-card__person > strong,
.hrc-card__person > .hrc-list__meta { min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------- Profile-photo control (account) */
.hrc-photo-control { margin: 1.75rem 0 1.25rem; }
.hrc-photo-control h3 { margin: 0 0 .8rem; font-size: 1.1rem; font-weight: 700; }
/* Mobile-first: the preview sits above the form and only moves beside it when
   there is room. The upload form and the delete form are SEPARATE forms — the
   delete must not be nested inside the upload one — so the row wraps only the
   preview and the upload form, and the delete sits underneath both. */
.hrc-photo-control__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.25rem;
}
.hrc-photo-control__preview { flex: 0 0 auto; }
/* The flex child is the BODY, not the form: on the employer dashboard the form
   is not rendered at all while the 'profile_photos' flag is off, and the help
   text that explains why the photo is public has to keep its column. */
.hrc-photo-control__body { flex: 1 1 280px; min-width: 0; }
.hrc-photo-control__form { max-width: 480px; }
.hrc-photo-control__form fieldset { background: var(--hrc-card, #fff); }
/* The file input is excluded from the shared `.hrc-form input` sizing rule (it
   must keep its native button), so it gets its own box here — otherwise it is
   the one control on this panel under the 44px touch target. */
.hrc-photo-control input[type="file"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: .6rem .75rem;
	border: 1.5px dashed #d1d5db;
	border-radius: var(--hrc-radius-sm, 8px);
	background: var(--hrc-bg, #f9fafb);
	color: var(--hrc-ink, #111827);
	font: inherit;
	/* 16px stops iOS Safari zooming the whole page when the picker opens. */
	font-size: 16px;
	cursor: pointer;
}
.hrc-photo-control input[type="file"]:focus-visible {
	border-color: var(--hrc-primary, #1d4ed8);
	border-style: solid;
	box-shadow: 0 0 0 3px rgba(29, 78, 216, .18);
	outline: none;
}
/* One radio per line, each a full-width 44px target. The shared
   `.hrc-form fieldset label` rule puts them side by side with a right margin,
   which on a phone leaves two long Greek labels wrapping into each other and a
   hit area the height of one line of text. */
.hrc-photo-control__form fieldset label {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 .35rem;
	min-height: 44px;
	font-weight: 500;
}
.hrc-photo-control__form fieldset input[type="radio"] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--hrc-primary, #1d4ed8);
}
.hrc-photo-control__form .hrc-button { min-height: 48px; }
.hrc-photo-control__delete { margin-top: 1rem; }
.hrc-photo-control__delete .hrc-button { min-height: 44px; }
@media (max-width: 599px) {
	/* The lg preview is 128px — see ProfilePhotoService::SIZES — and next to it
	   a 280px basis no longer fits, so the two stack. */
	.hrc-photo-control__body { flex-basis: 100%; }
	.hrc-photo-control__form .hrc-button,
	.hrc-photo-control__delete .hrc-button { width: 100%; }
}

/* ------------------------------------------------------ Dispute disclosure */
/* <details class="hrc-dispute"> in the assignments tab of BOTH dashboards had
   no rule at all, so a styled card contained a bare browser-default triangle.
   Styled as a quiet secondary action: raising a dispute should be findable,
   not inviting. */
.hrc-dispute {
	margin-top: .7rem;
	padding-top: .7rem;
	border-top: 1px solid var(--hrc-border, #e5e7eb);
}
.hrc-dispute > summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var(--hrc-muted, #6b7280);
	font-size: .88rem;
	font-weight: 600;
	padding: .2rem 0;
}
/* Safari/older WebKit keep their own marker unless this pseudo is cleared. */
.hrc-dispute > summary::-webkit-details-marker { display: none; }
.hrc-dispute > summary::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform .15s ease;
}
.hrc-dispute[open] > summary::before { transform: rotate(90deg); }
.hrc-dispute > summary:hover,
.hrc-dispute > summary:focus-visible { color: var(--hrc-primary, #2563eb); }
.hrc-dispute > summary:focus-visible { outline: 2px solid var(--hrc-primary, #2563eb); outline-offset: 2px; border-radius: 4px; }

/* --------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.hrc-button, .hrc-card, .hrc-dashboard__nav a, .hrc-pagination a { transition: none; }
	.hrc-cards--jobs .hrc-card:hover, .hrc-button--primary:hover { transform: none; }
	/* The switch knob still MOVES — its position is the state — it just moves
	   instantly. Animating a 40px slide is exactly the vestibular trigger this
	   query exists for. */
	.hrc-switch-input, .hrc-switch-input::after { transition: none; }
	/* Same reasoning as the knob: the triangle still turns, instantly. */
	.hrc-dispute > summary::before { transition: none; }
}

/* ------------------------------------------------ Χάρτης αγγελιών (13 περιφέρειες) */
/* Ένα SVG και μία λίστα, ΤΑ ΙΔΙΑ δεδομένα. Το σχήμα είναι για το μάτι· η λίστα
   είναι αυτή που διαβάζεται σε κινητό, με πληκτρολόγιο και με αναγνώστη οθόνης,
   και γι' αυτό δεν κρύβεται ποτέ. */
.hrc-map {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 1.2rem;
	align-items: start;
	margin: 0 0 1.2rem;
	padding: 1rem 1.1rem;
	background: #fff;
	border: 1px solid var(--hrc-line, #e2e8f0);
	border-radius: 14px;
}
.hrc-map__figure { min-width: 0; }
.hrc-map__svg { width: 100%; height: auto; display: block; }
.hrc-map__area {
	fill: #eef2f7;
	stroke: #fff;
	stroke-width: 1.1;
	stroke-linejoin: round;
	transition: fill .15s ease;
}
/* Πέντε σκαλοπάτια, όχι συνεχής κλίμακα: με μία περιφέρεια στις 200 αγγελίες
   και τις υπόλοιπες στη μία, η γραμμική κλίμακα βάφει τα πάντα λευκά. */
.hrc-map__area--1 { fill: #dbeafe; }
.hrc-map__area--2 { fill: #93c5fd; }
.hrc-map__area--3 { fill: #3b82f6; }
.hrc-map__area--4 { fill: var(--hrc-primary, #1d4ed8); }
.hrc-map__link { cursor: pointer; }
.hrc-map__link:hover .hrc-map__area,
.hrc-map__link:focus-visible .hrc-map__area { fill: #f59e0b; }
.hrc-map__link:focus-visible { outline: none; }
.hrc-map__link:focus-visible .hrc-map__area { stroke: #111827; stroke-width: 2; }
.hrc-map__area.is-selected { fill: #f59e0b; stroke: #111827; stroke-width: 1.6; }
/* Οι άδειες περιφέρειες ΔΕΝ είναι σύνδεσμοι: δείχνουν ότι υπάρχουν, χωρίς να
   υπόσχονται σελίδα με αποτελέσματα. */
.hrc-map__area.is-empty { pointer-events: none; }

.hrc-map__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; }
.hrc-map__item a,
.hrc-map__item .hrc-map__none {
	display: flex; align-items: center; justify-content: space-between; gap: .6rem;
	padding: .32rem .5rem; border-radius: 8px;
	text-decoration: none; color: inherit; font-size: .92rem;
}
.hrc-map__item a:hover { background: var(--hrc-primary-soft, #eff6ff); color: var(--hrc-primary, #1d4ed8); }
.hrc-map__item a strong { font-variant-numeric: tabular-nums; }
.hrc-map__item.is-selected a { background: var(--hrc-primary, #1d4ed8); color: #fff; }
.hrc-map__item.is-empty .hrc-map__none { color: #94a3b8; }
.hrc-map__clear { grid-column: 1 / -1; margin: 0; }

@media (max-width: 780px) {
	.hrc-map { grid-template-columns: 1fr; }
	/* Ο χάρτης μικραίνει αλλά ΔΕΝ φεύγει: είναι ο λόγος που ο επισκέπτης
	   κατάλαβε πού υπάρχουν αγγελίες. Η λίστα από κάτω γίνεται δύο στήλες. */
	.hrc-map__svg { max-width: 320px; margin: 0 auto; }
	.hrc-map__list { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------- Κεφαλίδα αποτελεσμάτων και φίλτρα */
.hrc-jobs__summary {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
	gap: .6rem; margin: 0 0 .6rem;
}
.hrc-jobs__count { margin: 0; font-size: 1.05rem; }
.hrc-jobs__count strong { font-size: 1.35rem; color: var(--hrc-primary-dark, #1e40af); }
.hrc-jobs__total { color: #64748b; font-size: .9rem; }
.hrc-jobs__sort { margin: 0; font-size: .9rem; color: #64748b; display: flex; gap: .55rem; align-items: baseline; }
.hrc-jobs__sort a { text-decoration: none; }
.hrc-jobs__sort a:hover { text-decoration: underline; }
.hrc-jobs__sort strong { color: var(--hrc-primary, #1d4ed8); }

.hrc-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.hrc-chip {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .28rem .6rem; border-radius: 999px;
	background: var(--hrc-primary-soft, #eff6ff); color: var(--hrc-primary-dark, #1e40af);
	font-size: .86rem; font-weight: 600; text-decoration: none;
	border: 1px solid transparent;
}
.hrc-chip:hover { border-color: var(--hrc-primary, #1d4ed8); }
.hrc-chip--clear { background: transparent; color: #64748b; text-decoration: underline; }

/* Η σήμανση «Νέα». Μικρή και δίπλα στον τίτλο, όχι κορδέλα πάνω στην κάρτα: η
   κάρτα έχει ήδη τίτλο, ειδικότητα, περιοχή, τύπο και αμοιβή. */
.hrc-badge {
	display: inline-block; vertical-align: middle;
	margin-left: .45rem; padding: .1rem .42rem;
	border-radius: 999px; font-size: .68rem; font-weight: 800;
	letter-spacing: .03em; text-transform: uppercase;
}
.hrc-badge--new { background: #dcfce7; color: #166534; }

/* --------------------------------- Ο χάρτης μαζεμένος, με επιλεγμένη περιοχή */
/* Το σχήμα ΜΕΝΕΙ στο HTML, απλώς δεν αποδίδεται: κρυμμένο με <details> δεν θα
   υπήρχε καθόλου για μηχανή αναζήτησης ούτε χωρίς JavaScript. */
.hrc-map__check { position: absolute; opacity: 0; pointer-events: none; }
.hrc-map--collapsed { display: block; padding: .55rem .8rem; }
.hrc-map--collapsed .hrc-map__figure,
.hrc-map--collapsed .hrc-map__list { display: none; }
.hrc-map__check:checked + .hrc-map--collapsed { display: grid; padding: 1rem 1.1rem; }
.hrc-map__check:checked + .hrc-map--collapsed .hrc-map__figure,
.hrc-map__check:checked + .hrc-map--collapsed .hrc-map__list { display: block; }
.hrc-map__check:checked + .hrc-map--collapsed .hrc-map__list { display: grid; }
.hrc-map__check:checked + .hrc-map--collapsed .hrc-map__chosen { grid-column: 1 / -1; }

.hrc-map__chosen {
	display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
	margin: 0; font-size: .95rem;
}
.hrc-map__pin { color: var(--hrc-primary, #1d4ed8); }
.hrc-map__chosen-count { color: #64748b; font-size: .88rem; }
.hrc-map__toggle {
	margin-left: auto; cursor: pointer;
	color: var(--hrc-primary, #1d4ed8); font-weight: 600; font-size: .88rem;
	text-decoration: underline;
}
.hrc-map__check:checked + .hrc-map--collapsed .hrc-map__toggle::after { content: ' ▴'; }
.hrc-map--collapsed .hrc-map__toggle::after { content: ' ▾'; }
.hrc-map__all { font-size: .88rem; }

/* ------------------------------------------------ Φόρτωση κι άλλων αγγελιών */
/* Η σελιδοποίηση ΜΕΝΕΙ στο HTML και δουλεύει: το κουμπί είναι από πάνω της, και
   χωρίς JavaScript ο επισκέπτης βλέπει απλώς τους αριθμούς σελίδων, όπως πάντα.
   Ένα ατέρμονο κύλισμα που ΑΝΤΙΚΑΘΙΣΤΑ τη σελιδοποίηση κόβει τις μηχανές
   αναζήτησης από τις σελίδες 2 και πάνω, και όποιον θέλει να φτάσει στο υποσέλιδο. */
.hrc-more { display: flex; justify-content: center; margin: 1rem 0; }
.hrc-more__button { min-width: 220px; }
.hrc-more__button[disabled] { opacity: .6; cursor: wait; }
.hrc-more__end { color: #64748b; font-size: .9rem; }