/* ══════════════════════════════════════════════════════════════
 * Mediabink CRM, huisstijl
 * navy #0A2540 · teal #12B5B0 · blauw #2D6CDF
 *
 * Opzet: vaste zijbalk links, witte werkruimte rechts. De zijbalk is de
 * enige navigatie: je klikt naar een weergave in plaats van door één
 * lange pagina te scrollen. Onder 900px klapt hij om naar een balk
 * onderaan, want daar is een verticale kolom alleen maar in de weg.
 *
 * Geen framework, geen buildstap. Alles wat hier staat is wat de browser
 * krijgt.
 * ══════════════════════════════════════════════════════════════ */

:root {
  --navy: #0A2540;
  --teal: #12B5B0;
  --blauw: #2D6CDF;

  --tekst: #0A2540;
  --gedempt: #667A91;
  --lijn: #E8EDF3;
  --vlak: #FFFFFF;
  --zacht: #F7F9FC;          /* alleen voor accentvlakken, niet de pagina */

  --rood: #D92D20;
  --rood-vlak: #FEF3F2;
  --amber: #B54708;
  --amber-vlak: #FFFAEB;
  --groen: #067647;
  --groen-vlak: #ECFDF3;
  --teal-vlak: #E6F7F6;

  --radius: 14px;
  --schaduw: 0 1px 2px rgba(10, 37, 64, .04), 0 6px 20px rgba(10, 37, 64, .05);

  --kop: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --zij-breed: 232px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tekst);
  background: var(--vlak);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--kop); margin: 0; line-height: 1.25; }
h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 15px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }

[hidden] { display: none !important; }

/* ── Meldingen ────────────────────────────────────────────────── */

.melding {
  position: fixed; inset: 12px 12px auto 12px; z-index: 200;
  max-width: 620px; margin: 0 auto;
  padding: 12px 16px; border-radius: 10px;
  box-shadow: var(--schaduw); font-size: 14px;
}
.melding--fout { background: var(--rood-vlak); color: var(--rood); border: 1px solid #FDA29B; }
.melding--ok   { background: var(--groen-vlak); color: var(--groen); border: 1px solid #A6F4C5; }

/* ── Inloggen ─────────────────────────────────────────────────── */

.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--zacht); }
.login__kaart {
  width: 100%; max-width: 380px; background: var(--vlak);
  border-radius: var(--radius); box-shadow: var(--schaduw); padding: 32px;
}
.login__merk { font-family: var(--kop); font-weight: 800; font-size: 22px; color: var(--navy); }
.login__merk span { color: var(--teal); }
.login p { color: var(--gedempt); font-size: 14px; margin: 8px 0 24px; }

/* ── Raamwerk ─────────────────────────────────────────────────── */

.app { display: flex; min-height: 100dvh; }

.zij {
  width: var(--zij-breed); flex: 0 0 var(--zij-breed);
  background: var(--navy); color: #C3D2E3;
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 12px; position: sticky; top: 0; height: 100dvh;
}
.zij__merk {
  font-family: var(--kop); font-weight: 800; font-size: 18px; color: #fff;
  background: var(--teal); width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; margin: 0 8px 20px;
}
.zij__nav { display: flex; flex-direction: column; gap: 2px; }
.zij__voet { margin-top: auto; display: flex; flex-direction: column; gap: 2px;
             padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }

