/*
 * Het werkscherm op de computer (ONTWERP.md §9, referentie Bureau.html).
 *
 * Eén codebase, één ontwerptaal, andere plaatsing. Alle kleuren, letters en
 * componenten uit §3 tot §5 blijven ongewijzigd; hier staat alleen waar iets
 * komt te staan.
 *
 * BREEKPUNT: onder 1024 punten de telefoonindeling, daarboven deze. Daartussen
 * niets halfslachtigs. Alles in dit bestand staat daarom binnen één media-query
 * en kan de telefoon niet raken.
 *
 * EEN AFWIJKING DIE JE MOET WETEN: de klassenamen zijn hier voorvoegsel
 * `bureau-`, terwijl Bureau.html ze `.nav`, `.list`, `.blk`, `.act` noemt. De
 * referentiebestanden zijn negen losstaande pagina's die elkaar niet kennen; de
 * app heeft één stijlblad. En `.nav` is op de telefoon de balk BOVENAAN van 56
 * punten hoog - zou die naam hier worden hergebruikt, dan zou de ene indeling de
 * andere stilzwijgend kapotmaken. De maten en kleuren zijn wel letterlijk
 * overgenomen.
 */

@media (min-width: 1024px) {
  /*
   * De telefoonkolom van 480 punten vervalt hier: vanaf dit punt is er een
   * getekende computerindeling en hoeft er niets meer terughoudend te worden
   * gedaan. Onder 1024 blijft de kolom staan, want daar is de telefoonindeling
   * de indeling en die hoort niet uitgerekt te worden.
   */
  .screen.bureau {
    max-width: none;
    width: 100%;
    height: 100dvh;
    padding-top: 0;
    flex-direction: row;
    overflow: hidden;
  }

  /* ---- Vaste navigatie links (244 punten) ------------------------------ */

  .bureau-zij {
    width: 244px;
    flex: 0 0 auto;
    background: var(--side);
    border-right: 1px solid var(--white-a06);
    display: flex;
    flex-direction: column;
    padding: 18px 12px 14px;
    /* Bij een kort venster mag de kolom zelf schuiven, niet de hele pagina. */
    overflow-y: auto;
  }

  .bureau-merk {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 8px 18px;
  }
  .bureau-merk img {
    width: 30px;
    height: 30px;
    border-radius: var(--r-mark);
  }
  .bureau-merknaam {
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.2em;
    color: var(--gold);
    font-weight: 700;
  }
  .bureau-merksub {
    font-size: calc(0.5625rem * var(--tekstschaal));
    letter-spacing: 0.14em;
    color: var(--ink-faint);
    margin-top: 3px;
  }

  /* Een bestemming. Let op: dit is NIET de .nav van de telefoon. */
  .bureau-nav {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: calc(0.84375rem * var(--tekstschaal));
    color: var(--muted);
    margin-bottom: 2px;
    /* Het is een knop, dus hij hoort zich als knop te gedragen. */
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
  }
  .bureau-nav.on {
    background: var(--gold-a14);
    color: var(--ink-nav);
    font-weight: 600;
  }
  .bureau-nav:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
  }

  /*
   * Het aantal achter de bestemming - hetzelfde getal dat op de telefoon op de
   * tegel staat (§9). Cijfers met vaste breedte, anders springt de rechterkant
   * bij elke verandering.
   */
  .bureau-cnt {
    margin-left: auto;
    font-size: var(--fs-eyebrow);
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
  }
  .bureau-nav.on .bureau-cnt {
    color: var(--gold-light);
  }
  .bureau-cnt.warn {
    color: var(--warn);
    font-weight: 700;
  }

  /*
   * Een aantal dat niet is opgehaald (§18.8). Een streepje, niet niets: een lege
   * plek leest als "er is er geen", en dat is iets anders dan "we weten het
   * niet". Zachter dan een echt getal, zodat het niet meetelt als informatie.
   */
  .bureau-cnt.onbekend {
    color: var(--muted-2);
    opacity: 0.6;
  }

  .bureau-groep {
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 700;
    padding: 16px 10px 7px;
  }

  /* Onderaan de ingelogde gebruiker met zijn rol. */
  .bureau-gebruiker {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--white-a05);
    /* K9 9.1: als knop erfde dit blok de native grijze browservulling. */
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    /* Het accountblok was afgeknipt (BOUWOPDRACHT-8 par. 6.3): de flexrij
       kneep de tekstkolom onder haar inhoud. min-width: 0 op de kolom plus
       nette afbreking houden het blok heel. */
    overflow: visible;
  }
  .bureau-gebruiker .groei-smal { min-width: 0; }
  .bureau-gebruiker-naam {
    font-size: var(--fs-support-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bureau-gebruiker-rol {
    font-size: var(--fs-tiny);
    color: var(--ink-dim);
  }

  /* ---- Rechterkant ----------------------------------------------------- */

  .bureau-hoofd {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Zonder dit duwt een lange lijstregel de hele indeling breder. */
    min-width: 0;
  }

  /* ---- Balk bovenaan (62 punten) --------------------------------------- */

  .bureau-top {
    height: 62px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 var(--pad-x);
    border-bottom: 1px solid var(--white-a06);
  }

  .bureau-schermtitel {
    font-size: var(--fs-cardhead);
    font-weight: 600;
  }

  .bureau-zoek {
    flex: 1;
    max-width: 420px;
    height: 36px;
    border-radius: 10px;
    background: var(--white-a04);
    border: 1px solid var(--white-a07);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    font-size: var(--fs-support);
    color: var(--muted-2);
  }
  /* Het echte invoerveld erin: geen eigen rand, die zit op de omhulling. */
  .bureau-zoek input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    outline: none;
  }
  .bureau-zoek input::placeholder {
    color: var(--muted-2);
  }
  .bureau-zoek:focus-within {
    border-color: var(--gold-a35);
  }

  /* De sneltoets staat er niet als versiering: hij werkt ook echt (§9). */
  .kbd {
    margin-left: auto;
    font-size: calc(0.625rem * var(--tekstschaal));
    color: var(--ink-dim);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 5px;
    padding: 2px 6px;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .bureau-acties {
    display: flex;
    gap: 9px;
    margin-left: auto;
  }

  .btn-sm {
    height: 36px;
    padding: 0 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(0.84375rem * var(--tekstschaal));
    font-weight: 600;
    border: 0;
    font-family: inherit;
    cursor: pointer;
  }

  /* Een rustige knop: alleen een rand, geen vlak. */
  .bureau-act {
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--white-a07);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-support-sm);
    color: var(--ink-act);
    font-family: inherit;
    cursor: pointer;
  }

  /* ---- Lijst en detail naast elkaar ------------------------------------ */

  .bureau-vlakken {
    flex: 1;
    display: flex;
    min-height: 0;
  }

  .bureau-lijst {
    width: 388px;
    flex: 0 0 auto;
    border-right: 1px solid var(--white-a06);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .bureau-lijst-filter {
    padding: 12px 16px;
    border-bottom: 1px solid var(--white-a06);
    flex: 0 0 auto;
  }

  .bureau-lijst-regels {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  .bureau-regel {
    display: flex;
    align-items: center;
    gap: var(--gap-row);
    padding: 11px 16px;
    border-bottom: 1px solid var(--white-a04);
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    background: none;
    font-family: inherit;
    /*
     * Ook de regelhoogte overnemen. Een <button> erft die NIET van de pagina: de
     * browser zet er `normal` op (rond 1.2) in plaats van de 1.45 van §4. Dat
     * scheelt precies 3 punten per lijstregel, en dat is niet zichtbaar tot je
     * het naast de referentie legt.
     */
    line-height: var(--lh-body);
    text-align: left;
    color: inherit;
    cursor: pointer;
  }

  /*
   * De geselecteerde regel: een gouden streep van 3 punten links plus een lichte
   * verloopvulling (§9). De streep is een inset-schaduw en geen rand, zodat de
   * regel niet 3 punten opschuift zodra je hem aanklikt.
   */
  .bureau-regel.on {
    background: linear-gradient(90deg, rgba(180, 142, 71, 0.16), rgba(180, 142, 71, 0.04));
    box-shadow: inset 3px 0 0 var(--gold);
  }
  .bureau-regel:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
  }

  .bureau-ini {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--gold-a13);
    border: 1px solid var(--gold-a26);
    color: var(--gold-light);
    font-size: var(--fs-meta);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  /* Rond en kleiner: bij een persoon in plaats van een bedrijf. */
  .bureau-ini.rond {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: var(--fs-tiny);
  }

  .bureau-regel-naam {
    font-size: var(--fs-body-sm);
    font-weight: 500;
    letter-spacing: var(--ls-tight);
  }
  .bureau-regel-sub {
    font-size: var(--fs-meta);
    color: var(--muted-2);
    margin-top: 2px;
  }
  /*
   * Rechts de eigenaar met de laatste activiteit. Een relatie zonder eigenaar
   * toont hier oranje "geen eigenaar" - zo zie je in één blik wat blijft liggen.
   */
  .bureau-regel-meta {
    margin-left: auto;
    text-align: right;
    font-size: var(--fs-tiny);
    color: var(--ink-dim);
    flex: 0 0 auto;
  }
  .bureau-regel-meta.geen-eigenaar {
    color: var(--warn);
  }

  .bureau-detail {
    flex: 1;
    min-width: 0;
    padding: 22px 26px;
    overflow-y: auto;
  }

  .bureau-detail-kop {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  .bureau-detail-naam {
    font-size: calc(1.6875rem * var(--tekstschaal));
    line-height: 1.1;
    letter-spacing: var(--ls-title);
  }
  .bureau-detail-sub {
    font-size: var(--fs-support);
    margin-top: 5px;
  }

  /* Links waar je in werkt, rechts een smalle kolom met wat vaststaat. */
  .bureau-raster {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 22px;
    margin-top: 20px;
  }

  .bureau-blok {
    padding: 14px 15px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--white-a06);
    margin-bottom: 12px;
  }

  .bureau-kv {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-support);
    padding: 5px 0;
  }
  .bureau-kv > span:first-child {
    color: var(--muted-2);
  }

  /* Op de computer is er geen terugknop: je klikt de volgende regel aan. */
  .bureau-hoofd .back,
  .bureau-hoofd .fab {
    display: none;
  }
}

