/* =========================================================
   Preferred roles (PR)
   ========================================================= */
#players .ph-pr-wrap { padding-top: 4px; grid-column: 1 / -1 !important; }
#players .ph-pr-title { font-weight: 650; margin: 10px 0 8px; letter-spacing: .2px; }

#players .ph-pr-line { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
#players .ph-pr-line:first-child { border-top: 0; padding-top: 6px; }

/* Layout vars */
:root{
  --ph-pr-left-w: 104px;
  --ph-pr-row-h: 32px;
  --ph-pr-chip-h: 28px;
  --ph-pr-chip-nudge: -1px;
}

/* 2 columns: left label, right chips */
#players .ph-pr-head{
  display: grid !important;
  grid-template-columns: var(--ph-pr-left-w) 1fr;
  column-gap: 12px;
  align-items: center !important;
  min-height: var(--ph-pr-row-h);
}

/* Hide chips when line disabled */
#players .ph-pr-line[data-enabled="0"] .ph-pr-chips { display:none; }

/* Left (checkbox + label) */
#players .ph-pr-linecheck{
  display: inline-flex;
  align-items: center !important;
  gap: 10px;
  height: var(--ph-pr-row-h);
  min-width: 0;
  font-weight: 650;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  line-height: 1 !important;
}
#players .ph-pr-linecheck input{
  margin: 0 !important;
  transform: none !important;
}
#players .ph-pr-linecheck span{
  display: inline-flex;
  align-items: center;
  height: var(--ph-pr-row-h);
  line-height: 1 !important;
  font-weight: 500;
}

/* Right (chips container) */
#players .ph-pr-chips{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:nowrap;
  min-width:0;
  height: var(--ph-pr-row-h);
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(var(--ph-pr-chip-nudge));
}

/* PR chips */
#players .ph-pr-chip{
  flex: 1 1 0;
  min-width: 0;
  width:auto !important;

  box-sizing: border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  appearance:none;
  -webkit-appearance:none;
  border-radius: 6px;

  height: var(--ph-pr-chip-h) !important;
  padding: 0 10px !important;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);

  font: inherit;
  font-weight: 650;
  font-size: 12px !important;
  letter-spacing: .25px !important;
  line-height: 1 !important;
  text-transform: uppercase;

  box-shadow: none !important;
  cursor:pointer;
  user-select:none;

  transition: transform .06s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
#players .ph-pr-chip:active{ transform: translateY(1px); }
#players .ph-pr-chip.is-on{
  border-color: rgba(255,255,255,.50) !important;
  background: rgba(255,255,255,.20) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.12),
    0 6px 18px rgba(0,0,0,.20) !important;
}

/* small screen tweak */
@media (max-width: 360px){
  :root{ --ph-pr-left-w: 120px; }
}

/* Add player: compact labels (use data-label) */
#players .ph-row-add .ph-field-compact{
  position: relative;
  padding-top: 12px;         /* ruimte voor mini label */
}

#players .ph-row-add .ph-field-compact .ph-label{
  display: none !important;  /* verberg grote label div */
}

#players .ph-row-add .ph-field-compact::before{
  content: attr(data-label);
  position: absolute;
  top: -3px;
  left: 2px;

  font-size: 11px;
  font-weight: 450;
  letter-spacing: .2px;
  color: rgba(255,255,255,.65);
  pointer-events: none;
}

/* =========================================================
   Players list layout + cards
   ========================================================= */
#playersSaveBtn{ display:none !important; }

/* make each player row feel like a card */
#players .ph-row{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  padding: 10px 10px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

/* tighten inside spacing */
#players .ph-row-top{ gap: 8px !important; padding-bottom: 6px !important; }
#players .ph-row-title{ min-width: 0 !important; font-weight: 650; }
#players .ph-row-bottom{
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* Small screens: allow wrap to 2 cols then 1 col */
@media (max-width: 520px){
  #players .ph-row-add .ph-row-bottom > div:first-child{
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 360px){
  #players .ph-row-add .ph-row-bottom > div:first-child{
    grid-template-columns: 1fr !important;
  }
}

#players .ph-subtle { font-weight: 400; font-size: 12px; opacity: 0.68; }