.zij__knop {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px; border: 0; border-radius: 10px;
  background: transparent; color: inherit; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; text-align: left;
  transition: background .12s, color .12s;
}
.zij__knop svg {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.zij__knop:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.zij__knop[aria-current="page"] { background: var(--blauw); color: #fff; font-weight: 600; }
.zij__teller {
  margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700;
  background: var(--rood); color: #fff; border-radius: 999px; padding: 1px 7px;
}

.hoofd { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.bovenbalk {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 22px 28px; border-bottom: 1px solid var(--lijn);
}
.bovenbalk__sub { margin: 3px 0 0; font-size: 13px; color: var(--gedempt); }
.bovenbalk__rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.gebruiker { font-size: 13px; color: var(--gedempt); }

.inhoud { padding: 24px 28px 64px; }
.paneel { max-width: 1180px; }

/* ── Overzichtscijfers ────────────────────────────────────────── */

.kpis {
  display: grid; gap: 14px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.kpi {
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 16px 18px;
}
.kpi__icoon {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 12px;
  display: grid; place-items: center; background: var(--teal-vlak); color: #0E8F8B;
}
.kpi__icoon svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
                  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi__icoon--blauw { background: #EAF1FD; color: var(--blauw); }
.kpi__icoon--amber { background: var(--amber-vlak); color: var(--amber); }
.kpi__label { font-size: 12.5px; color: var(--gedempt); }
.kpi__waarde { font-family: var(--kop); font-weight: 800; font-size: 25px; margin-top: 2px;
               letter-spacing: -.02em; }
.kpi__onder { font-size: 12.5px; color: var(--gedempt); margin-top: 1px; }

/* ── Kaarten ──────────────────────────────────────────────────── */

.raster { display: grid; gap: 14px; grid-template-columns: 1.35fr 1fr; align-items: start; }
@media (max-width: 1000px) { .raster { grid-template-columns: 1fr; } }

.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 18px; }
.kaart__kop { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.kaart__kop h2 { margin-right: auto; }

/* ── Grafiek ──────────────────────────────────────────────────── */

.grafiek { display: flex; align-items: flex-end; gap: 6px; height: 168px; }
.grafiek__staaf { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
                  align-items: center; gap: 6px; height: 100%; }
.grafiek__balk {
  width: 100%; border-radius: 6px 6px 0 0; background: var(--blauw);
  min-height: 3px; transition: opacity .12s;
}
.grafiek__balk--nu { background: var(--teal); }
.grafiek__staaf:hover .grafiek__balk { opacity: .78; }
.grafiek__maand { font-size: 11px; color: var(--gedempt); white-space: nowrap; }

/* ── Lijsten ──────────────────────────────────────────────────── */

.lijst { display: flex; flex-direction: column; gap: 8px; }

.regel {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px;
  padding: 13px 15px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-left: 3px solid transparent; transition: border-color .12s, box-shadow .12s;
}
.regel[data-actie] { cursor: pointer; }
.regel[data-actie]:hover { border-color: #CFDBE8; box-shadow: var(--schaduw); }
.regel--te-laat    { border-left-color: var(--rood); }
.regel--binnenkort { border-left-color: var(--amber); }

/* Klant met meerdere abonnementen op Te factureren: één kop met de naam,
   de losse abonnementen (elk met eigen datum en eigen afvinkknop) eronder
   op een zacht vlak, zodat ze bij elkaar horen zonder dat de klantnaam
   drie keer wordt herhaald. */
.factuurgroep {
  background: var(--zacht); border: 1px solid var(--lijn); border-radius: 12px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.factuurgroep__kop { display: flex; align-items: baseline; gap: 10px; padding: 2px 5px 0; }
.factuurgroep__naam { font-family: var(--kop); font-weight: 700; }

.regel__hoofd { flex: 1 1 200px; min-width: 0; }
.regel__naam { font-weight: 600; }
.regel__sub { font-size: 13px; color: var(--gedempt); margin-top: 2px; }
.regel__bedrag { font-family: var(--kop); font-weight: 700; white-space: nowrap; }
.regel__acties { display: flex; gap: 8px; flex-wrap: wrap; }

.sectie__leeg {
  border: 1px dashed var(--lijn); border-radius: var(--radius); padding: 28px;
  color: var(--gedempt); font-size: 14px; text-align: center;
}

.zoekbalk { display: flex; gap: 10px; margin-bottom: 14px; max-width: 560px; }
.zoekbalk__select { flex: none; width: auto; min-width: 170px; }
/* Eén filter op zijn eentje (Kosten heeft geen zoekveld): niet uitrekken
   tot de volle 560px, dat oogt als een leeg zoekveld dat niets doet. */
.zoekbalk:has(> .zoekbalk__select:only-child) { max-width: 220px; }

/* ── Badges ───────────────────────────────────────────────────── */

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--zacht); color: var(--gedempt);
}
.badge--te-laat    { background: var(--rood-vlak); color: var(--rood); }
.badge--binnenkort { background: var(--amber-vlak); color: var(--amber); }
.badge--teal       { background: var(--teal-vlak); color: #0E8F8B; }

/* ── Knoppen ──────────────────────────────────────────────────── */

.knop {
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 8px 15px; border-radius: 9px; border: 1px solid var(--lijn);
  background: var(--vlak); color: var(--tekst); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.knop:hover { background: var(--zacht); border-color: #D5DFEA; }
.knop--primair { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.knop--primair:hover { background: #245BBF; border-color: #245BBF; }
.knop--teal { background: var(--teal); border-color: var(--teal); color: #fff; }
.knop--teal:hover { background: #0E9E9A; border-color: #0E9E9A; }
.knop--stil { border-color: transparent; background: transparent; color: var(--gedempt); }
.knop--stil:hover { background: var(--zacht); }
.knop--gevaar { color: var(--rood); border-color: #FDA29B; }
.knop--gevaar:hover { background: var(--rood-vlak); }
.knop:disabled { opacity: .55; cursor: default; }
.knop--klein { padding: 6px 12px; font-size: 13px; }

/* ── Formulieren ──────────────────────────────────────────────── */

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }

input[type=text], input[type=email], input[type=tel], input[type=url], input[type=search],
input[type=number], input[type=date], input[type=password], select, textarea {
  width: 100%; font: inherit; font-size: 14px;
  padding: 9px 12px; border: 1px solid var(--lijn); border-radius: 9px;
  background: var(--vlak); color: var(--tekst);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--blauw); outline-offset: -1px; border-color: var(--blauw);
}
textarea { resize: vertical; min-height: 64px; }

.veld { margin-bottom: 14px; }
.velden { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.velden .veld { margin-bottom: 0; }
@media (max-width: 560px) { .velden { grid-template-columns: 1fr; } }

fieldset { border: 1px solid var(--lijn); border-radius: 12px; padding: 16px; margin: 20px 0 0; }
legend { font-family: var(--kop); font-weight: 700; font-size: 14px; padding: 0 6px; }

.aanvink { display: flex; align-items: center; gap: 9px; }
.aanvink label { margin: 0; }
.aanvink input { width: auto; }

/* ── Dialoog ──────────────────────────────────────────────────── */

dialog {
  width: min(580px, calc(100vw - 24px));
  border: none; border-radius: 16px; padding: 0;
  box-shadow: 0 24px 64px rgba(10, 37, 64, .28);
  color: var(--tekst);
}
dialog::backdrop { background: rgba(10, 37, 64, .45); }
.dialoog__kop { padding: 20px 24px; border-bottom: 1px solid var(--lijn);
                display: flex; align-items: center; gap: 12px; }
.dialoog__kop h2 { margin-right: auto; font-size: 16px; }
.dialoog__body { padding: 20px 24px; max-height: 64dvh; overflow-y: auto; }
.dialoog__voet {
  padding: 15px 24px; border-top: 1px solid var(--lijn);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--zacht); border-radius: 0 0 16px 16px;
}
.dialoog__voet .rechts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Smal scherm ──────────────────────────────────────────────── */
/* Onder 900px is een verticale kolom van 232px de halve breedte kwijt, en
   acht kale iconen op een rijtje onderin zijn niet te onderscheiden zonder
   erop te tikken. In plaats daarvan: een hamburgerknop die een dropdown met
   de volle labels opent, boven de inhoud, met een schermvullend
   achtergrondje om 'm weg te tikken. */

.hamburger { display: none; }

@media (max-width: 900px) {
  .app { flex-direction: column; }

  .hamburger {
    display: grid; place-items: center; flex: none;
    width: 38px; height: 38px; border: 0; border-radius: 9px;
    background: var(--zacht); color: var(--tekst); cursor: pointer;
  }
  .hamburger svg {
    width: 21px; height: 21px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round;
  }
  .hamburger__sluit { display: none; }
  .hamburger[aria-expanded="true"] .hamburger__open { display: none; }
  .hamburger[aria-expanded="true"] .hamburger__sluit { display: block; }

  .zij-scherm {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(10, 37, 64, .45);
  }

  /* Dicht: boven het scherm geschoven, geen ruimte in de flow (position:
     fixed regelt dat toch al). Open: erin geschoven, hoog genoeg om zelf
     te scrollen als 'm dat een keer niet past. */
  .zij {
    /* De basisregel zet een vaste breedte van 232px voor de kolom op
       desktop; zonder reset wint die van left/right en blijft de dropdown
       een smal streepje in plaats van de volle breedte. */
    width: auto; flex: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: auto;
    max-height: 100dvh; overflow-y: auto; z-index: 100;
    transform: translateY(-100%);
    transition: transform .18s ease;
  }
  .zij.zij--open { transform: translateY(0); }

  .zij__nav { gap: 2px; }
  .zij__knop { padding: 13px 12px; font-size: 15px; }
  .zij__knop svg { width: 20px; height: 20px; }
  .zij__teller { position: static; transform: none; }

  .bovenbalk { padding: 16px 18px; }
  .inhoud { padding: 18px 18px 48px; }
}

@media (min-width: 901px) {
  .zij-scherm { display: none; }
}