/* =========================================================
   Barhulp ledenportaal • leden.css
   Login + leden-dashboard
   ========================================================= */
:root{
  --bh-primary:#f44336;
  --bh-primary-dark:#d32f2f;
  --bh-bg:#f6f7f9;
  --bh-card:#fff;
  --bh-text:#111827;
  --bh-muted:#6b7280;
  --bh-line:#e5e7eb;
  --bh-line-strong:#d1d5db;
  --bh-radius:8px;
  --bh-shadow:0 2px 6px rgba(0,0,0,.06);
}
*{
  box-sizing:border-box;
}
html{
  min-height:100%;
}
body{
  margin:0;
  min-height:100%;
  background:var(--bh-bg);
  color:var(--bh-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;
  line-height:1.45;
}
img{
  max-width:100%;
  height:auto;
}
a{
  color:var(--bh-primary);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}
/* =========================================================
   Login
   ========================================================= */
.leden-login-body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:
    radial-gradient(circle at top, rgba(244,67,54,.055), transparent 30rem),
    var(--bh-bg);
}
.leden-login{
  width:100%;
  max-width:410px;
}
.leden-login-card{
  background:var(--bh-card);
  border:1px solid var(--bh-line);
  border-radius:10px;
  box-shadow:var(--bh-shadow);
  padding:24px 22px 22px;
}
.leden-login-logo{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}
.leden-login-logo img{
  width:132px;
  height:auto;
  display:block;
}
.leden-login-card h1{
  margin:0 0 6px;
  font-size:1.32rem;
  line-height:1.2;
  text-align:center;
  color:#111827;
}
.leden-muted{
  max-width:310px;
  margin:0 auto 18px;
  color:var(--bh-muted);
  font-size:.9rem;
  text-align:center;
}
.leden-login-help{
  max-width:320px;
  margin:16px auto 0;
  color:var(--bh-muted);
  font-size:.82rem;
  text-align:center;
}
/* =========================================================
   Formulieren / knoppen / meldingen
   ========================================================= */
.leden-form{
  display:grid;
  gap:13px;
}
.leden-form--top{
  margin-top:16px;
}
.leden-field{
  display:grid;
  gap:5px;
}
.leden-field label{
  font-weight:800;
  color:#1f2937;
  font-size:.88rem;
}
.leden-field input{
  width:100%;
  min-height:42px;
  padding:9px 11px;
  border:1px solid var(--bh-line-strong);
  border-radius:7px;
  background:#fff;
  color:#111827;
  font:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.leden-field input::placeholder{
  color:#9ca3af;
}
.leden-field input:focus{
  outline:none;
  border-color:var(--bh-primary);
  box-shadow:0 0 0 3px rgba(244,67,54,.10);
}
.leden-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border:0;
  border-radius:7px;
  font-weight:800;
  font-size:.95rem;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease, transform .05s ease;
}
.leden-btn:hover{
  text-decoration:none;
}
.leden-btn:active{
  transform:translateY(1px);
}
.leden-btn--primary{
  background:var(--bh-primary);
  color:#fff;
}
.leden-btn--primary:hover{
  background:var(--bh-primary-dark);
}
.leden-btn--secondary{
  background:#f44336;
  color:#fff;
}
.leden-btn--secondary:hover{
  background:#666;
}
.leden-btn--full{
  width:100%;
}
.leden-alert{
  border-radius:8px;
  padding:10px 12px;
  margin:0 0 14px;
  font-size:.9rem;
  font-weight:700;
}
.leden-alert--error{
  background:#fdecea;
  color:#b01c10;
  border:1px solid #f7c1bb;
}
.leden-alert--success{
  background:#e7f5e9;
  color:#20753c;
  border:1px solid #cdebd3;
}
.leden-form-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:4px;
}
/* =========================================================
   App layout
   ========================================================= */
.leden-app{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr;
  background:var(--bh-bg);
}
.leden-sidebar{
  display:none;
}
.leden-page{
  min-width:0;
}
.leden-mobile-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:#fff;
  border-bottom:1px solid var(--bh-line);
}
.leden-mobile-header img{
  width:125px;
  height:auto;
  max-height:none;
  object-fit:contain;
  display:block;
}
.leden-mobile-header .leden-btn--secondary{
  min-height:34px;
  padding:7px 11px;
  border-radius:6px;
  font-size:.84rem;
}
.leden-page-topbar{
  display:none;
}
.leden-main{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:16px;
}
/* =========================================================
   Hero / welkomkaart
   ========================================================= */
