/* ============================================================ Broer Outdoor -- voorraadsysteem webUI Statische HTML/CSS-verkenning, los van de Streamlit-app. Zelfde kleurenpalet als .streamlit/config.toml, verder geen afhankelijkheden -- systeemlettertype, geen externe fonts/iconen. ============================================================ */ :root { /* Basispalet -- #2B1810 is Broer Outdoor's eigen hoofdkleur, de rest van de ladder is daaromheen opgebouwd (elke stap zowel lichter als iets warmer/verzadigder, anders verdampt bruin naar grijs zodra je 'm oplicht -- een klassieke fout). Contrast per stap doorgerekend (WCAG-relatieve-luminantie), niet op het oog geschat. */ --accent: #E07B39; --accent-hover: #EF8F4F; --accent-soft: #E07B3922; --secondary: #A3975A; --tertiary: #8A9297; --bg: #2B1810; --bg-gradient: radial-gradient(circle at 15% 0%, #3A2417 0%, #2B1810 55%, #1F1209 100%); --surface: #3F2818; --surface-hover: #593C24; --surface-raised: #4C331F; --border: #7D5C3C; --border-soft: #6B4E30; /* Warme hover-rand voor interactieve elementen (knoppen/velden) -- was --tertiary (een kille blauwgrijze), wat precies de "dit hoort er niet bij"-grijsheid gaf die opviel. --tertiary blijft bestaan puur als tweede grafiekkleur (vergelijkingsreeksen). */ --border-hover: #9C6E3E; /* Tekstvakken/dropdowns iets lichter dan de kaart eromheen, zodat ze zich duidelijk als 'hier kun je iets doen' aftekenen i.p.v. te verdwijnen in de achtergrond. */ --input-bg: #63472C; --input-border: #7D5C3C; --text: #FAF9F7; --text-muted: #D2C3B2; --text-faint: #A5988A; --good: #7FA363; --warn: #D9A441; --info: #7E9FB0; /* Derde accent: de enige koele kleur in een verder helemaal warm palet (oranje, olijf, amber). Ligt tegenover het oranje in het kleurenwiel, dus het contrasteert zonder te vloeken. */ --accent-2: #4F7C74; /* Kleur van de ring om een KPI-getal. Als losse variabele zodat de hele look in EEN regel om kan: var(--accent) voor oranje, var(--accent-2) voor teal. */ --kpi-ring: var(--accent-2); /* Vrijwel rechte hoeken: net genoeg afronding om niet hard aan te voelen, niet genoeg om als 'rond' te lezen. Drie maten blijven bestaan zodat de verhouding klopt als het ooit weer ronder mag -- dan hoeft alleen dit blok om, niet de honderd plekken die ernaar verwijzen. LET OP: dit raakt alleen HOEKEN. Echte ronde VORMEN (de ring om een KPI-getal, statuspillen, voortgangsbalkjes) staan los op 999px of 50% en horen rond te blijven. */ --radius-sm: 2px; --radius-md: 2px; --radius-lg: 3px; --shadow-card: 0 1px 2px #0000002e, 0 4px 14px -8px #00000055; --shadow-pop: 0 12px 32px -8px #000000aa; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* Vertelt de browser dat DEZE pagina donker is, ook voor de dingen die CSS niet kan herstijlen: het pop-up-lijstje van een -lijstje te hoeven openen (dat valt niet in de huisstijl te stylen). */ .config-islands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .island { font-family: var(--font); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-raised); color: var(--text-muted); cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; } .island:hover { border-color: var(--border-hover); color: var(--text); } .island.active { background: var(--accent-soft); border-color: #E07B3944; color: var(--accent-hover); font-weight: 700; } .toolbar .actions { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } /* Buttons */ .btn { font-family: var(--font); font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--surface); color: var(--text); cursor: pointer; text-align: left; white-space: nowrap; transition: background .12s ease, border-color .12s ease, transform .05s ease; } .btn:hover { background: var(--surface-hover); border-color: var(--border-hover); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.42; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #201007; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); padding: 9px 10px; } .btn-ghost:hover { background: var(--surface); color: var(--text); } .btn-sm { padding: 6px 12px; font-size: 12.5px; } .btn-block { width: 100%; } .caption { font-size: 12.5px; color: var(--text-faint); margin: 0; } .caption.hint { padding: 9px 2px 0; } /* Channel group */ .channel-group { margin-bottom: 28px; } .channel-heading { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .channel-heading h2 { font-size: 16px; margin: 0; font-weight: 700; } .channel-heading .count { font-size: 12.5px; color: var(--text-faint); font-weight: 500; } /* Order card */ .order-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 18px 20px; margin-bottom: 14px; } .order-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; } .order-ref-btn { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; font-size: 14.5px; } .order-ref-btn:hover .order-ref { color: var(--accent-hover); text-decoration: underline; } /* .order-ref is nu een (naar de bestel-detailpagina), niet meer een kale -- text-decoration:none hier weerlegt de standaard link-onderstreping die de browser er anders op zet; de onderstreping komt terug bij :hover hierboven, precies zoals de rest van deze pagina links doet. */ .order-ref { font-weight: 700; color: var(--text); text-decoration: none; } .order-customer { color: var(--text-muted); font-weight: 500; } /* Klikbaar bestelnummer in tabellen (Verwerkt, Retouren) -> bestel-detailpagina. */ a.bestelling-link { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; } a.bestelling-link:hover { text-decoration: underline; } .chevron { color: var(--text-faint); font-size: 12px; } .order-meta { text-align: right; flex-shrink: 0; } .order-meta .datetime { font-size: 12px; color: var(--text-faint); } .status-pill { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; margin-left: 6px; text-transform: uppercase; } .status-pill.unfulfilled, .status-pill.open { background: #D9A44122; color: var(--warn); } .status-pill.paid { background: #7FA36322; color: var(--good); } .status-pill.info { background: #7E9FB022; color: var(--info); } .status-pill.neutral { background: var(--surface-raised); color: var(--text-faint); } /* Blijft zichtbaar bovenaan de viewport bij scrollen -- voor een filter-/actiebalk boven een lange lijst, zodat je niet terug hoeft te scrollen om 'm te finetunen. Eigen achtergrond nodig (niet transparant), anders schemert de content erachter doorheen zodra 'm los van de pagina komt te 'zweven'. */ .sticky-bar { position: sticky; top: 0; z-index: 5; /* Effen kleur, bewust GEEN background-image hier -- de gradient schaalt op de eigen (kleine) box van dit element en zou dus nooit aansluiten op de veel grotere, vast-op-de-viewport gezette -gradient erachter. */ background: var(--bg); padding-top: 10px; margin-top: -10px; } .order-toggles { display: flex; align-items: center; gap: 16px; margin-top: 8px; justify-content: flex-end; } .dropship-toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); } .dropship-toggle input { accent-color: var(--accent); } .order-select-toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; } .order-select-toggle input { accent-color: var(--accent); cursor: pointer; } /* Line items */ .line-item { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border-soft); } .line-item:first-of-type { border-top: none; } .line-thumb { width: 42px; height: 42px; border-radius: var(--radius-sm); background: #ffffff0f; display: grid; place-items: center; overflow: hidden; font-size: 10px; color: var(--text-faint); } .line-thumb img { width: 100%; height: 100%; object-fit: contain; } .line-title-btn { all: unset; cursor: pointer; font-size: 14px; color: var(--text); text-align: left; display: block; } .line-title-btn:hover { color: var(--accent-hover); text-decoration: underline; } .line-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; } .line-right { display: flex; align-items: center; gap: 14px; } .qty { font-weight: 700; font-size: 13.5px; min-width: 26px; text-align: right; } .qty.multi { color: var(--accent); } .select, .input { font-family: var(--font); font-size: 13px; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 7px 10px; box-sizing: border-box; transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; } .select:hover, .input:hover { border-color: var(--border-hover); } .select:focus, .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .select:disabled, .input:disabled { opacity: .55; cursor: not-allowed; } .input::placeholder { color: var(--text-faint); } .select { cursor: pointer; } /* Checkboxen/radioknoppen overal in de app -- zonder dit was dit het felblauwe systeem-vinkje op een wit vlak i.p.v. de huisstijl. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; } /* .field is the standard label+control wrapper used across the site's forms (filters, add-forms, grids) -- min-width:0 so it can actually shrink inside a flex/grid row instead of forcing the whole row to overflow, and its input/select fills the field instead of sizing to its own content (which was the root cause of several "field pokes out of its box" layout bugs). A bare .select/.input OUTSIDE a .field (e.g. the per-line pick-dropdown on an order card) keeps sizing to its content, unchanged. */ .field { min-width: 0; } .field .select, .field .input { width: 100%; min-width: 0; } .order-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--text-muted); } .order-footer b { color: var(--text); } /* Shipping block */ .ship-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); } .ship-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; } .ship-note { font-size: 12.5px; color: var(--text-faint); margin: 6px 0 10px; } .ship-note.warn { color: var(--warn); } .saved-note { font-size: 12.5px; color: var(--good); margin-top: 8px; } /* Tracking block (dropship) */ .tracking-row { display: grid; grid-template-columns: 160px 1fr auto auto; gap: 10px; align-items: center; } .checkbox-inline { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; } .checkbox-inline input { accent-color: var(--accent); } /* ---------------- Mobiel menu (uitschuifbaar vanaf links) ---------------- */ /* .menu-toggle/.sidebar-backdrop bestaan altijd in de DOM (via _sidebar.html, op elke pagina) maar zijn alleen zichtbaar/actief onder de 880px-breakpoint hieronder -- op desktop blijft de zijbalk gewoon altijd-zichtbaar zoals nu. */ .menu-toggle { display: none; } /* ---------------- Prestaties (dashboard) ---------------- */ .period-bar { display: flex; align-items: flex-end; gap: 22px; margin-bottom: 22px; flex-wrap: wrap; } .period-bar .field { min-width: 240px; } /* Was ooit .period-bar .toggle-field -- nu een losstaande, herbruikbare klasse (staat inmiddels ook buiten .period-bar, bv. Overzicht > Problemen), anders werkt de flex-uitlijning daar niet. */ .toggle-field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); } .period-bar .toggle-field { padding-bottom: 9px; } .switch { position: relative; width: 34px; height: 19px; flex-shrink: 0; border-radius: 999px; background: var(--surface-raised); border: 1px solid var(--border-soft); cursor: pointer; } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--text-faint); transition: transform .15s ease, background .15s ease; } .switch.on { background: var(--accent-soft); border-color: var(--accent); } .switch.on::after { transform: translateX(15px); background: var(--accent); } .period-range { font-size: 12.5px; color: var(--text-faint); margin: 0 0 22px; } .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 30px; } /* Voor KPI-rijen met minder dan 5 kaarten (bv. 4 op Bestellingen/ Voorraad) -- een losse modifier-klasse i.p.v. een inline style, want een inline style wint altijd van de mobiele media-query hieronder en zou 'm daar dus vastzetten op 4 kolommen. */ .kpi-row.kpi-row-4 { grid-template-columns: repeat(4, 1fr); } .kpi-row.kpi-row-3 { grid-template-columns: repeat(3, 1fr); max-width: 680px; } .kpi-card { /* Tellerkaart: het getal in een ring, label eronder. De HTML zet het label eerst -- die volgorde wordt hier met 'order' omgedraaid, zodat geen enkel sjabloon aangepast hoefde te worden. Bewust een RUSTIGE kaart met alleen de ring in het accentkleur. Een volledig oranje vlak werkte op een half scherm nog, maar werd op een breed scherm (waar .main geen maximumbreedte heeft en de kaarten dus flink uitrekken) en op mobiel een lap kleur. Het accent hoort het getal aan te wijzen, niet de hele kaart. */ background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 15px 12px 13px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; } .kpi-label { order: 2; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; line-height: 1.35; margin-bottom: 0; } .kpi-value { order: 1; /* Geen vaste cirkel maar een minimum: korte getallen worden een ronde ring, een bedrag als '€ 9.466,36' rekt uit tot een staafje in plaats van eruit te lopen. */ display: inline-flex; align-items: center; justify-content: center; height: 68px; min-width: 68px; padding: 0 15px; border: 2px solid var(--kpi-ring); border-radius: 999px; font-size: 19px; font-weight: 700; color: var(--text); white-space: nowrap; } /* Betekenis in plaats van decoratie. Als elke ring dezelfde kleur heeft vraagt alles even hard om aandacht, en dan valt niets meer op. Deze drie zetten alleen de RINGKLEUR om; maat en vorm blijven gelijk, zodat de rij rustig blijft. .rustig -> niks aan de hand (meestal een teller op nul) .aandacht-> hier moet je iets mee .koel -> het derde accent, voor wie de hele rij teal wil */ .kpi-card.rustig .kpi-value { border-color: var(--border); color: var(--text-muted); } .kpi-card.aandacht .kpi-value { border-color: var(--warn); } .kpi-card.koel .kpi-value { border-color: var(--accent-2); } .kpi-sub { order: 3; font-size: 11px; color: var(--text-faint); margin-top: -3px; } /* De pijl staat al in het sjabloon (prestaties.html zet zelf een driehoekje op basis van het teken), dus hier GEEN ::before erbij -- dat gaf twee pijlen. */ .kpi-delta { order: 3; font-size: 12px; font-weight: 600; margin-top: -3px; } .kpi-delta.up { color: var(--good); } .kpi-delta.down { color: #C97575; } .kpi-footnote { font-size: 12px; color: var(--text-faint); max-width: 820px; margin: -14px 0 28px; } /* Sectiekopjes tussen groepen panel-grids op een dashboard (Prestaties) -- puur typografisch, geen kader, zodat het duidelijk een groepering is en geen nieuw paneel. */ .dash-section { margin: 32px 0 14px; font-size: 12px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .dash-section:first-of-type { margin-top: 0; } .dash-note { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 14px 18px; margin-top: 24px; font-size: 12.5px; color: var(--text-muted); } .dash-note b { color: var(--text); } .panel-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; } .panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 18px 20px; /* Een grid-item krijgt standaard min-width:auto -- het mag dus nooit smaller worden dan zijn breedste kind (hier .bars, met genoeg kolommen om breder te zijn dan het scherm). Zonder dit blies een brede .bars het hele paneel (en daarmee de pagina) op i.p.v. dat .bars' eigen overflow-x:auto ging scrollen. */ min-width: 0; } .panel h3 { margin: 0 0 16px; font-size: 14px; font-weight: 700; } /* Eenvoudige, afhankelijkheidsvrije staafdiagrammen -- geen chart-library, gewoon divs met een berekende hoogte/breedte. Illustratief, nog geen echte data. */ .bars { display: flex; align-items: flex-end; gap: 18px; height: 140px; padding: 0 4px; /* Bij veel kolommen (bv. 'Dit jaar' -> 12 maanden, of Omzet per week -> 12 weken) past de rij niet meer op een smal (mobiel) scherm -- elke kolom heeft door zijn label (bv. "2026-08 - EUR 11.095") een eigen minimumbreedte, en flex-items krimpen nooit vanzelf onder hun inhoud. Zonder dit zou de hele balk buiten het scherm steken i.p.v. binnen zijn eigen paneel te blijven. */ overflow-x: auto; -webkit-overflow-scrolling: touch; } .bars .bar-col { /* flex: 1 (met de standaard basis 0%) knijpt kolommen WEL onder hun inhoud -- de bar-label werd dan afgekapt/onleesbaar i.p.v. dat de rij ging scrollen, ook al staat overflow-x hierboven al goed. Met een vaste flex-basis (nooit smaller) groeit .bars pas breder dan het scherm zodra dat echt nodig is, en kan de rij dan swipen zoals bedoeld -- op desktop (genoeg ruimte) vullen kolommen nog gewoon de volle breedte via flex-grow. */ flex: 1 0 72px; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; min-width: 72px; } .bars .bar { width: 100%; max-width: 64px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%); min-height: 3px; transition: opacity .12s ease; } .bars .bar-col:hover .bar { opacity: 0.85; } .bars .bar.prev { background: var(--secondary); } .bars .bar-col .bar-label { font-size: 11.5px; color: var(--text-faint); } .bars.two-tone .bar-col { flex-direction: row; align-items: flex-end; gap: 4px; } .hbar-list { display: flex; flex-direction: column; gap: 12px; } .hbar-row .hbar-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; } .hbar-row .hbar-top .name { color: var(--text); font-weight: 600; } .hbar-row .hbar-top .val { color: var(--text-faint); } .hbar-track { background: var(--border-soft); border-radius: 999px; height: 7px; overflow: hidden; } .hbar-fill { height: 100%; background: var(--accent); border-radius: 999px; } .hbar-fill.alt { background: var(--secondary); } .hbar-fill.alt2 { background: var(--tertiary); } .rank-list { display: flex; flex-direction: column; } .rank-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-soft); } .rank-row:first-child { border-top: none; } .rank-num { width: 20px; font-size: 12px; font-weight: 700; color: var(--text-faint); } .rank-name { flex: 1; font-size: 13.5px; } .rank-val { font-size: 13px; color: var(--text-muted); font-weight: 600; } /* ---------------- Voorraad ---------------- */ .filter-details { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 14px 18px; margin-bottom: 8px; } .filter-details summary { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; user-select: none; } .filter-details summary::-webkit-details-marker { display: none; } .filter-details summary::before { content: "▸ "; color: var(--text-faint); } .filter-details[open] summary::before { content: "▾ "; } .filter-badge { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-hover); background: var(--accent-soft); border: 1px solid #E07B3944; border-radius: 999px; padding: 2px 8px; margin-left: 4px; } .filter-form { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 16px 0 0; } .filter-form .field-wide { grid-column: span 2; } .filter-form label.field-label { display: block; font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; margin-bottom: 5px; } .filter-form select, .filter-form input[type="text"] { width: 100%; font-family: var(--font); font-size: 13px; background: var(--surface-raised); color: var(--text); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 10px; } .tag-picker { background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 10px; } .tag-picker summary { cursor: pointer; font-size: 13px; color: var(--text); list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tag-picker summary::-webkit-details-marker { display: none; } .tag-picker[open] summary { margin-bottom: 8px; } .tag-picker-list { display: flex; flex-wrap: wrap; gap: 4px 12px; max-height: 140px; overflow-y: auto; padding-top: 6px; border-top: 1px solid var(--border-soft); } .tag-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; } .tag-check input { accent-color: var(--accent); } .filter-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; } /* Sorteerkeuze naast 'Downloaden als CSV' in de resultaatbalk. De telling links, de twee bedieningen rechts -- vandaar margin-right:auto op de caption in plaats van space-between, dat zou ze bij drie elementen juist uit elkaar trekken. */ .sorteer-form { display: flex; align-items: center; gap: 8px; margin: 0; } .sorteer-form .field-label { margin: 0; white-space: nowrap; } .sorteer-form .select { width: auto; } .result-bar > .caption:first-child { margin-right: auto; } @media (max-width: 880px) { .result-bar { flex-wrap: wrap; gap: 10px; } .sorteer-form { width: 100%; } .sorteer-form .select { flex: 1; } } .result-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); } .product-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 14px 18px; margin-bottom: 10px; display: grid; grid-template-columns: 52px 1fr auto auto; gap: 16px; align-items: center; } .product-sales { text-align: center; color: var(--text-faint); } .product-sales .sparkline { display: block; color: var(--accent); } .product-sales .aantal { font-size: 12px; margin-top: 2px; white-space: nowrap; } .sparkline { cursor: crosshair; } #sparkline-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 5px 9px; font-size: 12px; white-space: nowrap; } .product-thumb { width: 52px; height: 52px; border-radius: var(--radius-sm); background: #ffffff0f; display: grid; place-items: center; overflow: hidden; font-size: 10px; color: var(--text-faint); } .product-thumb img { width: 100%; height: 100%; object-fit: contain; } .product-title { font-weight: 700; font-size: 14.5px; } .product-title a { color: var(--text); text-decoration: none; } .product-title a:hover { color: var(--accent-hover); text-decoration: underline; } .product-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .product-title .set-tag { color: var(--secondary); font-weight: 500; font-size: 13px; } .product-meta { display: flex; flex-direction: column; gap: 2px; } .product-stock { text-align: right; } .product-stock .value { font-size: 22px; font-weight: 700; } .product-stock .label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; } .product-stock .sub { font-size: 12px; color: var(--text-faint); } .pagination { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 20px; } .pagination a.btn.disabled { opacity: 0.35; pointer-events: none; } /* ---------------- Geneste navigatie (Overzicht/Labels met subitems) ---------------- */ .nav-group { border: none; } .nav-group summary { display: block; cursor: pointer; list-style: none; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 14px; font-weight: 500; border-left: 2px solid transparent; transition: background .12s ease, color .12s ease; } .nav-group summary::-webkit-details-marker { display: none; } .nav-group summary::after { content: "›"; float: right; transform: rotate(90deg); transition: transform .12s ease; color: var(--text-faint); } .nav-group[open] summary::after { transform: rotate(-90deg); } .nav-group summary:hover { background: var(--surface); color: var(--text); } .nav-group.has-active summary { color: var(--text); } .nav-sub { margin: 2px 0 2px 21px; padding-left: 10px; border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 1px; } .nav-sub a { display: block; text-decoration: none; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text-faint); font-size: 13px; font-weight: 500; transition: background .12s ease, color .12s ease; } /* Telling achter een zijbalk-item (openstaande bestellingen/retouren). float:right i.p.v. flex op de : die is display:block en dat wil ik niet omgooien, dat raakt ook de items zonder telling. */ .nav-sub a .nav-telling { float: right; min-width: 18px; padding: 1px 6px; border-radius: 2px; background: var(--surface-raised); color: var(--text-muted); font-size: 11px; font-weight: 600; text-align: center; line-height: 16px; } .nav-sub a.active .nav-telling { background: var(--accent); color: #fff; } .nav-sub a:hover { background: var(--surface); color: var(--text); } .nav-sub a.active { background: var(--surface-raised); color: var(--accent); font-weight: 600; } /* ---------------- Mobiel (<880px) -- alle overrides in één blok, aan het eind zodat cascade-volgorde 'm altijd laat winnen van de losse desktop-regels hierboven, ongeacht waar in het bestand die zelf staan. (Stond 'm eerder halverwege het bestand -- alles wat er ONDER kwam te staan, zoals de hele Prestaties-sectie, kon 'm daardoor nooit verslaan: zelfde specificiteit, latere bron-volgorde wint. Dat brak stilletjes .kpi-row/.panel-grid op mobiel.) ---------------- */ @media (max-width: 880px) { body { flex-direction: column; } .menu-toggle { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; width: 100%; background: var(--bg); background-image: var(--bg-gradient); border: none; border-bottom: 1px solid var(--border-soft); padding: 12px 16px; color: var(--text); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; } /* Drie CSS-streepjes i.p.v. een tekstglyph (☰/emoji) -- die viel op sommige systeem-fontfallbacks terug op een reusachtig lettertype en trok het hele knopje krom. Absoluut gepositioneerd i.p.v. flex, want ".bars" bestaat elders al (de Prestaties-staafdiagrammen) en dat collidieert op flex-sizing als je hetzelfde patroon hergebruikt. */ .menu-toggle .bars { position: relative; width: 18px; height: 13px; flex: none; } .menu-toggle .bars span { position: absolute; left: 0; width: 18px; height: 2px; border-radius: 1px; background: var(--text); } .menu-toggle .bars span:nth-child(1) { top: 0; } .menu-toggle .bars span:nth-child(2) { top: 5px; } .menu-toggle .bars span:nth-child(3) { top: 10px; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: #0000008a; z-index: 40; } .sidebar-backdrop.open { display: block; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; max-width: 82vw; z-index: 50; transform: translateX(-100%); transition: transform .2s ease; border-right: 1px solid var(--border-soft); overflow-y: auto; box-shadow: var(--shadow-pop); /* Op desktop hoeft de zijbalk geen eigen achtergrond te hebben -- die deelt gewoon de achtergrond van . Los over de pagina heen geschoven op mobiel moet 'm dat WEL hebben, anders schemert de onderliggende pagina er dwars doorheen. */ background: var(--bg); background-image: var(--bg-gradient); } .sidebar.open { transform: translateX(0); } .main { padding: 16px; max-width: 100%; overflow-x: hidden; } .filter-form select, .filter-form input[type="text"] { max-width: 100%; } .page-header h1 { font-size: 21px; } .kpi-row, .kpi-row.kpi-row-4 { grid-template-columns: repeat(2, 1fr); } .kpi-row.kpi-row-3 { grid-template-columns: repeat(3, 1fr); max-width: 100%; } /* Kleinere ring op mobiel: twee kaarten naast elkaar op ~375px laten anders te weinig ruimte over voor het label eronder. */ .kpi-card { padding: 12px 8px 11px; gap: 7px; } .kpi-value { height: 54px; min-width: 54px; font-size: 16px; padding: 0 10px; border-width: 1.5px; } .kpi-label { font-size: 9.5px; letter-spacing: 0.04em; } .panel-grid { grid-template-columns: 1fr; } .filter-form { grid-template-columns: 1fr 1fr; } .filter-form .field-wide { grid-column: 1 / -1; } .toolbar { flex-direction: column; align-items: stretch; } .toolbar .actions { flex-direction: column; align-items: stretch; } .toolbar .actions .btn { width: 100%; text-align: center; } .order-card-top { flex-direction: column; gap: 8px; } .order-meta { text-align: left; } .dropship-toggle { justify-content: flex-start; } .line-item { grid-template-columns: 36px 1fr; row-gap: 6px; } .line-right { grid-column: 1 / -1; justify-content: space-between; } .ship-row, .tracking-row { grid-template-columns: 1fr; } .ship-row .btn, .tracking-row .btn { width: 100%; } .product-card { grid-template-columns: 44px 1fr; } .product-stock { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 8px; } .product-sales { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: 8px; } } /* Korte toelichting achter een telling, bv. dat concept/archief-artikelen niet in de Voorraad-lijst staan. Gestippelde onderstreping omdat de uitleg in de title-tooltip zit. */ .help-inline { color: var(--text-faint); border-bottom: 1px dotted var(--border); cursor: help; } /* 'Recent toegevoegd' op de Voorraad-lijst: wat er als laatste is aangemaakt en uit welk kanaal het komt. Een rij per artikel, klikbaar naar de productpagina. */ .recent-details { margin-bottom: 14px; } .recent-lijst { display: grid; gap: 2px; padding-top: 4px; } .recent-item { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 12px; align-items: center; padding: 7px 8px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); font-size: 13px; } .recent-item:hover { background: var(--surface-raised); } .recent-thumb { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-raised); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 9px; color: var(--text-faint); flex: none; } .recent-thumb img { width: 100%; height: 100%; object-fit: cover; } .recent-naam { display: grid; line-height: 1.3; } .recent-sub { font-size: 11.5px; color: var(--text-faint); } .recent-kanaal { font-size: 12px; color: var(--text-muted); white-space: nowrap; } .recent-datum { font-size: 12px; color: var(--text-faint); white-space: nowrap; } @media (max-width: 880px) { .recent-item { grid-template-columns: 34px 1fr; row-gap: 3px; } .recent-kanaal, .recent-datum { grid-column: 2; } }