/* ==========================================================================
   werkblad.css — het werkblad

   Wat hier staat is alleen wat het werkblad zelf is: de formulebalk, het vak
   waar het raster in staat, de bladtabs en de statusbalk eronder. De
   titelbalk, de tabbalk, het lint en zijn menu's staan in `lint.css`, want die
   zijn precies hetzelfde als in de tekstverwerker.

   Het raster zelf komt uit `file.css` — dezelfde `.sheet__*` die op de
   bestandspagina staat, want het ís hetzelfde raster. Wat hier onder `.ws`
   staat zijn overschrijvingen: daar staat het in een vak dat de hele hoogte
   krijgt in plaats van in een paneel van 66vh.

   Die overschrijvingen staan met opzet onder `.ws` en niet los. `CLAUDE.md`
   waarschuwt voor klassen die tussen pagina's worden gedeeld — `.pr-search`
   die in een smalle kolom uitgroeit tot een vak van 250 pixels — en de manier
   om dat te voorkomen is een regel die alleen geldt waar hij bedoeld is.
   ========================================================================== */

/* De pagina die het werkblad draagt gebruikt de volle breedte en hoogte; het
   karkas regelt zijn eigen ruimte. Zelfde afspraak als `.page--word`. */
.page--sheet {
  display: flex;
  flex-direction: column;
  max-width: none;
  min-height: 0;
  height: calc(100vh - var(--topbar-height));
  padding: 0;
}

.ws {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  background: var(--surface-raised);
}

/* Het merkje in de titelbalk. In de tekstverwerker is het blauw — dat is de
   kleur die een `.docx` op de bestandspagina draagt. Een `.xlsx` draagt daar
   groen, en dan hoort hij hier ook groen te zijn: het pictogram naast de naam
   is hetzelfde pictogram als in de lijst waar je vandaan kwam. */
.ws-title__mark {
  background: var(--chart-3-soft);
  color: var(--chart-3);
}

/* --------------------------------------------------------------------------
   Formulebalk
   -------------------------------------------------------------------------- */

.ws-formula {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 38px;
  flex-shrink: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-page);
}

/* Het naamvak is zo breed als de langste verwijzing die er redelijkerwijs in
   past — `AA100:AB120` is elf tekens — en niet breder. Een vak dat meegroeit
   met de balk zet "A1" in een veld van driehonderd pixels. */
.ws-formula__name {
  width: 12ch;
  height: 26px;
  flex-shrink: 0;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.ws-formula__fx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-family: var(--font-serif, Georgia, serif);
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: 600;
  cursor: pointer;
}

.ws-formula__fx:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }
.ws-formula__fx:disabled { color: var(--text-muted); cursor: not-allowed; }

.ws-formula__value {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
}

.ws-formula__name:focus-visible,
.ws-formula__value:focus-visible,
.ws-formula__fx:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   Het raster

   Het staat hier in een vak dat de hele overgebleven hoogte krijgt. Op de
   bestandspagina staat hetzelfde raster in een paneel van 66vh met een rand
   eromheen; die twee maten horen bij die plek en niet bij deze.
   -------------------------------------------------------------------------- */

.ws-work {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.ws .sheet--bare {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 0;
}

.ws .sheet--bare .sheet__scroll {
  flex: 1;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
}

/* De maten van het raster, uit het ontwerp.

   Op de bestandspagina staat hetzelfde raster met bredere cellen: daar is het
   een voorbeeld van een paar kolommen in een paneel, en dan is ruim beter. Een
   werkblad is een werkblad — het ontwerp noemt 104 × 26 met een hoekvakje van
   44, en op die maat passen er twaalf kolommen naast elkaar in plaats van
   zeven.

   De corpsen staan er ook in: 12,5 px in de cellen en 11 px in de koppen. Dat
   verschil is wat een kop een kop maakt zonder er een tweede kleur voor nodig
   te hebben. */
.ws .sheet__head,
.ws .sheet__corner { font-size: 11px; }

.ws .sheet__head { min-width: 104px; }
.ws .sheet__corner { min-width: 44px; }
.ws .sheet__num { width: 44px; min-width: 44px; }

/* Het corps staat op de cel en niet op het invoervak erin. Dat vak draagt
   `font: inherit`, dus het volgt vanzelf — en een cel met een eigen
   lettergrootte uit het bestand kan die dan als factor op deze basis zetten
   (`--cel-corps` in `paintCell`). Op het invoervak zou zo'n factor tegen de
   maat van de tabel rekenen in plaats van tegen deze. */
.ws { --cel-corps: 12.5px; }
.ws .sheet__cell { font-size: var(--cel-corps); }

.ws .sheet__input {
  min-width: 104px;
  height: 26px;
  padding: 0 var(--space-2);
  line-height: 26px;
}

/* Getallen rechts en in cijfers van gelijke breedte — anders staan de eenheden
   in een kolom bedragen niet onder elkaar en is optellen met het oog
   onmogelijk. Dit staat al in `file.css` voor de cellen die als getal herkend
   zijn; hier komt de kop erbij, want een kolomletter is ook een teken dat
   niet hoort te dansen als je schuift. */
.ws .sheet__head,
.ws .sheet__num { font-variant-numeric: tabular-nums; }

/* Inzoomen maakt de cellen groter, niet het venster kleiner: de `zoom` staat
   op de tabel en het schuifvak eromheen houdt zijn maat. Zo blijven de
   kolomkoppen plakken aan een vak dat zelf niet geschaald is — met een
   `transform` op het vak plakken ze aan de verkeerde rand. */
.ws .sheet__table { zoom: var(--ws-zoom, 1); }

/* De twee stroken die je aan en uit kunt zetten.

   Rasterlijnen weg is niet hetzelfde als geen rand: de cel houdt zijn plek en
   zijn maat, alleen de lijn wordt onzichtbaar. `border-color: transparent` en
   niet `border: 0`, want dat tweede laat het hele raster een pixel per cel
   krimpen en dan verspringt alles onder je handen. */
.ws[data-raster="uit"] .sheet__cell { border-color: transparent; }

.ws[data-koppen="uit"] .sheet__head,
.ws[data-koppen="uit"] .sheet__corner,
.ws[data-koppen="uit"] .sheet__num { display: none; }

/* --------------------------------------------------------------------------
   Bladtabs en statusbalk

   Eén strook, en hij wikkelt. Het ontwerp legt hem op één regel en gaat ervan
   uit dat het venster minstens 1180 pixels breed is; wij hebben die
   ondergrens niet, en een strook die zijwaarts wegschuift zet de zoomknoppen
   buiten beeld.
   -------------------------------------------------------------------------- */

.ws-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex-shrink: 0;
  min-height: 40px;
  padding: 4px 18px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-page);
}