.leden-hero{
  background:#fff;
  border:1px solid var(--bh-line);
  border-radius:10px;
  box-shadow:var(--bh-shadow);
  padding:18px;
  display:grid;
  gap:14px;
  margin-bottom:16px;
}
.leden-hero--with-logo{
  grid-template-columns:1fr;
  align-items:center;
}
.leden-hero-logo{
  justify-self:start;
  width:82px;
  height:82px;
  border:1px solid var(--bh-line);
  border-radius:10px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.leden-hero-logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
.leden-hero-text{
  min-width:0;
}
.leden-eyebrow{
  margin:0 0 4px;
  color:var(--bh-primary);
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.leden-hero h1{
  margin:0 0 5px;
  color:#111827;
  font-size:1.45rem;
  line-height:1.18;
}
.leden-hero p{
  margin:0;
  color:var(--bh-muted);
}
.leden-hero-badge{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 10px;
  border-radius:999px;
  background:#e7f5e9;
  color:#20753c;
  font-size:.82rem;
  font-weight:900;
}
/* =========================================================
   Kaarten / tegels
   ========================================================= */
.leden-grid{
  display:grid;
  gap:14px;
}
.leden-tile{
  background:#fff;
  border:1px solid var(--bh-line);
  border-left:4px solid var(--bh-primary);
  border-radius:8px;
  box-shadow:var(--bh-shadow);
  padding:16px;
}
.leden-tile-title{
  margin:0 0 6px;
  color:#374151;
  font-size:.9rem;
  font-weight:800;
}
.leden-tile-value{
  margin:0;
  color:#111827;
  font-size:1.6rem;
  line-height:1.1;
  font-weight:900;
}
.leden-tile-value--small{
  font-size:1.12rem;
}
.leden-tile-subtitle{
  margin:6px 0 0;
  color:var(--bh-muted);
  font-size:.84rem;
}
.leden-content-grid{
  display:grid;
  gap:16px;
  margin-top:16px;
}
.leden-content-grid--single{
  grid-template-columns:1fr;
  max-width:760px;
}
.leden-card{
  background:#fff;
  border:1px solid var(--bh-line);
  border-radius:8px;
  box-shadow:var(--bh-shadow);
  padding:16px;
  margin-bottom:16px;
}
.leden-card h1,
.leden-card h2,
.leden-card h3{
  margin-top:0;
}
.leden-card--accent{
  border-left:4px solid var(--bh-primary);
}
.leden-card-header{
  margin-bottom:12px;
}
.leden-card-header h2{
  margin:0 0 4px;
  color:#111827;
  font-size:1.08rem;
}
.leden-card-header p{
  margin:0;
  color:var(--bh-muted);
  font-size:.9rem;
}
/* =========================================================
   Info / roadmap / empty state
   ========================================================= */
.leden-muted-left{
  margin:0;
  color:var(--bh-muted);
  font-size:.94rem;
}
.leden-info-list{
  display:grid;
  gap:10px;
}
.leden-info-list div{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 0;
  border-bottom:1px solid var(--bh-line);
}
.leden-info-list div:last-child{
  border-bottom:0;
}
.leden-info-list span{
  color:var(--bh-muted);
  font-size:.84rem;
  font-weight:700;
}
.leden-info-list strong{
  color:#111827;
  font-size:.96rem;
}
.leden-roadmap{
  display:grid;
  gap:10px;
}
.leden-roadmap div{
  padding:10px 0;
  border-bottom:1px solid var(--bh-line);
}
.leden-roadmap div:last-child{
  border-bottom:0;
}
.leden-roadmap strong{
  display:block;
  margin-bottom:2px;
  color:#111827;
}
.leden-roadmap span{
  color:var(--bh-muted);
  font-size:.9rem;
}
.leden-empty-state{
  display:grid;
  gap:4px;
  padding:16px;
  border:1px dashed var(--bh-line-strong);
  border-radius:8px;
  background:#fafafa;
}
.leden-empty-state strong{
  color:#111827;
  font-size:.98rem;
}
.leden-empty-state span{
  color:var(--bh-muted);
  font-size:.9rem;
  line-height:1.45;
}
/* =========================================================
   Notices
   ========================================================= */
.leden-notice{
  margin-top:14px;
  padding:12px;
  border-radius:8px;
  display:grid;
  gap:6px;
  border:1px solid var(--bh-line);
}
.leden-notice strong{
  color:#111827;
}
.leden-notice span{
  color:var(--bh-muted);
  font-size:.9rem;
}
.leden-notice--warning{
  background:#fff8f7;
  border-color:#fecaca;
}
.leden-notice .leden-btn{
  justify-self:start;
  margin-top:4px;
}
/* =========================================================
   Tablet
   ========================================================= */
@media (min-width:768px){
  .leden-login-card{
    padding:28px 26px 24px;
  }
  .leden-mobile-header{
    padding:14px 20px;
  }
  .leden-main{
    padding:22px;
  }
  .leden-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .leden-hero{
    padding:20px;
  }
  .leden-hero--with-logo{
    grid-template-columns:auto 1fr;
    gap:16px;
  }
  .leden-hero-badge{
    justify-self:end;
  }
  .leden-content-grid{
    grid-template-columns:minmax(0, 1fr) minmax(280px, .75fr);
  }
  .leden-content-grid--single{
    grid-template-columns:1fr;
  }
  .leden-info-list div{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .leden-form-actions{
    flex-direction:row;
    align-items:center;
  }
  .leden-notice{
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .leden-notice span{
    grid-column:1 / 2;
  }
  .leden-notice .leden-btn{
    grid-column:2 / 3;
    grid-row:1 / 3;
    justify-self:end;
  }
}
/* =========================================================
   Desktop
   ========================================================= */
@media (min-width:1024px){
  .leden-app{
    grid-template-columns:245px minmax(0, 1fr);
  }
  .leden-mobile-header{
    display:none;
  }
  .leden-sidebar{
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    min-height:100vh;
    background:#fff;
    border-right:1px solid var(--bh-line);
    padding:18px 14px;
  }
  .leden-sidebar-logo{
    padding:18px 10px 22px;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-bottom:1px solid var(--bh-line);
  }
  .leden-sidebar-logo img{
    width:140px;
    height:auto;
    max-height:none;
    object-fit:contain;
    display:block;
    margin:0 auto;
  }
  .leden-nav{
    display:grid;
    gap:6px;
  }
  .leden-nav-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:40px;
    padding:9px 10px;
    border-radius:8px;
    color:#374151;
    font-weight:800;
    text-decoration:none;
  }
  .leden-nav-link:hover{
    background:#f9fafb;
    color:#111827;
    text-decoration:none;
  }
  .leden-nav-link--active{
    background:#fff1f0;
    color:#d32f2f;
  }
  .leden-nav-link--disabled{
    opacity:.7;
    cursor:not-allowed;
  }
  .leden-nav-link--disabled:hover{
    background:transparent;
    color:#374151;
  }
  .leden-nav-link em{
    font-style:normal;
    font-size:.68rem;
    font-weight:900;
    color:#b45309;
    background:#fff7ed;
    border:1px solid #fed7aa;
    border-radius:999px;
    padding:2px 6px;
    white-space:nowrap;
  }
  .leden-page-topbar{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding:16px 24px 0;
  }
  .leden-page-topbar .leden-btn--secondary{
    min-height:34px;
    padding:7px 12px;
    border-radius:6px;
    background:#888;
    color:#fff;
    font-size:.86rem;
    font-weight:800;
    box-shadow:none;
  }
  .leden-page-topbar .leden-btn--secondary:hover{
    background:#666;
    text-decoration:none;
  }
  .leden-main{
    max-width:none;
    padding:16px 24px 24px;
  }
  .leden-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}
/* =========================================================
   Grote schermen
   ========================================================= */
@media (min-width:1440px){
  .leden-app{
    grid-template-columns:265px minmax(0, 1fr);
  }
  .leden-main{
    padding:20px 30px 30px;
  }
}
/* =========================================================
   Herstel visuele kaarten/tegels na CSS opschoning
   ========================================================= */

.leden-hero,
.leden-card,
.leden-tile{
  background:#fff;
  border:1px solid var(--bh-line);
  border-radius:8px;
  box-shadow:var(--bh-shadow);
}

.leden-hero{
  padding:18px;
  margin-bottom:16px;
}

.leden-tile{
  border-left:4px solid var(--bh-primary);
  padding:16px;
  min-height:110px;
}

.leden-card{
  padding:16px;
}

.leden-grid{
  display:grid;
  gap:14px;
  margin-top:16px;
}

.leden-content-grid{
  display:grid;
  gap:16px;
  margin-top:16px;
}

@media (min-width:768px){
  .leden-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .leden-content-grid{
    grid-template-columns:minmax(0, 1fr) minmax(280px, .75fr);
  }

  .leden-content-grid--single{
    grid-template-columns:1fr;
  }
}

@media (min-width:1024px){
  .leden-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}
/* Uitlogknop in Barhulp-kleur */
.leden-page-topbar .leden-btn--secondary,
.leden-mobile-header .leden-btn--secondary{
  background:#f44336 !important;
  color:#fff !important;
}

.leden-page-topbar .leden-btn--secondary:hover,
.leden-mobile-header .leden-btn--secondary:hover{
  background:#d32f2f !important;
  color:#fff !important;
  text-decoration:none;
}
/* Tabel ledenportaal */
.leden-table-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid var(--bh-line);
  border-radius:8px;
  background:#fff;
}

.leden-table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}

.leden-table th{
  background:#f9fafb;
  color:#374151;
  font-size:.82rem;
  font-weight:900;
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--bh-line);
}

