/* ============================== 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 7px 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; max-width:132px; }
.rb .rb-veld.maat{ min-width:62px; }
.rb .rb-veld.zoek{ min-width:120px; width:150px; }
/* ---- Excel naar PDF (06-09-2026) ---- */
.xp-rij{ align-items:flex-start; gap:18px 26px; margin-top:14px; }
/* [MOBIEL 06-09-2026] Gemeten op 390 px: de keuzevelden van 'naar PDF'
   werden tot 78 px samengeperst -- een keuzelijst waar niets meer in te
   lezen is. Onder 640 px krijgt elk veld de volle breedte; de vinkjes ook,
   want twee daarvan naast elkaar kapte het tweede label af. */
@media (max-width:640px){
  .xp-rij{ flex-direction:column; gap:14px; }
  .xp-rij > .pt-field, .xp-rij > .xp-vink{ width:100%; }
  .xp-rij .pt-input, .xp-rij select{ width:100%; box-sizing:border-box; }
  .xp-bladen{ max-height:190px; }
}
.xp-bladen{ display:flex; flex-direction:column; gap:4px; max-height:150px; overflow:auto; font-size:.9rem; }
.xp-bladen label{ display:flex; gap:7px; align-items:center; }
.xp-vink{ display:inline-flex; gap:7px; align-items:center; font-size:.9rem; color:var(--to-tekst-2); }
.xp-prog{ height:6px; background:var(--to-vlak-2); border-radius:99px; overflow:hidden; margin:10px 0 4px; }
.xp-prog i{ display:block; height:100%; width:0; background:var(--to-merk); transition:width .15s; }
.xp-pv-wrap{ margin-top:14px; }
.xp-pv-cap{ font-size:.82rem; color:var(--to-gedempt); margin-bottom:6px; }
.xp-pv{ display:block; max-width:100%; height:auto; border:1px solid var(--to-lijn-2); border-radius:8px; background:#fff; box-shadow:var(--to-schaduw); }
.pt-drop.xp-klein{ display:flex; align-items:center; gap:10px; padding:10px 14px; text-align:left; border-style:solid; }
.pt-drop.xp-klein svg{ width:20px; height:20px; flex-shrink:0; }
.pt-drop.xp-klein .big{ font-size:.86rem; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.pt-drop.xp-klein .small{ font-size:.78rem; margin:0 0 0 auto; white-space:nowrap; color:var(--to-merk); font-weight:600; }
/* [LINT 06-09-2026] Gemeten: het Start-paneel had in Excel 1474 px nodig en in
   Word 1840 px, dus op elke laptop een schuifbalk met afgeknipte groepen.
   Zoeken en vervangen staan onder elkaar, de keuzelijsten nemen niet meer de
   breedte van hun langste optie, en het hoofdlettermenu staat op de eerste
   rij. Wat dan nog niet past, vouwt op een gewoon scherm over twee rijen; op
   een telefoon blijft het lint één schuifbare rij (zie de 720px-regels). */
.rb .rb-veld.stijl{ max-width:132px; }
.rb .rb-veld.maat{ max-width:118px; }
.rb #wdKast{ max-width:74px; }
.rb #wdSize{ max-width:84px; }
@media (min-width:721px) and (max-width:1500px){
  .rb-paneel.actief{ flex-wrap:wrap; row-gap:6px; overflow-x:visible; }
}
.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; }