/* Minimal, mobile-first */
.jbz-oa { padding: 12px 0; }
.jbz-oa-back{display:inline-block;margin:0 0 10px 0;text-decoration:none;border:1px solid #ddd;border-radius:999px;padding:8px 12px;}
.jbz-oa-back:active{transform:scale(0.99);}
.jbz-oa-items { list-style: none; padding: 0; margin: 0; }
.jbz-oa-item { margin: 0 0 10px 0; }
.jbz-oa-item a { display:block; text-decoration:none; border:1px solid #ddd; border-radius: 10px; padding: 10px; }
.jbz-oa-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px){ .jbz-oa-grid { grid-template-columns: 1fr 1fr; } }
.jbz-oa-names { list-style:none; padding:0; margin:0; }
.jbz-oa-names li { padding: 6px 0; border-bottom: 1px solid #eee; }
.jbz-oa-note { font-size: 0.9em; opacity: 0.9; padding: 4px 0 0 0; }
.jbz-oa-form select, .jbz-oa-form textarea { width: 100%; max-width: 420px; }
.jbz-oa-form button { padding: 10px 14px; cursor: pointer; }
.jbz-oa-btn{padding:10px 14px; cursor:pointer;}
.jbz-oa-notice { border: 1px solid #ddd; border-radius: 10px; padding: 10px; margin: 10px 0; }
.jbz-oa-notice.success { border-color: #7ad37a; }
.jbz-oa-notice.error { border-color: #e08a8a; }
.jbz-oa-small { font-size: 0.9em; opacity: 0.8; }

.jbz-oa-leaders{margin:10px 0;padding:10px;border:1px solid #eee;border-radius:10px;}
.jbz-oa-leaders div{padding:2px 0;}

.jbz-oa-reason-wrap select{width:100%;max-width:420px;}

.jbz-oa-card select{width:100%;max-width:420px;}

/* === Ledenbeheer UI: zorg voor leesbare kleuren (licht + donker) ===
   Sommige themes overschrijven kleuren (bijv. wit op wit). We zetten daarom
   expliciet een basis tekstkleur op de hele ledenbeheer scope.
*/
.jbz-oa-wrap{color:#111 !important;}
.jbz-oa-wrap *{color:inherit;}
.jbz-oa-wrap a{color:inherit;}
.jbz-oa-wrap input[type="text"],
.jbz-oa-wrap textarea,
.jbz-oa-wrap select{
  color:#111 !important;
  background:#fff !important;
  border:1px solid #ddd;
  border-radius:10px;
  padding:8px 10px;
}
.jbz-oa-table th, .jbz-oa-table td{color:inherit;}

.jbz-oa-panel{
  padding:12px;
  border:1px solid #e5e5e5;
  border-radius:12px;
  background:#fff !important;
}

@media (prefers-color-scheme: dark){
  .jbz-oa-wrap{color:rgba(255,255,255,.92) !important;}
  .jbz-oa-wrap input[type="text"],
  .jbz-oa-wrap textarea,
  .jbz-oa-wrap select{
    color:rgba(255,255,255,.92) !important;
    background:rgba(16,17,20,.85) !important;
    border-color:rgba(255,255,255,.14);
  }
  .jbz-oa-panel{
    background:rgba(16,17,20,.78) !important;
    border-color:rgba(255,255,255,.14) !important;
  }
  .jbz-oa-wrap table td, .jbz-oa-wrap table th{
    border-color:rgba(255,255,255,.14) !important;
  }
}

/* Extra guard for LIGHT mode: some themes force link/button colors to white, causing white-on-white.
   We explicitly set readable colors inside ledenbeheer scope.
*/
@media (prefers-color-scheme: light){
  /* Keep it scoped so we don't fight the whole theme */
  .jbz-oa-wrap,
  .jbz-oa-wrap *{
    color:#111 !important;
  }
  .jbz-oa-wrap .jbz-oa-panel,
  .jbz-oa-wrap .jbz-oa-item a,
  .jbz-oa-wrap .jbz-oa-notice,
  .jbz-oa-wrap .jbz-oa-table--cards tr{
    background:#fff !important;
    border-color: rgba(0,0,0,.12) !important;
  }
  .jbz-oa-wrap .jbz-oa-table a{ color:#111 !important; }
  .jbz-oa-wrap .jbz-oa-table--cards td:before{ color: rgba(0,0,0,.65) !important; }
  .jbz-oa-wrap .button,
  .jbz-oa-wrap a.button{
    color:#111 !important;
    background:#f2f2f2 !important;
    border-color:#d0d0d0 !important;
  }
}



/* ===== Ledenbeheer / Lid detail: responsive + dark-friendly ===== */
.jbz-oa-wrap{max-width:1100px;margin:0 auto;padding:12px;}
.jbz-oa-toolbar input, .jbz-oa-toolbar select{max-width:100%;}

.jbz-oa-panel{
  border:1px solid #ddd;
  border-radius:14px;
  padding:12px;
  background:#fff;
}

/* Make tables look consistent (overrides inline borders a bit) */
.jbz-oa-table{width:100%;}
.jbz-oa-table th{font-weight:700;}
.jbz-oa-table td, .jbz-oa-table th{vertical-align:top;}

/* Mobile: table as cards */
@media (max-width: 520px){
  .jbz-oa-detail-grid{grid-template-columns:1fr !important;}
  .jbz-oa-toolbar{flex-direction:column; align-items:stretch !important;}
  .jbz-oa-toolbar > *{width:100% !important;}
  .jbz-oa-toolbar input[type="text"], .jbz-oa-toolbar select, .jbz-oa-toolbar .button{width:100% !important;}

  .jbz-oa-table--cards thead{display:none;}
  .jbz-oa-table--cards, .jbz-oa-table--cards tbody{display:block; width:100%;}
  .jbz-oa-table--cards tr{
    display:block;
    border:1px solid rgba(0,0,0,.12);
    border-radius:16px;
    padding:10px 12px;
    margin:0 0 10px 0;
    background:#fff;
  }
  .jbz-oa-table--cards td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    border:0 !important;
    padding:6px 0 !important;
  }
  .jbz-oa-table--cards td:before{
    content: attr(data-label);
    font-weight:700;
    opacity:.75;
    padding-right:8px;
  }
  .jbz-oa-table--cards td a.button{white-space:nowrap;}
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .jbz-oa-panel,
  .jbz-oa-item a,
  .jbz-oa-notice,
  .jbz-oa-table--cards tr{
    background: rgba(16,17,20,.75) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.92) !important;
  }
  .jbz-oa-wrap, .jbz-oa-wrap *{color: inherit;}
  .jbz-oa-table th{color: rgba(255,255,255,.86) !important;}
  .jbz-oa-table td{color: rgba(255,255,255,.92) !important;}
  .jbz-oa-table--cards td:before{opacity:.7;}
  .jbz-oa-toolbar input, .jbz-oa-toolbar select, .jbz-oa-form select, .jbz-oa-form textarea, .jbz-oa-form input, .jbz-oa-form textarea{
    background: rgba(16,17,20,.65) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.92) !important;
  }
  .jbz-oa-toolbar .button, .jbz-oa-form button, .jbz-oa-form .button{
    background: rgba(255,59,48,.18) !important;
    border-color: rgba(255,59,48,.35) !important;
    color: rgba(255,255,255,.92) !important;
  }
}