/* =========================================================
   vacatures.css
   Marktwaardige vacaturepagina (hero + filters + resultaten)
   Prefix: rc-
========================================================= */

:root{
  --rc-bg:#fafafa;
  --rc-card:#ffffff;
  --rc-border: rgba(0,0,0,.08);
  --rc-text:#101014;
  --rc-muted: rgba(16,16,20,.62);
  --rc-soft: rgba(0,0,0,.04);
  --rc-radius: 18px;
  --rc-shadow: 0 10px 30px rgba(0,0,0,.06);

  /* ✅ Nieuw: zachte filter-achtergrond */
  --rc-filter-bg: #f8fafc; /* subtiel lichtgrijs/blauw */
}

/* =========================================================
   ✅ SAFETY: box-sizing + geen horizontale overflow
========================================================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}
html, body{
  max-width:100%;
  overflow-x:hidden;
}

/* =========================================================
   BASIS
========================================================= */

.rc-body{
  background: var(--rc-bg);
  color: var(--rc-text);
}

.rc-container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 18px;
}

.rc-main{
  padding: 22px 0 42px;
}

/* =========================================================
   HERO – COMPACT & FUNCTIONEEL
========================================================= */

.vac-hero{
  background: linear-gradient(180deg,#f6f7f8 0%,#ffffff 100%);
  padding: 36px 0 28px;
  border-bottom:1px solid rgba(15,23,42,.06);
}

.vac-hero-inner{
  display:grid;
  gap:16px;
}

.vac-hero-title{
  font-size: clamp(26px, 3vw, 34px);
  font-weight:600;
  color: var(--brand-dark);
  margin:0;
}

.vac-hero-sub{
  font-size:15px;
  font-weight:500;
  color:#4b5563;
  max-width:52ch;
}

/* HERO FORM */
.vac-hero-form{
  display:grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap:14px;
  align-items:center;
}

.vac-field{ position:relative; }

.vac-field input{
  width:100%;
  padding:16px 18px 16px 44px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  font-size:15px;
  font-weight:500;
}

.vac-field input:focus{
  border-color: rgba(225,85,44,.6);
  box-shadow: 0 0 0 4px rgba(225,85,44,.15);
  outline:none;
}

.vac-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:.55;
}

.vac-hero-btn{
  height:56px;
  padding:0 30px;
  border-radius:999px;
  border:none;
  background: var(--brand-orange);
  color:#fff;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
}

.vac-hero-btn:hover{
  box-shadow: 0 8px 20px rgba(225,85,44,.35);
}

@media (max-width: 860px){
  .vac-hero-form{ grid-template-columns: 1fr; }
  .vac-hero-btn{ width:100%; }
}

/* =========================================================
   LAYOUT: FILTERS LINKS / RESULTATEN RECHTS
   ✅ body even breed als hero/header (zelfde max-width + padding)
========================================================= */

.rc-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:28px;

  /* ✅ gelijk aan rc-container */
  max-width: 1240px;
  margin: 18px auto 0;
  padding: 0 18px;
}

@media (max-width: 980px){
  .rc-layout{
    grid-template-columns: 1fr;
    padding: 0 18px;
  }
}

/* =========================================================
   HEADER VAKJE BOVEN RESULTATEN
========================================================= */

.rc-results-headbox{
  background:#fff;
  border:1px solid var(--rc-border);
  border-radius:16px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.rc-head-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.rc-view-toggle{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:6px;
  background:var(--rc-soft);
  border-radius:12px;
}

.rc-toggle-btn{
  width:44px;
  height:44px;
  border:0;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-items:center;
  color:rgba(16,16,20,.7);
  font-weight:500;
}

.rc-toggle-btn.is-active{
  background: var(--brand-orange);
  color:#fff;
  box-shadow: 0 8px 20px rgba(225,85,44,.25);
}

.rc-toggle-ico{
  font-size:18px;
  line-height:1;
  font-weight:900;
}

/* sort dropdown in header */
.rc-sortwrap .rc-select{
  min-width: 220px;
  height:44px;
  border-radius:12px;
  padding:10px 38px 10px 12px; /* ruimte voor custom chevron */
  border:1px solid var(--rc-border);
  background:#fff;
  font-weight:600;
}

/* rechts actions */
.rc-head-right{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-end;
  flex-wrap:wrap; /* ✅ voorkomt overflow bij smalle widths */
}

/* responsive headbox */
@media (max-width: 860px){
  .rc-results-headbox{
    flex-direction:column;
    align-items:stretch;
  }
  .rc-head-left{ justify-content:space-between; }
  .rc-sortwrap .rc-select{
    min-width:0;
    width:100%;
  }
  .rc-head-right{
    justify-content:space-between;
  }
}

/* =========================================================
   BUTTONS
========================================================= */

.rc-btn{
  -webkit-appearance:none;
  appearance:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  height:44px;
  padding:0 18px;

  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color: var(--rc-text);

  font-size:14px;
  font-weight:500;
  line-height:1;

  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
}

.rc-btn:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(225,85,44,.15);
  border-color: rgba(225,85,44,.35);
}

