/* ============================================================
   EMEA — Componente "Offerte di lavoro" (CSS)
   Cópia fiel do estilo da página pública, escopada em .offers-area
   para reutilizar dentro da dashboard sem conflitar com dashboard.css.
   ============================================================ */
.offers-area{
  --brand:#004AAD; --brand-strong:#003A8C; --cyan:#0CC0DF;
  --ink:#0A0E1A; --ink-soft:#475467; --ink-muted:#6B7280; --ink-faint:#94A3B8;
  --surface:#FFFFFF; --surface-2:#F1F4FA; --line:#E5E9F2; --line-strong:#D5DCE8;
  --r-pill:999px; --r-lg:24px; --r-xl:32px; --container:1200px; --header-h:96px;
  --shadow-lg:0 24px 60px rgba(0,30,80,.12),0 8px 16px rgba(0,30,80,.06);
  --shadow-xl:0 40px 80px rgba(0,30,80,.18),0 16px 32px rgba(0,30,80,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* Neutraliza posicionamento de página (sem hero) — encaixa no .main-content */
.offers-area .filters-wrap{margin-top:0;padding:0}
.offers-area .grid-wrap{padding:0;margin-top:20px}
.offers-area .stats-bar{padding:0;margin-top:20px}
.offers-area .filters-inner{padding:0;max-width:none}

.offers-area .filters-wrap{
    position:sticky;top:var(--header-h);z-index:40;
    margin-top:-52px;
    padding:0 32px;
    pointer-events:none;
  }
.offers-area .filters-inner{
    max-width:var(--container);margin:0 auto;
    position:relative;
    pointer-events:auto;
  }
.offers-area .filters-card{
    background:rgba(255,255,255,.85);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border:1px solid rgba(255,255,255,.40);
    border-radius:var(--r-xl);
    padding:8px;
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:8px;
    box-shadow:var(--shadow-xl);
    align-items:stretch;
  }
.offers-area .filter-group{
    display:flex;align-items:center;gap:12px;
    padding:12px 18px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    transition:border-color .25s ease,box-shadow .25s ease;
    position:relative;
  }
.offers-area .filter-group:focus-within{
    border-color:rgba(0,74,173,.30);
    box-shadow:0 0 0 4px rgba(0,74,173,.08);
  }
.offers-area .filter-group-icon{
    width:36px;height:36px;
    border-radius:10px;
    background:rgba(0,74,173,.08);
    color:var(--brand);
    display:grid;place-items:center;
    flex-shrink:0;
  }
.offers-area .filter-group-icon svg{width:18px;height:18px;stroke-width:2}
.offers-area .filter-group-body{flex:1;min-width:0;display:flex;flex-direction:column}
.offers-area .filter-label-inline{
    font-size:11px;font-weight:700;
    color:var(--brand);
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-bottom:1px;
  }
.offers-area .filter-select{
    width:100%;
    border:none;background:transparent;
    font-size:15px;font-weight:600;
    color:var(--ink);
    appearance:none;-webkit-appearance:none;
    cursor:pointer;
    padding-right:28px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004AAD' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat;
    background-position:right center;
    background-size:14px;
    outline:none;
    letter-spacing:-.2px;
  }
.offers-area .filter-reset{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:0 28px;
    background:var(--brand);
    color:#fff;
    border-radius:var(--r-lg);
    font-size:14px;font-weight:700;
    transition:all .25s var(--ease);
    box-shadow:0 8px 20px rgba(0,74,173,.25);
    letter-spacing:-.1px;
    white-space:nowrap;
  }
.offers-area .filter-reset:hover{
    background:var(--brand-strong);
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(0,74,173,.35);
  }
.offers-area .filter-reset svg{width:14px;height:14px}


  /* ============================================
     STATS BAR + Sort + Favs
     ============================================ */
  .stats-bar{
    max-width:var(--container);
    margin:36px auto 24px;
    padding:0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }
.offers-area .stats-count{
    display:flex;align-items:baseline;gap:6px;
    font-size:15px;color:var(--ink-muted);
    font-weight:500;
  }
.offers-area .stats-count strong{
    color:var(--ink);font-weight:800;font-size:22px;
    letter-spacing:-.5px;
    font-variant-numeric:tabular-nums;
  }
.offers-area .stats-actions{
    display:flex;align-items:center;gap:10px;
  }
.offers-area .sort-select{
    padding:10px 36px 10px 18px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    font-size:13.5px;font-weight:600;
    color:var(--ink);
    appearance:none;-webkit-appearance:none;
    cursor:pointer;
    transition:all .2s ease;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:12px;
    letter-spacing:-.1px;
  }
.offers-area .sort-select:hover{border-color:var(--line-strong);background-color:var(--surface-2)}
.offers-area .favs-toggle{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 18px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    font-size:13.5px;font-weight:600;
    color:var(--ink-soft);
    transition:all .25s var(--ease);
    letter-spacing:-.1px;
  }
.offers-area .favs-toggle svg{width:14px;height:14px;transition:all .25s var(--ease)}
.offers-area .favs-toggle:hover{border-color:var(--line-strong);background:var(--surface-2);color:var(--ink)}
.offers-area .favs-toggle.active{
    background:rgba(220,38,38,.08);
    border-color:rgba(220,38,38,.20);
    color:#DC2626;
  }
.offers-area .favs-toggle.active svg{fill:#DC2626;stroke:#DC2626}


  /* ============================================
     GRID — Premium card system
     ============================================ */
  .grid-wrap{
    flex:1;
    padding:36px 32px 80px;
    max-width:var(--container);
    margin:0 auto;
    width:100%;
  }
.offers-area .grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
.offers-area .grid.is-empty{grid-template-columns:1fr}
.offers-area .card{
    position:relative;
    background:var(--surface);
    border:1px solid #E8EDF5;
    border-radius:var(--r-xl);
    padding:28px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(15,23,42,.06);
    transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s ease;
    isolation:isolate;
  }

  /* Animated gradient border on hover */
  .card::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:var(--r-xl);
    padding:1px;
    background:linear-gradient(135deg,var(--cyan) 0%,var(--brand) 50%,transparent 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:0;
    transition:opacity .4s ease;
    pointer-events:none;
  }

  /* Subtle inner glow */
  .card::after{
    content:"";position:absolute;
    top:-50%;right:-30%;width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(12,192,223,.10) 0%,transparent 65%);
    opacity:0;
    transition:opacity .5s ease,transform .8s ease;
    pointer-events:none;
    z-index:-1;
  }
.offers-area .card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 44px rgba(15,23,42,.12);
    border-color:transparent;
  }
.offers-area .card:hover::before{opacity:1}
.offers-area .card:hover::after{opacity:1;transform:translate(-20px,20px)}
.offers-area .card-meta{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:18px;
  }
.offers-area .card-id{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;
    color:var(--ink-muted);
    font-weight:500;
  }
.offers-area .card-id strong{
    color:var(--brand);
    font-weight:700;
    background:rgba(0,74,173,.08);
    padding:3px 8px;
    border-radius:6px;
    letter-spacing:-.1px;
    font-variant-numeric:tabular-nums;
  }
.offers-area .card-fav{
    width:36px;height:36px;
    border-radius:50%;
    background:var(--surface-2);
    color:var(--ink-faint);
    display:grid;place-items:center;
    transition:all .25s var(--ease);
    flex-shrink:0;
  }
.offers-area .card-fav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:all .25s ease}
.offers-area .card-fav:hover{background:rgba(11,99,206,.10);color:#0B63CE}
.offers-area .card-fav.active{
    background:rgba(220,38,38,.12);
    color:#DC2626;
  }
.offers-area .card-fav.active svg{fill:#DC2626;stroke:#DC2626}
  /* Città come BADGE (● NOLA): azzurro tenue, pill. Non più testo sciolto. */
.offers-area .card-city{
    align-self:flex-start;
    display:inline-flex;align-items:center;gap:8px;
    margin-bottom:14px;
    padding:8px 16px;
    background:#F3FAFF;
    color:#0B63CE;
    border-radius:999px;
    font-size:12.5px;font-weight:600;
    letter-spacing:.3px;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .2s ease;
  }
.offers-area .card-city::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:#0B63CE;flex-shrink:0;
  }
.offers-area .card-city:hover{background:#E4F2FF}
.offers-area .card-title{
    font-size:26px;
    font-weight:700;
    letter-spacing:-.6px;
    line-height:1.2;
    color:var(--ink);
    margin:0 0 32px;            /* Titolo → descrizione: 32px */
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
.offers-area .card-tags{
    display:flex;gap:6px;flex-wrap:wrap;
    margin-bottom:20px;
    min-height:30px;
  }
.offers-area .card-tag{
    display:inline-flex;align-items:center;
    padding:5px 12px;
    background:rgba(0,74,173,.07);
    color:var(--brand);
    border:1px solid rgba(0,74,173,.10);
    border-radius:var(--r-pill);
    font-size:12px;font-weight:600;
    letter-spacing:-.05px;
    transition:all .2s ease;
  }
.offers-area .card-tag:hover{
    background:rgba(0,74,173,.12);
    border-color:rgba(0,74,173,.20);
  }
/* Descrizione: teaser di ~5 righe. Se il testo eccede, JS aggiunge .is-clamped al
   wrap → fade morbido in fondo (mask, indipendente dallo sfondo) + link "Leggi di
   più →" verso il dettaglio. Se il testo è corto, niente fade né link. */
.offers-area .card-desc-wrap{
    position:relative;
    margin-bottom:32px;            /* Descrizione → informazioni: 32px */
  }
.offers-area .card-desc{
    font-size:15px;
    line-height:1.65;
    font-weight:400;
    color:#374151;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:5;
    line-clamp:5;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
.offers-area .card-desc-wrap.is-clamped .card-desc{
    -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);
            mask-image:linear-gradient(to bottom,#000 62%,transparent);
  }
.offers-area .card-more{
    display:none;
    align-items:center;gap:6px;
    margin-top:12px;
    color:var(--brand);
    font-size:14px;font-weight:600;
    letter-spacing:-.1px;
    transition:gap .2s ease;
  }
.offers-area .card-more svg{width:14px;height:14px}
.offers-area .card-desc-wrap.is-clamped .card-more{display:inline-flex}
.offers-area .card-more:hover{gap:9px}
  /* Informazioni come CHIP (📍/🏷/💻/📅), wrap automatico, niente divisore. */
.offers-area .card-info{
    display:flex;flex-wrap:wrap;gap:12px;
    margin-bottom:28px;
  }
.offers-area .card-chip{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 16px;
    background:#F8FAFC;
    border:1px solid #E6ECF5;
    border-radius:14px;
    font-size:13.5px;
    color:var(--ink-soft);
    font-weight:500;
  }
.offers-area .card-chip svg{
    width:15px;height:15px;
    color:var(--ink-muted);
    flex-shrink:0;
  }
.offers-area .card-chip span{white-space:nowrap}
.offers-area .card-cta{
    margin-top:auto;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    height:64px;
    padding:0 22px;
    background:var(--brand);
    color:#fff;
    border-radius:20px;
    font-size:15px;font-weight:700;
    transition:all .3s var(--ease);
    letter-spacing:-.1px;
    position:relative;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,74,173,.25);
  }
.offers-area .card-cta svg{
    width:14px;height:14px;
    transition:transform .3s var(--ease);
  }
.offers-area .card-cta:hover{
    background:var(--brand-strong);
    transform:scale(1.02);
    box-shadow:0 12px 28px rgba(0,74,173,.35);
  }
.offers-area .card-cta:hover svg{transform:translateX(4px)}


  /* ============================================
     EMPTY STATE
     ============================================ */
  .empty{
    grid-column:1/-1;
    padding:80px 32px;
    text-align:center;
    color:var(--ink-muted);
    background:var(--surface);
    border:1px dashed var(--line-strong);
    border-radius:var(--r-xl);
  }
.offers-area .empty svg{
    width:64px;height:64px;
    color:var(--ink-faint);
    margin:0 auto 20px;
    padding:14px;
    background:var(--surface-2);
    border-radius:50%;
  }
.offers-area .empty h3{
    font-size:20px;font-weight:800;
    color:var(--ink);
    margin-bottom:8px;
    letter-spacing:-.4px;
  }
.offers-area .empty p{font-size:15px;line-height:1.6;max-width:340px;margin:0 auto 24px}
.offers-area .empty button{
    display:inline-flex;align-items:center;
    padding:12px 24px;
    background:var(--brand);
    color:#fff;
    border-radius:var(--r-pill);
    font-size:14px;font-weight:700;
    transition:all .2s ease;
    box-shadow:0 8px 20px rgba(0,74,173,.25);
  }
.offers-area .empty button:hover{background:var(--brand-strong);transform:translateY(-1px)}

@media (max-width:1100px){
  .offers-area .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .offers-area .filters-card{grid-template-columns:1fr;gap:8px;padding:8px}
  .offers-area .filter-group{padding:10px 14px}
  .offers-area .filter-group-icon{width:32px;height:32px}
  .offers-area .filter-select{font-size:14px}
  .offers-area .filter-reset{padding:14px}
  .offers-area .stats-bar{flex-direction:column;align-items:flex-start;gap:12px}
  .offers-area .grid{grid-template-columns:1fr;gap:16px}
  .offers-area .card{padding:24px}
  .offers-area .card-title{font-size:22px}
}
@media (max-width:1024px){
  .offers-area .filters-card{grid-template-columns:1fr 1fr;gap:8px}
  .offers-area .filter-reset{grid-column:1/-1;padding:14px;height:auto}
}

/* ---- Stato candidatura (utente loggato) ---- */
.offers-area .app-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
/* Stati candidatura semplificati: In revisione · Colloquio · Rifiutato */
.offers-area .app-badge.st-revisione{background:#EFF6FF;color:#2563EB}
.offers-area .app-badge.st-colloquio{background:#F3E8FF;color:#9333EA}
.offers-area .app-badge.st-rifiutato{background:#FEF2F2;color:#DC2626}
.offers-area .card-cta.is-applied{justify-content:space-between;cursor:default}
.offers-area button.card-cta{border:0;width:100%;cursor:pointer;font-family:inherit}