/* ================================================================
   Mathersoft_RelatieBeheer v1.0.0
   Stijl voor contacten, adressen, nieuwsbrief, wizard, magic link
   Aansluitend op Horeca/Hyva theme (#1A2E52 navy, #FF6700 orange)
================================================================ */

:root {
  --rb-navy:   #1A2E52;
  --rb-navy-d: #142341;
  --rb-orange: #FF6700;
  --rb-green:  #16a34a;
  --rb-red:    #dc2626;
  --rb-border: #e2e8f0;
  --rb-bg:     #f8fafc;
  --rb-muted:  #64748b;
  --rb-text:   #1e293b;
  --rb-radius: 6px;
}

/* ── Pagina header ── */
.rb-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.rb-page-title  { font-size:1.5rem; font-weight:700; color:var(--rb-navy); margin:0 0 .25rem; }
.rb-page-sub    { font-size:.875rem; color:var(--rb-muted); margin:0; }

/* ── Knoppen ── */
.rb-btn-primary  { background:var(--rb-navy); color:#fff; border:none; padding:.5rem 1.25rem; border-radius:var(--rb-radius); font-weight:600; font-size:.875rem; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; transition:background .15s; text-decoration:none; }
.rb-btn-primary:hover { background:var(--rb-navy-d); }
.rb-btn-primary:disabled { opacity:.6; cursor:default; }
.rb-btn-ghost    { background:#fff; color:var(--rb-navy); border:1px solid var(--rb-border); padding:.5rem 1.25rem; border-radius:var(--rb-radius); font-weight:500; font-size:.875rem; cursor:pointer; transition:background .15s; }
.rb-btn-ghost:hover { background:var(--rb-bg); }
.rb-btn-edit     { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; padding:.3rem .8rem; border-radius:4px; font-size:.8rem; font-weight:500; cursor:pointer; }
.rb-btn-delete   { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; padding:.3rem .8rem; border-radius:4px; font-size:.8rem; font-weight:500; cursor:pointer; }
.rb-btn-lg       { padding:.75rem 2rem; font-size:1rem; }
.rb-link-btn     { background:none; border:none; color:var(--rb-muted); font-size:.8rem; cursor:pointer; text-decoration:underline; padding:0; }

/* ── Kaart / tabel ── */
.rb-card         { background:#fff; border:1px solid var(--rb-border); border-radius:var(--rb-radius); overflow:hidden; }
.rb-table-wrap   { overflow-x:auto; }
.rb-table        { width:100%; border-collapse:collapse; }
.rb-table th     { background:var(--rb-bg); padding:.6rem 1rem; text-align:left; font-size:.75rem; font-weight:600; color:var(--rb-muted); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--rb-border); white-space:nowrap; }
.rb-table td     { padding:.8rem 1rem; border-bottom:1px solid var(--rb-border); font-size:.875rem; vertical-align:middle; }
.rb-table tr:last-child td { border-bottom:none; }
.rb-table tr:hover td { background:#f8fafc; }
.rb-col-actions  { width:180px; }
.rb-cell-actions { display:flex; gap:.4rem; align-items:center; }
.rb-cell-center  { text-align:center; }

/* ── Naam + subtekst ── */
.rb-cell-naam  { }
.rb-naam       { font-weight:600; display:block; color:var(--rb-text); }
.rb-functie    { font-size:.8rem; color:var(--rb-muted); display:block; }

/* ── Badges ── */
.rb-rol-badge     { display:inline-block; padding:2px 8px; border-radius:3px; font-size:.75rem; font-weight:500; margin:1px; }
.rb-rol-algemeen  { background:#f1f5f9; color:#475569; }
.rb-rol-facturen  { background:#dbeafe; color:#1e40af; }
.rb-rol-herinneringen { background:#fef9c3; color:#854d0e; }
.rb-rol-leveringen{ background:#dcfce7; color:#166534; }
.rb-rol-inkoop    { background:#f3e8ff; color:#6b21a8; }

.rb-rollen        { display:flex; flex-wrap:wrap; gap:2px; }

.rb-type-badge    { display:inline-block; padding:2px 8px; border-radius:3px; font-size:.75rem; font-weight:600; }
.rb-type-algemeen { background:#f1f5f9; color:#475569; }
.rb-type-factuur  { background:#dbeafe; color:#1e40af; }
.rb-type-levering { background:#dcfce7; color:#166534; }
.rb-type-bezoek   { background:#fce7f3; color:#9d174d; }

.rb-primair-badge    { background:#fef9c3; color:#854d0e; font-size:.75rem; font-weight:600; padding:2px 8px; border-radius:3px; }
.rb-default-badge    { background:#eff6ff; color:#1d4ed8; font-size:.75rem; font-weight:600; padding:2px 8px; border-radius:3px; }
.rb-badge-green      { background:#dcfce7 !important; color:#166534 !important; }
.rb-badge-blue       { background:#dbeafe !important; color:#1e40af !important; }

/* ── Lege staat ── */
.rb-empty       { padding:3rem 1rem; text-align:center; color:var(--rb-muted); }
.rb-empty-icon  { font-size:2.5rem; display:block; margin-bottom:.75rem; }
.rb-empty-row td{ padding:2rem !important; }

/* ── Formulier elementen ── */
.rb-form-group  { display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
.rb-form-row    { display:grid; gap:1rem; }
.rb-form-row-2  { grid-template-columns:1fr 1fr; }
.rb-label       { font-size:.8rem; font-weight:600; color:var(--rb-text); }
.rb-required::after { content:' *'; color:var(--rb-red); }
.rb-input       { width:100%; padding:.5rem .75rem; border:1px solid var(--rb-border); border-radius:var(--rb-radius); font-size:.875rem; transition:border-color .15s; }
.rb-input:focus { outline:none; border-color:var(--rb-navy); box-shadow:0 0 0 2px rgba(26,46,82,.1); }
.rb-checkbox-label { display:flex; align-items:center; gap:.5rem; font-size:.875rem; cursor:pointer; }

/* ── Rollen checkboxen grid ── */
.rb-rollen-grid    { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:.5rem; }
.rb-rol-check      { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border:1px solid var(--rb-border); border-radius:var(--rb-radius); cursor:pointer; transition:border-color .15s; }
.rb-rol-check:hover{ border-color:var(--rb-navy); }
.rb-rol-check input{ cursor:pointer; }
.rb-rol-check-label{ font-size:.8rem; font-weight:500; padding:2px 8px; border-radius:3px; }

/* ── Drawer/slide-in ── */
.rb-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:500; display:flex; justify-content:flex-end; }
.rb-drawer  { width:520px; max-width:95vw; background:#fff; height:100vh; display:flex; flex-direction:column; box-shadow:-4px 0 24px rgba(0,0,0,.12); }
.rb-drawer-header { padding:1rem 1.25rem; border-bottom:1px solid var(--rb-border); display:flex; align-items:center; justify-content:space-between; background:var(--rb-bg); }
.rb-drawer-header h2 { font-size:1rem; font-weight:700; color:var(--rb-navy); margin:0; }
.rb-drawer-close { background:none; border:none; font-size:1.25rem; cursor:pointer; color:var(--rb-muted); line-height:1; }
.rb-drawer-body  { flex:1; overflow-y:auto; padding:1.25rem; }
.rb-form-actions { display:flex; gap:.75rem; justify-content:flex-end; padding-top:1rem; border-top:1px solid var(--rb-border); margin-top:1rem; }

/* ── Toast meldingen ── */
.rb-toasts  { position:fixed; bottom:1.25rem; right:1.25rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; }
.rb-toast   { padding:.75rem 1.25rem; border-radius:var(--rb-radius); font-size:.875rem; font-weight:500; box-shadow:0 4px 12px rgba(0,0,0,.15); animation:rb-slide-in .25s ease; }
.rb-toast.success { background:var(--rb-green); color:#fff; }
.rb-toast.error   { background:var(--rb-red);   color:#fff; }
@keyframes rb-slide-in { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }

/* ── Nieuwsbrief toggle ── */
.rb-nb-grid       { display:flex; flex-direction:column; gap:0; }
.rb-nb-item       { display:flex; align-items:flex-start; gap:1rem; padding:1.25rem; border-bottom:1px solid var(--rb-border); transition:background .1s; }
.rb-nb-item:last-child { border-bottom:none; }
.rb-nb-item:hover { background:var(--rb-bg); }
.rb-nb-verplicht  { background:#f8fafc; }
.rb-nb-label      { font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
.rb-nb-beschrijving { font-size:.8rem; color:var(--rb-muted); line-height:1.5; }
.rb-nb-verplicht-badge { background:#e2e8f0; color:#475569; font-size:.7rem; font-weight:600; padding:1px 6px; border-radius:3px; }
.rb-nb-info       { flex:1; }
.rb-nb-footer     { padding:1.25rem; border-top:1px solid var(--rb-border); display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.rb-nb-info-tekst { font-size:.8rem; color:var(--rb-muted); flex:1; min-width:200px; line-height:1.5; }

/* Toggle switch */
.rb-toggle         { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.rb-toggle input   { opacity:0; width:0; height:0; }
.rb-toggle-slider  { position:absolute; inset:0; background:#cbd5e1; border-radius:24px; cursor:pointer; transition:.2s; }
.rb-toggle-slider::before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
.rb-toggle input:checked + .rb-toggle-slider { background:var(--rb-navy); }
.rb-toggle input:checked + .rb-toggle-slider::before { transform:translateX(20px); }
.rb-toggle-disabled .rb-toggle-slider { background:var(--rb-navy); opacity:.6; cursor:not-allowed; }

/* ── Wizard ── */
.rb-wizard         { max-width:700px; margin:0 auto; padding:1.5rem; }
.rb-wizard-progress{ margin-bottom:2rem; }
.rb-wizard-steps   { display:flex; justify-content:space-between; gap:.5rem; position:relative; margin-bottom:.75rem; }
.rb-wizard-step    { display:flex; flex-direction:column; align-items:center; gap:.3rem; flex:1; opacity:.4; transition:opacity .3s; }
.rb-wizard-step.rb-step-active { opacity:1; }
.rb-wizard-step.rb-step-done   { opacity:.8; }
.rb-step-icon      { width:36px; height:36px; border-radius:50%; background:var(--rb-bg); border:2px solid var(--rb-border); display:flex; align-items:center; justify-content:center; font-size:1rem; transition:all .3s; }
.rb-step-active .rb-step-icon { border-color:var(--rb-navy); background:var(--rb-navy); color:#fff; }
.rb-step-done .rb-step-icon   { border-color:var(--rb-green); background:var(--rb-green); color:#fff; }
.rb-step-label     { font-size:.7rem; font-weight:600; color:var(--rb-muted); text-align:center; }
.rb-progress-bar   { height:4px; background:#e2e8f0; border-radius:2px; overflow:hidden; }
.rb-progress-fill  { height:100%; background:var(--rb-navy); transition:width .4s ease; }

.rb-wizard-card    { background:#fff; border:1px solid var(--rb-border); border-radius:8px; padding:2rem; }
.rb-wizard-card h2 { font-size:1.25rem; font-weight:700; color:var(--rb-navy); margin:0 0 .5rem; }
.rb-wizard-sub     { color:var(--rb-muted); font-size:.875rem; margin:0 0 1.5rem; line-height:1.6; }
.rb-wizard-nav     { display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--rb-border); }
.rb-wizard-nav-right { display:flex; gap:.5rem; }
.rb-wizard-skip    { display:block; text-align:center; margin-top:1rem; font-size:.8rem; color:var(--rb-muted); text-decoration:underline; cursor:pointer; }
.rb-wizard-info-box { background:var(--rb-bg); border:1px solid var(--rb-border); border-radius:var(--rb-radius); padding:1rem; font-size:.875rem; color:var(--rb-muted); margin-bottom:1rem; }

.rb-wizard-welkom  { text-align:center; }
.rb-welkom-icon    { font-size:3rem; margin-bottom:1rem; }
.rb-welkom-items   { display:flex; flex-direction:column; gap:.5rem; margin:1.5rem 0; text-align:left; max-width:300px; margin-left:auto; margin-right:auto; }
.rb-welkom-item    { background:var(--rb-bg); padding:.75rem 1rem; border-radius:var(--rb-radius); font-size:.875rem; border:1px solid var(--rb-border); }

.rb-wizard-done    { text-align:center; }
.rb-done-icon      { font-size:3rem; margin-bottom:1rem; }

.rb-adres-preview-list { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.5rem; }
.rb-adres-preview      { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; background:var(--rb-bg); border-radius:var(--rb-radius); border:1px solid var(--rb-border); font-size:.875rem; }
.rb-adres-text         { color:var(--rb-text); }

/* ── Email herkenning checkout ── */
.rb-email-recognition { }
.rb-email-found        { }
.rb-email-found-header { display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:var(--rb-radius); margin-bottom:.75rem; font-size:.875rem; }
.rb-email-found-icon   { color:var(--rb-green); font-weight:700; }
.rb-login-opties       { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:.5rem; }
.rb-magic-sent         { text-align:center; padding:1.5rem; background:#eff6ff; border:1px solid #bfdbfe; border-radius:var(--rb-radius); }
.rb-magic-icon         { font-size:2rem; margin-bottom:.5rem; }
.rb-magic-sent h3      { font-weight:700; color:var(--rb-navy); margin:0 0 .25rem; }
.rb-magic-sent p       { font-size:.875rem; color:var(--rb-muted); margin:0 0 .75rem; }
.rb-nieuw-klant        { padding:.75rem 1rem; background:#fff7ed; border:1px solid #fed7aa; border-radius:var(--rb-radius); }