/*
 * Onder het breekpunt bestaat de computerindeling niet. Wordt het bureauscherm
 * toch getekend op een smal venster, dan is het beter dat er niets staat dan een
 * halve zijbalk over de telefooninhoud heen.
 */
@media (max-width: 1023px) {
  .bureau-zij,
  .bureau-top,
  .bureau-vlakken {
    display: none;
  }
}

@media (min-width: 1024px) {
  /* ---- Het beginscherm op de computer (BureauStart.html) ---------------- */

  .bureau-kolommen {
    flex: 1;
    display: flex;
    gap: 26px;
    padding: 22px 24px;
    min-height: 0;
    overflow-y: auto;
  }

  .bureau-links { flex: 1; min-width: 0; }
  .bureau-rechts { width: 392px; flex: 0 0 auto; }

  /* De eventkaart rechts: groter dan de regel op de telefoon, want hier is
     ruimte en is hij geen regel maar een kaart. */
  .ev {
    position: relative;
    padding: 16px;
    border: 1px solid var(--gold-a30);
    border-radius: var(--r-card);
    overflow: hidden;
    margin-bottom: 14px;
    background: radial-gradient(120% 130% at 100% 0%, var(--gold-a18), rgba(180, 142, 71, 0) 62%), var(--surface);
  }
  .ev-wapen {
    position: absolute;
    right: -26px;
    top: -26px;
    width: 126px;
    opacity: 0.14;
    mix-blend-mode: screen;
    pointer-events: none;
  }
  .ev-naam {
    font-size: calc(1.5rem * var(--tekstschaal));
    margin-top: 11px;
    line-height: 1.1;
    position: relative;
    z-index: 1;
  }
  .ev-balk { margin-top: 14px; height: 5px; border-radius: 3px; position: relative; z-index: 1; }
  .ev-voet {
    font-size: var(--fs-meta);
    color: var(--muted);
    margin-top: 9px;
    position: relative;
    z-index: 1;
  }
  .ev-voet b { color: var(--ink); font-weight: 600; }

  /* De captiontegel: op de computer even schreefloos en zonder wapen. */
  .bureau-rechts .captie {
    padding: 16px;
    border-radius: var(--r-card);
    background: radial-gradient(130% 130% at 0% 100%, var(--gold-a16), rgba(180, 142, 71, 0) 65%), var(--surface);
    border: 1px solid var(--white-a07);
  }


  /* ---- Het gebied naast de zijbalk ------------------------------------- */

  /*
   * WAT ER NAAST DE ZIJBALK STAAT (§9, blok B punt 3).
   *
   * De zijbalk is de schil en staat op elk scherm; hier verandert alleen wat
   * ernaast staat. Een scherm met een eigen computerindeling vult dit gebied met
   * twee kolommen of met lijst-naast-detail. Een scherm dat die nog niet heeft,
   * zet zijn telefooninhoud in `.bureau-kolom`.
   */
  .bureau-gebied {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  /*
   * Een telefoonscherm in een computerschil, zolang dat scherm nog geen eigen
   * indeling heeft. Uitgerekt tot 1200 punten zou het onleesbaar maken - een
   * regel tekst van een meter breed leest niemand - dus staat het in een kolom
   * van dezelfde breedte als op een telefoon, links uitgelijnd zodat het bij de
   * zijbalk hoort en niet in het midden zweeft.
   */
  .bureau-kolom {
    max-width: 520px;
    padding: 4px 0 40px;
  }

  /*
   * Inzicht op de computer (M14.16, AUDIT-2): de blokken naast elkaar in twee
   * kolommen in plaats van de ene telefoonkolom. De eerste strook (periode,
   * knoppen, peildatum) blijft over de volle breedte; elk blok blijft heel
   * (break-inside), want een half blok per kolom leest niemand.
   */
  .bureau-inzicht {
    max-width: 1080px;
    padding: 4px 0 40px;
  }

  /*
   * De agenda op de computer (M10.15, AUDIT-5): de week-, dag- en
   * maandrasters dragen minmax-kolommen en rekken zelf mee; ze hadden
   * alleen de ruimte nog niet.
   */
  .bureau-agenda {
    max-width: 1200px;
    padding: 4px 0 40px;
  }

  /*
   * Het register op de computer (AUDIT-7): een tabel met zeven kolommen
   * kreeg 520 punten; dezelfde grond als de agenda en Inzicht.
   */
  .bureau-register {
    max-width: 1200px;
    padding: 4px 0 40px;
  }
  /*
   * Sinds het dashboard van AANVULLING-22 par. 7 zijn het tegels: op de
   * computer vullen ze een raster van vier, de secties blijven onder
   * elkaar. De kolommenverdeling van AUDIT-2 hoorde bij de oude blokken.
   */
  .bureau-inzicht .inzicht-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  /*
   * De eigen titelbalk van het scherm vervalt hier: de bovenbalk draagt de titel
   * al, en twee titels boven elkaar is precies de dubbele kop die §5 verbiedt.
   * De terugknop staat in de bovenbalk.
   *
   * Op BREEDTE en niet op de klasse `.bureau`, om dezelfde reden als de tabbalk
   * hieronder: een regel die uit JavaScript komt kan achterlopen, deze niet.
   */
  .bureau-gebied .nav { display: none; }

  /* De schuifruimte van de telefoon is hier het gebied zelf. */
  .bureau-gebied .scroll { overflow: visible; }
  /* AANVULLING-30 §1: .onderruimte bestaat niet meer, dus deze override ook niet. */

  /*
   * De ENE terugknop (AANVULLING-32 §2, §18.60) in de bovenbalk. Zelfde knop en
   * zelfde code als op de telefoon, maar hier BINNEN de balk in plaats van tegen
   * de schermrand: een gewone ronding en geen aanraakvlak dat buiten de balk
   * steekt. §9 wil hem er uiteindelijk niet - je klikt de volgende regel in de
   * lijst aan - maar die lijsten bestaan nog niet, en een scherm zonder uitgang
   * is erger dan een knop die er straks weer uitgaat.
   */
  .bureau-top .terugknop {
    height: 34px;
    padding: 0 12px;
    gap: 6px;
    border-radius: 17px;
    border: 1px solid var(--white-a10);
    border-left: 1px solid var(--white-a10);
    flex: 0 0 auto;
  }
  .bureau-top .terugknop::after {
    /* Het telefoon-aanraakvlak dat tot buiten de linkerrand loopt hoort niet in
       de bovenbalk; hier is de knop gewoon zo groot als hij lijkt. */
    display: none;
  }

  /*
   * De terugstrook van de telefoon vervalt hier: de terugknop staat in de
   * bovenbalk, en twee terugknoppen op één scherm is er één te veel.
   */
  .schilkop { display: none; }

  /*
   * Op de computer is er geen tabbalk: de zijbalk is de navigatie.
   *
   * Op BREEDTE en niet op de klasse `.bureau` - die komt uit JavaScript en kan
   * achterlopen als een gebeurtenis niet vuurt. Deze regel kan dat niet.
   */
  .tabs { display: none !important; }
}

/* ---- De schil onder het breekpunt --------------------------------------- */

/*
 * DE SCHIL STAAT ALTIJD IN DE DOM; hier wordt hij onzichtbaar gemaakt.
 *
 * De zijbalk en de bovenbalk horen bij de computerindeling en verdwijnen. De
 * dragers ertussen - `.bureau-hoofd`, `.bureau-gebied`, `.bureau-kolom` - gaan
 * op `display: contents`, waardoor ze uit de opmaak verdwijnen en de inhoud van
 * het scherm rechtstreeks in `.screen` valt. Precies zoals voordat er een schil
 * was.
 *
 * Waarom niet met JavaScript beslissen welke van de twee je tekent: dat is hier
 * geprobeerd en het ging mis. De keuze hing aan een mediaquery, een resize en
 * een ResizeObserver, en in de proefomgeving vuurde geen van drieën - dan staat
 * de zijbalk van de computer om de kolom van de telefoon. Een CSS-regel kan niet
 * achterlopen op zichzelf.
 */
@media (max-width: 1023px) {
  .bureau-zij,
  .bureau-top { display: none; }

  .bureau-hoofd,
  .bureau-gebied,
  .bureau-kolom { display: contents; }
}

/* ---- Het beginscherm op de computer (AANVULLING-12) --------------------- */

@media (min-width: 1024px) {
  .bs-cijfers {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--gap-tile);
    padding: 0 var(--pad-x);
    margin-top: 14px;
  }
}
@media (max-width: 1023px) {
  /* Op de telefoon bestaan de negen vakken niet; het beginscherm daar is de
     aandachtslijst van §17. Ze worden daar ook niet opgehaald. */
  .bs-cijfers { display: none; }
}

