/* Scrollbalken in Hortieco-groen op ALLE pagina's (26 okt, wens Fril: 'eenheid'); zelfde kleuren als in de Tekening.
   Staat bewust buiten de telefoonregels hieronder: dit bestand laadt elke pagina. */
* { scrollbar-color: #8fb09e #e4ebe6; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #e4ebe6; }
::-webkit-scrollbar-thumb { background: #8fb09e; border-radius: 8px; border: 2px solid #e4ebe6; }
::-webkit-scrollbar-thumb:hover { background: #3a6b47; }

/* ==========================================================================
   mobiel.css — nette weergave op de telefoon (28 sep 2026)
   --------------------------------------------------------------------------
   Hortieco is gemaakt voor de computer. Op een telefoon hoeft niet alles te
   werken, maar het moet er netjes uitzien en je moet je ontwerp, plantenlijst
   en boekjes kunnen bekijken. Dit bestand wordt op elke pagina als LAATSTE
   stylesheet geladen en doet alleen iets op telefoonformaat (zie @media hieronder) — op de computer
   verandert er dus niets.
   Hoort bij mobiel.js (inklapbare filters + melding "bewerken op de computer").
   ========================================================================== */
/* buiten de telefoon onzichtbaar */
.mobiel-filterknop, .mobiel-melding { display: none; }
/* tekst die alleen op de telefoon hoort (bijv. "hierboven" i.p.v. "links") */
.alleen-mobiel { display: none; }

/* 14 okt: telefoon = smaller dan 600 px (rechtop) of lager dan 500 px bij een dwarsliggende telefoon.
   Eerder was de grens 760 px breed; daardoor kreeg een Galaxy Tab S6 (rechtop ca. 710 px) de telefoonweergave. */
@media screen and (max-width: 599px), screen and (max-height: 499px) and (max-width: 959px) {   /* 1 okt: alleen op het scherm; bij afdrukken (staand A4 is smal) niet de telefoonweergave */

  /* ---------- algemeen: nooit zijwaarts scrollen ---------- */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, canvas { max-width: 100%; height: auto; }
  input, select, textarea { max-width: 100%; }
  /* 16px voorkomt dat iPhone inzoomt zodra je in een zoekveld tikt */
  input[type=text], input[type=search], input[type=email], input[type=password],
  input[type=number], select, textarea { font-size: 16px !important; }

  /* woorden als "links" kloppen niet meer als de zijbalk erboven staat */
  .alleen-groot { display: none !important; }
  .alleen-mobiel { display: inline !important; }

  /* ---------- kopbalk ---------- */
  header {
    flex-wrap: wrap; gap: 6px 14px !important; padding: 10px 14px !important;
    position: static !important;          /* plakkende kop kost op een telefoon te veel ruimte */
  }
  header h1 { font-size: 17px !important; white-space: nowrap; }
  header nav {
    display: flex; gap: 14px; flex: 1 1 100%; order: 3;
    overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { font-size: 15px !important; }
  header .telling { font-size: 12px !important; margin-left: auto; }
  header .acties { flex-wrap: wrap; gap: 6px !important; margin-left: 0 !important; flex: 1 1 100%; order: 4; }
  header .acties button, header button { padding: 6px 10px !important; font-size: 13px !important; }
  /* taalkeuzes (Latijn / NL / Beide) en andere rechtsgeplaatste blokken in de kop */
  header > div:not(.acties), header > .keuzes, header > .taal { flex-wrap: wrap; margin-left: 0 !important; }

  /* ---------- zijbalk + inhoud: onder elkaar i.p.v. naast elkaar ---------- */
  .layout { display: block !important; height: auto !important; }
  .layout > aside, body > aside {
    width: auto !important; flex: none !important; max-width: none !important;
    position: static !important; max-height: none !important; min-height: 0 !important; height: auto !important;
    border-right: none !important; border-left: none !important;
    border-bottom: 1px solid var(--rand, #d9e2dc);
    padding: 12px 14px !important;
  }
  main { padding: 14px 14px 40px !important; max-width: 100% !important; min-width: 0; }

  /* ---------- kaarten en rasters ---------- */
  .grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .veld2, .rij { flex-wrap: wrap; }
  .veld2 > div { flex: 1 1 100%; }
  dl { grid-template-columns: 1fr !important; gap: 2px 0 !important; }
  dl dt { margin-top: 8px; }

  /* ---------- tabellen: binnen de tabel schuiven, niet de hele pagina ---------- */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- panelen die over de pagina schuiven (plantkaart, dierkaart) ---------- */
  .paneel { width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; }
  .paneel .balk { padding: 10px 14px !important; flex-wrap: wrap; }
  .toevoegbalk { padding: 10px 14px !important; }

  /* ---------- inklapbare filters (mobiel.js voegt de knop toe) ---------- */
  .mobiel-filterknop {
    display: flex; align-items: center; justify-content: space-between; width: calc(100% - 28px);
    margin: 12px 14px 0; padding: 10px 14px; border: 1px solid var(--rand, #d9e2dc);
    border-radius: 10px; background: #fff; color: var(--groen, #3a6b47);
    font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
  }
  .mobiel-dicht { display: none !important; }

  /* ---------- melding "bewerken op de computer" (mobiel.js) ---------- */
  .mobiel-melding {
    display: block; margin: 10px 14px 0; padding: 10px 14px; border-radius: 10px;
    background: var(--groen-licht, #e8f0ea); color: var(--tekst, #243029); font-size: 14px; line-height: 1.4;
  }

  /* =======================================================================
     Per pagina
     ======================================================================= */

  /* Ontwerpmodule: op de telefoon alleen bekijken. De tekengereedschappen
     verdwijnen, de tekening past in de breedte en het zijpaneel komt eronder. */
  body.pagina-ontwerp { display: block !important; height: auto !important; overflow: auto !important; }
  body.pagina-ontwerp .balk { display: none !important; }
  body.pagina-ontwerp #undoKnop, body.pagina-ontwerp #redoKnop, body.pagina-ontwerp #opslaan,
  body.pagina-ontwerp #printBeplanting, body.pagina-ontwerp #tekenschermKnop, body.pagina-ontwerp header .acties button[onclick*="print"] { display: none !important; }
  body.pagina-ontwerp .canvaswrap { padding: 10px !important; overflow: visible !important; height: auto !important; }
  body.pagina-ontwerp svg.tekening { width: 100% !important; height: auto !important; pointer-events: none; touch-action: auto; }

  /* Isometrie en zijaanzicht: bedieningsbalk compacter, tekening op schermbreedte */
  body.pagina-isometrie svg, body.pagina-zijaanzicht svg.tekening { max-width: 100%; height: auto; }


  /* Plantenboekje: foto, tekst en feitenlijstje onder elkaar; compact = één kolom */
  body.pagina-plantenboekje .boekje.compact, body.pagina-plantenboekje .dieren { grid-template-columns: 1fr !important; }
  body.pagina-plantenboekje .kaart .body { flex-direction: column; gap: 12px; }
  body.pagina-plantenboekje .kaart .body > * { width: auto !important; max-width: 100% !important; flex: none !important; }
  body.pagina-plantenboekje .dier { flex-wrap: wrap; }
}