/* ==========================================================================
   Personeel — smal-scherm layout (POS/tablet in portret, telefoon).
   De pagina wordt met inline stijlen getekend door index.html +
   js/features/personeel/personeel-pro.js; op smalle schermen overschrijven
   we die hier met !important (zelfde patroon als css/touch-targets.css),
   zodat de brede-scherm-look onaangeroerd blijft.
   ========================================================================== */
/* De instellingen-modal krijgt op smalle schermen al #settingsModalInner .s-btn
   { width:100% !important } (index-main.css) — bedoeld voor knoppen die alleen
   op hun eigen regel staan. Een knop naast een ander element (restaurantcode,
   "+ Medewerker" naast "Sync naar Cloud", "Nieuwe Code" naast de titel) werd
   daardoor even breed als zijn buur, ook al was die veel smaller: de knop leek
   daardoor vele keren groter dan de tekst ernaast. Elke knop die op één regel
   naast iets anders moet blijven staan, krijgt de klasse .pers-inline-btn —
   die wint het hier met dezelfde !important-kracht van die brede regel. */
@media (max-width: 768px) {
  #sPanelStaffapp .pers-inline-btn,
  #sPanelPersoneel .pers-inline-btn {
    width: auto !important;
    flex: none !important;
    white-space: nowrap !important;
  }
}

/* Uurregistratie (in-/uitklok-tegels, js/features/personeel/timeclock.js):
   de PIN/pauze-instellingen wrapten los tussen elkaar op een smal scherm —
   moeilijk te raken checkboxen naast elkaar. Ze schuiven nu als groep naar
   hun eigen regel. */
@media (max-width: 640px) {
  #personeelSection .tc-toggle-group {
    flex-basis: 100% !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 700px) {

  /* ── Kop: "+ Medewerker" mag niet meer de hele breedte opeisen ─────────── */
  #personeelSection .pers-add-btn {
    width: auto !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* ── Subtabs: grid i.p.v. horizontaal wegscrollen — alle 5 blijven in beeld ── */
  #personeelSection .pers-tabbar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    overflow-x: visible !important;
    gap: 6px !important;
  }
  #personeelSection .pers-tab-btn {
    flex: none !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 6px 4px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* ── Statistiekkaarten + contractchips: nette 2-koloms grid ─────────────── */
  #personeelSection .pers-stats-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #personeelSection .pers-stat-card {
    padding: 10px 12px !important;
  }
  #personeelSection .pers-chips-row {
    grid-column: 1 / -1;
  }

  /* ── Zoek/filter: zoekbalk breed bovenaan, functie+contract ernaast ─────── */
  #personeelSection .pers-filter-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #personeelSection .pers-search-input {
    grid-column: 1 / -1 !important;
    flex: none !important;
  }
  #personeelSection .pers-filter-select {
    flex: none !important;
    min-width: 0 !important;
  }

  /* ── Uurregistratie: dezelfde behandeling voor filters + samenvatting ───── */
  #personeelSection .pers-reg-filter-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #personeelSection .pers-reg-filter-row button {
    grid-column: 1 / -1 !important;
  }
  #personeelSection .pers-reg-summary {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Medewerkerskaarten: iets luchtiger, actieknoppen een eerlijk formaat ──
     Geldt ook in Instellingen > Personeel (#sPanelPersoneel), waar dezelfde
     kaart nu ook het PIN-beheer toont — daardoor één groep méér op de kaart. */
  #personeelSection .pers-emp-card,
  #sPanelPersoneel .pers-emp-card {
    padding: 11px 12px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  #sPanelPersoneel .pers-emp-right {
    flex-basis: 100% !important;
    justify-content: flex-end !important;
    margin-top: 4px;
  }
  #personeelSection .pers-emp-actbtn,
  #sPanelPersoneel .pers-emp-actbtn {
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 8px !important;
  }
}