/* ============================================================
 *  Dashie — gedeelde mobiele aanpassingen
 *  Eén bron voor de uniforme HEADER + SUBHEADER op alle pagina's.
 *  Inladen onderaan de <head> van elke pagina:
 *      <link rel="stylesheet" href="/dashie_mobile.css">
 *  (Komt na de pagina-eigen <style>, dus de !important-regels
 *   winnen en de header/subheader zijn overal identiek mobiel.)
 * ============================================================ */

/* ── Draai-fix (portret ⇄ landschap) ─────────────────────────
   iOS/Safari (en oude Chrome) "inflaten" tekst automatisch bij het
   draaien van portret naar landschap: lettergroottes worden opgeblazen
   om de bredere viewport te vullen, waardoor de layout plots te groot
   wordt en breekt. Deze regel zet die auto-inflatie uit → tekst blijft
   op de door de CSS bepaalde grootte, ongeacht de oriëntatie. Geldt
   globaal (buiten elke media-query) op elke pagina die dit bestand laadt. */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 768px) {
  /* Header compacter */
  header.dashie-header,
  header.dashie {
    height: 58px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 10px !important;
  }

  /* ── LOGO: vervang het brede woordmerk-logo door het compacte
     favicon-icoon (zelfde merk, veel smaller). Werkt op elke pagina
     omdat .header-logo overal dezelfde wrapper is. Het <img> wordt
     verborgen en het icoon komt als achtergrond op de <a>.        */
  .header-logo {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-shrink: 0 !important;
    background: url('/favicon.svg') left center / contain no-repeat !important;
    overflow: hidden !important;
  }
  .header-logo img { display: none !important; }

  .header-divider { display: none !important; }

  /* ── TITEL schaalt mee met de schermbreedte i.p.v. mega-groot ── */
  .header-module {
    font-size: clamp(14px, 4.5vw, 18px) !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }

  /* Gebruikersnaam + admin-pill verbergen — pictogram + afmelden blijven
     (.dashie-user op de nieuwe pagina's, .header-user op hub/admin) */
  .dashie-user b, .header-user b { display: none !important; }
  .admin-pill { display: none !important; }
  .header-logout { width: 34px !important; height: 34px !important; }

  /* Subheader (subtoolbar) mag wrappen, kleinere knoppen */
  .subtoolbar {
    padding: 8px 14px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .toolbar-btn, .header-btn { padding: 6px 10px !important; font-size: 12.5px !important; }

  /* Veelgebruikte content-wrappers: minder zijmarge op mobiel */
  .page, .shell, .wrap { padding-left: 14px !important; padding-right: 14px !important; }
}

@media (max-width: 420px) {
  .header-module { font-size: clamp(12px, 4vw, 15px) !important; }
  .header-logo { width: 30px !important; height: 30px !important; min-width: 30px !important; }
}

/* ── SUBHEADER BURGERMENU ─────────────────────────────────────
   Desktop: burger onzichtbaar; .subtoolbar-menu is display:contents
   zodat de bestaande flex-layout van de subtoolbar ONGEWIJZIGD blijft.
   Mobiel (≤768px): de items verdwijnen achter een burger-knop en
   klappen open als dropdown-paneel. Wordt aangestuurd door
   /dashie_mobile.js (wrapt de items + injecteert de knop).        */
.subtoolbar-burger { display: none; }
.subtoolbar-menu   { display: contents; }

@media (max-width: 768px) {
  .subtoolbar {
    position: relative !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .subtoolbar-burger {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 42px; height: 36px;
    background: #fff; color: var(--red, #c80032);
    border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
    font-size: 16px; line-height: 1; cursor: pointer;
    transition: all .15s;
  }
  .subtoolbar-burger:hover { border-color: var(--red, #c80032); background: #fff1f2; }
  .subtoolbar-menu { display: none !important; }

  .subtoolbar--open .subtoolbar-menu {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    position: absolute;
    top: calc(100% + 4px); left: 8px; right: 8px;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    padding: 8px;
    z-index: 300;
  }
  /* Spacer heeft geen zin in een verticale dropdown */
  .subtoolbar--open .subtoolbar-menu .subtoolbar-spacer { display: none !important; }
  /* Knoppen vullen de volledige breedte, links uitgelijnd */
  .subtoolbar--open .subtoolbar-menu .toolbar-btn,
  .subtoolbar--open .subtoolbar-menu .header-btn,
  .subtoolbar--open .subtoolbar-menu > a,
  .subtoolbar--open .subtoolbar-menu > button {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* ============================================================
 *  TABLET / iPAD-LAAG  (769px – 1024px)
 *  Dit is het "bewuste" tablet-breekpunt dat tot nu ontbrak.
 *  De telefoon-regels hierboven stoppen op 768px; desktop begon
 *  pas ~1180/1320px. Alles daartussen (iPad portret = 768–834,
 *  iPad landschap = 1024–1194) viel in een gat. Deze laag geeft
 *  die schermen wat lucht ZONDER naar de telefoon-layout te
 *  springen: header + subheader blijven horizontaal, we winnen
 *  enkel zijmarge terug en maken brede tabellen touch-scrollbaar.
 * ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Minder zijmarge → meer nuttige breedte voor tabellen/panelen */
  header,
  header.dashie-header,
  header.dashie      { padding-left: 20px !important; padding-right: 20px !important; }
  .subtoolbar        { padding-left: 20px !important; padding-right: 20px !important; }
  .page, .shell, .wrap { padding-left: 20px !important; padding-right: 20px !important; }

  /* Brede tabellen: vlot met de vinger horizontaal kunnen slepen
     (momentum-scroll op iOS). Geldt voor de gangbare scroll-wrappers. */
  .panel.no-pad, .tbl-scroll, .table-wrap, .no-pad {
    -webkit-overflow-scrolling: touch;
  }

  /* Iets ruimere raakvlakken op touch-tablets */
  .toolbar-btn, .header-btn, .btn { min-height: 38px; }
}

/* ============================================================
 *  LANDSCAPE-HINT  — enkel telefoon in PORTRET
 *  Wegklikbare banner die aanraadt het toestel te draaien.
 *  Bewust NIET op tablets: de bovengrens 640px + orientation
 *  portrait sluit iPad (≥768) en telefoons-in-landschap uit.
 *  Zichtbaarheid wordt door deze media-query bepaald; het
 *  wegklikken (per sessie) zet .dh-dismissed via dashie_mobile.js.
 * ============================================================ */
.dh-orient-hint { display: none; }

@media (max-width: 640px) and (orientation: portrait) {
  .dh-orient-hint:not(.dh-dismissed) {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 10px; right: 10px; bottom: 10px;
    z-index: 4000;
    background: var(--dark, #252321);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    border-left: 4px solid var(--gold, #ffc421);
    border-radius: 10px;
    padding: 11px 12px 11px 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    font-size: 13.5px;
    line-height: 1.4;
    animation: dh-orient-in .22s ease-out;
  }
}
.dh-orient-hint .dh-orient-ico {
  color: var(--gold, #ffc421);
  font-size: 18px;
  flex-shrink: 0;
}
.dh-orient-hint .dh-orient-txt { flex: 1; }
.dh-orient-hint .dh-orient-txt b { color: var(--gold, #ffc421); font-weight: 700; }
.dh-orient-hint .dh-orient-close {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 0; border-radius: 8px;
  font-size: 20px; line-height: 1; cursor: pointer;
  font-family: inherit;
}
.dh-orient-hint .dh-orient-close:hover { background: rgba(255,255,255,.20); }
@keyframes dh-orient-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  @media (max-width: 640px) and (orientation: portrait) {
    .dh-orient-hint:not(.dh-dismissed) { animation: none; }
  }
}
