/* ============================================================================
     UX-PASS (okt 2026) - gerichte verbeteringen in lay-out, iconen en kleurgebruik.
     Bewust als overrides ONDER de bestaande regels gezet, zodat het origineel intact en het
     verschil leesbaar blijft. Principes: 1 duidelijke primaire actie per scherm, rustiger
     navigatie (zachte groentint i.p.v. zwart), gelijke marges in kop en inhoud, tegels met een
     icoonvlak en 2 regels toelichting, en overal dezelfde focus-ring voor toetsenbordgebruik.
     ============================================================================ */
  :root{--green-soft:#DCEADC;--green-ink:#0B4A3D;--shadow-1:0 1px 2px rgba(14,36,30,.06),0 1px 1px rgba(14,36,30,.04);--shadow-2:0 10px 28px rgba(14,36,30,.10);}
  @media (prefers-color-scheme:dark){:root{--green-soft:#1B3A30;--green-ink:#CFE5C4;--shadow-1:0 1px 2px rgba(0,0,0,.35);--shadow-2:0 12px 30px rgba(0,0,0,.45);}}
  :root[data-theme="light"]{--green-soft:#DCEADC;--green-ink:#0B4A3D;--shadow-1:0 1px 2px rgba(14,36,30,.06),0 1px 1px rgba(14,36,30,.04);--shadow-2:0 10px 28px rgba(14,36,30,.10);}
  :root[data-theme="dark"]{--green-soft:#1B3A30;--green-ink:#CFE5C4;--shadow-1:0 1px 2px rgba(0,0,0,.35);--shadow-2:0 12px 30px rgba(0,0,0,.45);}

  /* Lay-out: kop en inhoud delen dezelfde marge. .dept-placeholder zette padding op 0 aan de
     zijkanten (viel over .wrap heen), waardoor de inhoud 20px uit lijn stond en op telefoons
     tegen de schermrand plakte. */
  .wrap.dept-placeholder{padding-left:20px;padding-right:20px;}
  @media (max-width:700px){.wrap{padding-left:16px;padding-right:16px;}.wrap.dept-placeholder{padding-left:16px;padding-right:16px;}}

  /* Bovenbalk: 1 primaire knop (Opslaan). Uitloggen wordt een rustige, secundaire knop;
     het taalwissel-blokje krijgt dezelfde hoogte als de knoppen. */
  .topbar{padding:14px 0 8px;}
  .savebtn{display:inline-flex;align-items:center;gap:7px;line-height:1;padding:9px 15px;box-shadow:var(--shadow-1);}
  .savebtn svg{vertical-align:middle !important;}
  .savebtn#topLogout{background:transparent;color:var(--soft);border:1px solid var(--line);box-shadow:none;font-weight:600;}
  .savebtn#topLogout:hover{color:var(--ink);border-color:var(--soft);transform:none;}
  .langtog button{padding:8px 13px;}
  .brand .tl{letter-spacing:.02em;}

  /* Hoofdnavigatie: tekstpillen zonder rand, actieve afdeling in een zachte groentint i.p.v.
     een zwart blok (de zwarte pil concurreerde met de groene Opslaan-knop). Op smalle schermen
     1 horizontaal scrollbare rij i.p.v. 3 rijen die het halve scherm innamen. */
  .deptbar{gap:4px;padding:4px 0 10px;border-bottom:none;margin-bottom:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .deptbar::-webkit-scrollbar{display:none;}
  .deptbar button{border:1px solid transparent;background:transparent;color:var(--soft);border-radius:100px;padding:8px 13px;font-size:13px;font-weight:600;gap:7px;transition:background .12s,color .12s;}
  .deptbar button:not(.on):hover{background:var(--card);border-color:var(--line);color:var(--ink);}
  .deptbar button.on{background:var(--green-soft);color:var(--green-ink);border-color:transparent;font-weight:700;}
  .deptbar button svg{opacity:.85;}
  .deptbar button.on svg{opacity:1;}
  @media (max-width:1180px){.deptbar button{padding:8px 11px;font-size:12.5px;}}

  /* Paginakop: titel + toelichting + eventuele status-badge op 1 regel; de badge
     "Nog niet ingericht" staat na de titel (niet erboven) en is lichter van toon. */
  .dept-placeholder .dp-head{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:4px;padding:0 0 16px;margin-bottom:20px;}
  .dept-placeholder .dp-head>h2,.dept-placeholder .dp-head>h3{order:-1;margin:0;}
  .dept-placeholder .dp-head>h3{font-family:var(--serif);font-size:19px;font-weight:700;}
  /* Let op: geen max-width op de <p>: een flex-item breekt af op zijn begrensde breedte, waardoor
     de toelichting anders naast de titel zou blijven staan i.p.v. eronder. */
  .dept-placeholder .dp-head>p{flex:1 1 100%;min-width:100%;order:1;margin:2px 0 0;}
  .dept-placeholder .dp-head>p{max-width:none;}
  .dept-placeholder .dp-head>.agenda-head-row{flex:1 1 100%;min-width:100%;order:-1;}
  .dept-placeholder .dp-soon{margin:0;font-size:10.5px;letter-spacing:.05em;padding:3px 9px;border-color:transparent;font-weight:600;}
  .dept-placeholder{padding-top:18px;}

  /* Keuzetegels per afdeling: icoon in een vlak, titel, en 2 regels toelichting i.p.v. 1
     afgekapte regel. Tegels krijgen een lichte schaduw en een duidelijke hover/focus-staat. */
  .dept-choice{gap:14px;padding:4px 0 32px;max-width:none;}
  .dc-card{gap:6px;padding:16px 18px;border-radius:14px;min-height:118px;justify-content:flex-start;box-shadow:var(--shadow-1);transition:border-color .15s,box-shadow .15s,transform .15s;}
  .dc-card:hover{border-color:var(--green);box-shadow:var(--shadow-2);transform:translateY(-1px);}
  .dc-card:active{transform:none;}
  .dc-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--green-soft);color:var(--green-ink);margin-bottom:4px;}
  .dc-ic svg{vertical-align:middle !important;width:18px;height:18px;}
  .dc-t{font-size:15.5px;}
  .dc-sub{-webkit-line-clamp:2;font-size:12.5px;line-height:1.4;}
  .dc-card.big .dc-ic{width:44px;height:44px;border-radius:12px;}
  .dc-card.big .dc-ic svg{width:22px;height:22px;}

  /* Agenda: "Nieuw event" is de primaire actie van dit scherm en ziet er ook zo uit;
     de maandnavigatie wordt een rustige knoppengroep. */
  .agenda-newbtn{background:var(--green);color:var(--on-green);border-color:var(--green);box-shadow:var(--shadow-1);}
  .agenda-newbtn:hover{filter:brightness(1.06);}

  /* Kaarten en lijsten: 1 hoekradius-familie (14px), zachtere schaduw, iets kleinere koppen. */
  .card{border-radius:14px;box-shadow:var(--shadow-1);}
  .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);}
  .card h3{font-size:18px;}
  .sheet{border-radius:18px;}

  /* Toegankelijkheid: overal dezelfde zichtbare focus-ring voor toetsenbordgebruik. */
  button:focus-visible,[role="button"]:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
  .search input:focus-visible{outline-offset:1px;}