.rc-btn-primary{
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color:#fff;
}
.rc-btn-primary:hover{
  box-shadow: 0 8px 20px rgba(225,85,44,.25);
}

.rc-btn-soft{
  background:#fff;
  color: var(--brand-orange);
  border-color: rgba(225,85,44,.55);
}
.rc-btn-soft:hover{
  background: rgba(225,85,44,.06);
}

.rc-btn__icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
}

.rc-btn__icon img{
  width:18px;
  height:18px;
  display:block;
  object-fit:contain;
}

.rc-toolbar-actions{
  display:flex;
  gap:12px;
  align-items:center;
}

/* alleen Open sollicitatie icoon iets groter */
.rc-btn--open-sol .rc-btn__icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
}
.rc-btn--open-sol .rc-btn__icon img{
  width:30px;
  height:30px;
}

/* =========================================================
   FILTER SIDEBAR
========================================================= */

.rc-filter-col{
  position:sticky;
  top:86px;
  align-self:start;
}

@media (max-width: 980px){
  .rc-filter-col{ position:static; }
}

/* ✅ paneel krijgt subtiele achtergrond */
.rc-filters{
  background: var(--rc-filter-bg);
  border:1px solid var(--rc-border);
  border-radius:14px;
  padding:16px;
}

/* header (Filter resultaten) normaliseren */
.rc-filters-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

/* ✅ minder “dik” */
.rc-filters-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;     /* was 800 */
  font-size:15px;
  color:#1f2937;
}

/* ❌ "Alles uitklappen" is weg → als element er nog staat, verberg hem */
.rc-filters-action{
  display:none !important;
}

/* ✅ groups als rustige ‘kaartjes’ binnen filterpaneel */
.rc-filter-group{
  background:#fff;
  border:1px solid rgba(0,0,0,.04);
  border-radius:12px;
  padding:12px;
  margin-top:12px;
}

/* titel van filtergroep */
.rc-filter-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:600;
  font-size:14px;
  color:#111827;
}

/* ✅ dubbele pijltjes weg (alleen select-chevrons blijven) */
.rc-filter-title span{
  display:none !important;
}

.rc-filter-content{ margin-top:10px; }

/* Inputs/selects */
.rc-input,
.rc-select{
  width:100%;
  border:1px solid var(--rc-border);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  background:#fff;
}

/* =========================================================
   ✅ Moderne dropdown chevron (alleen voor selects)
   - we houden native select, maar geven een strakke chevron
========================================================= */

.rc-select{
  -webkit-appearance:none;
  appearance:none;
  padding-right: 38px; /* ruimte voor chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M6.7 9.3a1 1 0 0 1 1.4 0L12 13.2l3.9-3.9a1 1 0 1 1 1.4 1.4l-4.6 4.6a1 1 0 0 1-1.4 0L6.7 10.7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px 16px;
}

.rc-select:focus,
.rc-input:focus{
  outline:none;
  border-color: rgba(225,85,44,.45);
  box-shadow: 0 0 0 4px rgba(225,85,44,.12);
}

/* kleine labels (Min/Max etc) */
.rc-muted{
  color: var(--rc-muted);
}

/* =========================================================
   RESULTATEN
========================================================= */

.rc-results-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  color: var(--rc-muted);
  margin-bottom:14px;
}

/* =========================================================
   VACATURE CARDS
========================================================= */

.rc-results-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}

