/* ===================================================================== JJ Electric CRM — modern.css --------------------------------------------------------------------- Themalaag. Wordt ná style.css geladen en overschrijft alleen het uiterlijk. Er wordt niets verwijderd: alle bestaande klassenamen blijven werken. Twee thema's, gestuurd door data-theme op : data-theme="light" → lichte werkruimte (standaard) data-theme="dark" → donkere werkruimte De zijbalk is in béide thema's antraciet met goud accent, zodat het logo altijd leesbaar blijft en de navigatie een vast anker vormt. ===================================================================== */ /* ===================================================================== 1. TOKENS ===================================================================== */ /* ---- Vast in beide thema's ---- */ :root { --topbar-h: 64px; --sidebar-w: 262px; --side-bg: #14161b; --side-bg-2: #101216; --side-border: rgba(255, 255, 255, 0.07); --side-text: #c4ccdb; --side-text-str: #f1f4fa; --side-muted: #7a8599; --side-hover: rgba(255, 255, 255, 0.055); /* Merkgoud */ --primary: #E5A528; --primary-dark: #c48c1c; --primary-light: #f6c24e; /* Tekst op een gouden vlak — moet in beide thema's donker blijven */ --on-primary: #17181c; /* Vorm */ --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-pill: 999px; /* Beweging */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --fast: 0.14s var(--ease); --slow: 0.28s var(--ease); } /* ---- LICHT (standaard) ---- */ :root, html[data-theme="light"] { --bg-dark: #f2f5f9; --surface: #ffffff; --surface-2: #f6f8fb; --surface-3: #eaeef4; --surface-hover: rgba(20, 30, 45, 0.035); --bg-card: var(--surface); --bg-input: #ffffff; --secondary: var(--surface); --secondary-light:var(--surface-3); --border: #e3e8ef; --border-strong: #cbd3df; --border-subtle: #edf0f5; --text-primary: #17202e; --text-secondary: #55637a; --text-muted: #5f6e84; /* Goud als tekst op wit heeft te weinig contrast — donkerder variant */ --primary-text: #8a6310; --primary-soft: rgba(229, 165, 40, 0.13); --primary-ring: rgba(229, 165, 40, 0.35); --success: #15803d; --success-soft: rgba(22, 163, 74, 0.11); --success-line: rgba(22, 163, 74, 0.26); --warning: #a8550a; --warning-soft: rgba(217, 119, 6, 0.12); --warning-line: rgba(217, 119, 6, 0.28); --danger: #c62828; --danger-soft: rgba(220, 38, 38, 0.10); --danger-line: rgba(220, 38, 38, 0.24); --info: #1d4ed8; --info-soft: rgba(37, 99, 235, 0.10); --info-line: rgba(37, 99, 235, 0.24); --accent: var(--info); --topbar-bg: #ffffff; --topbar-border: #e3e8ef; --shadow-sm: 0 1px 2px rgba(23, 32, 46, 0.06); --shadow-md: 0 6px 18px -8px rgba(23, 32, 46, 0.18); --shadow-lg: 0 22px 48px -18px rgba(23, 32, 46, 0.28); --shadow-gold: 0 8px 22px -8px rgba(229, 165, 40, 0.5); --canvas-glow: radial-gradient(1100px 620px at 82% -14%, rgba(229, 165, 40, 0.10), transparent 62%); } /* ---- DONKER ---- */ html[data-theme="dark"] { --bg-dark: #0f1013; --surface: #16181d; --surface-2: #1c1f26; --surface-3: #242832; --surface-hover: rgba(255, 255, 255, 0.035); --bg-card: var(--surface); --bg-input: var(--surface-2); --secondary: var(--surface); --secondary-light:var(--surface-3); --border: #272b34; --border-strong: #363c47; --border-subtle: rgba(255, 255, 255, 0.06); --text-primary: #edf0f5; --text-secondary: #a4aebd; --text-muted: #717d8d; --primary-text: #f0b647; --primary-soft: rgba(229, 165, 40, 0.13); --primary-ring: rgba(229, 165, 40, 0.30); --success: #34d399; --success-soft: rgba(52, 211, 153, 0.13); --success-line: rgba(52, 211, 153, 0.28); --warning: #fb923c; --warning-soft: rgba(251, 146, 60, 0.14); --warning-line: rgba(251, 146, 60, 0.30); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.13); --danger-line: rgba(248, 113, 113, 0.28); --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.13); --info-line: rgba(96, 165, 250, 0.28); --accent: var(--info); --topbar-bg: #16181d; --topbar-border: #272b34; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.55); --shadow-lg: 0 22px 48px -16px rgba(0, 0, 0, 0.7); --shadow-gold: 0 6px 20px -6px rgba(229, 165, 40, 0.45); --canvas-glow: radial-gradient(1100px 620px at 82% -14%, rgba(229, 165, 40, 0.05), transparent 62%); } /* ===================================================================== 2. BASIS ===================================================================== */ html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* Horizontaal afknippen hoort ALLEEN op body, nooit op html. Zet je het op het html-element, dan wordt de pagina op Android niet meer met een veeg gescrold — alleen de schuifbalk werkt dan nog. Op body is het onschadelijk: de scroll gaat dan gewoon naar het venster. */ html { overflow-x: visible; } body { overflow-x: hidden; } body { background: var(--canvas-glow), var(--bg-dark); color: var(--text-primary); letter-spacing: -0.005em; font-variant-numeric: tabular-nums; text-rendering: optimizeLegibility; } /* De safe-area-opvulling van body botst met de vaste topbalk; die regelt dat nu zelf. */ @supports (padding-top: env(safe-area-inset-top)) { body { padding-top: 0; } } h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.25; } a { color: var(--primary-text); transition: color var(--fast); text-underline-offset: 3px; } a:hover { color: var(--primary-dark); } html[data-theme="dark"] a:hover { color: var(--primary-light); } ::selection { background: var(--primary-ring); color: var(--text-primary); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); } :focus:not(:focus-visible) { outline: none; } * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; } /* ===================================================================== 3. TOPBALK ===================================================================== */ .topbar { position: fixed; top: 0; left: var(--sidebar-w); right: 0; z-index: 900; display: flex; align-items: center; gap: 0.85rem; height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 1.5rem 0; background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); } .topbar-menu { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; } .topbar-menu svg { width: 19px; height: 19px; } .topbar-menu:hover { background: var(--surface-3); color: var(--text-primary); } /* --- Zoeken --- */ .topbar-search { position: relative; flex: 1; max-width: 440px; display: flex; align-items: center; } .topbar-search svg { position: absolute; left: 0.8rem; width: 17px; height: 17px; color: var(--text-muted); pointer-events: none; } .topbar-search input { width: 100%; padding: 0.55rem 0.9rem 0.55rem 2.4rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--text-primary); font-family: inherit; font-size: 0.875rem; transition: border-color var(--fast), box-shadow var(--fast), background var(--fast); } .topbar-search input::placeholder { color: var(--text-muted); } .topbar-search input:focus { outline: none; background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* --- Acties rechts --- */ .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; } .topbar-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-secondary); cursor: pointer; text-decoration: none; transition: background var(--fast), color var(--fast), border-color var(--fast); -webkit-tap-highlight-color: transparent; } .topbar-btn:hover { background: var(--surface-2); border-color: var(--border); color: var(--text-primary); text-decoration: none; } .topbar-btn svg { width: 19px; height: 19px; } .topbar-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); font-size: 0.62rem; font-weight: 800; line-height: 16px; text-align: center; border: 2px solid var(--topbar-bg); box-sizing: content-box; } /* Toon het icoon dat bij het huidige thema hoort */ .topbar-btn .icon-dark { display: none; } html[data-theme="dark"] .topbar-btn .icon-dark { display: block; } html[data-theme="dark"] .topbar-btn .icon-light { display: none; } .topbar-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.75rem 0.3rem 0.35rem; margin-left: 0.35rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2); text-decoration: none; color: inherit; transition: background var(--fast), border-color var(--fast); } .topbar-user:hover { background: var(--surface-3); text-decoration: none; } .topbar-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--primary-light), var(--primary-dark)); color: var(--on-primary); font-weight: 800; font-size: 0.8rem; } .topbar-user-meta { display: flex; flex-direction: column; min-width: 0; } .topbar-user-name { font-size: 0.8rem; font-weight: 700; line-height: 1.2; color: var(--text-primary); } .topbar-user-role { font-size: 0.68rem; color: var(--text-muted); line-height: 1.2; } /* De oude losse hamburgerknop blijft in de pagina staan, maar wordt vervangen door die in de topbalk. */ .mobile-menu-toggle { display: none !important; } /* ===================================================================== 4. LAYOUT ===================================================================== */ .main-content { margin-left: var(--sidebar-w); padding: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 1.6rem) 1.75rem 3rem; max-width: none; } .page-header { align-items: flex-end; padding-bottom: 1.1rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--border); } .page-title { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; } .page-subtitle { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.35rem; } /* ===================================================================== 5. ZIJBALK — antraciet in beide thema's ===================================================================== */ .sidebar { width: var(--sidebar-w); background: linear-gradient(178deg, var(--side-bg) 0%, var(--side-bg-2) 100%); border-right: 1px solid var(--side-border); color: var(--side-text); } .sidebar-header { padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--side-border); justify-content: center; min-height: var(--topbar-h); } .brand-text { color: var(--side-text-str); } .sidebar nav { padding: 1rem 0.7rem; } .nav-section { margin-bottom: 1.35rem; } .nav-section-title { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; color: var(--side-muted); padding: 0 0.85rem; margin-bottom: 0.5rem; } .nav-link { padding: 0.6rem 0.8rem; border-radius: var(--r-sm); font-size: 0.875rem; font-weight: 500; color: var(--side-text); margin-bottom: 0.1rem; transition: background var(--fast), color var(--fast), box-shadow var(--fast); } .nav-link svg { width: 18px; height: 18px; opacity: 0.7; transition: opacity var(--fast); } .nav-link:hover { background: var(--side-hover); color: var(--side-text-str); } .nav-link:hover svg { opacity: 1; } .nav-link.active { background: rgba(229, 165, 40, 0.14); color: var(--primary-light); font-weight: 600; box-shadow: inset 3px 0 0 var(--primary); } .nav-link.active svg { opacity: 1; color: var(--primary-light); } .sidebar-footer { padding: 0.85rem 0.7rem; border-top: 1px solid var(--side-border); background: transparent; } .user-info { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--side-border); border-radius: var(--r-sm); padding: 0.6rem; } .user-avatar { background: linear-gradient(140deg, var(--primary-light), var(--primary-dark)); border-radius: var(--r-sm); color: var(--on-primary); font-weight: 800; } .user-name { font-size: 0.8rem; color: var(--side-text-str); } .user-role { font-size: 0.68rem; color: var(--side-muted); } /* ===================================================================== 6. KAARTEN ===================================================================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.35rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); } .card-header { margin-bottom: 1.1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border-subtle); } .card-title { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; } .grid { gap: 1.15rem; } /* ===================================================================== 7. STATISTIEK-KAARTEN ===================================================================== */ .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.15rem; align-items: center; gap: 0.9rem; box-shadow: var(--shadow-sm); transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast); } .stat-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-icon { width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--border-subtle); } .stat-icon svg { width: 20px; height: 20px; } /* De oude tints waren restanten van een groen palet */ .stat-icon.yellow { background: var(--primary-soft); color: var(--primary-text); } .stat-icon.blue { background: var(--info-soft); color: var(--info); } .stat-icon.green { background: var(--success-soft); color: var(--success); } .stat-icon.purple { background: rgba(124, 58, 237, 0.12); color: #7c3aed; } html[data-theme="dark"] .stat-icon.purple { background: rgba(167, 139, 250, 0.14); color: #a78bfa; } .stat-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; } .stat-label { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.1rem; } /* ===================================================================== 7b. STATBALKEN — compacte kengetallen Leesvolgorde is vast: icoon → waar het over gaat → het getal → context. Gebruik: .statbar-grid > a.statbar.gold > .statbar-icon + .statbar-body ===================================================================== */ .statbar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .statbar { --statbar-tint: var(--primary); position: relative; overflow: hidden; display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast); } /* Zachte kleurgloed rechtsboven, in de tint van de balk */ .statbar::after { content: ''; position: absolute; right: -36px; top: -36px; width: 100px; height: 100px; border-radius: 50%; background: var(--statbar-tint); opacity: 0.07; pointer-events: none; } .statbar-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-sm); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary-text); } .statbar-icon svg { width: 19px; height: 19px; } .statbar-body { display: flex; flex-direction: column; gap: 0.08rem; min-width: 0; } .statbar-label { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; } .statbar-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; color: var(--text-primary); font-variant-numeric: tabular-nums; } .statbar-unit { font-size: 0.78rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-secondary); margin-left: 0.25rem; } .statbar-sub { font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Kleurvarianten */ .statbar.blue { --statbar-tint: var(--info); } .statbar.green { --statbar-tint: var(--success); } .statbar.purple { --statbar-tint: #7c3aed; } .statbar.orange { --statbar-tint: var(--warning); } .statbar.blue .statbar-icon { background: var(--info-soft); color: var(--info); } .statbar.green .statbar-icon { background: var(--success-soft); color: var(--success); } .statbar.purple .statbar-icon { background: rgba(124, 58, 237, 0.12); color: #7c3aed; } .statbar.orange .statbar-icon { background: var(--warning-soft); color: var(--warning); } html[data-theme="dark"] .statbar.purple .statbar-icon { background: rgba(167, 139, 250, 0.14); color: #a78bfa; } /* Aanklikbare balk: pijl schuift binnen bij hover */ a.statbar:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); text-decoration: none; } a.statbar:active { transform: translateY(0); } .statbar-arrow { margin-left: auto; width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); opacity: 0; transform: translateX(-4px); transition: opacity var(--fast), transform var(--fast); } a.statbar:hover .statbar-arrow { opacity: 1; transform: translateX(0); } @media (max-width: 768px) { .statbar-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.65rem; } .statbar { padding: 0.75rem 0.85rem; gap: 0.65rem; } .statbar-icon { width: 34px; height: 34px; } .statbar-icon svg { width: 17px; height: 17px; } .statbar-value { font-size: 1.25rem; } .statbar-arrow { display: none; } } /* Route-icoon: buiten een knop meeschalen met de tekst. Binnen een knop wint .btn svg, dus daar blijft het 17px. */ .ico-route { width: 1.1em; height: 1.1em; flex-shrink: 0; vertical-align: -0.18em; } /* Waze-knop: het herkenbare Waze-cyaan, met de donkerblauwe inkt die ook in het Waze-logo zit. Wit op dit blauw haalt maar 2,35:1 en is in de zon onleesbaar; deze combinatie zit op 8,1:1. */ .btn-waze { background-color: #33ccff; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 54%), linear-gradient(140deg, #5ad8ff 0%, #22bff2 100%); color: #06293a; border-color: transparent; font-weight: 700; box-shadow: 0 1px 2px rgba(6, 41, 58, 0.2), 0 4px 12px -5px rgba(51, 204, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45); } .btn-waze:hover { color: #06293a; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(6, 41, 58, 0.22), 0 10px 22px -8px rgba(51, 204, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .btn-waze:active { box-shadow: inset 0 2px 5px rgba(6, 41, 58, 0.3); } .btn-waze:focus-visible { box-shadow: 0 0 0 3px rgba(51, 204, 255, 0.55); } .btn-waze .ico-route { color: #06293a; } /* Het Waze-figuurtje. Twee tinten, gestuurd door variabelen zodat het icoon zich aanpast aan wat eronder ligt. - op de blauwe knop: witte kop, donkerblauwe trekjes - op een lichte pagina: donkerblauwe kop, lichte trekjes Verticaal centreren gebeurt door de knop (align-items: center); het icoon moet daarvoor wel display:block zijn, anders staat er onderaan nog een regelafstand onder de tekstlijn. */ .ico-waze { --waze-face: #06293a; --waze-mark: #ffffff; display: block; flex-shrink: 0; width: 1.15em; height: 1.15em; vertical-align: middle; } html[data-theme="dark"] .ico-waze { --waze-face: #e8edf4; --waze-mark: #0f1013; } .btn-waze .ico-waze, html[data-theme="dark"] .btn-waze .ico-waze { --waze-face: #ffffff; --waze-mark: #06293a; } /* In een knop een vaste maat, iets ruimer dan de lijniconen omdat er meer detail in zit */ .btn .ico-waze { width: 19px; height: 19px; } .btn-sm .ico-waze { width: 17px; height: 17px; } .btn-xs .ico-waze { width: 15px; height: 15px; } .btn-lg .ico-waze { width: 22px; height: 22px; } /* ===================================================================== 8. KNOPPEN ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 38px; padding: 0.55rem 1.05rem; border-radius: var(--r-sm); font-size: 0.85rem; font-weight: 600; letter-spacing: -0.006em; line-height: 1.25; border: 1px solid transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--fast), border-color var(--fast), transform var(--fast), box-shadow var(--fast), color var(--fast), filter var(--fast); } .btn svg { width: 17px; height: 17px; flex-shrink: 0; } /* Indrukken laat de schaduw inzakken — dat leest als echt indrukken */ .btn:active { transform: translateY(1px); } .btn:disabled, .btn[disabled], .btn.disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; filter: none; } /* Focusring in de kleur van de knop zelf */ .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); } .btn-danger:focus-visible { box-shadow: 0 0 0 3px var(--danger-line); } .btn-success:focus-visible { box-shadow: 0 0 0 3px var(--success-line); } /* ---- Primair: goud met een lichtrand bovenaan, zodat het metaal lijkt in plaats van een vlak oranje blok ---- */ .btn-primary { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(140deg, var(--primary-light) 0%, var(--primary-dark) 100%); background-color: var(--primary); color: var(--on-primary); box-shadow: 0 1px 2px rgba(23, 24, 28, 0.18), 0 4px 12px -5px rgba(229, 165, 40, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.32); } .btn-primary:hover { transform: translateY(-1px); color: var(--on-primary); box-shadow: 0 2px 4px rgba(23, 24, 28, 0.2), 0 10px 22px -8px rgba(229, 165, 40, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.38); } .btn-primary:active { box-shadow: inset 0 2px 5px rgba(23, 24, 28, 0.28), 0 1px 2px rgba(23, 24, 28, 0.15); } /* ---- Secundair: rustig vlak met een echte rand ---- */ .btn-secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .btn-secondary:hover { background: var(--surface-2); border-color: var(--text-muted); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary:active { box-shadow: inset 0 2px 4px rgba(23, 32, 46, 0.10); } html[data-theme="dark"] .btn-secondary:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); } /* ---- Status: dezelfde opbouw als primair ---- */ .btn-danger, .btn-success { color: #fff; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 52%); box-shadow: 0 1px 2px rgba(23, 24, 28, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .btn-danger { background-color: var(--danger); } .btn-success { background-color: var(--success); } .btn-danger:hover, .btn-success:hover { transform: translateY(-1px); filter: brightness(1.06); } .btn-danger:hover { box-shadow: 0 8px 20px -8px rgba(198, 40, 40, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.26); } .btn-success:hover { box-shadow: 0 8px 20px -8px rgba(21, 128, 61, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.26); } .btn-danger:active, .btn-success:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25); } html[data-theme="dark"] .btn-danger { color: #23090a; } html[data-theme="dark"] .btn-success { color: #06251b; } /* ---- Rustige varianten ---- */ .btn-ghost { background: transparent; color: var(--text-secondary); box-shadow: none; } .btn-ghost:hover { background: var(--surface-hover); color: var(--text-primary); transform: none; } .btn-outline { background: transparent; color: var(--primary-text); border-color: var(--primary-ring); box-shadow: none; } .btn-outline:hover { background: var(--primary-soft); border-color: var(--primary); transform: none; } /* ---- Maten ---- */ .btn-sm { min-height: 32px; padding: 0.35rem 0.7rem; font-size: 0.78rem; border-radius: var(--r-xs); gap: 0.35rem; } .btn-sm svg { width: 15px; height: 15px; } .btn-lg { min-height: 46px; padding: 0.75rem 1.5rem; font-size: 0.95rem; border-radius: var(--r-md); } .btn-lg svg { width: 19px; height: 19px; } /* Extra klein — voor knoppen binnen een tabelrij */ .btn-xs { min-height: 26px; padding: 0.15rem 0.5rem; font-size: 0.72rem; border-radius: var(--r-xs); gap: 0.3rem; box-shadow: none; } .btn-xs svg { width: 13px; height: 13px; } .btn-xs:hover { transform: none; box-shadow: var(--shadow-sm); } /* Alleen een icoon: vierkant, zonder tekstruimte */ .btn-icon { padding: 0; width: 38px; min-height: 38px; gap: 0; } .btn-icon.btn-sm { width: 32px; min-height: 32px; } .btn-icon.btn-xs { width: 26px; min-height: 26px; } .btn-icon.btn-lg { width: 46px; min-height: 46px; } /* Knoppen naast elkaar houden dezelfde hoogte */ .btn-group { align-items: stretch; } /* ===================================================================== 9. FORMULIEREN ===================================================================== */ .form-group { margin-bottom: 1.1rem; } .form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.45rem; } .form-input, .form-select, .form-textarea { padding: 0.68rem 0.9rem; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--r-sm); color: var(--text-primary); font-size: 0.9rem; transition: border-color var(--fast), box-shadow var(--fast), background var(--fast); } @media (max-width: 768px) { .form-input, .form-select, .form-textarea { font-size: 16px; } } .form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--text-muted); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; } .form-input:disabled, .form-select:disabled, .form-textarea:disabled { opacity: 0.6; cursor: not-allowed; background: var(--surface-2); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); } .form-input[readonly] { background: var(--surface-2); color: var(--text-secondary); } /* Let op: hierboven wordt `background` als shorthand gezet, wat repeat en position reset. Voor de select moeten die dus opnieuw mee. */ .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2355637a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1.05rem; padding-right: 2.5rem; } html[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a4aebd'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); } .form-checkbox { gap: 0.6rem; font-size: 0.875rem; } .form-checkbox input { width: 18px; height: 18px; accent-color: var(--primary); } .form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem; } /* ===================================================================== 10. TABELLEN ===================================================================== */ .table-container { border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); } .table > thead > tr > th, .table > tbody > tr > td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } .table > thead > tr > th { background: var(--surface-2); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-secondary); border-bottom: 1px solid var(--border); } .table > tbody > tr > td { font-size: 0.875rem; } .table > tbody > tr { transition: background var(--fast); } .table > tbody > tr:nth-child(even) > td { background: var(--surface-2); } .table > tbody > tr:hover > td { background: var(--primary-soft); } html[data-theme="dark"] .table > tbody > tr:nth-child(even) > td { background: rgba(255, 255, 255, 0.016); } .table > tbody > tr > td a { color: var(--text-primary); font-weight: 500; } .table td a:hover { color: var(--primary-text); } .table-container.sticky-head { max-height: 72vh; overflow: auto; } .table-container.sticky-head .table th { position: sticky; top: 0; z-index: 3; } .table .num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Een tabel binnen een cel (bv. de lijst met wijzigingen) mag de strepen en randen van de buitenste tabel niet erven. */ .table td table td, .table td table th { background: none !important; border: 0; padding: 0.15rem 0; } /* ===================================================================== 11. BADGES ===================================================================== */ .badge { padding: 0.25rem 0.6rem; border-radius: var(--r-pill); font-size: 0.7rem; font-weight: 700; border: 1px solid transparent; align-items: center; line-height: 1.4; } .badge-success { background: var(--success-soft); color: var(--success); border-color: var(--success-line); } .badge-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-line); } .badge-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); } .badge-info { background: var(--info-soft); color: var(--info); border-color: var(--info-line); } .badge-gray { background: var(--surface-3); color: var(--text-secondary); border-color: var(--border-strong); } .tag { padding: 0.22rem 0.6rem; border-radius: var(--r-pill); font-size: 0.7rem; font-weight: 600; } /* ===================================================================== 12. MELDINGEN ===================================================================== */ .alert { padding: 0.9rem 1.05rem; border-radius: var(--r-sm); font-size: 0.875rem; font-weight: 500; box-shadow: var(--shadow-sm); } .alert-success { background: var(--success-soft); border: 1px solid var(--success-line); border-left: 3px solid var(--success); color: var(--success); } .alert-error { background: var(--danger-soft); border: 1px solid var(--danger-line); border-left: 3px solid var(--danger); color: var(--danger); } .alert-warning { background: var(--warning-soft); border: 1px solid var(--warning-line); border-left: 3px solid var(--warning); color: var(--warning); } .alert-info { background: var(--info-soft); border: 1px solid var(--info-line); border-left: 3px solid var(--info); color: var(--info); } /* ===================================================================== 13. TABS ===================================================================== */ .tabs { border-bottom: 1px solid var(--border); gap: 0.15rem; margin-bottom: 1.4rem; } .tab { padding: 0.7rem 0.95rem; font-size: 0.85rem; font-weight: 600; border-bottom: 2px solid transparent; border-radius: var(--r-xs) var(--r-xs) 0 0; transition: color var(--fast), background var(--fast), border-color var(--fast); } .tab:hover { background: var(--surface-hover); color: var(--text-primary); } .tab.active { color: var(--primary-text); border-bottom-color: var(--primary); background: var(--primary-soft); } /* ===================================================================== 14. ZOEKBALK IN DE PAGINA ===================================================================== */ .search-bar { gap: 0.65rem; margin-bottom: 1.15rem; } .search-input-wrapper svg { color: var(--text-muted); width: 17px; height: 17px; } .search-input-wrapper input { padding-left: 2.45rem; } /* ===================================================================== 15. LEGE STAAT ===================================================================== */ .empty-state { padding: 2.75rem 1.25rem; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); } .empty-state svg { width: 40px; height: 40px; opacity: 0.5; margin-bottom: 0.9rem; } .empty-state-title { font-size: 0.95rem; font-weight: 700; } .empty-state-text { font-size: 0.85rem; max-width: 42ch; margin: 0 auto 1rem; } /* ===================================================================== 16. VOORRAADSTATUS + PAGINERING ===================================================================== */ .stock-normal { color: var(--success); font-weight: 600; } .stock-low { color: var(--warning); font-weight: 600; } .stock-critical { color: var(--danger); font-weight: 700; } .pagination { gap: 0.3rem; margin-top: 1.4rem; } .pagination a, .pagination span { padding: 0.45rem 0.8rem; border-radius: var(--r-xs); font-size: 0.8rem; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); transition: background var(--fast), color var(--fast), border-color var(--fast); } .pagination a:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); } .pagination .active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } /* ===================================================================== 17. VOETTEKST ===================================================================== */ .footer-credit { margin-top: 2.75rem; padding: 1.4rem; font-size: 0.72rem; border-top: 1px solid var(--border); color: var(--text-muted); } /* ===================================================================== 18. MOBIEL ===================================================================== */ .sidebar-overlay { background: rgba(10, 12, 16, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .mobile-close-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--side-border); border-radius: var(--r-sm); color: var(--side-text-str); } @media (max-width: 992px) { .sidebar { width: 292px; max-width: 85vw; } .topbar { left: 0; padding-left: 0.9rem; padding-right: 0.9rem; gap: 0.6rem; } .topbar-menu { display: inline-flex; } .main-content { margin-left: 0; padding: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 1.25rem) 1.1rem 2.5rem; } .page-header { padding-left: 0; } .topbar-user-meta { display: none; } .topbar-user { padding: 0.25rem; border: 0; background: transparent; margin-left: 0; } } @media (max-width: 768px) { :root { --topbar-h: 58px; } .main-content { padding-left: 0.9rem; padding-right: 0.9rem; } .page-title { font-size: 1.3rem; } .page-header { flex-direction: column; align-items: stretch; padding-left: 0; } .card { padding: 1.05rem; border-radius: var(--r-sm); } .stat-card { padding: 0.95rem; } .stat-value { font-size: 1.4rem; } .table > thead > tr > th, .table > tbody > tr > td { padding: 0.6rem 0.55rem; } .btn { min-height: 46px; } } @media (max-width: 560px) { /* Het zoekveld krimpt tot een knop en klapt open bij focus */ .topbar-search { max-width: 40px; } .topbar-search input { padding: 0.55rem; width: 40px; cursor: pointer; color: transparent; } .topbar-search input::placeholder { color: transparent; } .topbar-search input:focus { position: absolute; right: 0; width: min(74vw, 320px); padding-left: 2.4rem; color: var(--text-primary); z-index: 5; } .topbar-search svg { left: 0.7rem; } } @media (max-width: 480px) { .main-content { padding-left: 0.7rem; padding-right: 0.7rem; } .page-header { padding-bottom: 0.8rem; margin-bottom: 1.15rem; } } /* Als PWA (standalone) overschrijft style.css de padding met !important; die regels zetten we hier recht. */ @media all and (display-mode: standalone) { .main-content { padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 1.25rem) !important; } .page-header { padding-left: 0; } } /* ===================================================================== 18b. MOBIELE TABBALK Onder 768px verschijnt een vaste balk met de vier schermen die het vaakst gebruikt worden, plus een knop naar het volledige menu. Boven 768px bestaat hij niet. ===================================================================== */ .tabbar { display: none; } @media (max-width: 768px) { .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: flex; align-items: stretch; background: color-mix(in srgb, var(--topbar-bg) 92%, transparent); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-top: 1px solid var(--topbar-border); padding-bottom: env(safe-area-inset-bottom, 0px); } @supports not (background: color-mix(in srgb, red 50%, blue)) { .tabbar { background: var(--topbar-bg); } } .tabbar-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; padding: 0.5rem 0.2rem 0.45rem; min-height: 56px; color: var(--text-muted); text-decoration: none; background: none; border: 0; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; } .tabbar-item svg { width: 21px; height: 21px; } .tabbar-label { font-size: 0.62rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabbar-item:hover { color: var(--text-secondary); text-decoration: none; } .tabbar-item.active { color: var(--primary-text); } .tabbar-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 var(--r-pill) var(--r-pill); background: var(--primary); } .tabbar-badge { position: absolute; top: 4px; left: 50%; margin-left: 4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); font-size: 0.58rem; font-weight: 800; line-height: 15px; text-align: center; } /* Ruimte onder de inhoud zodat de balk niets afdekt */ .main-content { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 1.25rem); } .footer-credit { margin-bottom: 0.5rem; } /* De zwevende PWA-knoppen mogen niet onder de balk vallen */ .offline-indicator { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } .sync-badge { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } .pwa-install-btn { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } } /* ===================================================================== 18c. AANRAAKGEBRUIK ===================================================================== */ @media (hover: none) { /* Zweefeffecten hebben geen zin op een touchscreen en blijven na een tik hangen */ .btn:hover, .stat-card:hover, a.statbar:hover { transform: none; } a, button, .btn, .nav-link, .tab, .topbar-btn, .pagination a { -webkit-tap-highlight-color: transparent; } } @media (max-width: 768px) { /* Zichtbare hint dat een tabel zijwaarts schuift */ .table-container { position: relative; background-image: linear-gradient(to right, var(--surface), transparent 12px), linear-gradient(to left, var(--surface), transparent 12px), linear-gradient(to right, rgba(0, 0, 0, 0.10), transparent 8px), linear-gradient(to left, rgba(0, 0, 0, 0.10), transparent 8px); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 26px 100%, 26px 100%, 10px 100%, 10px 100%; background-attachment: local, local, scroll, scroll; } /* Ruimere raakvlakken */ .nav-link { padding: 0.8rem; } .tab { padding: 0.8rem 0.9rem; } .pagination a, .pagination span { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } .form-checkbox { min-height: 44px; } /* Groter raakvlak voor gewone links in een tabel — maar niet voor knoppen: die zijn flex, en inline-block breekt hun opbouw waardoor icoon en tekst onder elkaar belanden. */ .table td a:not(.btn) { display: inline-block; padding: 0.15rem 0; } } /* ===================================================================== 19. PWA-ELEMENTEN ===================================================================== */ .offline-indicator { border-radius: var(--r-pill); box-shadow: var(--shadow-lg); } .sync-badge { border-radius: var(--r-sm); box-shadow: var(--shadow-md); } .pwa-install-btn { border-radius: var(--r-md); box-shadow: var(--shadow-gold); } /* ===================================================================== 20. AFDRUKKEN ===================================================================== */ @media print { .sidebar, .sidebar-overlay, .topbar, .mobile-menu-toggle, .mobile-close-btn, .footer-credit, .offline-indicator, .sync-badge, .pwa-install-btn, .btn, .btn-group, .pagination, .search-bar { display: none !important; } body { background: #fff !important; color: #000 !important; } .main-content { margin-left: 0 !important; padding: 0 !important; } .card, .stat-card, .table-container { background: #fff !important; border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; } .card-title, .page-title, .stat-value, .table td, .table th { color: #000 !important; } .table th { background: #f1f1f1 !important; } .table tbody tr:nth-child(even) td { background: #fafafa !important; } a { color: #000 !important; text-decoration: none !important; } } /* ===================================================================== 21. BEWEGING BEPERKEN ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .stat-card:hover, .btn:hover, .btn-primary:hover { transform: none; } } /* ===================================================================== 22. HULPKLASSEN ===================================================================== */ .u-muted { color: var(--text-muted); } .u-secondary { color: var(--text-secondary); } .u-num { font-variant-numeric: tabular-nums; } .u-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: -0.02em; } .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-divider { height: 1px; background: var(--border-subtle); border: 0; margin: 1.25rem 0; } .u-stack { display: flex; flex-direction: column; gap: 0.75rem; } .u-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .u-spread { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }