/* Override brand Inclusion Job Day sui token Metronic: primario = rosso #c20e1a.
   Caricato DOPO styles.css nella shell. kt-btn-primary / text-primary / bg-primary usano il token
   --primary (via --color-primary), quindi ridefinirlo basta per i bottoni/link primari. */
:root,
[data-kt-theme="true"],
[data-kt-theme-mode="light"],
.dark {
  --primary: #c20e1a;
  --color-primary: #c20e1a;
  --primary-foreground: #ffffff;
  --color-primary-foreground: #ffffff;
}

/* Fallback espliciti, in caso un componente usi tinte blu dirette invece del token. */
.kt-btn-primary {
  background-color: #c20e1a;
  border-color: #c20e1a;
  color: #fff;
}
.kt-btn-primary:hover {
  background-color: #9a0b14;
  border-color: #9a0b14;
}

/* Coerenza: voce di nav corrente in rosso brand (invece del mono scuro). */
.hi-az-nav__link[aria-current="page"] {
  color: #c20e1a;
}

/* Padding titoli area (kt-card-header) ridotto: meno spazio in alto. */
.kt-card-header {
  min-height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* ---- Logo ----
   La build Tailwind di Metronic purga h-8/w-auto: l'<img>/SVG del logo
   collassa a 0x0 e sembra "sparito". Diamo dimensioni esplicite (sidebar +
   header mobile). Il wordmark Inclusion ha ratio ~2.75:1. */
.kt-sidebar-header img,
.kt-header img {
  width: auto;
  display: block;
}
.kt-sidebar-header img { height: 48px; max-width: 230px; }
.kt-header img { height: 40px; max-width: 200px; }
/* La build purga anche lg:hidden: il logo nell'header e' inteso solo per
   mobile (su desktop il logo vive nella sidebar). Lo nascondiamo su desktop
   per evitare il doppione. */
@media (min-width: 1024px) {
  .kt-header img { display: none; }
}

/* ---- Select globali ----
   La build Tailwind di Metronic NON include la classe base .kt-select, quindi
   senza una regola per-pagina i <select> del frontend azienda renderizzano con
   lo stile nativo del browser (incoerente, brutto). Normalizziamo qui tutti i
   select dentro la shell (scope .demo1, assente in wp-admin). Tom Select nasconde
   il <select> originale e disegna .ts-control, quindi queste regole non
   interferiscono con i campi potenziati (es. provincia/luogo di lavoro). */
.demo1 select {
  min-height: 42px;
  max-width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  border: 1px solid var(--input, #dbdfe9);
  border-radius: 8px;
  background-color: var(--background, #fff);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--mono, #071437);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}
/* I .kt-select sono campi/filtri pensati a tutta larghezza (celle di grid).
   padding-right qui (specificità 0,2,1) batte le regole per-pagina
   (.hi-az-*-form .kt-select, 0,2,0) che altrimenti rimuoverebbero lo spazio
   per la freccia. */
.demo1 select.kt-select {
  width: 100%;
  padding-right: 2.25rem;
}
.demo1 select:focus {
  outline: none;
  border-color: var(--primary, #c20e1a);
  box-shadow: 0 0 0 1px var(--primary, #c20e1a);
}
/* Select multipli (rari, non potenziati): no freccia, altezza maggiore. */
.demo1 select[multiple] {
  background-image: none;
  padding-right: 0.75rem;
  min-height: 88px;
}

/* ============================================================
   HEADER & SHELL — arricchimento brand (quick win + consigliato)
   ============================================================ */

/* Firma brand: filo rosso costante sotto l'header e in cima al footer. */
.kt-header { box-shadow: inset 0 -2px 0 #c20e1a; }
.kt-wrapper > footer { border-top: 2px solid #c20e1a; }

/* Visibilità mobile/desktop (lg:hidden è purgato dalla build). */
.hi-az-mobile-only { display: inline-flex; }
.hi-az-pagehead { display: none; }
@media (min-width: 1024px) {
  .hi-az-mobile-only { display: none; }
  .hi-az-pagehead { display: flex; }
  .kt-header [data-kt-drawer-toggle] { display: none; }
}

/* Intestazione pagina (icona + titolo + breadcrumb). */
.hi-az-pagehead { align-items: center; gap: 10px; }
.hi-az-pagehead__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: rgba(194,14,26,0.08); color: #c20e1a; flex: 0 0 auto; }
.hi-az-pagehead__icon i { font-size: 18px; }
.hi-az-pagehead__title { font-size: 15px; font-weight: 600; color: var(--mono,#071437); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hi-az-crumbs { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; color: var(--secondary-foreground,#78829d); }
.hi-az-crumbs a { color: var(--secondary-foreground,#78829d); }
.hi-az-crumbs a:hover { color: #c20e1a; }
.hi-az-crumbs__sep { font-size: 9px; opacity: .6; }
.hi-az-crumbs [aria-current="page"] { color: var(--mono,#071437); font-weight: 500; }

/* Tools header a destra. */
.hi-az-headtools { flex: 0 0 auto; }

/* Pill di contesto evento. */
.hi-az-eventbar { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border,#dbdfe9); border-radius: 999px; padding: 5px 12px; font-size: 12px; background: var(--background,#fff); color: var(--mono,#071437); white-space: nowrap; line-height: 1; }
.hi-az-eventbar__cal { font-size: 15px; color: var(--secondary-foreground,#78829d); }
.hi-az-eventbar__name { font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.hi-az-eventbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--secondary-foreground,#9aa1b2); flex: 0 0 auto; }
.hi-az-eventbar__state { font-weight: 500; color: var(--secondary-foreground,#78829d); }
.hi-az-eventbar__chev { font-size: 11px; color: var(--secondary-foreground,#9aa1b2); }
.hi-az-eventbar--live .hi-az-eventbar__dot, .hi-az-eventbar__dot--live { background: #1d9e75; animation: hi-az-pulse 1.8s infinite; }
.hi-az-eventbar--live .hi-az-eventbar__state { color: #0f6e56; }
.hi-az-eventbar--soon .hi-az-eventbar__dot, .hi-az-eventbar__dot--soon { background: #ba7517; }
.hi-az-eventbar--soon .hi-az-eventbar__state { color: #854f0b; }
.hi-az-eventbar--scheduled .hi-az-eventbar__dot, .hi-az-eventbar__dot--scheduled { background: #378add; }
.hi-az-eventbar--past { opacity: .85; }
@keyframes hi-az-pulse { 0% { box-shadow: 0 0 0 0 rgba(29,158,117,0.5); } 70% { box-shadow: 0 0 0 6px rgba(29,158,117,0); } 100% { box-shadow: 0 0 0 0 rgba(29,158,117,0); } }
@media (prefers-reduced-motion: reduce) { .hi-az-eventbar--live .hi-az-eventbar__dot { animation: none; } }

/* Dropdown via <details> (nessuna dipendenza JS): switcher evento + menu account. */
.hi-az-switch, .hi-az-acct { position: relative; }
.hi-az-switch > summary, .hi-az-acct__btn { list-style: none; cursor: pointer; }
.hi-az-switch > summary::-webkit-details-marker, .hi-az-acct__btn::-webkit-details-marker { display: none; }
.hi-az-eventbar__chev, .hi-az-acct__chev { transition: transform .18s ease; }
.hi-az-switch[open] .hi-az-eventbar__chev, .hi-az-acct[open] .hi-az-acct__chev { transform: rotate(180deg); }
.hi-az-acct__btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border,#dbdfe9); border-radius: 999px; padding: 3px 8px 3px 3px; }
.hi-az-acct__avatar { width: 28px; height: 28px; border-radius: 50%; background: #c20e1a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.hi-az-acct__chev { font-size: 13px; color: var(--secondary-foreground,#9aa1b2); }
.hi-az-switch__menu, .hi-az-acct__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 220px; background: var(--background,#fff); border: 1px solid var(--border,#dbdfe9); border-radius: 10px; box-shadow: 0 8px 28px rgba(15,23,42,0.14); padding: 6px; }
.hi-az-switch__head, .hi-az-acct__head { padding: 6px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--secondary-foreground,#78829d); }
.hi-az-acct__menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--mono,#071437); }
.hi-az-acct__menu a:hover { background: rgba(194,14,26,0.06); color: #c20e1a; }
.hi-az-acct__menu a i { font-size: 16px; color: var(--secondary-foreground,#9aa1b2); }
.hi-az-acct__menu a:hover i { color: #c20e1a; }
.hi-az-acct__logout { border-top: 1px solid var(--border,#eef0f4); margin-top: 4px; padding-top: 10px; }
.hi-az-switch__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; font-size: 13px; }
.hi-az-switch__name { color: var(--mono,#071437); }

/* Voce di nav attiva: barra rossa verticale + testo/icona rossi (più marcata). */
.demo1 .kt-menu-item.active > .kt-menu-link,
.demo1 .kt-menu-item.here > .kt-menu-link { position: relative; background: rgba(194,14,26,0.07); border-radius: 8px; }
.demo1 .kt-menu-item.active > .kt-menu-link::before,
.demo1 .kt-menu-item.here > .kt-menu-link::before { content: ""; position: absolute; left: -2px; top: 7px; bottom: 7px; width: 3px; background: #c20e1a; border-radius: 0 3px 3px 0; }
.demo1 .kt-menu-item.active > .kt-menu-link .kt-menu-title,
.demo1 .kt-menu-item.active > .kt-menu-link .kt-menu-icon i { color: #c20e1a; }

/* ============================================================
   PADDING CARD + RESPONSIVE — fix box "attaccati" e mobile
   La build Tailwind purga p-*/padding: .kt-card-content resta a 0,
   per questo i contenuti dei box risultano incollati ai bordi.
   ============================================================ */

/* Padding uniforme di tutti i box (header allineato al contenuto). */
.kt-card-header { padding: 1rem 1.5rem; }
.kt-card-content { padding: 1.25rem 1.5rem; }
.kt-card-content.p-0 { padding: 0; } /* tabelle full-bleed */

/* Form a campo singolo: non stiracchiati a tutta larghezza. */
.hi-az-chat-form { max-width: 680px; }

/* Tabelle: scroll orizzontale DENTRO la card, mai sulla pagina. */
.kt-card-content:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Trappola flexbox min-width:auto: i wrapper flex della shell non si restringono sotto la
   larghezza intrinseca del contenuto (es. una tabella larga) e sforano la pagina su mobile.
   min-width:0 li lascia restringere → il contenuto largo scrolla nel suo contenitore. */
.demo1 > .flex.grow, .kt-wrapper, .kt-wrapper > main { min-width: 0; }
.demo1 table.kt-table { min-width: 560px; }
/* Alcune pagine plugin hanno ancora wrapper WP Bakery/Impreza legacy attorno alle shortcode
   (es. [vc_row][vc_column]...[shortcode]). Dentro la shell Metronic (CSS del tema rimosso) questi
   contenitori restano a larghezza/padding fissi (~772px) e sforano la pagina su mobile. Li rendiamo
   fluidi così la shortcode (responsive) riempie la larghezza del contenuto. */
#content .vc_row, #content .vc_row-inner, #content .wpb_column, #content .vc_column-inner,
#content .wpb_wrapper, #content .wpb_text_column, #content [class*="vc_col-"],
#content .l-section, #content .l-section-h, #content .g-cols {
  width: auto !important; max-width: 100% !important; min-width: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important; flex-basis: auto !important;
}
@media (max-width: 768px) {
  .hi-az-cand-table, .hi-az-offers-table, .hi-az-slot-table,
  .hi-az-candidates-table, .hi-az-pdf-table {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  /* Qualsiasi tabella Metronic (kt-table) nel contenuto shell: su mobile scrolla in orizzontale
     DENTRO la sua card invece di allargare la pagina (annulla il min-width:560px desktop). */
  #content table.kt-table {
    display: block; width: 100%; min-width: 0; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  }
}

/* Mobile: padding contenitore + nascondi pill evento secondaria nell'header. */
@media (max-width: 1023px) {
  .kt-container-fixed { padding-left: 1rem; padding-right: 1rem; }
  .hi-az-headtools .hi-az-eventbar,
  .hi-az-headtools .hi-az-switch { display: none; }
  .hi-az-pagehead__title { font-size: 14px; }
  /* Header mobile: logo CENTRATO (burger resta a sinistra nel flusso, account a destra). */
  .kt-header .kt-container-fixed { position: relative; }
  .hi-az-mobile-only { position: static; }
  .hi-az-mobile-only img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 30px; width: auto; }
}

/* ---- Pagina "Accesso non autorizzato" (no shell) ---- */
.hi-az-denied { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; background: #f7f7f8; }
.hi-az-denied__card { max-width: 420px; width: 100%; text-align: center; background: #fff; border: 1px solid var(--border,#e4e6ef); border-radius: 14px; padding: 2.5rem 2rem; box-shadow: 0 10px 34px rgba(15,23,42,0.08); }
.hi-az-denied__logo { height: 44px; width: auto; margin: 0 auto 1.25rem; display: block; }
.hi-az-denied__title { font-size: 20px; font-weight: 600; color: var(--mono,#071437); margin: 0 0 .5rem; }
.hi-az-denied__text { font-size: 14px; color: var(--secondary-foreground,#78829d); margin: 0 0 1.5rem; line-height: 1.6; }

/* Impostazioni chat: box compatto (no input stiracchiato a tutta pagina). */
.hi-az-chat-settings { max-width: 760px; }
.hi-az-chat-form { max-width: none; }

/* Icona info ("salvagente") accanto ai titoli di sezione, con tooltip nativo. */
.hi-az-info { display: inline-flex; align-items: center; margin-left: 7px; color: var(--secondary-foreground, #9aa1b2); cursor: help; vertical-align: middle; }
.hi-az-info i { font-size: 15px; }
.hi-az-info:hover, .hi-az-info:focus { color: #c20e1a; outline: none; }

/* Info a CLICK (niente hover): <details> inline accanto ai titoli. */
.hi-az-infopop { display: inline-block; position: relative; margin-left: 7px; vertical-align: middle; }
.hi-az-infopop > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; color: var(--secondary-foreground, #9aa1b2); }
.hi-az-infopop > summary::-webkit-details-marker { display: none; }
.hi-az-infopop > summary i { font-size: 15px; }
.hi-az-infopop[open] > summary, .hi-az-infopop > summary:hover { color: #c20e1a; }
.hi-az-infopop__box { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 280px; padding: 10px 12px; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--foreground, #374151); background: var(--background, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.14); white-space: normal; }

/* Alert info -> celeste chiaro (palette brand, niente viola/indaco di default). */
.kt-alert-info { background: #e6f1fb; border-color: #b5d4f4; color: #185fa5; }

/* Burger menu su mobile: niente sfondo/riquadro grigio, icona grande e tappabile.
   appearance:none è ESSENZIALE: senza, Safari/iOS disegna lo sfondo grigio del PULSANTE NATIVO
   (-webkit-appearance:button) e background:transparent da solo non lo rimuove → "burger grigio". */
.hi-az-mobile-only { align-items: center; }
.hi-az-mobile-only [data-kt-drawer-toggle] { -webkit-appearance: none !important; appearance: none !important; width: 46px; height: 46px; flex: 0 0 auto; align-self: center; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; outline: none; padding: 0; margin: 0; line-height: 1; color: #071437; -webkit-tap-highlight-color: transparent; }
/* Niente sfondo/box/anello in NESSUNO stato: su touch hover/active/focus restano "appiccicati" e
   il flash di tap (tap-highlight) + l'anello focus di Metronic (box-shadow) sembrano un riquadro grigio. */
.hi-az-mobile-only [data-kt-drawer-toggle]:hover,
.hi-az-mobile-only [data-kt-drawer-toggle]:active,
.hi-az-mobile-only [data-kt-drawer-toggle]:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; }
/* Accessibilità (WCAG 2.1 AA — 2.4.7 Focus Visible): il focus da TASTIERA resta ben visibile. */
.hi-az-mobile-only [data-kt-drawer-toggle]:focus-visible { outline: 2px solid #c20e1a !important; outline-offset: 2px; box-shadow: none !important; }
/* L'icona keenicon era display:flex con height:0 → il glifo ::before debordava in basso e il burger
   sembrava "basso/storto" (visibile soprattutto a DPR2). Le do dimensioni reali e centro il glifo. */
.hi-az-mobile-only [data-kt-drawer-toggle] i,
.hi-az-burger i { font-size: 30px; line-height: 1; color: #071437; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
/* IL "BURGER GRIGIO": era il 2° layer duotone della keenicon ki-menu (::after, opacity .1) che
   disegnava una placca dietro le linee. Il glifo vero è in ::before (opacity 1). Nascondo ::after. */
.hi-az-mobile-only [data-kt-drawer-toggle] i::after,
.hi-az-burger i::after { display: none !important; }

/* Burger = SVG 3 linee (nessun glifo icona → nessun riquadro). */
.hi-az-burger svg { display: block; }

/* ============================================================
   ACCESSIBILITÀ + TOAST
   ============================================================ */
/* Skip-link: visibile solo al focus da tastiera. */
.hi-az-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #c20e1a; color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px; font-size: 14px; font-weight: 500; transition: top .15s ease; }
.hi-az-skip:focus { top: 0; color: #fff; outline: 2px solid #fff; outline-offset: -4px; }

/* Ring di focus da tastiera coerente (brand) su tutti gli interattivi. */
.demo1 a:focus-visible, .demo1 button:focus-visible, .demo1 input:focus-visible,
.demo1 select:focus-visible, .demo1 textarea:focus-visible, .demo1 summary:focus-visible,
.demo1 [tabindex]:focus-visible, .demo1 .hi-az-slot-chip:focus-within {
  outline: 2px solid #c20e1a; outline-offset: 2px; border-radius: 4px;
}
#content:focus { outline: none; }
.demo1 .kt-menu-link:focus-visible { outline: 2px solid #c20e1a; outline-offset: -2px; }

/* Target touch minimi su controlli icona piccoli. */
.hi-az-slot-cell .kt-btn-clear { min-width: 30px; min-height: 30px; }

@media (prefers-reduced-motion: reduce) {
  .demo1 *, .demo1 *::before, .demo1 *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Toast: alert di successo con chiudi + auto-dismiss. */
.hi-az-toast { position: relative; padding-right: 42px; transition: opacity .35s ease, transform .35s ease; }
.hi-az-toast.is-hiding { opacity: 0; transform: translateY(-6px); }
.hi-az-toast__close { position: absolute; top: 8px; right: 10px; background: transparent; border: 0; font-size: 20px; line-height: 1; color: inherit; cursor: pointer; opacity: .65; padding: 2px 6px; }
.hi-az-toast__close:hover { opacity: 1; }

/* Avatar account = logo azienda dentro il cerchio (fallback iniziali). */
.hi-az-acct__avatar--img { background: #fff; padding: 0; overflow: hidden; }
.hi-az-acct__avatar--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Pagine chat (hi-chat): stessa shell ma senza sidebar. Nascondo la barra laterale e azzero lo
   spazio a sinistra del contenuto; header/barra rossa/altezze restano invariati. */
.hi-az-chatpage #sidebar { display: none !important; }
.hi-az-chatpage .kt-wrapper { margin-inline-start: 0 !important; padding-inline-start: 0 !important; padding-left: 0 !important; margin-left: 0 !important; }
.hi-az-chatpage .kt-header { inset-inline-start: 0 !important; }
/* Chat a tutta larghezza: niente max-width del container (via lo spazio bianco a sinistra). */
.hi-az-chatpage .kt-container-fixed { max-width: 100% !important; }
/* Logo a sinistra nell'header chat; nascondo il blocco burger mobile (nessuna sidebar da aprire). */
.hi-az-chatpage .hi-az-chat-logo { flex: 0 0 auto; }
.hi-az-chatpage .hi-az-chat-logo img { height: 34px !important; width: 150px !important; max-width: 150px !important; object-fit: contain; object-position: left center; display: block; }
.hi-az-chatpage .hi-az-mobile-only { display: none !important; }

/* Sotto-voci menu: niente pallino/bullet (richiesta grafica). Resta la linea verticale dell'accordion. */
.kt-menu-bullet { display: none !important; }

/* Sotto-voci accordion: spazio tra la linea verticale e il testo (dopo aver tolto il bullet). */
.kt-menu-accordion .kt-menu-link { padding-inline-start: 28px !important; }