.ws-sheets {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.ws-sheets::-webkit-scrollbar { display: none; }

.ws-sheet {
  height: 26px;
  flex-shrink: 0;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  white-space: nowrap;
  cursor: pointer;
}

.ws-sheet:hover { background: var(--surface-hover); color: var(--text-primary); }
.ws-sheet:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.ws-sheet--on {
  border-color: var(--accent-soft-border);
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  font-weight: 600;
}

.ws-sheets__more { width: 26px; height: 26px; }
.ws-sheets__more svg { width: 15px; height: 15px; }

.ws-foot__spacer { flex: 1; min-width: var(--space-3); }

/* Wat er over de selectie te zeggen valt. Het is dezelfde regel die het raster
   in zijn eigen voet zet — het element is verhuisd, niet gekopieerd — dus de
   opmaak hier is alleen zijn plek in de strook. */
.ws-status {
  display: flex;
  align-items: center;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.ws-status .sheet__totals {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-status__slider {
  width: 96px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.ws-status__zoom {
  min-width: 46px;
  font-variant-numeric: tabular-nums;
}

/* Naast elkaar. `.wp-split` komt uit `word.css` en wordt gedeeld — het is
   dezelfde indeling — maar de regel die het linkerdeel smal laat worden noemt
   daar `.wp`. Het werkblad heet `.ws`, en zonder deze regel duwt het raster het
   voorbeeldpaneel eruit in plaats van zelf te schuiven. Precies de val uit
   `CLAUDE.md`: kijk waar een klasse nog meer staat voordat je hem hergebruikt. */
.wp-split > .ws { min-width: 0; }

/* Op een smal scherm past de statusregel niet naast de bladtabs. Hij wikkelt
   dan, en de tussenruimte die hem naar rechts duwde hoort dan niets meer te
   duwen — anders staat de tweede regel met een gat van honderden pixels
   ervoor. Een mediaquery meet het vénster; dit is een kolom die smal kan zijn
   terwijl het venster dat niet is, dus `@container`. */
.ws { container-type: inline-size; }

@container (max-width: 720px) {
  .ws-foot__spacer { flex-basis: 100%; min-width: 0; }
}

/* ==========================================================================
   Printen

   De schil is de applicatie en niet het bestand. `file.css` verstopt al wat er
   van de bestandspagina in de weg staat; het werkblad heeft zijn eigen namen,
   dus die staan hier. Dezelfde afspraak als in `word.css`, en om dezelfde
   reden: een `.xlsx` printen hoort het raster op te leveren en niet een lint
   met een raster eronder.
   ========================================================================== */

@media print {
  .ws .wp-title,
  .ws .wp-tabs,
  .ws .wp-ribbon,
  .ws-formula,
  .ws-foot,
  .wp-menu { display: none !important; }

  .page--sheet,
  .ws,
  .ws-work {
    display: block !important;
    height: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  /* De zoom is een kijkstand en geen eigenschap van het werkblad. Een blad dat
     op 150% staat hoort niet anderhalf keer zo groot uit de printer te komen —
     wat er op papier moet gebeuren staat op tabblad Pagina-indeling. */
  .ws .sheet__table { zoom: 1 !important; }
}