/* De schil van het klantenpaneel /mijn en (PLAK-8) van de DZH-admin: menu links, onderbalk,
   kaarten en lijsten. Verhuisd uit offerte.css (fase 1 van de splitsing); geen Wegdek. */
/* Blok 3c: de klantpagina /mijn — kop met naam en uitloggen, tabbladen,
   lijsten. Hergebruikt .aanbod-form voor formulieren en .offerte-regels voor de
   artikelkaarten (zelfde markup als het offerteformulier, dus offerte.js werkt). */
.mijn-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.mijn-kop__wie {
  margin: 0;
  font-weight: 600;
}
.mijn-kop__adres {
  display: block;
  font-weight: 400;
  color: var(--kleur-tekst-stil, #5a5a5a);
  font-size: 0.9rem;
}
.mijn-kop__uit {
  margin: 0;
}
.mijn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--kleur-lijn, #ddd);
}
.mijn-tabs__tab {
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.mijn-tabs__tab--aan {
  border-bottom-color: var(--kleur-accent, #ffb400);
  font-weight: 600;
}
.mijn-lijst {
  padding-left: 1.2rem;
}
.mijn-lijst li {
  margin: 0.35rem 0;
}
.mijn-kaart {
  border: 1px solid var(--kleur-lijn, #ddd);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}
.mijn-kaart__status {
  font-weight: 600;
  margin: 0 0 0.25rem;
}
.mijn-kaart__meta {
  color: var(--kleur-tekst-stil, #5a5a5a);
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}
.mijn-code {
  font-family: "Overpass Mono", ui-monospace, monospace;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}
.mijn-adresblok {
  background: var(--kleur-tint, #f1edfc);
  border: 1px solid var(--kleur-lijn, #e5e0f3);
  border-radius: var(--radius, 8px);
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
  white-space: pre-line;
}

/* Klantenpaneel fase 1, taak 6 — de schil (ontwerp §7.2): menu links op desktop
   (220 px) met de klant onderaan, inhoud maximaal 1080 px; op mobiel één kolom
   met een vaste onderbalk van vijf items. De kaart "Nu" is het enige donkere vlak
   en de enige grote schaduw (§7.1). Tokens uit site.css, niets nieuws verzonnen. */
.mijn-schil {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--maat-5, 2.5rem);
  align-items: start;
}
.mijn-inhoud {
  min-width: 0;
  max-width: 1080px;
}
.mijn-menu {
  display: flex;
  flex-direction: column;
  gap: var(--maat-3, 1rem);
  position: sticky;
  top: var(--maat-4, 1.5rem);
  min-width: 0;
}
.mijn-menu__merk {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mijn-menu__ruit {
  width: 10px;
  height: 10px;
  background: var(--kleur-accent, #6d28d9);
  transform: rotate(45deg);
  display: inline-block;
  flex: none;
}
.mijn-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mijn-menu__item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius, 8px);
  color: var(--kleur-tekst, #141020);
  text-decoration: none;
}
.mijn-menu__item:hover {
  background: var(--kleur-vlak, #f8f6fe);
}
.mijn-menu__item--aan {
  background: var(--kleur-tint, #f1edfc);
  color: var(--kleur-accent-fel, #5b21b6);
  font-weight: 600;
}
.mijn-menu__klant {
  margin-top: auto;
  color: var(--kleur-tekst-zacht, #565068);
  font-size: 0.9rem;
  line-height: 1.35;
  display: grid;
  gap: 0.35rem;
}
.mijn-menu__klant strong {
  color: var(--kleur-tekst, #141020);
  overflow-wrap: anywhere;
}
.mijn-menu__klant form {
  margin: 0.35rem 0 0;
}
.mijn-onderbalk {
  display: none;
}
.mijn-nu {
  background: var(--kleur-diep, #160f2b);
  color: var(--kleur-diep-tekst, #efebfa);
  border-radius: var(--radius, 8px);
  padding: var(--maat-4, 1.5rem) var(--maat-4, 1.5rem) var(--maat-3, 1rem);
  box-shadow: var(--schaduw, 0 18px 44px rgba(22, 15, 43, 0.16));
  margin: 0 0 var(--maat-4, 1.5rem);
  min-width: 0;
}
.mijn-nu__label {
  margin: 0 0 0.2rem;
  color: var(--kleur-diep-zacht, rgba(239, 235, 250, 0.72));
  font-size: 0.9rem;
}
.mijn-nu__titel {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--kleur-diep-tekst, #efebfa);
  overflow-wrap: anywhere;
}
.mijn-nu__acties {
  display: flex;
  gap: var(--maat-2, 0.5rem);
  flex-wrap: wrap;
  padding-top: var(--maat-2, 0.5rem);
  margin-top: var(--maat-3, 1rem);
  border-top: 1px solid var(--kleur-diep-lijn, rgba(239, 235, 250, 0.16));
}
@media (max-width: 820px) {
  .mijn-schil {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 5.5rem;
  }
  .mijn-menu {
    display: none;
  }
  .mijn-onderbalk {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--kleur-achtergrond, #fff);
    border-top: 1px solid var(--kleur-lijn, #e5e0f3);
    padding: 0.35rem 0 max(0.35rem, env(safe-area-inset-bottom));
    z-index: 5;
  }
  .mijn-onderbalk a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-size: 0.75rem;
    text-decoration: none;
    color: var(--kleur-tekst-zacht, #565068);
    min-width: 0;
    text-align: center;
  }
  .mijn-onderbalk a[aria-current] {
    color: var(--kleur-accent-fel, #5b21b6);
    font-weight: 600;
  }
}


/* PLAK-6 taak 4: de aanvraagpagina op /mijn met de berichtendraad. */
.mijn-aanvraag__samenvatting {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin: 1rem 0 1.25rem;
}

.mijn-aanvraag__samenvatting dt {
  color: var(--kleur-tekst-zacht);
}

.mijn-aanvraag__samenvatting dd,
.mijn-aanvraag__wat {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.mijn-aanvraag__kop2 {
  margin-top: 1.5rem;
}

.mijn-draad {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.mijn-draad__bericht {
  padding: 0.75rem 1rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-achtergrond);
}

.mijn-draad__bericht--dzh {
  background: var(--kleur-tint);
}

.mijn-draad__kop {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
}

.mijn-draad__tijd {
  margin-left: 0.5rem;
}

.mijn-draad__tekst {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* --- Beheer (PLAK-8 fase 1) — de DZH-admin laadt alleen site.css en mijn.css: login,
   kaarten en formulieren dus hier, in dezelfde taal als de schil. ------------------------ */

.mijn-beheer-body {
  margin: 0;
  background: var(--kleur-achtergrond, #faf9fc);
}

.mijn-beheer {
  padding: 2rem 0 5rem;
}

.mijn-inlog {
  display: grid;
  place-items: center;
  min-height: 80vh;
  padding: 2rem 1rem;
}

/* Gescoopt op de admin-body: .mijn-kaart zelf staat hierboven al (klantenpaneel) en de
   kaart "Nu" is bewust géén .mijn-kaart — hij blijft het enige donkere vlak (§7.1). */
.mijn-beheer-body .mijn-kaart {
  background: var(--kleur-achtergrond, #fff);
  border: 1px solid var(--kleur-lijn, #e5e0f3);
  border-radius: var(--radius, 8px);
  padding: 1.5rem;
}

.mijn-kaart--smal {
  width: min(100%, 26rem);
}

.mijn-beheer-body .mijn-kaart h1 {
  margin: 0.75rem 0 0.5rem;
  font-size: 1.6rem;
}

.mijn-beheer-body .mijn-kaart p + p,
.mijn-beheer-body .mijn-kaart p + form {
  margin-top: 0.75rem;
}

.mijn-beheer .mijn-inhoud > h1 {
  font-size: 1.6rem;
  margin: 0 0 var(--maat-4, 1.5rem);
}

.mijn-beheer .mijn-nu > p:not(.mijn-nu__label) {
  margin-top: 0.4rem;
  color: var(--kleur-diep-zacht, rgba(239, 235, 250, 0.72));
  max-width: 62ch;
}

.mijn-vorm {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.mijn-vorm--los {
  margin-top: 0.75rem;
}

.mijn-vorm label {
  font-weight: 600;
}

.mijn-vorm__hint {
  color: var(--kleur-tekst-zacht, #6b7280);
  font-weight: 400;
  font-size: 0.85rem;
}

.mijn-vorm input {
  font: inherit;
  font-size: 16px;
  padding: 0.6rem 0.75rem;
  min-height: 44px;
  border: 1px solid var(--kleur-lijn, #d1d5db);
  border-radius: 8px;
  background: #fff;
}

.mijn-vorm input:focus {
  outline: 2px solid var(--kleur-accent, #6d28d9);
  outline-offset: 1px;
}

.mijn-vorm button {
  margin-top: 0.5rem;
  justify-self: start;
}

.mijn-vorm__noot {
  color: var(--kleur-tekst-zacht, #6b7280);
  font-size: 0.9rem;
  margin-top: 1rem;
}

.mijn-melding {
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: #ede9fe;
  color: #3b0764;
}

.mijn-melding--fout {
  background: #fee2e2;
  color: #991b1b;
}