/* ===== OMS — DESIGN SYSTEM ===== */ /* Style: Data-Dense Dashboard */ /* Palette: Cyan / Teal professional */ /* Typography: Fira Sans + Fira Code */ /* ===== THEMA FADE-OVERGANG ===== */ .theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important; } :root { /* ---- Typografie ---- `--font-mono` werd op zeven plekken gelezen als `var(--font-mono, ui-monospace, monospace)` maar was nergens gedefinieerd: die vielen dus terug op het systeemfont, terwijl veertien andere plekken letterlijk 'Fira Code' zetten. Getallen stonden daardoor door de app heen in twee verschillende fonts. Fira Code is lokaal gehost (css/fonts/fira.css), dus dit is de bedoelde stand. */ --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Brand Colors ---- */ --color-primary: #1899FF; --color-primary-hover: #0D7EE0; --color-primary-dark: #0A5AB8; --color-primary-light: #E8F3FF; --color-secondary: #10B981; --color-secondary-hover:#059669; --color-danger: #EF4444; --color-danger-hover: #DC2626; --color-warning: #F59E0B; --color-orange: #F97316; --color-red: #DC2626; /* De tegenhanger van --color-danger. Ontbrak: alles wat `var(--color-success)` schreef viel stil terug op de geërfde tekstkleur, waardoor "goed"-vinkjes en -randen grijs bleven in plaats van groen. Bewust #22C55E en niet het donkerdere #16A34A dat elders in OMS staat: een bevestigingsvinkje van 13 pixels moet in één oogopslag als GROEN lezen, en die donkere tint gaat op die maat richting grijsgroen. */ --color-success: #22C55E; /* ---- Taakkleuren (dashboard) ---- Eén token per taaktype, gebruikt door zowel de kaartkop als het badge-rondje. Nooit hardcoded in css/dashboard.css — dan lopen kop en badge uiteen. */ --taak-followup: #F97316; --taak-afgekeurd: #EF4444; --taak-pms_orderbevestiging: #0EA5E9; /* Retourtermijn (migratie 111): AMBER, dezelfde familie als de naleveringspill op ?page=besteloverzicht. Niet rood — dat is de kleur van een afgekeurde orderbevestiging, en een naderende termijn is een herinnering, geen afwijzing. */ --taak-retour_termijn: #D97706; /* Een paststuk dat te lang klaarligt (migratie 128): ROZE. Bewust NIET violet (dat is de externe bewerking, in de inboekwizard en het orderverloop) en niet amber (de retourtermijn, die op hetzelfde dashboard staat) — passen is een vierde route en mag op geen van de drie lijken. */ --taak-pas_wacht: #DB2777; --taak-custom: var(--color-primary); /* ---- Light Theme (default) ---- */ --bg-page: #F4F4F4; --bg-sidebar: #FFFFFF; --bg-sidebar-hover: rgba(24, 153, 255, 0.08); --bg-sidebar-active: #1899FF; --bg-card: #FFFFFF; --bg-card-hover: #F0F7FF; --bg-input: #FFFFFF; --bg-header: #FFFFFF; --bg-modal: #FFFFFF; --bg-table-header: #eaeaea; --bg-table-row-hover: #E4EFFF; --bg-subtle: #F0F2F5; --bg-overlay: rgba(0, 0, 0, 0.45); /* Vlak achter een pdf.js-canvas. Bewust donkerder dan --bg-card: het witte papiervel moet als vel lezen, en op een kaartkleur valt de rand weg. */ --bg-pdf-viewer: #D9D9D9; /* ---- Text ---- */ --text-primary: #0C1A2E; --text-secondary: #4A6070; --text-muted: #5E7A8C; --text-sidebar: #0C1A2E; --text-sidebar-active: #FFFFFF; --text-heading: #0C1A2E; --text-link: #1899FF; /* ---- Borders ---- */ --border-color: #C5DFFF; --border-input: #A8C8F0; --border-focus: #1899FF; /* ---- Shadows ---- */ --shadow-sm: 0 1px 3px rgba(24, 153, 255, 0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(24, 153, 255, 0.08), 0 2px 4px rgba(0,0,0,0.05); --shadow-lg: 0 10px 30px rgba(24, 153, 255, 0.12), 0 4px 10px rgba(0,0,0,0.06); --shadow-modal: 0 25px 60px rgba(0, 0, 0, 0.16), 0 10px 20px rgba(0,0,0,0.08); /* ---- Layout ---- */ --sidebar-width: 252px; --sidebar-collapsed-width: 64px; --header-height: 60px; /* ---- Motion ---- */ --transition: all 0.18s ease; --transition-slow: all 0.28s ease; /* ---- Radius ---- */ --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 18px; --radius-full: 9999px; } /* ===== DARK V2 THEME (grafiet/charcoal — neutraal, warm donker) ===== */ [data-theme="dark-v2"] { /* ---- Donkerheid-regelaar ---- `--dark-lift` is het percentage wit dat door alle donkere vlakken heen gemengd wordt: 0% = het originele pikzwarte grafiet, hoger = zachter grijs. De waarde wordt door js/theme.js als inline style op gezet (slider in de header); de declaratie hieronder is enkel de fallback voor wie nog nooit aan de slider heeft gezeten. Bewust één enkele variabele en geen losse kleuren per stand: zo houden page, sidebar, kaart en tabel onderling dezelfde verhouding, ongeacht waar de slider staat. Mengen gebeurt in srgb — in oklab verschuift de licht-blauwe ondertoon van #1E1E21 zichtbaar bij hogere standen. */ --dark-lift: 0%; --bg-page: color-mix(in srgb, #FFFFFF var(--dark-lift), #000000); --bg-sidebar: color-mix(in srgb, #FFFFFF var(--dark-lift), #111113); --bg-sidebar-hover: rgba(255, 255, 255, 0.06); --bg-sidebar-active: rgba(24, 153, 255, 0.80); --bg-card: color-mix(in srgb, #FFFFFF var(--dark-lift), #1E1E21); --bg-card-hover: color-mix(in srgb, #FFFFFF var(--dark-lift), #252528); --bg-input: color-mix(in srgb, #FFFFFF var(--dark-lift), #1A1A1D); --bg-header: color-mix(in srgb, #FFFFFF var(--dark-lift), #111113); --bg-modal: color-mix(in srgb, #FFFFFF var(--dark-lift), #1E1E21); --bg-table-header: color-mix(in srgb, #FFFFFF var(--dark-lift), #161618); --bg-table-row-hover: color-mix(in srgb, #FFFFFF var(--dark-lift), #252528); --bg-subtle: color-mix(in srgb, #FFFFFF var(--dark-lift), #161618); --bg-overlay: rgba(0, 0, 0, 0.65); --bg-pdf-viewer: color-mix(in srgb, #FFFFFF var(--dark-lift), #0E0E10); --text-primary: #F0F0F2; --text-secondary: #A0A0A8; --text-muted: #D6DCE1; --text-sidebar: #B0B0B4; --text-sidebar-active: #FFFFFF; --text-heading: #F0F0F2; --text-link: rgba(24, 153, 255, 0.85); /* Randen liften mee: blijven ze op hun oorspronkelijke waarde staan, dan lossen ze bij een hogere stand op in het (dan lichtere) vlak ernaast. */ --border-color: color-mix(in srgb, #FFFFFF var(--dark-lift), #2A2A2E); --border-input: color-mix(in srgb, #FFFFFF var(--dark-lift), #323236); --color-primary: rgba(24, 153, 255, 0.80); --color-primary-hover: rgba(24, 153, 255, 0.65); --border-focus: rgba(24, 153, 255, 0.80); --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 10px 30px rgba(0,0,0,0.6); --shadow-modal: 0 25px 60px rgba(0,0,0,0.75); --color-red: #F87171; /* Op een donkere ondergrond mag het nog een stap helderder. */ --color-success: #4ADE80; /* Taakkleuren iets gedempt: op een zwarte kaart is het lichte origineel te fel. */ --taak-followup: #C2410C; --taak-afgekeurd: #B91C1C; --taak-pms_orderbevestiging: #0369A1; --taak-retour_termijn: #B45309; --taak-pas_wacht: #BE185D; }