.bs-cijfer {
  background: var(--surface);
  border: 1px solid var(--white-a06);
  border-radius: var(--r-tile);
  padding: 12px 14px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bs-cijfer.bs-grijs { opacity: 0.55; cursor: default; }
.bs-getal { font-size: calc(1.75rem * var(--tekstschaal)); line-height: 1; }
.bs-oranje { color: var(--warn); }
.bs-regel { font-size: var(--fs-meta); color: var(--muted-2); }

.bs-activiteit { padding: 6px 0; font-size: var(--fs-support); border-bottom: 1px solid var(--white-a04); }

.bs-fasen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.bs-fase {
  flex: 1;
  min-width: 96px;
  background: var(--surface);
  border: 1px solid var(--white-a06);
  border-radius: var(--r-tile);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bs-fase-getal { font-size: calc(1.375rem * var(--tekstschaal)); line-height: 1; }
.bs-fase-naam { font-size: var(--fs-meta); color: var(--muted-2); }

.bs-voorraad { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: var(--fs-support); }
.bs-voorraad-naam { width: 90px; flex: 0 0 auto; }
.bs-voorraad-stand { white-space: nowrap; }

/* De caption rechtsonder in de hoek (§9): klein en rustig. */
.bs-captie { margin-top: 18px; text-align: right; }

/* Het logo is een knop naar het beginscherm (BOUWOPDRACHT-8 par. 6.3). */
button.bureau-merk {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
button.bureau-merk:hover .bureau-merknaam { color: var(--gold); }

/*
 * De brede jas voor lijst- en tabelschermen zonder eigen bureau-indeling
 * (ronde 12 punt 6b). De telefoonkolom van 520 punten is voor schermen die
 * echt een leeslijst zijn; een offerteoverzicht met zes knoppen per regel,
 * een tarieventabel of een tekstregister stond daar als een smal strookje
 * met de rest van het scherm zwart ernaast. Zelfde grond als
 * .bureau-inzicht en .bureau-register.
 */
@media (min-width: 1024px) {
  .bureau-breed {
    max-width: 960px;
    padding: 4px 0 40px;
  }
}