/* App-specifieke compositie. Alle UI-primitieven komen uit Poolster UI. */ .logout-form { margin: 0; } .admin-page { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: var(--sp-6) 0 48px; } .admin-page > .section-block { margin-bottom: var(--sp-5); } .admin-shell { display: flex; gap: var(--sp-6); align-items: flex-start; } .admin-content { flex: 1; min-width: 0; } .admin-panel { min-height: 250px; } .single-column { grid-template-columns: minmax(240px, 360px); } .tile-action { color: var(--color-text-muted); font-size: 11px; } /* Zelfde vorm als qr-codes.css' .qr-form — hier apart gehouden omdat die stylesheet niet op deze pagina laadt (geen kruisverwijzing tussen app-features). */ .form-stack { display: flex; flex-direction: column; gap: var(--sp-4); } /* Dashboard's boek-context (herziening 2026-08-17): letterlijk dezelfde .qr-cover/.qr-cover-fallback-vorm als qr-codes.css, hier apart gehouden om dezelfde reden als .schrijven-shell hierboven — geen kruisverwijzing tussen app-features. Positionering/breedte van `.dashboard-book-context` zelf staat verderop bij `.dashboard-trend-row` (3e herziening). */ .qr-cover { border-radius: var(--radius-md); border: 1px solid var(--color-border); min-height: 120px; max-height: 420px; display: flex; align-items: center; justify-content: center; background: var(--color-surface-alt); padding: var(--sp-2); } .qr-cover img { max-width: 100%; max-height: 420px; width: auto; height: auto; object-fit: contain; display: block; } .qr-cover-fallback { color: var(--color-text-muted); aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; width: 100%; } button.qr-cover { width: 100%; cursor: pointer; text-align: left; appearance: none; -webkit-appearance: none; } .field-readonly { margin: 0; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-alt); color: var(--color-text-muted); font-size: 14px; } @media (max-width: 760px) { .admin-page { width: min(100% - 24px, 1240px); padding-top: var(--sp-4); } .admin-shell { display: block; } .admin-shell > .side-nav { margin-bottom: var(--sp-5); } } /* Dashboard (S07-dashboard v1, "Opkuis dashboard"-iteratie). Info-knoppen op de kerncijfer-tegels gebruiken bewust NIET .tile-info (position:absolute t.o.v. een position:relative-ouder, → R-003) — een gewone .stat-tile draagt dat niet (enkel de -success/-danger-varianten doen dat), en dat bijstellen zou .stat-tile zelf herdefiniëren, wat tests/admin-app.php's "app-CSS overschrijft geen Poolster-primitief" controle terecht blokkeert. .info-btn (zonder .tile-info) is zelf al position:relative; .stat-label is al display:flex (ui-elements.css), dus inline naast het label plaatsen volstaat zonder extra CSS. */ /* .field is display:flex (ui-elements.css) — an author rule always beats the UA-stylesheet [hidden]{display:none} default regardless of specificity, so the bare `hidden` attribute on a .field div renders as flex, not hidden. Same bug, same fix boeken.css already applied (.boeken-form [data-new-field][hidden]) — a compound selector so THIS author rule wins over .field's plain one. */ #dashboard .field[hidden] { display: none; } .dashboard-caption { color: var(--color-text-muted); font-size: 13px; margin: -6px 0 var(--sp-4); } /* Rik-feedback (2026-08-17, 2e ronde): Granulariteit+Periode ("Tijdvenster") scopen de VOLLEDIGE pagina (context-selectie + Kerncijfers + grafiek + tabel) — de linkerkolom omvat nu letterlijk de rest van de pagina i.p.v. nog een los veldenrijtje ernaast, zodat dat vanzelf duidelijk is (geen "geldt voor de hele pagina"-tekst meer nodig). Zelfde grid/sticky-vorm als .schrijven-shell/.schrijven-context hierboven (bewust hergebruikt). De granulariteit-/periodekeuze zelf zijn sinds poolster-lib v1.35 echte /-elementen (was hier lokaal handgebouwd, nu gepromoveerd naar de lib op Rik se vraag). */ .dashboard-body { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-6); align-items: start; } .dashboard-scope-col { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); position: sticky; top: var(--sp-4); } .dashboard-scope-label { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); } .dashboard-scope-col .segmented { flex-wrap: wrap; align-self: stretch; } .dashboard-scope-col .seg-btn { flex: 1 1 auto; text-align: center; } .dashboard-main-col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; } .dashboard-main-col > .section-block { margin-bottom: 0; } .dashboard-filter-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; } @media (max-width: 760px) { .dashboard-body { grid-template-columns: 1fr; } .dashboard-scope-col { position: static; } } /* Rik-feedback (2026-08-17): "Scans per boek/uitgave/muzieknummer" (nu "Aantal scans per muzieknummer") verhuist terug ONDER "Scans over tijd" — maar de trendgrafiek mag niet breder worden dan toen ze naast de tabel stond. Zelfde breedte (helft van de beschikbare kolom min de helft van de gap), nu bereikt via max-width i.p.v. een grid met een tweede, lege kolom — % in calc() volgt automatisch de (nu smallere) rechterkolom. */ .dashboard-trend-block { max-width: calc((100% - var(--sp-5)) / 2); } /* Rik-feedback (2026-08-17, 3e ronde): boek-context (pills + cover) verhuisd naar de ruimte rechts van "Scans over tijd" — precies de helft die .dashboard-trend-block hierboven al vrijhield. .dashboard-trend-row is de flex-rij die beide naast elkaar houdt; .dashboard-book-context zelf blijft een verticale stapel (pills boven cover), nu enkel breder dan de vorige 220px-kolom, wat de pill-tekst genoeg ruimte geeft om niet meer af te breken tot "B…"/"Ve…" (→ .chip-scope, poolster-lib, ongewijzigd: de bug zat in de te krappe kolom, niet in het element). */ .dashboard-trend-row { display: flex; gap: var(--sp-5); align-items: flex-start; } .dashboard-trend-row .dashboard-trend-block { flex: 1 1 auto; } /* Rik-feedback (2026-08-17, 4e ronde): cover links, pills rechts ernaast (was: pills boven, cover eronder) — .dashboard-book-context wordt dus een rij i.p.v. een kolom; .dashboard-book-pills is de nieuwe verticale stapel voor de drie pills. Cover 30% kleiner in zowel breedte als hoogte: 182px (was ~260px breed door de vroegere `button.qr-cover{width:100%}` in een 260px-kolom) en 84–294px min/max-height (was 120–420px, → .qr-cover hierboven) — enkel voor DEZE cover, gescoped op #dashboard-cover-btn zodat qr-codes.css' eigen .qr-cover (edit-qr-code/qr-codes-lijst) ongemoeid blijft. */ .dashboard-book-context { flex: 0 1 380px; display: flex; align-items: flex-start; gap: var(--sp-3); } /* Rik-melding (2026-08-17): "Alle boeken" toonde de boek-context toch nog. dashboard.js zet `hidden` wel correct (updateFilterVisibility()), maar `.dashboard-book-context`'s eigen `display: flex` hierboven is een auteursregel met dezelfde specificiteit als het `[hidden]`-attribuut, en wint dus altijd van de browser se standaard `[hidden]{display:none}` — zelfde bug, zelfde fix als `#dashboard .field[hidden]` verderop. */ .dashboard-book-context[hidden] { display: none; } /* Zelfde specificiteitsbug, zelfde fix, voor de individuele Editie-/ Versie-pill: .chip-scope (poolster-lib) is ook `display: inline-flex`, dus ook zij negeren `hidden` zonder deze override. Bewust hier en niet in poolster-lib zelf gepatcht — zelfde consumer-side aanpak als `#dashboard .field[hidden]` hieronder. */ #dashboard-book-context .chip-scope[hidden] { display: none; } .dashboard-book-pills { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; flex: 1 1 auto; } #dashboard-cover-btn { flex: none; width: 182px; min-height: 84px; max-height: 294px; } #dashboard-cover-btn img { max-height: 294px; } @media (max-width: 1000px) { .dashboard-trend-block { max-width: none; } .dashboard-trend-row { flex-direction: column; } .dashboard-book-context { flex-basis: auto; width: 100%; } } .dashboard-byqr-filters { display: flex; gap: var(--sp-4); flex-wrap: wrap; } .dashboard-byqr-filters .field { min-width: 200px; } /* Schrijven (S13, "merge old admin") — zelfde shell/context-vorm als qr-codes.css' .qr-codes-shell/.qr-codes-context, hier apart gehouden omdat qr-codes.css niet op deze pagina laadt (geen kruisverwijzing tussen app-features, zelfde afspraak als .form-stack hierboven). */ .schrijven-shell { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-6); align-items: start; } /* .app-shell/.drawer/.drawer-rail zijn gedeelde poolster-lib-CSS (base.css) — .page-wrap vult hier de resterende flex-ruimte naast de boek-drawer, → S02-boek selector inhaking (Rik 2026-08-17). #schrijven is nu ZELF .app-shell (i.p.v. .page-wrap.admin-page erbinnen te nesten, de eerste poging) — anders bleef .admin-page's eigen max-width:1240px de drawer/rail confineren tot binnen die gecentreerde kolom i.p.v. tot de echte paginarand (Rik-melding: "drawer staat niet helemaal rechts"). */ /* flex-grow:0, NIET 1 (2026-08-17, Rik-melding: Schrijven-titel spande de volle breedte, ongecentreerd) — flex-grow:1 negeert .admin-page's eigen width:min(1240px,...) volledig (flex-grow overschrijft `width`, wél nog `max-width`). QR-codes zag dit niet omdat .qr-codes-page daar een eigen max-width zet (dat flex-grow wél respecteert); .admin-page alleen had die clamp niet. flex-grow:0 laat .page-wrap zijn EIGEN width/margin:auto weer bepalen — het centreert zich dan correct binnen wat er naast de drawer overblijft, i.p.v. die hele resterende ruimte te vullen. */ .app-shell > .page-wrap { flex: 0 1 auto; min-width: 0; } /* Boek-drawer-triggers: chip-scope-knoppen resetten enkel de