@media (max-width: 1080px){
  .rc-results-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px){
  .rc-results-grid{ grid-template-columns: minmax(0, 1fr); }
}

.rc-vac-card{
  width:100%;
  min-width:0;
  text-decoration:none;
  color:inherit;

  background:#fff;
  border:1px solid var(--rc-border);
  border-radius:var(--rc-radius);
  padding:16px;

  transition: transform .12s ease, box-shadow .12s ease;

  display:flex;
  flex-direction:column;

  /* ✅ hoger + vast zodat alles past, maar blijft gelijk */
  height: 280px;
  overflow:hidden;

  position:relative;
}

.rc-vac-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--rc-shadow);
}

/* Hoekdriehoek “In procedure” */
.rc-proc-flag{
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:0;
  border-top:96px solid rgba(140, 220, 170, .55);
  border-left:96px solid transparent;
  z-index:3;
  pointer-events:none;
}

.rc-proc-flag > span{
  position:absolute;
  top:-30px;
  right:-1px;

  transform: rotate(45deg);
  transform-origin: top right;

  font-size:11px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;

  color:#14532d;
  background: rgba(255,255,255,.92);
  padding:4px 8px;
  border-radius:999px;

  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Titel bovenaan */
.rc-vac-title{
  font-weight:600;
  font-size:16px;
  margin-bottom:6px;

  line-height:1.2;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

/* content stack */
.rc-vac-lines{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
  min-width:0; /* ✅ voorkomt overflow in flex context */
}

/* ====== Labels/velden (vaste rijen) ====== */
.rc-vac-label{
  font-size:13px;
  font-weight:700;
  color: rgba(16,16,20,.82);
  flex: 0 0 auto;
}

.rc-vac-value{
  font-size:13px;
  font-weight:500;
  color: var(--rc-muted);
  min-width:0;
}

/* Organisatie regel: label + oranje value */
.rc-vac-orgline{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
}
.rc-vac-orgval{
  font-size:13px;
  font-weight:700;
  color: var(--brand-orange);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

/* Provincie regel: label + icon + value */
.rc-vac-provline{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.rc-vac-provval{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.rc-vac-pin{
  width:16px;
  height:16px;
  object-fit:contain;
  display:block;
  flex:0 0 16px;
}
.rc-vac-provtext{
  font-size:13px;
  font-weight:500;
  color: var(--rc-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

/* Generieke field rows: label links, value rechts (vaste hoogte door  ) */
.rc-vac-field{
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:8px;
  min-width:0;
}
.rc-vac-field .rc-vac-value{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* CTA altijd onderaan */
.rc-vac-cta{
  margin-top:auto;
  padding-top:12px;
  min-width:0;
}

.rc-vac-cta .rc-card-btn{
  width:100%;
  height:44px;
  border-radius:12px;
  border:1px solid var(--brand-orange);
  background: var(--brand-orange);
  color:#fff;

  font-size:14px;
  font-weight:500;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
}

.rc-vac-cta .rc-card-btn:hover{
  box-shadow: 0 8px 20px rgba(225,85,44,.25);
}

/* =========================================================
   LIST VIEW = zelfde .rc-vac-card, alleen horizontaal
========================================================= */

.rc-results-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.rc-vac-card.rc-vac-card--row{
  height:auto;
  flex-direction:row;
  align-items:stretch;
  gap:16px;
  padding:16px;
}

.rc-vac-card.rc-vac-card--row .rc-vac-lines{
  flex: 1 1 auto;
  min-width:0;
}

.rc-vac-card.rc-vac-card--row .rc-vac-cta{
  margin-top:0;
  padding-top:0;
  width:220px;
  flex: 0 0 220px;

  display:flex;
  align-items:flex-end;
}

.rc-vac-card.rc-vac-card--row .rc-card-btn{
  width:100%;
  height:44px;
}

/* ✅ FIX: list-view nooit overflow op mobiel */
@media (max-width: 767px){
  .rc-vac-card.rc-vac-card--row{
    flex-direction:column;
    gap:12px;
  }

  .rc-vac-card.rc-vac-card--row .rc-vac-cta{
    width:100%;
    flex: 0 0 auto;
    align-items:stretch;
  }
}

/* disabled card */
.rc-vac-card.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.rc-empty{
  text-align:center;
  padding:32px 16px;
  background:#fff;
  border:1px solid var(--rc-border);
  border-radius:var(--rc-radius);
}

.rc-empty h3{ margin:0 0 6px; }

.rc-empty p{
  color: var(--rc-muted);
  margin:0 0 14px;
}

.rc-empty-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

/* =========================================================
   NIEUW: WORKFORMS (Hybride / ZZP / Remote)
   - klein
   - eigen kleur
   - vaste plek onder Einddatum
========================================================= */

.rc-vac-workforms{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}

/* lege placeholder zodat layout niet verspringt */
.rc-vac-workforms--empty{
  min-height:22px;
}

/* basis pill */
.rc-wf{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}

/* specifieke types */
.rc-wf--hybride{
  background: rgba(59,130,246,.12);
  color:#1d4ed8;
  border:1px solid rgba(59,130,246,.35);
}

.rc-wf--zzp{
  background: rgba(234,179,8,.14);
  color:#92400e;
  border:1px solid rgba(234,179,8,.4);
}

.rc-wf--remote{
  background: rgba(34,197,94,.14);
  color:#166534;
  border:1px solid rgba(34,197,94,.4);
}

/* =========================================================
   FIX: body exact gelijk aan site .container (header/hero)
   - geen effect op hero breedte
   - rc-main en rc-layout volgen nu exact dezelfde container
========================================================= */

/* match site.css: .container { width:min(1280px, calc(100% - 40px)) } */
.rc-container{
  width: min(1280px, calc(100% - 40px));
  margin-inline: auto;

  /* rc-container had padding, maar site-container werkt met -40px.
     Daarom padding hier uitzetten om dubbel in te voorkomen. */
  padding-left: 0;
  padding-right: 0;
}

/* rc-layout mag geen eigen max-width/padding meer hebben, anders schuift het weer */
.rc-layout{
  max-width:none;
  margin: 18px 0 0;
  padding:0;
}

/* =========================================================
   ✅ Mobile filters: collapsible (contract-correct)
   - JS verwacht:
     toggle: #filtersToggle
     panel:  #filtersPanel
========================================================= */
#filtersToggle{
  cursor:pointer;
  user-select:none;
}

@media (max-width: 767px){
  /* panel dicht/open */
  #filtersPanel{
    display:none;
  }
  #filtersPanel.is-open{
    display:block;
  }

  /* optioneel: iets meer “button feel” */
  #filtersToggle{
    padding:10px 12px;
    border-radius:12px;
    background: rgba(255,255,255,.75);
    border:1px solid rgba(0,0,0,.06);
  }
}

/* ── Like / opslaan knop op vacaturekaarten ── */
.rc-vac-card-wrap {
  position: relative;
}

.rc-save-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  cursor: pointer;
  color: #aaa;
  transition: color 0.2s, background 0.2s, transform 0.15s;
  padding: 0;
}
.rc-save-btn:hover {
  color: #e53935;
  background: #fff;
  transform: scale(1.1);
}
.rc-save-btn.is-saved {
  color: #e53935;
  background: #fff;
}
.rc-save-btn svg {
  pointer-events: none;
}

/* Opslaan-knop op detail pagina */
.rc-btn-save.is-saved {
  color: #e53935;
  border-color: #e53935;
}
.rc-btn-save.is-saved svg {
  fill: #e53935;
}

/* ── Toast meldingen ── */
.rc-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #333;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  white-space: nowrap;
}
.rc-toast.rc-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.rc-toast.rc-toast--saved { background: #2e7d32; }
.rc-toast.rc-toast--removed { background: #555; }

/* =========================================================
   MOBILE FIX - voorkom horizontale overflow
========================================================= */
@media (max-width: 860px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .rc-container {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .rc-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 12px 0 0;
  }

  .rc-results-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }

  .rc-vac-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 220px;
  }

  .rc-vac-orgval,
  .rc-vac-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .rc-vac-lines {
    min-width: 0;
    width: 100%;
  }

  .rc-controls-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .rc-controls-bar > * {
    flex-shrink: 0;
    max-width: 100%;
  }

  .rc-sort-group {
    flex-wrap: wrap;
  }
}
.rc-toast.rc-toast--login { background: #1565c0; }