.ph-h2actions{ margin-left: auto; display:flex; gap:10px; }

/* Keep Add player actions right-aligned */
.ph-pagehead{
  display:flex;
}
.ph-pagehead-left{
  flex: 1 1 auto !important;
  min-width: 0;
}
.ph-h2actions{
  margin-left: auto !important;
  display:flex;
  gap:10px;
}

/* H2 + autosave indicator on one line */
.ph-h2row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  width: 100% !important;
}
.ph-h2row .ph-h2{
  margin: 8px 0 8px;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  opacity: 0.9;
}

#playersDirty{
  margin-left: auto !important;
  white-space: nowrap;
  font-size: 12px;
  opacity: .72;
}
#playersDirty[data-state="dirty"],
#playersDirty[data-state="saving"]{ color: rgba(255,255,255,.72); }
#playersDirty[data-state="saved"]{ color: rgba(46, 213, 115, .85); }
#playersDirty[data-state="error"]{ color: rgba(255, 71, 87, .85); }

/* viewport autosave toast */
.ph-save-toast{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;

  padding: 8px 10px;
  border-radius: 10px;

  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);

  font-size: 12px;
  font-weight: 650;
  letter-spacing: .2px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.ph-save-toast[data-state="saved"]{ color: rgba(46, 213, 115, .9); }
.ph-save-toast[data-state="error"]{ color: rgba(255, 71, 87, .9); }

#players .ph-row-add .ph-add-grid{
  display: grid !important;
  grid-template-columns: 1.4fr 0.7fr 1.4fr !important; /* Name | Birth year | Starts */
  gap: 10px !important;
  align-items: end !important;
}

/* Responsive fallback */
@media (max-width: 520px){
  #players .ph-row-add .ph-add-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 360px){
  #players .ph-row-add .ph-add-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Prevent add-player grid from overflowing the card */
#players .ph-row-add .ph-add-grid{
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 1.4fr) !important;
}

#players .ph-row-add .ph-add-grid > .ph-field-compact{
  min-width: 0 !important;   /* critical for grid shrink */
}

#players .ph-row-add .ph-add-grid .ph-input{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   Badges (as controls) + approval colors
   ========================================================= */
#players .ph-row-badges{
  gap: 10px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
#players .ph-row-badges .ph-badge{
  padding: 5px 10px !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  border-radius: 6px !important;
  letter-spacing: .2px !important;
}

/* approval badge base */
#players .ph-row-badges .ph-badge[data-badge="approval"]{
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
}
#players .ph-row-badges .ph-badge[data-badge="approval"][data-approval="approved"]{
  background: rgba(46, 213, 115, .12) !important;
  border-color: rgba(46, 213, 115, .35) !important;
  color: rgba(210, 255, 228, .95) !important;
}
#players .ph-row-badges .ph-badge[data-badge="approval"][data-approval="pending"]{
  background: rgba(255, 200, 0, .12) !important;
  border-color: rgba(255, 200, 0, .35) !important;
  color: rgba(255, 245, 210, .95) !important;
}
#players .ph-row-badges .ph-badge[data-badge="approval"][data-approval="blocked"]{
  background: rgba(255, 71, 87, .12) !important;
  border-color: rgba(255, 71, 87, .35) !important;
  color: rgba(255, 215, 220, .95) !important;
}

/* badge buttons */
.ph-badge-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
  padding: 8px 9px !important;
}
.ph-badge-btn:active{ transform: translateY(1px); }

.ph-badge-chev{
  display:inline-block;
  font-size: 12px;
  font-weight: 800;
  opacity:.9;
  transform: rotate(-90deg);
  transition: transform .16s ease, opacity .16s ease;
  line-height: 1.15;
}
.ph-badge-btn[data-open="1"] .ph-badge-chev{ transform: rotate(0deg); }

/* =========================================================
   Editor chips (no panel)
   ========================================================= */
