/* ============================== LINT (ribbon) ==============================
   Word en Excel hadden één rij losse knoppen; dat oogt kaal en je vindt er
   niets in terug. Dit is de opzet die iedereen van Office kent: een balk met
   Bestand + tabbladen, en daaronder per tabblad groepen met een naam eronder.

   Twee dingen die hier bewust worden rechtgezet:
   - BASE_CSS stylet select/textarea/input GLOBAAL op width:100%;display:block
     (zie de toelichting bij die regels in app.py: bewust ongescoped). Op een
     werkbalk maakt dat van elke keuzelijst een blok over de volle breedte, en
     dat is precies waarom de Word-balk als drie schermbrede vakken onder
     elkaar verscheen. Binnen het lint zetten we dat terug.
   - Diezelfde globals geven een veld in donkere modus een donkere vulling.
     Op een witte kaart levert dat zwarte invoervakken op. Ook hier terug.
*/
.rb{ border:1px solid #dbe2ea; border-radius:12px; background:#fff;
  margin-bottom:12px; }
.rb-bar{ display:flex; align-items:stretch; gap:2px; background:#f6f8fb;
  border-bottom:1px solid #e3e9f0; padding:0 6px; flex-wrap:wrap; }
.rb-file{ border:0; background:#1e5a9e; color:#fff; font:inherit; font-size:.86rem;
  font-weight:600; padding:.5rem 1rem; cursor:pointer; border-radius:0; }
.rb-file:hover{ background:#174a83; }
.rb-tab{ border:0; background:none; font:inherit; font-size:.86rem; color:#475569;
  padding:.5rem .9rem; cursor:pointer; border-bottom:2px solid transparent; }
.rb-tab:hover{ color:#1e5a9e; }
.rb-tab.actief{ color:#1e5a9e; font-weight:600; border-bottom-color:#1e5a9e; background:#fff; }
.rb-doc{ margin-left:auto; align-self:center; font-size:.8rem; color:#64748b;
  max-width:38ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 8px; }
.rb-eind{ display:flex; align-items:center; gap:4px; padding:0 4px; }

/* nowrap (19-08-2026): wrap won het van de bedoelde horizontale scroll en
   liet de Bewerken-groep op ELK niet-fullscreen scherm rommelig onder de
   rest vallen (de shell is op 1180px gecapt). */
.rb-paneel{ display:none; padding:8px 10px 6px; gap:0; align-items:stretch; flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rb-paneel.actief{ display:flex; }
.rb-groep{ display:flex; flex-direction:column; justify-content:flex-start; gap:3px;
  padding:4px 9px 0; border-right:1px solid #eef2f7; }
/* Het label hoort onderaan de groep te staan, ook als de groep minder rijen
   heeft dan zijn buurman — anders zweeft het ergens in het midden. */
.rb-groep > .rb-lbl{ margin-top:auto; }
.rb-groep:last-child{ border-right:0; }
.rb-rij{ display:flex; align-items:center; gap:4px; flex-wrap:nowrap; }
.rb-lbl{ font-size:.68rem; color:#64748b; text-align:center; letter-spacing:.02em;
  padding-top:2px; }
/* De uitleg onder de functiekiezer is geen groepslabel maar leestekst; op
   #94a3b8 stond die op 2,6:1 en was hij nauwelijks te lezen. */
#xlFnUitleg{ color:#334155; font-size:.75rem; }

/* Knoppen en velden binnen het lint: compact, en niet meegesleept door de
   globale form-opmaak uit BASE_CSS. */
.rb-knop{ display:inline-flex; align-items:center; justify-content:center; gap:5px;
  border:1px solid transparent; background:none; color:#0f172a; border-radius:6px;
  font:inherit; font-size:.82rem; padding:.32rem .5rem; cursor:pointer; min-width:30px;
  height:30px; white-space:nowrap; }
.rb-knop:hover{ background:#eef4fd; border-color:#cddff5; }
.rb-knop.aan{ background:#dceafd; border-color:#9dc2ee; }
/* Grote knoppen: icoon bóven het label, zoals in Word. Vaste hoogte, want een
   rij waarin de ene knop hoger is dan de andere leest als een fout — en dat was
   precies wat er mis was (gebruikersmelding 09-08-2026, met het echte Word
   ernaast). Een vaste minimumbreedte houdt de kolommen onder elkaar. */
.rb-knop.groot{ flex-direction:column; justify-content:flex-start; height:52px;
  min-width:58px; padding:.3rem .4rem; font-size:.7rem; gap:3px; line-height:1.15; }
.rb-knop.groot svg{ width:18px; height:18px; }
/* Een lang label (Werkmapstatistieken) moet binnen de vaste knopbreedte
   kunnen afbreken. Dat stond eerder als ­ IN de tekst, maar t()
   escapet zijn uitvoer, dus dan las je letterlijk "­" op de knop
   (gebruikersmelding 09-08-2026). Afbreken is opmaak; dat hoort hier. */
.rb-knop.groot > span{ overflow-wrap:anywhere; hyphens:auto; }
.rb-knop svg{ width:16px; height:16px; flex-shrink:0; }
/* Een rij met alleen kleine knoppen krijgt dezelfde hoogte als een rij grote,
   zodat de groepen naast elkaar op één lijn eindigen. */
.rb-rij{ min-height:30px; }
.rb-knop.primair{ background:#1e5a9e; border-color:#1e5a9e; color:#fff; font-weight:600; }
.rb-knop.primair:hover{ background:#174a83; }
/* Uitgeschakeld moet er ook uitgeschakeld uitzien; anders lijkt "ongedaan
   maken" kapot terwijl er domweg niets te herstellen valt. */
.rb-knop:disabled{ opacity:.42; cursor:default; }
.rb-knop:disabled:hover{ background:#fff; border-color:#dbe2ea; }
.rb .rb-veld{ width:auto; display:inline-block; appearance:auto; padding:.28rem .45rem;
  border:1px solid #cbd5e1; border-radius:6px; background:#fff; color:#0f172a;
  font:inherit; font-size:.82rem; height:30px; box-shadow:none; }
.rb .rb-veld:focus{ border-color:#1e5a9e; box-shadow:0 0 0 3px #dceafd; outline:none; }
.rb select.rb-veld{ padding-right:1.4rem; }
.rb .rb-veld.stijl{ min-width:132px; }
.rb .rb-veld.font{ min-width:120px; }
.rb .rb-veld.maat{ min-width:62px; }
.rb .rb-veld.zoek{ min-width:120px; }
.rb-sep{ width:1px; align-self:stretch; background:#e2e8f0; margin:0 3px; }

/* Bestand-menu */
/* Het menu hangt onderaan de body, dus zonder deze plaatsing komt het in de
   tabvolgorde pas na alle rastercellen. */
.rb-menu{ position:absolute; z-index:60; min-width:230px; background:#fff;
  border:1px solid #dbe2ea; border-radius:10px; box-shadow:0 18px 40px rgba(15,23,42,.16);
  padding:6px; display:none; }
.rb-menu.open{ display:block; }
.rb-menu button{ display:flex; align-items:center; gap:9px; width:100%; border:0;
  background:none; font:inherit; font-size:.86rem; color:#0f172a; text-align:left;
  padding:.5rem .6rem; border-radius:7px; cursor:pointer; }
.rb-menu button:hover{ background:#eef4fd; }
.rb-menu hr{ border:0; border-top:1px solid #eef2f7; margin:5px 2px; }
.rb-menu .snel{ margin-left:auto; font-size:.72rem; color:#94a3b8; }
/* ---- Rechtermuismenu (Excel én Word) ----
   Zelfde opbouw als het Bestand-menu hierboven, maar het zweeft op
   muispositie boven de pagina in plaats van onder een knop. */
.pt-ctx{ position:fixed; z-index:9999; min-width:212px; background:#fff;
  border:1px solid #dbe2ea; border-radius:11px; padding:5px;
  box-shadow:0 16px 44px -14px rgba(15,23,42,.5); font-size:.86rem; }
.pt-ctx button{ display:flex; align-items:center; gap:9px; width:100%; border:0;
  background:none; text-align:left; padding:.42rem .6rem; border-radius:7px;
  font:inherit; color:#0f172a; cursor:pointer; }
.pt-ctx button:hover:not(:disabled){ background:#eef4fd; }
.pt-ctx button:disabled{ color:#a3adbb; cursor:default; }
.pt-ctx .snel{ margin-left:auto; font-size:.72rem; color:#94a3b8; }
.pt-ctx hr{ border:0; border-top:1px solid #eef2f7; margin:4px 2px; }

/* Functiekiezer (Excel) */
.rb-fnwrap{ display:flex; align-items:center; gap:5px; }
.rb-fnlijst{ max-height:260px; overflow:auto; }
.rb-fnlijst button{ font-family:'JetBrains Mono',monospace; font-size:.8rem; }

/* Bladtabs onderaan, zoals in Excel. */
.xl-bladbalk{ margin:0; padding:6px 4px 0; border-top:1px solid #eef2f7; }
/* Rasterlijnen uit (Weergave-tabblad): de cellen blijven, de lijnen verdwijnen. */
.xl-wrap.geen-raster .xl-grid td{ border-color:transparent; }

@media (max-width:720px){
  .rb-groep{ padding:0 6px; }
  .rb-lbl{ display:none; }
  .rb-doc{ display:none; }
  /* Op een telefoon paste een groep als "Functie invoegen" (335px) niet in de
     beschikbare 268px, en werd de knop Invoegen hard afgeknipt: onbereikbaar,
     zonder enig teken dat er meer was. De rij mag daar dus afbreken, en de
     velden worden smaller. */
  .rb-rij{ flex-wrap:wrap; }
  .rb .rb-veld.stijl, .rb .rb-veld.font{ min-width:96px; }
  .rb .rb-veld.zoek{ min-width:88px; }
  /* HET LINT ALS ÉÉN SCHUIFBARE RIJ (gebruikersmelding 08-08-2026: "de interface
     van deze viewers moet goed werken op de mobiel").
     .rb-bar had wél overflow-x:auto maar hield flex-wrap:wrap, en wrap wint:
     de tabbladen vielen uiteen over twee regels ("Weergave" en de knop voor
     volledig scherm zakten eronder). Hetzelfde bij .rb-paneel — daar stapelden
     álle groepen onder elkaar en was het lint zo'n 300px hoog, waarmee het
     eigenlijke werkblad van het scherm werd geduwd. Nowrap + horizontaal
     schuiven is precies wat Office op een telefoon doet: het lint blijft twee
     regels hoog en je veegt naar de groep die je nodig hebt. */
  .rb-bar{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; }
  .rb-bar::-webkit-scrollbar{ display:none; }
  .rb-bar > *{ flex:0 0 auto; }
  /* De gelijke lintdhoogte die lintGelijkeHoogte op de desktop zet is hier
     verspilde ruimte: zonder groepslabels en met één schuifbare rij past alles
     al in twee regels. */
  .rb-paneel{ flex-wrap:nowrap; scrollbar-width:none; min-height:0 !important; }
  .rb-paneel::-webkit-scrollbar{ display:none; }
  .rb-groep{ flex:0 0 auto; }
  /* De laatste groep op elk paneel is leestekst ("Formules rekenen mee: …").
     Die tekst valt hierboven al onder .rb-lbl{display:none}, maar de lege
     groep-omhulling bleef staan: een streepje van 12px dat je op een telefoon
     eerst voorbij moet vegen vóór je bij een knop komt. */
  .rb-paneel .rb-groep:has(> .rb-lbl:only-child){ display:none; }
  /* Het werkblad krijgt de ruimte die het lint niet meer opeet. */
  .xl-wrap{ max-height:none; }
  .xl-fx{ min-width:0; }
  /* De zwevende ⌘K-knop lag over de formulebalk heen. Op een telefoon zoek je
     een tool niet met een sneltoets; de knop staat ook in het menu. */
  #dlpalBtn{ display:none; }
}

/* ============================ APP-MODUS ====================================
   In volledig scherm werd alleen het browservenster schermvullend; de titel,
   de omschrijving, de terug-link en de paginamarges bleven er gewoon omheen
   staan. Een editor hoort dan van rand tot rand te lopen, met het lint bovenaan
   en het document daaronder — verder niets.
   De klasse vs-vol wordt door _volledig_scherm.html op <html> gezet.
*/
html.vs-vol, html.vs-vol body{ height:100%; overflow:hidden; }
html.vs-vol .pt-shell{ max-width:none; margin:0; padding:0; height:100vh;
  display:flex; flex-direction:column; }
/* De eerste seconden staat de melding van de browser ("… press Esc") over het
   lint. Het lint zakt zolang omlaag; het werkblad krimpt mee, dus er valt
   niets buiten beeld. Zie _volledig_scherm.html voor wie die klasse zet. */
html.vs-vol .rb{ transition:margin-top .25s ease; }
html.vs-vol.vs-melding .rb{ margin-top:52px; }
html.vs-vol .pt-top, html.vs-vol .pt-sub, html.vs-vol .pt-note,
html.vs-vol .pt-privacy, html.vs-vol .pt-hubnav, html.vs-vol .pt-footer,
html.vs-vol .vz-balk, html.vs-vol #wdDropCard, html.vs-vol #xlDropCard,
/* Ook alles wat ONDER de editor stond bleef in volledig scherm staan: de
   statusregel ("Geopend: …") en het blok met verwante tools. Dat gaf een balk
   onderaan het scherm die er in deze modus niet hoort (gebruikersmelding 08-08-2026). De status blijft in het lint zichtbaar; verwante tools zijn
   navigatie en die staat hier bewust uit. */
html.vs-vol .pt-status, html.vs-vol .pt-related,
html.vs-vol #xlStatus, html.vs-vol #wdStatus{ display:none !important; }
html.vs-vol .pt-card{ flex:1 1 auto; min-height:0; margin:0; border-radius:0;
  border:0; box-shadow:none; display:flex; flex-direction:column; padding:0; }
html.vs-vol .rb{ border-radius:0; border-left:0; border-right:0; border-top:0; margin:0; }
html.vs-vol .rb-doc{ display:block; }
html.vs-vol .xl-wrap{ flex:1 1 auto; min-height:0; max-height:none; border-radius:0;
  border-left:0; border-right:0; }
html.vs-vol .wd-pagewrap{ flex:1 1 auto; min-height:0; max-height:none; border-radius:0;
  border-left:0; border-right:0; }
html.vs-vol .pt-actions{ display:none; }
/* ...maar de onderbalk is geen knoppenrij: die hoort te blijven staan, net als
   in Word. De woordenteller stond hier los vastgeprikt omdat hij tussen de
   knoppen zat; nu hij in de onderbalk hoort hoeft dat niet meer. */
html.vs-vol .ot-onderbalk{ display:flex; flex:0 0 auto; padding:4px 12px;
  font-size:.75rem; }
html.vs-vol .pt-status{ margin:0; padding:4px 12px; font-size:.78rem; }