.leden-table td{
  color:#111827;
  font-size:.88rem;
  padding:10px 12px;
  border-bottom:1px solid #f0f0f0;
  vertical-align:top;
}

.leden-table tbody tr:last-child td{
  border-bottom:0;
}

.leden-table-right{
  text-align:right !important;
  white-space:nowrap;
}
/* Saldo pagina */
.leden-amount-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:16px 0;
}

.leden-amount-btn{
  width:100%;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  color:#111827;
  border-radius:8px;
  padding:14px 16px;
  font-size:1.05rem;
  font-weight:900;
  cursor:not-allowed;
  opacity:.75;
}

.leden-info-box{
  display:grid;
  gap:4px;
  border:1px solid #fee2e2;
  background:#fff7f7;
  border-left:4px solid #f44336;
  border-radius:8px;
  padding:12px 14px;
  color:#374151;
  font-size:.9rem;
}

.leden-clean-list{
  margin:12px 0 0;
  padding-left:18px;
  color:#374151;
  line-height:1.55;
  font-size:.92rem;
}

.leden-amount-positive{
  color:#2e7d32 !important;
  font-weight:900;
}

.leden-amount-negative{
  color:#d32f2f !important;
  font-weight:900;
}

@media (min-width:768px){
  .leden-amount-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}