.ph-editor{
  margin-top: 10px;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.ph-editor-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.ph-editor-label{ display:none !important; } /* you wanted labels gone */

.ph-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:auto !important;
  flex: 0 0 auto !important;

  height: 28px;
  padding: 0 10px;
  border-radius: 8px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);

  font: inherit;
  font-weight: 650;
  font-size: 12px !important;
  letter-spacing: .25px !important;
  line-height: 1 !important;
  text-transform: uppercase;

  cursor:pointer;
  user-select:none;
}
.ph-chip.is-on{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.38);
}

/* =========================================================
   Nudge (no panel) + FIX vertical alignment
   ========================================================= */
.ph-nudge{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.ph-nudge .ph-nudge-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
/* Critical: make text align to chip box-height */
.ph-nudge .ph-nudge-text{
  display:flex;
  align-items:center;
  line-height: 28px; /* matches .ph-chip height */
  margin: 0;
  padding: 0;
  color: rgba(255,255,255,.85);
  font-weight: 400;
}

/* =========================================================
   Inputs (focus) + date quirks (kept as-is)
   ========================================================= */
.ph-input:focus,
.ph-input:focus-visible,
.ph-input:-moz-focusring{
  outline: none !important;
  box-shadow: none !important;
}
.ph-input:focus{ border-color: inherit !important; }

/* Date input quirks (scoped) */
#players input[type="date"].ph-input{
  padding-right: 44px !important;
  background-clip: padding-box;
}
#players input[type="date"].ph-input:focus{
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,.28) !important;
}
#players input[type="date"].ph-input::-webkit-calendar-picker-indicator{
  opacity: .85;
  margin-right: 6px;
  padding: 0;
}
#players input[type="date"].ph-input::-webkit-datetime-edit{ padding: 0; }
#players .ph-field-compact input[type="date"].ph-input{
  padding-right: 11px !important;
  padding-left: 10px !important;
}
  /* --- FINAL: preferred roles chips vertical centering --- */
#players .ph-pr-chip{
  margin: 0 !important;           /* kill any inherited button margins */
}

#players .ph-pr-chips{
  align-items: center !important; /* hard lock */
  height: var(--ph-pr-row-h) !important;
  transform: translateY(-1px) !important;  /* optical centering (tweak -1/-2 if needed) */
}

#players .ph-pr-linecheck{
  height: var(--ph-pr-row-h) !important;   /* ensure left side matches row height */
}

/* FINAL: badge spacing in player card header */
#players .ph-row-top .ph-row-badges{
  display: flex !important;
  gap: 12px !important;
}

/* FINAL: chevron optical alignment */
#players .ph-badge-chev{
  position: relative;
  top: 1px;            /* zet naar 3px als je nog iets lager wil */
}

/* FINAL: slightly reduce player card bottom whitespace */
#players .ph-row{
  padding-bottom: 2px !important; /* was effectively ~10px via padding:10px */
}

/* FINAL: a bit more breathing room above player header */
#players .ph-row{
  padding-top: 15px !important;  /* was 10px */
}

/* FINAL: optical balance inside badge (chevron eats less space) */
#players .ph-badge-chev{
  margin-left: -2px;   /* trek chevron iets naar de tekst toe */
  margin-right: -1px;  /* trek rechterrand iets in */
}

#players .ph-badge-btn{ gap: 5px !important; }

/* FINAL: nudge row perfectly centered */
#players .ph-nudge{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  min-height: 28px !important; /* match chip height */
  background: rgba(255, 200, 0, .12) !important;
  border-color: rgba(255, 200, 0, .35) !important;
  color: rgba(255, 245, 210, .95) !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 200, 0, .35) !important;
  border-radius: 8px;
}

#players .ph-nudge-text{
  display:flex !important;
  align-items:center !important;
  height: 28px !important;
  line-height: 28px !important;
  margin: 0 !important;
}

#players .ph-nudge-actions{
  display:flex !important;
  align-items:center !important;
  gap: 8px;
  height: 28px !important;
}

/* Force buttons to exactly match the row box */
#players .ph-nudge-actions .ph-chip{
  height: 28px !important;
  line-height: 28px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* FINAL: editor date inputs match chip height + vertical alignment */
#players .ph-editor-row{
  align-items: center !important;
}

#players .ph-editor-row input[type="date"].ph-input{
  height: 28px !important;
  line-height: 28px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

