/* ===== your_friends.css — hard grid, fixed rails ===== */

/* Help Icon Styling */
.btn-link.btn-sm {
  color: #6c757d;
  text-decoration: none;
  transition: color 0.2s ease;
}

.btn-link.btn-sm:hover {
  color: #495057;
  text-decoration: none;
}

.btn-link.btn-sm:focus {
  box-shadow: none;
  color: #495057;
}

/* --- Vars: stel 1x goed af --- */
:root{
    --w-drag-d: 9px;     /* kolom 1 desktop */
    --w-rail-d: 60px;    /* kolom 3 desktop: breedte voor 2 switches */
    --w-del-d:  40px;     /* kolom 4 desktop: delete kolombreedte */
    --gap-cols-d: 2rem; /* ruimte tussen kolommen */
    --gap-sw-d:  .6rem;  /* ruimte tussen de 2 switches */
    --roster-col-min: 90px;
    --roster-col-max: 170px;
    --date-block-width: 40px;
    --date-block-height: 28px;
    --date-col-side-gap: 8px;
    --roster-date-col-width: calc(var(--date-block-width) + var(--date-col-side-gap));
  
    --w-drag-m: 24px;     /* kolom 1 mobiel/tablet */
    --w-rail-m: 96px;     /* kolom 3 mobiel */
    --w-del-m:  40px;     /* kolom 4 mobiel */
    --gap-cols-m: .3rem;
    --gap-sw-m:  .35rem;
  }
  
  /* --- bovenste bediening, ongewijzigd --- */
  .friends-controls{
    min-width:180px; display:flex; align-items:center; gap:1.25rem;
  }
  
  /* ===== GRID: 4 cellen per rij =====
     1) drag  2) naam (flex)  3) switches (fixed)  4) delete (fixed)
  */
  .friend-row,
  .legend-row{
    display:grid;
    grid-template-columns: var(--w-drag-d) 1fr var(--w-rail-d) var(--w-del-d);
    align-items:center;
    column-gap: var(--gap-cols-d);
    width:100%;
  }
  
  /* dezelfde kolommen op mobiel/tablet */
  @media (max-width: 820px){
    .friend-row,
    .legend-row{
      grid-template-columns: var(--w-drag-m) 1fr var(--w-rail-m) var(--w-del-m);
      column-gap: var(--gap-cols-m);
    }
  }
  
  /* --- Kolommen inhoud --- */
  .drag-col{ grid-column:1; display:flex; justify-content:center; align-items:center; width:100%; }
  .name-col{ grid-column:2; display:flex; align-items:center; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .switches-col{ grid-column:3; display:flex; justify-content:center; align-items:center; width:100%; }
  .delete-col{ grid-column:4; display:flex; justify-content:center; align-items:center; width:100%; }
  
  /* --- Switches: twee naast elkaar, niet wrappen --- */
  .switches-col .switches-row{
    display:flex; flex-direction:row; flex-wrap:nowrap;
    gap: var(--gap-sw-d); align-items:center; white-space:nowrap;
  }
  @media (max-width: 820px){
    .switches-col .switches-row{ gap: var(--gap-sw-m); }
  }
  
  /* --- Legend: exact boven de switches --- */
  .legend-row{ opacity:.75; }
  .legend-row .switches-col .switches-row{
    display:flex; flex-wrap:nowrap; gap: 0.2rem; /* kleinere gap tussen icons */ align-items:center; justify-content:center;
  }
  .legend-row .legend-icon{ 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    line-height:1;
    width: calc((var(--w-rail-d) - var(--gap-sw-d)) / 2); /* helft rail minus gap */
  }
  .legend-row .legend-icon:first-child {
    margin-left: -30px; /* schuif bel iets naar links */
  }
  .legend-row .legend-icon:last-child {
    margin-left: 25px; /* schuif share ook ietsje naar links */
  }
  @media (max-width: 820px){
    .legend-row .switches-col .switches-row{ gap: var(--gap-sw-m); }
    .legend-row .legend-icon{
      width: calc((var(--w-rail-m) - var(--gap-sw-m)) / 2);
    }
  }
  
  /* Optioneel: als je een onzichtbare knop als spacer gebruikt in de legend */
  .legend-spacer{ visibility:hidden; pointer-events:none; }
  
  /* --- Naamopmaak / drag UX --- */
  .friend-name-wrap{ display:inline-flex; gap:.35rem; }
  .friend-first, .friend-last{ white-space:nowrap; }
  .drag-handle{ cursor:grab; }
  .drag-handle, .drag-handle *{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:manipulation; }
  .drag-dragging .drag-handle{ cursor:grabbing; }
  .list-group-item{ touch-action:pan-y; overflow:visible; }
  
  /* --- Compactere naam op smal --- */
  @media (max-width:820px){
    .friend-name-wrap{ flex-direction:column; gap:0; line-height:1.1; }
  }
  
  /* ===== Roster-styles (ongewijzigd) ===== */
  .roster-grid table { table-layout:auto; border-collapse:separate; border-spacing:0; width:100%; }
  /* Minder "Excel": zachtere header, minder harde lijnen (maar wél opaque zodat background niet doorschemert) */
  .roster-grid thead th { position:sticky; top:0; background:#fff; background-image:none; z-index:2; }
  .roster-grid thead th.date-col { z-index:4; }
  .roster-grid thead th:not(.date-col) { position:sticky; top:0; background:#fff; background-image:none; z-index:2; }
  /* Eigen kolom donkerder achtergrond */
  .roster-grid thead th.own-user-col { background:#f8f9fa; background-image:none; }
  .roster-grid tbody td.own-user-col { background:#f8f9fa; }
  .roster-grid thead th.own-user-col,
  .roster-grid tbody td.own-user-col {
    position: sticky;
    left: var(--roster-date-col-width);
    background-clip: padding-box;
    box-shadow: 1px 0 0 rgba(17,24,39,0.06), 8px 0 14px rgba(17,24,39,0.05);
  }
  .roster-grid thead th.own-user-col { z-index:3; }
  .roster-grid tbody td.own-user-col { z-index:2; }
  .roster-grid tbody td { vertical-align:top; background:#fff; }
  /* Weekend rows (Sat/Sun) light grey like the iOS app */
  .roster-grid tbody tr.weekend-row td { background:#f3f4f6; }
  .roster-grid tbody tr.weekend-row td.date-col { background:#f3f4f6; }
  /* Keep "own user" column slightly distinct even on weekends */
  .roster-grid tbody tr.weekend-row td.own-user-col { background:#eceff3; }
  /* Belangrijk: geen display:flex op table-cel, anders werkt sticky left niet bij horizontaal scrollen */
  .roster-grid tbody td.date-col { vertical-align:middle; text-align:center; padding-right:0 !important; }
  .roster-grid tbody td.date-col .date-block { margin:0 auto; }
  .roster-cell.empty { height:28px; }
  .roster-grid th, .roster-grid td { padding:.18rem .22rem; }
  .roster-grid .date-col { width:var(--roster-date-col-width); min-width:var(--roster-date-col-width); max-width:var(--roster-date-col-width); padding:0 !important; position:sticky; left:0; background:#fff; z-index:3; }
  .roster-grid thead th.date-col, .roster-grid tbody td.date-col { border-right:1px solid rgba(17,24,39,0.08); }
  /* Verwijder verticale gridlines; gebruik subtiele horizontale separators */
  .roster-grid thead th:not(.date-col), .roster-grid tbody td:not(.date-col) { border-left:none; }
  .roster-grid thead th { border-bottom: 1px solid rgba(17,24,39,0.10); }
  .roster-grid tbody td { border-bottom: 1px solid rgba(17,24,39,0.06); }
  .roster-grid tbody tr:last-child td { border-bottom: none; }
  .roster-grid thead th:not(.date-col) { min-width:var(--roster-col-min); width:clamp(var(--roster-col-min), var(--roster-col-ideal, calc((100vw - var(--roster-date-col-width) - 24px) / var(--user-col-count, 1))), var(--roster-col-max)); max-width:var(--roster-col-max); padding-left:.15rem !important; font-size:.9rem; font-weight:700; letter-spacing:.2px; white-space:normal; overflow-wrap:anywhere; word-break:break-word; text-align:center; }
  .roster-grid thead th .roster-name{ display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; }
  .roster-grid thead th .roster-name .first{ font-weight:700; }
  .roster-grid thead th .roster-name .last{ font-weight:600; opacity:.9; }
  .roster-grid tbody td:not(.date-col) { min-width:var(--roster-col-min); width:clamp(var(--roster-col-min), var(--roster-col-ideal, calc((100vw - var(--roster-date-col-width) - 24px) / var(--user-col-count, 1))), var(--roster-col-max)); max-width:var(--roster-col-max); }
  .roster-grid th.no-friends-col-head { color:#6b7280; }
  .roster-grid td.no-friends-col-cell { vertical-align:top; background:#fff !important; }
  .no-friends-placeholder {
    margin:6px;
    border:1px dashed #d1d5db;
    background:#f9fafb;
    border-radius:10px;
    color:#6b7280;
    font-size:.88rem;
    line-height:1.35;
    text-align:center;
    padding:.75rem .65rem;
    min-height:120px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .trip-cell { position:relative; padding:0 !important; }
  .trip-fill { position:absolute; left:3px; right:3px; top:3px; bottom:3px; background:#dbeafe; border:1px solid #93c5fd; color:#1e3a8a; border-radius:10px; box-shadow: 0 6px 14px rgba(17,24,39,0.10); display:flex; align-items:center; justify-content:center; font-weight:700; flex-direction:column; gap:2px; text-align:center; overflow:hidden; cursor:pointer; }
  .trip-fill.is-detail-selected,
  .trip-fill.is-detail-hovered,
  .trip-fill:hover,
  .trip-fill:focus-visible{ overflow:visible; z-index:12; box-shadow: 0 10px 20px rgba(17,24,39,0.20); }
  .trip-fill.is-detail-hovered:not(.is-detail-selected) { z-index:11; }
  .trip-fill.has-top-time:hover::before,
  .trip-fill.is-detail-hovered.has-top-time::before,
  .trip-fill.has-top-time:focus-visible::before,
  .trip-fill.is-detail-selected.has-top-time::before,
  .trip-fill.has-bottom-time:hover::after,
  .trip-fill.is-detail-hovered.has-bottom-time::after,
  .trip-fill.has-bottom-time:focus-visible::after,
  .trip-fill.is-detail-selected.has-bottom-time::after{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    padding:2px 8px;
    border-radius:999px;
    background:rgba(255,255,255,0.98);
    border:1px solid rgba(30,64,175,0.22);
    box-shadow:0 6px 14px rgba(17,24,39,0.14);
    color:#1e3a8a;
    font-size:10px;
    font-weight:800;
    line-height:1.2;
    white-space:nowrap;
    pointer-events:none;
  }
  .trip-fill.has-top-time:hover::before,
  .trip-fill.is-detail-hovered.has-top-time::before,
  .trip-fill.has-top-time:focus-visible::before,
  .trip-fill.is-detail-selected.has-top-time::before{
    content:attr(data-top-time);
    top:-14px;
  }
  .trip-fill.has-bottom-time:hover::after,
  .trip-fill.is-detail-hovered.has-bottom-time::after,
  .trip-fill.has-bottom-time:focus-visible::after,
  .trip-fill.is-detail-selected.has-bottom-time::after{
    content:attr(data-bottom-time);
    bottom:-14px;
  }
  .trip-reserve { background:#fee2e2; border-color:#dc2626; color:#991b1b; }
  .trip-schaduw { background:#e0f2fe; border-color:#0284c7; color:#0c4a6e; }
  /* Vakantie */
  .trip-vacation { background:#fef9c3; border-color:#f59e0b; color:#854d0e; border-width:2px; }
  /* Vakantie RV (voor-dagen) — iets lichter geel */
  .trip-vacation-rv { background:#fefce8; border-color:#fbbf24; color:#854d0e; border-width:2px; }
  /* Deeltijd (DT) — lichtpaars */
  .trip-deeltijd { background:#e9d5ff; border-color:#b9a7f5; color:#3b0764; border-width:2px; }
  .trip-superrequest { background:#ddd6fe; border-color:#7c3aed; color:#4c1d95; border-width:2px; }
  .trip-vnv { background:#fce7f3; border-color:#db2777; color:#9d174d; border-width:2px; }
  .trip-sim { background:#ede9fe; border-color:#7c3aed; color:#5b21b6; }
  .trip-med { background:#d1fae5; border-color:#059669; color:#065f46; }
  .trip-code { letter-spacing:1px; flex-shrink:0; }
  .trip-schaduw .trip-code { font-size:.72rem; letter-spacing:.2px; line-height:1.05; }
  .trip-city { font-weight:400; font-size:.8rem; line-height:1; opacity:.95; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
  .trip-note { font-weight:400; font-size:.75rem; line-height:1; opacity:.85; }
  .trip-overlap { background:#dcfce7; border-color:#16a34a; color:#166534; }
  .trip-overlap-others { background:#dcfce7; border-color:#16a34a; color:#166534; }
  .trip-fill.trip-border-klm { border-width:2px !important; }
  .trip-fill.trip-border-klm.trip-reserve { border-color:#991b1b !important; }
  .trip-fill.trip-border-klm.trip-schaduw { border-color:#0369a1 !important; }
  .trip-fill.trip-border-klm.trip-vacation { border-color:#b45309 !important; }
  .trip-fill.trip-border-klm.trip-vacation-rv { border-color:#b45309 !important; }
  .trip-fill.trip-border-klm.trip-deeltijd { border-color:#b9a7f5 !important; }
  .trip-fill.trip-border-klm.trip-superrequest { border-color:#6d28d9 !important; }
  .trip-fill.trip-border-klm.trip-vnv { border-color:#be185d !important; }
  .trip-fill.trip-border-klm.trip-sim { border-color:#4c1d95 !important; }
  .trip-fill.trip-border-klm.trip-med { border-color:#047857 !important; }
  .trip-fill.trip-border-klm:not(.trip-reserve):not(.trip-schaduw):not(.trip-vacation):not(.trip-vacation-rv):not(.trip-deeltijd):not(.trip-superrequest):not(.trip-vnv):not(.trip-sim):not(.trip-med):not(.trip-overlap):not(.trip-overlap-others) { border-color:#1e40af !important; }
  .trip-with { position:absolute; bottom:3px; left:6px; right:6px; text-align:center; font-size:10px; line-height:1.2; font-weight:600; opacity:.9; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; max-height:40%; }
  .trip-with .trip-name { display:block; margin:0; padding:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
  /* SIM/MED badges */
  .sim-med-badges{ position:absolute; top:4px; right:6px; display:flex; gap:4px; }
  .badge-sim{ background:#4b0082; color:#fff; border-radius:4px; padding:2px 4px; font-size:10px; font-weight:700; letter-spacing:.5px; }
  .badge-med{ background:#006400; color:#fff; border-radius:4px; padding:2px 4px; font-size:10px; font-weight:700; letter-spacing:.5px; }
  .date-block { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:var(--date-block-width); height:var(--date-block-height); border-radius:6px; background:#f3f4f6; background-image:none; border:1px solid #e5e7eb; }
  .date-day { font-weight:800; line-height:1; font-size:14px; color:#111827; }
  .date-month { font-weight:600; line-height:1; font-size:10px; color:#6b7280; margin-top:1px; }
  /* Hover highlights: alleen vrije (lege) cellen groen, niet trips */
  .roster-grid tr.is-hover-row td:not(.date-col) .roster-cell.empty{
    background: #dcfce7 !important;
  }
  .roster-grid tr.is-hover-row td.date-col .date-block,
  .roster-grid tr.is-mutual-row td.date-col .date-block{
    background:#dcfce7; background-image:none; border-color:#86efac; color:#166534;
  }
  .roster-grid thead th.is-hover-user,
  .roster-grid tbody td.is-hover-user{
    background: #dcfce7 !important;
  }

  /* B) Scroll affordance: schaduw onder sticky header zodra je scrollt */
  .your-friends-container .roster-grid.is-scrolled thead th{
    box-shadow: 0 10px 18px rgba(17,24,39,0.12);
  }
  .your-friends-container .roster-grid.is-scrolled thead th.date-col{
    box-shadow: 0 10px 18px rgba(17,24,39,0.14);
  }
  .page-your-friends .content-wrapper{ max-width:none !important; padding:0 .5rem !important; }
  .page-your-friends .page-container, .your-friends-container{ max-width:none !important; padding:0.75rem .5rem !important; }
  .your-friends-container .full-width-card{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

  /* Maak de bovenkant van de kalender strakker: minder top padding in de kaart */
  .page-your-friends .full-width-card > .card-body{
    padding-top: 0.75rem !important;
  }
  /* Nettere header-knoppen uitlijning, ook mobiel */
  .your-friends-container .header-actions{ flex-wrap:nowrap; overflow:hidden; }
  .your-friends-container .header-actions .btn{ white-space:nowrap; }
  .your-friends-container .btn-icon{ padding:.375rem .5rem; display:inline-flex; align-items:center; justify-content:center; }
  .your-friends-container .btn-icon i{ margin:0; }

  /* Zorg dat de top action-bar nooit "onder" de sticky table header verdwijnt */
  .your-friends-container > .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4{
    position: sticky;
    top: 0.25rem;
    z-index: 20;
    /* transparant houden: geen witte balk */
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 1rem !important; /* Verklein ruimte tussen header en knoppen */
  }
  .your-friends-container .friends-top-actions,
  .your-friends-container .header-actions{
    position: relative;
    z-index: 21;
  }

  .friends-segment-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,0.45);
    z-index: 2050;
  }
  .friends-segment-modal{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 360px);
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(17,24,39,0.10);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(17,24,39,0.20);
    z-index: 2051;
    padding: 12px;
    backdrop-filter: blur(10px);
  }
  .friends-segment-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .friends-segment-head-copy{
    min-width: 0;
  }
  .friends-segment-eyebrow{
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
  }
  .friends-segment-user{
    font-size: 0.96rem;
    font-weight: 700;
    color: #274E8F;
    line-height: 1.2;
  }
  .friends-segment-subtitle{
    margin-top: 2px;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .friends-segment-close{
    border: none;
    background: #f1f5f9;
    color: #334155;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex: 0 0 auto;
  }
  .friends-segment-body{
    display:flex;
    flex-direction:column;
    gap: 6px;
  }
  .friends-segment-time-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
  }
  .friends-segment-time-card{
    border-radius: 12px;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    padding: 9px 10px 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
  }
  .friends-segment-time-key{
    font-size: 0.72rem;
    font-weight: 700;
    color: #1d4ed8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .friends-segment-time-value{
    margin-top: 2px;
    font-size: 1.22rem;
    font-weight: 800;
    color: #1e3a8a;
    line-height: 1.1;
  }
  .friends-segment-time-date{
    margin-top: 2px;
    font-size: 0.77rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.2;
  }
  .friends-segment-row{
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    border-radius: 10px;
    background: #f9fbfd;
    border: 1px solid #e2e8f0;
    padding: 8px 10px;
  }
  .friends-segment-key{
    font-size: 0.76rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1.3;
  }
  .friends-segment-value{
    font-size: 0.87rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
  }
  @media (max-width: 420px){
    .friends-segment-row{
      grid-template-columns: 96px minmax(0, 1fr);
    }
  }
  .your-friends-container .badge-pending{ 
    background:#dc3545; 
    color:#fff; 
    border-radius:12px; 
    font-size:12px; 
    line-height:1; 
    padding:4px 7px; 
    font-weight:700; 
    position: relative !important;
    top: auto !important;
    right: auto !important;
  }
  .your-friends-container .roster-grid table{
    --roster-col-ideal: calc((100vw - var(--roster-date-col-width) - 24px) / var(--user-col-count, 1));
    width:max-content;
    min-width:max-content;
    table-layout:fixed;
  }
  .your-friends-container .roster-grid table.has-no-friends-column{
    width:100%;
    min-width:100%;
  }
  .your-friends-container .roster-grid table.has-no-friends-column th[data-user-id].own-user-col,
  .your-friends-container .roster-grid table.has-no-friends-column td.own-user-col{
    width:var(--roster-col-max) !important;
    min-width:var(--roster-col-max) !important;
    max-width:var(--roster-col-max) !important;
  }
  .your-friends-container .roster-grid table.has-no-friends-column th.no-friends-col-head,
  .your-friends-container .roster-grid table.has-no-friends-column td.no-friends-col-cell{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }
  .page-your-friends .roster-grid, .your-friends-container .roster-grid{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .your-friends-container .roster-grid{ max-height:75vh; overflow-y:auto; -webkit-overflow-scrolling:touch; cursor:grab; }
  .your-friends-container .roster-grid:active{ cursor:grabbing; }
  .your-friends-container .roster-grid.no-select{ user-select:none; -webkit-user-select:none; }
  /* Top action buttons: altijd zichtbaar */
  .friends-top-actions .btn{ 
    height:auto; 
  }
  /* Vrienden knop: gebruik dezelfde blauwe kleur als hamburger menu */
  .friends-top-actions .btn-add-friends.btn-primary {
    background: #274E8F;
    border-color: #274E8F;
    color: white;
  }
  .friends-top-actions .btn-add-friends.btn-primary:hover {
    background: #1a365d;
    border-color: #1a365d;
    color: white;
  }
  /* Tegelijk vrij knop: groen met witte letters */
  .friends-top-actions .btn-free-today.btn-outline-success{
    background: #198754;
    border-color: #198754;
    color: #fff;
  }
  .friends-top-actions .btn-free-today.btn-outline-success:hover{
    background: #146c43;
    border-color: #146c43;
    color: #fff;
  }
  .friends-top-actions .btn-free-today i{ font-size:1rem; }
  .friends-top-actions .btn-add-friends i{ font-size:1rem; }
  @media screen and (max-width:576px){
    .friends-top-actions .btn{ padding:.35rem .45rem; font-size:.9rem; }
    .friends-top-actions .btn .me-2{ margin-right:.35rem !important; }
    /* Verberg tekst in +vrienden knop alleen op mobiel */
    .friends-top-actions a[href*="add_friends"] .btn-text{ display:none; }
    /* Houd badge zichtbaar en positioneer netjes naast icoon */
    .friends-top-actions .badge-pending{ margin-left:.3rem; font-size:11px; padding:3px 6px; }
  }
  @media screen and (max-width:1024px){
    .your-friends-container .roster-grid { --date-block-width: 35px; --date-block-height: 26px; --date-col-side-gap: 8px; --roster-col-max: 112px; }
    .roster-grid thead th:not(.date-col){ padding-left:.12rem !important; font-size:.85rem; }
    .roster-grid th, .roster-grid td{ padding:.08rem .12rem; }
    .date-day{ font-size:12px; }
    .date-month{ font-size:9px; }
    .trip-fill{ left:2px; right:2px; top:2px; bottom:2px; border-radius:6px; }
    .trip-with{ font-size:9px; left:4px; right:4px; bottom:3px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1; }
    .trip-with .trip-name{ display:block; margin:0; padding:0; }
  }
  @media screen and (max-width:768px){
    .your-friends-container .roster-grid { --date-block-width: 32px; --date-block-height: 24px; --date-col-side-gap: 8px; --roster-col-max: 100px; }
    .page-container{ padding:1rem .25rem !important; }
    .roster-grid thead th:not(.date-col){ font-size:.8rem; padding-left:.1rem !important; }
    .roster-grid thead th .roster-name{ line-height:1.0; }
    .roster-grid th, .roster-grid td{ padding:.06rem .08rem; }
    .date-day{ font-size:11px; }
    .date-month{ font-size:8px; }
    .trip-fill{ border-radius:4px; }
    .trip-code{ font-size:.8rem; letter-spacing:.5px; }
    .trip-schaduw .trip-code{ font-size:.68rem; letter-spacing:.1px; }
  }
  
  /* HARD OVERRIDE: top knoppen altijd zichtbaar (sommige browsers houden oude hover/opacity regels vast via SW cache) */
  .page-your-friends .friends-top-actions .btn,
  .your-friends-container .friends-top-actions .btn{
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    pointer-events: auto !important;
  }