.leden-amount-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  border-left:4px solid #f44336;
  border-radius:8px;
  padding:13px 14px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}

.leden-amount-option strong{
  font-size:1.05rem;
  color:#111827;
}

.leden-amount-option span{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:#f3f4f6;
  color:#6b7280;
  font-size:.78rem;
  font-weight:800;
  padding:4px 8px;
}
.leden-free-amount-preview{
  display:grid;
  gap:7px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  border-radius:8px;
  padding:12px 14px;
  opacity:.75;
}

.leden-free-amount-preview label{
  color:#374151;
  font-size:.82rem;
  font-weight:900;
}

.leden-free-amount-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.leden-free-amount-row span{
  color:#111827;
  font-weight:900;
}

.leden-free-amount-row input{
  width:100%;
  border:0;
  background:transparent;
  color:#6b7280;
  font-size:.95rem;
  outline:none;
}

@media (min-width:768px){
  .leden-free-amount-preview{
    grid-column:1 / -1;
  }
}
/* Opwaardeerbedragen visueel als Barhulp-actieblokken */
.leden-amount-btn{
  background:#f44336 !important;
  color:#fff !important;
  border:1px solid #f44336 !important;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  opacity:.85;
}

.leden-amount-btn:hover{
  background:#d32f2f !important;
  border-color:#d32f2f !important;
}

.leden-amount-btn:disabled{
  cursor:not-allowed;
  background:#f44336 !important;
  color:#fff !important;
  opacity:.85;
}