#players .ph-editor-row input[type="date"].ph-input{
  padding-left: 10px !important;
  padding-right: 11px !important; /* of jouw bestaande waarde */
}

/* FINAL: optical align date input with chips */
#players .ph-editor-row input[type="date"].ph-input{
  transform: translateY(-6px) !important;  /* tweak -1 / -2 if needed */
}

/* FINAL: add-player card needs a bit more bottom padding */
#players .ph-row.ph-row-add{
  padding-bottom: 16px !important; /* kies 10–14px naar smaak */
}

/* FINAL: round inputs + date pickers */
#players .ph-input,
#players input[type="date"].ph-input,
#players select.ph-input{
  border-radius: 6px !important; /* kies 8–12px naar smaak */
}

/* FINAL: add-player inputs a bit taller */
#players .ph-row-add .ph-input{
  height: 36px !important;
  line-height: 36px !important;
}

#players .ph-row-add .ph-input{
  padding-left: 6px !important;
}

/* FINAL: iOS date input overflow fix (Add Player card) */
#players .ph-row-add .ph-field-compact{
  min-width: 0 !important;     /* grid item must be allowed to shrink */
  overflow: hidden !important; /* clip native date control overflow */
}

#players .ph-row-add input[type="date"].ph-input{
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   FINAL: Add-player date input – iOS-only overflow + iOS centering
   + Desktop/Firefox reset (prevents icon overlapping text)
   ========================================================= */

/* --- iOS Safari only: keep overflow fix, and center the date text --- */
@supports (-webkit-touch-callout: none) {
  #players .ph-row.ph-row-add .ph-add-grid > label.ph-field.ph-field-compact{
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #players .ph-row.ph-row-add .ph-add-grid > label.ph-field.ph-field-compact input[type="date"].ph-input{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;

    -webkit-appearance: none !important;
    appearance: none !important;

    height: 36px !important;
    line-height: 36px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 12px !important;
    padding-right: 11px !important; /* space for iOS calendar icon */
    box-sizing: border-box !important;
  }

  /* Vertically center the date text inside iOS date input */
  #players .ph-row.ph-row-add input[type="date"].ph-input::-webkit-datetime-edit{
    line-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #players .ph-row.ph-row-add input[type="date"].ph-input::-webkit-datetime-edit-fields-wrapper{
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* --- Desktop (incl Firefox): reset native appearance + restore FF padding fix --- */
@supports not (-webkit-touch-callout: none) {
  #players .ph-row.ph-row-add input[type="date"].ph-input{
    -webkit-appearance: auto !important;
    appearance: auto !important;

    height: 36px !important;
    line-height: 36px !important;

    /* This was your earlier “FF icon” fix – keep it for desktop */
    padding-right: 11px !important;
    padding-left: 12px !important;
    box-sizing: border-box !important;
  }
}

/* FINAL: remove iOS blue focus ring on inputs */
#players .ph-input:focus,
#players .ph-input:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* iOS Safari sometimes draws an inner glow on form controls */
#players input[type="date"].ph-input:focus{
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

/* FINAL: show native calendar icon for editor date pickers (iOS) */
#players .ph-editor-row input[type="date"].ph-input{
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

/* FINAL: calendar hint icon only on iOS (avoid double icon on desktop) */
@supports (-webkit-touch-callout: none) {
  #players .ph-editor-row input[type="date"].ph-input{
    padding-right: 44px !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;

    /* anthracite icon for white iOS date input */
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'>\
<path d='M7 2v3M17 2v3' stroke='rgba(40,40,40,1)' stroke-width='2' stroke-linecap='round'/>\
<path d='M4 9h16' stroke='rgba(40,40,40,0.75)' stroke-width='2' stroke-linecap='round'/>\
<path d='M6 5h12a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z' stroke='rgba(40,40,40,0.75)' stroke-width='2'/>\
</svg>") !important;
  }
}

/* Non-iOS: no extra icon (native icon already shown) */
@supports not (-webkit-touch-callout: none) {
  #players .ph-editor-row input[type="date"].ph-input{
    background-image: none !important;
  }
}

/* FINAL: a bit more space between player cards */
#players .ph-row{
  margin-bottom: 26px !important;
}