/* RaBePro Werkprogramma - huisstijl */
:root{
  --groen:#649A28;
  --groen-licht:#8CC53D;
  --groen-zacht:#eef5e4;
  --rood:#E1192B;
  --oranje:#E08A1E;
  --grijs:#f4f6f2;
  --rand:#dde3d6;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 Carlito,Calibri,system-ui,-apple-system,sans-serif;
  background:var(--grijs);color:#232823}

/* ---- kop en navigatie ---- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 20px;background:#fff;border-bottom:3px solid var(--groen)}
.merk{font-size:17px;color:var(--groen)}
.wie{font-size:13px;color:#666}
.wie a{color:var(--groen)}
.nav{display:flex;flex-wrap:wrap;gap:6px;padding:10px 20px;background:#fff;
  border-bottom:1px solid var(--rand)}
.navlink{padding:6px 14px;border-radius:6px;background:var(--groen-zacht);
  color:#3c5c18;text-decoration:none;font-size:14px}
.navlink:hover{background:#e0eed0}
.navlink.actief{background:var(--groen);color:#fff}

/* ---- layout ---- */
.wrap{max-width:1500px;margin:0 auto;padding:20px}
.kaart{background:#fff;border:1px solid var(--rand);border-radius:10px;
  padding:20px;margin-bottom:20px}
.kaart.smal{max-width:380px;margin:60px auto}
.kaart>h2:first-child{margin:0 0 16px;font-size:18px;color:var(--groen)}
.melding{padding:12px 20px;font-size:14px}
.melding.ok{border-left:4px solid var(--groen)}
.melding.fout{border-left:4px solid var(--rood);color:#a3121f}

/* ---- formulieren ---- */
label{display:block;margin-bottom:14px;font-size:14px}
input,select{width:100%;padding:9px 10px;margin-top:4px;border:1px solid var(--rand);
  border-radius:6px;font:inherit;background:#fff}
input:focus,select:focus{outline:2px solid var(--groen-licht);outline-offset:-1px}
.rij{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.rij label{margin-bottom:0;min-width:150px;flex:1}
.knop{padding:9px 18px;background:var(--groen);color:#fff;border:0;border-radius:6px;
  font:inherit;cursor:pointer}
.knop:hover{background:#57861f}
.knop.klein{padding:6px 12px;font-size:13px}
.knop.grijs{background:#8a8f86}
.knop.grijs:hover{background:#767b72}
.fout{color:var(--rood);font-size:14px}
.hint{font-size:13px;color:#666}

/* ---- tabellen ---- */
table.lijst{width:100%;border-collapse:collapse;font-size:14px}
table.lijst th{text-align:left;padding:8px 10px;background:var(--groen-zacht);
  color:#3c5c18;border-bottom:1px solid var(--rand);white-space:nowrap}
table.lijst td{padding:8px 10px;border-bottom:1px solid #eef0ea;vertical-align:middle}
table.lijst tr.inactief{opacity:.5}
table.lijst input,table.lijst select{padding:5px 7px;font-size:13px;margin-top:0}
.rechts{text-align:right}
.midden{text-align:center}
code{background:var(--groen-zacht);padding:2px 6px;border-radius:4px;font-size:13px}

/* ---- beveiliging / profiel ---- */
.waarschuw{display:inline-block;padding:1px 7px;border-radius:4px;background:var(--rood);
  color:#fff;font-size:12px;text-decoration:none;margin:0 4px}
.waarschuw:hover{background:#b8121f}
.codes{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;line-height:2.1;
  background:var(--groen-zacht);padding:14px 16px;border-radius:8px;word-spacing:6px}

/* ---- BTW-matrix ---- */
.matrixwrap{overflow-x:auto;margin:0 -4px}
table.matrix{border-collapse:separate;border-spacing:3px;font-size:13px}
table.matrix th{padding:5px 8px;background:var(--groen-zacht);color:#3c5c18;
  border-radius:5px;font-weight:600;white-space:nowrap;text-align:center;min-width:52px}
table.matrix th.klantkop{text-align:left;min-width:230px;position:sticky;left:0;z-index:2}
table.matrix td{padding:0}
table.matrix td.klantkop{padding:5px 8px;background:#fff;white-space:nowrap;
  position:sticky;left:0;z-index:1;border-right:1px solid var(--rand);font-size:13.5px}

.cel{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:52px;height:38px;border-radius:5px;cursor:pointer;line-height:1.15;
  border:1px solid transparent;transition:transform .08s}
.cel:hover{transform:scale(1.06);border-color:#333}
.cel .dat{font-size:11px;font-weight:600}
.cel .mw{font-size:10px;font-style:normal;opacity:.75}

.cel-open{background:#eceff0;color:#4a5257}
.cel-bezig{background:#cfe3f7;color:#1c4c7c}
.cel-bijna{background:#fbe2bd;color:#7a4a06}
.cel-telaat{background:#f7cdd2;color:#8f1220}
.cel-klaar{background:#d8ecc2;color:#33591a}
.cel-nvt{background:#f4f4f4;color:#aaa}
.cel-leeg{background:transparent;color:#ccc;cursor:default}
.cel-leeg:hover{transform:none;border-color:transparent}

.telbalk{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-left:auto}
.tel{padding:5px 11px;border-radius:20px;font-size:12.5px;font-weight:600}

/* ---- bewerkpaneel ---- */
#overlay{display:none;position:fixed;inset:0;background:rgba(20,26,20,.45);z-index:40}
#paneel{display:none;position:fixed;z-index:41;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(400px,92vw);background:#fff;border-radius:12px;padding:22px;
  border-top:4px solid var(--groen);box-shadow:0 18px 50px rgba(0,0,0,.28)}
#paneel h3{margin:0 0 4px;font-size:16px;color:var(--groen)}
#paneel p.hint{margin:0 0 16px}

/* ---- Exact-blok in het bewerkpaneel ---- */
.exactblok{background:var(--groen-zacht);border-radius:8px;padding:10px 12px;
  margin:0 0 16px;font-size:13px;line-height:1.6;color:#3c5c18}

/* ---- synchronisatieblok op de BTW-pagina ---- */
.syncblok{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  margin-top:16px;padding:14px 16px;background:var(--groen-zacht);border-radius:8px}
.syncinfo{font-size:13px;line-height:1.6}
.syncinfo .hint{font-size:12px}
.syncknoppen{display:flex;gap:8px;flex-wrap:wrap}

/* ---- nihil en vermoeden ---- */
.cel-nihil{background:#e3f0d4;color:#4a6b2a;border-style:dashed;border-color:#9dbd7a}
.cel-vermoeden{background:#fff4cc;color:#7a5c00;border-style:dashed;border-color:#d9b64a}
.exactblok a{color:#3c5c18;font-weight:600}

/* ---- boekstukpaneel ---- */
#bsOverlay{display:none;position:fixed;inset:0;background:rgba(20,26,20,.5);z-index:50}
#bsPaneel{display:none;position:fixed;z-index:51;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(620px,94vw);max-height:86vh;overflow:auto;background:#fff;border-radius:12px;
  padding:22px;border-top:4px solid var(--groen);box-shadow:0 18px 50px rgba(0,0,0,.3)}
#bsPaneel h3{margin:0 0 4px;font-size:16px;color:var(--groen)}
#bsPaneel p.hint{margin:0 0 16px}
td.negatief{color:#a3121f}

/* ---- opgemaakte aangifte in het venster ---- */
.aangifteframe{display:block;width:100%;height:64vh;border:1px solid var(--rand);
  border-radius:8px;background:#fff}
.aangifteknoppen{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--rand)}
.aangifteknoppen .knop{display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:0 18px;font-size:13px;text-decoration:none;white-space:nowrap}
.aangifteknoppen #bsSluit{margin-left:auto}
#bsPaneel{width:min(1040px,96vw);max-height:92vh;padding:20px 22px}
#bsPaneel h3{margin-bottom:2px}
#bsPaneel p.hint{margin-bottom:12px}

/* ---- cel die deze maand aan de beurt is ---- */
.cel-tedoen{background:#f8d7da;color:#8b1a25;border-color:#e39aa2}
.cel-telaat{background:#c62634;color:#fff;border-color:#a3121f}

/* ---- voortgangsbalk bij het synchroniseren ---- */
.balkbuiten{height:10px;background:#e4ebdc;border-radius:6px;overflow:hidden;margin:14px 0 8px}
.balkbinnen{height:100%;width:0;background:var(--groen);border-radius:6px;
  transition:width .25s ease}
#syncVoortgang .hint{margin:0}

/* ---- niet van toepassing: rustig laten, niet aanklikbaar ---- */
.cel-nvt{background:transparent;border:1px solid transparent;color:#b9c0b2;
  font-size:11px;font-weight:400;letter-spacing:.02em;box-shadow:none}
span.cel-nvt:not([data-id]){cursor:default}
span.cel-nvt:not([data-id]):hover{background:transparent;border-color:transparent;transform:none}
.cel-nvt[data-id]{cursor:pointer}
.cel-nvt[data-id]:hover{border-color:var(--rand)}

/* ---- telbalk als filter ---- */
a.tel{text-decoration:none;cursor:pointer;transition:opacity .15s,box-shadow .15s}
a.tel:hover{opacity:.82}
a.tel.telactief{box-shadow:0 0 0 2px var(--groen)}
.telwis{background:transparent;border:1px solid var(--rand);color:#5d6a52}

/* ---- alles in een keer opslaan ---- */
.opslaanbalk{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;
  margin-top:18px;padding:14px 4px;background:#fff;border-top:1px solid var(--rand)}
.opslaanbalk .hint{margin:0}
tr.gewijzigd td{background:#fbf7e3}
tr.gewijzigd td:first-child{box-shadow:inset 3px 0 0 var(--groen)}

/* ---- dashboard ---- */
.welkom{display:flex;align-items:center;justify-content:space-between;gap:24px}

/* teller rechtsboven: alle soorten werk samen */
.voortgangring{width:78px;height:78px;border-radius:50%;flex:0 0 auto;position:relative;
  background:conic-gradient(var(--groen) var(--vullen,0deg), #e4ebdc 0)}
.voortgangring::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}
.ringtekst{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:600;color:var(--groen);z-index:1}
.ringtekst span{font-size:11px;margin-left:1px;font-weight:500}

/* kopjes binnen een werkblok */
.blokkopje{margin:24px 0 6px;font-size:14px;color:var(--groen)}
.blokkopje-laat{color:#8b1a25}

/* kopbalk boven een soort werk */
.werkblok{padding-top:0;overflow:hidden}
.blokkop{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 -22px 18px;padding:12px 22px;background:var(--groen-zacht);
  color:#3c5c18;font-size:15px;font-weight:600}
.blokkop-rechts{font-size:13px;font-weight:500;color:#5d7a3a}

/* de voortgangsbalk */
.voortgangbalk{display:flex;height:30px;border-radius:8px;overflow:hidden;background:#eef1ea}
.voortgangbalk .deel{display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:#fff;transition:width .3s ease}
.deel-af{background:var(--groen)}
.deel-doen{background:#e0574f}
.deel-laat{background:#8b1a25}

.balklegenda{display:flex;flex-wrap:wrap;gap:22px;margin-top:12px;font-size:13px;color:#5d6a52}
.balklegenda b{color:#1c2118;font-size:15px;margin-right:3px}
.stip{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;
  vertical-align:baseline}
.stip-af{background:var(--groen)}
.stip-doen{background:#e0574f}
.stip-laat{background:#8b1a25}

/* maandkiezer */
.maandkiezer{display:flex;align-items:center;gap:10px}
.maandkiezer .knop{text-decoration:none;min-width:34px;text-align:center}
.maandnaam{font-size:17px;font-weight:600;color:var(--groen);min-width:150px;text-align:center}

/* ---- werklijst ---- */
.werklijst td{padding-top:9px;padding-bottom:9px}
.werklijst .hint{font-size:12px;margin-left:6px}
.klaarmelding{color:var(--groen);font-weight:600}

/* ---- bijwerken vanaf het dashboard ---- */
.dashsync{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--rand)}
.dashsync .hint{margin:0}
.dashsync .balkbuiten{flex:1 1 180px;min-width:140px;margin:0}

/* =====================================================================
   TELEFOON EN TABLET
   Alles hieronder geldt alleen op smalle schermen. De opzet voor de
   computer blijft ongewijzigd.
   ===================================================================== */

@media (max-width: 820px) {

  /* --- ruimte terugwinnen --- */
  .wrap{padding:12px}
  .kaart{padding:14px;margin-bottom:14px;border-radius:9px}
  .kaart>h2:first-child{font-size:16px;margin-bottom:12px}

  /* --- kop en menu --- */
  .topbar{padding:10px 12px;flex-wrap:wrap;gap:6px}
  .merk{font-size:15px}
  .wie{font-size:12px}
  .nav{padding:8px 12px;gap:5px;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .navlink{padding:7px 12px;font-size:13px;white-space:nowrap;flex:0 0 auto}

  /* --- formulieren: onder elkaar, en groot genoeg om niet in te zoomen --- */
  .rij{flex-direction:column;align-items:stretch;gap:10px}
  .rij label{min-width:0;max-width:none !important;width:100%}
  input,select,textarea{font-size:16px}
  .knop{padding:11px 18px;min-height:44px}
  .knop.klein{padding:9px 14px;min-height:38px}

  /* --- brede tabellen zijwaarts schuifbaar --- */
  table.lijst{display:block;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch}
  table.lijst td,table.lijst th{padding:7px 8px;font-size:13px}

  /* --- de matrix --- */
  table.matrix{border-spacing:2px;font-size:12px}
  table.matrix th{min-width:44px;padding:4px 5px}
  table.matrix th.klantkop{min-width:132px;max-width:132px;background:#eef5e4;
    white-space:normal;line-height:1.25;font-size:12px}
  table.matrix td.klantkop{position:sticky;left:0;z-index:1;background:#fff;
    min-width:132px;max-width:132px;white-space:normal;line-height:1.25;font-size:12px}
  .cel{min-width:44px;height:36px}
  .cel .dat{font-size:10.5px}
  .cel .mw{font-size:9.5px}
  .cel:hover{transform:none}

  /* --- telbalk en filters --- */
  .telbalk{margin-left:0;width:100%;gap:5px}
  .tel{font-size:11.5px;padding:5px 9px}

  /* --- synchroniseren --- */
  .syncblok{flex-direction:column;align-items:stretch;gap:12px}
  .syncknoppen{flex-direction:column}
  .syncknoppen .knop{width:100%;text-align:center}

  /* --- bewerkpaneel: als blad van onderen --- */
  #paneel{top:auto;bottom:0;left:0;transform:none;width:100%;max-height:90vh;
    overflow-y:auto;border-radius:14px 14px 0 0;padding:18px 16px 24px}
  #paneel .knop{width:100%;margin-bottom:8px}

  /* --- aangifteweergave --- */
  #bsPaneel{top:0;left:0;transform:none;width:100%;height:100%;max-height:100%;
    border-radius:0;padding:16px}
  .aangifteframe{height:56vh}
  .aangifteknoppen{flex-direction:column;align-items:stretch;padding-top:12px}
  .aangifteknoppen .knop{width:100%}
  .aangifteknoppen #bsSluit{margin-left:0}

  /* --- dashboard --- */
  .welkom{flex-direction:row;align-items:center}
  .welkom h2{font-size:17px}
  .voortgangring{width:62px;height:62px}
  .voortgangring::after{inset:7px}
  .ringtekst{font-size:16px}

  .maandkiezer{width:100%;justify-content:space-between}
  .maandnaam{min-width:0;flex:1;font-size:16px}

  .blokkop{margin:0 -14px 14px;padding:10px 14px;font-size:14px;
    flex-direction:column;align-items:flex-start;gap:2px}
  .blokkop-rechts{font-size:12px}
  .voortgangbalk{height:26px}
  .voortgangbalk .deel{font-size:11px}
  .balklegenda{gap:12px 18px;font-size:12px}
  .balklegenda b{font-size:14px}

  .dashsync{flex-direction:column;align-items:stretch}
  .dashsync .knop{width:100%}
  .dashsync .balkbuiten{flex:none;width:100%}

  /* --- klanten: opslaanbalk binnen bereik van de duim --- */
  .opslaanbalk{flex-direction:column;align-items:stretch;gap:8px;
    padding:12px 0;box-shadow:0 -6px 14px rgba(0,0,0,.06)}
  .opslaanbalk .knop{width:100%}
  .opslaanbalk .hint{text-align:center}
}

@media (max-width: 480px) {
  .wrap{padding:9px}
  .kaart{padding:12px}
  .blokkop{margin:0 -12px 12px;padding:9px 12px}

  table.matrix th.klantkop,
  table.matrix td.klantkop{min-width:110px;max-width:110px;font-size:11.5px}
  table.matrix th{min-width:40px}
  .cel{min-width:40px;height:34px}

  .voortgangring{width:54px;height:54px}
  .voortgangring::after{inset:6px}
  .ringtekst{font-size:14px}
  .ringtekst span{font-size:9px}
}

/* --- staand op een telefoon: de matrix is nu eenmaal breed --- */
@media (max-width: 560px) and (orientation: portrait) {
  .matrixwrap::after{content:"Draai je telefoon voor meer overzicht";
    display:block;margin:8px 2px 0;font-size:11.5px;color:#8a9382}
}